/* ===================================
    Crafto - Hotel and resort
====================================== */
/* font */
@import url('css2-3');
@import url('css2-4');
@import url('https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,200..800;1,200..800&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
/* variable */
:root {     
    --base-color: #ac8d56;
    --medium-gray:#817F7C;
    --peachy-pink:#dba493;
    --very-light-gray:#F4F1ED;
    --grayish-brown:#A08F87;
    --alt-font: 'Rufina', serif;
    --primary-font: 'Urbanist', sans-serif;
}  
/* reset */
body {
    font-size: 18px;
    line-height: 30px; 
    letter-spacing: .3px;
     background-color: #f7f6f3;
     overflow-x: hidden;
    width: 100%;
}
html {
    overflow-x: hidden;
    width: 100%;
    scroll-behavior: smooth;
}
section.half-section {
    padding-top: 110px;
    padding-bottom: 110px;
}
.icon-extra-large {
    font-size: 53px;
}
.mt-minus-5{
    margin-top: -5%;
}
h2 {
    line-height: 3.3rem;
}
h3 {
    line-height: 2.9rem;
}
h5 {
    line-height: 2.5rem;
}
h6 {
    line-height: 2.2rem;
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6, p {
    margin-bottom: 20px;
}
/* header */
header .navbar-brand {
    padding: 20px 0;
}
header .navbar-brand img {
    max-height: 150px;
}
.navbar .navbar-nav .nav-link {
    font-size: 18px;
    font-weight: 600;
}
.navbar .navbar-nav .dropdown.dropdown-with-icon .dropdown-menu li a span {
    font-size: 17px;
}
.navbar .navbar-nav .dropdown.dropdown-with-icon .dropdown-menu {
    width: 280px;
}
.navbar .navbar-nav .dropdown.dropdown-with-icon .dropdown-menu li a p {
    font-size: 15px;
}
.center-logo .navbar-left, .center-logo .navbar-right {
    width: 40%;
}
/* btn */
.btn {
    font-weight: 600;
    text-transform: inherit;
    font-family: var(--primary-font);
    letter-spacing: 0;
}
.btn.btn-switch-text.btn-extra-large > span {
    font-size: 18px;
    padding:16px 34px;
}
.btn.btn-switch-text.btn-large > span {
    font-size: 16px;
    padding: 13px 25px;
}
.btn.btn-switch-text.btn-medium > span {
    font-size: 15px;
    padding: 11px 20px;
}
.btn.btn-switch-text.btn-small > span {
    font-size: 14px;
    padding: 10px 20px;
}
.btn.btn-switch-text.btn-very-small > span {
    font-size: 12px;
    padding: 8px 15px;
}
.btn.btn-hover-animation-switch .btn-icon {
    margin-left: 5px;
}
/* page title */
.page-title-large h1 {
    font-size: 4.375rem;
    line-height: 5.313rem;
}
/* banner highlight separator */
.highlight-separator[data-shadow-animation] span img { 
    height: 8px;
    bottom: 10px;
}
/* bg transparent */
.bg-transparent-base-color {
    background-color: rgba(160,135,91,.2) !important;
}
.bg-gradient-dark-transparent {
    background: #FFFFFF00;
    background: -webkit-linear-gradient(top, #FFFFFF00, #131313);
    background: -moz-linear-gradient(top, #FFFFFF00, #131313);
    background: linear-gradient(to bottom, #FFFFFF00, #131313);
}
/* border color */
.border-color-transparent-base-color {
    border-color: rgba(160,135,91,.2) !important;
}
.border-color-transparent-dark-very-light {
    border-color: rgba(112, 112, 112, 0.2) !important;
}
/* tab style 07 */
.tab-style-07 .nav-tabs .nav-item .nav-link {
    border-color: rgba(112, 112, 112, 0.2) !important; 
}
.tab-style-07 .nav-tabs .nav-item .nav-link span >span {
    color: var(--base-color);
}
/* swiper slider */
.slider-navigation-style-01.swiper-button-next {
    right: 30px;
}
.slider-navigation-style-01.swiper-button-prev {
    left: 30px;
}
/* tab style 08 */
.tab-style-08 ul .nav-item .nav-link {
    color: var(--dark-gray);
}
.tab-style-08 ul .nav-item .nav-link.active, .tab-style-08 ul .nav-item .nav-link.show, .tab-style-08 ul .nav-item .nav-link:hover {
    color: var(--dark-gray);   
}
/* footer */
footer .nav-link {
    color:var(--dark-gray);
    line-height: normal;
}
footer .elements-social li {
    margin: 0 12px 0 0;
}
@media (max-width: 1399px) {
    .tab-style-07 .nav-tabs .nav-item .nav-link {
        padding: 40px 35px;
    }
}
@media (max-width: 1199px) {
    .tab-style-07 {
        border-right: 1px solid rgba(112, 112, 112, 0.2);
    }
    .navbar.center-logo .navbar-left, .navbar.center-logo .navbar-right {
        width: 37%;
    }
    .tab-style-08 ul .nav-item .nav-link {
        padding: 25px 40px;
    }
}
@media (max-width: 991px) {
    .tab-style-07 .nav-tabs .nav-item .nav-link {
        padding: 35px 25px;
    }
    .navbar.center-logo .navbar-left, .navbar.center-logo .navbar-right {
        width: 100%;
    }
    header.sticky .navbar-brand,
    header .navbar-brand {
        padding: 15px 0;
    }
    .tab-style-08 ul .nav-item .nav-link {
        padding: 20px 18px;
        line-height: 28px;
    }
}
@media (max-width: 767px) {
    .tab-style-07 .nav-tabs .nav-item .nav-link .number-box {
        right: 40px;
    }
    .tab-style-07 .nav-tabs .nav-item .nav-link {
        padding: 25px 25px;
    }
    .tab-style-07 {
        border-right: 0;
    }
    .slider-navigation-style-01.swiper-button-next {
        right: 15px;
    }
    .slider-navigation-style-01.swiper-button-prev {
        left: 15px;
    }
    .tab-style-08 ul .nav-item .tab-border {
        top: inherit;
        bottom: 0;
    }
}
@media (max-width: 575px) {
    .pricing-table-style-13 li {
        text-align: left;
    }
    .btn.btn-switch-text.btn-medium > span {
        padding: 10px 18px;
    }
}


.bg_peachy-pink
{
    background:var(--peachy-pink);
}

.bg_black
{
    background: #000;
}

.store_img
{
    position: relative;
    z-index: 1;
}

.overlapping-section {
    margin-top: -60px; /* Adjust based on how much overlap you want */
    position: relative;
    z-index: 2; /* Make sure it's above the banner */
}

.no_padding
{
    padding: 0;
}

.star-rating {
    text-align: center;
        display: inline-block;
        cursor: pointer;
        width: 100%;
        border-bottom: 1px solid #ededed;
    }

    .star-rating input {
        display: none;
    }

    .star-rating label {
        color: #ddd;
        font-size: 24px;
        padding: 0 2px;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .star-rating label:hover,
    .star-rating label:hover~label,
    .star-rating input:checked~label {
        color: #ffc107;
    }

    .bg_2
    {
        background: var(--grayish-brown);
    }

   .bg_2 span:hover {
    color: #111;
}

.btn:hover
{
     color: #111 !important;
}


    .heading_color
    {
        color: var(--grayish-brown);
    }

.karla-heading {
  font-family: "Karla", serif !important;
  font-weight: 400;
  font-style: normal;
}

.nunito-heading {
  font-family: "Nunito", serif;
  font-weight: 800;
  font-style: normal;
}


     /* Main container for the social icons */
        .social-icons-container {
            position: fixed;
            top: 50%;
            z-index: 1;
            right: 0px; /* Initially hidden */
            transform: translateY(-50%);
            display: flex;
            flex-direction: column;
            gap: 10px;
            background: #d4cbc2;
            padding: 10px;
            border-radius: 10px 0 0 10px;
            transition: right 0.4s ease-in-out;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        /* Social Icon Styling */
        .social-icons-container a {
            text-decoration: none;
            font-size: 22px;
            padding: 10px;
            border-radius: 50%;
            text-align: center;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.3s ease;
        }

        /* Social Media Colors */
        .social-icons-container a:nth-child(1) { background: #1877F2; color: white; } /* Facebook */
        .social-icons-container a:nth-child(2) { background: #000000; color: white; } /* Twitter/X */
        .social-icons-container a:nth-child(3) { background: #E4405F; color: white; } /* Instagram */
        .social-icons-container a:nth-child(4) { background: #25D366; color: white; } /* WhatsApp */
        
        /* Hover Effect */
        .social-icons-container a:hover {
            transform: scale(1.1);
            opacity: 0.8;
        }

     


.vertical-bg {
    padding: 50px 0;
    background: none;
}

.content-box
{
    background: var(--grayish-brown);
    border-radius: 6px !important;
    -webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.08);
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.08);
    -webkit-transition: all 350mscubic-bezier(0.37, 0, 0.63, 1);
    transition: all 350mscubic-bezier(0.37, 0, 0.63, 1);
}



@media (max-width: 768px) {
    .content-box {
        background: url('../images/vertical_bg.jpg') no-repeat center center;
        box-shadow: none; /* Remove shadow */
        border-radius: 0; /* Remove border-radius */
        padding: 50px 20px; /* Adjust padding */
        color: white; /* Ensure text is readable */
        width: 100vw;
        height: 100vh;
        background-size: cover;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
}

    .heading-container {
        display: flex;
        flex-direction: column; /* Stack image on top */
        align-items: center;
    }

    .sparkle-img {
        width: 40px; /* Reduce size */
        height: auto;
    }

    .form-control, .form-select, input, select, textarea
    {
        padding: 10px !important;
    }

.whatsapp-btn {
    position: fixed;
    z-index: 999999999;
    bottom: 20px;
    left: 20px;
    background-color: #25d366;
    padding: 10px 15px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    font-weight: bold;
    color: white;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.whatsapp-btn:hover {
    background-color: #1ebe5d;
}

.whatsapp-icon {
    width: 24px;
    height: 24px;
}

.whatsapp-text {
    font-size: 14px;
/*    display: none;*/
}

.whatsapp-text:hover {
    color: #000;
}