@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

:root {
  --cta-color: #0da34e;

}


body {
  margin: 0;
  font-family: 'Poppins', Arial, sans-serif;
}




#page1 {
  height: 100vh;
  width: 100%;
  background-color: #111;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

}

#page1 h1 {
  text-align: center;
  text-transform: uppercase;
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 7rem;
  color: #fff;
  font-weight: 900;
  line-height: 5.5rem;
  letter-spacing: 0px;
}

#page1 p {
  text-align: center;
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 3vh;
  color: #fff;
  font-weight: 300;
  line-height: 3.75vh;
  letter-spacing: 0px;
  margin-top: 2vh;
  margin-bottom: 0px;
  width: 50%;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
}

.hsl_circle {
  border: 1px solid #FFF;
  border-radius: 30px;
  padding: 5px 10px;
  margin: 5px;
  transition: all 0.35s ease-in;
}

.hsl_circle:hover {

  background-color: #FFF;
  color: #111 !important;
}

.hero_section_list div {
  color: #FFF;
}

.hero_section_list {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 5px;
  font-size: 12px;
}


#page2 {
 
  width: 100%;
  background-color: #111;
}

nav {
  position: fixed;
  background-color: #111;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75vw 8vw;
  width: 100%;
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 1rem;
  color: #fff;
  z-index: 999;
    border-bottom: 1px solid #1b1b1b; 
    box-shadow: 0px 4px 0px #1b1b1b; 

}

[data-scroll-container] {
    min-height: 100vh;
}

nav h1 {
  font-size: 1rem;
  margin-bottom: 0px;
  text-transform: uppercase;
  font-weight: 700;
}

nav h4 {
  font-size: 1rem;
  margin-bottom: 0px;
}

.nav-part2 {
  display: flex;
  column-gap: 3vw;
  align-items: flex-start;
  padding: 1vw 0vw;
}

.nav-part2 h4 {
  font-size: 0.8vw;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 0px;
}

nav button {
  background-color: #111;
  color: #FFF;
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 0.75rem;
  padding:  0px 0px 0px 15px;
  text-transform: uppercase;
  font-weight: 400;
  border-radius: 25px;
  border: none; 
   
    transition: all 0.5s ease; 
}

nav button:hover {
    background-color: var(--cta-color);
}

nav button i{
  background-color: var(--cta-color);
  color: #FFF;
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 0.75rem;
  padding: 12px 15px;
  text-transform: uppercase;
  font-weight: 400;
  border-radius: 25px;
  border: none;
    display: inline-block; margin-left: 5px; 
  ;
}

#nav-bottom {

  /* height: 0%; */
  width: 100%;
  position: absolute;
  width: 85%;
  bottom: 100%;
  border-bottom: 1px solid #dadada;
  transition: all ease 0.65s;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 1.5vw 13vw;
  background-color: #111;
  padding-top: 2vw;


}

nav:hover #nav-bottom {
  height: 200%;
  bottom: -180%;
  background-color: #111;

}

.bottom-div h5 {
  font-size: 0.75rem;
}

.bottom-div h5 span {
  font-size: 0.75rem;
  font-weight: 500;
  opacity: 0;
}

.nav-elem h5 {
  font-size: 0.65rem;
  font-weight: 500;
}

#moving-div {
  margin-top: 7.5vh;
  position: absolute;
  bottom: 3%;
  width: 50%;
  white-space: nowrap;
  overflow: hidden;
  display: flex;
  padding-bottom: 2vw;
}

#moving-div .move {
  animation: move 15s linear infinite;
}

#moving-div .move img {
  height: 50px;
  filter: invert(1);
  margin: 5px 1vw;
}

@keyframes move {
  0% {
    transform: translateX(0%);
  }

  100% {
    transform: translateX(-100%);
  }
}

.left-gradient {

  height: 60px;
  width: 150px;
  z-index: 9;
  background-color: #111;
  position: absolute;
  left: 0;
  top: 0;

  background: linear-gradient(to right,
      #111 0%,
      rgba(17, 17, 17, 0.8) 30%,
      rgba(17, 17, 17, 0.4) 60%,
      transparent 100%);

}

.right-gradient {

  height: 100%;
  width: 150px;
  z-index: 9;
  background-color: #111;
  background-color: #111;
  position: absolute;
  right: 0;
  top: 0;

  background: linear-gradient(to left,
      #111 0%,
      rgba(17, 17, 17, 0.8) 30%,
      rgba(17, 17, 17, 0.4) 60%,
      transparent 100%);


}

#page2 {
  position: relative;

  width: 100%;

  padding: 8vw 10.5vw;
  border-top: 1px solid #333;

}

#page2-left {

  width: 50%;

  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-direction: column;
  padding: 1vw 0vw;
  padding-right: 6vw;
}

#page2-left p {
  font-size: 4vw;
  font-weight: 600;
  color: #FFF;
  line-height: 4.5vw;
}

#page2-left h5 {
  font-size: 1.1vw;
  font-weight: 300;
  color: #FFF;
  line-height: 1.85vw;
}

#page2-right {
  padding-left: 6vw;
  width: 50%;
  padding-bottom: 4vw;

}

.sec-fold-right {
  position: relative;
  padding-top: 1vw;
  padding-bottom: 5vw;
  border-bottom: 1px solid #333;


}

.sec-fold-right img {
  height: 8vw;
  width: 8vw;
  object-fit: cover;
  border-radius: 50%;
  position: absolute;
  opacity: 0;
  scale: 0;
  z-index: 0;

}

.sec-fold-right h3 {
  font-size: 1vw;
  color: #FFF;
  font-weight: 400;
  margin-top: 0.5vw;
  line-height: 1.5vw;
  position: relative;
  z-index: 1;
}

#page3 {
  position: relative;
  height: 100vh;
  width: 100%;
  background-color: #333;
  background-image: url('../images/play-video-bg-next.avif'); background-position: center;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 0;
}

.page3-center {
  transition: 0.5s all ease;
  position: absolute;
  z-index: 99999;
}

.page3-center h5 {
  font-size: 1vw;
  border-radius: 50px;
  padding: 15px 30px;
  text-transform: uppercase;
  background-color: #FFF;
  z-index: 1;
  opacity: 0;
  transition: 0.5s all ease;
}

.page3-center:hover h5 {

  opacity: 1;

}

.page3-center .icon i {
  background-color: #FFF;
  padding: 3vw;
  border-radius: 50%;
  font-size: 3vw;

}

.page3-center .icon {
  text-align: center;
  margin-bottom: 2vw;
  transform: rotate(180deg);
  margin-bottom: 50px;
}

#page3 video {
  height: 100%;
  width: 100%;
  position: absolute;
  object-fit: cover;
  transform: scaleX(0.85) scaleY(0);
  border-radius: 40px;
  opacity: 0;
  z-index: 9999;
  bottom: 0px;
}

.close_video {
  padding: 20px 40px;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 20px;
  font-size: 2vw;
  color: #000;
}

.close_video {
  position: absolute;
  z-index: 99999;
  bottom: 10%;
  opacity: 0;
  transition: all 0.25 ease;
}

#page4{
  min-height: 100vh;
  width: 100%;
  background-color: #FFF;
  padding: 12vh 0vh;
}

.sec-left{
      padding-right: 2vw; 
    
}

.sec-left h2{
  font-size: 2.2vw;
  font-weight: 500; 
  color: #000;
    border-top: 2px solid #000; padding-top: 30px;  
}

.sec-left p{
  color: #000;
  font-size: 1.2vw;
  margin-top: 5vh;
}


.sec-right {
    height : 400px; 
    width : 100%;
    background-color : aquamarine; 
    position : relative; 
    
}


.sec-right img{ width: 100%; height: 100%; object-fit: cover;  }

.sec-right video{
    height : 400px; 
    width : 100%;
    position: absolute; 
    top: 0px; 
    left: 0px; object-fit: cover; opacity: 0; 
    transition: opacity 0.5s ease; 
}

.digitalProductSec{ padding: 10vw 0vw; }

.digitalProductSec h2{ font-size: 5vw; text-align: center; font-weight: 600;  color: #FFF; position: relative; z-index: 1;    }

.digitalProductSec p{ text-align: center; font-size: 1.5vw; color: #000; margin-top: 2vh; padding: 0vw 7vw; color: #FFF; position: relative; z-index: 1;      }

.digitalProductSec>p{ margin-top: 3vw; position: relative; z-index: 1;  }

#digitalProductDesign{ position: relative; overflow: hidden; padding: 0vw 8vw;   }

#digitalProductDesign video{ position: absolute; top: 0px; z-index: -1; width: 120%; height: 100%;  left: -20%; object-fit: cover;  } 

#digitalProductSec .digitalProductSec{ position: absolute; top: 0px; z-index: 999; color: #FFF;  }

.dps-overlay{ position: absolute; top: 0px; left: 0px; background-color:rgba(0, 0, 255, 0.75); width: 100%; height: 100%; z-index: 0; right:0px; bottom: 0px;   }

.dps-button{ text-align: center; margin-top: 9vh; position: relative; z-index: 1;  }

.dps-button a{ padding: 15px 30px; border-radius: 30px; background-color: #FFF; text-decoration: none; text-decoration: none; color: #000; font-size: 1.25vw; font-weight: 400; text-transform: uppercase;  }

#layout-gride-thrid-fold{
  background-color: #111;
  padding: 4vw 8vw;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: auto;
  gap: 0.5rem;
}

#layout-gride-thrid-fold .lgt-grid{
  background-color: #1f1f1f;
  padding: 2vw;
  border-radius: 20px;
}

.lgt-grid:nth-child(1),
.lgt-grid:nth-child(2),
.lgt-grid:nth-child(3)  {
    grid-column: span 2;
}
  
 .half {
    grid-column: span 3;
}

/* Third row: full width */
.full {
    grid-column: 1 / -1;
}

.lgt-g-heading{ font-size: 3vw; font-weight: 600; color: #FFF; letter-spacing: -2px;   }

.lgt-grid{ height: 350px; }

.lgt-g-number{ color: #a3a3a3; flex: 6;   }
.lgt-g-heading{  flex: 0; }
.lgt-g-para{ flex: 0; }

.lgt-g-para p{ color: #a3a3a3; font-size: 1vw;  margin-bottom: 0px !important;  }

.lgt-grid{ display: flex; justify-content: space-between; flex-direction: column;  }

.lgt-g-heading{ padding-right: 15vw; }

#digitalProductDesignServices{ background-color: #111; color: #FFF; padding: 10vw 6vw; display: flex; justify-content: flex-start; column-gap: 4vw; }

.dpds-left{ flex-basis: 25%}
.dpds-right{ flex-basis: 75%}


.dpds-r-heading-para h3{ font-size: 4vw; font-weight: 800; }

.dpds-r-heading-para p{
    font-size: 2vw; font-weight: 400; margin-top: 3vw;  margin-bottom: 4vw; 
}

summary {
    list-style: none; border-top: 2px solid #FFF; 
}

summary::-webkit-details-marker {
    display: none;
}

.summary-main-heading h3{ font-size: 3.5vw; letter-spacing: -3px;    }

.summary-main{ display: flex; justify-content: space-between; align-items: center; }


 

.summary-main-icon i{ font-size: 1.5rem; border: 2px solid #fff; padding: 1vw; border-radius: 50%;    }

.summary-main{ padding: 1.25vw 0vw; }

.dpds-l-h h4{ font-size: 1.5rem; flex-basis: 32%; padding-right: 7.5%;   }

.dpds-l-h p{ font-size: 0.75rem;  flex-basis: 45.5%;  }

.dpds-l-h i{ flex-basis: 20%; text-align: right; }


.dpds-l-h{ display: flex; justify-content: space-between; align-items: flex-start; padding: 1.45vw 0vw 1.75vw 0vw; border-top: 1px solid #1f1f1f;   }

.dpds-left a{ background-color: #0da34e; padding: 1.35rem 3.75rem; color: #FFF; text-decoration: none; border-radius: 50px; text-transform: uppercase; font-size: 1rem; font-weight: 600; letter-spacing: 0px; position: sticky; top: 10vw;    }

.dpds-left{ padding-top: 19vw; }

/*
#success-stories-shaped{
  background-color: #111;
  color: #fff;
  padding: 8vw 10vw 10vw;
}

.success-stories-intro{
  max-width: 62rem;
  margin-bottom: 4rem;
}

.section-eyebrow{
  color: var(--cta-color);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .12em;
  margin-bottom: 1rem;
  text-transform: uppercase;
}

.success-stories-intro h2{
  font-size: clamp(2.8rem, 6vw, 6.5rem);
  font-weight: 800;
  letter-spacing: -.07em;
  line-height: .92;
  max-width: 50rem;
  margin: 0;
}

.success-stories-intro > p:not(.section-eyebrow){
  color: #a3a3a3;
  font-size: clamp(1rem, 1.45vw, 1.25rem);
  line-height: 1.55;
  margin: 1.8rem 0;
  max-width: 37rem;
}

.success-stories-link{
  border-bottom: 1px solid #fff;
  color: #fff;
  display: inline-flex;
  font-size: .85rem;
  font-weight: 700;
  gap: .65rem;
  padding-bottom: .45rem;
  text-decoration: none;
  text-transform: uppercase;
}

.success-stories-link i{ font-size: 1.1rem; }

.success-stories-grid{
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, 1fr);
}

.success-story{
  aspect-ratio: 1 / 1.12;
  border-radius: 1.25rem;
  color: #111;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  padding: clamp(1.4rem, 2.5vw, 2.5rem);
  position: relative;
  transition: transform .3s ease;
}

.success-story:hover{ transform: translateY(-.5rem); }
.story-lime{ background-color: #d5f99c; }
.story-blue{ background-color: #90c8ff; }
.story-light{ background-color: #f2f1ea; }

.story-label{
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.story-result{
  font-size: clamp(3.5rem, 6vw, 6.5rem);
  font-weight: 800;
  letter-spacing: -.09em;
  line-height: .85;
  margin: 0 0 1.25rem;
}

.success-story h3{
  font-size: clamp(1.25rem, 1.8vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -.04em;
  line-height: 1.05;
  margin: 0;
  max-width: 14rem;
}

.success-story > i{
  align-self: flex-end;
  border: 1px solid rgba(17, 17, 17, .45);
  border-radius: 50%;
  font-size: 1.4rem;
  padding: .7rem;
}

@media (max-width: 768px){
  #success-stories-shaped{ padding: 5rem 1.5rem; }
  .success-stories-intro{ margin-bottom: 2.5rem; }
  .success-stories-grid{ grid-template-columns: 1fr; }
  .success-story{ aspect-ratio: 1.4 / 1; min-height: 19rem; }
}
 
*/

.dpds-l-h *{ transition: all 0.25s ease-in-out;} 

.dpds-l-h{ position: relative; overflow: hidden; padding: 1.5vw 1vw 3vw 1vw; transition: all 0.5s; background-color: #1f1f1f;   }

.dpds-overflow{ position: absolute; right: 0px; left: 0px;    width: 100%;  background-color:  #111;    transition: all 0.25s ease; top: 0%; bottom: 0%; z-index: 1; transition: all 0.25s  ease-in-out;    }

.dpds-l-h:hover .dpds-overflow{    top: 100%;   z-index: 0; transition: all 0.25s  ease-in-out;   }

.dpds-l-h h4{ position: relative; z-index: 2;   } 
.dpds-l-h p{ position: relative; z-index: 2; } 
.dpds-l-h i{ position: relative; z-index: 2; } 


#hover_button_effect{ padding: 4vw 0vw; }

#hover_button_effect h4{ text-align: center; font-size: 3rem; text-transform: uppercase; }
 

.animate_cta_text{ display: inline-block; }
.animate_cta_text_two_span{ display: inline-block; }

#hover_button_effect{ position: relative;  }
.static_hbe{ position: absolute; }
.animate_hbe{ position: absolute; }

#success-stories{ padding: 6vw 6vw; }
.ss-main{ display: flex; justify-content: space-between; align-items: flex-start; }

.ss-l-heading h3{ font-size: 3rem; line-height: 3rem; font-weight: 600; color: #000;    }

.ss-main .ss-left{ flex-basis: 50%; padding-right: 20%;   }
.ss-main .ss-right{ flex-basis: 50%; }
 
.ss-r-heading h5{ font-size: 1rem; text-transform: uppercase; margin-bottom: 1.25vw; color: #a3a3a3; letter-spacing: 0px;    }

.ss-r-heading p{  margin-bottom: 4vw; font-size: 1.75rem; letter-spacing: -1px;   } 

.ss-t-sec{ background-color: whitesmoke; padding: 2vw 2vw 1vw 2vw; border-radius: 10px;  }

.ss-t-s-heading h4{ font-size: 3rem; color: #000;  font-weight: 600; line-height: 1.125; letter-spacing: -3px;  }

.ss-t-s-left p{ color: #666; font-size: 0.85rem;  }
.ss-t-s-right p{ color: #666; font-size: 0.85rem;  }

.ss-t-s-flex{ display: flex; justify-content: space-between; align-items: flex-start; }

.ss-main-two{ display: flex; column-gap: 5px; flex-wrap: wrap;    }

.ss-t-sec{  flex-basis: calc((100% - 20px) / 3); margin-bottom: 5px; height: 225px; display: flex; justify-content: space-between; flex-direction: column; }  

.ss-t-s-flex{ display: flex; justify-content: space-between; align-items: center; }
.ss-t-s-left{ flex-basis: 40%; }
.ss-t-s-right{ flex-basis: 60%; text-align: right; }

#digital_product_design_process{ padding: 3vw 6vw; }

.dpdp_first_main{ display: flex; justify-content: space-between; align-items: flex-start; }

.dpdp_left{ flex-basis: 50%;  }
.dpdp_right{ flex-basis: 50%; }

.dpdp_left h3{    font-size: 3rem; line-height: 3.75rem; 
    
    font-weight: 600;
    color: #000; padding-right: 30%; }

.dpdp_right p{
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.25;
    color: #000;
    margin-top: 50px; 
}



.dpdp_right p:first-child{ margin-top: 0px; }

.dpdp_second_main{ display: flex; justify-content: space-between;  align-items: stretch; border-top: 1px solid #ccc;  }

.dpdp_s_m_div_first{ flex-basis: 27.5%; padding-left: 5px; }
.dpdp_s_m_div_sec{  flex-basis: 27.5%; border-left: 1px solid #ccc;  padding-left: 5px;  }
.dpdp_s_m_div_third{  flex-basis: 15%; border-left: 1px solid #ccc;  padding-left: 5px; }
.dpdp_s_m_div_four{  flex-basis: 15%; border-left: 1px solid #ccc;   padding-left: 5px;}
.dpdp_s_m_div_five{  flex-basis: 15%;  padding-left: 5px; border-left: 1px solid #ccc;   padding-left: 5px;  }

.dpdp_second_main{ height: 100%;   }


.dpdp_s_m_s_heading h3{ letter-spacing: .01em;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.3; text-transform: capitalize; margin-top: 2vw; margin-bottom: 3vw;   }


.dpdp_s_m_list h4{ font-size: 14px; background-color: #000; padding: 5px; border-radius: 20px; color: #FFF; display: flex; align-items: center; column-gap: 10px; width: 250px;  }

.dpdp_s_m_list h4 span{ background-color: #ccc; padding: 10px; height: 30px; width: 30px;  border-radius: 50%; display: flex; justify-content: center; align-items: center; color: #000;  }

#pageNext{ height: 100vh; background-color: #111; }

.dpdp_s_m_div_sec .dpdp_s_m_list h4:nth-child(2){
    transform: translateX(20%); 
}

.dpdp_s_m_div_sec .dpdp_s_m_list h4:nth-child(3){
    transform: translateX(40%); 
}

.dpdp_s_m_div_sec .dpdp_s_m_list h4:nth-child(4){
    transform: translateX(60%); 
}


.dpdp_s_m_div_sec .dpdp_s_m_list h4:nth-child(5){
    transform: translateX(80%); 
}

.dpdp_s_m_div_sec .dpdp_s_m_list h4:nth-child(6){
    transform: translateX(100%); 
}


.dpdp_s_m_div_third .dpdp_s_m_list h4:nth-child(2){
    transform: translateX(20%); 
}


.dpdp_s_m_div_four .dpdp_s_m_list h4:nth-child(2){
    transform: translateX(20%); 
}

.dpdp_s_m_div_four .dpdp_s_m_list h4:nth-child(3){
    transform: translateX(40%); 
}

#feature_digital_design_projects{ background-color: #111; padding: 6vw 6vw; }

.fddp_heading h3{ color: #FFF; font-size: 4.5rem; font-weight: 700; width: 40vw;   }

.fddp_heading p{ color: #FFF; font-size: 1.5rem; font-weight: 400; width: 60vw; margin-top: 5vw; margin-bottom: 4vw;   }

.fddp_cta a{ background-color: #0da34e; padding: 1.35rem 3.75rem; color: #FFF; text-decoration: none; border-radius: 50px; text-transform: uppercase; font-size: 1rem; font-weight: 600; letter-spacing: 0px; position: sticky; top: 10vw;   }


.fddp_section{ display: flex; }

.fddp_left{ flex-basis: 35%; }
.fddp_right{ flex-basis: 65%; }



.fddf_r_b_heading h3{ color: #FFF; font-size: 2rem ; margin-top: 1vw;   padding-top: 2vw; margin-bottom: 2vw; transition: all 0.25s;      }
.fddf_r_b_heading p{ color: #FFF; font-size: 1rem ; margin-bottom: 2vw;   }

.fddp_right{ display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap;  }

.fddp_right .fddf_r_block{ width: 48%; }

.fddf_r_block{ position: relative; margin-top: 3vw; overflow: hidden; transition: all 0.25s ease;  }

.fddp_right .fddf_r_block .fddf_r_b_video video{ width: 100%; position: absolute; bottom: 0px; left: 0px; z-index: 0; height: 100%;  z-index: 1; opacity: 0; transform: scale(1.45); }
.fddp_right .fddf_r_block .fddf_r_b_video img{ width: 102%; z-index: 9; position: relative;  }

.fddp_right .fddf_r_block:hover .fddf_r_b_video img{ opacity: 0;  }
 
.fddp_right .fddf_r_block:hover  .fddf_r_b_video video{ opacity: 1;   }


.fddf_r_line{
     position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 2px;  
    transform: scaleX(0);
    transform-origin: left;
    background-color: #fff; 
    
}

.fddf_r_block{ border-top: 2px solid #1f1f1f; padding: 5px; margin-right: 1%;   }
 

.fddf_r_b_video{ position: relative; }

#our_location{ background-color: #111; padding: 0vw 6vw;  }

.ol_main{ padding: 3vw; border-radius: 20px; background-color: #FFF; display: flex; justify-content: space-between; align-items: flex-start; }

.ol_address h5{ font-size: 14px; text-transform: uppercase; color: #666; margin-bottom: 15px; letter-spacing: 0px;  }
.ol_let_connect h5{ font-size: 14px; text-transform: uppercase; color: #666;  margin-bottom: 15px; letter-spacing: 0px;  }
.ol_let_social_media h5{ font-size: 14px; text-transform: uppercase; color: #666;  margin-bottom: 15px; letter-spacing: 0px;   }

.ol_address{ flex-basis:50%; }
.ol_let_connect{ flex-basis: 30%; }
.ol_let_social_media{ flex-basis: 20%; }

.ol_address h3{ font-size: 3vw; letter-spacing: -2px; }

.ol_social_media ul{ list-style: none; display: flex; margin-left: -35px; column-gap: 10px;     }

.ol_social_media ul li a{ color: #000; list-style: none; font-size: 1.25rem; text-decoration: none; padding: 0.25rem 0.5rem; border-radius: 50%; border: 1px solid #666;     }
 
 
.ol_let_connect a { background-color: #000; color: #FFF; border-radius: 30px; padding: 0.5vw 1vw; text-decoration: none; display: inline-block; margin-top: 2px; font-size: 16px;  }
.ol_let_connect a i{ margin-left: 20px; display: inline-block; }

#our_services{ background-color: #111; padding: 1vw 6vw;   }

.os_main{ background-color: #FFF; padding: 3vw;
    border-radius: 20px;
    background-color: #FFF;
   }

.os_list{  display: flex; flex-wrap: wrap; column-gap: 20px;        }

.os_list > .footer_os_div {
    flex-basis: calc((100% - 60px) / 4);
}

.os_list_heading h5{ font-size: 14px; text-transform: uppercase; color: #666; margin-bottom: 15px; letter-spacing: 0px; }

.footer_os_div a { color: #000; text-decoration: none; margin-bottom: 10px; display: inline-block; font-size: 14px;  }

#footer_strip{ padding: 0vw 6vw 4vw 6vw; background-color: #111;  }

.f_s_main{ display: flex; justify-content: space-between; align-items: center; background-color: #FFF; background-color: #FFF;  
    border-radius: 20px;
    background-color: #FFF; padding: 2vw 2vw;      }

.f_s_main li > a{ color: #111; text-decoration: none; font-size: 14px; }

.f_s_main ul{ list-style: none; display: flex; column-gap: 20px; margin-bottom: 0px; margin-left: -30px;    }

.f_s_main ul li{ position: relative; } 

.f_s_main ul li::after{ position: absolute; top: 2px; right: -10px; width: 1px; height: 20px; background-color: #111; content: ""; }

.f_s_left ul li:last-child::after{ display: none; }
.f_s_right ul li:last-child::after{ display: none; }
 

.six-lgt{ background-image: url('../images/second-fold-bg.jpg'); background-repeat: no-repeat; background-size: cover; background-attachment: scroll; }

body{ overflow-x: hidden; }

.heroFold_anim_one{ position: relative; width: 1000px;  }
 

.heroFold_anim_one i{ color: #FFF; font-size: 45px;   background-color:  var( --cta-color);  color: #FFF;  border-radius: 50%;       text-align: center; padding: 0px 10px 0px 10px; width: 85px;  height: 85px; position: absolute; top: 2px; right: 326px; display: flex; justify-content: center; align-items: center; font-weight: 100;  } 

::-webkit-scrollbar {
    width: 15px;
    
}
 

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

/* Scrollbar track */
::-webkit-scrollbar-track {
    background: #111;
}

/* Scrollbar handle */
::-webkit-scrollbar-thumb {
    background: #fff;
    border-radius: 20px;
}

/* Hover effect */
::-webkit-scrollbar-thumb:hover {
    background: #555;
}


@keyframes rotatePencil {
    
    0%{
        transform: rotate(0deg);
    }
    
    100%{
         transform: rotate(360deg);
    }
    
    
}