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



* {
    /* //PT Sans*/
    font-family:  "Nunito", sans-serif;
   
}


body {
    /*margin-bottom: 60px;*/
    overflow-x: hidden;
    
}


.rounded-bg {
background-color: #612910; /* Use Bootstrap primary color or any color */
border-radius: 7px; /* Adjust for roundness */
padding: 5px 10px; /* Add some padding for better appearance */
}
.rounded-bg:hover {
    transform: scale(1.05); /* Slight scale effect */
    background-color: #a15f38; /* Darken on hover */
}



.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

/*.footer {
    margin-top: 20px;*/ /* Adds space above the footer */
    /*padding-top: 10px;*/ /* Adds padding inside the footer */
    /*border-top: 10px solid #ddd;
}*/



/*main {
    min-height: 100vh;*/
    /* height: -webkit-fill-available;*/
    /*max-height: 100vh;*/
    /*overflow-x: auto;
    overflow-y: auto;
}*/

.dropdown-toggle {
    outline: 0;
}

.btn-toggle {
    padding: .25rem .5rem;
    font-weight: 600;
    color: var(--bs-emphasis-color);
    background-color: transparent;
}

.btn-toggle:hover,
.btn-toggle:focus {
    background-color: #612910;
    color: white;
    /* color: rgba(var(--bs-emphasis-color-rgb), .85);
background-color: var(--bs-tertiary-bg);*/
}

.btn-toggle::before {
    
    width: 1.25em;
    line-height: 0;
    content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
    transition: transform .35s ease;
    transform-origin: .5em 50%;
}

[data-bs-theme="dark"] .btn-toggle::before {
    content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%28255,255,255,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
}

.btn-toggle[aria-expanded="true"]{
    color: rgba(var(--bs-emphasis-color-rgb), .85);
  /* color:white;*/
}

.btn-toggle[aria-expanded="true"]:hover,
.btn-toggle[aria-expanded="true"]:focus{
    color: white;
}

.navBtn {
    padding: .25rem .5rem;
    font-weight: 600;
    color: var(--bs-emphasis-color);
    background-color: transparent;
}

.navBtn:hover,
.navBtn:focus{
    background-color: #612910;
    color: white;
}


.btn-toggle[aria-expanded="true"]::before {
    transform: rotate(90deg);
}

.btn-toggle-nav a {
    padding: .1875rem .5rem;
    margin-top: .125rem;
    margin-left: 1.25rem;
}

.btn-toggle-nav a:hover,
.btn-toggle-nav a:focus {
    background-color: rgb(255, 159, 159);
}

.scrollarea {
    overflow-y: auto;
}

.btn-toggle::before {
    display: none;  /*Hide the default arrow*/ 
}



.toggle-arrow {

    margin-left: 4px; /* Push the arrow to the end */
    display: inline-block; /* Ensure it's inline */
    width: 0;
    height: 0;
    border-left: 5px solid #000;
    border-right: 5px solid transparent;
    border-bottom: 5px solid transparent; /* No color for initial state */
    border-top: 5px solid transparent; /* Change color as needed for down arrow */
    transform: rotate(90deg); /* Point to the left initially */
    transition: transform 0.2s;
}

.btn-toggle:hover .toggle-arrow,
.btn-toggle:focus .toggle-arrow{
    border-left: 5px solid white; /* Change the left border color to white on button hover */
}

.btn-toggle.collapsed .toggle-arrow {
    color: black;
    transform: rotate(0deg); /* Rotate back when collapsed */
}

/******************************Custom btn*/
.btn-custom {
    border-radius: 50px; /* Rounded buttons */
    padding: 10px 20px; /* Custom padding */
    transition: background-color 0.3s, transform 0.2s; /* Smooth transition */
    position: relative; /* Positioning for decorative effects */
    overflow: hidden; /* Prevents overflow from shadow */
}

.btn-custom:hover {
    background-color: #e9ecef; /* Light grey on hover */
    transform: translateY(-2px); /* Slight lift effect */
}

/* Decorative after element */
.btn-custom::after {
    content: '';
    position: absolute;
    width: 200%; /* Wider than button */
    height: 200%; /* Taller than button */
    background: rgba(0, 0, 0, 0.1); /* Light shadow */
    border-radius: 50%; /* Circular shadow */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0); /* Hidden by default */
    transition: transform 0.3s; /* Smooth transition for shadow */
}

    .btn-custom:hover::after {
        transform: translate(-50%, -50%) scale(1); /* Show shadow on hover */
    }
/*********************************************************/
/* Navbar brand styles */



.navbar-brand {
    font-weight: bold;
    font-size: 1.50rem; /* Increase font size for prominence */
    color: #343a40; /* Dark text color */
    text-decoration: none; /* Remove underline */
    transition: color 0.3s, border-color 0.3s; /* Smooth transition for hover effects */
    padding-bottom: 10px; /* Space between text and border */
}

    /* Border styling */
    .navbar-brand.border-bottom {
        border-bottom: 2px solid transparent; /* Initial transparent border */
    }

    /* Hover effect */
    .navbar-brand:hover {
        color: white; /* Change text color on hover */
        border-bottom: 2px solid #007bff; /* Blue border on hover */
        background-color: #612910; /* Light blue background on hover */
        transform: scale(1.05); /* Slightly scale up the text */
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); /* Add subtle text shadow */
        border-radius: 0.35rem 0.35rem 0 0;
    }

    /*************************************CAROUSEL*************************************/
.carousel {
    position: relative;
}




.imgCont {
    display: flex;
    height: 100%;
}

.carousel-item img {
    margin:auto;
    object-position:bottom;
    max-height:100vh;
    width: 100%;
   
    object-fit: cover; /* Maintain aspect ratio while filling the space */

}

.bathImg {
    object-position: center !important;

}


.carousel p {
    font-style:italic;
}

/*.carousel-item {
    
}*/
.carousel-caption {
    position: absolute;
    bottom: 0;
     left: 0;
     right: 0;
     margin: auto;
    text-align: center;
     padding: 20px;
     background: rgba(0, 0, 0, 0.5);
     color: white;
   

}


/*.carousel-caption h2,
.carousel-caption p {
    margin: 0;*/ /* Remove default margins */
/*}

    .carousel-caption p {
        font-style:italic;
    }

.carousel-caption .btn {
    
       
}*/
/**************************************************************/

/******************************************************************************************/
@media only screen and (min-width: 0px) and (max-width: 376px) {
    html {
        font-size: 14px !important;
        margin: 0;
    }

/*    .carousel-caption {
        display:flex;
        flex-direction: column;
        align-items:center;
        bottom:0;
        height: auto;
        font-size: 84%;
        
    }*/

/*    .carousel-caption .btn {
        
     
       
        
       
    }*/

    .nav-tabs {
        justify-content: space-evenly;
        margin: 0;
        padding: 0;
    }

    .nav-tabs .nav-link {
        padding-left: .25rem !important; /* Override Bootstrap default */
        padding-right: .25rem !important; /*  Override Bootstrap default */
    }
}

@media only screen and (min-width: 376px) and (max-width: 520px) {
    html {
        font-size: 17px;
        margin: 0;
    }

    .nav-tabs {
        justify-content: space-evenly;
        margin: 0;
        padding: 0;
    }

    .nav-tabs .nav-link {
        padding-left: .25rem !important; /* Override Bootstrap default */
        padding-right: .25rem !important; /*  Override Bootstrap default */
    }

}

@media only screen and (max-width: 768px) {
    .sticky-md-top {
        top: 0;
        position: sticky !important;
        z-index: 1000; /* Ensure it’s above other content */
    }

    .phoneNum {
        display: flex;
        justify-content: center; /* Centers horizontally */
        align-items: center; /* Centers vertically (if needed) */
        text-align: center; /* Aligns text in the center */
    }
}

@media only screen and (min-width: 520px) and (max-width: 769px) {
    html {
        font-size: 18px;
    }

    .nav-tabs {
        justify-content: space-evenly;
    }


    .nav-tabs .nav-link {
        padding-left: 1rem !important;  
        padding-right: 1rem !important; 
    }
}

/*small screen settings*/
@media only screen and (max-width: 991px) {
    .phoneNum {
        display: flex;
        justify-content: center; /* Centers horizontally */
        align-items: center; /* Centers vertically (if needed) */
        text-align: center; /* Aligns text in the center */
    }

    .rounded-bg {
        font-size:18px;
    }

    /*nav pills*/
    #v-pills-tabContent {
        border: none; /* or border: 0; */
        box-shadow: none; /* Removes any shadow */
    }

    .tab-content {
        min-height: 250px;
        max-height: 300px;
        padding: 20px; /* Padding inside the tab content */
        background-color: white; /*White background for content */
        margin-top: -1px;
        border-top: none;
        border-top-color: transparent;
        border-top-style: none;
    }

    .nav-tabs .nav-link {
        color: #612910;
        border-radius: 10px; /*Rounded corners */
        transition: background-color 0.3s, transform 0.2s; /*Smooth transition */
        background-color: transparent;
    }

    .nav-tabs .nav-link::first-letter {
        font-size: 21px;
        font-weight: bolder; /* Make the first letter bold */
    }

    .nav-tabs .nav-link.active {
        background-color: white !important; /* Change background color of active tab */
        color: #612910 !important; /* Change text color of active tab */
        border-top: 1px solid #612910; /* Darker top border */
        border-bottom: none; /* Darker bottom border */
        border-left: 1px solid #612910; /* Darker left border */
        border-right: 1px solid #612910;
        border-radius: 0.35rem 0.35rem 0 0;
    }

    .nav-tabs .nav-link:not(.active):hover {
        border-radius: 0.35rem 0.35rem 0 0;
        background-color: #612910; /* Hover color */
        color: white; /*Change text color on hover */
        /*transform: scale(1.05);*/ /* Slight scale effect */
        /*    transform: skew(5deg,5deg)*/
        transform: perspective(200px) translateY(-7px); /* 3D lift effect */
        transition: background-color 0.3s, color 0.3s, transform 0.3s; /* Smooth transition */
    }
}


/*larger screen settings*/
@media only screen and (min-width: 992px) {
    html {
        font-size: 18px;
    }

    #sidebarNav {
        width: 200px;
    }

    /*nav pills***********************************/

    .nav-pills .nav-link {
        font-size: 19px;
        
        color: #612910;
        border-radius: 10px; /*Rounded corners */
        transition: background-color 0.3s, transform 0.2s; /*Smooth transition */
        background-color: transparent;
    }

    .nav-pills .nav-link::first-letter {
        font-size: 21px;
        font-weight: bolder; /* Make the first letter bold */
    }

    .nav-pills .nav-link.active {
        background-color: white !important; /* Change background color of active tab */
        color: #612910 !important; /* Change text color of active tab */
        border-top: 1px solid #612910; /* Darker top border */
        border-bottom: 1px solid #612910; /* Darker bottom border */
        border-left: 1px solid #612910; /* Darker left border */
        border-right: none;
        border-radius: 0.35rem 0 0 0.35rem; /* Round corners on the left only */
    }

    .nav-pills .nav-link:not(.active):hover {
        border-radius: 0.35rem 0 0 0.35rem; /* Round corners on the left only */
        background-color: #612910; /* Hover color */
        color: white; /*Change text color on hover */
        /*transform: scale(1.05);*/ /* Slight scale effect */
        /*    transform: skew(5deg,5deg)*/
        transform: perspective(200px) translateX(-7px); /* 3D lift effect */
        transition: background-color 0.3s, color 0.3s, transform 0.3s; /* Smooth transition */
    }

    .tab-content {
        min-height: 250px;
        max-height: 300px;
        padding: 20px; /*Padding inside the tab content */
        border-left: none;
        border-left-color: transparent;
        border-left-style: none;
        font-size: 1rem; /* Standard paragraph size */
        line-height: 1.6; /* Increased line height for readability */
        color: #495057; /* Slightly lighter dark color */
    }

/*    .carousel {
        position:relative;
    }

    .carousel .carousel-inner .carousel-item .carousel-caption {
        margin-bottom: 85px;
        position:absolute;
    }*/
    
}

@media (min-width: 768px) {
    /* Make the modal background transparent */


  

    
}

/******************* Gallery Modal */
.gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
}

.image-container {
    position: relative;
    overflow: hidden;
}

.gallery-image {
    width: 100%;
    max-width: 200px;
    cursor: pointer;
    transition: transform 0.2s;
}

    .gallery-image:hover {
        transform: scale(1.05);
    }

/* The Modal (background) */
.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    overflow: auto;
    padding-top: 60px;
}

/* Modal Content */
.modal-content {
    background-color: transparent;
    border:none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Center the image */
    width: 100%;
    max-height: 100%;
    max-width: 700px;
    object-fit:fill; /* Ensure the image fits within the viewport */
    box-sizing: border-box;

    /*    margin: auto;
    display:block;
    width: 80%;
    max-width: 700px;
    height:95%;*/
}

/* Close Button */
.close {
    position: absolute;
    top: 10px;
    right: 25px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}

    .close:hover,
    .close:focus {
        color: #bbb;
        text-decoration: none;
        cursor: pointer;
    }

/*#expandedImage {
    top:0;
    max-width: 100%;
    max-height: 93vh;*/ /* Image will scale to fit the viewport height */
    /*object-fit: cover;*/ /* Maintain aspect ratio, and fit the image within the modal */
/*}*/
/* Customizing the backdrop */
/*.galleryModClose {
    z-index: 10500 !important;*/ /* Ensure it's on top of other modal content */
    /*opacity: 1 !important;*/ /* Ensure the button is fully visible */
    /*visibility: visible !important;
    color: white !important;*/ /* White color for the close icon */
    /*border: none !important;*/ /* Remove border */
    /*font-size: 1.5rem !important;*/ /* Make it bigger for visibility */
    /*cursor: pointer;*/ /* Ensure the cursor indicates it is clickable */
/*}

.galleryMod {
    background-color: rgba(0, 0, 0, 0.8);
}

.galleryModContent {
    position: relative;*/ /* Required for the absolute positioning of the button */
    /*background-color: transparent;*/ /* Remove the default background */
    /*border: none;*/ /* Optional: removes border around modal */
/*}*/



 
/******************************************** ICONNNNNNN **********************************************/

.navbar-toggler:focus {
    outline: none;
    box-shadow: none; /* Custom blue glow */
    color: none;
}

#nav-icon1 {
    width: 45px; /* Reduced width */
    height: 30px; /* Reduced height */
    position: relative;
    margin: 0; /* Adjusted margin for centering */
    cursor: pointer;

}

    #nav-icon1 span {
        display: block;
        position: absolute;
        height: 7px; /* Reduced height of each bar */
        width: 100%;
        background: rgb(97, 41, 16);
        border-radius: 6px;
        opacity: 1;
        left: 0;
        transition: .25s ease-in-out;
    }

        #nav-icon1 span:nth-child(1) {
            top: 0px;
        }

        #nav-icon1 span:nth-child(2) {
            top: 14px; /* Reduced the spacing between bars */
        }

        #nav-icon1 span:nth-child(3) {
            top: 27px;
        }

    #nav-icon1.open span:nth-child(1) {
        top: 10px;
        transform: rotate(135deg);
    }

    #nav-icon1.open span:nth-child(2) {
        opacity: 0;
        left: -60px;
    }

    #nav-icon1.open span:nth-child(3) {
        top: 10px;
        transform: rotate(-135deg);
    }
.navbar-toggler {
    padding: 0; /* Remove padding */
    margin: 0; /* Remove margin */
}