@import url('../fonts/stylesheet.css');

@import url('../fonts/stylesheet.css');
/* authur name : Rohit kumar  */
/* Designer name : Rohit kumar  */

/* ============================= */
/*      Global Styles            */
/* ============================= */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

* {
    /* font-family: 'ABC Diatype Med' !important; */
      font-family: "Inter", sans-serif!important;

    font-weight: 500;
}

html {
    scroll-behavior: smooth;
}
/* all css  */

      
        .section-divider {
            height: 1px;
            background: linear-gradient(to right, transparent, #000, transparent);
        }
        .flow-step {
            position: relative;
            transition: all 0.3s ease;
        }
        .flow-step:hover {
            background-color: #f0f0f0;
        }
        .image-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
            color: white;
            padding: 20px;
        }
        .badge {
            display: inline-block;
            padding: 4px 12px;
            background: #000;
            color: white;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
        }
        .bgcolorgradient {
            background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
        }
        
        /* Responsive Typography */
        .h1-text {
            font-size: clamp(40px, 8vw, 160px);
            line-height: 1;
        }
        
        .h2-text {
            font-size: clamp(24px, 4vw, 36px);
            line-height: 1.2;
        }
        
        .h3-text {
            font-size: clamp(18px, 3vw, 22px);
            line-height: 1.3;
        }
        
        .body-text {
            font-size: clamp(14px, 1.5vw, 16px);
            line-height: 1.6;
        }
        
        .small-text {
            font-size: clamp(12px, 1.2vw, 14px);
            line-height: 1.5;
        }
        
        .xs-text {
            font-size: clamp(11px, 1vw, 12px);
            line-height: 1.4;
        }
        
        /* Card text sizes */
        .card-title {
            font-size: clamp(14px, 1.5vw, 16px);
            line-height: 1.4;
        }
        
        .card-body {
            font-size: clamp(12px, 1.2vw, 14px);
            line-height: 1.5;
        }
        
        .card-small {
            font-size: clamp(11px, 1vw, 12px);
            line-height: 1.4;
        }
        
        /* Button text */
        .btn-text {
            font-size: clamp(13px, 1.3vw, 14px);
        }
        
        /* Special cases */
        .feature-title {
            font-size: clamp(14px, 1.4vw, 16px);
        }
        
        .spec-text {
            font-size: clamp(11px, 1.1vw, 12px);
        }
        
        /* Mobile specific */
        @media (max-width: 640px) {
            .mobile-text-sm {
                font-size: 14px;
                line-height: 1.5;
            }
            
            .mobile-text-xs {
                font-size: 12px;
                line-height: 1.4;
            }
        }
        
        /* Desktop specific */
        @media (min-width: 1024px) {
            .desktop-text-lg {
                font-size: 16px;
                line-height: 1.6;
            }
            
            .desktop-text-base {
                font-size: 14px;
                line-height: 1.5;
            }
        }
/* all css  */
/* ============================= */
/*      CSS Variables             */
/* ============================= */
:root {
    --size: 140px;
    --stroke: 0.8rem;
    --speed: 8s;
    --text-color: #fff;
    --bg: #0f172a;
}
html{
    text-transform: lowercase!important;
}
.auto-random-icon {
  transition: opacity 0.6s ease, transform 0.6s ease;
  /* filter: grayscale(1) invert(1); */
}
/* .imagegray{
    filter: drop-shadow(8px 0 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 -3px 0 #fff) drop-shadow(0 -1px 0 #fff);
} */
 /* .imagegray {
     will-change: filter, transform;
     backface-visibility: hidden;
     filter:drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 -3px 0 #fff) drop-shadow(0 -1px 0 #fff);
     animation: shadowMove 6s linear infinite;
 }

 @keyframes shadowMove {
     100% {
         filter: drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 -3px 0 #fff) drop-shadow(0 -1px 0 #fff);
     }

     50% {
         filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.9));
     }

     100% {
         filter: drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 -3px 0 #fff) drop-shadow(0 -1px 0 #fff);
     }
 } */
.borderoutline{
    /* outline: 1px solid #fff;
        outline-offset: -12px;
        border-radius: 40px; */
}
.height_100vh{
    height: 100vh;
}
/* .bgimage:before{
    position: absolute;
        left: 0px;
        top: 0px;
        content: '';
        width: 100%;
        height: 100%;
        background: linear-gradient(88deg, #ffffff, transparent);
} */
.section-wrapper {
      position: relative;
    width: 100%;
}
.bgimage {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 7px;

    background-image: var(--about-bg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

/* slider css  */
    
        .svg-container {
            width: 100%;
            border-radius: 20px;
            position: relative;
            overflow: hidden;
        }
        /* SVG Styles */
        svg {
            display: block;
            margin: 0 auto;
            width: 100%;
            height: auto;
        }
        /* Static white lines */
        .animated-line {
            stroke: #a1a1a1;
            stroke-width: 2;
        }
        /* Overlay animated red lines - CONTINUOUS ANIMATION */
        .animated-line.hello-long1 {
            stroke: #000;
            stroke-width: 4;
            stroke-linecap: round;
            stroke-dasharray: 40 1686;
            stroke-dashoffset: 0;
            animation: move-long1 5s linear infinite;
            opacity: 0.7;
        }
        .animated-line.hello-long2 {
            stroke: #000;
            stroke-width: 4;
            stroke-linecap: round;
            stroke-dasharray: 40 1090;
            stroke-dashoffset: 0;
            animation: move-long2 5s linear infinite;
            opacity: 0.7;
        }
        .animated-line.hello-long3 {
            stroke: #000;
            stroke-width: 4;
            stroke-linecap: round;
            stroke-dasharray: 40 1021;
            stroke-dashoffset: 0;
            animation: move-long3 5s linear infinite;
            opacity: 0.7;
        }
        .animated-line.hello-long4 {
            stroke: #000;
            stroke-width: 4;
            stroke-linecap: round;
            stroke-dasharray: 40 1845;
            stroke-dashoffset: 0;
            animation: move-long4 5s linear infinite;
            opacity: 0.7;
        }
        /* Continuous Animation keyframes */
        @keyframes move-long1 {
            0% {
                stroke-dashoffset: 0;
            }
            100% {
                stroke-dashoffset: -1726;
            }
        }
        @keyframes move-long2 {
            0% {
                stroke-dashoffset: 0;
            }
            100% {
                stroke-dashoffset: -1130;
            }
        }
        @keyframes move-long3 {
            0% {
                stroke-dashoffset: 0;
            }
            100% {
                stroke-dashoffset: -1061;
            }
        }
        @keyframes move-long4 {
            0% {
                stroke-dashoffset: 0;
            }
            100% {
                stroke-dashoffset: -1885;
            }
        }
        /* Images common styles - no animation initially */
        .imageone {
            transform-origin: center;
            opacity: 1;
        }
        /* Bounce animation class - added via JS when triggered */
        .bouncing {
            animation: bounce 0.9s ease-in-out infinite;
        }
        /* Bounce animation */
        @keyframes bounce {
            0%, 100% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-10px);
            }
        }
        /* Pulsing animation for nodes */
    
    
        /* Responsive design */
        @media (max-width: 768px) {
         
            .svg-container {
                padding: 0px;
            }
        }
/* slider css  */
.text-gammaGrey {
    color: rgb(79 71 73/ 1);
}
.text-gammaGrey\/60 {
    color: rgba(79,71,73,.6);
}
.logo-web a svg{
    width: 100%;
    height: 100%;
}
.text-neoGrey {
    --tw-text-opacity: 1!important;
    color: rgb(65 62 62/var(--tw-text-opacity))!important;
}
.bg-gammaGrey\/5 {
    background-color: rgba(79,71,73,.05);
}
.border-gammaGrey\/60 {
    border-color: rgba(79,71,73,.6);
}
.border-b-gammaGrey\/60 {
    border-bottom-color: rgba(79,71,73,.6);
}
.bgcolorgradient{
        background: linear-gradient(360deg, black, transparent);
    }
    .imageallbg{
        background-size:cover!important ;
    }
/* ============================= */
/*      Rotating Circular Text    */
/* ============================= */
.wrap {
    width: var(--size);
    height: var(--size);
    position: relative;
}
.breadcrumb_heading{

}

svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Animate the entire text along the path */
.rotator {
    transform-origin: 50% 50%;
    animation: spin var(--speed) linear infinite;
}

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

/* Text styling */
text {
    fill: var(--text-color);
    font-size: 22px;
    letter-spacing: 2px;
    text-transform: lowercase;
    font-weight: 700;
}

/* Optional center label */
.center {
    position: absolute;
    inset: 0;
    color: #9fb3ff;
    font-weight: 700;

    font-size: 20px;
    pointer-events: none;
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.center img{
filter: grayscale(1) invert(1);
    }
/* ============================= */
/*      Circle Wrap (Optional)    */
/* ============================= */
.circlewrap {
    background: #89898961;
    top: 8%;
    position: absolute;
    right: 0%;
    border-radius: 50%;
    backdrop-filter: blur(18px);
}
.bg_custunm_enw {
    background: url('../image/footer-bg-shape1.png');
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: 0.05;
    left: 0px;
    z-index: 0;
    background-repeat: no-repeat;
    background-size: cover;
}
/* ============================= */
/*      Typography Utilities      */
/* ============================= */
.font-12 {
    font-size: 15px;
}

.text-cusutm-600 {
    color: #413e3e99;
}

.font-Korataki {
    font-family: 'Korataki' !important;
}

.home_section_design {
    background: #f1f1ef;
}

.text-custum {
    background: #413e3e99;
}

/* ============================= */
/*      Swiper Custom Styles      */
/* ============================= */

/* Remove default Swiper arrows */
.swiper-button-next:after,
.swiper-button-prev:after {
    display: none !important;
}

.swiper-button-next,
.swiper-button-prev {
    display: none !important;
}

/* Custom arrows container */
.custom-swiper-arrows {
    position: absolute;
    top: 50%;
    right: 10px; /* Right side of slider */
    transform: translateY(-50%);
    z-index: 20;
}

/* Buttons */
.swiper-button-prev-custom,
.swiper-button-next-custom {
    cursor: pointer;
}

/* Disabled state for left arrow */
.swiper-button-prev-custom.swiper-button-disabled {
    opacity: 0.4;
    cursor: default;
}

/* Disabled state for right arrow */
.swiper-button-next-custom.swiper-button-disabled {
    opacity: 0.4;
    cursor: default;
}

/* ============================= */
/*      Marquee Animation         */
/* ============================= */
.animate-marquee {
    animation: marquee 55s linear infinite !important;
}

@keyframes marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}


/* animation 2d  */
/* ===== FLOATING EFFECT FOR SQUARES ===== */
svg {
            display: block;
            margin: 0 auto;
        }

        /* Static white lines - no dotted animation */
        .animated-line {
            stroke: #a1a1a1;
            stroke-width: 2;
            /* No dasharray or flow animation */
        }

        /* Drawing animation for short segments */
        .animated-line.hello {
            stroke: #000;
            stroke-width: 8;
            stroke-linecap: round;
            stroke-dasharray: 40;
            stroke-dashoffset: 40;
            animation: draw 2s ease-in-out infinite;
        }

        @keyframes draw {
            0% {
                stroke-dashoffset: 40;
            }
            100% {
                stroke-dashoffset: 0;
            }
        }

        /* Moving short animation for long path 1 */
        .animated-line.hello-long1 {
            stroke: #000;
            stroke-width: 4;
            stroke-linecap: round;
            stroke-dasharray: 40 1686;
            stroke-dashoffset: 0;
            animation: move-long1 5s linear infinite;
        }

        @keyframes move-long1 {
            0% {
                stroke-dashoffset: 0;
            }
            100% {
                stroke-dashoffset: -1726;
            }
        }

        /* Moving short animation for long path 2 */
        .animated-line.hello-long2 {
            stroke: #000;
            stroke-width: 4;
            stroke-linecap: round;
            stroke-dasharray: 40 1090;
            stroke-dashoffset: 0;
            animation: move-long2 5s linear infinite;
        }

        @keyframes move-long2 {
            0% {
                stroke-dashoffset: 0;
            }
            100% {
                stroke-dashoffset: -1130;
            }
        }

        /* Moving short animation for long path 3 */
        .animated-line.hello-long3 {
            stroke: #000;
            stroke-width: 4;
            stroke-linecap: round;
            stroke-dasharray: 40 1021;
            stroke-dashoffset: 0;
            animation: move-long3 5s linear infinite;
        }

        @keyframes move-long3 {
            0% {
                stroke-dashoffset: 0;
            }
            100% {
                stroke-dashoffset: -1061;
            }
        }

        /* Moving short animation for long path 4 */
        .animated-line.hello-long4 {
            stroke: #000;
            stroke-width: 4;
            stroke-linecap: round;
            stroke-dasharray: 40 1845;
            stroke-dashoffset: 0;
            animation: move-long4 5s linear infinite;
        }

        @keyframes move-long4 {
            0% {
                stroke-dashoffset: 0;
            }
            100% {
                stroke-dashoffset: -1885;
            }
        }

        /* Pulsing animation for nodes
        .pulse {
            animation: pulse 2s ease-in-out infinite alternate;
        } */

        /* @keyframes pulse {
            from {
                opacity: 0.7;
                transform: scale(1);
            }
            to {
                opacity: 1;
                transform: scale(1.02);
            }
        } */


/* animation 2d  */
/* ===== FLOATING EFFECT FOR SQUARES ===== */
svg {
            display: block;
            margin: 0 auto;
        }

        /* Static white lines - no dotted animation */
        .animated-line {
            stroke: #a1a1a1;
            stroke-width: 2;
            /* No dasharray or flow animation */
        }

        /* Drawing animation for short segments */
        .animated-line.hello {
            stroke: #000;
            stroke-width: 8;
            stroke-linecap: round;
            stroke-dasharray: 40;
            stroke-dashoffset: 40;
            animation: draw 2s ease-in-out infinite;
        }

        @keyframes draw {
            0% {
                stroke-dashoffset: 40;
            }
            100% {
                stroke-dashoffset: 0;
            }
        }

        /* Moving short animation for long path 1 */
        .animated-line.hello-long1 {
            stroke: #000;
            stroke-width: 4;
            stroke-linecap: round;
            stroke-dasharray: 40 1686;
            stroke-dashoffset: 0;
            animation: move-long1 5s linear infinite;
        }

        @keyframes move-long1 {
            0% {
                stroke-dashoffset: 0;
            }
            100% {
                stroke-dashoffset: -1726;
            }
        }

        /* Moving short animation for long path 2 */
        .animated-line.hello-long2 {
            stroke: #000;
            stroke-width: 4;
            stroke-linecap: round;
            stroke-dasharray: 40 1090;
            stroke-dashoffset: 0;
            animation: move-long2 5s linear infinite;
        }

        @keyframes move-long2 {
            0% {
                stroke-dashoffset: 0;
            }
            100% {
                stroke-dashoffset: -1130;
            }
        }

        /* Moving short animation for long path 3 */
        .animated-line.hello-long3 {
            stroke: #000;
            stroke-width: 4;
            stroke-linecap: round;
            stroke-dasharray: 40 1021;
            stroke-dashoffset: 0;
            animation: move-long3 5s linear infinite;
        }

        @keyframes move-long3 {
            0% {
                stroke-dashoffset: 0;
            }
            100% {
                stroke-dashoffset: -1061;
            }
        }

        /* Moving short animation for long path 4 */
        .animated-line.hello-long4 {
            stroke: #000;
            stroke-width: 4;
            stroke-linecap: round;
            stroke-dasharray: 40 1845;
            stroke-dashoffset: 0;
            animation: move-long4 5s linear infinite;
        }

        @keyframes move-long4 {
            0% {
                stroke-dashoffset: 0;
            }
            100% {
                stroke-dashoffset: -1885;
            }
        }

        /* Pulsing animation for nodes
        .pulse {
            animation: pulse 2s ease-in-out infinite alternate;
        } */

        /* @keyframes pulse {
            from {
                opacity: 0.7;
                transform: scale(1);
            }
            to {
                opacity: 1;
                transform: scale(1.02);
            }
        } */



        /* media query  */

.border-bottom-1 {
    border-bottom: 3px solid #00000090;
}
.bgseemore{
    background: linear-gradient(rgb(0 0 0 / 50%), rgb(0 0 0 / 55%)), url(../image/seemore.png);
    background-size: cover;
    color: #ffffff;
}
.aimore{
    background: linear-gradient(rgb(0 0 0 / 50%), rgb(0 0 0 / 55%)), url(../image/seemore.png);
    background-size: cover;
    color: #ffffff;
}
.shadow-title {
         font-size: 80px;
    font-weight: 700;
    line-height: 1;
    color: #dbdbdbba;
    opacity: 0.25;
    margin: -0.42em 0 -0.6em;
    position: absolute;
    left: 0px;
    z-index: -1;
    top: 10px;
    text-transform: ;
}
.shadow-titleus{
           font-size: 80px;
    font-weight: 700;
    line-height: 1;
    color: #cececeba;
    opacity: 0.25;
    margin: -0.42em 0 -0.6em;
    position: absolute;
    left: 0px;
    z-index: -1;
    top: 10px;
    text-transform: ; 
}
/* Last child ka border remove kare */

        /* media query  */
@media (max-width: 639px) {

    :root {
        --size: 120px; /* smaller circle */
        --stroke: 0.5rem;
    }
    .wrap {
    width: var(--size);
    height: var(--size);
}
    text {

        font-size: 26px;
        letter-spacing: 1px;
    }
    .center {
               font-size: 14px;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        padding: 6px;
    }

}

/* Small devices (sm: 640px - 767px) */
@media (min-width: 640px) and (max-width: 767px) {
    :root {
        --size: 150px;
        --stroke: 0.6rem;
    }
    .wrap {
    width: var(--size);
    height: var(--size);
}
    text {
        font-size: 24px;
        letter-spacing: 1.5px;
    }
    .center {
        font-size: 16px;
        width: 50px;
        height: 50px;
    }
 
}

/* Medium devices (md: 768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    :root {
        --size: 180px;
        --stroke: 0.7rem;
    }
    .wrap {
    width: var(--size);
    height: var(--size);
    
}
    text {
        font-size: 24px;
        letter-spacing: 1.8px;
    }
    .center {
         font-size: 24px;
    width: 70px;
    height: 70px;
    padding: 15px;
    border-radius: 50%;
    }
    .circlewrap {
            right: 0%;
        transform:none;
    }
}

/* Large devices (lg: 992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
    :root {
        --size: 140px;
        --stroke: 0.8rem;
    }
    .wrap {
    width: var(--size);
    height: var(--size);
}
    text {
        font-size: 23px;
        letter-spacing: 2px;
    }
    .center {
  font-size: 24px;
    width: 70px;
    height: 70px;
    padding: 15px;
    border-radius: 50%;
    }
}

/* Extra large devices (xl: 1200px - 1599px) */
@media (min-width: 1200px) and (max-width: 1599px) {
    :root {
        --size: 220px;
        --stroke: 0.9rem;
    }
    .wrap {
    width: var(--size);
    height: var(--size);
}
    text {
        font-size: 22px;
        letter-spacing: 2.2px;
    }
    .center {
       width: 130px;
        height: 130px;
        padding: 15px;
        border-radius: 50%;
    }
}

/* 2XL devices (xxl: 1600px and above) */
@media (min-width: 1600px) {
   
    :root {
        --size: 250px;
        --stroke: 1rem;
    }
    .wrap {
    width: var(--size);
    height: var(--size);
}
    
    text {
        font-size: 24px;
        letter-spacing: 2.5px;
    }
.center {
    font-size: 24px;
    width: 145px;
    height: 145px;
    padding: 15px;
    border-radius: 50%;
}
}

@media(max-width:1200px){
    .bgimage {
    background-size: contain;
}

}
@media(max-width:1024px){
    .bgimage {
    background-size: contain;
}

}