@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Edu+AU+VIC+WA+NT+Hand:wght@400..700&family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=Outfit:wght@100..900&family=Pacifico&family=Playwrite+AR:wght@100..400&family=Playwrite+IT+Moderna:wght@100..400&display=swap');


@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');

body {
    padding: 0;
    margin: 0;
   font-family:'Montserrat', sans-serif;
  font-optical-sizing: auto;
    font-weight: bold;
    font-style: normal;
}

a {
    text-decoration: none !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family:'Montserrat', sans-serif;
    font-optical-sizing: auto;
    font-weight: bold;
    font-style: normal;
}

.title-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Center horizontally */
    text-align: center;
    /* Center text if needed */
}

.title {
    margin-bottom: 10px;

    /* Space between title and line */
}

.line {
    width: 40%;
    /* Adjust width as needed */
    height: 2px;
    /* Adjust thickness */
    background: white;
    /* Line color */
}

.line2 {
    width: 30%;
    margin-top: 10px;
    /* Adjust width as needed */
    height: 2px;
    /* Adjust thickness */
    background: white;
    /* Line color */
}

#services {
    background-color: whitesmoke;
}

#services .card {
    box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

.fixed-bg {
    background-image: url('../img/beaches-banner.png');
    /* Path to your background image */
    background-attachment: fixed;
    /* Keeps the background fixed */
    background-size: cover;
    /* Ensures the background covers the entire section */
    background-position: center;
    /* Centers the background image */
    height: 50vh;
    /* Full viewport height */
    color: white;
    /* Text color for contrast */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* From Uiverse.io by adamgiebl */
.cssbuttons-io-button {
    background: #64366e;
    color: white;
    font-family: inherit;
    padding: 0.35em;
    padding-left: 1.2em;
    font-size: 25px;
    font-weight: 500;
    border-radius: 0.9em;
    border: none;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    box-shadow: inset 0 0 1.6em -0.6em #64366e;
    overflow: hidden;
    position: relative;
    height: 2.8em;
    padding-right: 3.3em;
    cursor: pointer;
}

.cssbuttons-io-button .icon {
    background: white;
    margin-left: 1em;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2.2em;
    width: 2.2em;
    font-weight: bold;
    border-radius: 0.7em;
    box-shadow: 0.1em 0.1em 0.6em 0.2em #64366e;
    right: 0.3em;
    transition: all 0.3s;
}

.cssbuttons-io-button:hover .icon {
    width: calc(100% - 0.6em);
}

.cssbuttons-io-button .icon svg {
    width: 1.1em;
    transition: transform 0.3s;
    color: #7b52b9;
}

.cssbuttons-io-button:hover .icon svg {
    transform: translateX(0.1em);
}

.cssbuttons-io-button:active .icon {
    transform: scale(0.95);
}

.packages .card img {
    width: 100%;
    height: 300px;
    border: 5px solid #ec048c;
    border-radius: 50% !important;
}

.packages .card {
    position: relative;
    border: none;
    margin: 40px;
}

.packages .circle-name {
    position: absolute;
    font-size:12px;
    padding: 15px;
    bottom: 10%;
    background: linear-gradient(93deg, #ff7b26, #ec048c);
    border-radius: 50%;
    right: 0%;
    height: 100px;
    width: 100px;
    display: flex;
    color: white;
    align-items: center;
    /* Centering vertically */
    justify-content: center;
    /* Centering horizontally */
    transition: all 0.3s ease;
    /* Smooth transition for hover effect */
    text-align: center;
}


.packages .card:hover .circle-name {
    height: 100%;
    /* Adjusted size for a subtle effect */
    width: 100%;
    right: 0;
    font-size: 30px;
    border: 4px solid white;
}

.card {
    background-color: transparent;
}

#packages {
    background-image: url('../img/packages/packages.jpeg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.packages .card h4 {
    text-align: center;
}

.packages .card .card-body {

    background-color: skyblue;
}

.service img {
    width: 100%;
    height: 250px;
}

.service .card h4 {
    text-align: center;
}

.service .card-body {
    background: linear-gradient(110deg, #fffbd0, #ffdede);
}

.service .card-body:hover {
    background: linear-gradient(110deg, #ffdede, #fffbd0);
}

footer {
    background-color: black;
    padding-top: 40px;
    color: white;
}

footer i {
    color: skyblue;
}

.footer-icon {
    height: 50px;
    width: 50px;
}

footer ol,
ul {
    padding-left: 0 !important;
}

footer h3 {
    color: skyblue;
}

footer ul li {
    list-style: none;
}

footer ul li a {
    color: white;
    font-size: 17px;
}

.footer-logo {
    height: 80px;
}

.footer {
    display: flex;
    justify-content: space-around;

    color: white;
    padding: 30px 0px;
    font-size: 20px;
}

.footer span {
    color: skyblue;
}

.footer a {
    color: skyblue;

}

.navbar {
    position: fixed;
    width: 100%;
    z-index: 9999;
    top: 0;
    /* background-color: #ffdede; */
    background: linear-gradient(110deg, #ffdede, #fffbd0);

}

.navbar .navbar-collapse ul .nav-item {
    padding: 0 20px;
    font-size: 20px;
    font-family: 'Montserrat', sans-serif;
    font-optical-sizing: auto;
    font-weight: 900 !important;
    font-style: normal;

}

.logo {
    height: 60px;
}

.fixed-icons {
    position: fixed;
    z-index: 999;
    top: 70%;
    right: 0;
}

.fixed-icons .whatsappp {
    background-color: #25D366;
    padding: 5px 5px 5px 10px;
    border-radius: 20px;
    color: white;
    margin-left: 20px;
}

.fixed-icons .whatsappp img {
    height: 50px;
    width: 50px;
}

.fixed-icons .phone {
    background-color: white;
    border: 2px solid #1E429D;
    padding: 5px 5px 5px 10px;
    border-radius: 20px;
    color: #1E429D;
    margin-left: 20px;
    margin-top: 10px;
}

.fixed-icons .phone img {
    height: 50px;
    width: 50px;
}


/* Contact Us Form Styles */
#contact-us {

    max-width: 600px;
    margin: 0 auto;
}

#contact-us h2 {
    text-align: center;
    margin-bottom: 20px;
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #ddb8b8 !important;

    /* Light color for input boxes */
}

::placeholder {
    color: black;
}

.form-group button {
    display: block;
    width: 100%;
    padding: 10px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
}

.form-group button:hover {
    background-color: #0056b3;
}

.contact-form {
    background-image: url('../img/contact-us.jpg');
}

.faq-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

.faq-header .icon {
    transition: transform 0.3s ease;
}

.faq-header.collapsed .icon {
    transform: rotate(180deg);
}

.faq button {
    text-decoration: none !important;
    font-size: 20px;

}

.faq-header {
    background: linear-gradient(110deg, #ffdede, #fffbd0);
}

.contact-card {
    max-width: 600px;
    margin: 0 auto;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.6);
    /* 0.6 opacity background */
}

.map-container {
    width: 100%;
    height: 200px;

}

.contact-details {
    padding: 20px;
    background-color: rgba(255, 255, 255, 0);
    /* Transparent background to avoid double opacity */
    color: #000;
    text-align: center;
    display: flex;
    justify-content: space-around;
    /* Ensure text remains opaque */
}

.extra-images img {
    width: 100%;
    height: 300px;
}

@media (max-width:768px) {
    footer {
        padding: 30px;
    }

    .packages .card {
        padding: 0px 0px;
        margin: 0;
    }

    .packages .card img {
        height: 190px;
    }

    .cssbuttons-io-button {
        margin: 0 20px;

    }

    .packages .circle-name {
        right: -5%;
    }

    .card-body {
        padding: 10px !important;
        height: 60px;
    }

    .card {
        margin-top: 20px !important;
    }

    .footer {
        justify-content: normal !important;
        display: block;
    }

    .fixed-icons .whatsappp span {
        display: none;
    }

    .fixed-icons .whatsappp {
        background-color: transparent;

    }

    .fixed-icons .whatsappp img {
        margin-left: 100px !important;

    }

    .fixed-icons .phone span {
        display: none;
    }

    .fixed-icons .phone {
        background-color: transparent;
        border: none;
    }

    .fixed-icons .phone img {
        margin-left: 100px !important;

    }


    .cssbuttons-io-button {
        font-size: 18px;
        padding: 10px
    }

    .box>img {
        width: 100%;
        margin-top: 30px;

    }

    .extra-images img {
        margin-top: 30px;
    }

}


@media (min-width:769px) {
    .gallery {
        display: flex;
        width: 100%;
        padding: 4% 2%;
        box-sizing: border-box;
        height: 100vh;
    }

    .box {
        flex: 1;
        overflow: hidden;
        transition: .5s;
        margin: 0 2%;
        box-shadow: 0 20px 30px rgba(0, 0, 0, .1);
        line-height: 0;
    }

    .box>img {
        width: 200%;
        height: calc(100% - 10vh);
        object-fit: cover;
        transition: .5s;
    }

    .box>span {
        font-size: 3.8vh;
        display: block;
        text-align: center;
        height: 10vh;
        line-height: 2.6;
    }

    .box:hover {
        flex: 1 1 50%;
    }

    .box:hover>img {
        width: 100%;
        height: 100%;
    }


}




ul {
    list-style-type: none;
    padding: 0;
}

li {
    padding: 10px 0;
    border-bottom: 1px solid #eee;
    font-weight:normal;
}

li:last-child {
    border-bottom: none;
}

.includes,
.excludes {
    margin-top: 20px;
}

.travel-package h1 {
    font-size: 35px;
}

.travel-package h2 {
    font-size: 28px;
}

.highlight {
    font-weight: bold;
    color: #f4b400;
}

.package-container {
    background-color: #fffbd0;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    max-width: 700px;
    margin: auto;
}

.duration-key {
    margin-bottom: 0rem !important;

}

.duration {
    font-weight: normal;
}

.duration-icon {
    padding-top: 9px;
    margin: 0 5px;
    font-size: 30px;
    color: #f4b400;
}

.table-wrapper {
    overflow-x: auto; /* Enables horizontal scrolling */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS devices */
    
}

.package-table,
.hotels-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 30px;

}

table {
    width: 100%; /* Ensure table takes up full width of the wrapper */
    border-collapse: collapse; /* Ensures borders are merged between cells */
  }
  

.package-table th,
.package-table td,
.hotels-table th,
.hotels-table td {
    border: 2px solid #dcdcdc;
    padding: 12px;
    text-align: center;
}

.package-table th {
    background-color: #fffbd0;
    /* gold */
    color: black;
    font-weight: bold;
}

.package-table td {
    background-color: #f7f7f5;
}

.hotels-table th {
    background-color: #fffbd0;
    /* light yellow */
    color: #333;
}

.hotels-table td {
    background-color: #f7f7f5;
}

.package-table td:nth-child(1),
.hotels-table td:nth-child(1) {
    font-weight: bold;
    color: #f4b400;

}

.account-details {
    display: flex;
    /* Enables Flexbox layout */
    justify-content: center;
    /* Centers the table horizontally */
    align-items: center;
    /* Centers the table vertically */

}

.account-details td,
.account-details th {
    border: 2px solid black;
    padding: 10px;
}


.account {
    position: relative;
    /* Positioning context for the pseudo-element */
    overflow: hidden;
    /* Ensures the pseudo-element doesn’t overflow the section */
}

.account::before {
    content: "";
    position: absolute;
    /* Position the pseudo-element absolutely within the section */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../img/accout.jpg') no-repeat center center;
    background-size: cover;
    /* Adjust as needed */
    opacity: 0.3;
    /* Set the desired opacity */
    z-index: -1;

    /* Place the pseudo-element behind the content */
}

.account-cont {
    position: relative;
    padding: 100px 0px;
    /* Ensure that the content is above the pseudo-element */
}



.contact-us-box {
    padding: 140px 60px 60px 60px;
    margin-top: 30px;
    color: white;
  text-align: center;
    height: 410px;
 

    position: relative;
    /* Positioning context for the pseudo-element */
    overflow: hidden;
    /* Ensures the pseudo-element doesn’t overflow the section */
}

.contact-us-box::before {
    content: "";
    position: absolute;
    /* Position the pseudo-element absolutely within the section */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../img/contact-box.jpg') no-repeat center center;
    background-size: cover;
    /* Adjust as needed */
    z-index: -2;
    /* Place the pseudo-element behind the content */
}

.contact-us-box::after {
    content: "";
    position: absolute;
    /* Position the pseudo-element absolutely within the section */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(139, 69, 19, 0.6);
    /* Brown color with opacity */
    z-index: -1;
    /* Place the overlay above the background image but below the content */
}

.container {
    position: relative;
    /* Ensure that the content is above the pseudo-elements */
    z-index: 1;
    /* Ensures content is above the overlays */
}


/* CSS */
.button-23 {
    background-color: #FFFFFF;
    border: 1px solid #222222;
    border-radius: 8px;
    box-sizing: border-box;
    color: #222222;
    cursor: pointer;
    display: inline-block;
    font-family: Circular, -apple-system, BlinkMacSystemFont, Roboto, 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    margin: 0;
    outline: none;
    padding: 13px 23px;
    position: relative;
    text-align: center;
    text-decoration: none;
    touch-action: manipulation;
    transition: box-shadow .2s, -ms-transform .1s, -webkit-transform .1s, transform .1s;
    user-select: none;
    -webkit-user-select: none;
    width: auto;
}

.button-23:focus-visible {
    box-shadow: #222222 0 0 0 2px, rgba(255, 255, 255, 0.8) 0 0 0 4px;
    transition: box-shadow .2s;
}

.button-23:active {
    background-color: #F7F7F7;
    border-color: #000000;
    transform: scale(.96);
}

.button-23:disabled {
    border-color: #DDDDDD;
    color: #DDDDDD;
    cursor: not-allowed;
    opacity: 1;
}

.accordion-body {
    font-weight: normal;
}

.accordion-button{
    font-weight: bold;
}

.fa-caret-right{
    padding:4px 10px;
    background-color:#f4b400;
    border-radius:10px;
}

@media (max-width:768px){
   .navbar-nav .dropdown-menu {
    position: static;
    width: auto;
}

  .navbar-nav .dropdown-menu li{
      padding: 5px !important;
}
    
    /* Apply padding and ensure the text inside the items wraps properly */
    .dropdown-item {
      padding: 0 !important;
      white-space: normal; /* Ensure wrapping within the dropdown item */
      overflow-wrap: break-word; /* Break words that are too long */
      word-break: break-word; /* Ensure the text wraps properly */
    }
}

/* Set a fixed width for the dropdown menu */
.dropdown-menu {
  width: 250px; /* Fixed width for the entire dropdown */
  white-space: normal; /* Allow text to wrap inside the dropdown */
  overflow-wrap: break-word; /* Break words that are too long */
  word-break: break-all; /* Break long words that exceed the width */
}

/* Apply padding and ensure the text inside the items wraps properly */
.dropdown-item {
  padding: 10px 15px;
  white-space: normal; /* Ensure wrapping within the dropdown item */
  overflow-wrap: break-word; /* Break words that are too long */
  word-break: break-word; /* Ensure the text wraps properly */
}



@media (max-width:425px){
    .account-cont{
        padding: 30px;

  
    }
}