/*!
 * Team Versions Website CSS v2
 * Copyright 2024 ikuTeam
 */


 /*!
  * Backgrounds styles
  */
  
 .bg-full {
   background-image: url("../img/content/hero-bg.jpg");
   background-size: cover;
   background-position: bottom center;
 }

 
 .bg-grad {
   background: rgb(215,215,215);
   background: -moz-linear-gradient(0deg, rgba(215,215,215,1) 0%, rgba(255,255,255,1) 40%);
   background: -webkit-linear-gradient(0deg, rgba(215,215,215,1) 0%, rgba(255,255,255,1) 40%);
   background: linear-gradient(0deg, rgba(215,215,215,1) 0%, rgba(255,255,255,1) 40%);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#d7d7d7",endColorstr="#ffffff",GradientType=1); 
 }
 
 .bg-hero {
   height: calc(100vh - 68px);
   min-height: 960px;
   clip-path: inset(0px 0px);
 }
 
 .hero {
   position: absolute;
   align-items: center;
   text-align: center;
   width: 100%;
   max-width: 1320px;
   height: calc(100vh - 68px);
   min-height: 960px;
   transform: scale(0.92);
 }
 
 

.waves {
transform: scale(4.2);
opacity: .5;
}

.nudge {
  transform: translate(0px, 3em);
}

 @media (max-width:1399px) {
 
   .bg-hero {
     min-height: 850px;
   }
 
   .hero {
     max-width: 1140px;
     transform: scale(0.8);
   }
 }
 
 @media (max-width:1199px) {
 
   .bg-hero {
     min-height: 800px;
   }
 
   .hero {
     max-width: 960px;
     transform: scale(0.7);
   }
 
   .imac-ss {margin-left: -90px;}
 }
 
 @media (max-width:1024px) {
 
   .bg-hero {
     min-height: 800px;
   }
 
   .hero {
     max-width: 960px;
     transform: scale(0.65);
   }
 }
 
 @media (max-width:991px) {
 
   .bg-hero {
     min-height: 800px;
   }
 
   .hero {
     max-width: 720px;
     transform: scale(0.55);
     max-height: 1100px;
   }
 
   .imac-ss {margin-left: -220px;}
 }
 
 @media (max-width:767px) {
   .hero {
     max-width: 540px;
     transform: scale(0.4);
     margin-top: 80px;
   }
 
   .imac-ss {margin-left: -310px;}
 
   .ripple-feat {margin-left: -90px;}
 
   .ripple-apps {margin-left: -60px;}
 
 }
 
 @media (max-width:575px) {
 
   .bg-hero {
     min-height: 700px;
   }
 
   .hero {
     max-width: 540px;
     transform: scale(0.33);
     margin-top: 80px;
     margin-left: -80px;
   }
 
   .imac-ss {margin-left: -310px;}
 
   .ripple-apps {margin-left: -70px;}
 
   .ripple-clouds {margin-left: -10px;}
 
   .app-icon {
     width: 588px;
     transform: scale(.33);
     margin-left: -30px;
   }
 
 }
 
 @media (max-width:375px) {
   .bg-hero {
     min-height: 690px;
   }
 
   .hero {
     max-width: 375px;
     transform: scale(0.25);
     margin-top: 80px;
     margin-left: -80px;
   }
 }
 
 .hero-img {
   padding-top: 0rem;
   -ms-flex: 0 0 100%;
   flex: 0 0 100%;
   max-width: 100%;
 }
 
 @media (max-height:800px) and (min-width: 600px) {
   .hero-img {
     padding-top: 4px;
     -ms-flex: 0 0 66%;
     flex: 0 0 66%;
     max-width: 66%;
   }
 }
 
 /* The animation code */
 @keyframes ripple0 {
   0%   {transform: scale(0); opacity: 0.3;}
   100% {transform: scale(5); opacity: 0;}
 }
 
 @keyframes ripple1 {
   0%   {transform: scale(0.5); opacity: 0.0;}
   100% {transform: scale(1); opacity: 0.6;}
 }
 
 @keyframes ripple2 {
   0%   {transform: scale(0.75); opacity: 0.0;}
   100% {transform: scale(1.475); opacity: 0.4;}
 }
 
 @keyframes ripple3 {
   0%   {transform: scale(1.5); opacity: 0.0;}
   100% {transform: scale(3); opacity: 0.3;}
 }
 
 .ripple-0 {
   transform: scale(0);
   animation: ripple0 5s linear 0s infinite normal;
 }
 
 .ripple-1 {
   opacity: 0.6;
   transform: scale(1);
   animation: ripple1 1s cubic-bezier(0.4, 0.4, 0.8, 1.1) 0s 1 normal;
 }
 
 .ripple-2 {
   transform: scale(1.475);
   opacity: 0.4;
   animation: ripple2 1.5s cubic-bezier(0.4, 0.4, 0.8, 1.1) 0s 1 normal;
 }
 
 .ripple-3 {
   transform: scale(3);
   opacity: 0.3;
   animation: ripple3 3s cubic-bezier(0.4, 0.4, 0.8, 1.1) 0s 1 normal;
 }
 
 @keyframes ripplefeat {
   0%   {transform: scale(0.45); opacity: 0.0;}
   50%   {transform: scale(0.68); opacity: 0.0;}
   100% {transform: scale(0.91); opacity: 1;}
 }
 
 @keyframes rippleapps {
   0%   {transform: scale(0.7); opacity: 0.0;}
   50%   {transform: scale(1); opacity: 0.0;}
   100% {transform: scale(1.36); opacity: 1;}
 }
 
 @keyframes rippleclouds {
   0%   {transform: scale(1.5); opacity: 0.0;}
   50%  {transform: scale(2.25); opacity: 0.0;}
   100% {transform: scale(3.08); opacity: 1;}
 }
 
 .ripple-feat {
   transform: scale(0.91);
   opacity: 1;
   animation: ripplefeat 1s cubic-bezier(0.4, 0.4, 0.8, 1.1) 0s 1 normal;
 }
 
 .ripple-apps {
   transform: scale(1.36);
   opacity: 1;
   animation: rippleapps 1.5s cubic-bezier(0.4, 0.4, 0.8, 1.1) 0s 1 normal;
 }
 
 .ripple-clouds {
   transform: scale(3.08);
   opacity: 1;
   animation: rippleclouds 3s cubic-bezier(0.4, 0.4, 0.8, 1.1) 0s 1 normal;
 }