:root{
    --dark-blue: #022534;
    --medium-blue: #08546C;
    --gray-blue: #A0BACC;
    --aqua-blue: #54ACBF;
    --whitish-blue: #A7EBF2;
}
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html{
    overflow-x: hidden;
}


@media only screen and (min-width: 320px){
    body{
        width: 100vw;
        margin: 0;
        padding: 0;
    }
    .overlay {
        height: 0%;
        width: 100%;
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
        background-color: var(--dark-blue);
        overflow-y: hidden;
        transition: 0.5s;
      }
      
      .overlay-content {
        position: relative;
        top: 25%;
        width: 100%;
        text-align: center;
        margin-top: 30px;
      }
      
      .overlay a {
        padding: 8px;
        text-decoration: none;
        font-size: 36px;
        color: #818181;
        display: block;
        transition: 0.3s;
      }
      
      .overlay a:hover, .overlay a:focus {
        color: #fff;
      }
      #overlay-icons{
        width: 60vw;
        margin-top: 40px;
        margin-left: 10vw;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        list-style-type: none;
        padding-inline-start: 0;
        padding-inline-end: 0;
        padding: 0;
        margin-left: auto;
        margin-right: auto;
      }
      
      .overlay .closebtn {
        position: absolute;
        top: 20px;
        right: 45px;
        font-size: 60px;
      }
      
    nav{
        width: 100vw;
        background-color: var(--dark-bluej);
        color: #fff;
        position: fixed;
        top: 0;
    }
    .nav-links{
        display: none;
    }
    .logo-container{
        width: 100vw;
        height: 10vh;
        background-color: var(--dark-blue);
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 5px;
        padding-left: 0;
    }
    .material-icons{
        font-size: 6vh;
    }
    .logo{
        width: 46px;
        height: 46px;
        border-radius: 50%;
        margin-right: 15px;
    }
    .background-container{
        background-image: url("https://i.pinimg.com/736x/21/b9/59/21b9591ce480229f8f6cb25e7225faed.jpg");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: 60% 30%;
        top: 10vh;
        height: 90vh;
        width: 100vw;
        margin-top: 10vh;
        padding: 0;
    }
    
    .title-container h1{
        font-family: Lexend Arial, Helvetica, sans-serif;
        color: #fff;
        font-size: 3.6rem;
        font-weight: 800;
        text-align: center;
        display: block;
        margin-right: auto;
        margin-left: auto;
        
    }
    .background-container p{
        font-family: Outfit, Arial, Helvetica, sans-serif;
        font-size: 1.3rem;
        font-family: 600;
        margin-top: 5vh;
    }
    .title-container{
        background-color: rgba(255, 255, 255, 0.3);
        height: 90vh;
        padding: 10px;
        padding-top: 45vh;
    }
    #vertical-menu{
        display: none;
        position: relative;
        width: 60vw;
        background-color: rgba(2, 37, 52, 0.8);
        top: 35vh;
        padding-bottom: 40vh;
        border-bottom-right-radius: 15px;
    }
    #vertical-menu a{
        display: block;
        font-size: 2.8rem;
        line-height: 4.2rem;
        padding: 10px;
        text-align: center;
        text-decoration: none;
        color: #fff;
        border-bottom: 1px solid #fff;
    }
    #about{
        display: block;
        top: 10px;
        background-color: #fff;
    }
    .info-container{
        padding-top: 10vh;
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 6vh;
    }
    .section-title{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        margin-bottom: 7vh;
    }
    .section-title h2{
        font-size: 2.2rem;
        font-family: Lexend Arial, Helvetica, sans-serif;
        padding-bottom: 15px;
        color: var(--medium-blue)
    }
    .section-info h3{
        padding-top: 32px;
        padding-bottom: 32px;
    }
    .section-title p{
        font-size: 1.4rem;
        font-family: Lexend, Arial, Helvetica, sans-serif;
        padding-bottom: 15px;
        color: var(--dark-blue);
    }
    p.information{
        font-size: 1.3rem;
        font-family: Merienda;
        line-height: 2.1rem;
        margin-bottom: 8vh;
        padding: 15px;
    }
    #ray{
        display: none;
    }
    .image-grid-container{
        width: 95vw;
        height: 65vh;
        display: grid;
        grid-template-columns: 85% 85% 85%;
        overflow-x: auto;
        column-gap: 10px;
        padding-inline-start: 0;
        margin-bottom: 10vh;
        border-radius: 10px;
        overflow-y: hidden;
    }

   .image-container{
        width: 100%;
        height: 100%;
        margin-right: 15px;
        border-radius: 10px;
   }
   .about-pic{
        width: 100%;
        height: 100%;
        border-radius: 10px;
        box-shadow: -3px 3px 5px #000;
   }
   .button-container{
    text-align: center;
    width: 95vw;
   }
   .button{
    background-color: var(--medium-blue);
    color: #fff;
    font-size: 1.6rem;
    padding: 10px;
    border-radius: 25px;
    border: none;
    box-shadow: -2px 3px 5px #000;
   }
   .button a{
    color: #fff;
    text-decoration: none;
   }
   footer{
    background-color: #000;
    color: #fff;
    padding: 25px 10px;
   }
   .contact{
    padding-top: 15px;
    padding-bottom: 20px;
   }
   .contact h2{
    font-family: Lexend Arial, Helvetica, sans-serif;
    font-size: 1.6rem;
    padding-bottom: 20px;
   }
   .contact h3{
    font-size: 1.4rem;
    font-family: Lexend Arial, Helvetica, sans-serif;
   }
   #change-color{
    transition: background-color 0.8s ease;
   }
   #change-color h3{
    font-size: 1.6rem;
    text-align: center;
   }
   #list-container{
    width: 45vw;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    list-style-type: none;
    padding-inline-start: 0;
    padding-inline-end: 0;
    padding: 0;
    margin: 0;
   }
   .media-icon{
    width: 46px;
    height: 46px;
    border-radius: 50%;

   }
   #reach p, #reach a{
    color: white;
    padding-top: 5px;
    padding-bottom: 5px;
   }
   .footer-logo{
    width: 60vw;
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
   }
   .cover{
    background-image: url("https://i.pinimg.com/736x/13/f3/92/13f3923cc505b4100ed16a92728760e2.jpg");
    background-repeat: no-repeat;
    width: 100vw;
    height: 20vh;
    background-size: cover;
    background-position: 50% 60%;
}
   .snorkel-site{
    width: 94vw;
    height: 30vh;
    border-radius: 10px;
   }

   /*styles for gallery page go here*/
   .gallery-heading{
    background-color: #000;
    margin-top: 10vh;
    padding-top: 5vh;
    color: #fff;
    font-size: 3.2rem;
    font-family: Lexend Arial, Helvetica, sans-serif;
    text-align: center;
   }
   .grid-container{
    padding-top: 10vh;
    width: 100vw;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(5, 300px);
    grid-auto-flow: row;
    grid-auto-rows: 300px;
    row-gap: 5vh;
    column-gap: 3vw;
    padding-left: 4px;
    padding-right: 4px;
    padding-bottom: 10vh;
    background-color: #000;
   }
   iframe{
    border: none;
   }
   .gallery-image{
    width: 100%;
    height: 100%;
    border-radius: 20px;
   }
   .image1{
    grid-column: 1/3;
    grid-row: 1/2;
   }
   .image2{
    grid-column: 1/2;
    grid-row: 2/3;
   }
   .image3{
    grid-column: 2/3;
    grid-row: 2/3;
   }
   .image4{
    grid-column: 1/3;
    grid-row: 3/4;
   }
   .image5{
    grid-column: 1/2;
    grid-row: 4/5;
   }
   .image6{
    grid-column: 2/3;
    grid-row: 4/5;
   }
   .image7{
    grid-column: 1/2;
    grid-row: 5/6;
   }
   .image8{
    grid-column: 2/3;
    grid-row: 5/6;
   }
   .image9{
    grid-column: 1/3;
    grid-row: 6/7;
   }
   .image10{
    grid-column: 1/2;
    grid-row: 7/8;
   }
   .image11{
    grid-column: 2/3;
    grid-row: 7/8;
   }
   .image14{
    grid-column: 1/3;
    grid-row: 9/10;
    text-align: center;
   }
   .image15{
    grid-column: 1/3;
    grid-row: 10/11;
    text-align: center;
   }
   .image16{
    grid-column: 1/3;
    grid-row: 11/12;
   }
   .image17{
    grid-column: 1/3;
    grid-row: 12/13;
   }
   .image18{
    grid-column: 1/3;
    grid-row: 13/14;
   }
   .image19{
    grid-column: 1/3;
    grid-row: 14/15;
   }
   .modal-box{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    z-index: 999;
    background-color: #fff;
   }
   .modal-box img{
    width: 80%;
    height: 60%;
   }
   .close-button{
    display: block;
    position: fixed;
    top: 40px;
    right: 30px;
    color: #000;
   }
   span.next-button{
    color: #000;
    display: block;
    position: fixed;
    top: 50vh;
    left: 6px;
    font-size: 32px;
    cursor: pointer;
   }
   span.previous-button{
    color: #000;
    display: block;
    position: fixed;
    top: 50vh;
    right: 6px;
    font-size: 32px;
    cursor: pointer;
   }

   /*code for services page*/
   .iframe-container{
    width: 100vw;
    height: 100vh;
    background-color: #08546C;
    background-image: url("https://i.pinimg.com/736x/37/aa/61/37aa617388d5b192f2f4a9ef51c5312a.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    padding-bottom: 10vh;
    overflow-y: auto;
    overflow-x: hidden;
   }
   .tour-package-grid-container{
    background-color: rgba(255, 255, 255, 0.7);
    width: 100vw;
    padding-top: 15vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    padding-right: 5px;
    padding-left: 5px;
   }
   .tour-package{
    padding: 5px;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 15px;
    margin-bottom: 10vh;
   }
   .tour-package h2{
    padding-top: 1.2rem;
    padding-bottom: 1.2rem;
    text-align: center;
    font-family: Lexend;
    font-size: 1.9rem;
   }
   .tour-package p{
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
    font-size: 1.2rem;
    font-family: Merienda;
   }
   .tour-package p:nth-of-type(3){
    font-weight: bold;
   }
   .tour-package ul{
    padding-left: 1.2rem;
    line-height: 1.5rem;
    padding-bottom: 2rem;
    font-weight: bold;
    font-family: Merienda, cursive;
   }
   .book-button{
    padding: 10px 15px;
    display: block;
    margin-right: auto;
    margin-left: auto;
    font-size: 1.3rem;
    border-radius: 10px;
    border: none;
    color: #fff;
    background-color: var(--dark-blue);
   }
   .book-button a{
    color: #fff;
    text-decoration: none;
   }
   #contact-id{
    width: 100vw;
    
   }
}

@media only screen and (min-width: 767px){
    nav{
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        justify-content: space-between;
    }
    #hamburger-menu{
        display: none;
    }
    .nav-links{
        width: 60vw;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-evenly;
        font-size: 1.7rem;
        font-family: Lexend Arial, Helvetica, sans-serif;
        list-style-type: none;
    }
    .nav-links a{
        text-decoration: none;
        color: #fff;
    }
    .background-container{
        background-image: url("https://i.pinimg.com/736x/79/4e/5a/794e5ad48dc853b65cf174d748d0e5ad.jpg");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: 60% 30%;
        top: 10vh;
        height: 90vh;
        width: 100vw;
        margin-top: 10vh;
        padding: 0;
    }
    .title-container h1{
        font-family: Lexend Arial, Helvetica, sans-serif;
        color: #000;
        font-size: 3rem;
        font-weight: 800;
        text-align: center;
        background-color: rgba(255,255, 255,0.56);
        display: block;
        margin-right: auto;
        margin-left: auto;
        box-shadow: 3px 4px 8px rgba(0,0,0,0.7);
        
    }
    .background-container h1{
        margin-top: 6vh;
        font-size: 4.2rem;
        font-weight: 800;
    }
    .background-container p{
        font-weight: 800;
    }
    .image-grid-container{
        width: 80vw;
        height: 60vh;
        display: grid;
        grid-template-columns: 75% 75% 75%;
        overflow-x: auto;
        column-gap: 16px;
        padding-inline-start: 0;
        margin-bottom: 10vh;
        border-radius: 10px;
        overflow-y: hidden;
        margin-left: auto;
        margin-right: auto;
    }
    p.information{
        width: 80vw;
        margin-left: auto;
        margin-right: auto;
        font-size: 1.8rem;
        line-height: 2.5rem;
    }
    .snorkel-site{
        display: block;
        width: 75vw;
        height: 50vh;
        margin-left: auto;
        margin-right: auto;
    }
    #you-shorts{
        display: none;
    
    }
    #ray{
        display: block;
        width: 100vw;
        height: 60vh;
        aspect-ratio: 1/0.5;
    }
    #list-container{
        width: 150px;
    }
    .cover{
        height: 30vh;
    }
    #reach p{
        padding-top: 5px;
        padding-bottom: 5px;
    }
    .footer-logo{
        width: 40vw;
        display: flex;
        align-items: center;
        flex-direction: row;
        justify-content: space-between;
       }

    /*code for gallery page goes here*/
    .grid-container{
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: 500px;
        grid-auto-flow: row;
        grid-auto-rows: 500px;
        row-gap: 8vh;
    }
    .modal-box img{
        width: 70%;
        height: 60%;
       }
    .image2{
        grid-column: 3/5;
        grid-row: 1/2;
    }
    .image3{
        grid-column: 1/3;
        grid-row: 2/3;
    }
    .image4{
        grid-column: 3/5;
        grid-row: 2/3;
    }
    .image5{
        grid-column: 1/3;
        grid-row: 3/4;
    }
    .image6{
        grid-column: 3/5;
        grid-row: 3/4;
    }
    .image7{
        grid-column: 1/3;
        grid-row: 4/5;
    }
    .image8{
        grid-column: 3/5;
        grid-row: 4/5;
    }
    .image9{
        grid-column: 1/3;
        grid-row: 5/6;
    }
    .image10{
        grid-column: 3/5;
        grid-row: 5/6;
    }
    .image11{
        grid-column: 1/3;
        grid-row: 6/7;
    }
    .image12{
        grid-column: 3/5;
        grid-row: 6/7;
    }
    .image13{
        grid-column: 1/3;
        grid-row: 7/8;
    }
    .image14{
        grid-column: 3/5;
        grid-row: 7/8;
    }
    .image15{
        grid-column: 1/3;
        grid-row: 8/9;
    }
    .image16{
        grid-column: 3/5;
        grid-row: 8/9;
    }
    .image17{
        grid-column: 1/3;
        grid-row: 9/10;
    }
    .image18{
        grid-column: 3/5;
        grid-row: 9/10;
    }
    .image19{
        grid-column: 1/3;
        grid-row: 10/11;
    }
    .image20{
        grid-column: 3/5;
        grid-row: 10/11;
    }
    .image21{
        grid-column: 1/3;
        grid-row: 11/12;
    }
    .image22{
        grid-column: 3/5;
        grid-row: 11/12;
    }
    .image23{
        grid-column: 1/5;
        grid-row: 12/13;
    }
    .image24{
        grid-column: 1/3;
        grid-row: 13/14;
    }
    .image25{
        grid-column: 3/5;
        grid-row: 13/14;
    }
    .image39{
        grid-column: 1/3;
    }
    .image40{
        grid-column: 3/5;
    }
    .image41{
        grid-column: 1/3;
    }
    .image42{
        grid-column: 3/5;
    }
    .tour-package-grid-container{
        height: 280vh;
        background-color: none;
        padding-top: 0;
        padding-bottom: none;
        margin-top: 10vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
    }
    .tour-package{
        margin: 0;
        padding-left: 10vw;
    }
   
}
@media only screen and (min-width: 1020px){
    .nav-links a{
        padding: 10px;
        border-radius: 5px;
    }
    .nav-links a:hover{
        background-color: #fff;
        color: #000;
    }
    .title-container{
        padding-top: 30vh;
    }
    .background-container h1{
        display: block;
        width: 70vw;
        margin-left: auto;
        margin-right: auto;
        font-size: 5.1rem;
    }
    .snorkel-stop-flex{
        width: 100vw;
        height: 60vh;
        display: flex;
        flex-direction: row;
        align-items: center;
        padding-right: 32px;
        padding-left: 32px;
        margin-top: 10vh;
    }
    .info-flex{
        display: flex;
        width: 100%;
        height: 60vh;
        flex-direction: column;
        align-items: start;
        padding-right: 16px;
        padding-bottom: 16px;
    }
    .info-flex img{
        margin-right: 32px;
    }
    .info-flex h3{
        display: block;
        margin-left: 6%;
        text-decoration: underline;
        padding-top: 0px;
        padding-bottom: 32px
    }
    .info-flex p.information{
        display: block;
        width: 90%;
        font-size: 1.5rem;
        margin-right: auto;
    }
    .background-container p{
        display: none;
    }
    .image-grid-container{
        grid-template-columns: 1fr 1fr 1fr;
    }
    .follow-icons{
        display: none;
    }
    .contact{
        text-align: center;
    }
    .contact h2{
        font-size: 2.3rem;
    }
    .contact h3{
        font-size: 2.1rem;
    }
    .footer-logo{
        width: 370px;
        margin-left: auto;
        margin-right: auto;
    }

    /*code for gallery page*/
    .grid-container{
        width: 78vw;
        margin-right: auto;
        margin-left: auto;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: 500px;
        grid-auto-flow: row;
        grid-auto-rows: 500px;
        row-gap: 8vh;
    }
    .image1{
        grid-column: 1/2;
        grid-row: 1/2;
    }
    .image2{
        grid-column: 2/3;
        grid-row: 1/2;
    }
    .image3{
        grid-column: 3/4;
        grid-row: 1/2;
    }
    .image4{
        grid-column: 1/2;
        grid-row: 2/3;
    }
    .image5{
        grid-column: 2/3;
        grid-row: 2/3;
    }
    .image6{
        grid-column: 3/4;
        grid-row: 2/3;
    }
    .image7{
        grid-column: 1/2;
        grid-row: 3/4;
    }
    .image8{
        grid-column: 2/3;
        grid-row: 3/4;
    }
    .image9{
        grid-column: 3/4;
        grid-row: 3/4;
    }
    .image10{
        grid-column: 1/2;
        grid-row: 4/5;
    }
    .image11{
        grid-column: 2/3;
        grid-row: 4/5;
    }
    .image12{
        grid-column: 3/4;
        grid-row: 4/5;
    }
    .image13{
        grid-column: 1/2;
        grid-row: 5/6;
    }
    .image14{
        grid-column: 2/3;
        grid-row: 5/6;
    }
    .image15{
        grid-column: 3/4;
        grid-row: 5/6;
    }
    .image16{
        grid-column: 1/2;
        grid-row: 6/7;
    }
    .image17{
        grid-column: 2/3;
        grid-row: 6/7;
    }
    .image18{
        grid-column: 3/4;
        grid-row: 6/7;
    }
    .image19{
        grid-column: 1/2;
        grid-row: 7/8;
    }
    .image20{
        grid-column: 2/3;
        grid-row: 7/8;
    }
    .image21{
        grid-column: 3/4;
        grid-row: 7/8;
    }
    .image22{
        grid-column: 1/2;
        grid-row: 8/9;
    }
    .image23{
        grid-column: 2/3;
        grid-row: 8/9;
    }
    .image24{
        grid-column: 3/4;
        grid-row: 8/9;
    }
    .image25{
        grid-column: 1/2;
        grid-row: 9/10;
    }
    .image26{
        grid-column: 2/3;
        grid-row: 9/10;
    }
    .image27{
        grid-column: 3/4;
        grid-row: 9/10;
    }
    .image28{
        grid-column: 1/3;
        grid-row: 10/11;
    }
    .image30{
        grid-column: 3/4;
        grid-row: 10/11;
    }
    .image31{
        grid-column: 1/2;
        grid-row: 11/12;
    }
    .image32{
        grid-column: 2/4;
        grid-row: 11/12;
    }
    .image33{
        grid-column: 1/4;
        grid-row: 12/13;
    }
    .image34{
        grid-column: 1/2;
        grid-row: 13/14;
    }
    .image35{
        grid-column: 2/3;
        grid-row: 13/14;
    }
    .image36{
        grid-column: 3/4;
        grid-row: 13/14;
    }
    .image37{
        grid-column: 1/2;
        grid-row: 14/15;
    }
    .image38{
        grid-column: 2/3;
        grid-row: 14/15;
    }
    .image39{
        grid-column: 3/4;
        grid-row: 14/15;
    }
    .image40{
        grid-column: 1/2;
        grid-row: 15/16;
    }
    .image41{
        grid-column: 2/3;
        grid-row: 15/16;
    }
    .image42{
        grid-column: 3/4;
        grid-row: 15/16;
    }
    #modal-image{
        width: 50vw;
        height: 70vh;
        border-radius: 5px;
    }
    /*code for services page*/
    .iframe-container{
        width: 100vw;
        height: 100vh;
        background-color: #08546C;
        background-image: none;
    }

    .tour-package-grid-container{
        width: 95vw;
        height: 80vh;
        background-color: none;
        margin-right: auto;
        margin-left: auto;
        padding-top: 0;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        column-gap: 20px;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 15vh;
        padding-right: 5px;
        padding-left: 5px;
    }
    .tour-package{
        padding: 20px 5px;
        height: 80vh;
        background-color: rgba(255, 255, 255, 0.7);
        border-radius: 15px;
        margin-bottom: 10vh;
    }
    .iframe-container h1{
        color: #fff;
    }
    
}