@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;

}

.image_arrow_new{

    width: 100%;

    height: 100%;



    img{

        width: 100%;


        height: 100%;

        object-fit: contain;

    }

}

.custom-text {

  font-size: 12px;

  line-height: 19.2px;

  color: rgba(255, 255, 255, 0.7);

  max-width: 320px;

  overflow: hidden;

  text-overflow: ellipsis;

  display: -webkit-box;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

}

.custom-text p{

  font-size: 12px;

  line-height: 19.2px;

  color: rgba(255, 255, 255, 0.7);

  max-width: 320px;

  overflow: hidden;



  display: -webkit-box;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

}



/* 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);*/
        background: #89898961;
    top: 50%;
    position: absolute;
    left: 50%;
    border-radius: 50%;
    backdrop-filter: blur(18px);
    transform: translate(-50%, 0%);

}

.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 150s 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: 180px;

        --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;

}



}