/* =====================================================
   BLUE DOLPHIN WASSERSPORT
   Responsive Stylesheet
===================================================== */



/* =====================================================
   LARGE DESKTOP
   ab 1400px
===================================================== */


@media (min-width:1400px){


.hero h1 {

    font-size:6rem;

}


.container {

    max-width:1400px;

}


.gallery-grid img {

    height:320px;

}


}






/* =====================================================
   LAPTOP / SMALL DESKTOP
   bis 1200px
===================================================== */


@media (max-width:1200px){



.hero h1 {

    font-size:4rem;

}



.section-title h2 {

    font-size:2.5rem;

}



.gallery-grid {

    grid-template-columns:

    repeat(3,1fr);

}



.feature-grid {

    grid-template-columns:

    repeat(2,1fr);

}



}




/* =====================================================
   TABLET
   bis 992px
===================================================== */


@media (max-width:992px){



.section {

    padding:80px 0;

}




/* Navigation */


.nav-links {


    position:fixed;

    top:0;

    right:-100%;


    width:75%;

    height:100vh;


    background:

    rgba(3,40,61,.98);


    display:flex;

    flex-direction:column;


    justify-content:center;

    align-items:center;


    gap:35px;


    transition:.4s;


}



.nav-links.active {


    right:0;


}



.nav-links a {


    font-size:1.3rem;


}





.menu-toggle {


    display:flex;


    flex-direction:column;


    gap:7px;


    background:none;


    border:none;


    cursor:pointer;


    z-index:1100;


}



.menu-toggle span {


    width:30px;


    height:3px;


    background:white;


    border-radius:5px;


    transition:.3s;


}



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

    transform:

    rotate(45deg)
    translate(7px,7px);

}


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

    opacity:0;

}


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

    transform:

    rotate(-45deg)
    translate(7px,-7px);

}






/* Hero */


.hero {

    min-height:650px;

}



.hero h1 {

    font-size:3.5rem;

}



.hero p {

    font-size:1.1rem;

}



.hero-buttons {

    flex-direction:column;

    align-items:center;

}





/* Content */


.about-content {


    grid-template-columns:1fr;


}



.about-image {


    order:-1;


}




.opening-grid {


    grid-template-columns:1fr;


}



.price-grid {


    grid-template-columns:1fr;


}



.gallery-grid {


    grid-template-columns:

    repeat(2,1fr);


}




}





/* =====================================================
   MOBILE LARGE
   bis 768px
===================================================== */


@media (max-width:768px){



.container {


    width:92%;


}



.section {


    padding:70px 0;


}




.logo img {


    width:130px;


}





.hero {


    height:100vh;


}



.hero .subtitle {


    font-size:.75rem;


    letter-spacing:3px;


}



.hero h1 {


    font-size:2.7rem;


    line-height:1.15;


}



.hero p {


    font-size:1rem;


}



.btn {


    width:100%;


    max-width:320px;


    padding:15px 25px;


}




.section-title {


    margin-bottom:40px;


}


.section-title h2 {


    font-size:2rem;


}




.feature-grid {


    grid-template-columns:1fr;


}



.feature-card {


    padding:35px 25px;


}



.opening-card {


    padding:35px 20px;


}




.price-card {


    padding:40px 25px;


}




.price {


    font-size:3.2rem;


}




.gallery-grid {


    grid-template-columns:1fr;


}



.gallery-grid img {


    height:260px;


}





.contact-form input,
.contact-form textarea,
.contact-form select {


    padding:15px;


}




.footer {


    padding:50px 0;


}



.footer h3 {


    font-size:1.5rem;


}




}








/* =====================================================
   SMALL MOBILE
   bis 480px
===================================================== */


@media(max-width:480px){



.hero h1 {


    font-size:2.25rem;


}



.hero-content {


    padding:0 15px;


}



.hero-buttons {


    margin-top:30px;


}




.section-title span {


    font-size:.7rem;


}



.section-title h2 {


    font-size:1.7rem;


}



.feature-card .icon {


    font-size:2.5rem;


}



.price-card h3 {


    font-size:1.7rem;


}



.price {


    font-size:2.8rem;


}



.gallery-grid img {


    height:220px;


}



.wave-divider{
    height:70px;
    background:url("../assets/waves.svg") repeat-x bottom;
    background-size:auto 100%;
}

.wave-track{
    display:none;
}



}








/* =====================================================
   EXTRA SMALL DEVICES
   bis 360px
===================================================== */


@media(max-width:360px){



.hero h1 {


    font-size:2rem;


}



.hero p {


    font-size:.9rem;


}



.btn {


    font-size:.9rem;


}



.logo img {


    width:115px;


}



}








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


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



.hero {


    min-height:650px;


}



.hero h1 {


    font-size:2.5rem;


}



.hero-buttons {


    flex-direction:row;


}



}




/* =====================================================
   TOUCH OPTIMIZATION
===================================================== */


@media (hover:none){



.feature-card:hover,
.price-card:hover,
.gallery-grid img:hover {


    transform:none;


}



.btn:hover {


    transform:none;


}



}






/* =====================================================
   PRINT
===================================================== */


@media print{


.header,
.hero-buttons,
.menu-toggle {


    display:none;


}


body {


    background:white;


}


}