@media (-webkit-min-device-pixel-ratio: 1.75) {
    header .navbar {padding: 0.5rem 1rem;}
}

@media (-webkit-min-device-pixel-ratio: 1.5) {
    .pick-your-bag .frog-pic img{width: 360px;}
    .pick-your-bag .gradient-border-box .text{font-size: 1rem !important;}
    .pick-your-bag .gradient-border-box{aspect-ratio: 390 /260;}
}

@media 
  screen and (-webkit-min-device-pixel-ratio: 1.25) and (-webkit-max-device-pixel-ratio: 1.74),
  screen and (min-resolution: 120dpi) and (max-resolution: 167dpi) {
    footer .middle p {font-size: 1rem !important;}
    /* .hero-text img{max-width: 80%;} */
    
}

/* For 1920x1080 display at 150% scaling (effective 1280x720) */
/*@media screen and (width: 1280px) and (height: 720px) and (-webkit-min-device-pixel-ratio: 1.5),
       screen and (width: 1280px) and (height: 720px) and (min-resolution: 144dpi) {
}*/


@media only screen and (min-width:1366px) and (max-width:1600px){
}

@media only screen and (min-width:1366px) and (max-width:1440px){
    .container {max-width: 1280px;}
}

@media only screen and (min-width:1025px) and (max-width:1366px){
}

@media only screen and (min-width:768px) and (max-width:1024px) {
    header {background: rgb(var(--color_white));}
    header .navbar .navbar-brand {background: none; padding: 0;}
    header .navbar .navbar-brand img {width: 80px;}
    header .top-links.text-white, header .top-links a.text-white {color: var(--bs-body-color) !important;}
    header .navbar .navbar-nav .nav-link {color: var(--bs-body-color);}
    header .navbar .navbar-nav {--bs-border-color: rgba(var(--color_black),0.2);}
    header .navbar .navbar-nav .nav-item:hover > .nav-link {color: rgb(var(--primary3));}
    .pick-your-bag{height: auto;}
}

@media only screen and (min-width:320px) and (max-width:767px)
{
    header .navbar {padding: 0.5rem 0;}
    header .navbar-toggler {filter: var(--imgWhite);}
    header .navbar-collapse {background: rgba(var(--color_black), 0.8); backdrop-filter: blur(10px); margin: 0px -1rem; padding-bottom: 2rem;}
    header .navbar .navbar-nav {max-height: 75vh; overflow-y: scroll; padding: 1rem 0;}
    header .navbar .navbar-brand {background: none; padding: 0; border-radius: 0; margin: 0;}
    header .navbar .navbar-nav {max-height: 75vh; overflow-y: scroll;}
    header .navbar .navbar-brand img {max-width: 110px !important; height: auto;}
    .banner {aspect-ratio: none; width: 100%; height: 100vh;}
    .banner .hero-text .video-wrapper {display: none;}
    .banner .hero-text div:nth-child(2) .word, .banner .hero-text div:nth-child(3) .word {left: 0;}
    .pick-your-bag .frog-pic {position: relative;}
    .whats-in-the-bag ul li .image {position: inherit; height: 0;}
    .whats-in-the-bag ul li:hover .image {height: auto; margin-top: 1rem;}
    .whats-in-the-bag ul li {font-size: 1.5rem;}
    .behind-the-bag .lets-work-block {padding: 1.5rem;}
    .behind-the-bag .lets-work-block h2 br {display: none;}

    .pick-your-bag{height: auto;}
    .pick-your-bag .gradient-border-box .text {font-size: 1.25rem !important;}

    footer .middle ul{margin-bottom: 1.5rem; padding: 0 15px;}  
    footer .bottom {text-align: center;}
    footer .bottom .links,footer .bottom .designed-by {text-align: center;}
}

@media only screen and (max-width:767px) and (orientation: landscape) {
}

@media only screen and (min-width:320px) and (max-width:640px) { 
    
}