/* Admin Panel CSS Override */
body.outside.rad-theme {
  background: whitesmoke !important;

}

body .global-header {

  background-color: white;
}
.content_section_services p a{
  font-weight: bold;
  color: var(--bg-button-blue);
}
.content_section_services p {
margin-bottom: 10px;
}

.container{
  width: 100%;
}
@media (min-width: 640px){
  .container{
    max-width: 640px;
  }
}
@media (min-width: 768px){
  .container{
    max-width: 768px;
  }
}
@media (min-width: 1024px){
  .container{
    max-width: 1024px;
  }
}
@media (min-width: 1280px){
  .container{
    max-width: 1280px;
  }
}
@media (min-width: 1536px){
  .container{
    max-width: 1460px !important;
  }
}

/* FONT FAMILY  */
@font-face {
  font-family: "Montserrat";
  src: url("/assets/font-family/Montserrat-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

  @font-face {
    font-family: 'Montserrat';
    src: url('/assets/font-family/Montserrat-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("/assets/font-family/Montserrat-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("/assets/font-family/Montserrat-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

  body {
    font-family: "Montserrat";
    overflow-x: hidden;
  }



/* Hide the reCAPTCHA badge */
/* .grecaptcha-badge {
    display: none !important;
} */

.outside .white-label-logo {
    width: 160px !important;
}

html {
    scroll-behavior: smooth !important;
}


:root {
    --custom-margin-left: 357px;
    --custom-margin-right: 280px;
    --bg-button-gradient-color:linear-gradient(90deg, #00B2FF 0%, #5ECEFF 100%);
    --bg-secondary-color:#D1F1FF;
    --bg-button-blue:#00B2FF;
    --text-blue:#0780B8;
    --bg-gray:#EFEFEF;
    --bg-dark-blue:#000E15;

}
/* .gradient-btn-hover {
  background-image: linear-gradient(to right, #00B2FF ,#5ECEFF, #5ECEFF,#00B2FF);
  background-size: 200% 100%;
  border-radius: 50px;
  moz-transition: all .4s ease-in-out;
  -o-transition: all .4s ease-in-out;
  -webkit-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out;
} */
.gradient-btn-hover:hover {
  background-position: 100% 0;
  moz-transition: all .4s ease-in-out;
  -o-transition: all .4s ease-in-out;
  -webkit-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out;
}

.gradient-btn-hover {
    background-image: linear-gradient(to right, #00B2FF, #5ECEFF, #5ECEFF, #00B2FF);
    background-size: 250% 100%;
    border-radius: 50px;
    background-clip: padding-box; /* Ensures background respects border radius */
    transition: background-position 0.4s ease-in-out;
  }

  .gradient-btn-hover {
    will-change: transform;
  }

  /* .gradient-btn-hover:hover {
    transform: scale(1.02);
  } */

.gradient-btn-hover {
    clip-path: inset(0 round 50px);
  }



.custom_left_container {
    margin-left: var(--custom-margin-left);
}

.custom_right_container {
    margin-right: var(--custom-margin-right);
}
.primary_color{
    background-color: var(--bg-primary-color);
}

@media(max-width:1024px)
{
  .custom_right{
  margin-right: auto !important;
  }

}
.header-scroll{
  background-color: white !important;
  }



/* HOME PAGE CSS */

#loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 999;
}


#stickyHeader {
  transition: padding 0.3s ease-in-out;
}

.custom_fixed_background{
  background: white !important;
}

.pulse {
    animation: pulse-animation 1s infinite;
    opacity: 1 !important;
}

@keyframes pulse-animation {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}


/* FORM CSS */
.form_feilds input{
    height: 38px;
    width: 100%;
    outline: 0;
    padding: 0 12px;
    border: 1px solid #D2D2D2;
}
.form_feilds textarea{
    height: 200px;
    width: 100%;
    outline: 0;
    border: 1px solid #D2D2D2;
    padding: 10px 12px;
}

#contact_us_form-form-choose_topic-field {
    height: 42px !important;
    width: 100% !important;
    outline: 0 !important;
    border: 1px solid #D2D2D2 !important;
    padding: 10px 12px !important;
}


.btn,
.btn-large {
    transition: 0.6s ease;
}

.btn:hover {
    transform: scale(0.9);
}

.contact_form_checkbox label {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 10px;
}
.contact_form_checkbox input {
    width: 4% !important;
    align-self: baseline;
    outline: 0;
    border: 0;
}

@media(min-width:1280px) and (max-width:1340px)
{
  .custom_side_gaps{
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

@media(min-width:1024px) and (max-width:1048px)
{
  .custom_side_gaps{
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}


@media(min-width:1024px) and (max-width:1472px)
{
  .custom_heading_space{
    transform: translateY(-101px) !important;
  }
}

@media(max-width:1024px)
{
  .cookies-fixed{
    margin-left: 20px;
  }
}


@media(max-width:1214px)
{
  .service_single_content_section{
    margin-top: 20px !important;
  }
}


/* UnderLine */

/* Define the animation */
@keyframes underline {
  0% {
      width: 0;
      left: 0;
  }

  100% {
      width: 100%;
      left: 0;
  }
}

/* Apply animation on hover */
.animate-underline {
  position: relative;
  text-decoration: none;
}

.animate-underline::before {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: white;
  transition: width 0.3s ease-out;
}

.animate-underline:hover::before {
  animation: underline 0.3s forwards;
}



.footer_eyeweb p a {
  font-weight: 500;
}

.footer_eyeweb p {
  color:white;
}



@media (min-width: 1280px) and (max-width: 1325px) {
    .custom_side_gaps {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

@media (min-width: 1024px) and (max-width: 1078px) {
    .custom_side_gaps {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}



/* CSS 28 */

.second-sec .owl-dots{
  margin-top: 40px !important;


}

.second-sec .owl-dot {
  background-color: black !important;
     width: 10px !important;
    height: 10px !important;
    border-radius: 10px !important;
    margin-right: 10px !important;
}
.second-sec .owl-dot.active  {
  background: linear-gradient(90deg, #00B2FF 0%, #5ECEFF 100%) !important;
}



#my-btn{
  background-color: #77d6ff;
  text-align: center;
  cursor: auto;
}
.second-sec-content p{
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#case-description p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width:1360px) and (min-width:1024px){
  .service{
      padding-left: 20px !important;
      padding-right: 20px !important;
  }
}
@media (min-width: 1384px) and (max-width: 1700px){
  .right-container{
      margin-left:-40% !important;
  }
}
@media (min-width: 1010px) and (max-width: 1384px) {
  .left-bg {
   width:65% !important;
  }
  .right-container{
      margin-left:-30% !important;
  }
  .content{
      padding-left: 20px;
     }
     #case-description{
      width:52%;
      }
}

@media (max-width: 768px) {

.right-container{
  height: 400px !important;
}
.left-bg{
  height: 600px;
}
/* .desktop-owl .owl-carousel .item img {
  width: auto !important;
} */

}
@media (max-width: 475px) {
.second-sec .owl-dots{
  display: flex;
  justify-content: center;
}
.left-bg{
  height: 650px;
}
.right-container{
  height: 300px !important;
}
}
.featured-carousel,
.featured-carousel .owl-carousel,
.featured-carousel .owl-stage-outer,
.featured-carousel .owl-stage,
.featured-carousel .owl-item {
  height: 100% !important;
}

.featured-carousel .item {
  height: 100% !important;
  width: 100% !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.featured-carousel .item img {
  height: 100% !important;
  width: 100% !important;
  object-fit: cover;
}
.parent .owl-dots-container .owl-dot {
  display: flex;
  width: 12px;
  height: 12px;
  margin: 5px;
  background: #000;
  border-radius: 50%;
  transition: background 0.3s;
}

.parent .owl-dots-container .owl-dot.active {
  background: #fff;
}

@media (max-width: 1023px) {
  .left-bg {
     background: linear-gradient(90deg, #05B4FF 0%, #59CDFF 100%) !important;
     width: 100% !important;
   }

   .right-container{
      height: 600px;
      margin-left: 0 !important;
   }

   #case-description{
      width: 100%;
   }


 }
 .desktop-owl .owl-carousel .owl-item .item img {
  width: auto !important;
 /* // max-width: 80px !important; */
}

/** Bullet styling */
.content-bullet ul {

    margin-left: 20px !important; /* Resets any unwanted margins */
}

.content-bullet ul li {
    list-style-type: disc !important; /* Ensures bullet points are visible */
    margin-right: 25px;
    padding-left: 10px; /* Adjust spacing */
}

.content-bullet ul li::marker {
    font-size: 10px; /* Adjust size */
    color: #333; /* Change color if needed */
    vertical-align: middle; /* Align with text */
}

.content-bullet p a {
    text-decoration: underline;
    color: inherit; /* Keep the original color */
    transition: color 0.3s ease; /* Smooth transition for color change */
}

.content-bullet p a:hover {
    color: #00B2FF; /* Change color to blue on hover */
}

/**white bullet**/
.content-bullet-white ul {

    margin-left: 20px !important; /* Resets any unwanted margins */
}

.content-bullet-white ul li {
    list-style-type: disc !important; /* Ensures bullet points are visible */
    margin-right: 25px;
    padding-left: 10px; /* Adjust spacing */
}

.content-bullet-white ul li::marker {
    font-size: 10px; /* Adjust size */
    color: #fff; /* Change color if needed */
    vertical-align: middle; /* Align with text */
}

.content-bullet-white p a {
    text-decoration: underline;
    color: inherit; /* Keep the original color */
    transition: color 0.3s ease; /* Smooth transition for color change */
}

.content-bullet-white p a:hover {
    color: #00B2FF; /* Change color to blue on hover */
}

.content-bullet-white ul li:last-child {
    margin-bottom: 10px;
}



/**owl scroll item center */
.owl-stage{
    display: flex;
    align-items: center;
}


/* .case_studies_slider .owl-dots{
    text-align: right !important;
    margin-top: 40px !important;


  }

  .case_studies_slider .owl-dot {
    background-color: black !important;
       width: 10px !important;
      height: 10px !important;
      border-radius: 10px !important;
      margin-right: 10px !important;
  }
  .case_studies_slider .owl-dot.active  {
    background: linear-gradient(90deg, #00B2FF 0%, #5ECEFF 100%) !important;
  } */

  /* Dots container alignment */
.case_studies_slider .slick-dots {
    text-align: right;
    margin-top: 40px;
    position: static; /* Override slick's default absolute positioning */
    bottom: auto;
}

/* Individual dot styling */
.case_studies_slider .slick-dots li button:before {
    content: '';
    background-color: black;
    width: 10px;
    height: 10px;
    border-radius: 10px;
    opacity: 1;
}

.case_studies_slider .slick-dots li {
    margin-right: 10px;
}

/* Active dot styling */
.case_studies_slider .slick-dots li.slick-active button:before {
    background: linear-gradient(90deg, #00B2FF 0%, #5ECEFF 100%);
    opacity: 1;
}

/* Optional custom styling for slick slider */
.case_studies_slider .slick-slide img {
    width: 100%;
}


#thumbs .slick-slide {
    opacity: 0.7;
    transition: all 0.3s ease;
}

#thumbs .slick-slide:hover {
    opacity: 1;
}

/* Create gaps between thumbnails - this is the key part */
#thumbs .slick-slide {
    margin: 0 9px; /* Half of your 18px gap on each side */
}

/* Compensate for the negative margin */
#thumbs .slick-list {
    margin: 0 -9px;
}



  /** Cookie concent */
  .js-cookie-consent {
    background: #ffffff !important;
    border: 1px #00B2FF solid;
    border-radius: 10px;
    margin: auto 0;
    left: 37%;
    bottom: 23px !important;
    right: 0;
    max-width: 600px;
    position: sticky;
}

@media (max-width: 768px) {
    .js-cookie-consent {
        left: 2%;
        right: 2%;
        max-width: 100%;
    }
}

.cookie-consent__message {
    color: #000000 !important;
    text-align: center;
}

.js-cookie-consent-agree {
    background: linear-gradient(to right, #00B2FF, #5ECEFF);
    color: #ffffff !important;
    margin-left: auto;
    margin-right: auto;
}
.js-cookie-consent-disagree {
    background: linear-gradient(to right, #00B2FF, #5ECEFF);
    color: #ffffff !important;
    margin-left: auto;
    margin-right: auto;
}

.case_studies_our_solution_desc p{
  margin-bottom: 10px;
}

.case_studies_our_solution_desc p{
  margin-bottom: 10px;
}

.about_service_section_description h3 {
   font-size: 20px;
   margin-bottom: 10px;
}
.about_service_section_description h2 {
   font-size: 24px;
   margin-bottom: 10px;
}
.about_service_section_description p {
   margin-bottom: 20px;
}
.about_service_section_description p:last-child {
   margin-bottom: 0px;
}



.header-clip {
  position: relative;
  z-index: 1;
}

/* visual background only */
.header-clip::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff; /* your pink / header bg */
  clip-path: polygon(4% 0%, 100% 0%, 97% 100%, 0% 100%);
  z-index: -1;
  pointer-events: none;
}


/* Base: mobile */
.stretch-bar {
  left: 70%;
  width: 30%;
}

/* ≥ 640px */
@media (min-width: 640px) {
  .stretch-bar {
    left: calc(50% + 640px * 0.2);
    width: calc(100vw - (50% + 640px * 0.2));
     clip-path: polygon(0 0, 100% 0%, 100% 100%, 2% 100%);
  }
}

/* ≥ 768px */
@media (min-width: 768px) {
  .stretch-bar {
    left: calc(50% + 768px * 0.2);
    width: calc(100vw - (50% + 768px * 0.2));
     clip-path: polygon(0 0, 100% 0%, 100% 100%, 2% 100%);
     
  }
}

/* ≥ 1024px */
@media (min-width: 1024px) {
  .stretch-bar {
    left: calc(50% + 985px * 0.2);
    width: calc(100vw - (50% + 985px * 0.2));
     clip-path: polygon(0 0, 100% 0%, 100% 100%, 2% 100%);
  }
}

/* ≥ 1280px */
@media (min-width: 1280px) {
  .stretch-bar {
    left: calc(50% + 1230px * 0.2);
    width: calc(100vw - (50% + 1230px * 0.2));
     clip-path: polygon(0 0, 100% 0%, 100% 100%, 2% 100%);
  }
}

/* ≥ 1536px (your final max width = 1460px) */
@media (min-width: 1536px) {
  .stretch-bar {
    left: calc(50% + 1405px * 0.2);
    width: calc(100vw - (50% + 1405px * 0.2));
    clip-path: polygon(0 0, 100% 0%, 100% 100%, 2% 100%);
  }
}
@media(max-width:1023px)
{
 .stretch-bar {
   display: none !important;
  }
}