/* ==========================
SIVANATHI PRODUCTIONS
RESPONSIVE SYSTEM
========================== */


/* ==========================
TABLET
========================== */

@media(max-width:1024px){


.navigation ul{

gap:25px;

}


.logo-main{

font-size:22px;

}



/* MOBILE DROPDOWN */

.dropdown-menu{

position:static;

width:100%;

display:none;

background:transparent;

border:none;

box-shadow:none;

opacity:1;

visibility:visible;

transform:none;

}


.dropdown.active .dropdown-menu{

display:block;

}


.dropdown-menu a{

text-align:center;

}



.mouse-glow{

display:none;

}


}




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


@media(max-width:1024px){



.navigation{

position:fixed;

top:80px;

left:0;

width:100%;

background:#08090D;

padding:40px 0;

transform:translateY(-120%);

opacity:0;

visibility:hidden;

transition:.4s ease;

z-index:999;

}



.navigation.active{

transform:translateY(0);

opacity:1;

visibility:visible;

}




.navigation ul{

flex-direction:column;

align-items:center;

gap:30px;

}




.menu-toggle{

display:block;

cursor:pointer;

}




.menu-toggle span{

transition:.3s;

}




.menu-toggle.active span:nth-child(1){

transform:

rotate(45deg)
translate(5px,5px);

}




.menu-toggle.active span:nth-child(2){

opacity:0;

}




.menu-toggle.active span:nth-child(3){

transform:

rotate(-45deg)
translate(5px,-5px);

}




body.menu-open{

overflow:hidden;

}



}





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


@media(max-width:768px){



html,
body{

width:100%;

overflow-x:hidden;

}




.container{

width:92%;

}




.nav-container{

height:80px;

}




.brand-area{

gap:8px;

}




.owner-photo{

width:38px !important;

height:38px !important;

}




.logo-main{

font-size:20px;

}




.logo-sub{

font-size:10px;

}




/* HERO */


.hero{

height:100vh;

}



.hero h1{

font-size:45px;

}



.hero-description{

font-size:16px;

}



.hero-buttons{

flex-direction:column;

width:220px;

}



/* INTRO */


.intro-grid,
.service-cards,
.process-grid,
.why-grid,
.service-large-grid,
.translation-grid,
.workflow-line,
.portfolio-grid,
.about-grid,
.mission-grid,
.studio-grid,
.choose-list,
.number-grid,
.contact-grid{


display:flex;

flex-direction:column;

width:100%;

gap:25px;

}



.intro h2{

font-size:40px;

}



.section-title h2{

font-size:38px;

}




/* PAGE HERO */


.page-hero{

height:auto;

min-height:500px;

padding:130px 0 80px;

}



.page-hero h1{

font-size:45px;

line-height:1.15;

}



.page-hero span{

font-size:17px;

}




/* SERVICE */


.service-box{

padding:30px;

}



.service-contact h2{

font-size:40px;

}




/* PORTFOLIO */


.project-card{

width:100%;

}



.project-image{

height:220px;

}



.portfolio-filter{

display:flex;

flex-wrap:wrap;

justify-content:center;

gap:10px;

width:100%;

}



.filter-btn{

padding:10px 16px;

font-size:14px;

white-space:nowrap;

}




.stats-grid{

display:flex;

flex-direction:column;

gap:40px;

text-align:center;

}



.stats-grid h2{

font-size:50px;

}





/* ABOUT */


.about-grid h2{

font-size:42px;

}



.mission-card{

padding:30px;

}




.number-grid{

gap:50px;

}



.number-grid h2{

font-size:50px;

}





/* CONTACT */


.contact-info h2{

font-size:40px;

}



.contact-form-container{

padding:25px;

}



.quick-contact h2{

font-size:40px;

}





/* FOOTER */


.footer-grid{

display:flex;

flex-direction:column;

gap:40px;

}



.footer-about,
.footer-links,
.footer-contact{

width:100%;

}



.footer-links h4{

margin-bottom:20px;

}



.footer-links a{

display:block;

margin-bottom:12px;

}





/* FOOTER BOTTOM */


.footer-legal{

display:flex;

flex-direction:column;

gap:15px;

}



.footer-policy{

position:static;

order:2;

display:flex;

justify-content:center;

flex-wrap:wrap;

}



.copyright{

order:1;

text-align:center;

}





/* SOUND WAVE */


.voice-wave{

margin-top:35px;

justify-content:center;

}




}





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


@media(max-width:480px){



.logo-main{

font-size:18px;

letter-spacing:2px;

}



.logo-sub{

font-size:8px;

}



.hero h1{

font-size:35px;

}



.page-hero h1{

font-size:38px;

}



.filter-btn{

width:100%;

max-width:100%;

}



.project-image{

height:180px;

}



}