/** Fonts **/
/** Inter, Space Grotesk, Urbanist **/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Space+Grotesk:wght@300..700&family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap');

/** Oswald **/
@import url('https://fonts.googleapis.com/css2?family=League+Gothic&family=Oswald:wght@200..700&display=swap');

/** League Gothic **/
@import url('https://fonts.googleapis.com/css2?family=League+Gothic&display=swap');

/** Poppins **/
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/** Public Sans **/
@font-face {
 font-family: 'PublicSans';
  src: url('../fonts/PublicSans-Regular.otf');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/** Bootstrap Icons **/
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");

/****************************************************************************/

/** All Elements **/
*{padding:0; margin:0; font-family:"PublicSans"; box-sizing:border-box;}
/* html, body {
  max-width: 100vw;
  overflow-x: hidden !important;
}
@media screen and (max-width: 600px) {
  html, body {
    width: 100vw !important;
    overflow-x: hidden !important;
  }
  img, video, .hero-container, .hero-tag, .hero-promo, .service-card, .tools-logo-container, .clients-container, .domain-content, .bubble-container {
    max-width: 100vw !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
} */
a:hover{text-decoration:none !important; color:var(--accent) !important;
 text-shadow:0 0 40px var(--shadow);}
body{position: static; }

/** Declared Variables **/
:root{
 --primary:#0c0c0c;
 --secondary:#f5f5f5;
 --accent:#faff00;
 --shadow:#FFFF00;
 --background:#131313;
 --heading:'League Gothic', halvetica, arial, "opan sans";
 --secondary-heading: Poppins, halvetica, arial, "opan sans";
 --text-default: Inter, halvetica, arial, "opan sans";
 --fs-h1:10vw;
 --fs-h2:6vw;
 --neon-shadow:0 0 40px var(--shadow);
 --accent-shadow:#faff00db;
 --grey:#696161;
}

/** Custom Scrollbar **/
/* width */
::-webkit-scrollbar {width: 10px;}

/* Track */
::-webkit-scrollbar-track {background: var(--secondary);}

/* Handle */
::-webkit-scrollbar-thumb {background:#bfc302;}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {background: var(--accent-shadow); box-shadow:1px 1px 10px var(--accent);}

/** Custom Text Selection Color **/
::-moz-selection { /* Code for Firefox */
  color:var(--primary) !important;
  background:var(--accent) !important;
}

::selection {
  color:var(--primary) !important;
  background:var(--accent) !important;
}



/****************************************************************************/

/** Pre-Defined Classes **/
.ff-head{font-family: var(--heading);}
.ff-sec{font-family:poppins; font-weight:700; color:var(--secondary); font-size:3vw;}
.ff-sec-dark{font-family:poppins; font-weight:700; color:var(--primary); font-size:x-large;}
.ff-text{font-family: var(--text-default);}
.w-100{width:100%;}
.trans-4s{transition:.4s ease all;}
.h1{font-weight: 800; font-size:10vw; text-transform:uppercase; color:var(--primary);}
.fs-h1{font-size:var(--fs-h1);}
.fs-h2{font-size:var(--fs-h2);}
.fw-bold{font-weight:bold;}
.tt-uper{text-transform:uppercase;}
.neon-shadow{text-shadow:var(--neon-shadow);}
.acme-fs2{color:var(--accent); font-weight: 900; line-height:1.2em; font-size:8vw; font-family:var(--heading); letter-spacing:4px; text-transform:uppercase;}/** Responsible Navigation 992px **/
@media screen and (min-width: 992px) {
  .h1{font-size:7.2vw;}
}

@media screen and (max-width: 600px) {
.fs-h1{font-size:2em; line-height: 1.2em;}
.fs-h2{font-size:1.4em;}
  /* .heart {
    width: 48px !important;
    height: 48px !important;
    margin-left: 6px !important;
    margin-top: -8px !important;
  }
  .service-card {
    width: 100% !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    padding: 2em 1em 4em 1em !important;
  }
  .service-img {
    width: 60px !important;
    height: 60px !important;
    text-align: left !important;
    margin: 0 !important;
    position: static !important;
    opacity: 1 !important;
  }
  .service-img > img {
    width: 60px !important;
    height: 60px !important;
    display: inline-block !important;
  } */
}

.h2{font-size:3.6vw; letter-spacing:1.2px; line-height:1em; font-weight:500;}
.acme{color:var(--accent) !important; font-weight: 600;}
.ff-sec {font-size: unset;}

/****************************************************************************/

/** All Images **/
img{width:100%; height:100%;}

/** Header section **/
header{width:100%; background:var(--background);}

/** Navigation Section **/
nav{background:none;}
.nav-link-container{width:100%; display:flex; flex-wrap:wrap; justify-content:start; gap:0.38rem;}
.nav-link-container a{flex:100%; font-size:large; font-family:var(--secondary-heading);}


/** Responsible Navigation 992px **/
@media screen and (max-width: 992px) {
 nav{height:60px; width:100%;}
}

.hide-on-desktop { display: none; }
.hide-on-mobile { display: block; }

/** Responsible Navigation 600px **/
@media screen and (max-width: 600px) {
  .hide-on-desktop { display: block !important; }
  .hide-on-mobile { display: none !important; }
}
@media screen and (max-width: 600px) {
  nav{height:60px; width:90vw;}
  /** Hidden on mobile **
  .hide-on-mobile{display:none;}**/
 }
 

/** Brand Logo **/
#top-nav a > img{width:60px; height:60px;}

/** Menu icon **/
.navbtn{width:max-content; height:max-content; padding:.4em; background:var(--background); border:none; cursor:pointer;}

.bi.bi-list{color:var(--accent); font-size:32px;}

/** Nav Links Container **/
.nav-links{width:fit-content; display:flex; justify-content:end; gap:2em; font-size:large; background:rgb(37, 36, 36); padding:.4em .6em;}
.nav-links > button > .bi-list{font-size:1.2em;}

/** Nav Links Container **/
.nav-links a{text-decoration:none; color:var(--primary); position:relative;}
.nav-links a::before{
 position: absolute; content:""; width:0%; height:10%; 
 background-color:white; top:100%; transition:.1s ease all;
}
.nav-links a:hover::before{
 position: absolute; content:""; width:100%; height:10%; 
 background-color:white; top:100%;
 box-shadow: 0px 4px 18px 1px var(--accent-shadow);
}

/** offCanvas **/
/* Customize the offcanvas styles here */

/* Social Media Icons within offcanvas */

.nav-social > span{width:100%; text-align:start;}

.nav-social-li{display:flex; flex-wrap:nowrap; gap:1rem;}
.nav-social a{color:var(--secondary); font-size:x-large; transition:.24s ease all;}
.nav-social a:hover{color:var(--accent) !important; font-size:x-large; transform:scale(1.4);}


/** Fixed Logo **/
.fixed-logo{position: fixed; bottom:2em; right:2.4em; width:4em;}
.fixed-logo > img{filter: opacity(0.56);}

/****************************************************************************/

/** Hero Section Starting With Container **/
#hero-section{
  background:var(--background); height:94vh;
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center; align-content:center;
  transition: background .5s ease-in-out;
}

#hero-section p{
  width:100%; font-size:2.5em; color:var(--secondary);
  margin: 0; padding:0; text-align:center; line-height:1.8em;
}

.hero-container{
 width:100%; display:flex; flex-wrap:wrap; justify-content:center; gap:46px;
 margin-top:-1em;
}

/** CSS for hero-start-switch **/
/* The switch - the box around the slider */
.switch {
    font-size: 40px;
    position: relative;
    display: inline-block;
    width: 3.5em;
    height: 2em; z-index:0;
  }
  
  /* Hide default HTML checkbox */
  .switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  /* The slider */
  .slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    border: 2px solid #414141;
    border-radius: 73px;
    transition: all .4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }
  
  .slider:before {
    position: absolute;
    content: "";
    height: 1.4em;
    width: 1.4em;
    left: 0.2em;
    bottom: 0.26em;
    background-color: #414141;
    border-radius: inherit;
    transition: all .4s cubic-bezier(0.23, 1, 0.320, 1);
  }

  .slider:hover {
    box-shadow: 0 0 240px var(--shadow);
    border: 2px solid var(--shadow);
  }
  
  .slider:hover.slider:before {
    background-color: var(--shadow);
    border-radius: inherit;
    transition: all .2s cubic-bezier(0.23, 1, 0.320, 1);
  }
  
  .switch input:checked + .slider {
    box-shadow: 0 0 20px var(--shadow);
    border: 2px solid var(--shadow);
  }
  
  .switch input:checked + .slider:before {
    transform: translateX(1.5em);
    background-color:var(--shadow);
  }

 /** Responsive Hero Section 600px **/
 @media screen and (max-width: 600px) {
  #hero-section p{font-size:1.4em; line-height:1.6em;}
  .hero-container{width:100%; margin-top:-2em; gap:20px;}
  .switch {
    font-size: 30px;
    position: relative;
    display: inline-block;
    width: 3.5em;
    height: 2em; z-index:0;
  }

 }


/****************************************************************************/

/** Second Hero Container **/
#hero-land{width:100%; height:100vh; background:var(--secondary); position:relative; z-index:-1;}

/** Hero Tagline **/
.hero-tag{width: 100%; padding: 2em 2em 2em 3.2em;}

.hero-tag h1{line-height:1.2em; letter-spacing:1px;}

/** Heart Animation **/
.heart{width:120px; height:120px; margin-left:10px; margin-top:-20px;
  animation: heartbeat 2s infinite;}
@keyframes heartbeat
{
0%{transform: scale( .75 );}
50%{transform: scale( 1 );}
100%{transform: scale( .75 );}
}



/** Hero Promotional Text **/
.hero-promo{
 background:url('../img/meditating.svg'); width:100%; height:100%; animation-name:bounce; 
 background-size:96%; background-repeat:no-repeat; background-position:top center;
}
/** Promo-Animation Text **/
.type-container{width:100%;}
.type-span {
  border-right: .05em solid; 
  animation: caret 1s steps(1) infinite;
}
.typewrite{
 font-size:8vw; font-weight:800;
 font-family:var(--heading); letter-spacing:4px; color:#989898; 
 position:relative; left:-100px; top:38vh; transform:rotate(270deg);
}
@keyframes caret {
  50% {
    border-color: transparent;
  }
}

/****************************************************************************/

/** Responsive Second Hero Container 600px **/
@media screen and (min-width: 600px) {
  #hero-land{display:flex; flex-wrap:nowrap; }
  .hero-tag{width:40vw; padding:1.2em  3em; line-height:6.5em; display:flex; flex-wrap:nowrap; align-items:center; justify-content:center;}
  /** Hero Promotional Text **/
  .hero-promo{width:70vw; height:100%;
  background-position:28vw 36vh; background-size:500px; background-repeat:no-repeat;
  /**animation-name:bounce;
  animation-duration:2s;
  animation-timing-function:ease;
  animation-iteration-count:infinite;**/
  }
  .type-container{width:72vh;}
}

/****************************************************************************/

/** Our Services **/
#our-services{
 width:100%; height:auto; display:flex; flex-wrap:wrap; justify-content:center;
 align-items:baseline; background:var(--background); 
}
/** Service Card Individual **/
.service-card{width:33.33%; height: 460px; padding:3.4em 4em 8em 4em; position:static; display:flex; flex-wrap:wrap; align-items:center; justify-content:start; z-index:10;}
.service-card:hover{background:var(--accent); padding:3.4em 2.4em 8em 2.4em; z-index:10;}
.service-card:hover .service-heading h2{color:#111111 !important; text-align:start;}
.service-card:hover .service-text{opacity:1; bottom:1.6em; color:var(--primary); left:-1.8em;}
.service-card:hover .service-img{opacity:1; top:.3em; left:0;}

/** Service Image **/
.service-card .service-img{width:80px; height:80px; opacity:0; position: relative; top:5em; left:0; flex:100%; text-align:start; z-index: 0;}
/** Service Heading **/
.service-card .service-heading{color:#696161; margin:1.2em 0;}
/** Service Text **/
.service-card .service-text{opacity:0; position:relative; bottom:6em; left:1em; flex:100%;}
.service-card .service-img > img{width:80px; height:80px;}

.service-card .service-text ul li{list-style-type: none; line-height:1.8em;}

/* * Responsive Our Services 600px *
@media screen and (max-width: 600px) {
  .service-card{width:100%; justify-content: center;}
  .service-card:hover{justify-content: start !important;}
  .service-card .service-heading h2{color:white; text-align:center; font-size: x-large;}
} */

/** Mobile Service Card Individual **/
.service-card-2{width:100%; height: 460px; position:static; display:flex; flex-wrap:wrap; align-items:center; justify-content:start; padding:3em 2.4em 3em 2.4em; z-index:10;}
.service-card-2 .service-heading{width:100%;}
.service-card-2 .service-heading h2{color:var(--secondary); text-align:start; font-size: xx-large; margin:0;}
.service-card-2 .service-text{opacity:1; bottom:0; color:var(--secondary); left:0 !important;}
.service-card-2 .service-text ul{padding:0;}
.service-card-2 .service-img{opacity:1; margin-bottom:1em; width:100%;}

/** Second Child **/
.service-card-2:nth-child(2){background-color:var(--accent);}

.service-card-2:nth-child(2) .service-heading h2{color: var(--primary);}

.service-card-2:nth-child(2) .service-text{color: var(--primary);}

/* * Service Image *
.service-card-2 .service-img{width:80px; height:80px; opacity:0; position: relative; top:5em; left:0; flex:100%; text-align:start; z-index: 0;} */
/* * Service Heading *
.service-card-2 .service-heading{color:#696161; margin:1.2em 0;} */
/* * Service Text *
.service-card-2 .service-text{opacity:0; position:relative; bottom:6em; left:1em; flex:100%;} */
.service-card-2 .service-img > img{width:80px; height:80px;}

.service-card-2 .service-text ul li{list-style-type: none; line-height:1.8em;}


/****************************************************************************/

/** Tools Section **/
#tools-container{
 width:100%; height:fit-content; background:var(--secondary); border-bottom:2px solid black; padding-top:1em;
}

/** Heading **/
.tools-h{width:100%; background:var(--secondary); padding:.34em .34em .02em; text-align:center; font-size:x-large; color:var(--background);}

/** tools-logo-container **/
.tools-logo-container{margin-top:-.8em;}
.tools-logo-container > div{width:100%; height:fit-content;}

/** Tools Logo Items **/
.tools-logo-container  img{width:300px; height:160px;}

/** Responsive Tools Section **/

/****************************************************************************/

/** Domain We Work In Section **/
#domain{width:100%; height:90vh; display:flex; flex-direction:row-reverse;  flex-wrap:wrap; align-items:center; position: relative; }
/** Main Domain Content **/
.domain-content{width:100%; height:100%; flex:60%; background-color:var(--primary);}

/** Onion Doodle in Domain Section **/
.bg-domain{position:relative; width:340px; height:340px; bottom:50vh; right:-34vw; transform:rotateY(180deg);}
/** Keyframes for Doodle in Domain Section **/
@keyframes walk {
 0%, 100% { transform: translateY(0); }
 25% { transform: translateY(-5px); }
 75% { transform: translateY(5px); }
}
.cls-1 {animation: walk-left 1s infinite;}
.cls-2 {animation: walk-right 1s infinite;}

@keyframes walk-left {
0%, 100% {transform: translateY(0);}
25% {transform: translateY(-5px);}
75% {transform: translateY(5px);}
}

@keyframes walk-right {
0%, 100% {transform: translateY(0);}
25% {transform: translateY(5px);}
75% {transform: translateY(-5px);}
}

/** Container for All 5 Bubbles **/
.bubble-container{display:flex; flex-wrap:wrap; width:100%; height:100%; justify-content:start; padding:1.4em 1em; flex-direction:row-reverse; align-items:start; align-content: center;}
/** Container for starting 3 bubbles **/
.bubble-container .cards-3 .cards-2{width:100%;}

/** Cards **/
.cards{height:150px; text-align:center; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; align-content:unset; padding:1.4em .5em 3.2em 1.2em; margin:0; position:relative; transition:.28s ease all; z-index:1;}

.cards-3{width:16dvw; border-right:.02em solid #98989850; margin-right:1em;}

.cards-2{width:21dvw;}

/** Cards Img **/
.cards img{width:92px; height:76px; padding:0 .4em 0em;}

/** Cards Text **/
.cards p{color:var(--secondary); width:100%; text-align:start; align-self:flex-start; font-size:24px; font-weight:200; font-family:var(--secondary-heading); line-height:1.2em; margin-top:.68em;}

/** Container for domain section heading **/
.domain-text{background:var(--primary); width:100%; height:100%; flex:40%; display:flex; flex-wrap:wrap; align-items:center; align-content:center; padding:4em;}
.sub-heading-container h3{color:var(--secondary); font-family:var(--secondary-heading); font-weight: 300; font-size: larger; margin-bottom:.02em;}
.domain-heading-container h1{color:var(--secondary); font-family:var(--heading); letter-spacing:1px; line-height:1em; font-weight:500; font-size:5.6vw; margin-top:.2em;}

/**  CTA Button Domain Section **/

.button-cta-domain {
  position: relative;
  background-color: var(--secondary);
  color: var(--background);
  font-size: 20px; font-family:var(--secondary-heading);
  font-weight: 600;
  width: 150px;
  height: 52px;
  margin-top:10px;
  border-radius: 6px;
  border: 2px solid var(--background);
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 10px 20px rgba(51, 51, 51, 0.2);
  transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1);
}

.button-cta-domain::before {
  content: "More"; color:var(--secondary);
  display: flex; font-family:var(--secondary-heading);
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  pointer-events: none;
  border-radius: 0px;
  border:2px solid var(--background);
  background: var(--background);
  transform: translate(-100%, 0%);
  transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
}

.button-cta-domain::after {
  content: "Explore";
  display: flex;;
  align-items: normal;
  justify-content: center;
  background-color: transparent;
  width: 100%;
  height: 90%;
  pointer-events: none;
  border-radius: 0px;
  transform: translate(0%,-100%);
  transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
}

.button-cta-domain:hover::before {
  transform: translate(0%, 0%);
}

.button-cta-domain:hover::after {
  transform: translate(100%,-100%);
}

.button-cta-domain:focus {
  outline: none;
}

.button-cta-domain:active {
  scale: 0.95;
}

/** Responsive Our Domain 600px **/
@media screen and (max-width: 600px) {
  #domain {
    height: fit-content;
    flex-direction: column-reverse;
  }
  .domain-content{
    display:flex;
    flex-wrap:wrap;
    overflow-x: hidden;
  }
  .bubble-container{flex-wrap:nowrap;}
  .cards-2{width:50%;}
  .cards-3{width:50%;}

  .cards p {
    width: 100%;
    text-align: start;
    font-size: 14px;
  }

  .bg-domain {
    position: relative;
    width: 210px;
    height: 210px;
    left: 40%;
    bottom: 0;
    margin-top: -40%;
    transform: rotateY(180deg);
  }

  .domain-text{
    padding:4em 2em 2.8em;
  }
  .sub-heading-container h3 {
    font-size:medium;
  }

  .domain-heading-container h1 {
    line-height:1.2em;
    margin:0.6em 0 0 !important;
  }

  .domain-heading-container h1 > span:first-child {
    font-size: x-large;
  }
  .domain-heading-container h1 > span:last-child {
    font-size: 80px;
  }

}

/****************************************************************************/

/** Clients Section **/
#clients-container {
  width: 100%;
  height: fit-content;
  background: white;
  display: flex;
  flex-wrap: wrap;
  z-index: -3;
  align-items: start;
  align-content: start;
  gap: 0;
  margin: 3.4em 0;
  justify-content: center;
  /* Prevent horizontal overflow for clients slider */
  overflow-x: hidden;
}

/** Clients Heading **/
.clients-heading {text-align:center; padding:0; width:100vw; display:flex; justify-content:center; flex-wrap:wrap; margin-bottom:1.2em;}
.clients-heading > h2{text-align:center; font-family:var(--heading); font-size:12vw; text-transform:uppercase; letter-spacing:.01em; width:100%;}
.first-c-h{color: #98989888; margin-top:-2vh; font-weight:800;}
.sec-c-h{color: #98989800;}
.third-c-h{color: #98989814;}

/** Highlighted Text **/
.logo-highlight{padding:0 1em 0; border-radius:1px; width:fit-content; text-align:center; font-weight:800; margin-top:-6vh;}
.logo-highlight > p{color:var(--primary); font-size:1.8vw; font-family:var(--secondary-heading); font-weight:600; text-transform:capitalize;/** letter-spacing:.4em;**/}
.acme-logo{color:var(--primary); font-weight: 600; font-size:2.4vw; font-family:var(--neon-shadow); text-shadow:1px 1px 2px var(--accent); background:var(--accent-shadow);}

/* Contain slider and prevent overflow */
.logo-container {
  margin: 0 2em;
  max-width: 100vw;
  overflow: hidden;
}
.logo-container > div {
  width: 100%;
  height: fit-content;
  display: flex;
  align-content: baseline;
}
/* Remove default ul margin for slider list */
.logo-slider-list {
  margin: 0;
}

/** Logo Items **/
.logo-container img{width:260px; height:160px; background:#fffafa68;}

/** Logo Nav **/
.logo-container a{background:#111111 !important; border-radius:50%; color:white; padding:0.6em 1em; transition:.4s ease all;}
.logo-container a:hover{background: var(--accent)!important; border-radius:50%; color:black !important;}


/** Responsive Client Section 600px **/
@media screen and (max-width: 600px) {
  #clients-container {margin:2.4em 0;}
  .clients-heading > h2{font-size:10vw;}
  .first-c-h {margin-top: 0;}
  .logo-highlight p{font-size: medium;}
  .logo-container{margin:0;}
  .logo-container img {width: 100%; height: 100%;}
}
 
/** Responsive Testimonial Section 600px **/
@media screen and (max-width: 600px) {
  .t-i-container > img{height:100%;}
  .t-container{aspect-ratio: 8 / 10 !important;}
}

/****************************************************************************/

/** Portfolio Section **/
/** Container **/
#portfolio{width:100%; height:auto; display:flex; flex-wrap:wrap; justify-content: center; background:var(--secondary);}

/** Portfolio Items **/
.portfolio-items{
 width:25%; height:24vw; background:var(--secondary); transition:.4s ease all; overflow:hidden;
}

/** Portfolio Items Images **/
.portfolio-items > img{
 width:100%; height:100%; transition:.4s ease all;
 filter:grayscale(100%);
}
.portfolio-items:hover{
 border-radius:10px;
}
.portfolio-items:hover img{
 transform:scale(1.1);
 filter:grayscale(0%);
}

/** Responsive Testimonial Section 600px **/
@media screen and (max-width: 600px) {
  .portfolio-items {
    width: 50%;
    height: 50%;
  }
}

/****************************************************************************/

/** Promotional video and call-to-action **/
#video-and-cta{width:100%; height:110vh;}

/** video container **/
.video-container{width:100%; height:65%; background:var(--background);}

.video-container > video{width:100%; height:100%; cursor:pointer;}

.desktop-video{display:block;}
.mobile-video{display:none;}

@media screen and (max-width: 600px) {
  #video-and-cta {height: fit-content;}
  .video-container{height: fit-content;}
  .desktop-video{display:none;}
  .mobile-video{display:block; width:100%; height:100%;} 
}

/****************************************************************************/

/** call to action container **/
.cta-container{width:100%; height:35%; background:var(--secondary); display:flex; flex-wrap:wrap; justify-content:center; align-items:center;}

/** text container for all the call-to-action attraction **/
.cta-text{flex:90%; width:100%; height:100%; padding:1.2em 1.2em 1.2em 2.4em; display:flex; justify-content:start; align-items:center; flex-wrap:wrap; align-content:center; gap:.01em; margin-top:10vh;}

.cta-text > p{
 flex:100%; width:100%; color:var(--primary);
 display:inline-flex; justify-content:flex-start; gap:1em;
}

.cta-text-1st{
 letter-spacing:.01em; font-weight:bolder; margin-top:-.24em;
 font-size:10vw;
}

.cta-text-2nd{
 font-size:3.6vw; font-family:var(--secondary-heading); font-weight:800;
 letter-spacing:1px; margin-top:-1em;
}

/** container for call-to-action button **/
.cta-text > button{margin-left:.2em;}

.cta-btn{flex:10%; width:100%; height:100%; display:flex; justify-content:center; align-items:center;}

/** CSS For CTA Btn **/
.button {
  position: relative;
  background-color: var(--accent);
  color: var(--background);
  font-size: 20px; font-family:var(--secondary-heading);
  font-weight: 600;
  width: 150px;
  height: 52px;
  margin-top:10px;
  border-radius: 6px;
  border: 2px solid var(--background);
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 10px 20px rgba(51, 51, 51, 0.2);
  transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1);
}

.button::before {
  content: "Now!"; color:var(--accent);
  display: flex; font-family:var(--secondary-heading);
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  pointer-events: none;
  border-radius: 0px;
  border:2px solid var(--background);
  background: var(--background);
  transform: translate(-100%, 0%);
  transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
}

.button::after {
  content: "Contact";
  display: flex;;
  align-items: normal;
  justify-content: center;
  background-color: transparent;
  width: 100%;
  height: 90%;
  pointer-events: none;
  border-radius: 0px;
  transform: translate(0%,-100%);
  transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
}

.button:hover::before {
  transform: translate(0%, 0%);
}

.button:hover::after {
  transform: translate(100%,-100%);
}

.button:focus {
  outline: none;
}

.button:active {
  scale: 0.95;
}

/** Responsive Testimonial Section 600px **/
@media screen and (max-width: 600px) {
  .cta-container {height:fit-content;}
  .cta-text {
    width: 100%;
    height: 100%;
    padding: 2em;
    gap:0;
    margin-top:0; 
  }
  .cta-text-1st {
    margin: 0;
    font-size:4.8em; 
  }
  .cta-text-2nd {
    margin: -20px 4px 4px;
    font-size: 6.6vw;
  }
  
}


/****************************************************************************/

/** G-Review **/
.g-review{width:100%; height:24vh; background:var(--secondary); display:flex;  justify-content:end; justify-items:end; padding:0 4rem 0;} 

/**img.g-img{width:60%; height:80%; margin-left:-1.2em; margin-right:6em;}**/

@keyframes shakeit {
  0%{transform:translateX(-10px);}
  50%{transform:translateX(10px);}
  100%{transform:translateX(-10px);}
}

img.r-img{width:auto; height:50vh; /**transform:rotateY(160deg) rotateZ(-15deg);**/ margin:-28vh 0 0;  animation: shakeit 5s ease infinite forwards;}

/** Responsive Testimonial Section 600px **/
@media screen and (max-width: 600px) {
  .g-review {
    width: 100%;
    height: 100%;
    padding: 2em;
  }
  img.r-img {
    width: 50%;
    height: 100%;
    margin: -44% 0 0;
  }

}


/** Footer **/

footer{width:100%; height:40vh; background:rgb(38, 38, 38); display:flex; flex-wrap:wrap; justify-content:center; align-items:center;}

footer > div{width:calc(100%/4); height:100%; padding:2.8em; display:flex; flex-wrap:wrap; justify-content:flex-start; align-items:center; align-content:baseline;}

footer img{mix-blend-mode: lighten;}

.fc-1{justify-content:center; align-items:center;}
.fc-2{background:none;}
.fc-3{background:none;}
.fc-4{background:none;}

/****/
.fc-1 > .fc-logo{width:54%; height:74%;}

/****/
.fc-head{
 flex:100%; width:100%; margin-bottom:.4em;
}
.fc-head > h5{
 font-size:1.2em; color:#f5f5f5 !important; letter-spacing:.01em; font-weight:700;
}

/****/
.fc-ul{list-style-type:none;}
.fc-li{line-height:1.6em; margin-left:-2em;}

a.fc-a{text-decoration:none; color:var(--grey); position:relative; transform:.4s ease all;}
a.fc-a::after{
 position:absolute; content:''; width:0%; height:14%;
 bottom:-10%; left:0; transition:.4s ease all;
}
a.fc-a:hover::after{width:100%; background:var(--accent);}
a.fc-a:hover{color:var(--accent) !important;}

/** **/
.fc-content{line-height:1.6em; color:#888;}

/****/
.fc-content > form > input{
 border-radius:0px; border-bottom:2px solid black; border-top:none; border-left:none; border-right:none; padding:.6em; transition:.4s ease all;
}
.fc-content > form > input:focus{
 border-radius:10px; border:2px solid black !important; 
}

/****/
.fc-content > form > button{background:var(--accent); padding:.32em; font-size:large; margin-top:.32em; border:2px solid black;}


/** Keyframes **/
@keyframes bounce {
 0%{background-position:24vw 22vh;}
 50%{background-position:26vw 24vh;}
 100%{background-position:24vw 22vh;}
}

/** Responsive Footer Section **/
@media only screen and (max-width: 768px){
 footer{height:fit-content !important; padding-bottom:4em;}
 footer > div{width:100% !important; padding:.6em 1.2em 1em !important;} 
 .fc-head{flex:100%; width:100%; margin-bottom:-.8em !important; text-align:center;}
 .fc-1{margin-top:1.2em;}
 .fc-1 > .fc-logo{width:34% !important;}
 .fc-content{width:100%; text-align: center;}
 
 /** Responsive Button **/
/** CSS For CTA Btn **/
 .button {font-size: 16px; width: 140px; height: 42px;}
}






/***************************************************************************************
*********************************                        *******************************
*********************************     About Page CSS     *******************************
*********************************                        *******************************
***************************************************************************************/

/** Hero Section on About Page **/
.about-hero{
 height:93.6vh; background-image: linear-gradient(#131313, #131313cc, #131313cc), url("../img/office-4.jpg"); display:flex; flex-wrap:nowrap; justify-content:center; background-size:contain; background-clip:border-box; align-content:center; align-items:center; backdrop-filter:opacity(10px);
}

/** Both child elements selected **/
.about-hero > div{height:100%;}

/** First child div containing heading and paragraph **/
.about-hero > div:first-child{
 width:55%; padding:0 4rem 0; margin-top:-4rem;
 display:flex; flex-wrap:wrap; justify-content:start; align-content:center;
}

.about-hero > div > h1{font-size:8rem; letter-spacing:.024rem; margin:0 0;}

.about-hero > div > p{width:100%; font-size:1.2rem; color:var(--secondary); margin:0; text-align:start; word-spacing:.2rem;}

/** Second child div containing doodle image **/
.about-hero > div:last-child{
 width:45%; display:flex; align-content:end; align-items:end; padding:0;
}

.about-hero > div img{height:auto; width:100%; image-rendering: crisp-edges;}

/** CSS For CTA Btn **/
.abt-button-hero {
  position: relative;
  background-color: var(--accent);
  color: var(--background);
  font-size: 20px; font-family:var(--secondary-heading);
  font-weight: 600;
  width: 150px;
  height: 52px;
  margin-top:2rem;
  border-radius: 6px;
  border: 2px solid var(--background);
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 10px 20px rgba(51, 51, 51, 0.2);
  transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1);
}

.abt-button-hero::before {
  content: "Services"; color:var(--accent);
  display: flex; font-family:var(--secondary-heading);
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  pointer-events: none;
  border-radius: 1px;
  border:2px solid var(--background);
  background: var(--background);
  transform: translate(-100%, 0%);
  transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
}

.abt-button-hero::after {
  content: "Explore";
  display: flex;
  align-items: normal;
  justify-content: center;
  background-color: transparent;
  width: 100%;
  height: 90%;
  pointer-events: none;
  border-radius: 1px;
  transform: translate(0%,-100%);
  transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
}

.abt-button-hero:hover::before {
  transform: translate(0%, 0%);
}

.abt-button-hero:hover::after {
  transform: translate(100%,-100%);
}

.abt-button-hero:focus {
  outline: none;
}

.abt-button-hero:active {
  scale: 0.95;
}


/** About Team Section **/
.abt-team-container{
 height:fit-content; padding:3rem 4rem; display:flex; flex-wrap:wrap; align-items:stretch; align-content:space-between;
}

/** Both child elements selected **/
.abt-team-container > div{width:100%;}

/** First child div containing heading and paragraph **/
.abt-team-container > div:first-child{margin-bottom:4rem;}

.abt-team-container > div > h3{font-size:4rem; font-weight:800; letter-spacing:.01rem; width:100%; margin:0; color:var(--primary);}
.abt-team-container > div > p{width:48%; font-size:1.2rem; font-weight:500; margin:0; color:var(--grey);}

/** Second child div containing team cards(image, name, title)**/
.abt-team-container > div:last-child{display:flex; gap:1rem; flex-wrap:wrap; justify-content:center;}

.abt-card{padding:0; height:fit-content; width:24%; /**box-shadow:1px 1px 1px var(--accent-shadow);**/
/**border-right:2.8px solid #555555; border-bottom:2.8px solid #555555;**/

}
.abt-card img{
 height:300px; object-position:top; object-fit:cover;
 filter:sepia(0.5) saturate(0.2) grayscale(0.8) contrast(1.1) brightness(0.9);
 image-rendering: crisp-edges;
}

.abt-card-content{padding:0.4rem 1rem 0.6rem;}
.abt-card-content *{padding:0; margin:0; text-align:center;}

.abt-card-content h3{font-family:var(--secondary-heading); font-size:x-large; font-weight:600;}
.abt-card-content p{font-family:var(--text-default); font-size:small; font-weight:700; margin-top:-0.1rem;}

/** Filler Section **/

/** Filler Container **/
.filler-container{
 width:100%; height:60vh; background:var(--primary);
 display:flex; flex-wrap:wrap; justify-content:center;
 align-items:center; align-content:center;
}

/** Filler Heading **/
.filler-heading{width:100%; font-size:5rem; letter-spacing:.024rem; margin:0; text-shadow:1px 1px 60px #fbff005d; text-align:center; margin-bottom:1.2rem;}

/** Filler Text **/
.filler-text{width:70%; text-align:center; font-size:1.2rem; font-family:var(--text-default); color:var(--secondary);}

/** Responsive Filler Section **/


/** About Slideshow **/
.abt-slideshow{
 width:100%; height:90vh; display:flex; flex-wrap:wrap; justify-content:center;
 align-items:start; align-content:start; padding:2rem 4rem;
}

/** Both child elements selected **/
.abt-slideshow > div{width:100%;}

/** First child div containing heading and paragraph **/
.abt-slideshow > div > h3{
 font-size:4rem; font-weight:800; letter-spacing:.01rem; width:100%; margin:0 0 2rem; color:var(--primary);
}

/** Slideshow container **/
.abt-slideshow-container{height:60vh; background:yellow;}

.uk-slider-items.abt-slider-items {
  height: 100%; /* Set a fixed height */ background-color:grey;
}

.slide-item{width:50%; background-color:green; display:inline-flex;}

.slide-item img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

/** Quote and CTA **/

/** Whole container **/
.quote-cta-container{
 width:100%; height:100vh; background:var(--primary);
 display:flex; flex-wrap:nowrap; justify-content:space-around;
}

/** First child containing both quote & cta **/
.quote-cta-container > div:first-child{
 flex:70%; display:flex; flex-wrap:wrap; justify-content:start;
 align-items:center; align-content:center; padding:2rem 6rem 2rem 6rem;
}

/** Quote Container **/
.quote-container{width:100%;}

/** Quote **/
.quote-container > h3{
 font-family:var(--secondary-heading); color:var(--secondary); font-size:3.6rem; font-weight:600; position:relative;
}

.quote-container > h3::before{
 position:absolute; content:' \" ';
 top:0; left:-3%; height:fit-content; width:fit-content;
}

/** About CTA Container **/
.abt-cta-container{width:100%; margin-top:2rem;}

/** CTA Text **/
.abt-cta-container > p{
 font-family:var(--text-default); color:var(--accent);
 font-size:2rem; font-weight:600;
 margin-bottom:2rem; text-shadow:1px 1px 70px var(--accent-shadow);
}

/** Second child containing bulb image **/
.quote-cta-container > div:last-child{
 flex:30%; padding:0 0 0 0;
}

/** Bulb Image **/
.quote-cta-container > div:last-child > img{
 width:65%; height:65%; object-fit:cover; filter:drop-shadow(1px 1px 100px #faff00);
 transition:.4s ease-in-out all; 
}

/** Responsive About page **/
@media only screen and (max-width: 768px){
 .about-hero{flex-wrap:wrap !important; height:fit-content;} 
 .about-hero div:first-child{width:100%; padding:0 2.4rem; margin:0;}
 .about-hero > div > h1{font-size:4.8rem;}
 .about-hero > div > p{font-size:0.8rem; text-align:start; word-spacing:.04rem; letter-spacing:.02rem; z-index:1;}
 .about-hero > div:last-child{width:100%; justify-content:end;}
 .about-hero > div img{height:40% !important; width:54%; margin-top:-22%; z-index:0;}
 /** CSS For CTA Btn **/
 .abt-button-hero {font-size: 16px; width: 140px; height: 42px;}


 /** About Team Section **/
 .abt-team-container{padding:3rem 2rem}
 /** First child div containing heading and paragraph **/
 .abt-team-container > div:first-child{margin-bottom:2rem;}
 .abt-team-container > div > h3{font-size:3rem;}
 .abt-team-container > div > p{width:100%; font-size:1rem;}

 /** Second child div containing team cards(image, name, title)**/
 .abt-team-container > div:last-child{display:flex; gap:.2rem; flex-wrap:wrap; justify-content:center;}
 .abt-card{padding:0;}
 .abt-card img{height:300px;}

 .abt-card-content{padding:0; height:240px; width:100%; position:relative;}
 .abt-card-content *{text-align:start; width:220px; position:absolute;}

 .abt-card-content h3{font-size:larger; rotate:90deg; top:44%; left:-100%;}
 .abt-card-content p{transform:rotate(90deg); top:47%; left:-130%;}

 /** Filler Section **/
 .filler-container{height:fit-content !important; padding:2.4rem 0 2rem;}
 .filler-heading{font-size:2.2rem !important; margin-bottom:1.2rem !important;}
 .filler-text{width:100% !important; padding:0 2rem; text-align:center !important;}

 /**About Slideshow **/
 .abt-slideshow{height:fit-content !important; padding:2rem !important;}
 .abt-slideshow > div > h3{font-size:1.94rem !important; font-weight:900 !important;}
 .slide-desktop{display:none;}
 

 /** Quote & CTA **/
 /** Whole Container **/
 .quote-cta-container{height:fit-content !important;}
 .quote-cta-container > div:first-child{flex:100% !important; padding:4rem 2rem !important;}
 .quote-container > h3{font-size:1.6rem !important;}
 /** About CTA Container **/
 .abt-cta-container{margin-top:1.4em !important; display:flex; flex-wrap:wrap; justify-content:center;}
 /** CTA Text **/
 .abt-cta-container > p{font-size:1.4rem !important; margin-bottom:1.6rem !important; text-align: center;}
 /** Second child containing bulb image **/
 .quote-cta-container > div:last-child{display:none;}
}


/****************************************************************************************
*********************************                         *******************************
*********************************     Contact Page CSS    *******************************
*********************************                         *******************************
****************************************************************************************/

main.contact-main{
 width:100%; height:fit-content; 
 background: linear-gradient(0deg, #1c1c1c66, #131313bb), url(../img/world-map.svg);
}

/** Contact Hero **/
.contact-hero{
 height:fit-content; padding:2rem 2rem 1rem; text-align:center;  background-size:contain; background-attachment:fixed; background-repeat:no-repeat; background-position:0px -200px;
}

/** Contact Hero Heading **/
.contact-hero > h1{font-size:8vh; font-weight:500 !important; width:100%;}

/** Contact Hero Text **/
.contact-hero > p{
 font-size:2.8vh; color:var(--secondary); width:100%; margin-top:-0.4em;
 line-height:1.2em;
}

.c-d{color:white; font-weight: 400;}
.c-d > p{font-family:var(--secondary-heading);}
.c-d > p > span{font-family:var(--secondary-heading); font-weight:500;}

/** Contact Container for Both text and image **/
.contact-container{
 width:100%; height:fit-content; display:flex; flex-wrap:nowrap;
 justify-content:center; padding:2em 2em 4em;
}

/**
.contact-text{
 flex:50%; width:100%; padding:2.4rem 2.4rem 2.6rem; display:flex; flex-wrap:wrap; align-content:start;
}

.contact-text > div{width:100%;}

.contact-text .contact-logo img{width:40%;}

.contact-address{margin:1.2rem 0;}

.contact-address > ul{list-style-type:none; line-height:1.6rem;}

.contact-address > ul > li{
 margin:1rem 0;
}

.contact-address > ul > li{position: relative;}
.contact-address > ul > li > i{
 position: absolute;
 top:0; left:-4%;  
}
.contact-address > ul > li.i-add > i{transform:scale(1.4) !important;}

.contact-address > ul > li.i-mail.i-num > i{transform:scale(1.2) !important;}

.contact-address > ul > li > i{color:white;}**/

.contact-social{display:flex; flex-wrap:nowrap; justify-content:center; padding-left:2rem; gap:1rem;}

.contact-social > a{color:var(--secondary); font-size:x-large; transition:.24s ease all;}
.contact-social > a:hover{color:var(--accent) !important; font-size:x-large; transform:scale(1.4);}

/** Contact Form **/
.contact-form{width:40%; height:fit-content; padding:0 2rem 1rem;}

/**.contact-heading{width:100%; text-align:start; font-weight:600; font-size:3.2rem;}**/

.contact-form > iframe{width:100%; height:100%;}
.contact-form input, select, textarea{
  width: 100%;
  padding: 0.6em;
  border-radius: 4px;
  border: 1px solid #c0c0c040;
  margin-bottom: 10px;
}

.contact-form button{
  padding: 0.8em 2em;
  border: 1px solid black;
  border-radius: 4px;
  background: var(--accent);
  margin-top: -10px;
  transition:.4s ease all;
}

.contact-form button:hover{
  border: 1px solid var(--accent);
  background: var(--background);
  color:var(--accent);
  cursor: pointer;
}

/** Responsive Contact Page 600px **/
@media screen and (max-width: 600px) {
  .contact-form{width:100%;}
  .contact-hero > h1 {font-size: 7vh;}
  .contact-container {padding: 0 0 2em;}

}


/****************************************************************************************
*********************************                         *******************************
********************************      Services Page CSS    *******************************
*********************************                         *******************************
****************************************************************************************/

/** Main **/
main.sc-main{width:100%; height:fit-content; padding:0 1rem 1rem; background:var(--background);}

/** Services Heading **/
.sc-heading{width:100%; height:fit-content; font-weight:900; font-size:12vh; text-align:center; color:var(--accent); letter-spacing:2px;}

/** Services Main Container Containing 2 of the childs one is for content and other is for image **/
.sc-main-container{
 width:100%; height:fit-content;
 display:flex; justify-content:space-between; padding:1rem; gap:1rem;
}

.sc-main-container > div{
 flex:50%; width:100%; height:fit-content;
}
.sc-content{padding:0 0 0 4rem; display:flex; flex-wrap:wrap; gap:.6rem;}

.sc-content > h2{
 font-family:var(--secondary-heading); font-weight:600; font-size:6vh; line-height:1em;
 width:100%; color:var(--secondary);
}

.sc-container{
 width:80%; height:fit-content;
}

.sc-container > h3{font-size:1.2rem; margin:0 0 .4rem; font-family:var(--secondary-heading); font-weight:600; color:var(--accent);}
.sc-container > p{font-size:.98rem; margin:0 0 .6rem; font-family:var(--text-default); color:silver;}

/** SC-Image **/
.sc-image{
 width:100%; height:fit-content; padding:1rem;
 display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
 gap:2em;
}

.sc-image > img{width:100%; height:100%;}

.sc-image > video{width:100%;}


/**  CTA Button Domain Section **
.button-cta-services{
  position: relative;
  background-color: var(--secondary);
  color: var(--background);
  font-size: 20px; font-family:var(--secondary-heading);
  font-weight: 600;
  width: 200px;
  height: 52px;
  margin-top:10px;
  border-radius: 6px;
  border: 2px solid var(--background);
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 10px 20px rgba(51, 51, 51, 0.2);
  transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1);
}

.button-cta-services::before {
  content: "Now"; color:var(--primary);
  display: flex; font-family:var(--secondary-heading);
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  pointer-events: none;
  border-radius: 0px;
  border:2px solid var(--accent);
  background: var(--accent);
  transform: translate(-100%, 0%);
  transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
}

.button-cta-services::after {
  content: "Contact";
  display: flex;;
  align-items: normal;
  justify-content: center;
  background-color: transparent;
  width: 100%;
  height: 90%;
  pointer-events: none;
  border-radius: 0px;
  transform: translate(0%,-100%);
  transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
}

.button-cta-services:hover::before {
  transform: translate(0%, 0%);
}

.button-cta-services:hover::after {
  transform: translate(100%,-100%);
}

.button-cta-services:focus {
  outline: none;
}

.button-cta-services:active {
  scale: 0.95;
}**/


.cta-container-services{
  padding:4rem 6rem;
}

.cta-text-services{text-align: start;}

.cta-container-services h1{font-weight:700; color:var(--background); font-size:6.625rem; line-height: 100%; margin:0;}

.cta-container-services p{margin: 10px 0;}

/** Responsive Services Page **/
@media only screen and (max-width: 768px){
 .sc-main-container{display:flex; flex-wrap:wrap-reverse;}
 .sc-main-container:nth-of-type(2){display:flex; flex-wrap:wrap;}
 .sc-main-container > div{flex:100%; width:100%; height:fit-content;}
 .sc-content{padding:0 .4rem !important;}
 .sc-content > h2{font-size:3.68vh !important;} 
 .sc-container > h3{font-size:1.14rem !important;}
 .sc-container > p{font-size:.8rem !important;}
 .sc-image > img{width:400px !important;}
 .sc-heading{font-size:10vh;}
 .cta-container-services{padding:4rem 2rem !important;}
 .cta-container-services h1{font-size:2.625rem;}

}