@font-face {
   font-family: "Mada-Medium";
   src:url(../fonts/Mada-Medium.ttf);
}

@font-face {
   font-family: "Mada-Black";
   src:url(../fonts/Mada-Black.ttf);
}

:root {
   --primary-color: #007dbe;
   --secondary-color: cornflowerblue;
   --terceary-color: #6495ed;
   --blue-text-color: cornflowerblue;
}

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: 'Mada-Medium', cursive;
   list-style: none;
   text-decoration: none;
}

body {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   min-height: 100vh;
   background:
      linear-gradient(#007dbe, transparent),
      linear-gradient(to top left, cyan, transparent),
      linear-gradient(to top right, lime, transparent);
   background-blend-mode: screen;
   background-attachment: fixed;
   -webkit-font-smoothing: antialiased;
}

.square0, .square1 {
   position: fixed;
   backdrop-filter: blur(5px);
   box-shadow: 0 25px 45px rgba(0,0,0,0.1);
   border-radius: 10px;
   background: rgba(255,255,255,.5);
}

.square0 {
   width: 100px;
   height: 100px;
   top: 15%;
   right: 10%;
   z-index: -50;
   background: linear-gradient(135deg, yellow, lime);
   animation: move-x 30s linear infinite;
} 

.square1 {
   width: 220px;
   height: 220px;
   bottom: 10%;
   left: 30%;
   z-index: -60;
   background: linear-gradient(45deg,  #ffeb3b, #ff00e0);
   animation: move-y 10s linear infinite;
}

@keyframes move-x {
   0%, 100%
      {transform: translateX(0px);}
   50%
      {transform: translateX(-700px);}
}

@keyframes move-y {
   0%, 100%
      {transform: translateY(0px);}
   50%
      {transform: translateY(-400px);}
}

header {
   position: fixed;
   top: 20px;
   width: calc(100% - 20px);
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 2px;
   background: rgba(255,255,255,0.2);
   box-shadow: 0 15px 35px rgba(0,0,0,0.05);
   border-radius: 37.5px;
   backdrop-filter: blur(5px);
   border: 1px solid rgba(255,255,255,0.25);
   border-top: 1px solid rgba(255,255,255,0.5);
   border-left: 1px solid rgba(255,255,255,0.5);
   z-index: 900;
}

header .logo {
   opacity: 0.95;
   width: 70px;
   display: flex;
}

.nav_links li {
   text-transform: uppercase;
   font-size: 1em;
   letter-spacing: .05em;
}

.nav_links {
   display: flex;
   justify-content: center;
   align-items: center;
}

.nav_links li a {
   position: relative;
   color: #007dbe;
   border-radius: 15px;
   padding: 10px;
}

.nav_links li a.active
{
   background: rgba(255,255,255,0.25);
   box-shadow: 0 5px 10px rgba(0,0,0,0.1);
   color: #fff;
   text-shadow: 0 0 10px #fff,
                0 0 20px #fff,
                0 0 40px #fff,
                0 0 80px #fff,
                0 0 120px #fff;
}

.nav_links li a:hover {
   color: #fff;
   text-shadow: 0 0 10px #fff,
                0 0 20px #fff,
                0 0 40px #fff,
                0 0 80px #fff,
                0 0 120px #fff;
}

main {
   padding: 90px 0 30px 0;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}

section {
   padding: 3em 0 3em 0;
   margin: 2em 0;
}

.hero-section {
   display: flex;
   width: 100%;
   height: 550px; 
   border-radius: 16% 35% 35% 19% / 30% 45% 45% 25%;
   background: linear-gradient(to right bottom,
   rgba(255,255,255,0.5), rgba(125,125,125,0.25));
   backdrop-filter: blur(2px);
   box-shadow: 10px 10px 10px rgba(0,0,0,0.1);
}  

.hero-section .container {
   display: flex;
   align-items: center;
}

.hero-section .welcome {
   display: flex;
   flex-direction: column;
   flex: 1;
   justify-content: center;
   padding: 2rem;
   text-align: center;
}

.hero-section p span {
   font-family: 'Mada-Black';
   color: rgba(0,125,190,.75);
}

.hero-section p {
   letter-spacing: .15em;
   line-height: 1.45em;
   font-family: 'Mada-Black';
   font-size: 1.7em;
   color: rgba(255,255,255,0.05);
   text-shadow: -1px -1px 2px rgba(255,255,255,0.75),
                 1px  1px 2px rgba(0,0,0,0.75);
}

.hero-section .hero-img{
   position: absolute;
   top: 50px;
   right: 50px;
   justify-content: center;
   align-items: center;
   width: 245px;
   height: 245px;
   border-radius: 50%;
   overflow: hidden;
}

.sphere {
   display: flex;
   position: relative;
   width: 350px;
   height: 350px;
   border-radius: 50%;
   z-index: 5;  
   box-shadow: 20px 20px 20px rgba(0,0,0,0.25);
   margin: 0 1em 0 0;
}

.sphere:before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 10; 
   border-radius: 50%;
   box-shadow: inset 0 50px 50px rgba(255,255,255,0.35),
               inset 0 -50px 50px rgba(0,0,0,0.25);
}

.hero-img video {
   position: absolute;
   top: -2px;
   left: -100px;
   width: 500px;
   height: 102%;
   opacity: 0.7;
}

.service-section {
   display: flex;
   align-items: center;
   flex-direction: column;
   background: linear-gradient(to right bottom,
   rgba(155,155,155,0.25), rgba(155,155,155,0.1));
   backdrop-filter: blur(5px);
   border-radius: 60% 65% 55% 75% / 40% 55% 75% 75%;
   box-shadow: 10px 10px 10px rgba(0,0,0,0.1);
   width: calc(100% - 4px);
   height: 500px; 
}

.card-view {
  width: 555px;
  height: 300px;
  overflow: hidden;
}

.card-view .card-items {
   display: flex;
   padding: 1em 2em 3em 0em;
   width:1710px;
   transform: translateX(0px);
   will-change: transform;
   transition: 0.2s;
}

.card-items .card {
   justify-content: center;
   align-items: center;
   position: relative;
   width: 150px;
   height: 220px;
   transform-style: preserve-3d;
   perspective: 500px;
   margin: 0px 35px 0px 4px;
}

.card-items .card .face {
   position: absolute;
   display: flex;
   justify-content: center;
   align-items: center;
   top: 0;
   Left: 0;
   width: 100%;
   height: 100%;
   box-shadow: 15px 15px 15px rgba(0,0,0,0.4);
   border-radius: 15px;
   border-top: 1px solid rgba(255,255,255,0.5);
   border-left: 1px solid rgba(255,255,255,0.5);
   background: rgba(255,255,255,0.05);
   overflow: hidden;
   backdrop-filter: blur(10px);
   transform-style: preserve-3d;
   transition: 1s;
   backface-visibility: hidden;
   padding: 1em;
}

.card-items .card .face.front img {
   position: absolute;
   top: 40px;
   height: 65px;
   width: 75px;
}

.card-items .card .face.back p{
   font-size: 1em;
   color: var(--primary-color); 
}

.card-items .card:hover .face.front {
   transform: rotateY(180deg);
}
.card-items .card .face.back {
   transform: rotateY(180deg);
}
.card-items .card:hover .face.back {
   transform: rotateY(360deg);
   background: rgba(255,255,255,0.4);
}
.card-container1 .card:hover {
   transform: translateY(-50px);
}
.slider {
   display: flex;
}

.next-service, .back-service {
   position: relative;
   top: calc(30%);
   height: 40px;
   width: 40px;
   background: rgba(255,255,255,0.25);
   box-shadow: 5px 5px 10px rgba(0,0,0,0.25);
   backdrop-filter: blur(5px);
   cursor: pointer;
   border-radius: 50%;
   border: 4px solid rgba(255,255,255,0.5);
   display: flex;
   justify-content: center;
   align-items: center;
}

.next-service {
    margin: 0 0 0 -10px;
}

.back-service {
    margin: 0 15px 0 0;
}

.next-service:before, .back-service:before {
   content: '';
   position: relative;
   height: 10px;
   width: 10px;
   border-top: 5px solid #007dbe;
   border-right: 5px solid #007dbe;
}

.next-service:before {
   transform: rotate(45deg);
   Left: -3px;
}

.back-service:before {
   transform: rotate(-135deg);
   Left: 3px;
}

.next-service:hover, .back-service:hover {
   border: 4px solid rgba(255,255,255,0.75);
   box-shadow: 0 0 10px rgba(255,255,255,0.75),
               0 0 20px rgba(255,255,255,0.75),
               0 0 40px rgba(255,255,255,0.75),
               0 0 100px rgba(255,255,255,0.75);

}

.card-items .card .face.front h2{
   position: relative;
   top: 40px;
   font-size: 1.25em;
   color: rgba(255,255,255,0.95);
   text-align: center;
   letter-spacing: .04em;
}
.service-section a::before {
   content: '';
   position: relative;
   top: 0;
   left: 0;
}

.contact-section {
   width: 100%;
   height: auto; 
   display: flex;
   align-items: center;
   flex-direction: column;
   background: linear-gradient(to right bottom,
   rgba(0,0,0,0.1), rgba(0,0,0,0.2));
   border-top: 1px solid rgba(255,255,255,0.25);
   border-left: 1px solid rgba(255,255,255,0.05);
   backdrop-filter: blur(3px);
   border-radius: 70% 25% 55% 95% / 75% 65% 55% 60%;
}

.contact-section .contact-container {
   display: flex;
   padding: 2rem 0 2rem 0; 
}

.contact-text {
   display: flex;
   padding-right:  1rem;
   flex-direction: column;
}

.contact-info {
   display: flex;
   justify-content: left;
   align-items: center;
   width: 335px;
   margin: 5px 0 5px 0;
   padding: .5rem;
   box-shadow: 5px 5px 10px rgba(0,0,0,0.25);
   border-radius: 10px;
   border-top: 1px solid rgba(255,255,255,0.25);
   border-left: 1px solid rgba(255,255,255,0.05);
   background: rgba(255,255,255,0.35);
   overflow: hidden;
   backdrop-filter: blur(5px);
}

.contact-info:hover {
   transform: scale(1.1, 1.1);
   background: rgba(255,255,255,0.65);
}

.contact-info img {
   height: 25px;
   width: 25px;
   margin: 0px 5px 0px 0px;  
}

.contact-info h4{
   font-size: 1.1em;
   color: var(--primary-color);
   margin: 0px 0px 0px 5px; 
}

.contact-info h4 a{
   color: var(--primary-color);
}

.contact-smi ul {
   display: flex;
   justify-content:  flex-end;
   padding: 10px;
}

.contact-smi ul li a{
   width: 50px;
   height: 50px;
   display: inline-block;
   border-radius: 5px;
   display: flex;
   justify-content: center;
   align-items: center;
   margin: 0px 0px 0px 15px; 
   border: 1px solid rgba(255,255,255,0.5);
   border-bottom: 1px solid rgba(255,255,255,0.2);
   border-right: 1px solid rgba(255,255,255,0.2);
   backdrop-filter: blur(5px);
   box-shadow: 5px 5px 10px rgba(0,0,0,0.25);
}

.contact-smi ul li a:hover{
   box-shadow: 0 0 10px rgba(255,255,255,0.75),
               0 0 20px rgba(255,255,255,0.75),
               0 0 40px rgba(255,255,255,0.75),
               0 0 80px rgba(255,255,255,0.75);
}

.contact-smi li a:hover img{
   transform: rotate(360deg);
}

.contact-smi li a img {
   height: 25px;
   width: 25px;
   transition: 0.5s;
}

.location-map {
   display: flex;
   justify-content: left;
   align-items: center;
   padding: .75rem;
   box-shadow: 5px 5px 10px rgba(0,0,0,0.25);
   border-radius: 10px;
   border-top: 1px solid rgba(255,255,255,0.25);
   border-left: 1px solid rgba(255,255,255,0.05);
   background: rgba(255,255,255,0.05);
   overflow: hidden;
   backdrop-filter: blur(5px);
   margin: 0 0 0 10px;
}

iframe {
   height: 325px;
   width: 325px;
   opacity: 0.8;
}

.copyright {
   width: 100%;
   text-align: center;
   padding: 15px;
   color: #fff;
   font-size: .9em;
}

.rounded-button a {
   padding: 8px 25px;
   border-radius: 25px;
   border: 4px solid rgba(255,255,255,0.5);
   background: rgba(255,255,255,0.25);
   text-transform: uppercase;
   font-size: 1em;
   letter-spacing: .05em;
   color: #007dbe;
   box-shadow: 5px 5px 10px rgba(0,0,0,0.25);
   backdrop-filter: blur(5px);
}

.rounded-button a:hover {
   border: 4px solid rgba(255,255,255,0.75);
   box-shadow: 0 0 10px rgba(255,255,255,0.75),
               0 0 20px rgba(255,255,255,0.75),
               0 0 40px rgba(255,255,255,0.75),
               0 0 80px rgba(255,255,255,0.75);
  color: #fff;
}

h1 {
   font-size: 2.5em;
   font-family: Mada-Black;
   color: var(--primary-color); 
   letter-spacing: .05em;
   padding: 1rem;
   text-align: center;
}

.container-service {
   display: flex;
   justify-content: center;
   flex-direction: column;
   align-items: center;
}

.service-descr {
   background: red;
   position: relative;
   width: calc(100% - 40px);
   height: auto; 
   border-radius: 25px;
   padding: 40px;
   background: rgba(0,0,0,0.15);
   box-shadow: 0 15px 25px rgba(0,0,0,0.25);
   backdrop-filter: blur(5px);
   border: 1px solid rgba(255,255,255,0.25);
   border-top: 1px solid rgba(255,255,255,0.5);
   border-left: 1px solid rgba(255,255,255,0.5);
   color: #fff;
   margin: 120px 0 20px;
}

.imgServc {
   position: absolute;
   height: 110px;
   width: 110px;
   background: blue;
   top: -55px;
   left: 50%;
   transform: translateX(-50%);
   display: flex;
   justify-content: center;
   align-items: center;
   border-radius: 65px;
   background: rgba(0,0,0,0.15);
   backdrop-filter: blur(5px);
   border: 1px solid rgba(255,255,255,0.25);
}

.imgServc img {
   height: 100px;
   width: 100px;
   border-radius: 50px;
}

.service-descr h2 {
   text-transform: uppercase;
   font-size: 1.75em;
   letter-spacing: .1em;
   margin: 30px 0px 10px 0px; 
}

.service-descr p {
   font-size: 1.2em;
   letter-spacing: .1em;
   margin-top: 1rem;
}

.service-descr p span {
   font-family: 'Mada-Black';
   color: rgba(0,125,190,.75);
}

.service-descr li {
   font-size: 1.2em;
   letter-spacing: .1em;
   padding-left: 20px;
   margin-top: .5em;
   margin-top: .75rem;
}

.service-descr li span {
   font-family: 'Mada-Black';
}

@media (min-width: 992px) {
   header {
      max-width: 950px;
   }
   .hero-section {
      max-width: 900px;
   }
   .contact-section {
      max-width: 920px;
   }
}

@media (min-width: 768px) {

  .service-section {
      max-width: 760px;
  }
   .contact-section {
      width: calc(100% );
   }
   .container-service {
      max-width: 750px;
   }
}

@media (max-width:768px){

   .hero-section {
      border-radius: 20% 25% 65% 40% / 35% 25% 45% 55%;
      height: auto; 
   }
   .hero-section .container {
      flex-direction: column;
   }
   .hero-section .container .welcome {
      max-width: 600px;
   }
   .card-view {
      width: 372px;
   }
   .contact-section .contact-container {
      flex-direction: column;
   }
   .contact-section {
      border-radius: 25% 20% 55% 75% / 25% 35% 55% 40%;
   }
   .location-map {
      margin: 0;
   }
}

@media (max-width:600px){
   header {
      flex-direction: column;
      max-width: 400px;
   }
   header .logo {
      margin: 0 0 10px 0;
   }
   .card-view {
      width: 185px;
   }
}