body {
    background-color: #F2F2F2;
    height: 100vh; 

    margin: 0%;
    padding: 0%;
    

    display: grid; 
    grid-template-columns: 
        1fr
        repeat(4,minmax(0,272px))
        1fr 
    ;
    grid-gap: 0px; 
    grid-template-rows: 
        1fr
        1fr
        1fr
        1fr
        1fr
        1fr
        1fr
        60px
    ;
    grid-template-areas: 
        "header header header header header header"
        "intro intro intro intro intro intro"
        "package package package package package package"
        "bundle bundle bundle bundle bundle bundle"
        "slideshow slideshow slideshow slideshow slideshow slideshow"
        "enquiryGreen enquiryGreen enquiryGreen enquiryGreen enquiryGreen enquiryGreen"
        "footer footer footer footer footer footer"
        "credit credit credit credit credit credit"
        ;

       
    color: #0C0C0C;
}



#visual_intro_container {
    grid-area: intro;
    display: flex;
    text-align: center;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 5%;
    color: #F2F2F2;
    background-color: #1F030C;
}
    .sec-alt-btn {
        background-color: #7D022A;
        border: none;
        padding: 14px 20px;
    }
        .sec-alt-btn a {
            color: #F2F2F2;
            text-decoration: none;
            font-family: new icon serif;
            font-size: medium;
        }
         .sec-alt-btn:hover {
        background-color: #5e001f;
        }


#package-container {
    grid-area: package;
    background-color: #F2F2F2;
    width: auto;
    padding: 3%;
    display: flex;
    justify-content: center;
    align-items: center;
}      

.package-info-section {
    width: 50%;
}

.package-image-section {
    width: 50%;
    display: flex;
    justify-content: right;
    align-items: center;
}
    .package-image-section img {
        width: 55%;
    }


#package-bundle-container {
    grid-area: bundle;  
    width: auto;
    padding: 3%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #02110C;
    color: #F2F2F2;
}


        
#slideshow-container{
    grid-area: slideshow;
    background-color: #F2F2F2;
    color: #02110C;
    font-size: large;
    position: relative;
}
#slideshow-container h2 {
    display: flex;
    justify-content: center;
    padding-top: 20px;
    text-transform: uppercase;
}
#slideshow-container q {
    font-style: italic;
    font-size: larger;
}
  .mySlides {
    display: none;
    padding: 80px;
    text-align: center; 
    font-size: large;
  }
  
  .prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    margin-top: -30px;
    padding: 16px;
    color: #02110C;
    font-weight: bold;
    font-size: 20px;
    border-radius: 0 3px 3px 0;
    user-select: none;
  }
  .next {
    position: absolute;
    right: 0;
    border-radius: 3px 0 0 3px;
  }
    .author a, .author {
        color: #7D022A;
        font-family: new icon serif;
    }


.enquire-container {
    grid-area: enquiryGreen;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #ffffff;   
    background-color: #1F030C;
    
    padding: 3%;
    }
        .enquire-box {
            width: 50%;
        }
    
    .secondary-btn {
        padding: 14px 16px 10px 0%;
        color: #ffffff;
        font-family: New icon serif;
    }



@media screen and (min-width: 370px) and (max-width: 767px) {
    .content_nav{
        padding-right: 12px;
    }
    .content_nav li{
        padding-left: 12px;
    }
    .label{
        display: grid;
        cursor: pointer;
        grid-column: 3;
        padding-right: 20px;
    }

    .content_nav{
        display: grid;
        grid-template-columns: 1fr;
        grid-column: 1/4;
        
        padding-left: 10px;
        text-align: center;
        max-height: 0;
        overflow: hidden;
        transition: all ease-in-out 0.6s;
    }
    .nav_checkbox input:checked ~ .content_nav{
        max-height: 500px;
    }
    .content_nav li{
        padding: 15px 0px;
    }

    #visual_intro_container {
        flex-direction: column;
    }
        #visual_intro_text_box {
            width: auto;
        }


      
#package-container, 
#package-bundle-container {
    flex-direction: column;
}      

.package-info-section, 
.package-image-section {
    width: 100%;
}

.package-image-section {
    width: 100%;
    justify-content: center;
}
    .package-image-section img {
        width: 100%;
    }


.enquire-container {
    flex-direction: column;
    }
        .enquire-box {
            width: 100%;
        }


    footer {
        flex-direction: column;
    }
}