/*@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');*/

*{
    padding: 0;
    margin: 0;
    font-family: "Lato", sans-serif;
    font-weight: 100;
    font-style: normal;
}

body{
    position: relative;
    overflow-x: hidden;
}

a{
    text-decoration: none;
}

.modal-header {
    color: white !important;
}

.toast-container{
    z-index: 4444;
}

.preloader{
    display: flex;
    position: absolute;
    z-index: 9999999999;
    width: 100%;
    position: fixed;
    height: 100vh;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.221);
}


.preloader img{
    display: flex;
    width: 30px;
    height: 30px;
}

.active{
    color: goldenrod !important;
}

.page-top{
    display: flex;
    flex-direction: column;
    width: 100%;
    position: relative;
}

.social-nav{
    display: flex;
    width: 100%;
    background-color: #159143;
    padding: 10px 5%;
    align-items: center;
    justify-content: space-between;
}

.social-left{
    display: flex;
    gap: 4%;
    width: 50%;
    align-items: center;
}

.left-item{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    text-decoration: none;
}

.left-item:hover {
    text-decoration: none;
}

.left-item i{
    color: whitesmoke;
    font-size: 14px;
    opacity: .8;
}

.left-item span{
    color: whitesmoke;
    font-size: 14px;
    opacity: .6;
    font-weight: 400;
}

.social-right{
    display: flex;
    width: 50%;
    gap: 5%;
    padding-right: 5%;
    align-items: center;
    justify-content: flex-end;
}

.social-right a i{
    color: whitesmoke;
}

/* Navbar Codes Here */

/* Menu Toggle Icon */
.menu-toggle {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 30px;
    height: 25px;
    cursor: pointer;
    z-index: 1000;
    display: none;
  }
  
  .menu-toggle .bar {
    width: 100%;
    height: 4px;
    background-color: white;
    margin: 4px 0;
    transition: all 0.3s ease-in-out;
  }
  
  /* Navbar Styles */
  .navbar {
    display: flex;
    list-style: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background-color: #16a34a;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    transition: all 0.4s ease-in-out;
    z-index: 9999;
    display: none;
  }
  
  .navbar li {
    margin: 20px 0;
  }
  
  .navbar li a {
    text-decoration: none;
    color: white;
    font-size: 24px;
    transition: color 0.3s ease;
  }
  
  .navbar li a:hover {
    color: #ff6347;
  }
  
  /* Active State for Navbar */
  .navbar.active {
    display: flex;
    width: 250px;
  }
  
  /* Toggle Animation */
  .menu-toggle.active .bar:nth-child(1) {
    transform: rotate(-45deg) translate(-5px, 6px);
  }
  
  .menu-toggle.active .bar:nth-child(2) {
    opacity: 0;
  }
  
  .menu-toggle.active .bar:nth-child(3) {
    transform: rotate(45deg) translate(-5px, -6px);
  }

.navbar-main{
    display: flex;
    position: absolute;
    background-color: #15803d;
    top: 10%;
    left: 5%;
    z-index: 1111;
    align-items: center;
    justify-content: space-between;
    width: 90%;
    border-radius: 1px;
}

.nav-logo{
    display: flex;
    width: 10%;
    justify-content: center;
    padding: 10px;
    margin-right: 10px;
}

.nav-logo img{
    display: flex;
    width: 60px;
    height: 60px;
}

.nav-links{
    display: flex;
    width: 70%;
    justify-content: center;
    align-items: center;
    gap: 6%;
}

.nav-links a{
    display: flex;
    color: white;
    font-weight: 600;
    text-decoration: none;
}

.nav-links a:hover{
    color: whitesmoke;
}

.menuIcon{
    display: flex;
    padding: 0px 15px;
    display: none;
}

.menuIcon a{
    display: flex;
    text-decoration: none;
    font-size: 18px;
    color: black;
    opacity: .8;
}

.bookLink{
    display: flex;
    width: 15%;
}

.bookLink a{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #159143;
    color: white;
    font-weight: 600;
    padding: 6px 10px;
    gap: 2px;
    border-radius: 5px;
    text-decoration: none;
}

.bookLink a:hover{
    text-decoration: none;
}

/* The sticky class is added to the navbar with JS when it reaches its scroll position */
.sticky {
    position: fixed;
    top: 10px;
    left: 5%;
    z-index: 2222;
}
  
/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
.sticky + .content {
    padding-top: 60px;
}
/* Navbar Codes Ends Here */


.home-carousel{
    display: flex;
    width: 100%;
}

.caroul-overlay{
    display: flex;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.603);
}

.caroul-item{
    display: flex;
    width: 100%;
    position: relative;
    height: 90vh !important;
}

.caroul-item img{
    display: flex;
    width: 100%;
    height: 90vh;
}

.caroul-item .captions{
    display: flex;
    width: 60%;
    flex-direction: column;
    position: absolute;
    top: 32%;
    left: 3%;
    z-index: 1111;
}

.myh3{
    font-size: 34px;
    font-weight: 600;
    color: white;
    font-style: italic;
    width: 80%;
}

.txt{
    color: white;
    opacity: .8;
    font-weight: 500;
    width: 60%;
    margin-left: -19%;
    text-align: justify;
}


/* Booking Banner */

.book-banner{
    display: flex;
    position: absolute;
    background-color: #159143;
    bottom: 10%;
    left: 8%;
    width: 83%;
    align-items: center;
    justify-content: center;
    gap: 5%;
    padding: 25px 0;
}

.book-card{
    display: flex;
    flex-direction: column;
    width: 15%;
    border: 1px solid #159143;
    padding: 1px 5px;
    border-radius: 2px;
}

.book-card span{
    font-size: 14px;
    font-weight: 600;
    opacity: .7;
    color: whitesmoke;
    font-style: italic;
}

.select2{
    width: 100% !important;
}

.book-card input{
    display: flex;
    border: 0;
    width: 100%; 
    height: 100%;
}

.searchedCol{
    display: flex !important;
    flex-direction: column !important;
}

#customAlert {
    display: none;
    position: fixed;
    top: 25%;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 99999999999 !important; /* Above everything else */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06);
    border-radius: 10px;
    animation: slideDown 0.5s ease-out;
  }

  @keyframes slideDown {
    from {
      opacity: 0;
      transform: translate(-50%, -20%);
    }
    to {
      opacity: 1;
      transform: translate(-50%, 0);
    }
  }

  .alert-content {
    display: flex;
    align-items: center;
    padding: 10px;
  }

  .alert-icon {
    font-size: 20px;
    margin-right: 15px;
    color: #159143;
  }

  .top-notice{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 10%;
    background-color: #0000002e;
    color: white;
    padding: 10px 0;
    text-align: center;
    z-index: 99999999999 !important; /* Above everything else */
  }

  .notification-banner {
    position: fixed;
    top: -200px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 400px;
    background-color: white;
    color: #333;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: top 0.4s ease-in-out;
    display: flex;
    align-items: center;
    gap: 15px;
    z-index: 99999999999 !important;
}

.notification-banner.show {
    top: 20px;
}

.notification-icon {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    background-color: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.notification-icon img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.notification-content {
    text-align: left;
}

.notification-content p {
    margin: 0;
    font-size: 16px;
}

.notification-content span {
    display: block;
    font-size: 14px;
    color: #666;
}

.close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 18px;
    color: #999;
    cursor: pointer;
}

.close-btn:hover {
    color: #333;
}

.book-card .myform-control{
    display: flex;
    width: 100%;
    height: 100%;
    background-color: transparent;
    border: 0;
    font-size: 14px;
    font-weight: 500;
    padding: 4px;
}

.filter-wrapper {
    position: relative;
    padding-left: 5%;
  }

  .filter-icon {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 20%;
    cursor: pointer;
    font-size: 18px;
    color: #15803d;
    padding: 10px 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }

  .filter-container {
    position: absolute;
    top: 50px;
    left: 5%;
    background: white;
    padding: 20px 30px;
    border-radius: 12px;
    z-index: 222;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    display: none;
    flex-direction: column;
    animation: slideDown 0.3s ease-in-out;
  }

  .filter-container.show {
    display: flex;
  }

  @keyframes slideDown {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  h2 {
    margin: 0 0 15px;
    text-align: center;
    color: #333;
  }

  .filter-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .filter-options select {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 16px;
  }

  .filter-results {
    text-align: center;
    margin-top: 15px;
    font-size: 18px;
    color: #555;
  }

/* Custom styles for Selectize select box container */
.selectize-dropdown-content {
    /* Add your styles here */
    background-color: #f9f9f9 !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-results__option--highlighted[aria-selected]:hover {
    background-color: #15803d !important;
    color: #fff;
}

option.active{
    background-color: #15803d !important;
}

.book-card:last-child{
    display: flex;
    height: 100%;
    justify-content: center;
    align-items: center;
    color: white;
    padding: 8px;
    border: 1px solid #15803d;
    background-color: #15803d;
    margin-top: 1.5%;
}

.book-card a{
    color: white;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
}

/* About section */

.about-section{
    display: flex;
    width: 100%;
    height: 450px;
    align-items: center;
    justify-content: center;
}

.about-img{
    display: flex;
    width: 40%;
    height: 70%;
}

.about-img img{
    display: flex;
    width: 90%;
}

.head-second{
    display: flex;
    width: 40%;
    height: 60%;
    flex-direction: column;
}

.head-second h3{
    font-size: 34px;
    font-weight: 700;
}

.head-second span{
    display: flex;
    font-size: 24px;
    text-align: justify;
    font-weight: 300;
}

/*Rates Section */
.rates-section{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 250px;
    background-color: #d6e4dbef;
}

.rate-item{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 30%;
    margin: 10px;
    gap: 15px;
}

.rate-item i{
    font-weight: 700;
    font-size: 34px;
    color: #159143;
}

.rate-item strong{
    font-size: 34px;
    color: #159143;
    font-style: italic;
}

.rate-item span{
    font-size: 18px;
    color: #159143;
    font-weight: 300;
}

/* Offers Section */
.offers-section{
    display: flex;
    width: 100%;
    min-height: 450px;
    justify-content: center;
    padding: 5% 10px;
    flex-direction: column;
}

.offers-header{
    display: flex;
    width: 100%;
    justify-content: center;
    font-size: 28px;
    font-style: italic;
    font-weight: 500;
    text-decoration: underline;
    color: #159143;
    font-family: Georgia, 'Times New Roman', Times, serif;
}

.offers{
    display: flex;
    width: 95%;
    gap: 20px;
    align-items: center;
    margin: 5%;
    flex-wrap: wrap;
}

.offer{
    display: flex;
    width: 30%;
    flex-direction: column;
    height: 70%;
    justify-content: center;
}

.img{
    display: flex;
    width: 100%;
}

.img img{
    display: flex;
    width: 100%;
    height: 250px;
    border-radius: 5px;
}

.details{
    display: flex;
    flex-direction: column;
}

.details span{
    font-size: 24px;
    font-weight: 600;
}

#submitBtn{
    background-color: #159143;
    color: white;
}

.modal {
    z-index: 999999999 !important;
}

.modal-header {
    background-color: #159143 !important;
    border-bottom: 1px solid #159143 !important;
}

.modal-body{
    padding: 2% !important;
}

.details a{
    display: flex;
    text-decoration: none;
    font-size: 12px;
    background-color: #159143;
    width: 25%;
    justify-content: center;
    align-items: center;
    color: white;
    font-weight: 500;
    padding: 8px 0;
    margin: 5px 0;
}

/* Services Section */
.services-section{
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 450px;
    background-color: #f2f2f2;
    justify-content: center;
    align-items: center;
}

.service-slider{
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    gap: 1%;
}

.service{
    display: flex;
    width: 22%;
    flex-direction: column;
    position: relative;
    height: 360px;
}

.service img{
    display: flex;
    width: 100%;
    height: 100%;
}

.shead{
    display: flex;
    position: absolute;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.525);
    flex-direction: column;
    gap: 2%;
}

.shead span{
    font-size: 24px;
    color: #159143;
    font-weight: 600;
    text-align: center;
    font-style: italic;
}

.shead .sTxt{
    display: flex;
    width: 80%;
    text-align: center;
    font-size: 14px;
    color: white;
    font-weight: 400;
}


/* News Letter Request */
.news-section{
    display: flex;
    width: 100%;
    background-color: #159143;
    justify-content: center;
    align-items: center;
    padding: 5% 0;
}

.news-request{
    display: flex;
    flex-direction: column;
    width: 70%;
    justify-content: center;
    align-items: center;
}

.news-request strong{
    font-size: 28px;
    font-style: italic;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-weight: 600;
    color: white;
    margin: 10px 0;
}

.news-request span{
    display: flex;
    width: 70%;
    text-align: center;
    font-size: 20px;
    font-weight: 500;
    margin: 10px 0;
}

.newsInput{
    display: flex;
    width: 80%;
    justify-content: space-between;
    margin: 10px 0;
    border: 1.5px solid white;
    background-color: white;
}

.newsInput a{
    display: flex;
    width: 10%;
    justify-content: center;
    align-items: center;
    padding: 15px 0;
    font-size: 24px;
    text-decoration: none;
    color: #15803d;
}

.newsInput input{
    display: flex;
    width: 90%;
    padding: 15px;
    border: 0;
    font-size: 14px;
    font-weight: 400;
}

/* Footer Section */
.footer-section{
    display: flex;
    width: 100%;
    min-height: 450px;
    padding-bottom: 10px;
    margin-bottom: -10% !important;
    background-color: #212327;
    flex-direction: column;
    align-items: center;
}

.footer-items{
    display: flex;
    width: 90%;
    align-items: baseline;
    gap: 5%;
    padding: 2%;
    padding-top: 8%;
}

.footer-item{
    display: flex;
    width: 25%;
    flex-direction: column;
    gap: 15px;
}

.footer-item:nth-child(2){
    width: 40%;
}

.item-head{
    display: flex;
    font-size: 18px;
    color: white;
    font-weight: 600;
    opacity: .9;
}

.item-text{
    display: flex;
    width: 100%;
    text-align: justify;
    color: white;
    opacity: .6;
    font-size: 14px;
    font-weight: 400;
}

.item-links{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.item-links a{
    display: flex;
    text-decoration: none;
    color: white;
    font-size: 14px;
    font-weight: 400;
    opacity: .6;
}

.item-links a:hover{
    color: #15803d;
}

.footer-section hr{
    display: flex;
    width: 90%;
    background-color: gray;
}

.footer-copyright{
    display: flex;
    width: 90%;
    padding: 0px 0 5px 0;
    margin-bottom: 5px;
    justify-content: space-between;
}

.txt1{
    display: flex;
    color: white;
    opacity: .6;
    font-size: 12px;
    font-weight: 400;
    gap: 4px;
    align-items: center;
}

.txt1 a{
    font-weight: 400;
}

.footer-social{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

.footer-social a{
    display: flex;
    text-decoration: none;
    color: #15803d;
    font-size: 12px;
    font-weight: 400;
}

.fa-heart{
    color: red;
}

.myToast{
    display: none !important;
    position: absolute;
    top: 0;
    right: 10px !important;
}

.myToastActive{
    display: flex !important;
}

.myToastErr{
    display: flex !important;
    flex-direction: column;
}

.myToastErr .toast-body{
    color: white !important;
    background-color: #17a2b8 !important;
}

.myToastErr .toast-header{
    color: white !important;
    background-color: #17a2b8 !important;
}

.myToastSuc{
    display: flex !important;
    flex-direction: column;
}

.myToastSuc .toast-body{
    background-color: rgb(27, 154, 27) !important;
    color: white !important;
}

.myToastSuc .toast-header{
    color: white !important;
    background-color: green !important;
}

.hotel-about-text2 p{
    text-align: left !important;
}

@media only screen and (max-width: 420px){
    .social-nav{
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 10px 0%;
        gap: 5px;
        align-items: center;
        justify-content: center;
    }
    
    .social-left{
        display: flex;
        gap: 4%;
        width: 100%;
        justify-content: center;
        align-items: center;
    }
    
    .social-right{
        display: flex;
        width: 100%;
        gap: 10%;
        padding-right: 5%;
        align-items: center;
        justify-content: center;
    }

    .navbar-main{
        justify-content: space-between;
        width: 90%;
        border-radius: 1px;
        top: 30%;
    }

    .sticky {
        top: 2% !important;
    }

    
    .nav-logo{
        display: flex;
        width: 50%;
        justify-content: flex-start;
        padding: 10px;
        margin-right: 10px;
    }
    
    .nav-logo img{
        display: flex;
        width: 50px;
        height: 50px;
    }
    
    .nav-links{
        display: none;
    }

    .bookLink{
        display: none;
    }

    .menu-toggle{
        display: block;
    }

    .home-carousel{
        display: flex;
        width: 100%;
    }
    
    .caroul-item{
        display: flex;
        width: 100%;
        position: relative;
        height: 90vh !important;
    }
    
    .caroul-item img{
        display: flex;
        width: 100%;
    }
    
    .caroul-item .captions{
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 10%;
        width: 100%;
        left: 5%;
        z-index: 1111;
    }
    
    .myh3{
        font-size: 1.5rem;
        font-weight: 600;
        font-style: italic;
        width: 100%;
    }
    
    .txt{
        opacity: .8;
        font-weight: 500;
        width: 80%;
        margin-left: -20% !important;
        font-size: .9rem;
        display: none;
    }

    .book-banner{
        display: flex;
        position: absolute;
        bottom: 0%;
        flex-direction: column;
        left: 0%;
        width: 100%;
        align-items: center;
        justify-content: center;
        gap: 5%;
        padding: 5px 0;
    }
    
    .book-card{
        display: flex;
        flex-direction: column;
        width: 96%;
        margin: 5px 0;
        padding: 1px 5px;
        border-radius: 2px;
    }

    .filter-icon {
        width: 90%;
      }
    
    .book-card span{
        font-size: 14px;
        font-weight: 600;
        opacity: .7;
        font-style: italic;
    }
    
    .book-card input{
        display: flex;
        border: 0;
        width: 100%; 
        height: 100%;
    }
    
    
    .book-card .myform-control{
        display: flex;
        width: 100%;
        height: 100%;
        background-color: transparent;
        border: 0;
        font-size: 14px;
        font-weight: 500;
        padding: 4px;
    }

    .book-card input{
        width: 100%;
    }

    .about-section{
        display: flex;
        width: 100%;
        flex-direction: column;
        height: auto;
        align-items: center;
        padding-top: 15%;
        padding-bottom: 10%;
        justify-content: center;
    }
    
    .about-img{
        display: flex;
        width: 96%;
        height: 70%;
    }
    
    .about-img img{
        display: flex;
        width: 90%;
    }
    
    .head-second{
        display: flex;
        width: 90%;
        height: 60%;
        flex-direction: column;
    }
    
    .head-second h3{
        font-size: 24px;
        margin: 10px 0;
        font-weight: 700;
    }
    
    .head-second span{
        display: flex;
        font-size: 18px;
        text-align: justify;
        font-weight: 300;
    }

    .rates-section{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 450px;
        gap: 5%;
    }
    
    .rate-item{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        margin: 5px 0;
        gap: 1px;
    }
    
    .rate-item i{
        font-weight: 700;
        font-size: 24px;
    }
    
    .rate-item strong{
        font-size: 24px;
        font-style: italic;
    }
    
    .rate-item span{
        font-size: 18px;
        font-weight: 300;
    } 

    .offers-section{
        display: flex;
        width: 100%;
        min-height: 450px;
        justify-content: center;
        padding: 5% 10px;
        flex-direction: column;
    }
    
    .offers-header{
        display: flex;
        width: 100%;
        justify-content: center;
        text-align: center;
        font-size: 24px;
        font-style: italic;
        font-weight: 500;
        text-decoration: underline;
        font-family: Georgia, 'Times New Roman', Times, serif;
    }
    
    .offers{
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 20px;
        align-items: center;
        margin: 5%;
        flex-wrap: wrap;
    }
    
    .offer{
        display: flex;
        width: 90%;
        flex-direction: column;
        height: 70%;
        justify-content: center;
    }
   
    .services-section{
        display: flex;
        flex-direction: column;
        width: 100%;
        min-height: 450px;
        justify-content: center;
        align-items: center;
        padding-bottom: 5%;
    }
    
    .service-slider{
        display: flex;
        flex-direction: column;
        width: 100%;
        justify-content: center;
        align-items: center;
        gap: 1%;
    }
    
    .service{
        display: flex;
        width: 90%;
        flex-direction: column;
        position: relative;
        height: 360px;
    }
    
    .service img{
        display: flex;
        width: 100%;
        height: 100%;
    }
    
    .shead{
        display: flex;
        position: absolute;
        width: 100%;
        height: 100%;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 2%;
    }
    
    .shead span{
        font-size: 24px;
        font-weight: 500;
        text-align: center;
        font-style: italic;
    }
    
    .shead .sTxt{
        display: flex;
        width: 80%;
        text-align: center;
        font-size: 18px;
        font-weight: 400;
    }

    .news-section{
        display: flex;
        width: 100%;
        justify-content: center;
        align-items: center;
        padding: 5% 0;
    }
    
    .news-request{
        display: flex;
        flex-direction: column;
        width: 96%;
        justify-content: center;
        align-items: center;
    }
    
    .news-request strong{
        display: flex;
        width: 70%;
        font-size: 24px;
        font-style: italic;
        font-family: Georgia, 'Times New Roman', Times, serif;
        font-weight: 600;
        margin: 10px 0;
        text-align: center;
    }
    
    .news-request span{
        display: flex;
        width: 90%;
        text-align: center;
        font-size: 20px;
        font-weight: 500;
        margin: 10px 0;
    }
    
    .newsInput{
        display: flex;
        width: 80%;
        justify-content: space-between;
        margin: 10px 0;
    }
    
    .newsInput a{
        display: flex;
        width: 10%;
        justify-content: center;
        align-items: center;
        padding: 15px 15px;
        font-size: 24px;
        text-decoration: none;
    }

    .footer-section{
        display: flex;
        width: 100%;
        min-height: 450px;
        padding-bottom: 10px;
        flex-direction: column;
        align-items: center;
    }
    
    .footer-items{
        display: flex;
        flex-direction: column;
        width: 100%;
        align-items: baseline;
        gap: 15%;
        padding: 8%;
    }
    
    .footer-item{
        display: flex;
        width: 80%;
        margin: 10px 0;
        flex-direction: column;
        gap: 15px;
    }
    
    .item-head{
        display: flex;
        font-size: 18px;
        font-weight: 600;
        opacity: .9;
    }
    
    .item-text{
        display: flex;
        width: 100%;
        text-align: justify;
        opacity: .6;
        font-size: 14px;
        font-weight: 400;
    }
    
    .item-links{
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    
    .item-links a{
        display: flex;
        text-decoration: none;
        font-size: 14px;
        font-weight: 400;
        opacity: .6;
    }
    
    .footer-section hr{
        display: flex;
        width: 90%;
    }
    
    .footer-copyright{
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 0px 0 5px 0;
        margin-bottom: 5px;
        justify-content: space-between;
    }
    
    .txt1{
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        text-align: center;
        opacity: .6;
        font-size: 12px;
        font-weight: 400;
        gap: 4px;
        justify-content: center;
        align-items: center;
    }

    .footer-social{
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 15px;
        margin-top: 10px;
    }

    .myabout-section{
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 5% 0;
    }
    
    .about-first{
        display: flex;
        width: 100%;
        gap: 20px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    
    .about-first img{
        display: flex;
        width: 70%;
        height: 80px;
        border-radius: 5px;
    }
    
    .about-first h4{
        display: flex;
        width: 80%;
        text-align: center;
        font-size: 24px;
        font-weight: 600;
    }
    
    .about-first p{
        display: flex;
        width: 100% !important;
        font-size: 18px;
        text-align: center;
    }
    
    .about-video{
        display: flex;
        width: 100%;
        justify-content: center;
        align-items: center;
        padding: 5% 0;
    }
    
    .about-video video{
        display: flex;
        width: 70%;
    }

    .rooms{
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        width: 100%;
        padding: 4%;
        gap: 5%;
    }
    
    .room{
        display: flex;
        flex-direction: column;
        text-decoration: none;
        width: 96% !important;
        margin: 20px 0;
    }
    
    .room:hover{
        text-decoration: none;
    }
    
    .room-img{
        display: flex;
        width: 100%;
        position: relative;
    }
    
    .room-img img{
        display: flex;
        width: 100%;
        height: 250px;
        transition: .5s;
    }
    
    .room-img img:hover{
        transform: scaleX(2);
    }
    
    .imgOverlay{
        display: flex;
        position: absolute;
        width: 100%;
        height: 100%;
        transition: .5s;
    }
    
    .imgOverlay:hover{
        background-color: rgba(0, 0, 0, 0.252);
    }
    
    .room-details{
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 5px 0;
    }
    
    .roomHead{
        display: flex;
        font-size: 18px;
        font-weight: 600;
    }
    
    .roomPrice{
        display: flex;
        font-size: 16px;
        font-weight: 700;
        align-items: center;
        opacity: .6;
    }
    
    .roomServices{
        display: flex;
        width: 100%;
        gap: 10px;
        margin: 5% 0;
        padding: 5px 0;
    }

    .single-view{
        display: flex;
        flex-direction: column !important;
        width: 100%;
        padding: 20px 0;
    }
    
    .single-left{
        display: flex;
        width: 100% !important;
        padding: 10px;
        flex-direction: column;
        gap: 25px;
    }
    
    .singleBar{
        display: flex;
        width: 100% !important;
        padding: 15px;
        align-items: center;
        justify-content: space-between;
        border-radius: 5px;
    }
    
    .price{
        display: flex;
        width: 100%;
        font-size: 18px;
        font-weight: 800;
        opacity: .7;
        align-items: center;
    }
    
    .btnBook{
        display: flex;
        font-size: 18px;
        font-weight: 500;
        justify-content: center;
        align-items: center;
        text-decoration: none;
        padding: 10px;
    }
    
    .btnBook:hover{
        text-decoration: none;
        opacity: 1;
    }
    
    .room-informations{
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 5%;
    }
    
    .room-photo{
        display: flex;
        width: 90% !important;
    }
    
    .room-photo img{
        display: flex;
        width: 100%;
    }
    
    .room-info{
        display: flex;
        width: 100%;
        flex-direction: column;
    }
    
    .hd{
        display: flex;
        font-size: 20px;
        padding: 5px 0;
        font-weight: 600;
    }
    
    .amenitys{
        display: flex;
        width: 100% !important;
        flex-wrap: wrap;
        padding: 15px;
        gap: 10%;
        margin: 10px 0;
    }
    
    .amenity{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5px;
        margin: 10px;
    }
    
    .amenity i{
        font-size: 16px;
        padding: 10px;
        border-radius: 100%;
    }
    
    .amenity span{
        display: flex;
        font-size: 12px;
        font-weight: 500;
    }
    
    .single-right{
        display: flex;
        flex-direction: column;
        width: 100% !important;
        padding: 10px 10px;
    }
    
    .rightHead{
        display: flex;
        font-size: 18px;
        font-weight: 600;
    }
    
    .tab-rooms{
        width: 90%;
    }

    .contactus{
        display: flex;
        flex-direction: column;
        width: 100%;
        justify-content: center;
        align-items: center;
        padding: 5% 0;
    }
    
    .contact-txt{
        display: flex;
        width: 100% !important;
        flex-direction: column;
        align-items: center;
    }
    
    .contact-txt p{
        display: flex;
        width: 98% !important;
        text-align: center;
    }
    
    .contact-txt p:first-child{
        font-size: 26px;
        font-weight: 700;
    }
    
    #loc{
        width: 100%;
        font-size: 24px;
        align-items: center;
        justify-content: center;
        text-align: center;
        font-weight: 600;
    }
    
    .contact-forms{
        display: flex;
        flex-direction: column !important;
        width: 100%;
        padding: 3% 5%;
    }
    
    .form-left{
        display: flex;
        width: 100% !important;
        flex-direction: column;
        gap: 25px;
    }
    
    .form-item{
        display: flex;
        gap: 20px;
        align-items: center;
    }
    
    .form-group{
        margin: 12px 0;
    }
    
    .form-item a{
        display: flex;
        font-size: 16px;
        font-weight: 500;
    }
    
    .form-item i{
        font-size: 18px !important;
        font-weight: 500;
    }
    
    .leaveMSG{
        display: flex;
        font-size: 24px;
        font-weight: 500;
    }

    .form-right{
        display: flex;
        flex-direction: column;
        width: 100% !important;
        padding: 5% 4%;
    }
    
    .form-right h4{
        font-size: 14px;
        font-style: italic;
    }
    
    .p-forms{
        margin-top: 5%;
    }
    
    .btn-successs{
        margin-top: 5%;
        border: 0;
        padding: 10px;
    }

    .form-confirm{
        display: flex;
        position: absolute;
        z-index: 3333;
        top: 0;
        width: 100%;
        height: 100%;
        justify-content: center;
        position: fixed;
        display: none;
        transition: 2s;
    }

    .form-confirmh{
        display: flex;
        position: absolute;
        z-index: 3333;
        top: 0;
        width: 100%;
        height: 100%;
        justify-content: center;
        position: fixed;
        display: none;
        transition: 2s;
    }
    
    .form-success{
        display: flex;
        position: absolute;
        z-index: 3333;
        top: 0;
        width: 100%;
        height: 100%;
        justify-content: center;
        position: fixed;
        display: none;
        transition: 2s;
    }
    
    .confirm-card{
        display: flex;
        flex-direction: column;
        width: 98% !important;
        margin-top: 15%;
        height: fit-content;
        height: 300px;
        border-radius: 10px;
        position: relative;
        align-items: center;
        padding: 2% 0;
        justify-content: center;
    }
    
    .closeBtn{
        display: flex;
        position: absolute;
        right: 15px;
        top: 10px;
    }
    
    .closeBtn a{
        display: flex;
        text-decoration: none;
    }
    
    .cImg{
        display: flex;
        width: 50%;
        justify-content: center;
        align-items: center;
    }
    
    .cImg i{
        font-size: 42px;
        color: green;
    }
    
    .terms{
        display: flex;
        flex-direction: column;
        margin: 10px 0;
        width: 80%;
        align-items: center;
    }
    
    .terms p{
        font-weight: 400;
    }
    
    .terms-forms{
        display: flex;
        width: 100%;
        align-items: center;
        flex-direction: column;
    }
    
    .terms-forms p{
        text-align: center;
        font-weight: 400;
        font-size: 14px;
    }
    
    .terms a{
        font-weight: 400;
    }
    
    .terms .proceed{
        display: flex;
        text-decoration: none;
        padding: 8px 15px;
        font-weight: 400;
        border-radius: 5px;
    }
}


@media only screen and (max-width: 810px){
    .social-nav{
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 10px 0%;
        gap: 5px;
        align-items: center;
        justify-content: center;
    }
    
    .social-left{
        display: flex;
        gap: 4%;
        width: 100%;
        justify-content: center;
        align-items: center;
    }
    
    .social-right{
        display: flex;
        width: 100%;
        gap: 10%;
        padding-right: 5%;
        align-items: center;
        justify-content: center;
    }

    .navbar-main{
        justify-content: space-between;
        width: 90%;
        border-radius: 1px;
        top: 14%;
    }
    
    .nav-logo{
        display: flex;
        width: 50%;
        justify-content: flex-start;
        padding: 10px;
        margin-right: 10px;
    }
    
    .nav-logo img{
        display: flex;
        width: 50px;
        height: 50px;
    }
    
    .nav-links{
        display: none;
    }

    .bookLink{
        display: none;
    }

    .menu-toggle{
        display: block;
    }

    .home-carousel{
        display: flex;
        width: 100%;
        max-height: 50vh !important;
    }

    .sticky {
        top: 6% !important;
    }
    
    .caroul-item{
        display: flex;
        width: 100%;
        position: relative;
    }
    
    .caroul-item img{
        display: flex;
        width: 100%;
    }
    
    .caroul-item .captions{
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 10%;
        width: 100%;
        left: 5%;
        z-index: 1111;
    }
    
    .myh3{
        font-size: 1.5rem;
        font-weight: 600;
        font-style: italic;
        width: 100%;
    }
    
    .txt{
        opacity: .8;
        font-weight: 500;
        width: 80%;
        margin-left: -20% !important;
        font-size: .9rem;
    }

    .book-banner{
        display: flex;
        position: absolute;
        bottom: 0%;
        flex-direction: column;
        left: 0%;
        width: 100%;
        align-items: center;
        justify-content: center;
        gap: 5%;
        padding: 5px 0;
    }
    
    .book-card{
        display: flex;
        flex-direction: column;
        width: 96%;
        margin: 5px 0;
        padding: 1px 5px;
        border-radius: 2px;
    }

    .filter-icon {
        width: 90%;
      }
    
    .book-card span{
        font-size: 14px;
        font-weight: 600;
        opacity: .7;
        font-style: italic;
    }
    
    .book-card input{
        display: flex;
        border: 0;
        width: 100%; 
        height: 100%;
    }
    
    
    .book-card .myform-control{
        display: flex;
        width: 100%;
        height: 100%;
        background-color: transparent;
        border: 0;
        font-size: 14px;
        font-weight: 500;
        padding: 4px;
    }

    .book-card input{
        width: 100%;
    }

    .about-section{
        display: flex;
        width: 100%;
        flex-direction: column;
        height: auto;
        align-items: center;
        padding-top: 15%;
        padding-bottom: 10%;
        justify-content: center;
    }
    
    .about-img{
        display: flex;
        width: 96%;
        height: 70%;
    }
    
    .about-img img{
        display: flex;
        width: 90%;
    }
    
    .head-second{
        display: flex;
        width: 90%;
        height: 60%;
        flex-direction: column;
    }
    
    .head-second h3{
        font-size: 24px;
        margin: 10px 0;
        font-weight: 700;
    }
    
    .head-second span{
        display: flex;
        font-size: 18px;
        text-align: justify;
        font-weight: 300;
    }

    .rates-section{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 450px;
        gap: 5%;
    }
    
    .rate-item{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        margin: 5px 0;
        gap: 1px;
    }
    
    .rate-item i{
        font-weight: 700;
        font-size: 24px;
    }
    
    .rate-item strong{
        font-size: 24px;
        font-style: italic;
    }
    
    .rate-item span{
        font-size: 18px;
        font-weight: 300;
    } 

    .offers-section{
        display: flex;
        width: 100%;
        min-height: 450px;
        justify-content: center;
        padding: 5% 10px;
        flex-direction: column;
    }
    
    .offers-header{
        display: flex;
        width: 100%;
        justify-content: center;
        text-align: center;
        font-size: 24px;
        font-style: italic;
        font-weight: 500;
        text-decoration: underline;
        font-family: Georgia, 'Times New Roman', Times, serif;
    }
    
    .offers{
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 20px;
        align-items: center;
        margin: 5%;
        flex-wrap: wrap;
    }
    
    .offer{
        display: flex;
        width: 90%;
        flex-direction: column;
        height: 70%;
        justify-content: center;
    }
   
    .services-section{
        display: flex;
        flex-direction: column;
        width: 100%;
        min-height: 450px;
        justify-content: center;
        align-items: center;
        padding-bottom: 5%;
    }
    
    .service-slider{
        display: flex;
        flex-direction: column;
        width: 100%;
        justify-content: center;
        align-items: center;
        gap: 1%;
    }
    
    .service{
        display: flex;
        width: 90%;
        flex-direction: column;
        position: relative;
        height: 360px;
    }
    
    .service img{
        display: flex;
        width: 100%;
        height: 100%;
    }
    
    .shead{
        display: flex;
        position: absolute;
        width: 100%;
        height: 100%;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 2%;
    }
    
    .shead span{
        font-size: 24px;
        font-weight: 500;
        text-align: center;
        font-style: italic;
    }
    
    .shead .sTxt{
        display: flex;
        width: 80%;
        text-align: center;
        font-size: 18px;
        font-weight: 400;
    }

    .news-section{
        display: flex;
        width: 100%;
        justify-content: center;
        align-items: center;
        padding: 5% 0;
    }
    
    .news-request{
        display: flex;
        flex-direction: column;
        width: 96%;
        justify-content: center;
        align-items: center;
    }
    
    .news-request strong{
        display: flex;
        width: 70%;
        font-size: 24px;
        font-style: italic;
        font-family: Georgia, 'Times New Roman', Times, serif;
        font-weight: 600;
        margin: 10px 0;
        text-align: center;
    }
    
    .news-request span{
        display: flex;
        width: 90%;
        text-align: center;
        font-size: 20px;
        font-weight: 500;
        margin: 10px 0;
    }
    
    .newsInput{
        display: flex;
        width: 80%;
        justify-content: space-between;
        margin: 10px 0;
    }
    
    .newsInput a{
        display: flex;
        width: 10%;
        justify-content: center;
        align-items: center;
        padding: 15px 15px;
        font-size: 24px;
        text-decoration: none;
    }

    .footer-section{
        display: flex;
        width: 100%;
        min-height: 450px;
        padding-bottom: 10px;
        flex-direction: column;
        align-items: center;
    }
    
    .footer-items{
        display: flex;
        flex-direction: column;
        width: 100%;
        align-items: baseline;
        gap: 15%;
        padding: 8%;
    }
    
    .footer-item{
        display: flex;
        width: 80%;
        margin: 10px 0;
        flex-direction: column;
        gap: 15px;
    }
    
    .item-head{
        display: flex;
        font-size: 18px;
        font-weight: 600;
        opacity: .9;
    }
    
    .item-text{
        display: flex;
        width: 100%;
        text-align: justify;
        opacity: .6;
        font-size: 14px;
        font-weight: 400;
    }
    
    .item-links{
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    
    .item-links a{
        display: flex;
        text-decoration: none;
        font-size: 14px;
        font-weight: 400;
        opacity: .6;
    }
    
    .footer-section hr{
        display: flex;
        width: 90%;
    }
    
    .footer-copyright{
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 0px 0 5px 0;
        margin-bottom: 5px;
        justify-content: space-between;
    }
    
    .txt1{
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        text-align: center;
        opacity: .6;
        font-size: 12px;
        font-weight: 400;
        gap: 4px;
        justify-content: center;
        align-items: center;
    }

    .footer-social{
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 15px;
        margin-top: 10px;
    }

    .myabout-section{
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 5% 0;
    }
    
    .about-first{
        display: flex;
        width: 100%;
        gap: 20px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    
    .about-first img{
        display: flex;
        width: 70%;
        height: 80px;
        border-radius: 5px;
    }
    
    .about-first h4{
        display: flex;
        width: 80%;
        text-align: center;
        font-size: 24px;
        font-weight: 600;
    }
    
    .about-first p{
        display: flex;
        width: 100% !important;
        font-size: 18px;
        text-align: center;
    }
    
    .about-video{
        display: flex;
        width: 100%;
        justify-content: center;
        align-items: center;
        padding: 5% 0;
    }
    
    .about-video video{
        display: flex;
        width: 70%;
    }

    .rooms{
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        width: 100%;
        padding: 4%;
        gap: 5%;
    }
    
    .room{
        display: flex;
        flex-direction: column;
        text-decoration: none;
        width: 96% !important;
        margin: 20px 0;
    }
    
    .room:hover{
        text-decoration: none;
    }
    
    .room-img{
        display: flex;
        width: 100%;
        position: relative;
    }
    
    .room-img img{
        display: flex;
        width: 100%;
        height: 250px;
        transition: .5s;
    }
    
    .room-img img:hover{
        transform: scaleX(2);
    }
    
    .imgOverlay{
        display: flex;
        position: absolute;
        width: 100%;
        height: 100%;
        transition: .5s;
    }
    
    .imgOverlay:hover{
        background-color: rgba(0, 0, 0, 0.252);
    }
    
    .room-details{
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 5px 0;
    }
    
    .roomHead{
        display: flex;
        font-size: 18px;
        font-weight: 600;
    }
    
    .roomPrice{
        display: flex;
        font-size: 16px;
        font-weight: 700;
        align-items: center;
        opacity: .6;
    }
    
    .roomServices{
        display: flex;
        width: 100%;
        gap: 10px;
        margin: 5% 0;
        padding: 5px 0;
    }

    .single-view{
        display: flex;
        flex-direction: column !important;
        width: 100%;
        padding: 20px 0;
    }
    
    .single-left{
        display: flex;
        width: 100% !important;
        padding: 10px;
        flex-direction: column;
        gap: 25px;
    }
    
    .singleBar{
        display: flex;
        width: 100% !important;
        padding: 15px;
        align-items: center;
        justify-content: space-between;
        border-radius: 5px;
    }
    
    .price{
        display: flex;
        width: 100%;
        font-size: 18px;
        font-weight: 800;
        opacity: .7;
        align-items: center;
    }
    
    .btnBook{
        display: flex;
        font-size: 18px;
        font-weight: 500;
        justify-content: center;
        align-items: center;
        text-decoration: none;
        padding: 10px;
    }
    
    .btnBook:hover{
        text-decoration: none;
        opacity: 1;
    }
    
    .room-informations{
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 5%;
    }
    
    .room-photo{
        display: flex;
        width: 90% !important;
    }
    
    .room-photo img{
        display: flex;
        width: 100%;
    }
    
    .room-info{
        display: flex;
        width: 100%;
        flex-direction: column;
    }
    
    .hd{
        display: flex;
        font-size: 20px;
        padding: 5px 0;
        font-weight: 600;
    }
    
    .amenitys{
        display: flex;
        width: 100% !important;
        flex-wrap: wrap;
        padding: 15px;
        gap: 10%;
        margin: 10px 0;
    }
    
    .amenity{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5px;
        margin: 10px;
    }
    
    .amenity i{
        font-size: 16px;
        padding: 10px;
        border-radius: 100%;
    }
    
    .amenity span{
        display: flex;
        font-size: 12px;
        font-weight: 500;
    }
    
    .single-right{
        display: flex;
        flex-direction: column;
        width: 100% !important;
        padding: 10px 10px;
    }
    
    .rightHead{
        display: flex;
        font-size: 18px;
        font-weight: 600;
    }
    
    .tab-rooms{
        width: 90%;
    }

    .contactus{
        display: flex;
        flex-direction: column;
        width: 100%;
        justify-content: center;
        align-items: center;
        padding: 5% 0;
    }
    
    .contact-txt{
        display: flex;
        width: 100% !important;
        flex-direction: column;
        align-items: center;
    }
    
    .contact-txt p{
        display: flex;
        width: 98% !important;
        text-align: center;
    }
    
    .contact-txt p:first-child{
        font-size: 26px;
        font-weight: 700;
    }
    
    #loc{
        width: 100%;
        font-size: 24px;
        align-items: center;
        justify-content: center;
        text-align: center;
        font-weight: 600;
    }
    
    .contact-forms{
        display: flex;
        flex-direction: column !important;
        width: 100%;
        padding: 3% 5%;
    }
    
    .form-left{
        display: flex;
        width: 100% !important;
        flex-direction: column;
        gap: 25px;
    }
    
    .form-item{
        display: flex;
        gap: 20px;
        align-items: center;
    }
    
    .form-group{
        margin: 12px 0;
    }
    
    .form-item a{
        display: flex;
        font-size: 16px;
        font-weight: 500;
    }
    
    .form-item i{
        font-size: 18px !important;
        font-weight: 500;
    }
    
    .leaveMSG{
        display: flex;
        font-size: 24px;
        font-weight: 500;
    }

    .form-right{
        display: flex;
        flex-direction: column;
        width: 100% !important;
        padding: 5% 4%;
    }
    
    .form-right h4{
        font-size: 14px;
        font-style: italic;
    }
    
    .p-forms{
        margin-top: 5%;
    }
    
    .btn-successs{
        margin-top: 5%;
        border: 0;
        padding: 10px;
    }

    .form-confirm{
        display: flex;
        position: absolute;
        z-index: 3333;
        top: 0;
        width: 100%;
        height: 100%;
        justify-content: center;
        position: fixed;
        display: none;
        transition: 2s;
    }

    .form-confirmh{
        display: flex;
        position: absolute;
        z-index: 3333;
        top: 0;
        width: 100%;
        height: 100%;
        justify-content: center;
        position: fixed;
        display: none;
        transition: 2s;
    }
    
    .form-success{
        display: flex;
        position: absolute;
        z-index: 3333;
        top: 0;
        width: 100%;
        height: 100%;
        justify-content: center;
        position: fixed;
        display: none;
        transition: 2s;
    }
    
    .confirm-card{
        display: flex;
        flex-direction: column;
        width: 98% !important;
        margin-top: 15%;
        height: fit-content;
        height: 300px;
        border-radius: 10px;
        position: relative;
        align-items: center;
        padding: 2% 0;
        justify-content: center;
    }
    
    .closeBtn{
        display: flex;
        position: absolute;
        right: 15px;
        top: 10px;
    }
    
    .closeBtn a{
        display: flex;
        text-decoration: none;
    }
    
    .cImg{
        display: flex;
        width: 50%;
        justify-content: center;
        align-items: center;
    }
    
    .cImg i{
        font-size: 42px;
        color: green;
    }
    
    .terms{
        display: flex;
        flex-direction: column;
        margin: 10px 0;
        width: 80%;
        align-items: center;
    }
    
    .terms p{
        font-weight: 400;
    }
    
    .terms-forms{
        display: flex;
        width: 100%;
        align-items: center;
        flex-direction: column;
    }
    
    .terms-forms p{
        text-align: center;
        font-weight: 400;
        font-size: 14px;
    }
    
    .terms a{
        font-weight: 400;
    }
    
    .terms .proceed{
        display: flex;
        text-decoration: none;
        padding: 8px 15px;
        font-weight: 400;
        border-radius: 5px;
    }
}
/* Default styling for specific input, textarea, and select fields */
input.custom-focus,
textarea.custom-focus,
select.custom-focus {
  border: 1px solid #ccc;
  /* Default border color */
  padding: 8px;
  font-size: 16px;
  outline: none;
  /* Removes the default outline in browsers */
  -webkit-appearance: none;
  /* For consistency across browsers (optional) */
  -moz-appearance: none;
  /* For Firefox (optional) */
}

/* Highlight specific input, textarea, and select fields on focus */
input.custom-focus:focus,
textarea.custom-focus:focus,
select.custom-focus:focus {
  border-color: lightgreen;
  /* Light green border */
  background-color: #eaffea;
  /* Optional: light green background color for focus */
}