/*==================================================
    RESPONSIVE.CSS
    Dr. Priya Panchal Portfolio
===================================================*/

/* ==========================================
        LARGE DESKTOP (1600px+)
========================================== */

@media (min-width:1600px){

    section{
        padding:120px 12%;
    }

    .hero{
        gap:100px;
    }

    .hero-content h1{
        font-size:82px;
    }

    .hero-content h2{
        font-size:42px;
    }

    .hero-image img{
        max-width:650px;
    }

}

/* ==========================================
        LAPTOPS
========================================== */

@media (max-width:1400px){

    .hero-content h1{
        font-size:60px;
    }

    .hero-image img{
        max-width:480px;
    }

}

/* ==========================================
        TABLETS
========================================== */

@media (max-width:1100px){

    section{
        padding:90px 6%;
    }

    .hero{
        grid-template-columns:1fr;
        text-align:center;
        gap:60px;
        padding-top:140px;
    }

    .hero-image{
        order:-1;
    }

    .hero-content p{
        margin:auto;
    }

    .hero-buttons{
        justify-content:center;
    }

    .about{
        grid-template-columns:1fr;
        text-align:center;
        gap:60px;
    }

    .about-image{
        order:-1;
    }

    .features{
        grid-template-columns:repeat(2,1fr);
    }

    .service-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .testimonial-slider{
        grid-template-columns:1fr;
    }

    .stats{
        grid-template-columns:repeat(2,1fr);
    }

}

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

@media (max-width:900px){

    header{
        padding:15px 20px;
    }

    .navbar{

        padding:18px 25px;

        border-radius:18px;

        flex-wrap:wrap;

    }

    .navbar ul{

        width:100%;

        display:flex;

        flex-direction:column;

        align-items:center;

        gap:18px;

        margin-top:20px;

        display:none;

    }

    .navbar.active ul{

        display:flex;

    }

    .logo{

        font-size:22px;

    }

    .btn-nav{

        display:none;

    }

    .menu-toggle{

        display:flex;

        flex-direction:column;

        justify-content:center;

        gap:5px;

        cursor:pointer;

    }

    .menu-toggle span{

        width:28px;

        height:3px;

        border-radius:20px;

        background:var(--dark);

        transition:.35s;

    }

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

        transform:rotate(45deg) translateY(11px);

    }

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

        opacity:0;

    }

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

        transform:rotate(-45deg) translateY(-11px);

    }

}

/* ==========================================
        LARGE PHONES
========================================== */

@media (max-width:768px){

    .hero-content h1{

        font-size:48px;

    }

    .hero-content h2{

        font-size:28px;

    }

    .hero-content p{

        font-size:16px;

    }

    .hero-image img{

        width:85%;

    }

    .service-grid{

        grid-template-columns:1fr;

    }

    .stats{

        grid-template-columns:1fr;

        gap:35px;

    }

    .features{

        grid-template-columns:1fr;

    }

    .contact form{

        padding:35px;

    }

}

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

@media (max-width:576px){

    section{

        padding:75px 20px;

    }

    .navbar{

        padding:15px;

    }

    .logo{

        font-size:20px;

    }

    .hero{

        padding-top:120px;

    }

    .hero-content h1{

        font-size:38px;

    }

    .hero-content h2{

        font-size:22px;

    }

    .hero-content p{

        font-size:15px;

        line-height:1.8;

    }

    .hero-buttons{

        flex-direction:column;

        align-items:center;

    }

    .btn-primary,
    .btn-secondary{

        width:100%;

        max-width:300px;

        text-align:center;

    }

    .about-content h2,
    .services h2,
    .testimonial h2,
    .contact h2{

        font-size:32px;

    }

    .about-image img{

        max-width:320px;

    }

    .card{

        padding:30px 22px;

    }

    .card h3{

        font-size:22px;

    }

    .testimonial-card{

        padding:30px;

    }

    .testimonial-card p{

        font-size:15px;

    }

    .contact form{

        padding:25px;

    }

    .contact input,
    .contact textarea{

        padding:15px;

    }

    .stats{

        margin:60px 20px;

        border-radius:25px;

    }

    footer{

        padding:25px;

        font-size:14px;

    }

}

/* ==========================================
        SMALL DEVICES
========================================== */

@media (max-width:400px){

    .hero-content h1{

        font-size:32px;

    }

    .hero-content h2{

        font-size:20px;

    }

    .hero-image img{

        width:100%;

    }

    .logo{

        font-size:18px;

    }

    .card{

        padding:25px 18px;

    }

    .stats h1{

        font-size:40px;

    }

}

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

@media (max-height:500px){

    .hero{

        min-height:auto;

        padding-top:140px;

        padding-bottom:60px;

    }

}

/* ==========================================
        TOUCH DEVICES
========================================== */

@media (hover:none){

    .card:hover{

        transform:none;

    }

    .btn-primary:hover,
    .btn-secondary:hover,
    .btn-nav:hover{

        transform:none;

    }

    .testimonial-card:hover{

        transform:none;

    }

}

/* ==========================================
        REDUCE MOTION
========================================== */

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

    *{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}