/*==========================================================
    AIZAWAKAE MOBILE.CSS
    PART 1
    RESPONSIVE SYSTEM
==========================================================*/

/*==========================================================
    1400px
==========================================================*/

@media (max-width:1400px){

    .container{
        width:min(94%,1200px);
    }

    .hero-left h1{
        font-size:72px;
    }

    .premium-wrapper{
        gap:60px;
    }

    .membership-card{
        max-width:500px;
        margin-inline:auto;
    }

    .footer-top{
        gap:50px;
    }

}


/*==========================================================
    1200px
==========================================================*/

@media (max-width:1200px){

    .container{
        width:92%;
    }

    /* HERO */

    .hero{
        padding-top:140px;
        padding-bottom:100px;
    }

    .hero-left{
        text-align:center;
    }

    .hero-left h1{
        font-size:62px;
    }

    .hero-left p{
        margin-inline:auto;
    }

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

    /* FEATURES */

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

    /* PREMIUM */

    .premium-wrapper{
        grid-template-columns:1fr;
        gap:80px;
    }

    .premium-left{
        text-align:center;
    }

    .premium-left p{
        margin-inline:auto;
    }

    .premium-list{
        align-items:center;
    }

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

    .premium-right{
        display:flex;
        justify-content:center;
    }

    /* FLOATING PREMIUM CARDS */

    .mini-card-users{
        left:-20px;
    }

    .mini-card-orders{
        right:-20px;
    }

    .mini-card-rating{
        left:10px;
    }

    /* CTA */

    .cta-box{
        padding:80px 50px;
    }

    .cta-box h2{
        font-size:48px;
    }

    /* FOOTER */

    .footer-top{
        grid-template-columns:repeat(2,1fr);
        gap:45px;
    }

}


/*==========================================================
    1024px
==========================================================*/

@media (max-width:1024px){

    /* NAVBAR */

    .navbar{
        width:95%;
        padding:14px 18px;
    }

    .logo-image{
        width:50px;
        height:50px;
    }

    .logo-image img{
        width:30px;
    }

    .logo-text h2{
        font-size:22px;
    }

    /* HERO */

    .hero-left h1{
        font-size:56px;
    }

    /* FLOATING */

    .floating-card{
        transform:scale(.92);
    }

    .floating-card-1{
        left:-80px;
    }

    .floating-card-2{
        right:-10px;
    }

    .floating-card-3{
        left:0;
    }

    /* PREMIUM */

    .premium-left h2{
        font-size:50px;
    }

    .membership-price h2{
        font-size:64px;
    }

    /* CTA */

    .cta-box h2{
        font-size:44px;
    }

    /* FOOTER */

    .footer-brand p{
        max-width:100%;
    }

}
/*==========================================================
    AIZAWAKAE MOBILE.CSS
    PART 2
    TABLET & MOBILE
==========================================================*/


/*==========================================================
    992px
==========================================================*/

@media (max-width:992px){

    /* HEADER */

    .header{
        padding:16px 0;
    }

    .navbar{
        width:94%;
        padding:14px 18px;
    }

    .desktop-menu{
        display:none;
    }

    .logo-text h2{
        font-size:20px;
    }

    /* HERO */

    .hero{

        min-height:auto;

        padding-top:150px;

        padding-bottom:90px;

    }

    .hero-wrapper{

        flex-direction:column;

        text-align:center;

    }

    .hero-left{

        width:100%;

    }

    .hero-left h1{

        font-size:52px;

        letter-spacing:-1px;

    }

    .hero-left p{

        max-width:650px;

        margin-inline:auto;

    }

    .hero-buttons{

        justify-content:center;

    }

    /* FLOATING */

    .floating-card{

        transform:scale(.88);

    }

    .floating-card-1{

        left:0;

        top:-15px;

    }

    .floating-card-2{

        right:0;

        top:150px;

    }

    .floating-card-3{

        left:50%;

        bottom:-35px;

        transform:translateX(-50%);

    }

    /* FEATURES */

    .features{

        padding:110px 0;

    }

    .section-header{

        margin-bottom:55px;

    }

    .section-header h2{

        font-size:46px;

    }

    .features-grid{

        grid-template-columns:1fr;

        gap:24px;

    }

    /* PREMIUM */

    .premium{

        padding:120px 0;

    }

    .premium-left{

        text-align:center;

    }

    .premium-left h2{

        font-size:46px;

    }

    .premium-left p{

        margin-inline:auto;

    }

    .premium-list{

        align-items:center;

    }

    .premium-buttons{

        justify-content:center;

    }

    .membership-card{

        width:100%;

        max-width:540px;

    }

    .mini-card{

        display:none;

    }

    /* CTA */

    .cta{

        padding:120px 0;

    }

    .cta-box{

        padding:70px 40px;

    }

    .cta-box h2{

        font-size:42px;

    }

    /* FOOTER */

    .footer{

        padding-top:90px;

    }

    .footer-top{

        grid-template-columns:1fr;

        text-align:center;

    }

    .footer-brand{

        display:flex;

        flex-direction:column;

        align-items:center;

    }

    .footer-social{

        justify-content:center;

    }

    .footer-links{

        align-items:center;

    }

    .footer-bottom-wrapper{

        flex-direction:column;

        justify-content:center;

        text-align:center;

    }

}


/*==========================================================
    768px
==========================================================*/

@media (max-width:768px){

    /* NAVBAR */

    .navbar{

        width:94%;

        padding:12px 16px;

        border-radius:18px;

    }

    .logo-image{

        width:46px;

        height:46px;

        border-radius:14px;

    }

    .logo-image img{

        width:28px;

    }

    .logo-text h2{

        font-size:18px;

    }

    .menu-button{

        width:46px;

        height:46px;

    }

    /* HERO */

    .hero{

        padding-top:135px;

        padding-bottom:80px;

    }

    .premium-badge{

        padding:10px 18px;

        font-size:14px;

    }

    .hero-left h1{

        font-size:44px;

    }

    .hero-left p{

        font-size:16px;

    }

    .hero-buttons{

        flex-direction:column;

        width:100%;

    }

    .primary-btn,

    .secondary-btn{

        width:100%;

        max-width:340px;

    }

    /* FLOATING */

    .floating-card{

        display:none;

    }

    /* FEATURES */

    .features{

        padding:90px 0;

    }

    .section-header h2{

        font-size:38px;

    }

    .feature-card{

        padding:28px;

        border-radius:24px;

    }

    .feature-icon{

        width:60px;

        height:60px;

        font-size:24px;

    }

    /* PREMIUM */

    .premium{

        padding:90px 0;

    }

    .premium-left h2{

        font-size:38px;

    }

    .membership-card{

        padding:30px;

        border-radius:28px;

    }

    .membership-header h3{

        font-size:28px;

    }

    .membership-price h2{

        font-size:54px;

    }

    .premium-buy{

        height:58px;

    }

    /* CTA */

    .cta{

        padding:90px 0;

    }

    .cta-box{

        padding:55px 28px;

        border-radius:28px;

    }

    .cta-box h2{

        font-size:34px;

    }

    .cta-buttons{

        flex-direction:column;

        align-items:center;

    }

    .cta-buttons a{

        width:100%;

        max-width:320px;

    }

    /* FOOTER */

    .footer{

        padding-top:70px;

    }

    .footer-bottom-links{

        flex-direction:column;

        gap:14px;

    }

    /* MENU */

    .menu{

       width:80%;

       max-width:360px;

    }

}

/*==========================================================
    AIZAWAKAE MOBILE.CSS
    PART 3
    MOBILE DEVICES
==========================================================*/


/*==========================================================
    576px
==========================================================*/

@media (max-width:576px){

    /* GENERAL */

    .container{
        width:92%;
    }

    /* HEADER */

    .header{
        padding:14px 0;
    }

    .navbar{
        width:92%;
        padding:12px 14px;
        border-radius:16px;
    }

    .logo-image{
        width:42px;
        height:42px;
    }

    .logo-image img{
        width:24px;
    }

    .logo-text h2{
        font-size:17px;
    }

    .menu-button{
        width:42px;
        height:42px;
    }

    /* HERO */

    .hero{
        padding-top:125px;
        padding-bottom:70px;
    }

    .premium-badge{
        padding:9px 16px;
        font-size:13px;
    }

    .hero-left h1{
        font-size:38px;
        line-height:1.15;
    }

    .hero-left p{
        font-size:15px;
        line-height:1.8;
    }

    .hero-buttons{
        gap:14px;
    }

    .primary-btn,
    .secondary-btn{
        max-width:100%;
        height:54px;
        font-size:15px;
    }

    /* FEATURES */

    .features{
        padding:80px 0;
    }

    .section-tag{
        font-size:13px;
        padding:9px 18px;
    }

    .section-header h2{
        font-size:32px;
    }

    .feature-card{
        padding:24px;
        border-radius:22px;
    }

    .feature-card h3{
        font-size:21px;
    }

    .feature-card p{
        font-size:15px;
    }

    /* PREMIUM */

    .premium{
        padding:80px 0;
    }

    .premium-left h2{
        font-size:34px;
    }

    .membership-card{
        padding:26px;
    }

    .membership-header{
        flex-direction:column;
        align-items:flex-start;
        gap:15px;
    }

    .membership-price h2{
        font-size:48px;
    }

    .membership-features div{
        padding:15px;
    }

    /* CTA */

    .cta{
        padding:80px 0;
    }

    .cta-box{
        padding:45px 24px;
    }

    .cta-box h2{
        font-size:30px;
    }

    .cta-box p{
        font-size:15px;
    }

    /* FOOTER */

    .footer{
        padding-top:60px;
    }

    .footer-brand h2{
        font-size:28px;
    }

    .footer-links h3{
        font-size:20px;
    }

    /* MENU */

    .menu{
        width:100%;
        right:-100%;
        border-left:none;
    }

}


/*==========================================================
    430px
==========================================================*/

@media (max-width:430px){

    .container{
        width:94%;
    }

    /* HERO */

    .hero{
        padding-top:115px;
    }

    .hero-left h1{
        font-size:34px;
    }

    .hero-left p{
        font-size:14px;
    }

    /* BUTTONS */

    .primary-btn,
    .secondary-btn{
        height:52px;
        padding:0 18px;
        font-size:14px;
        border-radius:16px;
    }

    /* FEATURES */

    .section-header h2{
        font-size:28px;
    }

    .feature-card{
        padding:22px;
    }

    .feature-icon{
        width:54px;
        height:54px;
        font-size:20px;
    }

    .feature-card h3{
        font-size:19px;
    }

    .feature-card p{
        font-size:14px;
    }

    /* PREMIUM */

    .premium-left h2{
        font-size:30px;
    }

    .membership-card{
        padding:22px;
        border-radius:22px;
    }

    .membership-header h3{
        font-size:24px;
    }

    .membership-price h2{
        font-size:42px;
    }

    .membership-features div{
        padding:14px;
        font-size:14px;
    }

    .premium-buy{
        height:54px;
        font-size:15px;
    }

    /* CTA */

    .cta-box{
        padding:40px 20px;
    }

    .cta-box h2{
        font-size:26px;
    }

    .cta-box p{
        font-size:14px;
    }

    /* FOOTER */

    .footer-social{
        flex-wrap:wrap;
    }

    .footer-bottom-links{
        gap:10px;
    }

}
/*==========================================================
    AIZAWAKAE MOBILE.CSS
    PART 4
    SMALL DEVICES
    FINAL RESPONSIVE
==========================================================*/


/*==========================================================
    390px
==========================================================*/

@media (max-width:390px){

    .navbar{
        padding:10px 12px;
    }

    .logo-image{
        width:40px;
        height:40px;
    }

    .logo-image img{
        width:22px;
    }

    .logo-text h2{
        font-size:16px;
    }

    .menu-button{
        width:40px;
        height:40px;
    }

    .hero{
        padding-top:105px;
        padding-bottom:60px;
    }

    .premium-badge{
        font-size:12px;
        padding:8px 14px;
    }

    .hero-left h1{
        font-size:30px;
    }

    .hero-left p{
        font-size:14px;
    }

    .primary-btn,
    .secondary-btn{

        height:50px;

        font-size:14px;

        border-radius:15px;

    }

    .section-header h2{
        font-size:25px;
    }

    .premium-left h2{
        font-size:28px;
    }

    .membership-card{
        padding:20px;
    }

    .membership-price h2{
        font-size:38px;
    }

    .membership-header h3{
        font-size:22px;
    }

    .cta-box{

        padding:35px 18px;

    }

    .cta-box h2{

        font-size:24px;

    }

}


/*==========================================================
    360px
==========================================================*/

@media (max-width:360px){

    .container{
        width:95%;
    }

    .hero-left h1{
        font-size:28px;
    }

    .hero-left p{
        font-size:13px;
    }

    .feature-card{
        padding:18px;
    }

    .feature-icon{

        width:50px;
        height:50px;

        font-size:18px;

    }

    .feature-card h3{
        font-size:18px;
    }

    .feature-card p{
        font-size:13px;
    }

    .membership-price h2{
        font-size:34px;
    }

    .membership-features div{
        padding:12px;
        font-size:13px;
    }

    .premium-buy{

        height:50px;

        font-size:14px;

    }

    .menu{

        width:100%;

    }

}


/*==========================================================
    320px
==========================================================*/

@media (max-width:320px){

    .navbar{
        padding:10px;
    }

    .hero-left h1{
        font-size:25px;
    }

    .hero-left p{
        font-size:12px;
    }

    .premium-badge{

        width:100%;

        justify-content:center;

    }

    .hero-buttons{

        gap:10px;

    }

    .primary-btn,
    .secondary-btn{

        height:48px;

        font-size:13px;

    }

    .section-header h2{

        font-size:22px;

    }

    .premium-left h2{

        font-size:24px;

    }

    .membership-card{

        padding:18px;

    }

    .membership-price h2{

        font-size:30px;

    }

    .membership-header h3{

        font-size:20px;

    }

    .membership-features{

        gap:12px;

    }

    .membership-features div{

        padding:10px;

        font-size:12px;

    }

    .cta-box{

        padding:30px 15px;

    }

    .cta-box h2{

        font-size:21px;

    }

    .footer-brand h2{

        font-size:24px;

    }

}


/*==========================================================
    LANDSCAPE PHONES
==========================================================*/

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

    .hero{

        min-height:auto;

        padding:120px 0 80px;

    }

    .features,
    .premium,
    .cta{

        padding:70px 0;

    }

}


/*==========================================================
    SAFE AREA (iPhone)
==========================================================*/

@supports (padding:max(0px)){

    body{

        padding-left:max(0px,env(safe-area-inset-left));
        padding-right:max(0px,env(safe-area-inset-right));
        padding-bottom:max(0px,env(safe-area-inset-bottom));

    }

}


/*==========================================================
    GLOBAL OVERFLOW FIX
==========================================================*/

html,
body{

    overflow-x:hidden;

}

img{

    max-width:100%;
    height:auto;

}

video{

    max-width:100%;
    height:auto;

}

iframe{

    max-width:100%;

}

table{

    width:100%;

    display:block;

    overflow-x:auto;

}

input,
button,
select,
textarea{

    max-width:100%;

}


/*==========================================================
    END
==========================================================*/