body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }


  .sticky-header {
      background-color: black;
      color: white;
      padding: 10px 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
  }
  .social-icons {
      text-align: right;
      font-size: 14px;

  }
  .social-icons a {
    font-size: 14px;

      color: white;
      margin-right: 15px;
      text-decoration: none;
      margin-left: 15px;
  }

  .header-left {
      display: inline-block;
  }
  .header-left i, .header-left a {
      color: white;
      margin-right: 10px;
      text-decoration: none;
      display: inline-block;
  }
  .sign-buttons {
      text-align: center;
      font-size: 14px;
  }
  .sign-buttons a {
      color: white;
      text-decoration: none;
      margin-right: 15px;
      font-size: 14px;

  }

  .navbar {
    background-color: #333; /* Change this to your desired background color */
}

.navbar-brand {
    font-size: 18px; /* Change the font size as needed */
}

.navbar-toggler-icon {
    background-color: #fff; /* Change the color of the hamburger icon */
}

.navbar-nav .nav-link {
    color: #fff; /* Change the text color of nav links */
    font-size: 14px;
    font-weight:bold;
    margin:8px 14px;
    padding: 6px 12px; /* Change the font size as needed */
}

.navbar-nav .nav-item.active .nav-link {
    background-color: #fff; /* Change the background color of the active link */
    color: #2b2a2a; /* Change the text color of the active link */
    border-radius: 5px; /* Add rounded corners to the active link */
}

/* Dropdown menu styles */
.dropdown-menu {
    background-color: #333; /* Change the background color of dropdown menus */
}

.dropdown-item {
    color: #fff; /* Change the text color of dropdown items */
}

.dropdown-item:hover {
    background-color: #555; /* Change the background color on hover */
}

/* Submenu styles (if needed) */
.dropdown-submenu {
    position: relative;
}

.dropdown-submenu .dropdown-menu {
    top: 0;
    left: 100%;
    background-color: #333; /* Change the background color of submenu */
}

    

.btn{
    background: linear-gradient(8deg, #9932f5 0%, #4933f1 53%, #4950f8 70%, #496cfe 100%);


}

#myCarousel img {
    max-height: 600px;
    width: 100%; /* To maintain the aspect ratio */
}
.carousel-item {
    text-align: center;
}

.carousel-item img {
    max-width: 100%;
}

.d-md-inline.d-none .custom-btn {
    font-size: 16px;
    padding: 10px 20px;
    background-color: #ff6b6b; /* Background color */
    color: #fff; /* Text color */
    border: none;
    border-radius: 30px;
    transition: background-color 0.3s ease;
    text-decoration: none;
    margin-left: 20px; /* Add left margin */
}
.custom-btn:hover {
    background-color: #ff4d4d; /* Change background color on hover */
    text-decoration: none;
}


.main-menu ul li:nth-child(5) {
    margin-right: 20px; /* Add right margin to create space between "Blog" and "Contact Us" */
}


.content-section {
    background-color: #f8f8f8;
    padding: 30px;
    text-align: center;
}
.section-title {
    font-size: 24px;
    font-weight: bold;
}
.highlighted-text {
    color: #7040ff;
    font-weight: bold;
}
.underline {
    text-decoration: underline;
}
.content-paragraph {
    font-size: 18px;
}







.uniquesection {
    text-align: center;
    padding: 50px 0;
    margin: -20px;
}

.subheading {
    color: #7040ff;
}

.rectangle {
    width: 200px;
    height: 250px;
    font-size: medium;
    border: 1px solid rgb(183, 179, 179);
    margin: 10px;
    color:#fff;
    padding: 20px;
    transition: all 0.3s; 
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 20px; 
    /* Add transition for hover effect */
}

.rectangle img {
    max-width: 100%;
    height: auto;}

/* Add hover effect */
.rectangle:hover {
    transform: scale(1.05); /* Zoom-in effect */
    border-color:#7f6abd; /* Border color change on hover */
}


.background-section {
    background-color: #7f6abd;
    background-size: cover;
    background-position: center;
    padding: 100px 0;
    color: white;
}

.rectangle {
    background-color: rgba(0, 0, 0, 0.7);
    padding: 20px;
    margin: 20px 0;
    text-align: center;
}

.rectangle img {
    max-width: 100%;
}

.rectangle h4 {
    margin-top: 10px;
    font-size: 20px;
}

.rectangle p {
    font-size: 16px;
    line-height: 1.5;
}

.background-section {
    background-image: url('https://t4.ftcdn.net/jpg/05/23/82/37/360_F_523823772_rENIlsWUhzgdojXgODNZZd9WtiQokv72.jpg');
    background-size: cover;
    background-position: center;
    color: #fff;
    padding: 50px 0;
}

/* Style for the rectangles (image containers) */
.cover-image {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    width: 100%;
    padding-bottom: 5%;
}

/* Style for the highlighted content */
.highlighted-content {
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    text-align: center; /* Center the content within the container */
    margin-top: 10px; /* Add some space between the content and images */
}

/* Center the text in the content divs */
.highlighted-content .quote {
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    font-size: 18px;
    margin-bottom: 20px; /* Add space between quotes */
}

.quote cite {
    display: block;
    margin-top: 10px;
    font-style: italic;
    font-size: 16px;
    color: #888;
}

/* Center the text within the content containers */
.text-center {
    text-align: center;
}


.rt-site-footer {
    background-color: #3f51b5;
    color: #fff;
    padding: 40px 0;
}

.rt-footer-title {
    color: #fff;
}

.rt-useful-links li a {
    color: #fff;
    text-decoration: none;
}

.rt-useful-links li a:hover {
    text-decoration: underline;
}

.footer-bottom {
    background-color: #303f9f;
    padding: 10px 0;
}

.copy-text a {
    color: #fff;
    text-decoration: none;
}

.copy-text a:hover {
    text-decoration: underline;
}

.rt-footer-social ul {
    list-style: none;
    padding: 0;
}

.rt-footer-social ul li {
    display: inline-block;
    margin-right: 10px;
}

.rt-footer-social i {
    font-size: 24px;
    color: #fff;
}

.rt-footer-social i:hover {
    color: #FFD700; /* Change the color on hover */
}


/* Testimonial Item Styles */
.testimonial-item {
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 10px;
    transition: transform 0.3s, box-shadow 0.3s;
}

.testimonial-item:hover {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}

.testimonial-item img {
    max-width: 100%;
    border-radius: 50%;
}

.testimonial-item .rating {
    color: #ffc107; /* Yellow color for stars */
}

/* Pagination Styles */
.pagination {
    justify-content: center;
}

.page-link {
    background-color: #007bff; /* Blue color for page links */
    color: #fff;
}

.page-link:hover {
    background-color: #0056b3; /* Darker blue color on hover */
    color: #fff;
}

.page-item.active .page-link {
    background-color: #0056b3; /* Darker blue color for active page link */
}



/*-----------About us----------...*/
/* Style the banner container */
/* Remove text-align:center and set banner width to 100% */
.banner {
    width: 100%;
  }

  .banner .banner-image {
    max-width: 100%; /* Ensure the image doesn't exceed its natural width */
   /* Center the image horizontally */
    display: block; /* Ensure the image is treated as a block element */
  }
  
  /* Style the heading */
  .banner h1 {
    font-size: 36px;
    margin-top: 20px;
  }
  
  .text-heading {
    color: #121111;

  }

  .text-subheading{
    color: #121111;

  }
  /* Style the lead text */
  .banner .lead {
        font-family: 'Lato', sans-serif;
        font-size: 16px;
        line-height: 26px;
        margin-bottom: 10px;
    }


  
  /* Style the list items */
  .commitment-list{
    font-size: 16px;
        line-height: 20px;
  }
  /* Add a border and box shadow on hover for the banner */
  .banner:hover {
    border: 1px solid #007bff;
    box-shadow: 0 0 10px rgba(0, 123, 255, 0.5);
    transition: border 0.5s, box-shadow 0.5s;
  }
  
  /* Style the "Start Your Journey Today!" lead text */
  .banner .lead {
    font-size: 24px;
    margin-top: 30px;
  }
  
  /* Style the contact paragraph */
  .banner p:last-child {
    margin-top: 20px;
    font-weight: bold;
    color: #3f51b5; /* Adjust the color to your preference */
  }
  
  /* Add hover effect to the contact paragraph */
  .banner p:last-child:hover {
    color: #007bff;
    transition: color 0.5s;
  }
  
  .cta-section-title{
    font-size: 24px;
    line-height: 26px;
    margin-bottom: 10px;
  }

  .bg-gradient-section {
    height: 300px;
    border-radius: 12px;
    margin-right: 70px;
    margin-left: 70px;
    background: linear-gradient(8deg, #9932f5 0%, #4933f1 53%, #4950f8 70%, #496cfe 100%);
    display: flex;
    justify-content: center;
    align-items: center;
}

.bg-gradient-section h2 {
    font-size: 24px;
}


a.signup-btn {
    font-size: 16px; /* Increase font size */
    padding: 10px 90px;
    font-weight: bold; /* Add padding to make it larger */
    border-radius: 40px;
    color: white ;
    background-color: #bcb6b6;
    margin-top: 20px;
    border: 2px solid  #6b5a7b ;
    text-decoration:none;/* Make it more rounded */
  }
  /* Add your custom styles here */

  .custom-card {
    border-radius: 30px; /* Adjust border-radius as needed */
    transition: background-color 0.2s ease-in-out;
    margin: 0 15px; /* Add margin to both sides */
    padding: 20px;
    background-color: #fff;
    border: 2px solid #f3f2f2; 
    overflow: hidden;
    cursor: zoom-in;/* Default background color */
}

.custom-card:hover {
    background: linear-gradient(8deg, #9932f5 0%, #4933f1 53%, #4950f8 70%, #496cfe 100%);
    color:#fff;
    transition: transform 0.3s;
   

}

.custom-card:hover img {
    transform: scale(1.2); /* You can adjust the scale factor as needed */
    cursor: zoom-out;
}

/* Add more custom styles for other sections as needed */

    /* Contact ush */


  .contact-section {
    padding: 50px 0;
}

.section-title {
    font-size: 32px;
    margin-bottom: 20px;
}

.contact-info p {
    font-size: 18px;
}

.contact-form {
    margin-top: 20px;
}

.form-control {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
}

.submit-button {
    background: linear-gradient(8deg, #9932f5 0%, #4933f1 53%, #4950f8 70%, #496cfe 100%);    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 18px;
}



/* Style the beach destinations section */
.beach-destinations {
    background-color: #f8f9fa;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

.beach-destinations h2 {
    color: #007bff;
}

/* Style the beach destination cards */
.card {
    border: 1 px solid #d4d1d1;
    border-radius: 10px;
    transition: background-color 0.2s ease-in-out;

}


.card-title {
    font-weight: bold;
}

.card :hover{

    background: linear-gradient(8deg, #9932f5 0%, #4933f1 53%, #4950f8 70%, #496cfe 100%);
    color:#fff;
}


/* Style the booking form section */
.booking-form {
    background-color: #f8f9fa;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}




.booking-form h2 {
    color: #007bff;
}

/* Style the form elements in the booking form */
.booking-form .form-group {
    margin-bottom: 20px;
}

.booking-form label {
    font-weight: bold;
}

.booking-form .form-control {
    border: 1px solid #ced4da;
    border-radius: 5px;
    padding: 10px;
}

.booking-form select.form-control {
    appearance: none;
    background-image: url("arrow.png");
    background-position: right center;
    background-repeat: no-repeat;
}

.booking-form .btn-primary {
    background-color: #007bff;
    border: none;
    border-radius: 5px;
    color: #fff;
    padding: 10px 20px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.booking-form .btn-primary:hover {
    background-color: #0056b3;
}

.centered-heading {
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Ensure full viewport height */
}


/* Style blog post container */
.blog-post {
    margin-bottom: 30px;
}

/* Style the "Read More" button */
.read-more {
    display: block;
    margin-top: 10px;
}

/* Style the sidebar */
.sidebar {
    background-color: #f8f9fa;
    padding: 20px;
    border-radius: 5px;
}

.sidebar h3 {
    font-size: 18px;
    margin-top: 0;
}

.sidebar ul {
    list-style: none;
    padding: 0;
}

.sidebar ul li {
    margin-bottom: 10px;
}

.sidebar ul li a {
    text-decoration: none;
    color: #333;
    transition: color 0.3s;
}

.sidebar ul li a:hover {
    color: #007bff;
}



/***------------------***/


        .blog-header {
            width: 100%;
            max-height: 400px;
            overflow: hidden;
        }

        .blog-title {
            font-size: 24px;
            font-weight: bold;
            margin-top: 20px;
        }

        .blog-content {
            margin-top: 20px;
            font-size: 16px;
            line-height: 1.6;
        }