:root {
    --bg-deep:#0f1117;
    --bg-mid:#171b26;
    --bg-card:#1e2333;
    --border:rgba(255,255,255,0.07);
    --text-dim:rgba(255,255,255,0.45);
    --accent:#3b8ef3;
    --accent2:#00d4ff;
}

body{
    font-family:"Inter",serif;
    font-size:16px;
    font-weight:400;
    color:#454545;
    line-height:1.4;
    overflow-x:hidden;
}

h1,h2,h3,h4,h5,h6{
    font-family:"Lora",serif;
}

/* PROCESS SLIDER */
.process-slider-wrapper h3,
.who-we-are h3{
    font-family:"Inter",serif;
}

/* VISIT US */
@keyframes float{
    0%,100%{transform:translateY(0px);}
    50%{transform:translateY(-75px);}
}

.animate-float{
    animation:float 5s ease-in-out infinite;
}

.delay-2000{
    animation-delay:2s;
}

.card-visit{
    border-radius:30px 100px 30px 30px;
}

.blob{
    position:absolute;
    border-radius:50%;
    filter:blur(80px);
    animation:float 6s ease-in-out infinite;
}

.blob-1{
    width:300px;
    height:300px;
    background:rgba(45,212,191,0.2);
    top:10%;
    left:5%;
}

.blob-2{
    width:250px;
    height:250px;
    background:rgba(251,146,60,0.2);
    bottom:10%;
    right:5%;
    animation-delay:2s;
}

.magnetic-btn{
    transition:transform 0.2s ease;
}

/* FAQ */
.heading-faq h2{
    background:url('assets/shape-brush.svg') left bottom no-repeat;
}

.bg-overlay{
    background:linear-gradient(to right,rgba(0,0,0,0.8),rgba(0,0,0,0.6));
}

@keyframes bgZoom{
    0%{transform:scale(1) translateY(0);}
    50%{transform:scale(1.1) translateY(-10px);}
    100%{transform:scale(1) translateY(0);}
}

.bg-zoom{
    animation:bgZoom 12s ease-in-out infinite;
}

/* BLOG */
.blog-slider .slick-slide{
    opacity:0.2;
    transform:scale(1);
    transition:all 0.4s ease;
}

.blog-slider .slick-center{
    opacity:1 !important;
    transform:scale(1);
}

.blog-slider .slick-slide:has(+ .slick-center){
    opacity:1;
}

.blog-slider .slick-dots{
    bottom:-50px;
}

.blog-slider .slick-dots li{
    margin:0;
}

.blog-slider .slick-dots li button:before{
    font-size:10px;
}

.blog-slider .slick-prev,
.blog-slider .slick-next{
    z-index:10;
}

.blog-slider .slick-prev:before,
.blog-slider .slick-next:before{
    color:black;
    font-size:20px;
}

#blogPrev{
    margin-left:-75px;
}

#blogNext{
    margin-right:-75px;
}

/* FOOTER */
.footer-waves{
    position:absolute;
    inset:0;
    z-index:0;
    overflow:hidden;
}

.footer-waves svg{
    position:absolute;
    bottom:0;
    width:100%;
}

.wave-layer{
    animation:waveShift linear infinite;
}

.wave-layer:nth-child(1){
    animation-duration:18s;
    opacity:0.18;
}

.wave-layer:nth-child(2){
    animation-duration:13s;
    opacity:0.11;
    animation-direction:reverse;
}

.wave-layer:nth-child(3){
    animation-duration:22s;
    opacity:0.09;
}

@keyframes waveShift{
    0%{transform:translateX(0);}
    50%{transform:translateX(-8%);}
    100%{transform:translateX(0);}
}

@keyframes gradientFlow{
    0%{background-position:0% center;}
    100%{background-position:250% center;}
}

.nav-link::after{
    content:'';
    position:absolute;
    bottom:-3px;
    left:0;
    width:0;
    height:1.5px;
    background:var(--accent);
    transition:width 0.35s cubic-bezier(0.4,0,0.2,1);
}

.nav-link:hover{
    color:#fff;
}

.nav-link:hover::after{
    width:100%;
}

.nav-link.active{
    color:var(--accent);
}

.nav-link.active::after{
    width:100%;
    background:var(--accent);
}

.contact-row:hover{
    color:#fff;
    transform:translateX(4px);
}

.contact-row:hover .contact-icon-wrap{
    background:rgba(59,142,243,0.15);
    border-color:var(--accent);
    box-shadow:0 0 18px rgba(59,142,243,0.35);
}

.newsletter-input-wrap:focus-within{
    border-color:rgba(59,142,243,0.5);
    box-shadow:0 0 20px rgba(59,142,243,0.12);
}

.newsletter-input::placeholder{
    color:rgba(255,255,255,0.3);
}

.newsletter-btn:hover{
    color:var(--accent);
    transform:scale(1.15);
}

.social-btn::before{
    content:'';
    position:absolute;
    inset:0;
    border-radius:50%;
    opacity:0;
    transition:opacity 0.35s;
}

.social-btn:hover{
    color:#fff;
    border-color:rgba(255,255,255,0.35);
    transform:translateY(-4px) scale(1.1);
    box-shadow:0 10px 28px rgba(0,0,0,0.4);
}

.social-btn:hover::before{
    opacity:1;
}

.footer-divider{
    height:1px;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,0.5) 30%,
        rgba(59,142,243,0.25) 50%,
        rgba(255,255,255,0.5) 70%,
        transparent
    );
}

.privacy-line{
    display:flex;
    align-items:center;
    gap:8px;
    color:var(--text-dim);
    font-size:12px;
}

.gsap-fade{
    opacity:0;
}

.gsap-left{
    opacity:0;
    transform:translateX(-40px);
}

.gsap-right{
    opacity:0;
    transform:translateX(40px);
}

.gsap-up{
    opacity:0;
    transform:translateY(30px);
}

/* MARQUEE */
@keyframes marquee{
    0%{transform:translateX(0%);}
    100%{transform:translateX(-50%);}
}

.marquee{
    display:flex;
    width:max-content;
    animation:marquee 20s linear infinite;
}

.fade-mask{
    -webkit-mask-image:linear-gradient(to right,transparent,black 10%,black 90%,transparent);
    mask-image:linear-gradient(to right,transparent,black 10%,black 90%,transparent);
}

.marquee:hover{
    animation-play-state:paused;
}

/* HEADER */
.glass{
    background:rgba(255,255,255,0.08);
    backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,0.15);
}

.toggle-header{
    max-width:100%;
    padding:0;
    transition:all .3s;
    box-shadow:0 1px 3px rgba(0,0,0,0.10);
    top:0;
}

.toggle-header .glass{
    background:white;
    border-radius:0;
    border-top:0;
    border-left:0;
    border-right:0;
}

.toggle-header .logo-main,
.toggle-header #menuBtn,
.toggle-header .nav-links a,
.toggle-header button,
.toggle-header #mobileMenu a{
    color:#333;
}

.toggle-header #mobileMenu{
    border-top:1px solid #ddd;
}

.toggle-header svg path{
    fill:#333;
}

.heading-hero{
    line-height:1;
    font-weight:bold;
}

@keyframes borderFlow{
    0%{background-position:0% 50%;}
    100%{background-position:200% 50%;}
}

.animate-borderFlow{
    animation:borderFlow 3s linear infinite;
}

.toggle-header #mobileMenu{
    margin-top:0;
    padding:0;
    background:white;
}

.toggle-header #mobileMenu.opacity-100{
    padding:24px;
}

/* PROCESS SLIDER */
.process-slider .slick-slide{
    height:auto;
}

.process-slider .slick-track{
    display:flex !important;
}

.process-slider .slick-slide > div{
    height:100%;
}

.process-slider .slick-dots{
    bottom:-50px;
}

.process-slider .slick-dots li{
    margin:0;
}

.process-slider .slick-dots li button:before{
    font-size:10px;
}

/* SCROLL */
@keyframes scroll{
    0%{
        transform:translateY(0);
        opacity:1;
    }

    70%{
        transform:translateY(20px);
        opacity:0.4;
    }

    100%{
        transform:translateY(0);
        opacity:0;
    }
}

.animate-scroll{
    animation:scroll 1.8s infinite;
}

/* NAV */
.nav-links a{
    transition:all .3s;
}

.nav-links a:hover,
.nav-links a.active{
    color:#00d3f3;
}

/* CUBE */
.scene{
    position:relative;
    width:100%;
    max-width:540px;
    aspect-ratio:540 / 460;
}

canvas{
    display:block;
    width:100% !important;
    height:100% !important;
}

.corner-label{
    position:absolute;
    font-size:16px;
    font-weight:500;
    max-width:100px;
    text-align:center;
    line-height:1.1;
}

@media (max-width:767px){
    .corner-label{
        font-size:13px;
    }
}

@media (min-width:768px){

    .wrap-cube > div:nth-child(1){
        order:2;
        text-align:right;
    }

    .wrap-cube > div:nth-child(1) h2{
        padding-right:0;
    }

    .wrap-cube > div:nth-child(2){
        order:1;
    }
}