/* Bigger Screen Responsive */

@media (max-width: 1200px) {

    .main-text {
        width: 70%;
    }

    .main-image {
        width: 30%;
    }

    .navbar {
        left: 5%;
        right: 5%;
        padding: 15px;
    }

    .logo img {
        max-height: 45px;
        max-width: 180px;
    }

    .navbar-option a {
        margin: 0 5px;
        font-size: 0.8rem;
    }

    .right-navbar a {
        font-size: 0.7rem;
    }
}

/* Fix form */
@media screen and (max-width: 1055px) {
    input {
        width: 170px;
    }

    .company-info p {
        margin-bottom: 0px;
    }

    .navbar {
        left: 2%;
        right: 2%;
        gap: 10px;
    }

    .navbar-contact {
        gap: 0;
    }

    .navbar-option a {
        margin: 0 4px;
        font-size: 0.75rem;
    }
}

/* Responsive Tablet */
@media (max-width: 1000px) {

    h4 {
        font-size: 0.8rem;
    }

    .rounded {
        margin-right: 10px;
    }

    .blog-author {
        padding-left: 50px;
    }

    .second {
        margin: 0;
    }
    
    .section-title h3 {
        font-size: 1.5rem;
    }

    .review {
        flex-wrap: wrap;
        padding-bottom: 200px;
    }
    
    .image-review {
        width: 100%;
        margin-right: 0;
        margin-bottom: 40px;
    }
    .review-information {
        top: 80px;
    }
    
    .image-review img {
        width: 100%;
    }

    .review-box {
        width: 100%;
        margin-left: 0;
    }

    .more-information-section {
        /* padding-bottom: 650px; */
        text-align: center;
    }

    .more-information-section a {
        text-align: center;
    }

    .company-info, .company-info p {
        width: 100%;
    }

    .legal {
        width: 100%;
    }

    .resources {
        width: 100%;
    }

    .newsletter {
        width: 100%;
        float: left;
        display: flex;
        flex-flow: column wrap;
        align-items: center;
    }

    .newsletter p {
        margin-top: 0px;
    }
}

/* Responsive Medium */
@media screen and (max-width: 900px) {

    .navbar {
        top: 0px;
        left: 0px;
        right: 0px;
        width: 100vw;
        border-radius: 0px;
        align-items: center;
        height: auto;
        min-height: 60px;
        padding: 10px 15px;
        flex-wrap: nowrap;
    }

    .logo img {
        max-height: 40px;
        width: auto;
    }

    .navbar-contact {
        display: none;
    }

    .container-main {
        padding-top: 120px;
    }

    .blog {
        width: 100%;
        margin-bottom: 50px;
        margin-right: 0;
    }

    .second {
        margin-right: 0;
    }

    .blog-contents {
        flex-wrap: wrap;
         
    }

    .image-about {
        width: 100%;
        margin : 0;
        background-image: url('../img/resort.jpg');
    }

    /* .image-about img {
        display: none;
    } */

    .box-about {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .image-services {
        width: 20%;
        margin : 0;
        background-image: url(../img/profile-pic.jpg);
    }

    .image-services img {
        /* display: none; */
    }

    .box-description {
        width: 80%;
        margin: 0;
    }
    .plan-contents {
        flex-wrap: wrap;
    }

    .plan-card {
        width: 60%;
        margin: 0 20%;
        margin-bottom: 60px !important;
    }

}

/* Responsive Smartphone */
@media all and (max-width: 670px) {

    .main-image {
        width: 20%;
    }

    .main-text {
        width: 80%;
    }

    .container-main {
        width: 90%;
        margin: 0 auto;
        padding-top: 120px;
        text-align: center;
    }

    h1 {
        font-size: 2rem;
        line-height: 1.2;
    }

    .navbar {
        padding: 10px 15px;
        flex-wrap: nowrap;
    }

    .logo img {
        max-height: 35px;
        width: auto;
    }

    .left-navbar {
        flex-shrink: 0;
    }

    .right-navbar {
        margin-left: auto;
    }

    .navbar-option {
        display: none;
    }

    .navbar-option.responsive {
        display: block;
    }

    .navbar-option.responsive a {
        margin-top: 10px;
    }

    .navbar-option.responsive a:hover {
        background-color: #1a6b54;
        border-bottom: none;
        color: #fff;
    }

    .right-navbar a.hamburger {
        display: block;
    }

    .left-navbar.responsive {
        display: block;
    }

    .navbar.responsive {
        position: fixed;
        flex-wrap: wrap;
    }

    .navbar.responsive a.hamburger {
        position: absolute;
        top: 15px;
        right: 15px;
    }

    .navbar.responsive a.bookNow {
        position: absolute;
        top: 21px;
        right: 52px;
    }

    .navbar.responsive a {
        float: none;
        display: block;
        text-align: left;
    }

    .navbar.responsive .left-navbar {
        width: 100%;
    }

    .navbar.responsive .navbar-option {
        display: block;
        width: 100%;
        margin-top: 15px;
    }
    
    .blog {
        width: 100%;
        margin-bottom: 50px;
    }

    .second {
        margin: 0;
    }

    .blog-contents {
        flex-wrap: wrap;
    }

    .section-title h3 {
        font-size: 1.2rem;
    }

    .review {
        margin-bottom: 60px;
    }

    .reviewer-name {
        font-size: 1rem;
    }

    .white {
        padding-top: 20px;
    }

    .social-media {
        display : none;
        padding-top: 25px;
    }

    .review-information {
        width: 90%;
    }
}

/* Responsive lower screen */
@media screen and (max-width: 600px) {
    .services {
        display: inline-block;
    }
}

/* Lower smartphone screen */
@media screen and (max-width: 485px) {
    .container {
        padding: 0 20px;
    }

    h1 {
        font-size: 2.5rem;
    }

    h2 {
        font-size: 2.0rem;
    }

    .main-text {
        width: 90%;
    }

    .main-image {
        width: 10%;
    }

    .main-contents {
        height: 600px;
    }

    .container-main {
        width: 80%;
        margin: 0 0 0 50px;
        padding-top: 100px;
    }

    .image-about {
        width: 13%;
    }

    .box-about {
        width: 90%;
        margin-left: 0px;
    }

    .box-description p {
        width: 90%;
    }

    .image-services {
        width: 13%;
    }

    .plan-card {
        width: 80%;
        margin: 0 10%;
    }
}


/* Responsive lowest screen */
@media screen and (max-width: 385px) {
    .blog-info {
        display: block;
    }

    .blog-author {
        padding: 20px 0 0 0;
    }

    .blog-contents h4 {
        width: 100%;
    }

    .blog-contents p {
        width: 90%;
    }
}

/* Mobile view: Stack content and image */
@media all and (max-width: 670px) {
    .main-contents {
        flex-direction: column; /* Stack content vertically */
        height: auto; /* Allow content to adjust its height */
    }

    .main-image {
        order: 2; /* Image comes after text */
        width: 100%; /* Full width for mobile */
        height: 300px; /* Set a reasonable height for the image */
    }

    .main-text {
        order: 1; /* Content comes before image */
        width: 100%; /* Full width for mobile */
        text-align: center; /* Center the text for better mobile display */
        padding: 20px; /* Add some padding for spacing */
    }

    .container-main {
        margin: 0 auto; /* Center container */
        padding-top: 20px; /* Adjust padding for mobile */
        width: 90%; /* Ensure content takes up most of the width */
    }
}
/* General Styling for About Section */
.about-section {
    padding: 60px 0;
    background-color: #f9f9f9;
}

.about-contents {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.image-about img {
    width: 100%;
    height: auto;
    border-radius: 10px;
}

.box-about {
    padding: 20px;
    width: 50%;
}

.box-about h2 {
    font-size: 2rem;
    margin-bottom: 20px;
    color: #1a6b54;
}

.box-about p, .box-about h5 {
    font-size: 1rem;
    line-height: 1.8;
    color: #333;
    margin-bottom: 20px;
}

.box-about h5 {
    font-style: italic;
    color: #555;
}

/* Mobile view adjustments */
@media all and (max-width: 768px) {
    .about-contents {
        flex-direction: column;
    }

    .image-about {
        width: 100%;
        margin-bottom: 20px;
    }
    .image-about img {
        width: 100%; /* Ensure it's set to 100% for responsiveness */
        height: auto; /* Auto height to maintain aspect ratio */
    }

    .box-about {
        width: 100%;
        padding: 10px;
    }

    .box-about h2 {
        font-size: 1.5rem;
        text-align: center;
    }

    .box-about p, .box-about h5 {
        text-align: center;
    }

    .box-about p {
        font-size: 0.9rem;
    }
}

@media all and (max-width: 768px) {
    .our-services {
        padding: 40px 20px;
        background-color: #f5f5f5;
    }

    .services-contents {
        flex-direction: column;
        text-align: center;
    }

    .box-description {
        width: 100%;
        padding: 0;
        margin-bottom: 20px;
    }

    .box-description h2 {
        font-size: 1.5rem;
        margin-bottom: 15px;
    }

    .box-description p {
        font-size: 1rem;
        margin-bottom: 20px;
        line-height: 1.6;
    }

    .services {
        display: grid;
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .services-icon h4 {
        font-size: 1.1rem;
    }

    .services-icon .fa {
        font-size: 1.4rem;
        margin-right: 8px;
    }

    .image-services {
        width: 100%;
        margin-top: 20px;
    }

    .image-services img {
        width: 100%;
        height: auto;
        border-radius: 10px;
    }
    .navbar-contact {
        display : none
    }
}