/*==========================================================

DAOODY WEBSITE

responsive.css

Desktop
Laptop
Tablet
Mobile

==========================================================*/


/*==========================================================

LARGE DESKTOP

1600px

==========================================================*/

@media (max-width:1600px){

.hero{

gap:60px;

}

.hero h1{

font-size:4rem;

}

.container{

width:min(94%,1280px);

}

}




/*==========================================================

DESKTOP

1400px

==========================================================*/

@media (max-width:1400px){

.hero{

grid-template-columns:1fr 1fr;

gap:50px;

}

.hero-left img{

max-width:470px;

}

.section-title{

font-size:2.6rem;

}

.services-grid{

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

gap:25px;

}

.gallery-card{

min-width:320px;

}

}




/*==========================================================

LAPTOP

1200px

==========================================================*/

@media (max-width:1200px){

.hero{

grid-template-columns:1fr;

text-align:center;

padding-top:160px;

}

.hero-right{

align-items:center;

}

.hero-left{

order:2;

}

.hero-right{

order:1;

}

.hero-left img{

max-width:420px;

}

.about-grid{

grid-template-columns:1fr;

gap:60px;

}

.stats-grid{

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

}

.services-grid{

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

}

.contact-grid{

grid-template-columns:1fr;

}

.footer-grid{

grid-template-columns:1fr 1fr;

}

}




/*==========================================================

TABLET

992px

==========================================================*/

@media (max-width:992px){

.header{

height:80px;

}

.nav{

display:none;

}

.menu-btn{

display:flex;

}

.hero{

padding-top:140px;

}

.hero h1{

font-size:3.2rem;

}

.hero h2{

font-size:1.2rem;

}

.hero p{

font-size:1rem;

}

.logo img{

width:160px;

}

.section-title{

font-size:2.2rem;

}

.gallery-card{

min-width:290px;

}

.partner-item img{

height:55px;

}

.footer-grid{

grid-template-columns:1fr;

}

}


.hero{
    grid-template-columns:1fr;
    justify-items:center;
}

.hero-left{
    width:100%;
}

.hero-left img{
    width:100%;
    max-width:100%;
}
/*==========================================================

MOBILE

768px

==========================================================*/

@media (max-width:768px){

section{

padding:80px 0;

}

.container{

width:92%;

}

.hero{

padding-top:120px;

gap:40px;

}

.hero h1{

font-size:2.6rem;

line-height:1.2;

}

.hero h2{

font-size:1.1rem;

}

.hero p{

font-size:.95rem;

line-height:1.9;

}

.hero-logo{

width:180px;

}

.hero-left img{

max-width:320px;

}

.about-grid{

gap:40px;

}

.stats-grid{

grid-template-columns:1fr;

gap:20px;

}

.services-grid{

grid-template-columns:1fr;

gap:24px;

}

.service-card{

padding:30px;

}

.gallery-wrapper{

gap:20px;

}

.gallery-card{

min-width:260px;

}

.contact-grid{

gap:35px;

}

.contact-card{

padding:30px;

}

.footer{

padding:70px 0 25px;

}

.footer-bottom{

flex-direction:column;

text-align:center;

}

.contact-buttons{

flex-direction:column;

}

.contact-buttons a{

width:100%;

justify-content:center;

}

.primary-btn{

width:100%;

justify-content:center;

}

.btn-whatsapp{

width:100%;

justify-content:center;

}

.back-top{

width:50px;

height:50px;

right:20px;

bottom:20px;

}

}



/*==========================================================

SMALL MOBILE

576px

==========================================================*/

@media (max-width:576px){

html{

font-size:15px;

}

.header{

height:72px;

}

.logo img{

width:145px;

}

.hero{

padding-top:100px;

}

.hero h1{

font-size:2.1rem;

}

.hero h2{

font-size:1rem;

}

.hero p{

font-size:.9rem;

}

.hero-logo{

width:150px;

}

.hero-left img{

max-width:260px;

}

.section-title{

font-size:1.8rem;

}

.stat-number{

font-size:2.5rem;

}

.service-card{

padding:25px;

}

.service-icon{

width:60px;

height:60px;

font-size:24px;

}

.gallery-card{

min-width:230px;

}

.gallery-image{

height:210px;

}

.partner-item img{

height:42px;

}

.contact-icon{

width:46px;

height:46px;

font-size:18px;

}

.footer-logo{

width:170px;

}

.socials{

justify-content:center;

flex-wrap:wrap;

}

}




/*==========================================================

EXTRA SMALL DEVICES

400px

==========================================================*/

@media (max-width:400px){

.container{

width:94%;

}

.hero h1{

font-size:1.8rem;

}

.hero-left img{

max-width:220px;

}

.hero-logo{

width:130px;

}

.section-title{

font-size:1.5rem;

}

.gallery-card{

min-width:200px;

}

.primary-btn{

padding:15px 20px;

font-size:.9rem;

}

.btn-whatsapp{

padding:15px 20px;

font-size:.9rem;

}

.back-top{

width:45px;

height:45px;

}

}

/*==========================================================

MOBILE MENU

==========================================================*/

@media (max-width:992px){

.mobile-menu{

position:fixed;

top:0;

right:-100%;

width:320px;

max-width:85%;

height:100vh;

background:var(--surface-card);

box-shadow:var(--shadow-xl);

padding:100px 30px 40px;

display:flex;

flex-direction:column;

gap:25px;

transition:.4s ease;

z-index:9999;

overflow-y:auto;

}

.mobile-menu.active{

right:0;

}

.mobile-menu a{

font-size:1.05rem;

font-weight:600;

color:var(--heading);

padding:12px 0;

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

transition:var(--transition);

}

.mobile-menu a:hover{

color:var(--primary);

padding-right:10px;

}

.mobile-overlay{

position:fixed;

inset:0;

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

opacity:0;

visibility:hidden;

transition:.4s;

z-index:9998;

}

.mobile-overlay.active{

opacity:1;

visibility:visible;

}

.menu-btn{

display:flex;

align-items:center;

justify-content:center;

width:46px;

height:46px;

border-radius:12px;

background:var(--surface-card);

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

cursor:pointer;

}

}



/*==========================================================

LANDSCAPE MOBILE

==========================================================*/

@media (max-height:600px) and (orientation:landscape){

.hero{

min-height:auto;

padding-top:120px;

padding-bottom:80px;

}

.hero-left img{

max-width:260px;

}

section{

padding:70px 0;

}

}



/*==========================================================

LARGE SCREENS

==========================================================*/

@media (min-width:1800px){

.container{

max-width:1500px;

}

.hero h1{

font-size:5.5rem;

}

.hero-left img{

max-width:620px;

}

}



/*==========================================================

PRINT

==========================================================*/

@media print{

.header,

.back-top,

.loader,

.mobile-menu,

.mobile-overlay,

.actions{

display:none !important;

}

body{

background:#fff;

color:#000;

}

section{

padding:30px 0;

page-break-inside:avoid;

}

a{

text-decoration:none;

color:#000;

}

}



/*==========================================================

REDUCED MOTION

==========================================================*/

@media (prefers-reduced-motion:reduce){

*{

animation:none !important;

transition:none !important;

scroll-behavior:auto !important;

}

}



/*==========================================================

HIGH CONTRAST

==========================================================*/

@media (prefers-contrast:more){

:root{

--border:#000;

}

button,

a{

border:2px solid currentColor;

}

}



/*==========================================================

TOUCH DEVICES

==========================================================*/

@media (hover:none){

.service-card:hover,

.gallery-card:hover,

.stat-card:hover,

.primary-btn:hover,

.btn-whatsapp:hover{

transform:none;

}

}



/*==========================================================

END OF RESPONSIVE.CSS

==========================================================*/

@media(max-width:768px){

.gallery-card{

    flex:0 0 280px;

}

.partner-item{

    flex:0 0 140px;

    height:90px;

}






@media (max-width:992px){

    .menu-toggle{

        display:block;

    }

    .nav{

        position:fixed;

        top:80px;

        right:-100%;

        width:280px;

        height:calc(100vh - 80px);

        background:var(--surface);

        display:flex;

        flex-direction:column;

        align-items:center;

        justify-content:flex-start;

        gap:25px;

        padding-top:40px;

        transition:.35s;

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

    }

    .nav.active{

        right:0;

    }

}



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

@media (max-width:992px){

    .nav{

        background:var(--surface);

    }

    .nav a{

        color:var(--heading);

        font-size:18px;

        font-weight:700;

        width:100%;

        text-align:center;

        padding:16px 0;

    }

    .nav a:hover{

        color:var(--primary);

    }

}
@media (max-width:992px){

    .menu-toggle{

        display:flex;

        align-items:center;

        justify-content:center;

    }

}
}
@media (max-width:992px){

    .menu-overlay{

        position:fixed;

        inset:0;

        background:transparent;

        display:none;

        z-index:999;

    }

    .menu-overlay.active{

        display:block;

    }

    .nav{

        z-index:1000;

    }

}