.single>p {
            font-weight: bold;
            font-size: 15px;
            text-align: center;
        }
      

/* Blur background when modal is open */
body.modal-open > *:not(.modal) {
  filter: blur(6px);
  transition: filter 0.3s ease;
}
.contact-info-area-wrapper-p.new {
    margin-right: 0;
    padding: 146px 40px;
}
p.text-center.mt--20, p.text-center.mt--60 {
    text-align: left !important;
}

/* Premium modal styling */
#consentModal .modal-content {
    background-color: #0f172a;
    color: #e5e7eb;
    border: none;
    /* min-height: 100vh; */
    padding: 32px 16px;
    border-radius: 14px;
    padding-bottom: 8px;
}
.modal-footer.justify-content-center.sticky-bottom {
    border: 0;
}

button#exitBtn {
    border: 0;
    font-size: 14px;
    font-weight: 600;
    color: #cbcbcb;
    text-decoration: underline;
    padding: 11px;
}

button#enterBtn {
       background: #ffffff;
    padding: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
    border: 1px #fff solid;
}

#consentModal h2 {
    font-weight: 500;
    font-size: 24px;
    letter-spacing: 0.5px;
    font-family: inherit;
    color: #ffffff;
}

#consentModal p,
#consentModal li {
  font-size: 15px;
  line-height: 1.7;
  color: #cbd5e1;
margin-bottom: 10px;
}

#consentModal ul {
  max-width: 800px;
  margin: 20px auto;
}

#consentModal .btn-enter {
  background-color: #ffffff;
  color: #0f172a;
  font-weight: 500;
  padding: 12px 28px;
  border-radius: 0;
}

#consentModal .btn-enter:hover {
  background-color: #e2e8f0;
}

#consentModal .btn-exit {
  border: 1px solid #64748b;
  color: #cbd5e1;
  padding: 12px 28px;
  border-radius: 0;
}

p.disc.sm {
    color: #bcbcbc;
    font-size: 14px;
    margin-bottom: 10px;
    line-height: 1.4;
}

#consentModal .btn-exit:hover {
  background-color: #1e293b;
}
body.modal-open {
  overflow: hidden !important;
  height: 100vh;
}

/* Prevent html scrolling too */
html.modal-open {
  overflow: hidden !important;
}
/* Blur background when modal is open */

@media (max-width: 991.98px) {
  .modal-body {
    max-height: calc(100vh - 120px) !important;

  }
}








.banner-style-one .banner-one-inner .title {
    font-weight: 800;
    line-height: 82px;
    margin-bottom: 20px;
    font-size: 36px;
    color: var(--color-primary);
    line-height: 1.3;
}

ul.submenu span {
     padding-top: 20px;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 1px;
    font-weight: 700;
    color: #aeaeae;
    display: block;
}

.header-one .nav-area {
    margin-right: 16px;
}

.nav-area ul {
    display: flex;
    align-items: center;
    gap: 32px;
    padding: 0;
    margin: 0;
    list-style: none;
}




ul.submenu.parent-nav span {
    padding-top: 0px;
    padding-left: 16px;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 1px;
    font-weight: 700;
    color: #aeaeae;
}

.circle p {
    color: #ffffff;
    font-size: 12px;
}

/* 
.clrcle-clok {
    text-align: center;
    justify-content: center;
    display: flex;
    align-items: center;
} */


/* .circle-container {
            position: relative;
           
            width: 500px;
            height: 500px;
            display: flex;
            justify-content: center;
            align-items: center;
        } */


        .circle-container {
            position: relative;
            
            /* Responsive Logic: */
            width: 90%;          /* On mobile, take up 90% of screen width */
            max-width: 600px;    /* On desktop, stop growing at 600px */
            
            /* Keeps it a perfect square automatically */
            aspect-ratio: 1 / 1; 
            
            display: flex;
            justify-content: center;
            align-items: center;
            
            /* Optional: margin for safety on very small screens */
            margin: auto; 
        }



        /* 3. THE WHITE BACKGROUND CIRCLE */
        .white-circle {
            position: absolute;
            width: 100%;
            height: 100%;
            background: #fff;
            border-radius: 50%;
            /* box-shadow: 0 10px 20px rgba(0,0,0,0.1); */
            background-image: url(https://html.themewant.com/invena/assets/images/pricing/bg_img.webp);
            background-size: cover;
            z-index: 1;
        }

        /* 4. THE LOGO (CENTERED) */
        .clrcle-clok .logo {
            position: absolute;
            z-index: 3;
            width: 150px; 
            display: flex;
            justify-content: center;
            align-items: center;
        }
       .clrcle-clok .logo img {
            width: 100%;
            height: auto;
        }

        /* 5. THE ROTATING TEXT WRAPPER */
        .text-ring {
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: 2;
            animation: spin 80s linear infinite;
        }

        .text-ring span {
            position: absolute;
            left: 50%;
            top: 0; 
            width: 20px; 
            margin-left: -10px; 
            height: 50%; 
            transform-origin: bottom center;
            
            font-family: inherit; 
            font-size: 16px; 
            font-weight: bold;
            text-transform: uppercase;
            text-align: center; 
        }

        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }





.service-single-main-wrapper-five {
    background: #ffffff;
    padding: 40px;
    border-radius: 10px;
    text-align: left;
        border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0px 20px 35px rgba(0, 0, 0, 0.08);
    min-height: 445px;
}
.service-single-main-wrapper-five .rts-btn {
    max-width: max-content;
    position: absolute;
    bottom: 40px;
}

.banner-style-one.two {
    background-image: url(../images/banner/01.webp);
    min-height: 690px;
    align-items: center;
    z-index: 1;
    display: flex;
    position: relative;
    background-position: center;
    background-image: linear-gradient(to right, #f0f0f0 18%, rgb(255 255 255 / 58%) 75%), url(../images/banner/33.webp);
}

.button-area i {
    font-size: 16px;
       color: #00223D;
}


.legal ul li {
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    margin-bottom: 20px;
    color: #5D666F;
    margin: 0;
}

.legal ul {
    margin-top: 0px;
    margin-bottom: 20px;

}

.legal h5 {
    margin-top: 30px;

}

.legal p.disc {
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    margin-bottom: 0 !important;
    color: #5D666F;
}

.rts-client-area.ptb--30.bg_cts-10.bg_image .title-area-client-client::before {
    /* content: "";
    position: absolute;
    left: 67.7%;
    width: 100%;
    height: 1px;
    width: 32%; */
    background: #ddd;
    display: flex;
    align-items: center;
    margin-top: 15px;
}

.rts-client-area.ptb--30.bg_cts-10.bg_image .title-area-client-client::after {
    /* content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    width: 32%; */
    background:#ddd;
    display: flex;
    align-items: center;
    margin-top: -14px;
}


.thumbnail img {
    width: 150px;
}

.counter-about-area img {
    width: 80px;
}
.counter-about-area h6 {
        margin-top: 12px;
    font-size: 16px;
    margin-bottom: 0;
    line-height: 20px;
}

.footer-logo-area-left-8 .logo img {
    width: 220px;
}


.header-main-one-wrapper .thumbnail img {
        width: 220px;
}

.single-team-area-one-start .thumbnail img {
    width: 100%;
}

.client-three-wrapper.lg-img img:hover {
    max-width: 130px;
    filter: contrast(0.5);
}
.single-project-style-three p {
    font-size: 16px;
    color: #313131;
    margin-bottom: 24px;
}
.single-project-style-three.two {
    margin: 0;
}



.left-thumbnail-about-area-two img {
    border-radius: 10px;
}
a.title-link:hover,
a.title-link:hover h6.title, 
a.title-link:hover i {
    color: #141416; 
    text-decoration: none;
}

.service-links {
    border-bottom: 1px solid #E9ECF1;
    padding: 24px 24px;
background: #ffffff;
    border-radius: 10px;
}

a.title-link i {
    font-size: 14px;
   color:#141416;
   margin-right:8px;
}
.service-links h6.title {
    max-width: 90%;
    font-size: 18px;
    margin-bottom: 10px;
}
.service-links .disc {
    max-width: 88%;
    margin: 0;
}

.title-link {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    text-decoration: none;
    color: inherit;
    gap: 10px;
    cursor: pointer;
}

/* Optional: Hover effect */
.title-link:hover .title,
.title-link:hover i {
    color: #007bff; /* Change to your brand color */
}

.client-three-wrapper.lg-img img:hover {
    max-width: 130px;
    filter: unset;
}



.client-three-wrapper.lg-img .single {
    width: 186px;
    height: 98px;
    }
    .client-three-wrapper.lg-img img {
    max-width: 130px;
}


.glass-card {
    background: #ffffff6e;
    position: absolute;
    top: 40%;
    left: 0px;
    text-align: left;
    border-radius: 15px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0px 20px 35px rgba(0, 0, 0, 0.08);
    border-radius: 14px;
    padding: 32px 30px;
    /* display: flex; */
    align-items: center;
    gap: 35px;
    cursor: pointer;
}

.progress-wrap.active-progress {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    background: #ffffff;
}

/* 1. Make the wrapper the anchor point */
.thumbnail-area-wrapper-inner-6 {
    position: relative;
    border-radius: 10px; 
    overflow: hidden;    
    display: block;
}


.image-floating-card {
  position: absolute;
    top: 0;
    left: 50%;
    bottom: 0;
    transform: translateX(-42%);
    width: 100%;
    min-width: 278px;
    max-width: 76%;
    background-color: #ffffff;
    padding: 48px 38px;
    border-radius: 10px;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1);
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 40px 0px;
}

/* Optional Styling for the content inside the box */
.image-floating-card .icon {
    color: #1F2C38; /* Or your brand color */
    background: #f4f4f4;
    padding: 10px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-floating-card .content h6 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #1F2C38;
}

.image-floating-card .content p {
    margin: 0;
    font-size: 14px;
    color: #777;
}

.rts-cts-area-start.bg_cts-10 .row {
    align-items: center;
}

.rts-cts-area-start.bg_cts-10 .col-lg-4 .cta-style-10-wrapper {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
}



.bg_team-area-five {
    background: #f2f2f2;
}

p.disc, .team-details-right-inner p.disc {
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    margin-bottom: 20px;
    color: #5D666F;
}

.thumbnail-team-details img {
    border-radius: 10px;
}

.icon img {
    display: block;
    margin-bottom: 8px;
    width: 31px;
}

.orbit-container {
        position: relative;
        width: 500px;  
        height: 500px; 
        margin-top: 50px;
    }

    /* 2. The Dotted Orbit Ring */
    .orbit-ring {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 2px dashed #ccc; /* Lighter, more spaced dash */
        border-radius: 50%;
        box-sizing: border-box;
        z-index: 0;
        background: #f2f2f2;
    }

    /* 3. The Big Center Circle - Made bigger */
    .center-circle {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 320px;  /* Increased from 160px */
        height: 320px; /* Increased from 160px */
        background: #fff;
        border-radius: 50%;
        /* Soft, prominent shadow */
        box-shadow: 0 15px 40px rgba(0,0,0,0.08);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 2;
        text-align: center;
        padding: 15px;
    }

    /* 4. The Small Satellite Circles */
    .satellite {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 110px;  /* Slightly reduced to fit better */
        height: 110px; /* Slightly reduced to fit better */
        margin-top: -55px;  /* Half of new height */
        margin-left: -55px; /* Half of new width */
        background: #00223d;
        border-radius: 50%;
        /* Softer shadow */
        box-shadow: 0 10px 30px rgba(0,0,0,0.06);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 1;
        text-align: center;
        padding: 10px;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        
        /* Positioning Math:
           250px = Radius (Half of container 500px). 
           This places the center of the satellite ON the line.
        */
        transform: rotate(var(--angle)) translate(250px) rotate(calc(-1 * var(--angle)));
    }

    /* Hover Effect */
    .satellite:hover {
        z-index: 10;
        box-shadow: 0 15px 40px rgba(0,0,0,0.12);
    }

    /* --- Typography & Icons --- */
    .icon img {
        display: block;
        margin-bottom: 8px;
    }

    /* Center Circle Specific Styles */
    .center-circle .icon img { width: 50px; height: 50px; }
    .center-circle .title { font-size: 18px; font-weight: 700; color: #222; margin: 0; }
    .center-circle .disc { font-size: 14px; color: #666; margin: 5px 0 0 0; line-height: 1.4; }

    /* Satellite Circle Specific Styles */
    .satellite .icon img { width: 40px; height: 40px; }
    .satellite .title {
    font-size: 12px;
    font-weight: 500;
    color: #ffffff;
    margin: 0;
    font-family: 'DM Sans';
    line-height: 1.4; 
}
    .satellite .disc { font-size: 11px; color: #888; margin: 2px 0 0 0; line-height: 1.2; }

.client-three-wrapper.lg-img .single.sm img {
    max-width: 66px;
}
.client-three-wrapper.lg-img .single.md img {
    max-width: 92px;
}

.bg_cts-10.bg_cts-top{
    background-image: url(../images/cta/09.webp);
    background-color: #00223d;
    background-blend-mode: color-burn;
    padding: 60px 0;
}

.bg_cts-top .title-style-five .title {
    font-size: 40px;
    font-weight: 700;
    margin-top: 15px;
    color: #ffffff;

}

p.disc a:hover, p.disc a:focus, p.disc a:active, p.disc a {
    text-decoration: none;
    outline: none;
    color: #ffffff;
}

.phn-btn {
    background: #F2F2F2;
    height: 48px;
    min-width: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: none;
}



.marquee-window .single img {
    max-height: 50px;
    width: auto;
    display: block;
    filter: grayscale(1);
}


/* 1. The Outer Window */
.marquee-window {
    overflow: hidden; 
    width: 100%;
    padding: 30px 0; 
}

/* 2. The Moving Track */
.client-three-wrapper.slider {
    display: flex;
    align-items: center;
    /* IMPORTANT: Forces the width to be the sum of all logos */
    width: max-content; 
    /* The Animation */
    animation: scroll-logos 25s linear infinite;
}

/* 3. Individual Logo Items */
.single {
 
    flex-shrink: 0; 
    /* padding: 0 40px; padding when added image  */
        padding: 0 8px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Image Sizing (Adjust as needed) */



.single img {
    max-height: 60px;
    width: auto;
    display: block;
    filter: grayscale(1);
}
.single:hover img {
    filter: none;
}

/* 4. The "Seamless Loop" Animation */
@keyframes scroll-logos {
    0% {
        transform: translateX(0);
    }
    100% {
        /* Move exactly -50% because we have 2 sets of logos. 
           When set 1 moves completely off-screen, set 2 is in 
           the exact start position, and it snaps back to 0. */
        transform: translateX(-50%);
    }
}

/* 5. Optional: Pause on Hover */
.marquee-window:hover .client-three-wrapper {
    animation-play-state: paused;
}

.circle p {
    color: #ffffff;
    z-index: 9999;
    display: block;
    position: relative;
    font-size: 14px;
}
.diagram-container p {
        color: #ffffff;
         font-size: 14px;
}

@media only screen and (max-width: 767px) {
    p {
        margin: 0 0 20px;
        font-size: 14px;
        line-height: 24px;
    }
}

@media (max-width: 576px) {

     .circle p {
    color: #ffffff;
    z-index: 9999;
    display: block;
    position: relative;
    font-size: 12px !important;
}
.diagram-container p {
        color: #ffffff;
         font-size: 12px !important;
}


    .single-team-area-one-start .inner-content {
    position: relative;
    left: 50%;
    background: #FFFFFF;
    box-shadow: 0px 4px 27px rgba(0, 0, 0, 0.07);
    border-radius: 10px;
    text-align: center;
    margin-top: -40px !important;
    transform: translateX(-50%);
    width: max-content;
}

    .banner-style-one.two {
    background-image: url(../images/banner/01.webp);
    height: auto !important;
    position: relative;
    z-index: 1;
    background-position: center;
    background-image: linear-gradient(to right, #f0f0f0 18%, rgb(255 255 255 / 58%) 75%), url(../images/banner/33.webp);
}

    .service-single-main-wrapper-five .rts-btn {
    max-width: max-content;
    position: relative !important;
    bottom: 0 !important;
}

.rts-client-area.ptb--30.bg_cts-10.bg_image .title-area-client-client::before {
    content: "";
    display: none !important;
    position: absolute;
    left: 67.7%;
    width: 100%;
    height: 1px;
    width: 32%;
    background: #ddd;
    display: flex;
    align-items: center;
    margin-top: 15px;
}

.rts-client-area.ptb--30.bg_cts-10.bg_image .title-area-client-client::after {
    content: "";
    display: none !important;
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    width: 32%;
    background:#ddd;
    display: flex;
    align-items: center;
    margin-top: -14px;
}

    
.orbit-wrapper {
    display: flex;
    justify-content: center;
}
.orbit-container {
    width: 395px;
    height: 395px;
}
.satellite {
    width: 88px;
    height: 88px;
    margin-top: -45px;
    margin-left: -45px;
    transform: rotate(var(--angle)) translate(clamp(176px, 35vw, 210px)) rotate(calc(-1 * var(--angle)));
}
.satellite {
    padding: 2px !important;
}
.center-circle {
    width: 240px;
    height: 240px;
}
}

@media (min-width: 576px) and (max-width: 991.98px) { 

     .circle p {
    color: #ffffff;
    z-index: 9999;
    display: block;
    position: relative;
    font-size: 12px !important;
}
.diagram-container p {
        color: #ffffff;
         font-size: 12px !important;
}

.contact-info-area-wrapper-p .single-contact-info .info-wrapper a {
    font-size: 18px !important;
    }

    .single-team-area-one-start .inner-content {
    position: relative;
    left: 50%;
    background: #FFFFFF;
    box-shadow: 0px 4px 27px rgba(0, 0, 0, 0.07);
    border-radius: 10px;
    text-align: center;
    margin-top: -40px !important;
    transform: translateX(-50%);
    width: max-content;
}
    .banner-style-one.two {
    background-image: url(../images/banner/01.webp);
    height: auto !important;
    position: relative;
    z-index: 1;
    background-position: center;
    background-image: linear-gradient(to right, #f0f0f0 18%, rgb(255 255 255 / 58%) 75%), url(../images/banner/33.webp);
}

    .service-single-main-wrapper-five .rts-btn {
    max-width: max-content;
    position: relative !important;
    bottom: 0 !important;
}

    .orbit-wrapper {
    display: flex;
    justify-content: center;
}
    .contact-info-area-wrapper-p.new{
        margin-bottom: 32px;
        padding: 44px 32px;
    }
}


@media (min-width: 992px) and (max-width: 1200px) {

   

    .orbit-wrapper {
    display: flex;
    justify-content: center;
}
.orbit-container {
    width: 395px;
    height: 395px;
}
.satellite {
    width: 110px;
    height: 110px;
    margin-top: -55px;
    margin-left: -55px;
    transform: rotate(var(--angle)) translate(clamp(88px, 50vw, 210px)) rotate(calc(-1 * var(--angle)));
}
.center-circle {
    width: 210px;
    height: 210px;
}
}








/* --- Container --- */
  .diagram-container {
    position: relative;
    /* Make the container responsive */
    width: 100%;
    /* max-width: 500px;      */
    aspect-ratio: 1 / 1;  /* Force a perfect square */
    margin: auto;
  }

  /* --- Circle Base Styles --- */
  .circle {
    position: absolute;
    /* Size is relative to the container now */
    width: 55%;
    height: 55%;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-weight: 600;
    
    /* Responsive Text Size using Clamp */
    /* Syntax: clamp(min-size, preferred-size, max-size) */
    font-size: clamp(0.8rem, 4vw, 1.2rem); 
    
    text-shadow: 0px 1px 3px rgba(0,0,0,0.3);
    opacity: 0.9;
    /* mix-blend-mode: multiply;  */
    transition: transform 0.3s ease;
  }

  /* .circle:hover {
    transform: scale(1.05);
    z-index: 10;
  } */

  /* --- Positioning (Same logic, strictly percentage-based) --- */

  /* Top */
  .circle.top {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background: radial-gradient(circle at 40% 40%, #00223d, #00223d);
    padding-bottom: 20%;
    font-size: 15px;
  }

  /* Right */
 .circle.right {
    top: 50%;
    right: 0%;
    transform: translateY(-50%);
    background: radial-gradient(circle at 40% 40%, #00223d, #00223d);
    padding-left: 20%;
    font-size: 15px;
  }

  /* Bottom */
.circle.bottom {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background: radial-gradient(circle at 40% 40%, #00223d, #00223d);
    padding-top: 20%;
    font-size: 15px;
  }

  /* Left */
.circle.left {
    top: 50%;
    left: 0%;
    transform: translateY(-50%);
    background: radial-gradient(circle at 40% 40%, #00223d, #00223d);
    padding-right: 20%;
    font-size: 15px;
  }

  /* --- Center Visuals --- */

  .center-dark-spot {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30%; /* Relative size */
    height: 30%;
    background: radial-gradient(circle, rgba(0,0,0,0.4), transparent 70%);
    z-index: 5;
    pointer-events: none;
  }

  .center-logo {
   position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 24%;
    height: auto;
    z-index: 20;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    padding: 12px;
  }

  .center-logo svg {
    width: 100%;
    height: auto;
    filter: drop-shadow(0px 0px 4px rgba(255,255,255,0.6));
    stroke: white;
    stroke-width: 2;
    fill: none;
  }

  /* --- Mobile Specific Adjustments --- */
  /* If the screen is very small (under 400px), we can tweak overlapping */
  @media (max-width: 400px) {
    .client-three-wrapper.lg-img .single {
    width: 160px !important;
    height: 98px;
}
    .circle {
      /* Slightly tighter overlap on tiny screens to fit text better */
      width: 58%;
      height: 58%;
    }
  }



  @media only screen and (max-width: 1199px) {
 
  .quick-link-inner.d-block .inner-content a>br {
    display: block !important;
  }
}