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

/* ================================
   CSS Variables (Theme Colors)
================================== */

:root {
  --primary-color: #00A5E6;
  --secondary-color: #FF4700;
  --white: #ffffff;
  --black: #000000;
  --dark: #1B1A1A;
  --gray: #F0F0F0;

  /* Optional extras */
  --text-color: var(--dark);
  --bg-color: var(--white);
}
.desktop{
  display: block;
}
.mobile{
  display: none !important;
}
html.lenis, html.lenis body {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}
.lenis.lenis-stopped {
  overflow: hidden;
}
.lenis.lenis-smooth iframe {
  pointer-events: none;
}
/* ================================
   Base Styles
================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

p{
  margin-bottom: 0;
}
body,html {
  font-family: 'Lato', sans-serif;
  background-color: var(--bg-color);
}
.cursor-border {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  position: fixed;
  background: var(--white);
  mix-blend-mode: difference; /* <-- key to inverting background */
  top: 0;
  left: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 1000;
}

.cursor-dot {
  width: 8px;
    mix-blend-mode: difference; /* <-- key to inverting background */
  height: 8px;
  background: white;
  border-radius: 50%;
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 1001;
}

/* Navbar css start  */
nav{
    position: relative;
}
#navbar{
   position: fixed;
  width: 100%;
  left: 0;
  top:0;
  transition: all 0.3s ease;
  z-index: 999;
  opacity: 1;
  transform: translateY(0);
}
.fixed-nav-pt{
  padding-top: 130px !important;
}

nav .menu_div{
  background-color: var(--dark);
  position: fixed;
  width: 100%;
  z-index: 999;
  left: 0;
  transform: scale(0);
  transition: transform ease-in-out .3s;
  top: 0;
  height: 100vh;

}

nav .menu_div .overlay_nav_box{
  padding: 30px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
nav .menu_div.active{
  transform: scale(1);
  transition: transform ease-in-out .3s;
}
nav .menu_div .overlay_nav_box span{
  width: 40px;
  position: absolute;
  right: 20px;
  top: 20px;
  height: 40px;
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  border: 1px solid var(--white);
  cursor: pointer;
}
nav .menu_div .overlay_nav_box span:hover{
  background-color: var(--secondary-color);
}
nav .menu_div .overlay_nav_box span i{
  color: var(--white);
  font-size: 20px;
}
nav .menu_div .overlay_nav_box ul{
  margin: 0;
  padding: 0;
  list-style-type: none;
}
nav .menu_div .overlay_nav_box ul li:not(:last-child){
  margin-bottom: 10px;
}
nav .menu_div .overlay_nav_box ul li a{
  font-size: 28px;
  position: relative;
  padding: 5px 15px;
  font-weight: 500;
  line-height: 34px;
  color: var(--white);
  text-decoration: none;
  display: block;
  text-align: center;
}
nav .menu_div .overlay_nav_box ul li a::after{
position: absolute;
content: '';
bottom: -2px;
width: 0%;
transition: width ease-in-out .5s;
height: 2px;
left: 50%;
transform: translateX(-50%);
background-color: var(--primary-color);
}
nav .menu_div .overlay_nav_box ul li a.active{
  font-size: 34px;
  font-weight: 600;
}
nav .menu_div .overlay_nav_box ul li a.active::after{
  width: 80%;
  transition: width ease-in-out .5s;
}
nav .menu_div .overlay_nav_box ul li:hover a::after{
  width: 80%;
  transition: width ease-in-out .5s;
}


/* footer css start  */
footer{
  background-color: var(--dark);
}

footer .footer_logo_box p{
font-weight: 500;
color: var(--white);
font-size: 15px;
line-height: 18px;
letter-spacing: 0%;
text-transform: capitalize;

}
footer p  a{
  font-weight: 500;
color: var(--white);
font-size: 15px;
line-height: 20px;
letter-spacing: 0%;
text-transform: capitalize;
text-decoration: none;
}
footer .emails a{
  text-transform: lowercase !important;
}
footer  p a:hover{
  font-weight: 600;
color: var(--primary-color);
transform: scale(1.04);
transition: all .5s;
}

footer .social_icons{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  flex-direction: row;
}
footer .social_icons a{
  border-radius: 50%;
  display: flex;
  align-items: center;
  color: #fff;
  font-weight: 500;
  text-decoration: none;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid #FFFFFF1A;
}

footer .quick_links h6{
font-weight: 700;
font-size: 24px;
line-height: 24px;
letter-spacing: 0%;
color: var(--white);
text-align: left;
text-transform: capitalize;

}
footer .quick_links .inner_flex_links{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  margin-top: 30px;
  padding: 0;
}
footer .quick_links .inner_flex_links li{
  width: 48%;
  list-style: none;
  margin-bottom: 10px;
}
footer .quick_links .inner_flex_links li a{
    font-weight: 500;
color: var(--white);
font-size: 15px;
line-height: 20px;
text-align: left;
letter-spacing: 0%;
text-transform: capitalize;
text-decoration: none;
}

footer .quick_links .inner_flex_links li a:hover{
  font-weight: 600;
color: var(--primary-color);
transform: scale(1.04);
transition: all .5s;
}
footer .location_map iframe{
  width: 100%;
  height: 230px;
}
footer hr{
  margin: 50px 0px 40px 0px;
  width: 100%;
  opacity: 1;
  background-color: var(--white);
  color: var(--white);
}
footer .copyright_text{
  text-align: center;
font-weight: 500;
font-style: Medium;
font-size: 15px;
line-height: 22px;
color: var(--white);
text-transform: capitalize;
}

.com_btn a {
 position: relative;
 overflow: hidden;
 border: 2px solid var(--white);
 color: var(--white);
 display: inline-block;
 font-size: 18px;
 line-height: 20px;
 padding: 18px 28px 17px;
 text-decoration: none;
 cursor: pointer;
 background: transparent;
 user-select: none;
 -webkit-user-select: none;
 touch-action: manipulation;
}

.com_btn a span:first-child {
 position: relative;
 transition: color 600ms cubic-bezier(0.48, 0, 0.12, 1);
 z-index: 10;
}
.com_btn a {
  color: white;
  text-decoration: none;
}
.com_btn a span:last-child {
 color: white;
 display: block;
 position: absolute;
 bottom: 0;
 transition: all 500ms cubic-bezier(0.48, 0, 0.12, 1);
 z-index: 100;
 opacity: 0;
 top: 50%;
 left: 50%;
 transform: translateY(225%) translateX(-50%);
 height: 100%;
 font-size: 18px;
 line-height: 20px;
padding: 18px 28px 17px;
width: 100%;
}

.com_btn a:after {
 content: "";
 position: absolute;
 bottom: -50%;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: var(--primary-color);
 transform-origin: bottom center;
 transition: transform 600ms cubic-bezier(0.48, 0, 0.12, 1);
 transform: skewY(9.3deg) scaleY(0);
 z-index: 50;
}

.com_btn a:hover:after {
 transform-origin: bottom center;
 transform: skewY(9.3deg) scaleY(2);
}

.com_btn a:hover span:last-child {
 transform: translateX(-50%) translateY(-50%);
 opacity: 1;
 transition: all 900ms cubic-bezier(0.48, 0, 0.12, 1);
}
nav .nav_box span {
    cursor: pointer;
}
nav .nav_box span i{
    color: var(--white);
    cursor: pointer;
    font-size: 34px;
    line-height: 34px;
}
nav .nav_box .services_an a{
    color: var(--white);
font-weight: 400;
font-size: 20px;
line-height: 24px;
letter-spacing: 0%;
text-align: center;
text-decoration: none;
text-transform: capitalize;

}

.heading_box{
  margin-bottom: 25px;
}
.heading_box h2{
font-weight: 800;
position: relative;
display: inline-block;
font-size: 38px;
line-height: 42px;
letter-spacing: 0%;
color: var(--dark);
text-transform: uppercase;
}
.heading_box p{
font-weight: 400;
font-size: 14px;
margin-top: 10px;
color: var(--dark);
line-height: 20px;
letter-spacing: 0%;

}
.heading_box h2::before{
   content: attr(data-text);
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      color: #00B6F1;
      overflow: hidden;
 mask-image: url("data:image/svg+xml,%3Csvg width='169' height='35' viewBox='0 0 169 35' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M-8 49C30.044 -19.4104 108.95 35.6641 169 0C144.657 64.2811 65.9165 21.166 -8 49Z' fill='%2300A5E6'/%3E%3C/svg%3E%0A");
 -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='169' height='35' viewBox='0 0 169 35' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M-8 49C30.044 -19.4104 108.95 35.6641 169 0C144.657 64.2811 65.9165 21.166 -8 49Z' fill='%2300A5E6'/%3E%3C/svg%3E%0A");
   -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
      mask-size: 200% 100%;
       -webkit-mask-size: 200% 100%;
      mask-position:0;
       -webkit-mask-position:0;
    animation: waveMove 15s linear infinite;
    text-transform: uppercase;
}
    @keyframes waveMove {
      0% { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
      100% { -webkit-mask-position: -200% 0; mask-position: -200% 0; }
    }

.home_section .banner_slider{
    position: absolute;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    top: 0;
}

.home_section .glide__slides img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home_section .glide__track,.home_section .glide,.home_section .glide__slides{
  height: 100%;
}

.over-none{
  overflow: hidden;
}


.home_section .home_content .com_btn a{
  background-color: var(--secondary-color);
  border: none;
}


.home_section .banner_illustration img{
  width: auto;
  height: 530px;
}
.home_section .home_content{
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 20px 0px;
}
.home_section .home_content h1{
font-weight: 800;
font-size: 64px;
line-height: 68.97px;
letter-spacing: 0%;
text-transform: uppercase;
color: var(--white);
margin-bottom: 15px;

}
.home_section .home_content p{
font-weight: 500;
font-size: 22px;
line-height: 28px;
color: var(--white);
margin-bottom: 20px;

}
.home_section .shape_obj {
    position: absolute;
    mix-blend-mode: overlay;
    left: 50%;
    transform: translateX(-50%);
    bottom: -179px;
    width: 417px;
    height: 413px;
}
.dots_container{
  text-align: center;
  margin-top: 10px;
  display: none;
}
.sticky {
  background: #1b1a1ad9; /* or any background to avoid transparency */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 999;
   animation: fadeDown 0.4s ease forwards;
}
.sticky nav{
   padding-top: 10px !important;
   padding-bottom: 10px !important;
}
.sticky.navbar-placeholder{
  min-height: 40px !important;
}
nav .site-logo{
    transform: scale(1);
  /* max-width: 240px !important; */
  transition: transform ease 1s;
  transform-origin: left;
  /* max-width: 100%;
    transition: max-width ease 1.1s; */
}
.sticky .site-logo{
  transform: scale(0.8);
  /* max-width: 240px !important; */
  transition: transform ease 1s;
}
@keyframes fadeDown {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.glide__bullet {
  background-color: #ccc;
  border: none;
  width: 15px;
  height: 5px;
text-align: center;
  margin: 5px;
  border-radius: 10px;
  display:inline-block;
  transition: background-color 0.3s;
}

.glide__bullet--active {
  background-color: var(--secondary-color);
}
.home_section .shape_obj2{
  position: absolute;
  mix-blend-mode: overlay;
  right: -60px;
  top: 0px;
  width: 350px;
  height: 400px;
}

.navbar-placeholder {
  min-height: 110px; /* Same as actual navbar height */
  transition: ease 0.3s ease;
}
.home_section .shape_obj img, .home_section .shape_obj2 img{
width: 100%;
object-fit: contain;
height: 100%;
}
.companies_section{
  background-color: #fff;
  max-width: 1500px;
  margin: auto;
}
.companies_section .companies_img_box{
  width: 100% !important;
  height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
  padding: 5px;
}
.companies_section .companies_img_box img{
  object-fit: contain;
  width: 100%;
  height: 100%;
}


.about_detail_section{
  background-color: var(--dark);
}

.about_detail_section img{
  width: 100% !important;
  height: 100%;
  object-fit: cover;
    transition: all .5s;
}
.about_detail_section img:hover{
  transform: scale(1.02);
  transition: all .5s;
}

.about_detail_section .content_box h6{
font-weight: 700;
font-size: 24px;
line-height: 28px;
color: var(--white);
text-transform: capitalize;
margin-bottom: 10px;
}

.about_detail_section .content_box p{
font-weight: 400;
font-size: 15px;
line-height: 24px;
color: var(--white);
margin-bottom: 8px;
}
.about_detail_section .content_box p:last-child{
  margin-bottom: 0 !important;
}

.vision_section{
  background:url(../../assests/images/vision_shap.png);
  background-size: 100% 100%;
  background-position: center;
  padding-bottom: 150px !important;
}

.vision_section .heading_box h2::before{
  color: var(--dark);
}
.vision_section .vision_box{
  padding: 10px;
  text-align: center;
}
.vision_section .vision_box img{
  width: 40px;
  height: 40px;
  object-fit: contain;
  margin-bottom: 15px;
}
.vision_section .vision_box h6{
font-weight: 500;
font-size: 24px;
line-height: 30px;
letter-spacing: 0%;
text-align: center;
text-transform: capitalize;
color: var(--white);
  margin-bottom: 15px;
}
.vision_section .vision_box p{
font-weight: 500;
font-size: 15px;
line-height: 22px;
letter-spacing: 0%;
text-align: center;
color: var(--white);
}
.services_section{
  background-color: var(--white);
  margin: auto;
  margin-top: -30px !important;
  max-width: 1600px;
}

.services_section .services_box{
  width: 100%;
  background-color: var(--secondary-color);
  border-radius: 20px;
  position: relative;
  height: 440px;
}

.services_section .services_box > img{
  width: 100% !important;
  height: 100% !important;
  border-radius: 20px;
  object-fit: cover;
    transition: height .5s;
}
.services_section .services_box .service_content{
  display: flex;
  justify-content: center;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  min-height: 70px;
  align-items: center;
}
.services_section .services_box .service_content a{
font-weight: 500;
font-size: 22px;
text-decoration: none;
line-height: 30px;
letter-spacing: 0%;
text-align: center;
color: var(--white);
text-transform: capitalize;

}
.services_section .services_box .service_content img{
  display: none;
  transition: all .5s;
  width: 50px;
  height: auto;
  margin-left: 5px;
}
.services_section .services_box:hover .service_content img{
display: inline-block;
transition: all .5s;
}
.services_section .services_box:hover > img{
  height: calc(100% - 70px) !important;
  transition: height .5s;
}

.impact_section{
    background:url(../../assests/images/impact_bg.webp);
  background-size: 100% 100%;
  margin-top: -40px;
  position: relative;
  background-position: center;
  padding-bottom:70px !important;
}
.impact_section .heading_box{
  padding-top: 70px;
}
.impact_section::after{
     background:url(../../assests/images/impact_bg_down.webp);
  background-size: 100% 100%;
  width: 100%;
  height: 100px;
  left: 0;
  bottom: 0;
  content: '';
  position: absolute;
  background-position: center;
}


.impact_section .heading_box h2::before{
  color: var(--dark);
}
.impact_section .impact_box{
  text-align: center;
  padding: 10px;

}
.impact_section .impact_box h6{
font-weight: 800;
font-size: 50px;
line-height: 50px;
letter-spacing: 0%;
text-align: center;
color: var(--white);
text-transform: uppercase;
margin-bottom: 10px;

}
.impact_section .impact_box p{
font-weight: 400;
font-size: 20px;
line-height: 26px;
letter-spacing: 0%;
text-align: center;
color: var(--white);

}


.segment_slider{
  background-color: #fff;
}
.segment_slider .segment_box{
  padding: 10px;
  
}
.segment_slider .segment_box img{
  width: 100%;
  height: 100%;
  object-fit: cover;

}
.segment_slider .segment_box h6{
font-weight: 400;
font-style: Bold;
font-size: 20px;
line-height: 24px;
margin-top: 15px;
letter-spacing: 0%;
color: var(--dark);
text-align: center;
text-transform: capitalize;

}
.segment_slider .segment_box:hover h6{
  font-weight: 700;
  transition: all .3s;
}
.segment_slider .segment_box:hover img{
  transform: scale(1.04);
  transition: all .5s;
}
.spacer{
  height: 7100px;
}

/* Innerpages common CSS  */
.innerBanner{
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
    background-attachment: fixed !important;
}
.innerBanner .fixed-nav-pt{
  padding-top: 200px !important;
}

.innerBanner .innerBanner_text{
  height: 100%;
  display: flex;
  position: relative;
  justify-content: flex-end;
  align-items: flex-start;
  flex-direction: column;
  padding-bottom: 10px;
}
.innerBanner .innerBanner_text h1{
font-weight: 800;
font-size: 44px;
text-align: left;
line-height: 46.97px;
letter-spacing: 0%;
text-transform: uppercase;
color: var(--white);
margin-bottom: 15px;

}

.innerBanner .innerBanner_text .breadcrumb {
    font-size: 14px;
    margin-bottom: 0px;
  }
  .innerBanner .innerBanner_text .breadcrumb ol {
    list-style: none;
    padding: 0;
    display: flex;
    gap: 8px;
  }
  .innerBanner .innerBanner_text .breadcrumb li::after {
    content: '>';
    margin-left: 8px;
  }
  .innerBanner .innerBanner_text .breadcrumb li:last-child::after {
    content: '';
  }
  .innerBanner .innerBanner_text .breadcrumb a, .innerBanner .innerBanner_text .breadcrumb li {
    text-decoration: none;
    font-size: 16px;
    line-height: 18px;
    text-align: left;
    color: var(--white);
  }
  .innerBanner .innerBanner_text .breadcrumb a{
    text-decoration: none;
    font-size: 16px;
    line-height: 18px;
    text-align: left;
    color: var(--secondary-color);
  }
  .text-capitalize {
  text-transform: capitalize;
}
/* ABOUT US PAGE CSS  */

.about_us{
  background: url(../../assests/images/about_us/about_banner.webp);
}

.about_black_text{
  background-color: var(--white);
}
.about_black_text *{
  color: var(--dark) !important;
}
.about_vision{
  background: none;
  background-color: var(--white);
  padding-bottom: 3rem !important;
}
.about_vision .heading_box h2::before{
color: var(--primary-color);
}
.about_vision .vision_box *{
  color: var(--dark) !important;
}
.about_vision .vision_box img{
  filter: invert(127%) sepia(807%) saturate(1440%) hue-rotate(05deg) brightness(-30%) contrast(56%);
}
.teams_section{
  background: url(../../assests/images/about_us/about_team_banner.webp);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding-bottom: 130px !important;
}

.teams_section .heading_box h2::before{
  color: var(--dark);
}

.teams_section .teams_box{
  background-color: var(--white);
  width: 100%;
  border-radius: 30px;
  margin-top: 90px;
  margin-bottom: 20px;
  padding: 20px;
}
.teams_section .teams_box img{
  width: 100%;
  height: 100%;
  margin-bottom: 15px;
  object-fit: cover;
  margin-top: -90px;
}
.teams_section .teams_box:hover{
  box-shadow: 4px 4px 19.6px 0px #00000040;
background-color: var(--secondary-color);
}
.teams_section .teams_box:hover h6,.teams_section .teams_box:hover p{
color: var(--white);

}
.teams_section .teams_box h6{
font-weight: 600;
font-size: 18.96px;
text-align: center;
line-height: 24.45px;
letter-spacing: 0%;
text-align: center;
color: var(--dark);
text-transform: capitalize;

}
.teams_section .teams_box p{
  text-align: center;
font-weight: 500;
font-size: 12.81px;
line-height: 18.47px;
letter-spacing: 0%;
color: var(--dark);
text-transform: capitalize;

}

/* Client inner page CSS starts  */

.client_banner{
    background: url(../../assests/images/Clients/client_bg.webp);
}

.clients_em_section .client_in_box{
  width: 100%;
  padding: 25px;
  background-color: var(--gray);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 120px;
}
.clients_em_section .client_in_box img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* KEY Segements inner page CSS starts  */

.segment_em_banner{
    background: url(../../assests/images/segment/segment_bg.webp);
}
.segment_em_section .segmenting_in_box{
  width: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 15px;
  height: 100%;
  transition: all .5s;
}
.segment_em_section .segmenting_in_box::after{
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
 background: linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)),
linear-gradient(180.46deg, rgba(0, 0, 0, 0) 58.83%, #000000 99.6%);
}
.segment_em_section .segmenting_in_box:hover::after{
 background: linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)),
linear-gradient(180.46deg, rgba(255, 71, 0, 0) 58.83%, #FF4700 99.6%);
transition: all .5s;
}
.segment_em_section .segmenting_in_box:hover{
border: 1px solid var(--secondary-color);
}
.segment_em_section .segmenting_in_box:hover img{
transform: scale(1.1);
transition: all .5s;
}
.segment_em_section .segmenting_in_box img{
  width: 100%;
  height: 100%;
transition: all .5s;
  object-fit: cover;
}
.segment_em_section .segmenting_in_box h6{
  position: absolute;
  bottom: 20px;
  left: 0;
  display: block;
  z-index: 4;
  padding: 0px 10px;
  width: 100%;
font-weight: 600;
font-size: 22px;
color: var(--white);
line-height: 26px;
letter-spacing: 0%;
text-align: center;
text-transform: capitalize;
}


/* Services section inner page CSS starts  */

.services_in_banner{
    background: url(../../assests/images/services/services_banner.webp);
}
.services_section_inner .services_box{
  width: 100%;
  overflow: hidden;
  border-radius: 20px;
  position: relative;
}
.services_section_inner .services_box img{
  width: 100%;
  height: 100%;
  object-fit: cover;
    transition: .2s ease-in;
}
.services_section_inner .services_box:hover img{
  transform: scale(1.03);
  transition: .2s ease-in;
}

.services_section_inner .services_box h6{
  position: absolute;
  bottom: 0;
  left: 0;
  margin: 0;
  width: 100%;
  padding: 15px 10px;
background: #FF4700CF;
text-align: center;
font-weight: 600;
font-size: 22px;
line-height: 24px;
color: var(--white);
letter-spacing: 0%;
text-transform: capitalize;

}

.services_section_inner .services_related_container{
  margin-top: 20px;
 display: grid;
  gap: 15px;
  grid-template-columns: repeat(4, 1fr);
}
.services_section_inner .services_related_container .related_box_img{
  position: relative;
  overflow: hidden;
  border-radius: 20px;
}
.services_section_inner .services_related_container .related_box_img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
    transition: .2s ease-in;
}
.services_section_inner .services_related_container .related_box_img:hover img{
  transform: scale(1.03);
  transition: .2s ease-in;
}

.services_section_inner .services_related_container .related_box_img::after{
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
 background: linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)),
linear-gradient(180.46deg, rgba(0, 0, 0, 0) 58.83%, #000000 99.6%);
}
.services_section_inner .services_related_container .related_box_img:hover::after{
 background: linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)),
linear-gradient(180.46deg, rgba(255, 71, 0, 0) 58.83%, #FF4700 99.6%);
transition: all .5s;
}
.services_section_inner .services_related_container .related_box_img:hover{
border: 1px solid var(--secondary-color);
}
.services_section_inner .services_related_container .related_box_img h6{
    position: absolute;
  bottom: 5px;
  left: 0;
  display: block;
  z-index: 4;
  padding: 0px 10px;
  width: 100%;
font-weight: 600;
font-size: 14px;
color: var(--white);
line-height: 18px;
letter-spacing: 0%;
text-align: center;
text-transform: capitalize;
}

.services_section_inner .tab_content {
  display: none;
}
.services_section_inner .tab_content.active {
  display: block;
}
.services_section_inner .tab_content.fade {
  opacity: 0;
  transition: all 1s ease;
}
.services_section_inner .tab_content.fade.show {
  opacity: 1;
    transition: opacity 1s ease;
}
.services_section_inner .services_tab{
  display: flex;
  padding: 0;
  list-style-type: none;
  margin: 0;
  flex-direction: column;
  gap: 10px;
  justify-content: flex-start;
  align-items: flex-start;
}
.services_section_inner .services_tab li{
  width: 100%;
}
.services_section_inner .services_tab .tab_inner{
  display: flex;
  cursor: pointer;
  flex-direction: row;
  gap:5px;
  align-items: center;
  justify-content: space-between;
  border: 0.3px solid var(--dark);
  background-color: var(--white);
  padding: 13px 15px;
  border-radius: 15px;
  width: 100%;
}
.services_section_inner .services_tab .tab_inner p{
font-weight: 400;
font-size: 14px;
line-height: 16px;
letter-spacing: 0%;
text-transform: capitalize;
color: var(--dark);

}
.services_section_inner .services_tab .tab_inner span i{
  font-size: 18px;
  color: var(--dark);
  opacity: 0.8;
}
.services_section_inner .services_tab .tab_inner.active {
  background-color: var(--secondary-color);
  color: var(--white);
  border: 0;
}
.services_section_inner #scrolltab{
  display: none;
  background-color: var(--primary-color);
}
.services_section_inner .services_tab .tab_inner.active *{
  color: var(--white);
}
.services_section_inner .services_tab .tab_inner.active i{
  font-size: 24px;
  transition: all .3s;
}

.services_section_inner .services_tab .tab_inner span{
  display: flex;
  align-items: center;
}


/* Career page css starts  */



.career_banner{
    background: url(../../assests/images/career_banner.webp);
}

.career_section .heading_box h2,.career_section .heading_box h2::before{
  text-transform: capitalize;
}

.career_section .career_form_box h6{
font-weight: 800;
margin-bottom: 15px;
font-size: 24px;
color: var(--dark);
line-height: 26px;
letter-spacing: 0%;

}
.career_section .career_form_box p{
font-weight: 400;
font-size: 18px;
color: var(--dark);
line-height: 22px;
letter-spacing: 0%;

}
.career_section .career_form_box form{
  margin-top: 25px;
}
.career_section .career_form_box form ::placeholder{
  color: var(--dark);
}
.career_section .career_form_box form input{
background-color: #F7F7F7;
width: 100%;
border-radius: 10px;
border: none;
margin-bottom: 15px;
padding: 12px 15px;
font-weight: 400;
font-size: 18px;
color: var(--dark);
line-height: 22px;
letter-spacing: 0%;
}
.career_section .career_form_box form .upload_cv_box{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}
.career_section .career_form_box form .upload_cv_box label{
 display: inline-block;
  padding: 10px 20px;
  cursor: pointer;
  font-weight: 400;
  border: 2px solid var(--primary-color);
  border-radius: 8px;
  background-color: #F7F7F7;
font-size: 18px;
width: 40%;
margin-left: 20px;
color: var(--dark);
line-height: 22px;
}
.career_section .career_form_box form .upload_cv_box input{
  display: none;
}
.career_section .career_form_box form .upload_cv_box span {
  margin-left: 10px;
font-size: 18px;
font-weight: 400;
color: var(--dark);
line-height: 22px;
}
form .submit_btn{
  width: 100%;
  background-color: var(--primary-color);
  border-radius: 10px;
  padding: 12px 10px;
  text-align: center;
  color: var(--white);
  font-size: 18px;
  line-height: 22px;
  margin-top: 40px;
  font-weight: 500;
  border: none;
  transition: ease .5s;
}
form .submit_btn:hover{
  transform: scale(1.04);
  background-color: var(--secondary-color);
}

/* Contact Us page css starts  */

.contact_banner{
    background: url(../../assests/images/contact_us_banner.webp);
}


.contact_section .contact_form_box h6{
font-weight: 800;
margin-bottom: 35px;
font-size: 24px;
color: var(--dark);
line-height: 26px;
letter-spacing: 0%;

}
.contact_section .contact_form_box form ::placeholder{
  color: var(--dark);
}

.contact_section .contact_form_box form input,.contact_section .contact_form_box form textarea{
background-color: #F7F7F7;
width: 100%;
border-radius: 10px;
border: none;
margin-bottom: 15px;
padding: 12px 15px;
font-weight: 400;
font-size: 18px;
color: var(--dark);
line-height: 22px;
letter-spacing: 0%;
}
.contact_section .contact_form_box form .submit_btn{
  margin-top: 20px;
}

.contact_section .contact_details{
  width: 100%;
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.contact_section .contact_details li{
  width: 100%;
  min-height: 140px;
  background-color: #F7F7F7;
  padding: 20px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
.contact_section .contact_details li:nth-child(2){
  background-color: #F2F2F2;
}
.contact_section .contact_details span i{
  font-size: 40px;
  width: 40px;
  line-height: 40px;
  margin-right: 20px;
  color: var(--primary-color);
}
.contact_section .contact_details a{
font-weight: 500;
color: var(--black);
text-decoration: none;
width: calc(100% - 60px);
font-size: 18px;
line-height: 30px;
letter-spacing: 0%;
text-transform: capitalize;
}
.contact_section .contact_details a:hover{
  color: var(--primary-color);
}

#alert{
  display: none;
  text-align: left;
  color: #fff;
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 18px;
  line-height: 22px;
  margin-top: 20px;
}