/* ==========================================================
   CampShopping Landing
   responsive.css
   Version : 1.0
==========================================================*/


/* ===============================
   Large Desktop (1600px+)
================================*/

@media (min-width:1600px){

    .glass{

        max-width:560px;

        padding:70px;

    }

    .logo{

        width:260px;

    }

    h1{

        font-size:42px;

    }

    .hero p{

        font-size:19px;

    }

}


/* ===============================
      Laptop
================================*/

@media (max-width:1200px){

    .glass{

        width:500px;

    }

}


/* ===============================
        Tablet
================================*/

@media (max-width:992px){

    .glass{

        width:90%;

        max-width:470px;

        padding:45px 35px;

    }

}


/* ===============================
       Mobile
================================*/

@media (max-width:768px){

    body{

        overflow:auto;

    }

    .hero{

        padding:24px;

    }

    .glass{

        width:100%;

        padding:40px 24px;

        border-radius:24px;

        backdrop-filter:blur(10px);

    }

    .logo{

        width:170px;

    }

    h1{

        font-size:30px;

        line-height:1.7;

    }

    .hero p{

        font-size:15px;

        line-height:2;

    }

    .buttons{

        margin-top:35px;

        gap:14px;

    }

    .btn{

        height:58px;

        font-size:16px;

    }

}


/* ===============================
      Small Mobile
================================*/

@media (max-width:480px){

    .glass{

        padding:34px 20px;

    }

    .logo{

        width:145px;

    }

    h1{

        font-size:26px;

    }

    .hero p{

        font-size:14px;

    }

    .btn{

        height:54px;

        font-size:15px;

    }

}


/* ===============================
      Very Small Phone
================================*/

@media (max-width:360px){

    h1{

        font-size:22px;

    }

    .hero p{

        font-size:13px;

    }

    .btn{

        font-size:14px;

    }

}


/* ===============================
      Landscape Phones
================================*/

@media (max-height:500px){

    body{

        overflow:auto;

    }

    .hero{

        padding:40px 20px;

    }

    .glass{

        margin:30px auto;

    }

    .logo{

        width:120px;

    }

    h1{

        margin-top:18px;

        font-size:24px;

    }

    .hero p{

        margin-top:8px;

    }

    .buttons{

        margin-top:20px;

    }

}

/* ===============================
      Touch Devices
================================*/

@media (hover:none){

    .btn:hover{

        transform:none;

        box-shadow:none;

    }

    .glass:hover{

    transform:none;

}

}


/* ===============================
      Safe Area (iPhone)
================================*/

.hero{

    padding-left:max(20px,env(safe-area-inset-left));

    padding-right:max(20px,env(safe-area-inset-right));

    padding-top:max(20px,env(safe-area-inset-top));

    padding-bottom:max(24px,env(safe-area-inset-bottom));

}


/* ===============================
      Clamp Fonts
================================*/

h1{

    font-size:clamp(24px,4vw,42px);

}

.hero p{

    font-size:clamp(14px,2vw,18px);

}

.btn{

    font-size:clamp(15px,2vw,18px);

}


/* ===============================
      Prevent Horizontal Scroll
================================*/

html,
body{

    max-width:100%;

    overflow-x:hidden;

}

img{

    max-width:100%;

    height:auto;

    display:block;

}

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

    .logo{

        animation:none;

    }

    .glass{

        animation:none;

    }

}