@font-face {

     font-family: 'AristaPro';

     src: url(./../../font/arista/Arista-Pro-Light-trial.woff) format('woff');

     font-weight: 300;

     font-style: normal;

 }



 @font-face {

     font-family: 'Altone';

     src: url(./../../font/altone/Altone\ Trial-Bold.woff) format('woff');

     /* font-weight: 300; */

     font-style: normal;

 }



 @font-face {

     font-family: 'AristaPro';

     src: url(./../../font/arista/Arista-Pro-Bold-trial.woff) format('woff');

     font-weight: 700;

     font-style: normal;

 }



 @font-face {

     font-family: 'AristaPro';

     src: url(./../../font/arista/Arista-Pro-Fat-trial.woff) format('woff');

     font-weight: 900;

     font-style: normal;

 }



 /* AltOne font-family with different weights */

 @font-face {

     font-family: 'AltOne';

     src: url(./../../font/altone/Altone\ Trial-Regular.woff) format('woff');

     font-weight: 400;

     font-style: normal;

 }



 @font-face {

     font-family: 'AltOne';

     src: url(./../../font/altone/Altone\ Trial-Bold.woff) format('woff');

     font-weight: 700;

     font-style: normal;

 }



 body {

     margin: 0;

     font-family: Arial, sans-serif;

     background: #f3fffd;

     overflow-x: hidden;

     font-family: 'AltOne';

 }



 p {

     font-family: Altone, sans-serif !important;

 }



 .banner {

     position: relative;

     width: 100%;

     height: 100vh;

     display: flex;

     justify-content: center;

     align-items: center;

     text-align: center;

     overflow: hidden;

 }



 .banner h1 {

     font-size: 2.5rem;

     width: 100%;

     z-index: 2;

     position: relative;

 }



 .banner h1 span.part2 {

     display: inline-flex;

     align-items: center;

     justify-content: center;

     gap: 8px;

 }



 /* floating images */

 .floating-img {

     width: 0;

     height: 0;

     position: absolute;

     object-fit: cover;

     border-radius: 4px;

     opacity: 0;

     transform: translate(-50%, -50%);

 }



 .img-small {

     width: 100px;

     height: 100px;

 }



 .img-medium {

     width: 150px;

     height: 150px;

 }



 .img-large {

     width: 200px;

     height: 200px;

 }



 .img1 {

     top: 20%;

     left: 5%;

 }



 .img2 {

     top: 20%;

     left: 40%;

 }



 .img3 {

     top: 15%;

     right: 5%;

 }



 .img4 {

     bottom: 15%;

     left: 10%;

 }



 .img5 {

     bottom: 20%;

     right: 15%;

 }



 .img6 {

     top: 30%;

     right: 30%;

 }



 .img7 {

     bottom: 10%;

     left: 40%;

 }
 .img8 {
    top: 43%;
    left: 26%;

 }
 .img9 {
    top: 43%;
    right: 0%;

 }
 .img10 {
bottom: 2%;
    right: 1%;

 }
 .img11 {
bottom: 2%;
    right: 33%;

 }
 .img12 {
bottom: 0%;
    left: 23%;

 }
 .img13 {
    top: 43%;
    left: 7%;

 }
 .img14 {
    top: 40%;
    right: 14%;

 }



 /* wrapper for fullscreen logos */

 .img {

     position: relative;

     display: inline-block;

     width: 0px;

     height: 0px;

     overflow: hidden;

 }



 .fullscreen-img {

     /* position: absolute;

      top: 50%;

      left: 50%;

      transform: translate(-50%, -50%); */

     width: 100%;

     height: 100%;

     /* border-radius: 12px;

      opacity: 0;

      z-index: 10; */

     position: absolute;

     top: 0;

     left: 0;

     width: 100%;

     height: 100%;

 }



 .sdfsad {

     /* mask-image: url(https://cdn.telescope.fyi/landing/curators/desktop/zarah-mask.png); */

     backface-visibility: hidden;

     -webkit-backface-visibility: hidden;

     image-rendering: auto;

     -webkit-mask-position: center;

     mask-position: center;

     -webkit-mask-position: 50% 30%;

     mask-position: 50% 30%;

     -webkit-mask-repeat: no-repeat;

     mask-repeat: no-repeat;

     -webkit-mask-size: cover;

     mask-size: cover;

     transform-style: preserve-3d;

     -webkit-transform-style: preserve-3d;

     will-change: transform;

     object-fit: cover;

 }



 .fullscreen-img7 {

     scale: 1.1;

 }



 .fullscreen-img6 {

     scale: 1.1;

 }



 .fullscreen-img5 {

     scale: 1.2;

 }



 .fullscreen-img4 {

     scale: 1.3;

 }



 .fullscreen-img3 {

     scale: 1.4;

 }



 .fullscreen-img2 {

     scale: 1.5;

 }



 .fullscreen-img1 {

     object-fit: cover;

     object-position: center center;

 }



 .sec2 {

     background: red;

     height: 100vh;

 }



 .bgsec {

     position: absolute;

     top: 0;

     left: 0;

     width: 100%;

     height: 100%;

     z-index: 11;

 }



 .sec2 {

     background: red;

     height: 100vh;

 }



 .spectacledcoder-carousel-1 {

     width: 100%;

     /* height: 100vh; */

     display: flex;

     flex-direction: column;

     overflow-y: scroll;

     scroll-behavior: smooth;

     padding: 20px 0;

 }



 .spectacledcoder-carousel-1::-webkit-scrollbar {

     width: 6px;

 }



 .spectacledcoder-carousel-1::-webkit-scrollbar-track {

     background: transparent;

 }



 .spectacledcoder-carousel-1::-webkit-scrollbar-thumb {

     background: #444;

 }



 .spectacledcoder-carousel-1::-webkit-scrollbar-thumb:hover {

     background: #000;

 }



 /* Outer cards (vertical) */

 .carousel-1 {

     margin: auto;

     width: 100%;

     display: flex;

     flex-direction: column;

     gap: 40px;

     align-items: center;

     overflow-x: hidden;

 }



 .card {

     width: 500px;

     height: 300px;

     /* background: #222; */

     /* color: #fff; */

     transition: all 0.4s ease;

     cursor: pointer;

     overflow: hidden;

     border: none;

     /* padding: 20px; */

     margin: auto;

     background: #f3fffd;

 }



 .card:hover {

     transform: scale(1.02);

 }



 .card.active {

     transform: scale(1.05);

     width: 100%;

     height: 490px;

 }



 .card.oldactive {

     /* transform: scale(1); */

     /* width: 100%; */

     /* height: 378px; */

     /* padding: 0 4rem; */

 }



 .card.active .carousel-viewport .carousel .inner-card:first-child {



     padding-left: 6rem;

 }



 .card.oldactive .carousel-viewport .carousel {

     transform: translateX(0) !important;

 }



 .card.active .carousel {

     height: 100%;

 }



 /* Inner horizontal carousel */

 .carousel-viewport {

     overflow: hidden;

     position: relative;

     width: 100%;

     height: 100%;

 }



 .carousel {

     display: flex;

     gap: 20px;

     transform: translateX(0px);

     transition: transform 360ms cubic-bezier(.22, .9, .32, 1);

     user-select: none;

     cursor: grab;

     height: 100%;

 }



 .inner-card {

     /* min-width: 480px; */

     height: 100%;

     width: 100%;

     border-radius: 12px;

     /* background: linear-gradient(180deg, #2a2a2a, #1d1d1d); */

     padding: 10px;

     flex-shrink: 0;

     transition: transform 240ms ease;

     display: flex;

     flex-direction: column;

     justify-content: space-between;

 }



 .hied {

     display: none;

 }



 .card.active .hied {

     display: block;

 }



 .img2 {

     width: 100px;

     height: 100px;

     object-fit: cover;

     /* border-radius: 20px; */

     /* background-color: #b2c8ff; */

     transition: all 0.5s ease;

     /* margin-bottom: 20px; */

 }



 .inner-card:active {

     cursor: grabbing;

 }



 .img {

     width: 100%;

     height: 20px;

     /* background: #b2c8ff; */

     border-radius: 8px;

 }



 .title {

     font-size: 18px;

     margin: 8px 0;

     color: #fff;

 }



 .desc {

     font-size: 13px;

     color: #aaa;

 }



 .inner-gallery {

     display: flex;

     gap: 12px;

     margin-top: 12px;

     height: 120px;

     max-height: 0;

     opacity: 0;

     overflow: hidden;

     pointer-events: none;

     transition: opacity 280ms ease, max-height 280ms ease;

 }



 .inner-card.active .inner-gallery {

     max-height: 120px;

     opacity: 1;

     pointer-events: auto;

 }



 .pane {

     min-width: 100px;

     height: 100%;

     background: #a8c5ff;

     border-radius: 8px;

     flex-shrink: 0;

 }



 .intro h3 {

     font-size: 14px;

     /* text-align: center; */

     margin: 10px auto;

     transition: all 0.5s linear;

     font-weight: 700;

 }



 .card.active .img2 {

     height: 165px;



     width: 165px;

 }



 .card.oldactive .img2 {

     /* height: 135px;



     width: 135px; */

 }











 .card.active .intro h3 {

     font-size: 21px;

     /* text-align: center; */

     margin: 10px auto;

 }



 .card.oldactive .intro h3 {

     /* font-size: 18px; */

     /* text-align: center; */

     /* margin: 10px auto; */

 }











 .card.active .intro p {

     font-size: 17px;

     /* text-align: center; */

     margin: 10px auto;

 }



 .card.oldactive .intro p {

     /* font-size: 14px; */

     /* text-align: center; */

     /* margin: 10px auto; */

 }



 .intro p {

     font-size: 12px;

     /* text-align: center; */

     /* color: #aaa; */

     transition: all 0.5s;

     font-weight: 200;



 }



 .card-img {

     margin: auto;

     width: 100%;

     height: 100%;

     /* height: auto; */

     /* display: flex; */

     /* flex-direction: column; */

 }



 .img2 {

     height: 70px;

     width: 70px;

     object-fit: cover;

     /* border-radius: 20px; */

     /* background-color: #b2c8ff; */

     transition: all 0.5s ease;

     margin-bottom: 15px;

 }



 .intro h3 {

     margin-bottom: 7px;

     font-size: 16px;

 }



 .intro p {

     font-size: 13px;

     color: #202020;

 }



 .imh1 {

     width: 100%;

     height: 100%;

     object-fit: cover;

     /* border-radius: 20px; */

     /* background-color: #b2c8ff; */

     transition: all 0.5s ease;

 }



 .card.active .inner-card {

     min-width: 603px;

     height: 100%;

     width: 100%;

     margin-left: 60px;



 }



 .carousel .inner-card:first-child {

     /* width: 90%; */

     margin-left: 0;

 }



 .carousel .inner-card:last-child {

     margin-left: 0px !important;

     margin-right: 60px !important;

 }



 /* .carousel .inner-card:second-child{

            margin-left: 60px;

        } */



 .card.active .inner-card .row {

     height: 100%;

 }



 .controls:hover {

     cursor: none;

 }



 .controls {

     overflow: hidden;

 }



 .controls .btn {

     display: none;

 }



 .controls:hover .btn {

     display: block;

 }



 .controls .btn i {

     font-size: 30px;

     height: 50px;

     width: 50px;

     background: #fff;

     color: #1B776F;

     text-align: center;

     display: flex;

     align-self: center;

     align-items: center;

     justify-content: center;

     border-radius: 8px;



 }





 .controls.left {

     position: absolute;

     top: 50%;

     left: 0px;

     transform: translateY(-50%);

     z-index: 11;

     height: 100%;

     width: 32%;

     /* background: red; */

 }



 .controls.right {

     position: absolute;

     top: 50%;

     right: 0px;

     transform: translateY(-50%);

     z-index: 11;

     height: 100%;

     width: 32%;

     /* background: red; */

 }



 .wrap {

     position: relative;

     overflow-x: hidden;

 }



 .controls.left,

 .controls.right {

     opacity: 0;

     pointer-events: none;

     transition: opacity 0.3s ease;

 }



 .controls.left.show,

 .controls.right.show {

     opacity: 1;

     pointer-events: auto;

 }



 .imh1 img {

     width: 100%;

     height: auto;

     object-fit: contain;

 }



 .img2 img {

     width: 100%;

     height: 100%;

     object-fit: contain;

 }



 .inner-card .row>div,

 .inner-card .row {

     height: 100%;

 }



 .oldactive .carousel-viewport .carousel .inner-card {

     /* height: 100%; */

 }



 .card {

     transition: all 0.3s linear;

 }



 .card.scroll {

     transform: scaleX(0.9);

 }



 .bgsec img {

     object-fit: cover;

     width: 100px;

     height: 100px;
     border-radius: 50%;
    box-shadow: 0px 0px 12px #00000052;



 }



 .card.oldactive .hied {

     /* display: block !important; */

 }



 .card.scroll.active {

     transform: scaleX(1) !important;

 }



 /* Overlay */

 .overlay {

     display: block;

     /* shown by GSAP */

     position: fixed;

     inset: 0;

     z-index: 111;

 }



 .stairs-wrap {

     height: 100%;

     width: 100%;

     display: flex;

 }



 .stair {

     height: 100%;

     width: 20%;

     background: #000;

 }



 .stairs-wrap .stair {

     color: #fff;

     text-align: center;

     display: flex;

     align-content: center;

     align-items: center;

     font-size: 50px;

     justify-content: center;

     transform: translate(0px, 0%);

 }



 .header {

     position: fixed;

     top: 0;

     left: 0;

     z-index: 11;

     padding: 15px 0;

     width: 100%;

 }

   .controls{

        display: block !important;

    }

   



 @media (max-width: 430px) {

     .card {

         width: 100%;

         height: auto;

     }



 }



 /* *************************************************************************** */

 @media (max-width: 786px) {

     .stairs-wrap .stair {

         font-size: 30px;

     }
     .card .carousel-viewport .mob{
        display: block !important;
               
     }
     .card.active .carousel-viewport .mob{
 padding-left: 65px;
     }
     .card{
        height: auto;
        overflow: hidden !important;
     }
         .card .carousel-viewport .carousel .inner-card .row .col-lg-4 {
        display: none;
    }
    .card.active{
        height: auto;
        overflow: hidden !important;
            transform: scale(1);
    }
    .controls.left, .controls.right{
        display: none !important    ;
    }
    .img8 {
    top: 36%;
    left: 26%;
}
.img14 {
    top: 31%;
    right: 9%;
}
.img2 {
    top: 10%;
    left: 40%;
}
.img8 {
    top: 27%;
    left: 31%;
}
.img13 {
    top: 37%;
    left: 7%;
}
.img4 {
    bottom: 23%;
    left: 10%;
}
.img7 {
    bottom: 20%;
    left: 40%;
}
.spectacledcoder-carousel-1 > div{
        overflow-y: hidden;
    }


 }



 @media (max-width: 430px) {

     .stairs-wrap .stair {

         font-size: 20px;

     }

     .card .carousel-viewport .mob{

        display: block !important;

    }



     .extra {

         display: none !important;

     }

    .bgsec .floating-img{

        height: 80px;
        width: 80px;

        object-fit: contain;

    }

    .banner h1{

        font-size: 30px;

    }

    .bgsec .img1{

        left: 15%;

        top: 16%;

    }

    .bgsec .img2{

           right: 12%;
        left: auto;
        top: 29%;
    }




    .bgsec .img3{

        right: 5%;

        left: auto;

        top: 15%;

    }

    .bgsec .img4{

         right: auto;
        left: 20%;
        top: 62%;


    }

    .bgsec .img5{
        right: 0%;
        left: auto;
        top: 60%;


    }
        .bgsec .img6{

      left: 43%;
        /* left: auto; */
        top: 23%;
    }

   
    
    
    .bgsec .img7{
            bottom: 22%;
    left: 52%;
    }

    .bgsec .img8{
        top: 38%;
        left: 39%;
    }
    .bgsec .img9{
            top: 39%;
    right: -5%;
    }
    .bgsec .img10{
        bottom: 14%;
        right: 1%;
        }

    .bgsec .img12{
            bottom: 12%;
    left: 20%;
    }
    .bgsec .img13{
          top: 32%;
        left: 11%;
    }
    .bgsec .img14{
            bottom: 0%;
        top: auto;
        right: 0%;

    }

    

    .card.active{

        height: auto;

    }

    .card.active .inner-card{

        min-width: auto;

    }

    .card.active .carousel-viewport .carousel .inner-card:first-child{

        padding-left: 10px;

        width: 100%;

    }

    .card.active .inner-card {

        width: 200%;

        height: 100%;

    }

    .card.active .inner-card .row{

        display: flex;

        flex-direction: row;

    }

    .card.active .inner-card .row .col-lg-6{

        width: 50%;

    }

    .card.active .img2{

        height: 100px;

        width: 100px;

    }

    .card.active .inner-card .row .col-lg-8 .card-img{

        height: 300px;

    }

    .controls{

        display: none !important;

    }

    .card{

         padding: 20px;

    }

    .card .inner-card{

        display: none ;

        /* padding: 20px; */

    }

    .card .carousel-viewport .carousel .inner-card:first-child{

        display: block;

    }

    .card.active .inner-card{

        display: block ;

    }

    .card .carousel-viewport .carousel .inner-card .row .col-lg-4{

        display: none;

    }

    .card.active .intro p{

            font-size: 15px;

    }

    .card .carousel-viewport .carousel .inner-card{

        height: 100%;

    }

    .card-img .imh1{

        height: 400px;

        width: 100%;

    }

    .card.active .inner-card{

        margin-left: 0;

    }

    .spectacledcoder-carousel-1 > div{

        width: 100% !important;

    }



 }

 *{

    /* border: 1px solid red; */

 }

 .card .carousel-viewport .mob{

    display: none;

 }

/* .card-img .imh1 img.small{}
.card-img .imh1 img.large{
    display: none;
} */
.card .card-img .imh1 img.large {
  display: none; /* Hide large image by default */
}

.card.active  .card-img .imh1 img.small {
  display: none; /* Hide small when active */
}

.card.active  .card-img .imh1 img.large {
  display: block; /* Show large when active */
}