/* ==========================
SIVANATHI PRODUCTIONS
GLOBAL DESIGN SYSTEM
========================== */


:root{

--bg-primary:#08090D;
--bg-secondary:#101827;

--accent:#00E5FF;
--purple:#8B5CF6;

--white:#FFFFFF;
--text-light:#A7B0C0;

--border:
rgba(255,255,255,.12);

--shadow:
0 20px 60px rgba(0,0,0,.35);

--radius-small:12px;
--radius-medium:20px;
--radius-large:30px;

--transition:.4s ease;


--font-primary:'Poppins',sans-serif;
--font-secondary:'Inter',sans-serif;

--container:1400px;

}




/* ==========================
RESET
========================== */


*{

margin:0;
padding:0;
box-sizing:border-box;

}



html{

scroll-behavior:smooth;

}



body{

background:var(--bg-primary);

color:var(--white);

font-family:var(--font-primary);

overflow-x:hidden;

}



img{

max-width:100%;

display:block;

}



a{

text-decoration:none;

color:inherit;

}



ul{

list-style:none;

}



button,
input,
textarea,
select{

font-family:inherit;

}




::selection{

background:var(--accent);

color:#000;

}




/* ==========================
CONTAINER
========================== */


.container{

width:90%;

max-width:var(--container);

margin:auto;

}




/* ==========================
COMMON SECTION
========================== */


.section-padding{

padding:120px 0;

}



.section-title{

margin-bottom:60px;

}



.section-title p{

color:var(--accent);

letter-spacing:4px;

font-size:14px;

}



.section-title h2{

font-size:clamp(40px,5vw,65px);

line-height:1.1;

}




/* ==========================
PRELOADER
========================== */


.preloader{

position:fixed;

inset:0;

height:100vh;

background:var(--bg-primary);

display:flex;

align-items:center;

justify-content:center;

flex-direction:column;

z-index:9999;

}



.loader-circle{

width:70px;

height:70px;

border-radius:50%;

border:3px solid transparent;

border-top-color:var(--accent);

animation:loader 1s linear infinite;

}



.preloader p{

margin-top:20px;

letter-spacing:4px;

font-size:14px;

}



@keyframes loader{

100%{

transform:rotate(360deg);

}

}











/* ==========================
PRELOADER
========================== */

.preloader{
    position:fixed;
    inset:0;
    background:#050505;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    z-index:99999;
    transition:opacity .6s ease, visibility .6s ease;
}

.preloader.fade-out{
    opacity:0;
    visibility:hidden;
}


/* ==========================
CLAPPERBOARD
========================== */

.clapperboard{
    position:relative;
    width:110px;
    height:90px;
    margin-bottom:30px;
}

.clapper-top{
    position:absolute;
    top:0;
    left:0;
    width:110px;
    height:28px;
    background:repeating-linear-gradient(
        45deg,
        #00E5FF 0 12px,
        #111 12px 24px
    );
    border-radius:6px 6px 0 0;
    transform-origin:left bottom;

    /* Slow single clap */
    animation:clap .8s ease forwards;
}

.clapper-bottom{
    position:absolute;
    bottom:0;
    left:0;
    width:110px;
    height:65px;
    background:#1b1b1b;
    border:2px solid #00E5FF;
    border-radius:0 0 8px 8px;
    box-shadow:0 0 20px rgba(0,229,255,.25);
}


/* ==========================
TEXT
========================== */

.preloader h2{
    color:#fff;
    font-family:'Poppins',sans-serif;
    font-size:1.5rem;
    letter-spacing:3px;
    margin-bottom:10px;
}

.preloader p{
    color:#00E5FF;
    font-size:.95rem;
    letter-spacing:2px;
    animation:blink 1.5s infinite;
}












/* ==========================
ANIMATION
========================== */

@keyframes clap{

    0%{
        transform:rotate(-35deg);
    }

    60%{
        transform:rotate(0deg);
    }

    100%{
        transform:rotate(0deg);
    }

}

@keyframes blink{

    0%,100%{
        opacity:1;
    }

    50%{
        opacity:.35;
    }

}


/* ==========================
MOBILE
========================== */

@media(max-width:768px){

    .clapperboard{
        width:90px;
        height:74px;
    }

    .clapper-top{
        width:90px;
        height:24px;
    }

    .clapper-bottom{
        width:90px;
        height:52px;
    }

    .preloader h2{
        font-size:1.2rem;
    }

}


























/* ==========================
HEADER
========================== */


.header{

position:fixed;

top:0;

left:0;

width:100%;

z-index:1000;

background:

rgba(8,9,13,.75);

backdrop-filter:blur(15px);

transition:.4s;

}




.header.scrolled{

background:

rgba(8,9,13,.95);

border-bottom:1px solid var(--border);

}




.nav-container{

height:90px;

display:flex;

align-items:center;

justify-content:space-between;

}




/* LOGO */


.logo{

display:flex;

flex-direction:column;

line-height:1;

}



.logo-main{

font-size:28px;

font-weight:800;

letter-spacing:4px;

}



.logo-sub{

font-size:11px;

letter-spacing:7px;

color:var(--accent);

margin-top:8px;

}




/* NAV */


.navigation > ul{

display:flex;
gap:45px;

}


.dropdown-menu{

display:flex;
flex-direction:column;
gap:0;

}



.navigation a{

font-size:15px;

font-weight:500;

position:relative;

transition:.3s;

}



.navigation a::after{

content:"";

position:absolute;

bottom:-10px;

left:0;

width:0;

height:2px;

background:var(--accent);

transition:.3s;

}



.navigation a:hover,
.navigation .active{

color:var(--accent);

}



.navigation a:hover::after,
.navigation .active::after{

width:100%;

}




/* MOBILE MENU */


.menu-toggle{

display:none;

}



.menu-toggle span{

display:block;

width:28px;

height:2px;

background:white;

margin:6px;

}





/* ==========================
HERO SECTION
========================== */


.hero{

height:90vh;

min-height:700px;

position:relative;

display:flex;

align-items:center;

overflow:hidden;

}



.hero-video{

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

object-fit:cover;

z-index:-2;

}




.hero-overlay{

position:absolute;

inset:0;

background:

linear-gradient(
90deg,
rgba(8,9,13,.95),
rgba(8,9,13,.45)
);

z-index:-1;

}




.hero-content{

position:relative;

z-index:2;

width:90%;

max-width:1200px;

margin:auto;

}



.hero-tag{

color:var(--accent);

letter-spacing:5px;

font-size:14px;

}




.hero h1{

font-size:

clamp(55px,8vw,120px);

line-height:.95;

margin:30px 0;

font-weight:700;

}




.hero-description{

max-width:620px;

font-size:20px;

line-height:1.8;

color:var(--text-light);

}




/* ==========================
BUTTON SYSTEM
========================== */


.hero-buttons{

margin-top:40px;

display:flex;

gap:20px;

}



.btn-primary,
.btn-outline{

display:inline-flex;

align-items:center;

justify-content:center;

padding:16px 38px;

border-radius:50px;

font-weight:600;

transition:var(--transition);

}



.btn-primary{

background:var(--accent);

color:#000;

}



.btn-primary:hover{

transform:translateY(-5px);

box-shadow:

0 15px 40px rgba(0,229,255,.35);

}



.btn-outline{

border:

1px solid rgba(255,255,255,.5);

}



.btn-outline:hover{

background:white;

color:black;

transform:translateY(-5px);

}








/* ==========================
INTRO SECTION
========================== */


.intro-grid{

display:grid;

grid-template-columns:

1fr 1fr;

gap:80px;

}




.intro h2{

font-size:

clamp(40px,5vw,60px);

line-height:1.1;

}




.intro p{

color:var(--text-light);

line-height:2;

margin-bottom:20px;

}





/* ==========================
COMMON CARD SYSTEM
========================== */


.service-cards,
.why-grid,
.process-grid{

display:grid;

grid-template-columns:

repeat(3,1fr);

gap:30px;

}




.service-card,
.why-grid div,
.process-grid div{

padding:40px;

background:

var(--bg-secondary);

border:

1px solid var(--border);

border-radius:

var(--radius-large);

transition:

var(--transition);

}




.service-card:hover,
.why-grid div:hover,
.process-grid div:hover{

transform:

translateY(-15px);

border-color:

var(--accent);

box-shadow:

var(--shadow);

}




.process-grid span{

font-size:50px;

color:var(--accent);

}





/* ==========================
CTA SECTION
========================== */


.home-contact{

padding:120px 0;

text-align:center;

background:

var(--bg-secondary);

}




.home-contact h2{

font-size:

clamp(40px,6vw,70px);

}




.home-contact p{

font-size:25px;

color:var(--text-light);

margin:20px;

}




/* ==========================
CONTACT CTA BACKGROUND IMAGE
========================== */

.home-contact{

position:relative;

padding:120px 0;

text-align:center;

background-image:
linear-gradient(
rgba(8,9,13,.85),
rgba(8,9,13,.85)
),
url("../images/cta/home-cta.jpg");

background-size:cover;

background-position:center;

background-repeat:no-repeat;

overflow:hidden;

}


/* Keep content above overlay */

.home-contact .container{

position:relative;

z-index:2;

}







/* PORTFOLIO CTA BACKGROUND */

.portfolio-cta{

background:
linear-gradient(
90deg,
rgba(8,9,13,.9),
rgba(8,9,13,.65)
),
url("../images/cta/portfolio-cta.jpg");

background-size:cover;

background-position:center;

background-attachment:fixed;

}





.about-cta{

background:
linear-gradient(
90deg,
rgba(8,9,13,.9),
rgba(8,9,13,.7)
),
url("../images/cta/about-cta.jpg");

background-size:cover;

background-position:center;

}



.services-cta{

background:
linear-gradient(
90deg,
rgba(8,9,13,.9),
rgba(8,9,13,.7)
),
url("../images/cta/services-cta.jpg");

background-size:cover;

background-position:center;

}


/* ==========================
PREMIUM FOOTER
========================== */


.footer{

background:#05070C;

padding:90px 0 0;

border-top:1px solid var(--border);

}



.footer-grid{

display:grid;

grid-template-columns:

1.5fr 1fr 1fr 1.3fr;

gap:50px;

}





.footer-about h3{

font-size:32px;

letter-spacing:3px;

}


.footer-about h3 span{

display:block;

font-size:12px;

letter-spacing:6px;

color:var(--accent);

margin-top:8px;

}



.footer-about p{

color:var(--text-light);

line-height:1.8;

margin-top:25px;

}




.footer h4{

font-size:20px;

margin-bottom:25px;

}



.footer-links a{

display:block;

color:var(--text-light);

margin-bottom:15px;

transition:.3s;

}



.footer-links a:hover{

color:var(--accent);

transform:translateX(8px);

}





.footer-contact p{

color:var(--text-light);

margin-bottom:18px;

line-height:1.6;

}



.footer-contact i{

color:var(--accent);

margin-right:10px;

}





.footer-social{

display:flex;

gap:15px;

margin-top:30px;

}



.footer-social a{

width:42px;

height:42px;

border:1px solid var(--border);

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

transition:.3s;

}



.footer-social a:hover{

background:var(--accent);

color:#000;

}





.footer-bottom{

margin-top:50px;
padding-top:25px;

border-top:1px solid rgba(255,255,255,.08);

text-align:center;

color:var(--text-light);

font-size:15px;

letter-spacing:1px;

}



.footer-bottom a:hover{

color:var(--accent);

}






--------------------------



.footer-bottom{

border-top:1px solid rgba(255,255,255,.1);

padding:25px 0 35px;

margin-top:50px;

}


.footer-legal{

position:relative;

display:flex;

align-items:center;

justify-content:center;

}


.footer-policy{

position:absolute;

left:0;

display:flex;

align-items:center;
  padding-bottom:30px !important;

gap:12px;


}


.footer-policy a{

color:var(--text-light);

font-size:14px;

transition:.3s;

}


.footer-policy a:hover{

color:var(--accent);

}


.footer-policy span{

color:rgba(255,255,255,.3);


}


.copyright{

text-align:center;

color:var(--text-light);

font-size:14px;

letter-spacing:.5px;
  padding-bottom:30px !important;

}











/* ==========================
INNER PAGE HERO
========================== */


.page-hero{

height:80vh;

display:flex;

align-items:center;

background:

radial-gradient(
circle at top,
#18243A,
#08090D 70%
);

}




.page-hero p{

color:var(--accent);

letter-spacing:5px;

font-size:14px;

}




.page-hero h1{

font-size:

clamp(50px,7vw,100px);

line-height:1;

margin:30px 0;

}




.page-hero span{

display:block;

max-width:650px;

font-size:20px;

line-height:1.8;

color:var(--text-light);

}





/* ==========================
SERVICES PAGE
========================== */


.service-large-grid{

display:grid;

grid-template-columns:

repeat(2,1fr);

gap:30px;

}




.service-box{

padding:50px;

background:var(--bg-secondary);

border:

1px solid var(--border);

border-radius:

25px;

transition:

var(--transition);

}




.service-box:hover{

transform:

translateY(-15px);

border-color:

var(--accent);

box-shadow:

var(--shadow);

}




.service-box h3{

font-size:30px;

margin-bottom:20px;

}




.service-box p,
.translation-grid p{

color:var(--text-light);

line-height:1.8;

}





.translation-grid{

display:grid;

grid-template-columns:

repeat(3,1fr);

gap:30px;

}




.translation-grid div{

padding:35px;

border-left:

2px solid var(--accent);

}




.workflow-line{

display:grid;

grid-template-columns:

repeat(4,1fr);

gap:25px;

}




.workflow-line div{

padding:35px;

text-align:center;

background:

var(--bg-secondary);

border-radius:

20px;

}




.workflow-line strong{

font-size:50px;

color:var(--accent);

}





.service-contact{

padding:120px 0;

text-align:center;

background:

var(--bg-secondary);

}




.service-contact h2{

font-size:

clamp(40px,5vw,60px);

}




.service-contact p{

font-size:22px;

color:var(--text-light);

margin:20px;

}





/* ==========================
PORTFOLIO PAGE
========================== */


.portfolio-filter{

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

margin-bottom:70px;

}




.filter-btn{

background:none;

border:

1px solid rgba(255,255,255,.2);

color:white;

padding:12px 30px;

border-radius:50px;

transition:.3s;

}




.filter-btn:hover,
.filter-btn.active{

background:

var(--accent);

color:#000;

}





.portfolio-grid{

display:grid;

grid-template-columns:

repeat(2,1fr);

gap:40px;

}




.project-card{

background:

var(--bg-secondary);

border-radius:

25px;

overflow:hidden;

border:

1px solid var(--border);

transition:

var(--transition);

}




.project-card:hover{

transform:

translateY(-15px);

border-color:

var(--accent);

box-shadow:

var(--shadow);

}




.project-image{

height:350px;

overflow:hidden;

}




.image-placeholder{

height:100%;

display:flex;

align-items:center;

justify-content:center;

background:

linear-gradient(
135deg,
#18243A,
#08090D
);

font-size:30px;

letter-spacing:5px;

color:var(--text-light);

}




.project-content{

padding:30px;

}




.project-content h3{

font-size:28px;

margin-bottom:15px;

}




.project-content p{

color:var(--text-light);

}





.portfolio-stats{

padding:100px 0;

background:

var(--bg-secondary);

}




.stats-grid{

display:grid;

grid-template-columns:

repeat(3,1fr);

text-align:center;

}




.stats-grid h2{

font-size:70px;

color:var(--accent);

}




.stats-grid p{

color:var(--text-light);

}

/* ==========================
ABOUT PAGE
========================== */


.about-grid{

display:grid;

grid-template-columns:

1fr 1fr;

gap:80px;

}




.about-grid h2{

font-size:

clamp(40px,5vw,65px);

line-height:1.1;

}




.about-grid p{

color:var(--text-light);

line-height:2;

margin-bottom:25px;

}





.mission-grid{

display:grid;

grid-template-columns:

repeat(2,1fr);

gap:40px;

}




.mission-card{

padding:50px;

background:

var(--bg-secondary);

border-radius:

25px;

border:

1px solid var(--border);

transition:

var(--transition);

}




.mission-card:hover{

transform:

translateY(-10px);

border-color:

var(--accent);

}




.mission-card h3{

font-size:35px;

margin-bottom:20px;

}




.mission-card p{

color:var(--text-light);

line-height:1.8;

}





.studio-grid{

display:grid;

grid-template-columns:

repeat(3,1fr);

gap:30px;

}




.studio-grid div{

padding:40px;

background:

var(--bg-secondary);

border-radius:

20px;

border:

1px solid var(--border);

transition:

var(--transition);

}




.studio-grid div:hover{

transform:

translateY(-12px);

border-color:

var(--accent);

}




.studio-grid h3{

font-size:28px;

margin-bottom:20px;

}




.studio-grid p{

color:var(--text-light);

line-height:1.8;

}





.choose-list{

display:grid;

grid-template-columns:

repeat(3,1fr);

gap:30px;

}




.choose-list div{

padding:40px;

background:

var(--bg-secondary);

border-radius:

20px;

}




.choose-list span{

font-size:45px;

color:var(--accent);

}




.choose-list h3{

margin:20px 0;

}




.choose-list p{

color:var(--text-light);

}





.about-numbers{

padding:100px 0;

background:

var(--bg-secondary);

}




.number-grid{

display:grid;

grid-template-columns:

repeat(4,1fr);

text-align:center;

}




.number-grid h2{

font-size:70px;

color:var(--accent);

}




.number-grid p{

color:var(--text-light);

font-size:18px;

}





/* ==========================
CONTACT PAGE
========================== */


.contact-grid{

display:grid;

grid-template-columns:

.8fr 1.2fr;

gap:70px;

}




.contact-info h2{

font-size:

clamp(40px,5vw,55px);

margin-bottom:30px;

}




.contact-info p{

color:var(--text-light);

line-height:1.8;

}




.contact-item{

margin-top:35px;

border-left:

2px solid var(--accent);

padding-left:20px;

}




.contact-item h3{

font-size:20px;

}





.contact-form-container{

background:

var(--bg-secondary);

padding:45px;

border-radius:

30px;

border:

1px solid var(--border);

position:relative;

z-index:10;

}




.input-group{

margin-bottom:25px;

}




.input-group label{

display:block;

margin-bottom:10px;

font-size:14px;

color:var(--text-light);

}




.input-group input,
.input-group textarea,
.input-group select{

width:100%;

padding:16px 20px;

background:

var(--bg-primary);

border:

1px solid var(--border);

border-radius:

12px;

color:white;

outline:none;

transition:.3s;

}




.input-group input:focus,
.input-group textarea:focus,
.input-group select:focus{

border-color:

var(--accent);

box-shadow:

0 0 20px rgba(0,229,255,.15);

}




#formMessage{

margin-top:25px;

font-size:18px;

color:var(--accent);

}





/* ==========================
QUICK CONTACT
========================== */


.quick-contact{

padding:100px 0;

text-align:center;

background:

var(--bg-secondary);

}




.quick-contact h2{

font-size:

clamp(40px,5vw,55px);

}




.quick-contact p{

color:var(--text-light);

margin:20px;

}





/* ==========================
FLOATING CONTACT BUTTONS
========================== */


.floating-buttons{

position:fixed;

right:25px;

bottom:25px;

display:flex;

flex-direction:column;

gap:15px;

z-index:9999;

}




.floating-buttons a{

width:64px;

height:64px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

box-shadow:

0 10px 30px rgba(0,0,0,.35);

transition:.3s;

}




.floating-buttons a:hover{

transform:

translateY(-5px) scale(1.08);

}




.floating-whatsapp{

background:#25D366;

}




.floating-phone{

background:#0A84FF;

}




.floating-buttons img{

width:32px;

height:32px;

}





/* ==========================
CUSTOM PROJECT DROPDOWN
========================== */

/* =================================
CUSTOM CYAN DROPDOWN
================================= */


.custom-select{

position:relative;

width:100%;

}



.select-box{


width:100%;

padding:16px 20px;

background:#08090D;

border:1px solid rgba(255,255,255,.12);

border-radius:12px;


display:flex;

justify-content:space-between;

align-items:center;


transition:.3s;


}



.select-box:hover{

border-color:#00E5FF;

box-shadow:
0 0 20px rgba(0,229,255,.15);


}




.select-box span{

color:white;

}




.dropdown-arrow{


width:10px;

height:10px;


border-right:2px solid #00E5FF;

border-bottom:2px solid #00E5FF;


transform:rotate(45deg);


transition:.3s;


}




.select-box.active .dropdown-arrow{


transform:
rotate(225deg);


}




.select-options{


position:absolute;


top:65px;


left:0;


width:100%;


background:#101827;


border-radius:15px;


border:1px solid rgba(0,229,255,.2);


overflow:hidden;


opacity:0;


visibility:hidden;


transform:
translateY(-15px);


transition:.35s ease;


z-index:100;



box-shadow:

0 20px 50px rgba(0,0,0,.5);



}





.select-options.active{


opacity:1;


visibility:visible;


transform:
translateY(0);


}




.select-options div{


padding:15px 20px;


color:white;


transition:.3s;


}




.select-options div:hover{


background:#00E5FF;


color:#000;


padding-left:30px;


}













/*
.dropdown-arrow{

width:10px;

height:10px;

border-right:

2px solid var(--accent);

border-bottom:

2px solid var(--accent);

transform:

rotate(45deg);

transition:.3s;

margin-top:-5px;

}



.select-box.active .dropdown-arrow{

transform:

rotate(225deg);

margin-top:5px;

}








.select-options.active{

opacity:1;

visibility:visible;

transform:

translateY(0);

}




.select-options div{

padding:15px 20px;


transition:.3s;

}




.select-options div:hover{

background:

var(--accent);

color:#000;

}


*/



/* ==========================
FLOATING BUTTON FINAL FIX
========================== */


.floating-buttons{

position:fixed;

right:25px;

bottom:25px;

display:flex;

flex-direction:column;

gap:15px;

z-index:9999;

}



.floating-buttons a{

width:64px;

height:64px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

box-shadow:
0 10px 30px rgba(0,0,0,.35);

transition:.3s ease;

overflow:hidden;

}



.floating-buttons a:hover{

transform:scale(1.08);

}



.floating-phone{

background:#0A84FF;

}




.floating-whatsapp{

background:#25D366;

}





.floating-buttons img{

width:32px !important;

height:32px !important;

object-fit:contain;

display:block;

}



.hero-video{

position:absolute;

top:0;
left:0;

width:100%;
height:100%;

object-fit:cover;

z-index:0;

}



.hero-overlay{

position:absolute;

inset:0;

background:

linear-gradient(
90deg,
rgba(8,9,13,.95),
rgba(8,9,13,.55)
);


z-index:1;

}



.hero-content{

position:relative;

z-index:2;

}





/* ==========================
BRAND AREA
========================== */

.brand-area{

    display:flex;
    align-items:center;
    gap:15px;
    text-decoration:none;

}


.owner-photo{

    width:60px !important;
    height:60px !important;

    border-radius:50% !important;

    object-fit:cover;

    border:none !important;

    outline:none !important;

    box-shadow:none !important;

}

.logo{

    display:flex;
    flex-direction:column;

}


.logo-main{

    font-size:24px;
    font-weight:800;
    letter-spacing:2px;

}


.logo-sub{

    font-size:12px;
    letter-spacing:4px;

}


/* REMOVE OWNER PHOTO BORDER */

header .owner-photo,
.brand-area .owner-photo{

    border:0 !important;
    outline:0 !important;
    box-shadow:none !important;

}

/*
.floating-whatsapp{

display:flex;
align-items:center;
justify-content:center;

width:55px;
height:55px;

border-radius:50%;

font-size:30px;

}

.floating-whatsapp i{

color:white;

}
*/








/* ==========================================
   ULTIMATE MOBILE FIX FOR PORTFOLIO & SECTIONS
   ========================================== */

@media (max-width: 768px) {
  /* Prevent horizontal overflow across the entire document */
  html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
  }

  /* Ensure containers fit nicely with padding */
  .container {
    width: 92% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 auto !important;
  }

  /* Portfolio & Multi-Professional Grids */
  .portfolio-grid,
  .service-large-grid,
  .translation-grid,
  .workflow-line,
  .about-grid,
  .mission-grid,
  .studio-grid,
  .choose-list,
  .number-grid,
  .intro-grid,
  .service-cards,
  .why-grid,
  .process-grid,
  .contact-grid {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 20px !important;
  }

  /* Force all cards and boxes to take full width safely */
  .project-card,
  .service-box,
  .mission-card,
  .service-card,
  .studio-grid div,
  .choose-list div,
  .translation-grid div,
  .workflow-line div {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Portfolio Filter Buttons Wrapping Fix */
  .portfolio-filter {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 0 10px !important;
  }

  .filter-btn {
    flex: 1 1 calc(50% - 10px) !important;
    max-width: 160px !important;
    text-align: center !important;
    padding: 10px 12px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
  }

  /* Fix typography scaling on small screens */
  .section-title h2,
  .hero h1,
  .page-hero h1 {
    font-size: clamp(32px, 8vw, 42px) !important;
    word-break: break-word !important;
  }
}

/* Extra small devices (iPhone SE, small Androids) */
@media (max-width: 480px) {
  .filter-btn {
    flex: 1 1 100% !important;
    max-width: 100% !important;
  }
  
  .project-image {
    height: 180px !important;
  }
}






/* ==========================================
   EXPERIENCE / STATS SECTION MOBILE FIX
   ========================================== */

@media (max-width: 768px) {
  .portfolio-stats {
    padding: 60px 0 !important;
  }

  .stats-grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 40px !important;
    width: 100% !important;
  }

  .stats-grid div {
    width: 100% !important;
    max-width: 100% !important;
  }

  .stats-grid h2 {
    font-size: clamp(40px, 12vw, 55px) !important;
    line-height: 1 !important;
    margin-bottom: 10px !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }

  .stats-grid p {
    font-size: 16px !important;
  }
}

@media (max-width: 480px) {
  .stats-grid h2 {
    font-size: 42px !important;
  }
}






/* ==========================
   PROJECT IMAGE STYLING FIX
   ========================== */

.project-image {
  height: 350px;
  overflow: hidden;
  position: relative;
}

.project-image img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures the image fills the area without stretching */
  display: block;
  transition: transform 0.5s ease;
}

/* Optional: Smooth zoom effect when hovering over the card */
.project-card:hover .project-image img {
  transform: scale(1.05);
}

/* Mobile height adjustment */
@media (max-width: 768px) {
  .project-image {
    height: 220px !important;
  }
}










/* ==========================
NAV DROPDOWN
========================== */


.dropdown{

position:relative;

}



.dropdown > a{

display:flex;

align-items:center;

gap:8px;

}



.arrow{

font-size:12px;

color:var(--accent);

}



/* Dropdown Box */

.dropdown-menu{

position:absolute;

top:45px;

left:0;

width:240px;

background:var(--bg-secondary);

border:1px solid var(--border);

border-radius:15px;

padding:15px 0;

opacity:0;

visibility:hidden;

transform:translateY(20px);

transition:.35s ease;

box-shadow:var(--shadow);

z-index:1000;

}



.dropdown:hover .dropdown-menu{

opacity:1;

visibility:visible;

transform:translateY(0);

}



.dropdown-menu a{

display:block;

padding:14px 25px;

font-size:14px;

color:white;

transition:.3s;

}



.dropdown-menu a:hover{

background:var(--accent);

color:#000;

padding-left:35px;

}



/* ==========================
DROPDOWN MENU FIX
========================== */


.dropdown-menu{

display:flex !important;

flex-direction:column !important;

align-items:stretch !important;

}


.dropdown-menu li{

display:block !important;

width:100%;

}


.dropdown-menu li a{

display:block !important;

width:100%;

}




/* ==========================
PROJECT DETAILS TEXTAREA FIX
========================== */

.input-group textarea{

    width:100%;
    min-height:150px;
    resize:none;
    
}





/* ==========================
CONTACT INFO BACKDROP IMAGE
========================== */

.contact-info{

position:relative;

padding:50px;

border-radius:30px;

overflow:hidden;

background:
linear-gradient(
rgba(8,9,13,.85),
rgba(8,9,13,.95)
),
url("../assets/images/contact-bg.jpg");

background-size:cover;

background-position:center;

}


/* Keep text above image */

.contact-info > *{

position:relative;

z-index:2;

}









/* ==========================
ABOUT STORY VISUAL
========================== */

.about-visual{

display:flex;
flex-direction:column;
align-items:center;
justify-content:center;

text-align:center;

}


.story-icon{

width:180px;
height:180px;

border-radius:50%;

display:flex;
align-items:center;
justify-content:center;

background:

radial-gradient(
circle,
rgba(0,229,255,.25),
transparent 70%
);

border:1px solid rgba(0,229,255,.3);

margin-top:40px;

}


.story-icon i{

font-size:80px;

color:var(--accent);

filter:
drop-shadow(0 0 20px rgba(0,229,255,.6));

}


.story-line{

margin-top:25px;

letter-spacing:4px;

font-size:14px;

color:var(--text-light);

}





















/* ==========================
VOICE WAVE VISUAL
========================== */


.intro-title{

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

}



.voice-wave{

margin-top:50px;

display:flex;

align-items:center;

justify-content:center;

gap:6px;

height:100px;

width:100%;

max-width:600px;

}



.voice-wave span{

width:6px;

height:30px;

background:var(--accent);

border-radius:10px;

animation:soundWave 1.2s infinite ease-in-out;

box-shadow:
0 0 15px rgba(0,229,255,.6);

}



.voice-wave span:nth-child(2){
animation-delay:.1s;
height:50px;
}


.voice-wave span:nth-child(3){
animation-delay:.2s;
height:70px;
}


.voice-wave span:nth-child(4){
animation-delay:.3s;
height:40px;
}


.voice-wave span:nth-child(5){
animation-delay:.4s;
height:80px;
}


.voice-wave span:nth-child(6){
animation-delay:.5s;
height:55px;
}


.voice-wave span:nth-child(7){
animation-delay:.6s;
height:75px;
}


.voice-wave span:nth-child(8){
animation-delay:.7s;
height:45px;
}


.voice-wave span:nth-child(9){
animation-delay:.8s;
height:65px;
}


.voice-wave span:nth-child(10){
animation-delay:.9s;
height:35px;
}


.voice-wave span:nth-child(11){
animation-delay:1s;
height:55px;
}


.voice-wave span:nth-child(12){
animation-delay:1.1s;
height:75px;
}


.voice-wave span:nth-child(13){
animation-delay:1.2s;
height:45px;
}


.voice-wave span:nth-child(14){
animation-delay:1.3s;
height:85px;
}


.voice-wave span:nth-child(15){
animation-delay:1.4s;
height:60px;
}


.voice-wave span:nth-child(16){
animation-delay:1.5s;
height:40px;
}


.voice-wave span:nth-child(17){
animation-delay:1.6s;
height:70px;
}


.voice-wave span:nth-child(18){
animation-delay:1.7s;
height:50px;
}




@keyframes soundWave{


0%,
100%{

transform:scaleY(.5);

opacity:.6;

}


50%{

transform:scaleY(1);

opacity:1;

}


}





#projectError{

font-size:14px;

margin-top:8px;

color:#ff5555;

}


.input-error{

border-color:#ff5555 !important;

box-shadow:
0 0 15px rgba(255,0,0,0);

}


/*



.input-error{

border-color:#ff5555 !important;

box-shadow:
0 0 15px rgba(255,85,85,.25);

}


#projectError{

color:#ff5555;

font-size:14px;

margin-top:8px;



}
 */
 
 
 
 
 
 
 /* ==========================
404 PAGE
========================== */


.error-page{

min-height:100vh;

display:flex;

align-items:center;

justify-content:center;

background:var(--bg-primary);

text-align:center;

padding:40px;

}


.error-container{

max-width:700px;

}


.error-container h1{

font-size:clamp(100px,18vw,220px);

font-weight:800;

line-height:1;

color:var(--accent);

margin:0;

}



.error-container h2{

font-size:40px;

color:#ffffff;

margin:20px 0;

}



.error-container p{

font-size:18px;

color:var(--text-light);

line-height:1.7;

margin-bottom:35px;

}



.error-container .btn-primary{

display:inline-flex;

padding:15px 35px;

background:var(--accent);

color:#000;

border-radius:50px;

font-weight:600;

text-decoration:none;

transition:.3s;

}



.error-container .btn-primary:hover{

transform:translateY(-5px);

}




/* =========================================
SIVANATHI PRODUCTIONS
PREMIUM LEGAL PAGE SYSTEM
PRIVACY + TERMS
========================================= */


.legal-page{

min-height:100vh;

padding:160px 20px 100px;

background:
radial-gradient(
circle at top,
rgba(0,229,255,.12),
transparent 35%
),
var(--bg-primary);

display:flex;

justify-content:center;

position:relative;

overflow:hidden;

}



/* BACKGROUND GLOW */


.legal-page::before{

content:"";

position:absolute;

width:500px;

height:500px;

top:-200px;

right:-200px;

background:
radial-gradient(
circle,
rgba(139,92,246,.25),
transparent 70%
);

filter:blur(80px);

}



/* CONTAINER */


.legal-container{

position:relative;

z-index:2;

width:100%;

max-width:1100px;

padding:70px;

background:

linear-gradient(
135deg,
rgba(255,255,255,.08),
rgba(255,255,255,.03)
);

border:

1px solid

rgba(255,255,255,.15);


backdrop-filter:blur(20px);


border-radius:30px;


box-shadow:

0 30px 100px

rgba(0,0,0,.55);


}



/* TITLE */


.legal-container h1{

font-family:Poppins, sans-serif;

font-size:

clamp(45px,6vw,75px);


font-weight:800;


letter-spacing:-2px;


background:

linear-gradient(
90deg,
#ffffff,
#00E5FF
);


-webkit-background-clip:text;

-webkit-text-fill-color:transparent;


margin-bottom:15px;


}



/* UPDATED DATE */


.legal-container > p:first-of-type{


color:#00E5FF;


font-size:14px;


letter-spacing:2px;


text-transform:uppercase;


margin-bottom:60px;


}



/* SECTION HEADINGS */


.legal-container h2{


font-size:28px;


font-weight:700;


color:#ffffff;


margin-top:45px;


margin-bottom:18px;


display:flex;


align-items:center;


gap:15px;


}



.legal-container h2::before{


content:"";


width:45px;


height:2px;


background:

linear-gradient(
90deg,
#00E5FF,
#8B5CF6
);


}



/* TEXT */


.legal-container p{


font-family:Inter,sans-serif;


font-size:17px;


line-height:1.9;


color:#A7B0C0;


}



/* BUTTON */


.legal-container .btn-primary{


margin-top:50px;


padding:16px 45px;


border-radius:50px;


background:

linear-gradient(
135deg,
#00E5FF,
#8B5CF6
);


color:#000;


font-weight:700;


text-decoration:none;


display:inline-flex;


transition:.4s ease;


box-shadow:

0 10px 40px

rgba(0,229,255,.25);


}



.legal-container .btn-primary:hover{


transform:

translateY(-8px);


box-shadow:

0 20px 60px

rgba(0,229,255,.45);


}



/* =========================================
MOBILE
========================================= */


@media(max-width:768px){



.legal-page{


padding:

110px 15px 60px;


}



.legal-container{


padding:35px 25px;


border-radius:22px;


}



.legal-container h1{


font-size:42px;


}



.legal-container h2{


font-size:22px;


}



.legal-container p{


font-size:15px;


line-height:1.8;


}



}


/* ==========================
SIVANATHI PRODUCTIONS
THANK YOU PAGE
========================== */


.thank-page{

min-height:100vh;

display:flex;

align-items:center;

justify-content:center;

padding:40px 20px;

background:

radial-gradient(
circle at top,
rgba(0,229,255,.15),
transparent 40%
),

var(--bg-primary);

}



.thank-container{

max-width:700px;

text-align:center;

padding:60px 40px;

background:

rgba(255,255,255,.05);

border:

1px solid rgba(255,255,255,.15);

border-radius:30px;

backdrop-filter:blur(20px);

}



.thank-icon{

width:90px;

height:90px;

margin:auto;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

font-size:45px;

font-weight:700;

background:var(--accent);

color:#000;

}



.thank-container h1{

font-size:70px;

margin:30px 0 10px;

color:#fff;

}



.thank-container h2{

font-size:28px;

color:var(--accent);

}



.thank-container p{

font-size:18px;

line-height:1.8;

color:var(--text-light);

margin:25px 0 40px;

}



@media(max-width:768px){


.thank-container{

padding:40px 20px;

}


.thank-container h1{

font-size:50px;

}


.thank-container h2{

font-size:22px;

}


}










/* =========================================
SIVANATHI PRODUCTIONS
PREMIUM GALLERY SYSTEM
========================================= */


/* ==========================
GALLERY HERO
========================== */


.gallery-hero{

min-height:55vh;

display:flex;

align-items:center;

justify-content:center;

text-align:center;

padding:150px 20px 80px;

background:

radial-gradient(
circle at top,
rgba(0,229,255,.15),
transparent 45%
),

var(--bg-primary);

}



.gallery-hero h1{

font-size:

clamp(45px,6vw,80px);

font-weight:800;

letter-spacing:-2px;

margin-bottom:20px;


background:

linear-gradient(
90deg,
#ffffff,
#00E5FF
);


-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}



.gallery-hero p{

max-width:750px;

margin:auto;

font-size:18px;

line-height:1.8;

color:var(--text-light);

}





/* ==========================
GALLERY SECTION
========================== */


.gallery-section{

padding:80px 20px 120px;

background:var(--bg-primary);

}






/* ==========================
FILTER BUTTONS
========================== */


.gallery-filter{

display:flex;

justify-content:center;

align-items:center;

flex-wrap:wrap;

gap:15px;

margin-bottom:60px;

}



.gallery-btn{


padding:12px 28px;

border-radius:50px;


border:

1px solid rgba(255,255,255,.15);


background:

rgba(255,255,255,.05);


color:#fff;


cursor:pointer;


font-size:15px;


transition:.35s ease;


}



.gallery-btn:hover,
.gallery-btn.active{


background:

linear-gradient(
135deg,
#00E5FF,
#8B5CF6
);


color:#000;


border-color:transparent;


transform:translateY(-3px);

}





/* ==========================
GALLERY GRID
========================== */


.gallery-grid{


display:grid;


grid-template-columns:

repeat(
auto-fit,
minmax(260px,1fr)
);


gap:35px;


}






/* ==========================
GALLERY CARD
========================== */


.gallery-card{


position:relative;


overflow:hidden;


border-radius:25px;


background:

rgba(255,255,255,.05);


border:

1px solid rgba(255,255,255,.12);


transition:.45s ease;


}



.gallery-card:hover{


transform:

translateY(-12px);


box-shadow:

0 25px 60px

rgba(0,0,0,.45);


}





.gallery-card img{


width:100%;


height:380px;


object-fit:cover;


display:block;


transition:.5s ease;


}




.gallery-card:hover img{


transform:scale(1.08);


}






/* ==========================
OVERLAY INFO
========================== */


.gallery-info{


padding:25px;


background:

linear-gradient(
180deg,
transparent,
rgba(0,0,0,.85)
);


position:absolute;


bottom:0;


left:0;


right:0;


}




.gallery-info h3{


font-size:22px;


color:#fff;


margin-bottom:8px;


}



.gallery-info p{


font-size:15px;


color:#00E5FF;


}






/* ==========================
HIDDEN FILTER ITEMS
========================== */


.gallery-card.hide{


display:none;


}






/* ==========================
MOBILE
========================== */


@media(max-width:768px){



.gallery-hero{


padding:

120px 20px 70px;


}



.gallery-hero p{


font-size:16px;


}




.gallery-section{


padding:

60px 15px 80px;


}



.gallery-filter{


gap:10px;


}



.gallery-btn{


padding:

10px 20px;


font-size:14px;


}



.gallery-card img{


height:330px;


}



}



/* ==========================
GALLERY PREVIEW
========================== */


.gallery-preview{

background:

linear-gradient(
180deg,
transparent,
rgba(0,229,255,.05)
);

}





/* ==========================
GALLERY GRID
========================== */


.gallery-preview-grid{


display:grid;


grid-template-columns:

repeat(3,1fr);


gap:30px;


margin-top:50px;


}







/* ==========================
PREVIEW CARD
========================== */


.preview-card{


position:relative;


overflow:hidden;


border-radius:25px;


border:

1px solid rgba(255,255,255,.12);


aspect-ratio:3 / 4;


background:#08090D;


}







/* ==========================
IMAGE
========================== */


.preview-card img{


width:100%;


height:100%;


object-fit:cover;


display:block;


transition:.5s ease;


}




.preview-card:hover img{


transform:scale(1.08);


}







/* ==========================
CONTENT OVERLAY
========================== */


.preview-content{


position:absolute;


bottom:0;


left:0;


right:0;


padding:30px;


background:


linear-gradient(

180deg,

transparent,

rgba(0,0,0,.90)

);


}







.preview-content h3{


color:#ffffff;


font-size:28px;


margin-bottom:8px;


}




.preview-content p{


color:#00E5FF;


font-size:15px;


}







/* ==========================
BUTTON
========================== */


.gallery-button{


text-align:center;


margin-top:50px;


}







/* ==========================
TABLET & MOBILE
========================== */


@media(max-width:900px){



.gallery-preview-grid{


grid-template-columns:

repeat(2,1fr);


}



}





@media(max-width:600px){



.gallery-preview-grid{


grid-template-columns:

1fr;


}



.preview-content{


padding:25px;


}



.preview-content h3{


font-size:24px;


}



}





























/* ==========================
PORTFOLIO HIGHLIGHTS
========================== */


.highlight-grid{

display:grid;

grid-template-columns:
repeat(4,1fr);

gap:30px;

}



.highlight-card{

padding:35px;

background:
rgba(255,255,255,.05);

border:
1px solid rgba(255,255,255,.12);

border-radius:20px;

transition:.4s ease;

}



.highlight-card:hover{

transform:translateY(-8px);

border-color:#00E5FF;

}



.highlight-card i{

font-size:35px;

color:#00E5FF;

margin-bottom:20px;

}



.highlight-card h3{

color:#fff;

font-size:22px;

margin-bottom:15px;

}



.highlight-card p{

color:var(--text-light);

line-height:1.7;

}



@media(max-width:1000px){

.highlight-grid{

grid-template-columns:
repeat(2,1fr);

}

}



@media(max-width:600px){

.highlight-grid{

grid-template-columns:
1fr;

}

}














/* ==========================
PORTFOLIO STATS
========================== */


.portfolio-stats{

padding:90px 20px;

background:
linear-gradient(
180deg,
#08090D,
#101827
);

}



.stats-grid{

display:grid;

grid-template-columns:
repeat(4,1fr);

gap:30px;

}



.stat-box{

text-align:center;

padding:35px;

border-radius:20px;

background:
rgba(255,255,255,.05);

border:
1px solid rgba(255,255,255,.12);

}



.stat-box h2{

font-size:55px;

font-weight:800;

background:

linear-gradient(
90deg,
#ffffff,
#00E5FF
);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

margin-bottom:10px;

}



.stat-box p{

color:#A7B0C0;

font-size:17px;

}



@media(max-width:900px){


.stats-grid{

grid-template-columns:
repeat(2,1fr);

}


}



@media(max-width:600px){


.stats-grid{

grid-template-columns:
1fr;

}


}









/* ==========================
COPY PROTECTION
========================== */

body{
    user-select:none;
    -webkit-user-select:none;
}








img{

    user-select:none;

    -webkit-user-drag:none;

}






/* ==========================
   QUALITY STANDARDS
========================== */

.quality-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:30px;
    margin-top:60px;
}

.quality-card{
    background:#111;
    border:1px solid rgba(255,255,255,.08);
    border-radius:18px;
    padding:35px 30px;
    text-align:center;
    transition:.35s ease;
}

.quality-card:hover{
    transform:translateY(-8px);
    border-color:#00E5FF;
    box-shadow:0 15px 40px rgba(0,229,255,.15);
}

.quality-card i{
    font-size:42px;
    color:#00E5FF;
    margin-bottom:20px;
}

.quality-card h3{
    color:#fff;
    margin-bottom:12px;
    font-size:1.2rem;
}

.quality-card p{
    color:#bdbdbd;
    line-height:1.7;
    margin:0;
}




/* ===================================
ABOUT PAGE
=================================== */

/* OUR STORY */

.about-story-content{
    max-width:900px;
    margin:60px auto 0;
    text-align:center;
}

.about-story-content p{
    color:#bdbdbd;
    font-size:1.05rem;
    line-height:1.9;
    margin-bottom:25px;
}


/* MISSION & VISION */

.mission-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:30px;
    margin-top:60px;
}

.mission-card{
    background:#111;
    border:1px solid rgba(255,255,255,.08);
    border-radius:18px;
    padding:40px 35px;
    transition:.35s;
}

.mission-card:hover{
    transform:translateY(-8px);
    border-color:#00E5FF;
    box-shadow:0 20px 40px rgba(0,229,255,.15);
}

.mission-card i{
    font-size:42px;
    color:#00E5FF;
    margin-bottom:20px;
}

.mission-card h3{
    color:#fff;
    margin-bottom:15px;
}

.mission-card p{
    color:#bdbdbd;
    line-height:1.8;
}


/* TEAM */

.team-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:30px;
    margin-top:60px;
}

.team-card{
    background:#111;
    border:1px solid rgba(255,255,255,.08);
    border-radius:18px;
    padding:35px 30px;
    text-align:center;
    transition:.35s;
}

.team-card:hover{
    transform:translateY(-8px);
    border-color:#00E5FF;
    box-shadow:0 20px 40px rgba(0,229,255,.15);
}

.team-card i{
    font-size:42px;
    color:#00E5FF;
    margin-bottom:18px;
}

.team-card h3{
    color:#fff;
    margin-bottom:12px;
}

.team-card p{
    color:#bdbdbd;
    line-height:1.7;
}


/* STUDIO */

.studio-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:30px;
    margin-top:60px;
}

.studio-card{
    background:#111;
    border:1px solid rgba(255,255,255,.08);
    border-radius:18px;
    padding:35px;
    transition:.35s;
}

.studio-card:hover{
    transform:translateY(-8px);
    border-color:#00E5FF;
    box-shadow:0 20px 40px rgba(0,229,255,.15);
}

.studio-card i{
    font-size:42px;
    color:#00E5FF;
    margin-bottom:20px;
}

.studio-card h3{
    color:#fff;
    margin-bottom:15px;
}

.studio-card p{
    color:#bdbdbd;
    line-height:1.8;
}


/* VALUES */

.values-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:30px;
    margin-top:60px;
}

.value-card{
    background:#111;
    border:1px solid rgba(255,255,255,.08);
    border-radius:18px;
    padding:35px 25px;
    text-align:center;
    transition:.35s;
}

.value-card:hover{
    transform:translateY(-8px);
    border-color:#00E5FF;
    box-shadow:0 20px 40px rgba(0,229,255,.15);
}

.value-card i{
    font-size:40px;
    color:#00E5FF;
    margin-bottom:18px;
}

.value-card h3{
    color:#fff;
    margin-bottom:12px;
}

.value-card p{
    color:#bdbdbd;
    line-height:1.7;
}


/* MOBILE */

@media(max-width:768px){

    .about-story-content{
        margin-top:40px;
        text-align:left;
    }

    .mission-grid,
    .team-grid,
    .studio-grid,
    .values-grid{
        grid-template-columns:1fr;
        gap:20px;
        margin-top:40px;
    }

}










/* ==========================
CLIENT TESTIMONIAL SUBMISSION
========================== */


.testimonials{

padding:100px 8%;

background:#08090d;

}



.testimonial-form{

max-width:700px;

margin:50px auto 0;

padding:40px;

background:rgba(255,255,255,0.04);

border:1px solid rgba(255,255,255,.15);

border-radius:25px;

backdrop-filter:blur(10px);

}



.testimonial-form input,
.testimonial-form textarea{

width:100%;

padding:15px 20px;

margin-bottom:20px;

background:#11141c;

border:1px solid rgba(255,255,255,.2);

border-radius:12px;

color:white;

font-size:16px;

outline:none;

transition:.3s;

}



.testimonial-form input:focus,
.testimonial-form textarea:focus{

border-color:var(--accent);

box-shadow:0 0 15px rgba(0,229,255,.25);

}



.testimonial-form textarea{

height:150px;

resize:none;

}



.testimonial-form button{

padding:15px 40px;

border:none;

border-radius:50px;

background:var(--accent);

color:#000;

font-weight:600;

font-size:16px;

cursor:pointer;

transition:.3s;

}



.testimonial-form button:hover{

transform:translateY(-5px);

box-shadow:0 15px 30px rgba(0,229,255,.35);

}



/* REVIEW CARDS DISPLAY */


.testimonial-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:30px;

margin-top:60px;

}



.testimonial-card{

padding:35px;

background:rgba(255,255,255,.03);

border:1px solid rgba(255,255,255,.15);

border-radius:20px;

}



.testimonial-card p{

color:var(--text-light);

line-height:1.8;

font-size:16px;

}



.testimonial-card h3{

margin-top:20px;

font-size:20px;

}



.testimonial-card span{

color:var(--accent);

font-size:14px;

}



@media(max-width:900px){


.testimonial-grid{

grid-template-columns:1fr;

}


.testimonial-form{

padding:25px;

}


}








/* ==========================
PLATFORM MARQUEE
========================== */


.platforms{

padding:50px 0;

background:#050505;

overflow:hidden;

}



.platform-title{

text-align:center;

font-size:13px;

letter-spacing:4px;

color:var(--accent);

margin-bottom:35px;

}



.marquee{

overflow:hidden;

width:100%;

}



.marquee-track{

display:flex;

gap:80px;

width:max-content;

animation:scrollPlatforms 25s linear infinite;

}



.marquee-track span{

font-size:32px;

font-weight:600;

color:rgba(255,255,255,.7);

white-space:nowrap;

transition:.3s;

}



.marquee-track span:hover{

color:var(--accent);

}



@keyframes scrollPlatforms{


from{

transform:translateX(0);

}


to{

transform:translateX(-50%);

}


}



@media(max-width:768px){


.marquee-track{

gap:40px;

}


.marquee-track span{

font-size:22px;

}


}





.input-group small{

display:block;

margin-top:8px;

color:rgba(255,255,255,.5);

font-size:13px;

line-height:1.5;

}