/*------------------------------ (00)- Global CSS (Start) ------------------------------*/

/*----- 0- Global CSS -----*/
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&family=Great+Vibes&family=Parisienne&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Parisienne&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');

:root{

    --main-color: #ffad33;        
    --secondary-color:  #2B2B2B;   
    --accent-color: #FFD18B;     
    --black: #1A1A1A;
    --white: #FFFFFF;
    --light-grey: #F2F2F2;
    --grey: #666666;
    --custom-bg: rgba(255, 153, 51, 0.9);
    --border-radius-1: 0.5rem;
    --border-radius-2: 1rem;
    --border-radius-3: 200px 200px 0px 0px;
    --border: 0.1rem solid rgba(0, 0, 0, 0.12);
    --custom-border: 0.4rem solid var(--main-color);
    --box-shadow: 0 0.6rem 1.2rem rgba(0, 0, 0, 0.15);
    --custom-clip-path: polygon(
        50% 0%, 
        100% 25%, 
        100% 75%, 
        50% 100%, 
        0% 75%, 
        0% 25%
    );
}

*{
    font-family: "Merriweather", serif;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    margin: 0;
    padding: 0; 
    text-decoration: none;
    text-transform: none;
    border: none;
    outline: none;
}



/* Prevent transitions on page load */
.preload *:not(.portfolio-item){
    -webkit-transition: none !important;
    transition: none !important;
}

*::-moz-selection{
    color: var(--white);
    background-color: var(--main-color);
}

*::selection{
    color: var(--white);
    background-color: var(--main-color);
}

body{

    background: linear-gradient(135deg, rgba(255, 241, 226, 0.514) 0%, rgba(255, 253, 246, 0.85) 100%),url(../images/bg-main-body.jpg) no-repeat fixed center top;
    
    background-size: 3px 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;

    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html{
    font-size: 52%;
    overflow-x: hidden;
    scroll-behavior: smooth;
    scroll-padding-top: 7rem;
}

/* Performance optimization for images */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Optimize animations */
.testimonial-card,
.venue-card,
.faq-item {
    will-change: transform;
}

section{
    padding: 3rem 5%;
}

::-webkit-scrollbar{
    width: 0.8rem;
}

::-webkit-scrollbar-track{
    background: var(--secondary-color);
}

::-webkit-scrollbar-thumb{
    -webkit-border-radius: var(--border-radius-2);
    -moz-border-radius: var(--border-radius-2);
    -ms-border-radius: var(--border-radius-2);
    -o-border-radius: var(--border-radius-2);
    border-radius: var(--border-radius-2);
    background: var(--main-color);
}

p{
    font-size: 1.8rem;
    line-height: 1.7;
    color: var(--grey);
}

img{
    height: 100%;
    width: 100%;
    object-fit: cover;
}
 
/*----- 1- Heading CSS -----*/
.heading{
    padding-bottom: 2rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

/* .home-gallery-section {
    background: linear-gradient(90deg, rgba(255, 241, 226, 0.514) 0%, rgba(255, 253, 246, 0.85) 100%), url(/assets/images/middle-bg.jpg);
    background-position: bottom center;
     background-size: cover;
} */

.heading .sub{
    letter-spacing: 0.2rem;
    display: inline-block;
    font-size: 2rem;
    font-weight: 500;
    line-height: 1;
    color: var(--main-color);
    margin-bottom: 1rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    gap: 1rem;
}
.heading h2 span{
    color: var(--main-color);
   

}
.heading h3{
    font-size: 2rem;
    color: var(--white);
    font-weight: 700;
    margin-bottom: 1rem;
    font-family: "Merriweather", serif;
}



.heading h2{
    text-align: center;
    font-size: 3.5rem;  
    font-weight: 600;
    color: var(--secondary-color);
    line-height: 1.2;
}

.linear-bg .heading h2{
    color: var(--white);
}

/*----- 2- Button CSS -----*/
.btn{
    display: inline-block;
    font-size: 1.6rem;
    font-weight: 500;
    padding: 1.4rem 3rem;
    text-align: center;
    text-transform: uppercase;
    color: var(--white);
    background-color: var(--main-color);
    /* background-image: -webkit-linear-gradient(306deg, var(--main-color), var(--accent-color), var(--main-color));
    background-image:         linear-gradient(144deg, var(--main-color), var(--accent-color), var(--main-color)); */
    background-size: 300% 100%;
    cursor: pointer;
    -webkit-border-radius: var(--border-radius-1);
    -moz-border-radius: var(--border-radius-1);
    -ms-border-radius: var(--border-radius-1);
    -o-border-radius: var(--border-radius-1);
    border-radius: var(--border-radius-1);
}

.btn:hover{
    background-position: 100% 0px; 
    background-color: white;
    color: var(--main-color);
    border: 1px solid var(--main-color);
}

/* Secondary Button Style */
.btn-secondary{
    display: inline-block;
    font-size: 1.6rem;
    font-weight: 500;
    padding: 1.4rem 3rem;
    text-align: center;
    text-transform: uppercase;
    color: var(--main-color);
    background-color: var(--white);
    background-size: 300% 100%;
    cursor: pointer;
    -webkit-border-radius: var(--border-radius-1);
    -moz-border-radius: var(--border-radius-1);
    -ms-border-radius: var(--border-radius-1);
    -o-border-radius: var(--border-radius-1);
    border-radius: var(--border-radius-1);
}

.btn-secondary:hover{
    background-position: 100% 0px; 
    background-color: var(--main-color);
    color: var(--white);
    border: 1px solid var(--main-color);
}
.swiper-button-next:after, .swiper-button-prev:after{
    font-size: 30px !important;
}

/*----- 3- Logo Area CSS -----*/  
.logo{
    z-index: 100000;
    /* background-color: var(--main-color); */
    height: auto;
    /* width: 10rem; */
    border-radius: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
.footer-logo{
    z-index: 100000;
    /* background-color: var(--main-color); */
    /* height: auto; */
    /* width: 10rem; */
    border-radius: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

}

.logo img{
    height: 7rem;
    width: auto;
    /* Golden enhanced logo with drop shadow and filters */
    filter: brightness(1.15) 
          saturate(1.3)
          contrast(1.1)
          drop-shadow(0 0 15px rgba(255, 215, 0, 0.7))
          drop-shadow(0 0 30px rgba(218, 165, 32, 0.5))
          drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
    margin-top: 0px;
    transition: all 0.3s ease;
}

/* Logo Symbol - Displayed before main logo */
.logo .logo-symbol {
    width: auto;
    margin-right: 0.5rem;
    padding-right: 0.5rem;
    border-right: 2px solid rgba(255, 215, 0, 0.6);
    filter: brightness(1.15) 
          saturate(1.3)
          contrast(1.1)
          drop-shadow(0 0 10px rgba(255, 215, 0, 0.6))
          drop-shadow(0 0 20px rgba(218, 165, 32, 0.4))
          drop-shadow(0 3px 6px rgba(0, 0, 0, 0.4));
    transition: all 0.3s ease;
}

.logo .logo-symbol:hover {
    filter: brightness(1.25) 
          saturate(1.5)
          contrast(1.15)
          drop-shadow(0 0 15px rgba(255, 215, 0, 0.8))
          drop-shadow(0 0 30px rgba(218, 165, 32, 0.6))
          drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
    transform: scale(1.02);
}

.logo img:hover {
    filter: brightness(1.25) 
          saturate(1.5)
          contrast(1.15)
          drop-shadow(0 0 20px rgba(255, 215, 0, 0.9))
          drop-shadow(0 0 40px rgba(218, 165, 32, 0.7))
          drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5));
    transform: scale(1.02);
}
.footer-logo img{
    height: auto;
    width: 90%;
    filter: brightness(1.15) saturate(1.3) contrast(1.1) drop-shadow(0 0 15px rgba(255, 215, 0, 0.7)) drop-shadow(0 0 30px rgba(218, 165, 32, 0.3)) drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
}

/* Footer Logo Symbol - Displayed before main logo */
.footer-logo .logo-symbol {
    width: auto;
    height: 8rem;
    margin-right: 0.5rem;
    padding-right: 0.5rem;
    border-right: 2px solid rgba(255, 215, 0, 0.6);
    filter: brightness(1.15) 
          saturate(1.3)
          contrast(1.1)
          drop-shadow(0 0 10px rgba(255, 215, 0, 0.6))
          drop-shadow(0 0 20px rgba(218, 165, 32, 0.4))
          drop-shadow(0 3px 6px rgba(0, 0, 0, 0.4));
    transition: all 0.3s ease;
}

.footer-logo .logo-symbol:hover {
    filter: brightness(1.25) 
          saturate(1.5)
          contrast(1.15)
          drop-shadow(0 0 15px rgba(255, 215, 0, 0.8))
          drop-shadow(0 0 30px rgba(218, 165, 32, 0.6))
          drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
    transform: scale(1.02);
}

/* Mobile Logo - Golden enhanced with filters */
.mobile-logo img{
    height: 6rem;
    width: auto;
    /* Golden enhanced logo with drop shadow and filters */
    filter: brightness(1.15) 
          saturate(1.3)
          contrast(1.1)
          drop-shadow(0 0 10px rgba(255, 215, 0, 0.6))
          drop-shadow(0 0 20px rgba(218, 165, 32, 0.4))
          drop-shadow(0 3px 6px rgba(0, 0, 0, 0.4));
    transition: all 0.3s ease;
}

/* Mobile Logo Symbol */
.mobile-logo .logo-symbol {
    height: 4rem;
    width: auto;
    margin-right: 0.3rem;
    padding-right: 0.3rem;
    border-right: 2px solid rgba(255, 215, 0, 0.6);
    filter: brightness(1.15) 
          saturate(1.3)
          contrast(1.1)
          drop-shadow(0 0 8px rgba(255, 215, 0, 0.5))
          drop-shadow(0 0 15px rgba(218, 165, 32, 0.3))
          drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
    transition: all 0.3s ease;
}

.mobile-logo img:hover {
    filter: brightness(1.25) 
          saturate(1.5)
          contrast(1.15)
          drop-shadow(0 0 15px rgba(255, 215, 0, 0.8))
          drop-shadow(0 0 30px rgba(218, 165, 32, 0.6))
          drop-shadow(0 3px 8px rgba(0, 0, 0, 0.5));
    transform: scale(1.02);
}
/*----- 4- Page Title CSS -----*/
.page-title{
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5)), url("../images/new-images/gallery-banner2.webp");
    /* background:         linear-gradient(180deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5)), url("../images/Background/PageTitle.webp"); */
    background-repeat: no-repeat;  
    background-size: cover;
    background-position: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 0.5rem;
    padding: 0rem 5%;
    padding-top: 12rem;
    min-height: 45rem;
}

.page-title .title h2{
    color: var(--white);
    font-size: 5rem;
    font-weight: 500;
    font-family: "Great Vibes", cursive;
}
.page-title .title h3{
    color: var(--white);
    font-size: 5rem;
    font-weight: 500;
    font-family: "Great Vibes", cursive;
}

.page-title .link{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 1.5rem;
    font-size: 1.8rem;
}

.page-title .link a{
    font-weight: 600; 
    color: var(--white);
}

.page-title .link a:hover{
    color: var(--main-color);
}

.page-title .link i{                               
    color: var(--white);
}

.page-title .link .page{    
    font-weight: 600;        
    letter-spacing: 0.1rem;                    
    color: var(--main-color);
}

/*----- Sparkle Icon CSS -----*/
.sparkle-icon{
    display: inline-block;
    width: 2rem;
    height: 2rem;
    background-image: url('../images/Logo/sparkle.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
    margin: 0 0.3rem;
}

/* Sparkle icon color variants */
.sparkle-icon.primary {
  filter: brightness(0) saturate(100%)
          invert(68%)
          sepia(77%)
          saturate(1850%)
          hue-rotate(359deg)
          brightness(101%)
          contrast(101%);
}


.sparkle-icon.white{
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%) hue-rotate(324deg) brightness(107%) contrast(107%);
}

.sparkle-icon.secondary{
    filter: brightness(0) saturate(100%) invert(13%) sepia(17%) saturate(5824%) hue-rotate(333deg) brightness(94%) contrast(87%);
}

.sparkle-icon.accent{
    filter: brightness(0) saturate(100%) invert(77%) sepia(78%) saturate(2629%) hue-rotate(2deg) brightness(103%) contrast(105%);
}

/*----- 5- Header Area CSS -----*/
.header{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    
}

.header .header-1{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    background-color: rgb(75, 0, 0);
    border-bottom: 0.5px solid rgba(255, 255, 255, 0.2);
    padding: 0.3rem 5%;
    
}

/* Header-1 Icons - Main Color */
.header .header-1 .header-contacts li i,
.header .header-1 .social-contacts li a i {
    color: var(--main-color);
}

.header.active .header-1{
    display: none;
}

.header .header-contacts{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 3rem;
    list-style-type: none;
}

.header .header-contacts li{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; 
    gap: 1rem;
    font-size: 1.6rem;
    color: var(--white);
}

.header .header-contacts span{
    text-transform: none;
}

.header .social-contacts{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 1rem;
    list-style-type: none;
}

.header .social-contacts li a{
    height: 3rem;
    width: 3rem;
    font-size: 1.6rem;
    color: var(--white);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.header .social-contacts li a:hover{
    color: var(--secondary-color);
}

.header .header-2{
    
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    height: 7rem;
    padding: 0rem 5%;
    /* Dark red background for header */
    background: linear-gradient(135deg, rgba(80, 0, 0, 0.95) 0%, rgba(139, 0, 0, 0.92) 50%, rgba(60, 0, 0, 0.95) 100%);
    border-bottom: 0.2rem solid rgba(255, 215, 0, 0.8);
    background-size: cover;
    background-position: center;
    backdrop-filter: saturate(150%) blur(10px);
    position: relative;
    /* Subtle gold glow effect */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 40px rgba(255, 215, 0, 0.1);
}

.header.active .header-2{
    -webkit-box-shadow: var(--box-shadow);
            box-shadow: var(--box-shadow);
}

/* Mobile Hamburger Icon - Hidden by default on desktop */
.mobile-hamburger-icon{
    display: none;
    position: absolute;
    right: 3%;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2.5rem;
    color: var(--white);
    cursor: pointer;
    z-index: 10003;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.mobile-hamburger-icon i{
    pointer-events: none;
}

/* == Center Navigation == */
.header .nav-center{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
    padding: 0 2rem;
    height: 100%;
}

.header .nav-center .navbar{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    height: 100%;
    gap: 1.2rem;
    flex-wrap: wrap;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.header .nav-center .navbar .nav-btn{
    white-space: nowrap;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    height: 100%;
    padding: 0 1rem;
}

/* Mobile Menu - Hidden by default */
.mobile-menu{
    display: none;
}

.mobile-menu-overlay{
    display: none;
}

.header .container{
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 40rem;
        flex: 1 1 40rem;
}

.header .container:last-child .navbar{
    padding-right: 2.5rem;
}

.header .container:last-child{
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
}

.header .logo-container{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    height: 100%;
}

.header .dropdown-menu{
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.header .navbar .nav-btn{
    display: inline-block;
    font-size: 1.8rem; 
    letter-spacing: 0.08rem; 
    font-weight: 600;
    /* color: var(--secondary-color); */
    color: var(--white);
    /* font-family: "Great Vibes", cursive; */
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: none;
    text-transform: capitalize;
}

.header .navbar .nav-btn i{
    margin-left: 0.5rem;
    font-size: 1.4rem;
    -webkit-transition: -webkit-transform 0.3s ease;
    transition: -webkit-transform 0.3s ease;
    -moz-transition: transform 0.3s ease, -moz-transform 0.3s ease;
    -o-transition: transform 0.3s ease;
    transition: transform 0.3s ease;
    transition: transform 0.3s ease, -webkit-transform 0.3s ease, -moz-transform 0.3s ease;
}

.header .dropdown-menu:hover .nav-btn i{
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}

.header .navbar .nav-btn:hover{
    color: var(--main-color);
}

.header .navbar .nav-btn.active{
    color: var(--main-color);
}

.header .dropdown-content{
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--white);
    width: max-content;
    -webkit-box-shadow: var(--box-shadow);
            box-shadow: var(--box-shadow);
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    display: none;
    -webkit-transition:  all 0.5s;
    -moz-transition:  all 0.5s;
    -o-transition:  all 0.5s;
    transition:  all 0.5s;
    z-index: 1000;
} 


.header .dropdown-content .side-dropdown{
    color: var(--white);
    font-size: 1rem;
    padding-right: 1.5rem;
    font-weight: bold;
    cursor: pointer; 
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify; 
    justify-content: space-between; 
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.header .dropdown-content .side-dropdown .dropdown-content{
    left: 20rem;
    top: 0;
    display: none !important;
}

.header .dropdown-menu:hover .dropdown-content{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    border-bottom: var(--custom-border);
}

.header .dropdown-content .side-dropdown:hover .dropdown-content{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex !important;
}

.header .dropdown-content a,
.header .dropdown-content button{
    display: block;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--secondary-color);
    opacity: 0.8;
    padding: 1rem 1.5rem;
    cursor: pointer;
    overflow: hidden;
    background-color: transparent;
    /* font-family: "Great Vibes", cursive; */
}

.header .dropdown-content a i,
.header .dropdown-content button i,
.header .nav-btn i{
    margin-right: 0.8rem;
    color: var(--main-color);
    font-size: 1.4rem;
}

.header .dropdown-content .side-dropdown{
    position: relative;
}

.header .dropdown-content a:hover,
.header .dropdown-content .side-dropdown:hover{
    background-color: var(--main-color);
}

/* Icons turn white on hover */
.header .dropdown-content a:hover i,
.header .dropdown-content .side-dropdown:hover i,
.header .dropdown-content button:hover i{
    color: #fff;
}

.header .dropdown-content a.active{
background: var(--accent-color);    /* color: var(--main-color); */
    font-weight: 700;
}

.header .icon-container{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 1rem;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    height: 100%;
    padding: 0;
}

.header .icon-container .icon{
    font-size: 2rem;
    color: var(--secondary-color);
    cursor: pointer;
}

.header .icon-container .icon:hover{
    color: var(--main-color);
}

.header .search-container{
    position: absolute;
    top: 100%;
    right: 2rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-top: 2rem;
    background: var(--white);
    width: 40rem;
    padding: 1.5rem 2rem;
    -webkit-box-shadow: var(--box-shadow);
    box-shadow: var(--box-shadow);
    opacity: 0;
    -webkit-transform: translateX(300%);
    transform: translateX(300%);
    -webkit-transform-origin: right;
    transform-origin: right;
    -webkit-transition: -webkit-transform 0.3s ease;
    transition: -webkit-transform 0.3s ease;
    -webkit-border-radius: 50rem;
    -moz-border-radius: 50rem;
    -ms-border-radius: 50rem;
    -o-border-radius: 50rem;
    border-radius: 50rem;
}

.header .search-container.active{
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
}

.header .search-container input{
    width: 100%;
    height: 100%;
    background: transparent;
    color: var(--secondary-color);
    font-size: 1.8rem;
    text-transform: none;
}

.header .search-container button{
    color: var(--secondary-color);
    background-color: transparent;
    font-size: 2rem;
    padding-right: 0.5rem;
    padding-left: 1rem;
}

.header .search-container button:hover{
    color: var(--main-color);
    cursor: pointer;
}

/*----- 6- Footer Area CSS -----*/
.footer{    
    background: linear-gradient(135deg, rgba(139, 0, 0, 0.85) 0%, rgba(80, 0, 0, 0.75) 50%, rgba(139, 0, 0, 0.85) 100%),url(/assets/images/footer-bg-2.png);
    background-position: center center;
    background-size: cover;
    /* background-attachment: fixed; */
    position: relative;
}

.footer .box-container{
    padding-left: 1rem 1rem 1rem 0px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    gap: 2rem;
    padding: 4rem 5%;
}

/*----- Footer Column Classes -----*/
.footer-item.col-lg-4{
    -webkit-box-flex: 0;
    -ms-flex: 0 0 33.333%;
    flex: 0 0 33.333%;
    max-width: 33.333%;
    min-width: 0;
}

.footer-item.col-lg-3{
    -webkit-box-flex: 0;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
    min-width: 0;
}

.footer-item.col-lg-2{
    -webkit-box-flex: 0;
    -ms-flex: 0 0 16.666%;
    flex: 0 0 16.666%;
    max-width: 16.666%;
    min-width: 0;
}

.footer-item.col-md-6{
    -webkit-box-flex: 0;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
    min-width: 0;
}

.footer-item.col-sm-6{
    -webkit-box-flex: 0;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
    min-width: 0;
}

.footer-item.col-12{
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
    min-width: 0;
    flex-direction: column;
    z-index: 1;
}

.footer-item .logo{
    height: 10rem;
    width: 10rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin: 0 auto;
}

.footer-item .logo img{
    height: 9rem;
}

.footer-item h2,h3{ 
    color: var(--white);
    font-size: 2rem;
    font-weight: 700;
    /* letter-spacing: 0.2rem; */
    padding-bottom: 1rem;
    margin-bottom: 2rem;
    position: relative;
}

.footer-item h3:before{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 6rem;
    height: 2px;
    content: "";
    background-color: var(--main-color); 
    -webkit-transform: translateX(0%); 
            transform: translateX(0%);
}

.footer-item > p{
    padding-top: 1.5rem;
    font-size: 1.5rem;
} 

.footer-item p{
    color: var(--white); 
    line-height: 1.5;
    font-weight: 500;
    font-size: 17px;
}

.footer-item .connect{
    padding-top: 1rem;
}

.footer-item .connect p{
    margin-bottom: 0.5rem !important;
}

.footer-item .connect i{
    font-size: 1.6rem;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--main-color);
    height: 3rem;
    width: 3rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.footer-item .social{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
}

.footer-item .social a{
    height: 4rem;
    width: 4rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: var(--main-color);
    border: 0.1rem solid var(--main-color);
}

.footer-item .social a i{
    color: var(--white);
    font-size: 1.7rem;
}

.footer-item .social a:hover{
    background-color: transparent;
}

.footer-item .social a:hover i{
    color: var(--main-color);
}

.footer-item .gmail{
    text-transform: none;
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
}

.footer-item .info p{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.footer-item .info a{ 
    font-size: 17px;
    color: var(--white);
}

.footer-item .links p:hover a{
    color: var(--main-color);
}

.footer-item .links p i{
    color: transparent;
    -webkit-text-stroke: 1.5px var(--main-color);
    font-size: 1.5rem;
}

.footer-item:last-child p{
    padding-top: 0rem;
    padding-bottom: 2rem;
    line-height: 1.6;
}

.footer-item .input-field{
    margin-bottom: 1rem;
}

.footer-item .dark-form .alert {
    min-height: 3.5rem;
    display: block;
    font-size: 1.6rem;
    color: var(--main-color);
    padding-top: 1rem;
}

.footer .content{
    text-align: center;
    padding: 2rem 0;
}

.footer .content p{
    font-size: 2rem;
    color: var(--white);
}

/*----- Footer Bottom Section -----*/
.footer-bottom{
    justify-content: space-between;
    padding: 2rem 5%;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 2rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(1, 1fr);
}

.footer-bottom-left,
.footer-bottom-center,
.footer-bottom-right{
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.footer-bottom-left{
    min-width: 250px;
    justify-content: start;

}

.footer-bottom-center{
    text-align: center;
    min-width: 250px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.footer-bottom-right{
    text-align: right;
    min-width: 250px;
        justify-content: end;
}

.footer-bottom-left p,
.footer-bottom-center p{
    font-size: 1.6rem;
    color: var(--white);
    margin: 0;
}
.footer-bottom-center p a {
    color: var(--white);
    text-decoration: none;
    font-weight: 600;
}

.footer-bottom-left .year,
.footer-bottom-left .site-name,
.footer-bottom-left .rights,
.footer-bottom-left .separator{
    font-weight: 400;
}

.footer-bottom-left .site-name{
    color: var(--white);
    font-weight: 600;
}

.footer-bottom-center .designer{
    color: var(--accent-color);
    font-weight: 600;
}

.footer-bottom-left i{
    margin-right: 0.5rem;
    color: var(--white);
}

.footer-bottom-right .social{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 1rem;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}

.footer-bottom-right .social a{
    height: 4rem;
    width: 4rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: var(--accent-color);
    color: var(--secondary-color);
    font-size: 1.8rem;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.footer-bottom-right .social a:hover{
    background: var(--main-color);
    color: var(--white);
    -webkit-transform: translateY(-0.3rem);
    -ms-transform: translateY(-0.3rem);
    -moz-transform: translateY(-0.3rem);
    -o-transform: translateY(-0.3rem);
    transform: translateY(-0.3rem);
}

/*------------------------------ Lenis Smooth Scroll CSS (Start) ------------------------------*/
html.lenis, html.lenis body {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: hidden;
}

.lenis.lenis-scrolling iframe {
    pointer-events: none;
}

/* Lenis recommended styles */
.lenis-container {
    /* Fix for smooth scroll */
}

/*------------------------------ Lenis Smooth Scroll CSS (End) ------------------------------*/

/*----- 7- Scroll-Top Area CSS -----*/
.scroll-top{
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    height: 5rem;
    width: 5rem;
    font-size: 2rem;
    color: var(--white);
    background: var(--main-color);
    border-radius: 50%;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    z-index: 9999;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    cursor: pointer;
}

.scroll-top:hover{
    background-color: var(--secondary-color);
    transform: translateY(-3px);
    -webkit-box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

/*----- 8- Form CSS -----*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    color: var(--secondary-color) !important;
    -webkit-transition: background-color 5000s ease-in-out 0s;
            transition: background-color 5000s ease-in-out 0s;
}
  
.form .input-box{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}
  
.form .box{
    width: 100%;
    background-color: transparent;
    font-size: 1.6rem;
    color: var(--secondary-color);
    padding: 1rem 1.5rem;
    border: 0.15rem solid rgba(0, 0, 0, 0.1);
    text-transform: none;
    -webkit-border-radius: var(--border-radius-1);
    -moz-border-radius: var(--border-radius-1);
    -ms-border-radius: var(--border-radius-1);
    -o-border-radius: var(--border-radius-1);
    border-radius: var(--border-radius-1);
}

.form .box::-webkit-input-placeholder{
    text-transform: capitalize;
}
.form .box::-moz-placeholder{
    text-transform: capitalize;
}
.form .box:-ms-input-placeholder{
    text-transform: capitalize;
}
.form .box::placeholder{
    text-transform: capitalize;
}

.form .box:focus{
    border-color: var(--main-color);
}

.form textarea{
    resize: none;
    height: 20rem;
}

.form .btn{
    width: 100%;
    overflow: hidden;
    margin-top: 1rem;
}

/*----- 9- Dark Form CSS -----*/
.dark-form input:-webkit-autofill,
.dark-form input:-webkit-autofill:hover,
.dark-form input:-webkit-autofill:focus,
.dark-form input:-webkit-autofill:active {
    -webkit-text-fill-color: var(--white);
    -webkit-transition: background-color 5000s ease-in-out 0s;
            transition: background-color 5000s ease-in-out 0s;
}

.dark-form .input-box{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.dark-form .input-field{
    border: 1.2px solid rgba(255, 255, 255, 0.9);
    padding: 1.5rem;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 1rem;
    -webkit-border-radius: var(--border-radius-1);
    -moz-border-radius: var(--border-radius-1);
    -ms-border-radius: var(--border-radius-1);
    -o-border-radius: var(--border-radius-1);
    border-radius: var(--border-radius-1);
}

.dark-form .input-box > .input-field{
    -webkit-box-flex: 1;
    -ms-flex: 1 1 20rem;
        flex: 1 1 20rem; 
}

.dark-form .input-field:hover{
    border-color: var(--main-color);
}

.dark-form .input-field label {
    color: transparent;
    -webkit-text-stroke: 1px var(--main-color);
    font-size: 1.6rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.dark-form .box{
    width: 100%;
    font-size: 1.6rem;
    color: var(--white);
    background-color: transparent;
    text-transform: none;
}

.dark-form .box::-webkit-input-placeholder{
    text-transform: capitalize;
    color: var(--white);
}

.dark-form .box::-moz-placeholder{
    text-transform: capitalize;
    color: var(--white);
}

.dark-form .box:-ms-input-placeholder{
    text-transform: capitalize;
    color: var(--white);
}

.dark-form .box::placeholder{
    text-transform: capitalize;
    color: var(--white);
}

.dark-form textarea{
    height: 15rem;
    resize: none;
}

.dark-form .text-area {
    -webkit-box-align: start;
    -ms-flex-align: start;
    -ms-grid-row-align: flex-start;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.dark-form ::-webkit-calendar-picker-indicator {
    -webkit-filter: invert(1);
            filter: invert(1);
}

.dark-form .select option{
    color: var(--grey);
}

.dark-form .select{
    -webkit-box-flex: 1;
    -ms-flex: 1 1 20rem;
    flex: 1 1 20rem;
    border: 1.2px solid rgba(255, 255, 255, 0.9);
    width: 100%;
    -webkit-border-radius: var(--border-radius-1);
    -moz-border-radius: var(--border-radius-1);
    -ms-border-radius: var(--border-radius-1);
    -o-border-radius: var(--border-radius-1);
    border-radius: var(--border-radius-1);
}
  
.dark-form .select-container{
    height: 100%;
    min-width: 100%;
    position: relative;
}

.dark-form .select-box{
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    width: 100%;
    color: var(--white);
    background-color: transparent;
    padding: 1.5rem;
    font-size: 1.6rem;
    padding-left: 4.5rem;
}

.dark-form .select-container label{
    position: absolute;
    height: 100%;
    top: 0;
    left: 1.5rem;
    color: var(--main-color);
    font-size: 1.6rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.dark-form .select-container .icon-container{
    width: 4rem;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
            pointer-events: none;
}

.dark-form .select-container .icon-container i{
    font-size: 1.6rem;
    color: var(--white);
}

/*----- 10- Swiper Pagination CSS -----*/
/* .swiper-pagination-bullet{
    height: 1.2rem;
    width: 1.2rem;
    background: rgba(255, 255, 255, 0.6);
    opacity: 1;
    -webkit-box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.3);
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.swiper-pagination-bullet-active{
    background: -webkit-linear-gradient(135deg, var(--main-color), var(--secondary-color)) !important;
    background: linear-gradient(135deg, var(--main-color), var(--secondary-color)) !important;
    width: 3.5rem;
    -webkit-border-radius: 2rem;
    -moz-border-radius: 2rem;
    -ms-border-radius: 2rem;
    -o-border-radius: 2rem;
    border-radius: 2rem;
    border-color: var(--accent-color);
    -webkit-box-shadow: 0 4px 20px rgba(255, 153, 51, 0.5);
    box-shadow: 0 4px 20px rgba(255, 153, 51, 0.5);
} */

/*----- 11- Swiper Navigation CSS -----*/
/* .swiper-button-next,
.swiper-button-prev{
    background: -webkit-linear-gradient(135deg, var(--main-color), var(--secondary-color));
    background: linear-gradient(135deg, var(--main-color), var(--secondary-color));
    font-size: 1rem;
    height: 5.5rem;
    width: 5.5rem;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    -webkit-box-shadow: 0 8px 25px rgba(255, 153, 51, 0.4);
    box-shadow: 0 8px 25px rgba(255, 153, 51, 0.4);
    border: 3px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.swiper-button-next{
    right: 2rem;
}

.swiper-button-prev{
    left: 2rem;
}

.swiper-button-next::after,
.swiper-button-prev::after{
    font-size: 2.2rem;
    font-weight: bold;
    color: var(--white);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center; 
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
  
.swiper-button-next:hover,
.swiper-button-prev:hover{
    background: -webkit-linear-gradient(135deg, var(--secondary-color), var(--main-color));
    background: linear-gradient(135deg, var(--secondary-color), var(--main-color));
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
    -webkit-box-shadow: 0 12px 35px rgba(255, 153, 51, 0.6);
    box-shadow: 0 12px 35px rgba(255, 153, 51, 0.6);
    border-color: rgba(255, 255, 255, 0.5);
} */

/*----- 12- Sidebar Heading CSS -----*/
.sidebar-heading h2{
    position: relative;
    font-size: 3rem; 
    font-weight: 500;
    word-spacing: 1px; 
    color: var(--secondary-color);
    letter-spacing: 0.1rem;
    line-height: 1;
    margin-bottom: 1.5rem;
    padding-bottom: 1.2rem;
}

.sidebar-heading h2:before{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 10rem;
    height: 2px;
    content: "";
    background-color: var(--main-color);
}

/*----- 13- Sidebar CSS -----*/
/*
1- Search
2- Category
3- Recent Items
4- Tags
*/

.sidebar{
    -webkit-box-flex: 1;
    -ms-flex: 1 1 28rem; 
        flex: 1 1 28rem;  
}

.sidebar .sidebar-item{
    margin-bottom: 1.5rem;
    background-color: var(--white);
    border-bottom: var(--custom-border);
    -webkit-box-shadow: var(--box-shadow);
    box-shadow: var(--box-shadow);
    padding: 1.5rem;
    -webkit-border-radius: var(--border-radius-2);
    -moz-border-radius: var(--border-radius-2);
    -ms-border-radius: var(--border-radius-2);
    -o-border-radius: var(--border-radius-2);
    border-radius: var(--border-radius-2);
}

/*-- 1- Search --*/
.sidebar .search .input-box{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    overflow: hidden;
    -webkit-border-radius: 5rem;
    -moz-border-radius: 5rem;
    -ms-border-radius: 5rem;
    -o-border-radius: 5rem;
    border-radius: 5rem;
}

.sidebar .search .input-box input{
    width: 100%;
    padding: 1.5rem; 
    overflow: hidden;
    border: 0.1rem solid rgba(0, 0, 0, 0.5);
    border-top-left-radius: 5rem;
    border-bottom-left-radius: 5rem;
}

.sidebar .search .input-box input:focus{ 
    border-color: var(--main-color);
}

.sidebar .search .input-box button{
    color: var(--white);
    background-color: var(--secondary-color);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0.5rem 2rem;
    font-size: 1.8rem;
    cursor: pointer;
}

.sidebar .search .input-box button:hover{
    background-color: var(--main-color);
}

/*-- 2- Category --*/ 
.sidebar .category a{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 1.5rem 0rem;
    border-bottom: 0.15rem solid rgba(0, 0, 0, 0.1);
}

.sidebar .category a:last-child{
    margin-bottom: 0;
}

.sidebar .category a span{
    font-size: 1.7rem;
    color: var(--secondary-color);
    font-weight: 400;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 1rem;
}

.sidebar .category a span i{
    font-size: 1.8rem;
    color: var(--main-color);
}

.sidebar .category a p{
    font-size: 1.5rem;
}

.sidebar .category a:hover span,
.sidebar .category a:hover p{
    color: var(--main-color);
}

/*-- 3- Post Items --*/
.sidebar .post-item{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.sidebar .post-item:last-child{
    margin-bottom: 0;
}

.sidebar .post-item img{
    height: 8rem;
    width: 8rem;
    -webkit-border-radius: var(--border-radius-3);
    -moz-border-radius: var(--border-radius-3);
    -ms-border-radius: var(--border-radius-3);
    -o-border-radius: var(--border-radius-3);
    border-radius: var(--border-radius-3);
    -webkit-box-shadow: var(--box-shadow);
            box-shadow: var(--box-shadow);
}

.sidebar .recent-posts .post-item img{
    width: 10rem;
}

.sidebar .post-item .content{
    padding-bottom: 0.5rem;
}

.sidebar .post-item a{
    display: inline-block;
    font-size: 2.5rem;
    font-weight: 600;
    color: var(--secondary-color);
    font-family: "Great Vibes", cursive;
}

.sidebar .recent-posts .post-item a{
    font-size: 2.2rem;
}

.sidebar .post-item a:hover{
    color: var(--main-color);
}

.sidebar .post-item .price p{
    font-size: 1.7rem;
    font-weight: bold;
    color: var(--main-color);
}

.sidebar .post-item .price span{
    font-size: 1.3rem;
    font-weight: 400;
    color: var(--grey);
    text-decoration: line-through;
    padding-left: 0.2rem;
}

/*-- 4- Tags --*/
.sidebar .tags .box-container{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 0.7rem;
}

.sidebar .tag-item{
    color: var(--white);
    background-color: var(--main-color);
    font-size: 1.6rem;
    padding: 1rem 1.6rem;
    -webkit-border-radius: var(--border-radius-1);
    -moz-border-radius: var(--border-radius-1);
    -ms-border-radius: var(--border-radius-1);
    -o-border-radius: var(--border-radius-1);
    border-radius: var(--border-radius-1);
}

.sidebar .tag-item:hover{
    background-color: var(--secondary-color);
    cursor: pointer;
}

/*------------------------------ (00)- Global CSS (End) ------------------------------*/



/*------------------------------ (01)- Home (Start) ------------------------------*/

/*----- 1- Home-Slider -----*/
.home{
    padding: 0;
    position: relative;
}

.home-slider{
    position: relative;
    overflow: hidden;
}
  
.home-item{
    height: 65rem;
}

.home-item .content{ 
    padding: 10rem 5%;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: -webkit-linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.5));
    background:         linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.5));
}

.home-item .content .text{
    width: 90rem;
    margin-top: 12rem;
    text-align: center;
}

.home-item .content .intro{
    margin-bottom: 2rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 1.5rem;
}

.home-item .content .intro h5{
    font-size: 3.5rem;
    font-weight: 600;
    color: var(--white);
    /* font-family: "Great Vibes", cursive; */
font-family: "Dancing Script", cursive;

}
.royal-destination-content h5{
        font-size: 3.5rem;
    font-weight: 600;
    color: var(--white);
    /* font-family: "Great Vibes", cursive; */
font-family: "Dancing Script", cursive;
}
.royal-destination-content .intro{
        margin-bottom: 2rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 1.5rem;
}
.royal-destination-content .intro i{
    height: 5rem;
    width: 5rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 2.5rem;
    color: var(--accent-color);
    background: -webkit-linear-gradient(135deg, rgba(235, 54, 120, 0.2), rgba(240, 120, 154, 0.2));
    background: linear-gradient(135deg, rgba(235, 54, 120, 0.2), rgba(240, 120, 154, 0.2));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 2px solid rgba(235, 54, 120, 0.3);
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    -webkit-text-stroke: 0;
    box-shadow: 0 8px 32px rgba(235, 54, 120, 0.15);
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.home-item .intro i{
    height: 5rem;
    width: 5rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 2.5rem;
    color: var(--accent-color);
    background: -webkit-linear-gradient(135deg, rgba(235, 54, 120, 0.2), rgba(240, 120, 154, 0.2));
    background: linear-gradient(135deg, rgba(235, 54, 120, 0.2), rgba(240, 120, 154, 0.2));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 2px solid rgba(235, 54, 120, 0.3);
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    -webkit-text-stroke: 0;
    box-shadow: 0 8px 32px rgba(235, 54, 120, 0.15);
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.home-item .intro i:hover{
    background: var(--main-color);
    border-color: var(--main-color);
    color: var(--white);
    -webkit-transform: scale(1.1) rotate(15deg);
    -ms-transform: scale(1.1) rotate(15deg);
    -moz-transform: scale(1.1) rotate(15deg);
    -o-transform: scale(1.1) rotate(15deg);
    transform: scale(1.1) rotate(15deg);
    box-shadow: 0 12px 40px rgba(235, 54, 120, 0.3);
}

.home-item .content h3{
    font-size: 5.5rem;
    font-weight: 600;
    margin-bottom: 3rem;
    color: var(--white);
    letter-spacing: 0.1rem;
    line-height: 1.2;
}

/*----- 3- Features -----*/
.features{
    padding-bottom: 2rem;
}

.features .box-container{
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (minmax(25rem, 1fr))[auto-fit];
    grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
    gap: 0.2rem;
    -webkit-border-radius: var(--border-radius-2);
    -moz-border-radius: var(--border-radius-2);
    -ms-border-radius: var(--border-radius-2);
    -o-border-radius: var(--border-radius-2);
    border-radius: var(--border-radius-2);
    overflow: hidden;
}

.feature-item {
    cursor: pointer;
    text-align: center;
    padding: 3rem 2.5rem;
    background-color: var(--secondary-color);
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    min-height: 28rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
}

.feature-item::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
   background: linear-gradient(
  to top,
  rgba(0, 0, 0, 0.6) 0%,
  rgba(0, 0, 0, 0.45) 25%,
  rgba(0, 0, 0, 0.25) 45%,
  transparent 55%
);



    z-index: 1;
}

.feature-overlay{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* background:
    linear-gradient(
    to top,
    rgba(255, 153, 51, 0.9) 0%,
    rgba(255, 153, 51, 0.7) 25%,
    rgba(255, 153, 51, 0.4) 50%,
    rgba(255, 153, 51, 0.15) 70%,
    transparent 100%
  ); */
  background:linear-gradient(to top, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65));;

    opacity: 0;
    z-index: 2;
    -webkit-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
}

.feature-item:hover .feature-overlay{
    opacity: 1;
}

.feature-content{
    position: relative;
    z-index: 3;
    width: 100%;
    -webkit-transition: -webkit-transform 0.3s ease;
    transition: -webkit-transform 0.3s ease;
    transition: transform 0.3s ease;
    transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}

.feature-item:hover .feature-content{
    -webkit-transform: translateY(-2rem);
    -ms-transform: translateY(-2rem);
    -moz-transform: translateY(-2rem);
    -o-transform: translateY(-2rem);
    transform: translateY(-2rem);
}

/* .feature-item i{
    height: 8rem;
    width: 8rem;
    margin: 0rem auto;
    margin-bottom: 2rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 5rem;
    color: transparent;
    -webkit-text-stroke: 3px var(--black);
    opacity: 0;
    -webkit-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
} */

.feature-item:hover i{
    opacity: 1;
}

.feature-item h3{
    font-size: 2rem;
    color: var(--white);
    font-weight: 700;
    margin-bottom: 1rem;
    /* font-family: "Great Vibes", cursive; */
    font-family: var(--secondary-font);
    text-shadow: 3px 3px 8px rgba(0, 0, 0, 00.8), 1px , 1px, 2px, rgba(0, 0, 0, 1);
}

.feature-item p{
    color: var(--light-grey);
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    -webkit-transition: opacity 0.3s ease, max-height 0.3s ease;
    transition: opacity 0.3s ease, max-height 0.3s ease;
}

.feature-item:hover p{
    opacity: 1;
    max-height: 10rem;
}

/*----- 4- Counter -----*/
.counting{
    padding: 4rem 5%;
    margin: 1rem 0;
    display: -webkit-box;  
    display: -ms-flexbox; 
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center; 
    -ms-flex-wrap: wrap;
        flex-wrap: wrap; 
    gap: 4rem;
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.8)), url("../images/new-images/wedding6.webp");
    /* background:         linear-gradient(180deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.6)), url("../images/new-images/wedding6.webp"); */
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}
.counting::before{
    .newsletter-subscribe::before {
    content: "";
    position: absolute;
    inset: 0px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45));
}

}
.counting .box{
    -webkit-box-flex: 1;
    -ms-flex: 1 1 25rem;
        flex: 1 1 25rem;
    text-align: center;
    padding: 5rem 3rem;
    padding-bottom: 6rem;
    /* background-color: var(--main-color); */
    /* backdrop-filter: blur(1px); */
    -webkit-clip-path: var(--custom-clip-path);
            clip-path: var(--custom-clip-path);
}

.counting .box i{
    margin: 0 auto;
    color: transparent;
    -webkit-text-stroke: 2px var(--white);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 4.5rem;
}

.counting .box .count{
    color: var(--white);
    font-size: 4.5rem;
    font-weight: 500;
}

.counting .box h3{
    font-size: 2.5rem;
    padding-top: 0.4rem;
    color: var(--main-color);
    font-weight: 800;
    font-family: "Dancing Script", cursive;
}

/*----- 5- Section Slider -----*/
.section-slider{
    overflow: hidden;
    padding: 0.5rem;
}

/*----- 6- Expertise -----*/
.expertise-section{
    padding: 0;
}

.expertise-section .box-container{
    background-image: url("../images/new-images/background5.webp");
}

.expertise-section .heading{
    -webkit-box-align: start;
    -ms-flex-align: start;
    -ms-grid-row-align: flex-start;
    align-items: flex-start;
}

.expertise-section .content h2{
    text-align: left;
    color: var(--white);
}

.expertise-section .content p{
    letter-spacing: 0.5px;
    font-weight: 400;
    color: var(--light-grey);
}

.expertise-section .expertise .box{
    padding: 1rem 0;
}

.expertise-section .expertise .box h3{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 0.7rem 0;
    font-size: 1.7rem;
    color: var(--white);
    font-weight: 400;
}

.expertise-section .expertise .box .progress-bar{
    width: 100%;
    background: var(--light-grey);
    overflow: hidden;
    height: 1.2rem;
    -webkit-border-radius: 50rem;
    -moz-border-radius: 50rem;
    -ms-border-radius: 50rem;
    -o-border-radius: 50rem;
    border-radius: 50rem;
}

.expertise-section .expertise .box .progress-bar span{
    display: block;
    height: 100%;
    background: var(--main-color);
}

/*----- 7- Banner -----*/
.banner{
    padding: 8rem 5%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    background: url("../images/Background/Banner.webp");
    background-position: left;
    background-size: cover;
}

.banner .content{
    width: 70rem;
}

.banner .heading{
    -webkit-box-align: start;
        -ms-flex-align: start;
                -ms-grid-row-align: flex-start;
            align-items: flex-start;
    padding-bottom: 0;
}

.banner .heading .sub{
    color: var(--white);
}

.banner h2{
    font-size: 5rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--white);
    padding-bottom: 1.5rem;
    letter-spacing: 0.1rem;
}

/*----- 8- Testimonials -----*/
.testimonial-bg{
    background: -webkit-linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.8)), url("../images/Background/Testimonials.webp");
    background:         linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.8)), url("../images/Background/Testimonials.webp");
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}

.testimonial-bg .testi-item h4{
    color: var(--white);
}

.testimonial-bg .testi-item p{
    color: var(--light-grey);
}

/*----- 10- Newsletter -----*/
.newsletter-subscribe{
    position: relative;
    padding: 8rem 5%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    background-image: url("../images/new-images/hero-banner5.webp");
    background-position: center;
    background-size: cover;
}
.newsletter-subscribe::before{
     content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.45),
    rgba(0, 0, 0, 0.45)
  );
}


.newsletter-subscribe .content{
    width: 70rem;
    text-align: center;
    position: relative;
}

.newsletter-subscribe h2{
    color: var(--white);
}

.newsletter-subscribe p{
   color: var(--white);
   padding-top: 1.8rem;
   padding-bottom: 4rem;
}

.newsletter-subscribe .box-container {
    max-width: 60rem;
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 1.5rem;
    padding: 0.5rem;
    background-color: var(--white);
    -webkit-border-radius: var(--border-radius-2);
    -moz-border-radius: var(--border-radius-2);
    -ms-border-radius: var(--border-radius-2);
    -o-border-radius: var(--border-radius-2);
    border-radius: var(--border-radius-2);
}

.newsletter-subscribe input{
    padding: 0rem 1.5rem;
    width: 100%;
    color: var(--secondary-color);
    background-color: var(--white);
    text-transform: none;
    font-size: 1.5rem;
}

.newsletter-form .alert{
    min-height: 3.5rem;
    display: block;
    font-size: 1.6rem;
    color: var(--white);
    padding-top: 1rem;
    -webkit-transition: none;
    transition: none;
}

/*----- 11- Blogs -----*/
.blog.main .box-container{
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (minmax(32rem, 1fr))[auto-fit];
        grid-template-columns: repeat(auto-fit, minmax(32rem, 1fr));
    gap: 1.5rem;
}

/*----- 12- Partners Slider -----*/


/*----- 10- Gallery Showcase -----*/


.partners .heading{
    text-align: center;
    margin-bottom: 4rem;
}

.partners .heading .sub{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

/* .partners .heading .sub span{
    color: var(--main-color);
    font-size: 1.8rem;
    text-transform: uppercase;
    letter-spacing: 0.2rem;
} */

/* .partners .heading .sub::before,
.partners .heading .sub::after{
    content: "";
    width: 8rem;
    height: 2px;
    background: -webkit-linear-gradient(90deg, transparent, var(--accent-color), transparent);
    background: linear-gradient(90deg, transparent, var(--accent-color), transparent);
} */

/* .partners .heading h2{
    font-size: 4.5rem;
    color: var(--secondary-color);
}

.partners .heading h2 span{
    color: var(--accent-color);
} */

.partners .gallery-container{
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 1fr 1fr 1fr;
    grid-template-columns: repeat(4, 1fr);
    gap: 3rem;
    max-width: 150rem;
    margin: 0 auto;
}

.partners .gallery-slider{
    /* max-width: 100%; */
    /* width: 100%; */
    margin: 0 auto;
    position: relative;
    padding: 0 7rem 0 7rem;
}

.partners .gallery-slider .swiper-wrapper{
    padding: 1rem 0;
}

.partners .gallery-next,
.partners .gallery-prev{
    height: 5.5rem;
    width: 5.5rem;
    z-index: 100;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

.partners .gallery-next{
    right: 1rem;
}

.partners .gallery-prev{
    left: 1rem;
}

/* .partners .gallery-item{
    position: relative;
    overflow: hidden;
    -webkit-border-radius: 2.5rem;
    -moz-border-radius: 2.5rem;
    -ms-border-radius: 2.5rem;
    -o-border-radius: 2.5rem;
    border-radius: 2.5rem;
    height: 28rem;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
} */

.partners .gallery-item:hover{
    -webkit-transform: translateY(-1rem);
    -ms-transform: translateY(-1rem);
    -moz-transform: translateY(-1rem);
    -o-transform: translateY(-1rem);
    transform: translateY(-1rem);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}

.partners .gallery-item img{
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    display: block;
    -webkit-transition: -webkit-transform 0.4s ease;
    transition: -webkit-transform 0.4s ease;
    transition: transform 0.4s ease;
    transition: transform 0.4s ease, -webkit-transform 0.4s ease;
}

.partners .gallery-item:hover img{
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}

.partners .gallery-item .overlay{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 3rem 2.5rem;
    background: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.85));
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.85));
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: -webkit-transform 0.4s ease;
    transition: -webkit-transform 0.4s ease;
    transition: transform 0.4s ease;
    transition: transform 0.4s ease, -webkit-transform 0.4s ease;
}

.partners .gallery-item .overlay h3{
    font-size: 2.4rem;
    color: var(--white);
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.partners .gallery-item .overlay p{
    font-size: 1.5rem;
    color: var(--light-grey);
    margin: 0;
}

.partners .partner-slider{
    overflow: hidden;
}

/* Destination Gallery Grid Styles */
.destination-gallery-section{
    /* padding-top: 3rem; */
    padding: 8rem 2rem 2rem 0rem;
    /* background: linear-gradient(135deg, #fff9f5 0%, #ffffff 100%); */
}
.destination-gallery-section p {
   /* text-align: center; */
    margin: 0px auto;
    margin-top: 2rem;
    /* max-width: 90%; */
}

.destination-gallery-grid{
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 3rem 1fr 3rem 1fr;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
    max-width: 130rem;
    margin: 0 auto;
    padding: 3rem 0;
}

.destination-gallery-item{
    position: relative;
    overflow: hidden;
    -webkit-border-radius: 2rem;
    -moz-border-radius: 2rem;
    -ms-border-radius: 2rem;
    -o-border-radius: 2rem;
    border-radius: 2rem;
    height: 32rem;
    cursor: pointer;
    -webkit-box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

.destination-gallery-item:hover{
    -webkit-transform: translateY(-0.8rem);
    -ms-transform: translateY(-0.8rem);
    -moz-transform: translateY(-0.8rem);
    -o-transform: translateY(-0.8rem);
    transform: translateY(-0.8rem);
    -webkit-box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}

.destination-gallery-item img{
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    display: block;
    -webkit-transition: -webkit-transform 0.4s ease;
    transition: -webkit-transform 0.4s ease;
    -moz-transition: transform 0.4s ease, -moz-transform 0.4s ease;
    -o-transition: transform 0.4s ease, -o-transform 0.4s ease;
    transition: transform 0.4s ease;
    transition: transform 0.4s ease, -webkit-transform 0.4s ease, -moz-transform 0.4s ease, -o-transform 0.4s ease;
}

.destination-gallery-item:hover img{
    -webkit-transform: scale(1.08);
    -ms-transform: scale(1.08);
    -moz-transform: scale(1.08);
    -o-transform: scale(1.08);
    transform: scale(1.08);
}

/* CTA Box in Gallery (Center Item) */
.gallery-cta-box{
    /* background: -webkit-linear-gradient(135deg, var(--main-color) 0%, var(--secondary-color) 100%);
    background: linear-gradient(315deg, var(--main-color) 0%, var(--secondary-color) 100%); */
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('../images/new-images/wedding2.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 3rem;
    cursor: default;
    position: relative;
    overflow: hidden;
}
.gallery-heading{
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.gallery-cta-box::before{
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    -webkit-animation: pulse 4s ease-in-out infinite;
    animation: pulse 4s ease-in-out infinite;
}

/* @-webkit-keyframes pulse {
    0%, 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 0.5; }
    50% { -webkit-transform: scale(1.2); transform: scale(1.2); opacity: 0.8; }
}

@keyframes pulse {
    0%, 100% { 
        -webkit-transform: scale(1); 
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1); 
        opacity: 0.5; 
    }
    50% { 
        -webkit-transform: scale(1.2);
        -moz-transform: scale(1.2);
        -ms-transform: scale(1.2);
        -o-transform: scale(1.2);
        transform: scale(1.2); 
        opacity: 0.8; 
    }
} */

.gallery-cta-box:hover{
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
}

.cta-content{
    text-align: center;
    color: var(--white);
    position: relative;
    z-index: 2;
}

.sparkle-icon-large{
    font-size: 4.5rem;
    margin-bottom: 2rem;
    display: inline-block;
    /* -webkit-animation: sparkle 2s ease-in-out infinite;
    animation: sparkle 2s ease-in-out infinite; */
}

@-webkit-keyframes sparkle {
    0%, 100% { 
        -webkit-transform: rotate(0deg) scale(1); 
        transform: rotate(0deg) scale(1); 
    }
    50% { 
        -webkit-transform: rotate(180deg) scale(1.2); 
        transform: rotate(180deg) scale(1.2); 
    }
}

@keyframes sparkle {
    0%, 100% { 
        -webkit-transform: rotate(0deg) scale(1);
        -moz-transform: rotate(0deg) scale(1);
        -ms-transform: rotate(0deg) scale(1);
        -o-transform: rotate(0deg) scale(1);
        transform: rotate(0deg) scale(1); 
    }
    50% { 
        -webkit-transform: rotate(180deg) scale(1.2);
        -moz-transform: rotate(180deg) scale(1.2);
        -ms-transform: rotate(180deg) scale(1.2);
        -o-transform: rotate(180deg) scale(1.2);
        transform: rotate(180deg) scale(1.2); 
    }
}

.cta-content h3{
    font-size: 3.2rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 1.5rem;
    color: var(--white);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.cta-content p{
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 1.4;
    margin-bottom: 2.5rem;
    color: rgba(255, 255, 255, 0.95);
}

.cta-content .btn{
    background: var(--white);
    color: var(--main-color);
    padding: 1.5rem 4rem;
    font-size: 1.6rem;
    font-weight: 700;
    border: none;
    -webkit-border-radius: 5rem;
    -moz-border-radius: 5rem;
    -ms-border-radius: 5rem;
    -o-border-radius: 5rem;
    border-radius: 5rem;
    -webkit-box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.1rem;
}

.cta-content .btn:hover{
    background: var(--main-color);
    color: var(--white);
    -webkit-transform: translateY(-0.3rem);
    -ms-transform: translateY(-0.3rem);
    -moz-transform: translateY(-0.3rem);
    -o-transform: translateY(-0.3rem);
    transform: translateY(-0.3rem);
    -webkit-box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
}

/*------------------------------ (01)-Home (End) ------------------------------*/



/*------------------------------ (02)-About (Start) ------------------------------*/
.about-us{
    padding: 0;
}

/*----- 1- About Us -----*/
.about{
    padding-top: 5rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; 
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 4rem;
}
.udaipur-about{
    padding-top: 0px !important;
}

.about .about-image-collage{
    -webkit-box-flex: 1;
    -ms-flex: 1 1 45rem;
    flex: 1 1 45rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 2rem;
}

.about .collage-large{
    -webkit-box-flex: 1;
    -ms-flex: 1 1 30rem;
    flex: 1 1 30rem;
    height: 50rem;
    overflow: hidden;
    -webkit-border-radius: 2rem;
    -moz-border-radius: 2rem;
    -ms-border-radius: 2rem;
    -o-border-radius: 2rem;
    border-radius: 2rem;
    border: 0.5rem solid var(--main-color);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.about .collage-large img{
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    display: block;
    -webkit-transition: -webkit-transform 0.5s ease;
    transition: -webkit-transform 0.5s ease;
    transition: transform 0.5s ease;
    transition: transform 0.5s ease, -webkit-transform 0.5s ease;
}

.about .collage-large:hover img{
    -webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -o-transform: scale(1.05);
    transform: scale(1.05);
}

.about .collage-grid{
    -webkit-box-flex: 1;
    -ms-flex: 1 1 20rem;
    flex: 1 1 20rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 2rem;
}

.about .collage-small{
    height: 15rem;
    overflow: hidden;
    -webkit-border-radius: 1.5rem;
    -moz-border-radius: 1.5rem;
    -ms-border-radius: 1.5rem;
    -o-border-radius: 1.5rem;
    border-radius: 1.5rem;
    border: 0.4rem solid var(--main-color);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.about .collage-small:hover{
    -webkit-transform: translateX(1rem);
    -ms-transform: translateX(1rem);
    -moz-transform: translateX(1rem);
    -o-transform: translateX(1rem);
    transform: translateX(1rem);
    border-color: var(--main-color);
}

.about .collage-small img{
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    display: block;
    -webkit-transition: -webkit-transform 0.4s ease;
    transition: -webkit-transform 0.4s ease;
    transition: transform 0.4s ease;
    transition: transform 0.4s ease, -webkit-transform 0.4s ease;
}

.about .collage-small:hover img{
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}

.about .content{
    -webkit-box-flex: 1;
    -ms-flex: 1 1 40rem;
        flex: 1 1 40rem;
}

.about .heading{
    -webkit-box-align: start;
    -ms-flex-align: start;
    -ms-grid-row-align: flex-start;
    align-items: flex-start;
}

.about .heading h2{
    text-align: left;
}

.about .content p{
    padding-bottom: 1rem;
}

.about .about-features{
    padding-top: 0.5rem;
    padding-bottom: 1.5rem;
}

.about .about-features li{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 1rem;
    padding-bottom: 1rem;
    font-size: 1.6rem;
}

.about .about-features i{
    color: var(--main-color);
}

.about .about-features span{
    color: var(--grey);
    font-size:1.8rem;
}

/*----- 2- Team -----*/
.team .box-container{
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (minmax(25rem, 1fr))[auto-fit];
    grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
    gap: 1rem;
}

.team-item {
    position: relative;
    border-top: var(--custom-border);
    border-bottom: var(--custom-border);
    -webkit-box-shadow: var(--box-shadow);
            box-shadow: var(--box-shadow);
    overflow: hidden;
    height: 40rem;
    -webkit-border-radius: var(--border-radius-3);
    -moz-border-radius: var(--border-radius-3);
    -ms-border-radius: var(--border-radius-3);
    -o-border-radius: var(--border-radius-3);
    border-radius: var(--border-radius-3);
}

.team-item .content{
    padding: 2rem 1.5rem;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%; 
    background: -webkit-linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5));
    background:         linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5));
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
}

.team-item .content h3{
    font-size: 3.2rem;
    font-weight: 600;
    letter-spacing: 0.08rem;
    color: var(--white);
    font-family: "Great Vibes", cursive;
}

.team-item .content h3:hover{
    color: var(--main-color);
}

.team-item .content p{
    font-weight: 500;
    color: var(--white);
    text-transform: uppercase;
}

.team-item .icon-container{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    padding-top: 1rem;
    overflow: hidden;
    background-color: var(--main-color);
    -webkit-transition: all 0.4s ease-in-out 0s;
    -moz-transition: all 0.4s ease-in-out 0s;
    -o-transition: all 0.4s ease-in-out 0s;
    transition: all 0.4s ease-in-out 0s;
    z-index: 2;
    -webkit-border-radius: var(--border-radius-3);
    -moz-border-radius: var(--border-radius-3);
    -ms-border-radius: var(--border-radius-3);
    -o-border-radius: var(--border-radius-3);
    border-radius: var(--border-radius-3);
}

.team-item .icon-container a{
    height: 4rem;
    width: 4rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;  
    font-size: 1.7rem;
    color: var(--white);
}

.team-item .icon-container a:hover{
    color: var(--main-color);
    background-color: var(--white);
}

/*----- 3- Team Single -----*/
.team-single .team-intro{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 3rem;
    -webkit-box-shadow: var(--box-shadow);
    box-shadow: var(--box-shadow);
    background-color: var(--white);
    padding: 2rem;
    -webkit-border-radius: var(--border-radius-2);
    -moz-border-radius: var(--border-radius-2);
    -ms-border-radius: var(--border-radius-2);
    -o-border-radius: var(--border-radius-2);
    border-radius: var(--border-radius-2);
}

.team-single .image{
    width: 40rem;
    height: 50rem;
    overflow: hidden;
    -webkit-box-shadow: var(--box-shadow);
    box-shadow: var(--box-shadow);
    -webkit-border-radius: var(--border-radius-3);
    -moz-border-radius: var(--border-radius-3);
    -ms-border-radius: var(--border-radius-3);
    -o-border-radius: var(--border-radius-3);
    border-radius: var(--border-radius-3);
}

.team-single .information{
    -webkit-box-flex: 1;
    -ms-flex: 1 1 50rem;
        flex: 1 1 50rem;
}

.team-single .information h3{
    color: var(--secondary-color);
    font-size: 3.5rem;
    font-weight: 600;
    font-family: "Great Vibes", cursive;
}

.team-single .information h5{
    color: var(--main-color);
    text-transform: uppercase;
    font-size: 1.8rem;
    font-weight: 500;
    padding-bottom: 1.5rem;
}

.team-single .information .team-about{
    padding-top: 1.5rem;
    border-top: 0.1rem solid rgba(0, 0, 0, 0.2);
}

.team-single .text{
    font-size: 1.6rem;
    letter-spacing: 0.2px;
    font-weight: 400;
    color: var(--grey);
    line-height: 1.7;
}

.team-single .team-personal-info{
    padding-top: 2rem;
    padding-bottom: 1rem;
}

.team-single .team-personal-info li{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 1rem;
    padding-bottom: 1.5rem;
}

.team-single .team-personal-info i{
    font-size: 1.6rem;
    color: var(--main-color);
    padding-right: 0.5rem;
}

.team-single .team-personal-info h6{
    font-size: 2rem;
    color: var(--secondary-color);
}

.team-single .team-personal-info span{
    font-size: 1.8rem;
    font-weight: 500;
    color: var(--grey);
    text-transform: none;
}

.team-single .icon-container{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center; 
    -ms-flex-align: center;
    align-items: center;
    gap: 0.7rem;
}

.team-single .icon-container a{
    height: 4rem;
    width: 4rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;  
    font-size: 1.5rem;
    color: var(--white);
    background-color: var(--main-color);
    -webkit-clip-path: var(--custom-clip-path);
            clip-path: var(--custom-clip-path);
}

.team-single .icon-container a:hover{
    background: var(--secondary-color);
}

.team-single .page-info{
    background-color: transparent;
    -webkit-box-shadow: none;
            box-shadow: none;
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
}

.team-single .box-container{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 2rem;
    padding-top: 2rem;
}

.team-single h4{
    font-size: 3rem;
    font-weight: 500;
    color: var(--secondary-color);
    padding-bottom: 0.5rem;
}

.team-single .sub-section{
    -webkit-box-flex: 1;
        -ms-flex: 1 1 40rem;
            flex: 1 1 40rem;
}

.team-single .skills .box{
    padding: 1rem 0;
}

.team-single .skills .box h3{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 0.7rem 0;
    font-size: 1.7rem;
    color: var(--secondary-color);
    font-weight: 400;
}

.team-single .skills .box .progress-bar{
    width: 100%;
    background: var(--secondary-color);
    overflow: hidden;
    height: 1.2rem;
    -webkit-border-radius: 50rem;
    -moz-border-radius: 50rem;
    -ms-border-radius: 50rem;
    -o-border-radius: 50rem;
    border-radius: 50rem;
}
 
.team-single .skills .box .progress-bar span{
    display: block;
    height: 100%;
    background: var(--main-color);
}

/*----- 4- Testimonials -----*/
.testimonial .heading{
    -webkit-box-align: start;
    -ms-flex-align: start;
    -ms-grid-row-align: flex-start;
    align-items: flex-start;
    padding-left: 2rem;
    padding-right: 2rem;
}

.testimonial .heading h2{
    text-align: left;
}

.testimonial .box-container{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 2rem;
}

.testimonial .image{
    width: 35rem;
    height: 55rem;
    overflow: hidden;
    -webkit-border-radius: var(--border-radius-3);
    -moz-border-radius: var(--border-radius-3);
    -ms-border-radius: var(--border-radius-3);
    -o-border-radius: var(--border-radius-3);
    border-radius: var(--border-radius-3);
    border: 0.15rem solid var(--main-color);
    padding: 1.5rem;
}

.testimonial .image img{
    -webkit-border-radius: var(--border-radius-3);
    -moz-border-radius: var(--border-radius-3);
    -ms-border-radius: var(--border-radius-3);
    -o-border-radius: var(--border-radius-3);
    border-radius: var(--border-radius-3);
}

.testimonial-slider{
    -webkit-box-flex: 1;
    -ms-flex: 1 1 55rem;
        flex: 1 1 55rem;
    overflow: hidden;    
    position: relative;
    padding-top: 0.5rem;
    padding-bottom: 4rem;
}

.testimonial .swiper-pagination{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    padding-left: 3rem;
    bottom: 2rem;
}

.testimonial .swiper-pagination-bullet{
    background: var(--secondary-color);
    opacity: 0.9;
}

.testimonial-bg .swiper-pagination-bullet{
    background: var(--white);
}

.testi-item{
    padding: 3rem;
    padding-top: 1rem;
}

.testi-item img{
    height: 12rem;
    width: 12rem;
    margin-bottom: 2rem;
    -webkit-clip-path: var(--custom-clip-path);
            clip-path: var(--custom-clip-path);
    -webkit-box-shadow: var(--box-shadow);
            box-shadow: var(--box-shadow);
}

.testi-item .intro{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}

.testi-item .fa-quote-right{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    font-size: 5rem;
    color: transparent;
    -webkit-text-stroke: 2px var(--main-color);
}

.testi-item h4{
    font-size: 3rem;
    font-weight: 600;
    color: var(--secondary-color);
    font-family: "Great Vibes", cursive;
}

.testi-item h6{
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--main-color);
}

.testi-item p{
    padding: 2rem 0;
}

.testi-item .rating i{
    font-size: 1.8rem;
    color: var(--main-color);
}

/*----- 5- Faqs -----*/
.faq .box-container{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 2rem;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap; 
}

.accordion-container{
    -webkit-box-flex: 1;
    -ms-flex: 1 1 55rem;
        flex: 1 1 55rem;
}

.accordion{
    background: var(--white);
    margin-bottom: 1.5rem;
    -webkit-box-shadow: var(--box-shadow);
    box-shadow: var(--box-shadow);
    overflow: hidden;
    -webkit-border-radius: var(--border-radius-1);
    -moz-border-radius: var(--border-radius-1);
    -ms-border-radius: var(--border-radius-1);
    -o-border-radius: var(--border-radius-1);
    border-radius: var(--border-radius-1);
} 
 
.accordion:last-child{
    margin-bottom: 0rem;
}  

.accordion .accordion-heading{
    padding: 1.5rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 1.5rem;
    cursor: pointer;
    font-size: 1.8rem;
}

.accordion.active .accordion-heading {
    border-bottom: 0.3rem solid var(--main-color);
}

.accordion .accordion-heading i{
    height: 4rem;
    width: 4rem;
    color: var(--white);
    background-color: var(--main-color);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-border-radius: 0.2rem;
    -moz-border-radius: 0.2rem;
    -ms-border-radius: 0.2rem;
    -o-border-radius: 0.2rem;
    border-radius: 0.2rem;
}

.accordion .accordion-heading h3{
    color: var(--secondary-color);
}

.accordion.active .accordion-heading h3{
    color: var(--main-color);
}

.accordion.active .accordion-content{
    display: block;
}

.accordion-content{
    padding: 2rem;
    font-size: 1.5rem;
    line-height: 2;
    color: var(--grey);
    display: none;
}

.faq .image{
    -webkit-box-flex: 1;
    -ms-flex: 1 1 25rem;
    flex: 1 1 25rem;
    height: 55rem;
    -webkit-box-shadow: var(--box-shadow);
    box-shadow: var(--box-shadow);
    overflow: hidden;
    -webkit-border-radius: var(--border-radius-3);
    -moz-border-radius: var(--border-radius-3);
    -ms-border-radius: var(--border-radius-3);
    -o-border-radius: var(--border-radius-3);
    border-radius: var(--border-radius-3);
}

/*------------------------------ (02)-About (End) ------------------------------*/



/*------------------------------ (04)-Event (Start) ------------------------------*/

/*----- 1- Events -----*/
.events .box-container{
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (minmax(32rem, 1fr))[auto-fit];
        grid-template-columns: repeat(auto-fit, minmax(32rem, 1fr));
    gap: 1.5rem;
}

.event-item{
    height: 40rem;
    position: relative;
    border-top: var(--custom-border);
    border-bottom: var(--custom-border);
    -webkit-box-shadow: var(--box-shadow);
    box-shadow: var(--box-shadow);
    overflow: hidden;
    -webkit-border-radius: var(--border-radius-3);
    -moz-border-radius: var(--border-radius-3);
    -ms-border-radius: var(--border-radius-3);
    -o-border-radius: var(--border-radius-3);
    border-radius: var(--border-radius-3);
}

.event-item .content{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6));
    background:         linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6));
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    padding: 2rem;
}

.event-item .main-heading{
    display: block;
    font-size: 4rem;
    font-weight: 600;
    color: var(--white);
    letter-spacing: 0.1rem;
    line-height: 1.3;
    font-family: "Great Vibes", cursive;
}

.event-item .main-heading:hover{
    color: var(--main-color);
}

.event-item .icon{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 2rem;
    margin-bottom: 1.5rem;
}

.event-item .icon span{
    height: 0.2rem;
    width: 4rem;
    background-color: var(--white);
}

.event-item .icon i{
    font-size: 3rem;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--white);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

/*----- 2- Event Single -----*/


/*------------------------------ (04)-Event (End) ------------------------------*/



/*------------------------------ (04)-Service (Start) ------------------------------*/

/*----- 1- Services -----*/
.services .box-container{
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (minmax(32rem, 1fr))[auto-fit];
        grid-template-columns: repeat(auto-fit, minmax(32rem, 1fr));
    gap: 1.5rem;
}

/* .service-item{
    position: relative;
    -webkit-box-shadow: var(--box-shadow);
    box-shadow: var(--box-shadow);
    height: 40rem;
    overflow: hidden;
    border-top: var(--custom-border);
    border-bottom: var(--custom-border);
    -webkit-border-radius: var(--border-radius-3);
    -moz-border-radius: var(--border-radius-3);
    -ms-border-radius: var(--border-radius-3);
    -o-border-radius: var(--border-radius-3);
    border-radius: var(--border-radius-3);
} */

.service-item .content{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    /* background: -webkit-linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.8));
    background:         linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.8)); */
    background: url(assets/images/new-images/about-background2.webp);
    padding: 2rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
}

.service-item i{
    height: 8rem;
    width: 8rem;
    font-size: 3rem;
    margin-bottom: 1.5rem;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--white);
    background-color: rgba(235, 54, 120, 0.9);
    -webkit-clip-path: var(--custom-clip-path);
            clip-path: var(--custom-clip-path);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.service-item h3{
    font-size: 3.5rem;
    font-weight: 600;
    color: var(--white);
    padding-bottom: 0.5rem;
    font-family: "Great Vibes", cursive;
}

.service-item h3:hover{
    color: var(--main-color);
}

.service-item p{
    color: var(--light-grey);
    margin-bottom: 2rem;
}

/*----- 2- Service Single -----*/
.service-single .faq .accordion-container{
    padding-top: 0.5rem;
}

/*------------------------------ (04)-Service (End) ------------------------------*/



/*------------------------------ (05)-Pages (Start) ------------------------------*/

/*--------------- COMPONENTS ---------------*/

/*----- 01- Tab Informatin -----*/
.tab-buttons{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    list-style-type: none;
    gap: 1rem;
    margin-bottom: 2rem;
}

.tab-buttons .button{
    font-size: 1.6rem;
    font-weight: 500;
    padding: 1.5rem 3rem;
    color: var(--white);
    background-color: var(--secondary-color);
    text-transform: uppercase;
    text-align: center;
    -webkit-border-radius: var(--border-radius-1);
    -moz-border-radius: var(--border-radius-1);
    -ms-border-radius: var(--border-radius-1);
    -o-border-radius: var(--border-radius-1);
    border-radius: var(--border-radius-1);
}

.tab-buttons .button:hover,
.tab-buttons .button.active{
    background-color: var(--main-color);        
    -webkit-box-shadow: var(--box-shadow);
            box-shadow: var(--box-shadow);
    cursor: pointer;
}

.tab-section{
    display: none;
}

.tab-section.active{
    display: block;
    margin-top: 2rem;
}

/*----- 02- Page Single -----*/
.page-single{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
        align-items: flex-start;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 1.5rem;
}

.page-single .sidebar .sidebar-item{
    margin-bottom: 0;
}

.page-info{
    -webkit-box-flex: 1;
    -ms-flex: 1 1 75rem; 
        flex: 1 1 75rem;
}

.page-info .image{
    height: 40rem;
}

.page-info .image img{
    -webkit-box-shadow: var(--box-shadow);
    box-shadow: var(--box-shadow);
    -webkit-border-radius: var(--border-radius-2);
    -moz-border-radius: var(--border-radius-2);
    -ms-border-radius: var(--border-radius-2);
    -o-border-radius: var(--border-radius-2);
    border-radius: var(--border-radius-2);
}

.page-info .content{
    padding-top: 2rem;
}

.page-info .main-heading{
    display: inline-block;
    font-size: 3.5rem;
    font-weight: 600;
    /* color: var(--secondary-color); */
    /* text-shadow: 1px 1px 8px rgba(0,0,0, 0.2); */
    padding-bottom: 2rem;
}

.page-info .important{
    color: var(--secondary-color) !important;
    font-weight: 600;
}

.page-info p{
    padding-bottom: 3rem;
}

.page-info .page-gallery{ 
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (minmax(25rem, 1fr))[auto-fit];
        grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
    gap: 1rem;
    padding: 2rem 0;
}
  
.page-info .page-gallery img{
    -webkit-box-shadow: var(--box-shadow);
    box-shadow: var(--box-shadow);
    -webkit-border-radius: var(--border-radius-1);
    -moz-border-radius: var(--border-radius-1);
    -ms-border-radius: var(--border-radius-1);
    -o-border-radius: var(--border-radius-1);
    border-radius: var(--border-radius-1);
}

.page-info .sub-heading{
    display: inline-block;
    font-size: 2.5rem;
    font-weight: 600;
    color: var(--secondary-color);
    padding-bottom: 0.5rem;
}

.page-info .sub-section{
    padding-top: 2rem;
}

.page-info .sub-section p{
    margin-bottom: -1rem;
}

.page-info .sub-section ul{
    list-style: none;
}

.page-info .sub-section ul li{
    padding-top: 1rem;
    font-size: 1.5rem;
    color: var(--grey);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 1rem;
}

.page-info .sub-section ul i{ 
    color: var(--main-color);
    font-size: 1.4rem;
    height: 1.8rem;
    width: 1rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

/*----- 03- Page Sidebar -----*/
.page-sidebar{
    -webkit-box-flex: 1;
    -ms-flex: 1 1 25rem;
    flex: 1 1 25rem;
    padding: 4rem;
    background: var(--secondary-color);
    border-bottom: var(--custom-border);
    -webkit-box-shadow: var(--box-shadow);
    box-shadow: var(--box-shadow);
    -webkit-border-radius: var(--border-radius-2);
    -moz-border-radius: var(--border-radius-2);
    -ms-border-radius: var(--border-radius-2);
    -o-border-radius: var(--border-radius-2);
    border-radius: var(--border-radius-2);
}

.page-sidebar .sub-heading{
    display: inline-block;
    font-size: 2.5rem;
    font-weight: 600;
    color: var(--white);
    padding-bottom: 2rem;
    line-height: 1;
}

.page-sidebar .detail-item{
    padding-bottom: 2rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 0.8rem;
}

.page-sidebar .detail-item:last-child{
    padding-bottom: 0;
}

.page-sidebar .detail-item i{
    height: 2rem;
    width: 2rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; 
    font-size: 1.8rem;
    color: var(--main-color);
}

.page-sidebar .detail-item h3{
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--white);
    line-height: 1;
    padding-bottom: 0.5rem;
}

.page-sidebar .detail-item .detail-content p{
    font-weight: 400;
    color: var(--light-grey);
    line-height: 1.3;
}

.page-sidebar .gmail,
.page-sidebar .website{
    text-transform: none;
}

.page-sidebar .btn{
    margin-top: 3rem;
}

/*----- 04- Custom Form -----*/
.custom-form{
    padding: 2rem 0;
}

.custom-form .alert{
    font-size: 1.6rem;
    color: var(--main-color);
    padding-left: 1rem;
}

.custom-form .box-container{
    background-position: center;
    background-size: cover;
}

.custom-form .content{
    padding: 5rem 5%;
    padding-left: 8%;
    max-width: 150rem;
    padding-right: 20%;
    background: #000c;
    -webkit-clip-path: polygon(0 0, 100% 0, 80% 100%, 0% 100%);
            clip-path: polygon(0 0, 100% 0, 80% 100%, 0% 100%);
}

.custom-form .heading{
    -webkit-box-align: start;
    -ms-flex-align: start;
    -ms-grid-row-align: flex-start;
    align-items: flex-start;
}

.custom-form .heading h2{
    text-align: left;
}

.custom-form form{
    width: 100%;
}

/*--------------- PAGES ---------------*/

/*----- 1- Gallery -----*/
.gallery .box-container{
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 1fr 1fr;
        grid-template-columns: 1fr 1fr 1fr;
    -ms-grid-rows: auto;
        grid-template-rows: auto;
    gap: 1.5rem;
    grid-template-areas: 
    'gallery-1 gallery-4 gallery-7'
    'gallery-2 gallery-4 gallery-8'
    'gallery-3 gallery-5 gallery-9'
    'gallery-3 gallery-6 gallery-9'
}

.gallery-item{
    -webkit-box-shadow: var(--box-shadow);
            box-shadow: var(--box-shadow);
    overflow: hidden;
    position: relative;
    cursor: pointer;
    height: 28rem;
    -webkit-border-radius: var(--border-radius-1);
    -moz-border-radius: var(--border-radius-1);
    -ms-border-radius: var(--border-radius-1);
    -o-border-radius: var(--border-radius-1);
    border-radius: var(--border-radius-1);
}

/* Assign grid areas to Each Category Box */
.gallery-1 {
    grid-area: gallery-1;
}

.gallery-2 {
    grid-area: gallery-2;
}

.gallery-3 {
    grid-area: gallery-3;
    height: auto;
}

.gallery-4 {
    grid-area: gallery-4;
    height: auto;
}

.gallery-5 {
    grid-area: gallery-5;
}

.gallery-6 {
    grid-area: gallery-6;
}

.gallery-7 {
    grid-area: gallery-7;
}

.gallery-8 {
    grid-area: gallery-8;
}

.gallery-9 {
    grid-area: gallery-9;
    height: auto;
}



.gallery-item a i{
    scale: 0;
    font-size: 5rem;
    color: var(--white);
}

.gallery-item:hover a i{
    scale: 1;
}

/*----- 2- Work Process -----*/
.process{
    padding: 8rem 5%;
    /* background: -webkit-linear-gradient(rgba(46, 7, 63, 0.95), rgba(46, 7, 63, 0.95)), url("../images/Background/Testimonials.webp"); */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75))

, url("../images/new-images/jodhpur-destination.webp");
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}

.process .heading{
    text-align: center;
    margin-bottom: 1rem;
}

.process .heading .sub span{
    color: var(--accent-color);
    font-size: 1.8rem;
    text-transform: uppercase;
    letter-spacing: 0.2rem;
}

.process .heading h2{
    color: var(--white);
    /* font-size: 4.5rem; */
    margin-bottom: 4rem;
}

.process .box-container{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 4rem;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    max-width: 130rem;
    margin: 0 auto;
}

.process-item{
    position: relative;
    text-align: center;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 18rem;
    flex: 0 0 18rem;
}

.process-item .icon-wrapper{
    position: relative;
    width: 20rem;
    height: 20rem;
    margin: 0 auto 2rem;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    /* background: -webkit-linear-gradient(135deg, var(--accent-color), var(--main-color)); */
    /* background: linear-gradient(135deg, var(--accent-color), var(--main-color)); */
    background-size: cover;
    background-position: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    /* border: 4px dotted rgba(255, 255, 255, 0.3); */
    /* box-shadow: 0 15px 40px rgba(235, 54, 120, 0.3); */
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

.process-item:hover .icon-wrapper{
    -webkit-transform: scale(1.1) rotate(5deg);
    -ms-transform: scale(1.1) rotate(5deg);
    -moz-transform: scale(1.1) rotate(5deg);
    -o-transform: scale(1.1) rotate(5deg);
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 10px 30px var(--main-color);
}

.process-item .icon-wrapper::before{
    content: "";
    position: absolute;
    inset: -4px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    border: 2px solid transparent;
    /* background: -webkit-linear-gradient(135deg, var(--main-color), transparent, var(--accent-color)); */
    /* background: linear-gradient(135deg, var(--main-color), transparent, var(--accent-color)); */
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    padding: 4px;
}

.process-item .icon-wrapper .inner-circle{
    width: 14rem;
    height: 14rem;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    background: rgba(122, 46, 14, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.process-item .icon-wrapper i{
    font-size: 6rem;
    color: var(--white);
}

.process-item .content{
    position: relative;
}

.process-item h6{
    position: absolute;
    top: -8rem;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    color: transparent;
    font-size: 3rem;
    font-weight: 900;
    -webkit-text-stroke-width: 1px;
    stroke-width: 1px;
    -webkit-text-stroke-color: rgba(255, 255, 255, 0.1);
    stroke: rgba(255, 255, 255, 0.1);
}

/* .process-item h3{
    font-size: 2.2rem;
    font-weight: 600;
    color: var(--white);
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
} */

.process-item p{
    color: var(--accent-color);
    font-size: 1.5rem;
    font-weight: 500;
    margin: 0;
}

.process-item .connector{
    position: absolute;
    top: 9rem;
    right: -4rem;
    width: 4rem;
    height: 4rem;
    border: none;
}

.process-item .connector::before{
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 2.5rem;
    height: 3px;
    background: var(--accent-color);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

.process-item .connector::after{
    content: '';
    position: absolute;
    top: 50%;
    right: 0.5rem;
    width: 1.2rem;
    height: 1.2rem;
    border-top: 3px solid var(--accent-color);
    border-right: 3px solid var(--accent-color);
    -webkit-transform: translateY(-50%) rotate(45deg);
    -ms-transform: translateY(-50%) rotate(45deg);
    -moz-transform: translateY(-50%) rotate(45deg);
    -o-transform: translateY(-50%) rotate(45deg);
    transform: translateY(-50%) rotate(45deg);
}


.process-item:last-child .connector{
    display: none;
}

/*----- 3- Portfolio -----*/
.portfolio .tab-buttons{
    -webkit-box-pack: center; 
    -ms-flex-pack: center;
    justify-content: center;
}

.portfolio-item{
    width: 33.3%;
    padding: 0.8rem;
}

.portfolio-content{
    height: 30rem;
    position: relative;
    overflow: hidden;
    -webkit-box-shadow: var(--box-shadow);
    box-shadow: var(--box-shadow);
    border-top: var(--custom-border);
    border-bottom: var(--custom-border);
    -webkit-border-radius: 250px 250px 0 0;
    -moz-border-radius: 250px 250px 0 0;
    -ms-border-radius: 250px 250px 0 0;
    -o-border-radius: 250px 250px 0 0;
    border-radius: 250px 250px 0 0;
}

.portfolio-item .content{
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background: -webkit-linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6));
    background:         linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6));
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    padding: 2rem;
}

.portfolio-item .text h3{
    font-size: 3.5rem;
    font-weight: 600;
    color: var(--white);
    font-family: "Great Vibes", cursive;
}

.portfolio-item .text h3:hover{
    color: var(--main-color);
}

.portfolio-item .text p{
    font-weight: 500;
    color: var(--light-grey);
    text-transform: uppercase;
}

.portfolio-item .view{
    height: 5rem;
    width: 5rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    border: 0.15rem solid var(--white);
    margin-bottom: 0.5rem;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
}

.portfolio-item a i{
    font-size: 2rem;
    color: var(--white);
}

/*----- 4- Portfolio Single -----*/

/*----- 5- Careers -----*/
.career{
    padding: 0;
}

.career .career-intro{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; 
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 4rem;
    padding: 3rem 5%;
}

.career .content{
    -webkit-box-flex: 1;
    -ms-flex: 1 1 40rem;
        flex: 1 1 40rem;
}

.career-intro .heading{
    -webkit-box-align: start;
    -ms-flex-align: start;
    -ms-grid-row-align: flex-start;
    align-items: flex-start;
}

.career-intro .heading h2{
    text-align: left;
}

.career .content p{
    padding-bottom: 1rem;
}

.career .career-features{
    padding-top: 0.5rem;
}

.career .career-features li{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 1rem;
    padding-bottom: 1rem;
    font-size: 1.6rem;
}

.career .career-features i{
    color: var(--main-color);
}

.career .career-features span{
    color: var(--grey);
}

.career .image{
    -webkit-box-flex: 1;
    -ms-flex: 1 1 40rem;
        flex: 1 1 40rem;
    height: 45rem;
    -webkit-box-shadow: var(--box-shadow);
            box-shadow: var(--box-shadow);
    -webkit-border-radius: var(--border-radius-3);
    -moz-border-radius: var(--border-radius-3);
    -ms-border-radius: var(--border-radius-3);
    -o-border-radius: var(--border-radius-3);
    border-radius: var(--border-radius-3);
    overflow: hidden;
}

.career-benefits{
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (minmax(30rem, 1fr))[auto-fit];
        grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
    gap: 3rem;
    background: -webkit-linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.7)), url("../images/Background/Career.webp");
    background:         linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.7)), url("../images/Background/Career.webp");
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    padding: 6rem 5%;
}

.career-benefits .benefit-item{
    text-align: center;
}

.career-benefits .benefit-item i{
    height: 7rem;
    width: 7rem;
    font-size: 2.5rem;
    margin: 0rem auto;
    margin-bottom: 1.5rem;
    color: var(--white);
    background-color: var(--main-color);
    -webkit-clip-path: var(--custom-clip-path);
            clip-path: var(--custom-clip-path);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.career-benefits .benefit-item h3{
    font-size: 2.5rem;
    font-weight: 600;
    color: var(--white);
    padding-bottom: 0.5rem;
}

.career-benefits .benefit-item p{
    color: var(--light-grey);
}

.career-positions{
    padding: 3rem 5%;
}

.career-positions .box-container{
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (minmax(32rem, 1fr))[auto-fit];
        grid-template-columns: repeat(auto-fit, minmax(32rem, 1fr));
    gap: 1.5rem;
}

.position-item{
    background-color: var(--white);
    -webkit-box-shadow: var(--box-shadow);
            box-shadow: var(--box-shadow);
    border-top: var(--custom-border);
    border-bottom: var(--custom-border);
    padding: 3rem;
    padding-top: 5rem;
    -webkit-border-radius: var(--border-radius-3);
    -moz-border-radius: var(--border-radius-3);
    -ms-border-radius: var(--border-radius-3);
    -o-border-radius: var(--border-radius-3);
    border-radius: var(--border-radius-3);
    text-align: center;
}

.position-item .icon{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 2rem;
}

.position-item .icon span{
    height: 0.2rem;
    width: 4rem;
    background-color: var(--main-color);
}

.position-item .icon i{
    font-size: 4rem;
    color: transparent;
    -webkit-text-stroke: 2px var(--main-color);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.position-item h3{
    font-size: 3.5rem;
    color: var(--secondary-color);
    font-family: "Great Vibes", cursive;
    padding-top: 2rem;
    padding-bottom: 1rem;
}

.position-item h3:hover{
    color: var(--main-color);
}

.position-item .details{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 1.5rem;
    padding-bottom: 1.5rem;
}

.position-item h5{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 0.5rem;
}

.position-item h5 i{
    font-size: 1.6rem;
    color: var(--main-color);
}

.position-item h5 span{
    font-size: 1.8rem;
    font-weight: 400;
    color: var(--secondary-color);
}

.position-item p{
    margin-bottom: 1rem;
}

/*----- 6- Career Single -----*/

/*----- 7- Career Form -----*/
.career-form .box-container{
    background-image: url("../images/Background/Career-Form.webp");
}

/*----- 8- Pricing -----*/
.pricing .box-container{
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (minmax(32rem, 1fr))[auto-fit];
        grid-template-columns: repeat(auto-fit, minmax(32rem, 1fr));
    gap: 1rem;
}

.pricing .plan-item{
    background-color: var(--white);
    overflow: hidden;
    border-bottom: var(--custom-border);
    border-top: var(--custom-border);
    -webkit-box-shadow: var(--box-shadow);
            box-shadow: var(--box-shadow);
    -webkit-border-radius: var(--border-radius-3);
    -moz-border-radius: var(--border-radius-3);
    -ms-border-radius: var(--border-radius-3);
    -o-border-radius: var(--border-radius-3);
    border-radius: var(--border-radius-3);
    padding: 2rem;
}

.pricing .plan-item .image{
    height: 27rem;
    position: relative;
    overflow: hidden;
    -webkit-border-radius: var(--border-radius-3);
    -moz-border-radius: var(--border-radius-3);
    -ms-border-radius: var(--border-radius-3);
    -o-border-radius: var(--border-radius-3);
    border-radius: var(--border-radius-3);
}

.pricing .plan-item .intro{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: -webkit-linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.5));
    background:         linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.5));
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    padding: 2rem;
}

.pricing .plan-item .icon{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 2rem;
    padding-bottom: 2rem;
}

.pricing .plan-item .icon span{
    height: 0.2rem;
    width: 4rem;
    background-color: var(--white);
}

.pricing .plan-item .icon i{
    font-size: 3rem;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--white);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.pricing .plan-item h3{
    color: var(--white);
    font-size: 4rem;
    font-weight: 500;
    padding-bottom: 1rem;
    font-family: "Great Vibes", cursive;
}
  
.pricing .plan-item .price{
    color: var(--white);
    font-size: 6rem;
    font-weight: 500;
    line-height: 1;
    font-family: "Great Vibes", cursive;
}

.pricing .plan-item .content{
    text-align: center;
}

.pricing .plan-item ul{ 
    padding: 2.5rem 2rem;
    list-style: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}
    
.pricing .plan-item ul li{
    padding: 0.6rem 0;
    font-size: 1.6rem;
    color: var(--grey);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; 
    gap: 0.7rem;
}
  
.pricing .plan-item ul li i{
    height: 1.8rem;
    width: 1.8rem;
    color: var(--main-color);
    font-size: 1.3rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

/*----- 9- Vendor Category -----*/
.vendor-categories .box-container{
    margin-top: 5rem;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 1fr 1fr 1fr;
        grid-template-columns: 1fr 1fr 1fr 1fr;
    -ms-grid-rows: auto;
        grid-template-rows: auto;
    gap: 1.5rem;
    grid-template-areas: 
    'category-1 category-1 category-2 category-3'
    'category-4 category-5 category-6 category-6'
}
.vendor-categories .heading{
    margin-top: 5rem;
}

.category-item{
    height: 35rem;
    position: relative;
    overflow: hidden;
    -webkit-box-shadow: var(--box-shadow);
            box-shadow: var(--box-shadow);
    -webkit-border-radius: var(--border-radius-2);
    -moz-border-radius: var(--border-radius-2);
    -ms-border-radius: var(--border-radius-2);
    -o-border-radius: var(--border-radius-2);
    border-radius: var(--border-radius-2);
}

/* Assign grid areas to Each Category Box */
.category-1 {
    grid-area: category-1;
}

.category-2 {
    grid-area: category-2;
}

.category-3 {
    grid-area: category-3;
}

.category-4 {
    grid-area: category-4;
}

.category-5 {
    grid-area: category-5;
}

.category-6 {
    grid-area: category-6;
}

.category-item .content{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    padding: 2rem;
    background: -webkit-linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.7));
    background:         linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.7));
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

.category-item .category{
    height: 7rem;
    width: 7rem;
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--white);
    border: 0.15rem solid rgba(255, 255, 255, 0.9);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
}

.category-item .content a{
    display: inline-block;
    font-size: 2.5rem;
    font-weight: 500;
    padding-top: 0.7rem;
    padding-bottom: 0.5rem;
    color: var(--white);
}

.category-item .content a:hover{
    color: var(--main-color);
}

.category-item p{
    color: var(--white);
    text-transform: uppercase;
}

/*----- 10- Vendors -----*/
.vendors .box-container{
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (minmax(25rem, 1fr))[auto-fit];
        grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
    gap: 1.5rem;
}

.vendor-item{
    height: 35rem;
    position: relative;
    overflow: hidden;
    border-top: var(--custom-border);
    border-bottom: var(--custom-border);
    -webkit-box-shadow: var(--box-shadow);
    box-shadow: var(--box-shadow);
    -webkit-border-radius: var(--border-radius-3);
    -moz-border-radius: var(--border-radius-3);
    -ms-border-radius: var(--border-radius-3);
    -o-border-radius: var(--border-radius-3);
    border-radius: var(--border-radius-3);
}

.vendor-item .content{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    padding: 2rem;
    background: -webkit-linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.7));
    background:         linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.7));
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

.vendor-item .rating{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 1rem;
}

.vendor-item .rating i{
    font-size: 1.6rem;
    color: var(--main-color);
}

.vendor-item .rating h5{
    font-size: 1.6rem;
    color: var(--light-grey);
}

.vendor-item .content a{
    display: inline-block;
    font-size: 3.5rem;
    font-weight: 500;
    padding-top: 1.5rem;
    padding-bottom: 0.5rem;
    color: var(--white);
    font-family: "Great Vibes", cursive;
}

.vendor-item .content a:hover{
    color: var(--main-color);
}

.vendor-item p{
    color: var(--white);
    text-transform: uppercase;
}

/*----- 11- Vendor Single -----*/
.vendor-info .page-gallery{
    padding: 0;
}

.vendor-info iframe{
    width: 100%;
    height: 40rem;
    margin-top: 1rem;
    -webkit-border-radius: var(--border-radius-2);
    -moz-border-radius: var(--border-radius-2);
    -ms-border-radius: var(--border-radius-2);
    -o-border-radius: var(--border-radius-2);
    border-radius: var(--border-radius-2);
    -webkit-box-shadow: var(--box-shadow);
            box-shadow: var(--box-shadow);
}

.vendor-info h2{
    font-size: 3rem; 
    color: var(--secondary-color); 
    padding-bottom: 1rem;
}

.vendor-info .reviews{
    margin-bottom: 2rem;
} 

/*----- 12- Booking -----*/
.booking-form .box-container{
    background-image: url("../images/new-images/background2.webp");
}

/*----- 13- Partners -----*/
.partners .box-container{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 2rem;
}

.partner-item{
    width: 20rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

/*------------------------------ (05)-Pages (End) ------------------------------*/



/*------------------------------ (06)-Blog (Start) ------------------------------*/

/*--------------- COMPONENTS ---------------*/

/*----- 01- Blog-Item -----*/
.blog-item{
    border-top: var(--custom-border);
    border-bottom: var(--custom-border);
    overflow: hidden;
    -webkit-box-shadow: var(--box-shadow);
            box-shadow: var(--box-shadow);
    position: relative;
    -webkit-border-radius: var(--border-radius-3);
    -moz-border-radius: var(--border-radius-3);
    -ms-border-radius: var(--border-radius-3);
    -o-border-radius: var(--border-radius-3);
    border-radius: var(--border-radius-3);
}

.blog-item .image{
    height: 35rem;
} 

.blog-item .content{
    position: absolute;
    top: 0;
    left: 0; 
    height: 100%;
    width: 100%;
    background: -webkit-linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.7));
    background:         linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.7));
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    padding: 2rem;
}

.blog-item .date{
    display: inline-block;
    font-size: 1.6rem;
    font-weight: 500;
    color: var(--white);
    background-color: rgba(235, 54, 120, 0.9);
    padding: 1rem 1.5rem;
    margin-bottom: 1rem;
    -webkit-border-radius: var(--border-radius-1);
    -moz-border-radius: var(--border-radius-1);
    -ms-border-radius: var(--border-radius-1);
    -o-border-radius: var(--border-radius-1);
    border-radius: var(--border-radius-1);
}

.blog-item .main-heading{
    display: block;
    font-size: 3.5rem;
    font-weight: 600;
    color: var(--white);
    line-height: 1.3;
    padding-top: 0.5rem;
    padding-bottom: 0.8rem;
    font-family: "Great Vibes", cursive;
}

.blog-item .main-heading:hover{
    color: var(--main-color);
}

.blog-item .details{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 2rem;
    padding-bottom: 0.5rem;
}

.blog-item h3{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 0.7rem;
}

.blog-item h3 i{
    height: 2rem;
    width: 2rem;
    font-size: 1.8rem;
    color: var(--main-color);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.blog-item h3 span{
    font-size: 1.6rem;
    font-weight: 400;
    color: var(--light-grey);
}

/*----- 02- Comments -----*/
.comment-item{
    padding-bottom: 1rem;
}

.comment-item:last-child{
    padding-bottom: 0;
}

.comment{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    -ms-grid-row-align: flex-start;
    align-items: flex-start;
    gap: 2rem;
    padding-bottom: 2rem;
}

.comment .comment-image{
    height: 10rem;
    width: 10rem;
    border: 0.4rem solid var(--white);
    -webkit-box-shadow: var(--box-shadow);
    box-shadow: var(--box-shadow);
    overflow: hidden;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
}

.comment .comment-content{
    -webkit-box-flex: 1;
    -ms-flex: 1 1 35rem;
        flex: 1 1 35rem;
}

.comment .comment-intro{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 1rem;
}

.comment h3{
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--secondary-color);
}

.comment h6{
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--main-color);
}

.comment .text{
    padding-top: 1rem;
    font-size: 1.5rem;
    color: var(--grey);
    line-height: 1.5;
}

.comment .icon-item{
    display: inline-block;
    color: var(--white);
    background-color: var(--main-color);
    padding: 0.7rem 1.5rem;
    cursor: pointer;
    -webkit-border-radius: 5rem;
    -moz-border-radius: 5rem;
    -ms-border-radius: 5rem;
    -o-border-radius: 5rem;
    border-radius: 5rem;
}

.comment .icon-item:hover{
    background-color: var(--secondary-color);
}

.comment .icon-item i{
    font-size: 1.5rem;
    padding-right: 0.5rem
}

.comment .icon-item span{
    font-size: 1.6rem;
}

.comment.reply{
    margin-left: 12rem;
}

.comment.reply .comment-content{
    -webkit-box-flex: 1;
    -ms-flex: 1 1 20rem;
        flex: 1 1 20rem;
}

/*----- 03- Pages-No -----*/
.pages-no{
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-top: 2rem;
}

.pages-no .container{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 1rem;
}

.pages-no .item{
    color: var(--white);
    background-color: var(--secondary-color);
    -webkit-box-shadow: var(--box-shadow);
            box-shadow: var(--box-shadow);
    height: 5rem;
    width: 5rem;
    font-size: 2rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.pages-no .item.active,
.pages-no .item:hover{
    cursor: pointer;
    background-color: var(--main-color);
}

.pages-no .numbers{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 1rem;
}

/*--------------- PAGES ---------------*/
.blog-container{
    -webkit-box-flex: 1;
    -ms-flex: 1 1 75rem;
        flex: 1 1 75rem;
}

/*----- 1- Blog Grid -----*/
.blog.grid{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 1.5rem;
}

.blog-container.grid .blog-items{
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (minmax(32rem, 1fr))[auto-fit];
        grid-template-columns: repeat(auto-fit, minmax(32rem, 1fr));
    gap: 1.5rem;
}

/*----- 2- Blog List -----*/
.blog.list{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 1.5rem;
}

.blog-container.list .blog-item{
    width: 100%;
    margin-bottom: 1rem;
}

/*----- 3- Blog Single -----*/
/*
1- Blog Info
2- Comments
3- Leave A Reply
*/

.blog-single{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 1.5rem;
    margin: 3rem 12rem;
}

/*-- 1- Blog Info --*/ 
.blog-info .image{
    position: relative;
}

.blog-info .date{
    position: absolute;
    top: 2rem;
    left: 2rem;
    display: inline-block;
    font-size: 1.6rem;
    font-weight: 500;
    color: var(--white);
    background-color: var(--main-color);
    padding: 1rem 1.5rem;
    margin-bottom: 1rem;
    -webkit-border-radius: var(--border-radius-1);
    -moz-border-radius: var(--border-radius-1);
    -ms-border-radius: var(--border-radius-1);
    -o-border-radius: var(--border-radius-1);
    border-radius: var(--border-radius-1);
}

.blog-info .details{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 2rem;
    padding-bottom: 2rem;
    justify-content: space-between;
    color: var(--main-color);
    margin-top: 3rem;
}
.blog-info .details span{
    gap: 5px;
    display: flex;
    font-size: 1.5rem;
}

.blog-info .details h5{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 0.7rem;
}

.blog-info .details h5 i{
    font-size: 1.8rem;
    color: var(--main-color);
}

.blog-info .details h5 span{
    font-size: 1.6rem;
    font-weight: 400;
    color: var(--grey);
}

.blog-info .important{
    padding: 2rem;
    font-size: 1.8rem;
    font-weight: 600;
    font-style: italic;
    line-height: 1.8;
    color: var(--light-grey) !important;
    background-color: var(--secondary-color);
    border: var(--custom-border);
    margin-top: 1rem;
    margin-bottom: 2rem;
    text-align: center;
    -webkit-border-radius: var(--border-radius-1);
    -moz-border-radius: var(--border-radius-1);
    -ms-border-radius: var(--border-radius-1);
    -o-border-radius: var(--border-radius-1);
    border-radius: var(--border-radius-1);
}

.blog-info .important i{
    height: 7rem;
    width: 7rem;
    font-size: 3.2rem;
    color: var(--white);
    background-color: var(--main-color); 
    margin: 0 auto;
    margin-bottom: 1.5rem;
    -webkit-clip-path: var(--custom-clip-path);
            clip-path: var(--custom-clip-path);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.blog-info .important .intro{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 1rem;
    padding-top: 1rem;
}

.blog-info .important .intro span{
    height: 0.2rem;
    width: 2rem;
    background-color: var(--main-color);
}

.blog-info .important .intro h6{
    font-size: 2rem;
    color: var(--main-color);
    font-style: normal;
}

.blog-info .end-details{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 2rem;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    padding-top: 2rem;
    padding-bottom: 1rem;
    border-top: 0.1rem solid rgba(0, 0, 0, 0.1);
}
  
.blog-info .tags, 
.blog-info .share{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 0.7rem;
}
  
.blog-info .tags span{
    color: var(--white);
    background-color: var(--main-color);
    font-size: 1.6rem;
    padding: 0.8rem 2rem;
    -webkit-border-radius: 5rem;
    -moz-border-radius: 5rem;
    -ms-border-radius: 5rem;
    -o-border-radius: 5rem;
    border-radius: 5rem;
}

.blog-info .tags span:hover{
    background-color: var(--secondary-color);
}
 
.blog-info .share h3{
    color: var(--secondary-color);
    font-size: 1.6rem;
    padding-right: 1rem;
}
  
.blog-info .share i{
    height: 2rem;
    width: 2rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center; 
    -ms-flex-align: center;
    align-items: center;
    color: var(--grey);
    font-size: 1.6rem;
}
  
.blog-info .share i:hover{
    color: var(--main-color);
    cursor: pointer;
}
   
/*-- 2- Comments --*/
.blog-single .comments{
    margin: 4rem 0;
    overflow: hidden;
} 

.blog-single .comments h4{  
    font-size: 2.5rem; 
    color: var(--secondary-color); 
    padding-bottom: 2rem;
} 

/*-- 3- Leave A Reply --*/
.blog-single .leave-reply h3{
    font-size: 2.5rem; 
    color: var(--secondary-color); 
    padding-bottom: 2rem;
}

/*------------------------------ (06)-Blog (End) ------------------------------*/



/*------------------------------ (07)-Shop (Start) ------------------------------*/

/*--------------- COMPONENTS ---------------*/

/*----- 01- Filter -----*/
.filter .box-container{
    padding-top: 4rem;
}

.filter .slider{
    height: 5px;
    position: relative;
    background: #ddd;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
}

.filter .slider .progress{
    height: 100%;
    left: 25%;
    right: 25%;
    position: absolute;
    background: var(--secondary-color);
    -webkit-transition: none;
    transition: none;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
}

.range-input{
    position: relative;
    -webkit-transition: none;
            transition: none;
}

.range-input input{
    position: absolute;
    width: 100%;
    height: 5px;
    top: -5px;
    background: none;
    pointer-events: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

input[type="range"]::-webkit-slider-thumb{
    height: 17px;
    width: 17px;
    background: var(--secondary-color);
    pointer-events: auto;
    -webkit-appearance: none;
    -webkit-box-shadow: 0 0 6px rgba(0,0,0,0.05);
    box-shadow: 0 0 6px rgba(0,0,0,0.05);
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
}

input[type="range"]::-moz-range-thumb{
    height: 17px;
    width: 17px;
    border: none;
    background: var(--secondary-color);
    pointer-events: auto;
    -moz-appearance: none;
    -webkit-box-shadow: 0 0 6px rgba(0,0,0,0.05);
    box-shadow: 0 0 6px rgba(0,0,0,0.05);
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
}

.price-wrap{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 1rem;
    color: #242424;
    font-size: 14px;
    line-height: 1.2em;
    font-weight: 400;
    margin-bottom: 0px;
    margin-top: 3rem;
}

.filter .price-input{
    width: 15rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border: 0.1rem solid rgba(0, 0, 0, 0.2);
    padding: 0.5rem;
}

.filter .price-input .field{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 0.2rem;
    width: 100%;
    height: 3rem;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.filter .field input{
    width: 100%;
    height: 100%;
    outline: none;
    font-size: 1.5rem;
    text-align: center;
    -moz-appearance: textfield;
    -webkit-appearance: textfield;
            appearance: textfield;
    color: var(--secondary-color);
    background-color: transparent;
}

.filter input[type="number"]::-webkit-outer-spin-button,
.filter input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

.filter .price-input .separator{
    width: 10rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 1.8rem;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

/*----- 02- Shop Header -----*/
.shop .intro{
    margin-bottom: 1.5rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 1rem;
    background-color: var(--white);
    -webkit-box-shadow: var(--box-shadow);
    box-shadow: var(--box-shadow);
    padding: 1rem 1.5rem;
    -webkit-border-radius: var(--border-radius-1);
    -moz-border-radius: var(--border-radius-1);
    -ms-border-radius: var(--border-radius-1);
    -o-border-radius: var(--border-radius-1);
    border-radius: var(--border-radius-1);
}

.shop .intro .showing{
    font-size: 1.6rem;
    color: var(--grey);
}

.shop .intro .styles{
    list-style-type: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 1rem;
}

.shop .intro .styles a{
    font-size: 2rem;
    color: var(--secondary-color);
}

.shop .intro .styles a:hover{
    color: var(--main-color);
}

.shop .intro .sorting-type label{
    font-size: 1.6rem;
    color: var(--secondary-color);
    margin-right: 0.5rem;
}

.shop .intro .sorting-type select{
    font-size: 1.4rem;
    color: var(--grey);
    background-color: transparent;
    border: var(--border);
    padding: 1rem;
}

/*----- 03- Quantity Box -----*/
.quantity.buttons_added {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    border: 1px solid #ccc;
    height: 4rem;
    width: 11rem;
    margin: 0 auto;
}

.quantity.buttons_added .minus,
.quantity.buttons_added .plus {
    width: 3rem;
    color: var(--secondary-color);
    cursor:pointer;
    background-color: transparent;
}

.quantity.buttons_added .minus:hover,
.quantity.buttons_added .plus:hover {
    background: var(--main-color); 
    color: var(--white);
}

.quantity .input-text.qty {
    padding: 0 1rem;
    text-align: center;
    background-color: transparent;  
    border-right: 1px solid #ccc; 
    border-left: 1px solid #ccc; 
} 
  
.quantity input::-webkit-outer-spin-button,
.quantity input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0; 
}
    
.quantity.buttons_added .minus:focus,
.quantity.buttons_added .plus:focus {
    outline: none; 
}

/*----- 04- product-item -----*/
.product-item{
    background-color: var(--white);
    overflow: hidden;
    -webkit-box-shadow: var(--box-shadow);
    box-shadow: var(--box-shadow);
    border-bottom: var(--custom-border);
    border-top: var(--custom-border);
    -webkit-border-radius: var(--border-radius-3);
    -moz-border-radius: var(--border-radius-3);
    -ms-border-radius: var(--border-radius-3);
    -o-border-radius: var(--border-radius-3);
    border-radius: var(--border-radius-3);
    padding: 1.5rem;
} 

.product-item .image {
    width: 100%;
    height: 25rem;
    position: relative;
    overflow: hidden;
    -webkit-border-radius: var(--border-radius-3);
    -moz-border-radius: var(--border-radius-3);
    -ms-border-radius: var(--border-radius-3);
    -o-border-radius: var(--border-radius-3);
    border-radius: var(--border-radius-3);
}

.product-item .options{
    position: absolute;
    top: 0rem;
    left: 0rem;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 1rem;
    opacity: 0;
}

.product-item:hover .options{
    opacity: 1;
}

.product-item .options a{
    height: 4.5rem;
    width: 4.5rem;
    font-size: 1.6rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    color: var(--white);
    background: var(--main-color);
    -webkit-clip-path: var(--custom-clip-path);
            clip-path: var(--custom-clip-path);
    scale: 0;
}

.product-item:hover .options a{
    scale: 1;
}

.product-item .options a:hover {
    color: var(--main-color);
    background: var(--white);
}

.product-item .content{
    padding-top: 2rem;
}

.product-item .rating i{
    font-size: 1.4rem;
    color: var(--main-color);
    padding-bottom: 0.5rem;
}

.product-item h3{
    font-size: 3rem;
    font-weight: 600;
    color: var(--secondary-color);
    padding-top: 1rem;
    font-family: "Great Vibes", cursive;
}

.product-item h3:hover{
    color: var(--main-color);
}

.product-item p{
    padding-bottom: 1rem;
}

.product-item .price{
    font-size: 2rem;
    font-weight: bold;
    color: var(--main-color);
}

.product-item .price span{ 
    font-size: 1.5rem;
    font-weight: 400;
    text-decoration: line-through;
    color: var(--secondary-color);
    padding-left: 0.2rem;
}

/*----- 05- Shop-Title -----*/
.shoplist-title{
    background-color: var(--main-color);
    color: var(--white);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 1.5rem;
    margin-bottom: 1rem;
}

.shoplist-title h3{
    -webkit-box-flex: 1;
    -ms-flex: 1 1 10rem;
        flex: 1 1 10rem;
    font-size: 2rem;
    text-align: center;
}

.shoplist-title h3.product-heading{
    -webkit-box-flex: 1;
    -ms-flex: 1 1 20rem;
        flex: 1 1 20rem;
    text-align: left;
}

/*----- 06- Cart-Summary -----*/
.summary-list{
    padding-top: 1rem;
} 

.summary-item{
    display: -webkit-box;
    display: -ms-flexbox; 
    display: flex; 
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center; 
    -ms-flex-align: center;
    align-items: center;
    padding-bottom: 1.5rem;
    font-size: 2rem;
    color: var(--secondary-color); 
} 

.summary-item .name{
    font-weight: 600;
}

.summary-item .value{
    font-weight: 500;
    color: var(--main-color);
}

/*----- 07- Radio Button -----*/
.payment input:checked + label, 
.payment label:hover{ 
    color: var(--main-color);
}
  
.payment input[type="radio"] {
    position: absolute;
    opacity: 0;
}
  
.payment input[type="radio"] + 
.radio-label:before {
    content: '';
    background: #f4f4f4;
    border: 0.1rem solid var(--grey);
    display: inline-block;
    width: 1.6rem;
    height: 1.6rem;
    position: relative;
    top: 0;
    vertical-align: top;
    cursor: pointer;
    text-align: center;
    -webkit-transition: all 250ms ease;
    transition: all 250ms ease;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
    border-radius: 100%;
}
  
.payment input[type="radio"]:checked + 
.radio-label:before {
    background-color: var(--main-color);
    -webkit-box-shadow: inset 0 0 0 4px #f4f4f4;
            box-shadow: inset 0 0 0 4px #f4f4f4;
    outline: none;
    border-color: var(--main-color);
}

/*----- 08- Account-Form -----*/
.account-form{
    max-width: 45rem;
    padding: 5rem;
    background: var(--secondary-color);
    border-bottom: var(--custom-border);
    -webkit-box-shadow: var(--box-shadow);
    box-shadow: var(--box-shadow);
    margin: 0rem auto;
    text-align: center;
    position: relative;
    -webkit-border-radius: var(--border-radius-2);
    -moz-border-radius: var(--border-radius-2);
    -ms-border-radius: var(--border-radius-2);
    -o-border-radius: var(--border-radius-2);
    border-radius: var(--border-radius-2);
}

.account-form input:-webkit-autofill,
.account-form input:-webkit-autofill:hover,
.account-form input:-webkit-autofill:focus,
.account-form input:-webkit-autofill:active {
    -webkit-text-fill-color: var(--white);
    -webkit-transition: background-color 5000s ease-in-out 0s;
            transition: background-color 5000s ease-in-out 0s;
}
  
.account-form h3{ 
    font-size: 3.5rem;
    line-height: 1.3;
    font-weight: 500;
    padding-bottom: 1.5rem;
    color: var(--white);
    text-transform: uppercase;
}

.account-form .box{
    width: 100%;
    font-size: 1.6rem;
    color: var(--white);
    background-color: transparent;
    border: 0.15rem solid var(--white);
    padding: 1.2rem;
    text-transform: none;
    margin: 0.7rem 0;
    -webkit-border-radius: var(--border-radius-1);
    -moz-border-radius: var(--border-radius-1);
    -ms-border-radius: var(--border-radius-1);
    -o-border-radius: var(--border-radius-1);
    border-radius: var(--border-radius-1);
}

.account-form .box::-webkit-input-placeholder{
    text-transform: capitalize;
    color: var(--white);
}
.account-form .box::-moz-placeholder{
    text-transform: capitalize;
    color: var(--white);
}
.account-form .box:-ms-input-placeholder{
    text-transform: capitalize;
    color: var(--white);
}
.account-form .box::placeholder{
    text-transform: capitalize;
    color: var(--white);
}

.account-form .box:focus{
    border-color: var(--main-color);
}

.account-form p{
    padding-top: 2rem;
    color: var(--white);
    text-align: center;
    padding-bottom: 1rem;
}

.account-form .btn{
    width: 100%;
    overflow: hidden;
    margin-top: 1.5rem;
}

.account-form .link{
    font-size: 1.5rem;
    color: var(--main-color);
}

.account-form .link:hover{
    text-decoration: underline;
}

.account-form .checkbox-label {
    color: var(--grey);
    position: relative;
    padding-left: 2.5rem;
    cursor: pointer;
    font-size: 1.8rem;
    line-height: 1.4;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
  
.account-form .checkbox-label input{
    position: absolute;
    opacity: 0;
    z-index: -1;
}
  
.account-form .checkbox-indicator{
    position: absolute;
    top: 0.2rem;
    left: 0;
    height: 1.6rem;
    width: 1.6rem;
    background: transparent;
    outline: 0.15rem solid var(--white);
    -webkit-border-radius: 0.2rem;
    -moz-border-radius: 0.2rem;
    -ms-border-radius: 0.2rem;
    -o-border-radius: 0.2rem;
    border-radius: 0.2rem;
}
  
.account-form .checkbox-label input:checked ~ 
.checkbox-indicator {
    background: var(--main-color);
    outline-color: var(--main-color);
}
  
.account-form .checkbox-indicator:after {
    content: '';
    position: absolute;
    left: 0.5rem;
    top: 0.2rem;
    width: 0.3rem;
    height: 0.8rem;
    border: solid var(--light-grey);
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
    display: none;
}

.account-form .checkbox-label input:checked ~ 
.checkbox-indicator:after {
    display: initial;
}

/*--------------- PAGES ---------------*/
.shop{
    display: -webkit-box; 
    display: -ms-flexbox;
    display: flex;
    gap: 1.5rem;
}

.shop .shop-container{
    -webkit-box-flex: 1;
    -ms-flex: 1 1 75rem;
        flex: 1 1 75rem;
}

/*----- 1- Shop Grid -----*/
.shop .product-container.grid{
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (minmax(25rem, 1fr))[auto-fit];
        grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
    gap: 1.5rem;
}

/*----- 2- Shop Standard -----*/
.shop .product-container.list{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 1rem;
}

.shop .product-container.list .product-item{
    width: 100%;
    text-align: left;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 1rem;
}

.shop .product-container.list .product-item .image{
    height: 100%;
}

.shop .product-container.list .product-item img{
    height: 100%;
}

.shop .product-container.list .product-item .content{
    text-align: left;
    padding: 1.5rem;
}

/*----- 3- Product Single -----*/
.product-single .product-des{
    background-color: var(--white);
    -webkit-box-shadow: var(--box-shadow);
    box-shadow: var(--box-shadow);
    padding: 2rem;
    margin-bottom: 3.5rem;
    -webkit-border-radius: var(--border-radius-3);
    -moz-border-radius: var(--border-radius-3);
    -ms-border-radius: var(--border-radius-3);
    -o-border-radius: var(--border-radius-3);
    border-radius: var(--border-radius-3);
}

.product-single .box-container{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center; 
    -ms-flex-pack: center;
    justify-content: center; 
    -webkit-box-align: center; 
        -ms-flex-align: center; 
            align-items: center;
    -ms-flex-wrap: wrap; 
        flex-wrap: wrap;
    gap: 2rem;
}

.product-single .product-des .box-container .image{
    -webkit-box-flex: 1;
    -ms-flex: 1 1 35rem;
        flex: 1 1 35rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.product-single .product-des .box-container .image-container{
    max-width: 50rem;
}

.product-single .product-des .box-container .image-container .main{
    width: 100%;
    height: 40rem;
    overflow: hidden;
    -webkit-box-shadow: var(--box-shadow);
    box-shadow: var(--box-shadow);
    -webkit-border-radius: var(--border-radius-3);
    -moz-border-radius: var(--border-radius-3);
    -ms-border-radius: var(--border-radius-3);
    -o-border-radius: var(--border-radius-3);
    border-radius: var(--border-radius-3);
}

.product-single .product-des .box-container .image .change-btns{
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (minmax(7rem, 1fr))[auto-fit];
        grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.product-single .product-des .box-container .image .change-btns img{
    -webkit-box-shadow: var(--box-shadow);
            box-shadow: var(--box-shadow);
    cursor: pointer;    
}

.product-single .product-des .image .change-btns img:hover,
.product-single .product-des .image .change-btns img.active{
    border: 0.4rem solid var(--main-color);
}

.product-single .product-des .box-container .content{
    -webkit-box-flex: 1;
    -ms-flex: 1 1 45rem;
        flex: 1 1 45rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.product-single .product-des .box-container .content h2{
    font-size: 3.5rem;
    font-weight: 600;
    color: var(--secondary-color);
    padding-bottom: 1rem;
}

.product-single .product-des .box-container .content .intro{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.product-single .product-des .box-container .content .intro .rating{
    color: var(--main-color);
    font-size: 1.6rem;
}

.product-single .product-des .box-container .content .intro span{
    color: var(--secondary-color);
    font-size: 2rem;
    font-weight: 500;
    padding-left: 1rem;
}

.product-single .product-des .box-container .content h3{
    font-size: 3.5rem;
    font-weight: 600;
    color: var(--secondary-color);
    padding-bottom: 1rem;
}

.product-single .product-des .box-container .content .price{
    font-size: 2rem;
    font-weight: bold;
    color: var(--main-color);
}

.product-single .product-des .box-container .content .price span{
    color: var(--grey);
    font-weight: lighter;
    text-decoration: line-through;
}

.product-single .product-des .box-container .content p{
    padding: 2rem 0;
    margin-top: 1rem;
    font-weight: 400;
    border-top: 0.1rem solid rgba(0, 0, 0, 0.2);
    border-bottom: 0.1rem solid rgba(0, 0, 0, 0.2);
}

.product-single .box{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 2rem;
}

.product-single .qty{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 1rem 0;
    gap: 1rem;
    width: 15rem;
}

.product-single .product-des .box-container .content .btn{
    margin: 2rem 0;
}

.product-single .categories,
.product-single .tags{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0.5rem 0;
}

.product-single .qty h4,
.product-single .categories h4,
.product-single .tags h4{
    font-size: 1.8rem;
    color: var(--secondary-color);
    font-weight: 600;
}

.product-single .categories a,
.product-single .tags a{
    font-size: 1.6rem;
    font-weight: 400;
    color: var(--main-color);
    padding: 0 0.5rem;
}

.product-single .categories a:hover,
.product-single .tags a:hover{
    color: var(--secondary-color);
}

/*-- Product Addtional Information --*/
.product-single .tab-info{
    margin-top: 4rem;
}

.product-info .additional-info .item{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 2rem;
    padding-bottom: 1rem;
}

.product-info .additional-info h3{
    width: 20rem;
    font-size: 1.8rem;
    color: var(--secondary-color);
}

.product-info .additional-info span{
    font-size: 1.6rem;
    color: var(--grey);
}

.product-info h2{
    font-size: 3rem; 
    color: var(--secondary-color); 
    padding-bottom: 1rem;
}

.product-info .reviews{
    margin-bottom: 2rem;
} 

.product-info .leave-reply{
    width: 60rem;
} 

/*-- Related Products --*/
.related-items .box-container{
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (minmax(25rem, 1fr))[auto-fit];
        grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

/*----- 4- Wishlist  ------*/
.wishlist-container{
    overflow-x: auto;
    overflow-y: hidden;
    background-color: var(--white);
    -webkit-box-shadow: var(--box-shadow);
    box-shadow: var(--box-shadow);
    -webkit-border-radius: var(--border-radius-2);
    -moz-border-radius: var(--border-radius-2);
    -ms-border-radius: var(--border-radius-2);
    -o-border-radius: var(--border-radius-2);
    border-radius: var(--border-radius-2);
}

.wishlist-container::-webkit-scrollbar{
    height: 0.8rem;
}

.wishlist .container{
    min-width: 90rem;
}

.wishlist .box-container{
    padding: 0rem 1rem;
}

.wishlist-item{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 1rem 0rem;
    gap: 3rem;
    border-bottom: 0.1rem solid rgba(0, 0, 0, 0.1);
}

.wishlist-item:last-child{
    border: none;
}

.wishlist-item .box{
    -webkit-box-flex: 1;
    -ms-flex: 1 1 20rem;
        flex: 1 1 20rem;
    text-align: center;
    font-size: 2rem;
    font-weight: 500;
}

.wishlist-item .product{
    -webkit-box-flex: 1;
    -ms-flex: 1 1 30rem; 
        flex: 1 1 30rem;  
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: left;
    gap: 1.5rem;
}

.wishlist-item img{
    height: 8rem;
    width: 8rem;
    background-color: #f7f7f7;
    -webkit-border-radius: var(--border-radius-3);
    -moz-border-radius: var(--border-radius-3);
    -ms-border-radius: var(--border-radius-3);
    -o-border-radius: var(--border-radius-3);
    border-radius: var(--border-radius-3);
    -webkit-box-shadow: var(--box-shadow);
            box-shadow: var(--box-shadow);
}

.wishlist-item .name{
    color: var(--secondary-color);
    font-weight: 600;
}

.wishlist-item .price{
    color: var(--grey);
    font-weight: 500;
}

.wishlist-item .status.in{
    color: green;
}

.wishlist-item .status.out{
    color: red;
}

.wishlist-item .action{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 1rem;
}

.wishlist-item a{
    font-size: 2rem;
    cursor: pointer;
}

.wishlist-item a:hover{
    color: var(--main-color);
}

.wishlist-item .delete{
    color: red;
}

.wishlist-item .cart{
    color: var(--secondary-color);
}

/*----- 5- Cart  ------*/
.shopping-cart{
    margin-bottom: 2rem;
    overflow-x: auto;
    overflow-y: hidden;
    background-color: var(--white);
    -webkit-box-shadow: var(--box-shadow);
    -webkit-box-shadow: var(--box-shadow);
            box-shadow: var(--box-shadow);
    -webkit-border-radius: var(--border-radius-2);
    -moz-border-radius: var(--border-radius-2);
    -ms-border-radius: var(--border-radius-2);
    -o-border-radius: var(--border-radius-2);
    border-radius: var(--border-radius-2);
}

.cart .container{
    min-width: 90rem;
}

.shopping-cart::-webkit-scrollbar{
    height: 0.8rem;
}

.cart .box-container{
    padding: 0rem 1rem;
}

.cart-item{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 1rem 0rem;
    gap: 3rem;
    border-bottom: 0.1rem solid rgba(0, 0, 0, 0.1);
}

.cart-item:last-child{
    border: none;
}

.cart-item .box{
    -webkit-box-flex: 1;
    -ms-flex: 1 1 15rem;
        flex: 1 1 15rem;
    text-align: center;
    font-size: 2rem;
    font-weight: 400;
}

.cart-item .product{
    -webkit-box-flex: 1;
    -ms-flex: 1 1 25rem; 
        flex: 1 1 25rem;  
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: left;
    gap: 1.5rem;
}

.cart-item img{
    height: 8rem;
    width: 8rem;
    background-color:#f7f7f7;
    -webkit-border-radius: var(--border-radius-3);
    -moz-border-radius: var(--border-radius-3);
    -ms-border-radius: var(--border-radius-3);
    -o-border-radius: var(--border-radius-3);
    border-radius: var(--border-radius-3);
    -webkit-box-shadow: var(--box-shadow);
            box-shadow: var(--box-shadow);
}

.cart-item .name{
    color: var(--secondary-color);
    font-weight: 600;
}

.cart-item .price,
.cart-item .total{
    color: var(--grey);
}

.cart-item .icon{
    font-size: 2rem;
    cursor: pointer;
    color: red;
}

.cart-item .icon:hover{
    color: var(--main-color);
}

/*-- 2- Cart Total --*/
.cart .cart-summary{
    width: 40rem;
    padding: 1rem;
    margin-left: auto;
    background-color: var(--white);
    -webkit-box-shadow: var(--box-shadow);
    box-shadow: var(--box-shadow);
    -webkit-border-radius: var(--border-radius-2);
    -moz-border-radius: var(--border-radius-2);
    -ms-border-radius: var(--border-radius-2);
    -o-border-radius: var(--border-radius-2);
    border-radius: var(--border-radius-2);
}

.cart .cart-summary .btn{
    width: 100%;
    text-align: center;
    margin-top: 1rem;
}

/*----- 6- Checkout -----*/
/*
1- Payment Method
2- Cart Total
*/

.checkout{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap; 
        flex-wrap: wrap;
    gap: 1.5rem;
}

.checkout .heading{
    -webkit-box-align: start;
    -ms-flex-align: start;
    -ms-grid-row-align: flex-start;
    align-items: flex-start;
}

.checkout h2{
    font-size: 3.5rem;
}

.checkout h2:before{
    left: 0;
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
}

.checkout .box-1{
    -webkit-box-flex: 1;
    -ms-flex: 1 1 55rem;
        flex: 1 1 55rem;  
}

.checkout .box-2{
    -webkit-box-flex: 1;
    -ms-flex: 1 1 35rem;
        flex: 1 1 35rem;
}

.checkout-item{
    margin-bottom: 1.5rem;
    padding: 2rem;
    background-color: var(--white);
    -webkit-box-shadow: var(--box-shadow);
    box-shadow: var(--box-shadow);
    -webkit-border-radius: var(--border-radius-2);
    -moz-border-radius: var(--border-radius-2);
    -ms-border-radius: var(--border-radius-2);
    -o-border-radius: var(--border-radius-2);
    border-radius: var(--border-radius-2);
}

.checkout .box-1 .checkout-item:last-child{
    margin-bottom: 0;   
}

/*-- 1- Payment Method --*/
.payment-methods .payment{
    margin-bottom: 1.5rem;
}

.payment-methods .payment label{
    cursor: pointer;
    font-size: 2rem;
    font-weight: 500;
    color: var(--secondary-color);
    text-transform: uppercase;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 1rem;
}

.payment-body{ 
    display: none;
}

.payment-body.active{
    display: block;
}

.payment-methods .payment .payment-body p{
    font-size: 1.4rem;
    padding-top: 1rem;
}

.checkout .btn-container{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}

.checkout .btn{
    width: 100%;
    text-align: center;
}

/*----- 7- Login -----*/
.login form .info{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; 
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin: 2rem 0;
}
  
.login form label{
    font-size: 1.5rem;
    color: var(--white);
    cursor: pointer;
}
  
/*----- 8- Register -----*/
.register form .checkbox-label{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    margin: 2rem 0;
}
  
.register form label{
    font-size: 1.5rem;
    color: var(--white);
    cursor: pointer;
}
  
.register form label span{
    color: var(--main-color);
}

/*------------------------------ (07)-Shop (End) ------------------------------*/



/*------------------------------ (08)-Contact (Start) ------------------------------*/
.contact{
    padding: 2rem 0;
}

.contact .heading{
    
    align-items: center;
}

.contact .heading h2{
    text-align: left;
}

.contact .box-container{
    /* background: -webkit-linear-gradient(180deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.4)), url("../images/new-images/background1.webp");
    
    background-repeat: no-repeat;  
    background-size: cover;
    background-position: center; */
    padding: 3rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    padding: 4rem 5%;
    gap: 4rem;
    margin-bottom: 2rem;
}

/*-- Contact Information --*/
.contact-info{
    -webkit-box-flex: 1;
    -ms-flex: 1 1 40rem;
        flex: 1 1 40rem;
}

.contact-info .contact-info-container{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 2rem;
    padding-top: 2rem;
}

.contact .contact-info .info-item{
    -webkit-box-flex: 1;
    -ms-flex: 1 1 25rem;
        flex: 1 1 25rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

.contact .contact-info .info-item i{
    height: 8rem;
    width: 8rem;
    font-size: 3rem;
    line-height: 1.3;
    margin-bottom: 1.5rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: var(--white);
    background-color: var(--main-color);
    -webkit-clip-path: var(--custom-clip-path);
            clip-path: var(--custom-clip-path);
}

.contact .contact-info .info-item h3{
    font-size: 2.5rem;
    font-weight: 500;
    color: var(--secondary-color);
    padding-bottom: 0.7rem;
}

.contact .contact-info .info-item p{
    font-size: 1.6rem;
    color: var(--secondary-color);
}

.contact .contact-info .info-item p.gmail{
    text-transform: none;
}

.contact-info .heading h2{
    color: var(--secondary-color);
}

/*-- Contact Form --*/
.contact form{
    background-color: var(--white);
    padding: 2rem;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 40rem;
    flex: 1 1 40rem;
    -webkit-border-radius: var(--border-radius-2);
    -moz-border-radius: var(--border-radius-2);
    -ms-border-radius: var(--border-radius-2);
    -o-border-radius: var(--border-radius-2);
    border-radius: var(--border-radius-2);
}

.contact form input:-webkit-autofill,
.contact form input:-webkit-autofill:hover,
.contact form input:-webkit-autofill:focus,
.contact form input:-webkit-autofill:active {
    -webkit-text-fill-color: var(--secondary-color);
    -webkit-transition: background-color 5000s ease-in-out 0s;
            transition: background-color 5000s ease-in-out 0s;
}

.contact form .input-field{
    border-color: rgba(0, 0, 0, 0.2);
}

.contact form .box{
    color: var(--secondary-color);
}

.contact form .box::placeholder{
    color: var(--grey);
}

.contact form .alert{
    font-size: 2rem;
    color: var(--main-color);
    padding-left: 1rem;
}

/*-- Google Map --*/
.contact iframe{
    width: 100%;
    height: 40rem;
}


/*------------------------------ (06)-Contact (End) ------------------------------*/



/*------------------------------ New Venue Types Banner Section (Start) ------------------------------*/

/*----- Venue Types Banner -----*/
.venue-types-banner{
    padding: 5rem 5%;
    /* background: #FFF7F8; */
}

.venue-types-banner .heading{
    text-align: center;
    margin-bottom: 3rem;
}

.venue-types-container{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 3rem;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    height: auto;
    min-height: auto;
}

.venue-cards-wrapper{
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 2rem;
    height: auto;
    min-height: auto;
}

.venue-row{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 2rem;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.venue-card{
    -webkit-box-flex: 0;
    -ms-flex: 0 0 calc(33.33% - 1.35rem);
    flex: 0 0 calc(33.33% - 1.35rem);
    position: relative;
    overflow: hidden;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    aspect-ratio: 1/1;
    cursor: pointer;
    max-height: 250px;
    max-width: 250px;
}
.venue-card:hover{
    transform: scale(1.03);
}

.venue-card .venue-slider,
.venue-card .venue-card-image{
    width: 100%;
    height: 100%;
}

.venue-card .swiper-slide{
    width: 100%;
    height: 100%;
}

.venue-card img{
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    display: block;
}
.venue-overlay{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 3rem;
    background: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 1));
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 1));
}
.venue-card h3{
    position: absolute;
    bottom: 2rem;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    /* background: -webkit-linear-gradient(144deg, var(--main-color), var(--accent-color)); */
    /* background: linear-gradient(144deg, var(--secondary-color), var(--accent-color)); */
    /* background-color: var(--main-color); */
    color: var(--white);
    padding: 0.5rem 2rem;
    font-size: 1.6rem;
    font-weight: 600;
    -webkit-border-radius: 5rem;
    -moz-border-radius: 5rem;
    -ms-border-radius: 5rem;
    -o-border-radius: 5rem;
    border-radius: 5rem;
    white-space: nowrap;
    z-index: 2;
}



.venue-featured-image{
    -webkit-box-flex: 0;
    -ms-flex: 0 0 45%;
    flex: 0 0 45%;
    position: relative;
    overflow: hidden;
    -webkit-border-radius: var(--border-radius-2);
    -moz-border-radius: var(--border-radius-2);
    -ms-border-radius: var(--border-radius-2);
    -o-border-radius: var(--border-radius-2);
    border-radius: var(--border-radius-2);
    height: auto;
    /* min-height: 500px; */
}

.venue-featured-image .venue-types-featured-slider{
    width: 100%;
    height: 100%;
    min-height: 500px;
}

.venue-featured-image .swiper-slide{
    width: 100%;
    height: 65%;
}

.venue-featured-image .venue-featured-next,
.venue-featured-image .venue-featured-prev{
    height: 5rem;
    width: 5rem;
}

.venue-featured-image .venue-featured-next{
    right: 1.5rem;
}

.venue-featured-image .venue-featured-prev{
    left: 1.5rem;
}

.venue-featured-image img{
    width: 100%;
    height: auto;
    -o-object-fit: cover;
    object-fit: cover;
    display: block;
}

.venue-featured-overlay{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 3rem;
    background: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.8));
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.8));
}

.venue-featured-overlay h3{
    color: var(--white);
    font-size: 3.5rem;
    font-weight: 600;
    text-align: center;
}

/*------------------------------ New Venue Types Banner Section (End) ------------------------------*/



/*------------------------------ New Venue Locations Section (Start) ------------------------------*/

/*----- Venue Locations -----*/
.venue-locations{
    padding: 5rem 5%;
    /* background: #FFF7F8; */
}

.venue-locations .heading{
    text-align: center;
    margin-bottom: 2rem;
}

.venue-description{
    text-align: center;
    font-size: 1.8rem;
    color: var(--grey);
    max-width: 95rem;
    margin: 0 auto 3rem;
    line-height: 1.8;
}

.venue-featured-box{
    max-width: 150rem;
    margin: 0 auto 4rem;
    overflow: hidden;
    -webkit-border-radius: var(--border-radius-2);
    -moz-border-radius: var(--border-radius-2);
    -ms-border-radius: var(--border-radius-2);
    -o-border-radius: var(--border-radius-2);
    border-radius: var(--border-radius-2);
    border: 0.5rem solid var(--main-color);
    position: relative;
}

.venue-featured-box .venue-next,
.venue-featured-box .venue-prev{
    height: 5rem;
    width: 5rem;
}

.venue-featured-box .venue-next{
    right: 1.5rem;
}

.venue-featured-box .venue-prev{
    left: 1.5rem;
}

.venue-featured-box .venue-featured-slider{
    width: 100%;
    height: 33rem;
}

.venue-featured-box .swiper-slide{
    width: 100%;
    height: 100%;
}

.venue-featured-box img{
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    display: block;
}

.venue-location-cards{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 3rem;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.location-card{
    text-align: center;
    cursor: pointer;
    -webkit-transition: -webkit-transform 0.3s ease;
    transition: -webkit-transform 0.3s ease;
    transition: transform 0.3s ease;
    transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}
/* 
.location-card:hover{
    -webkit-transform: translateY(-1rem);
    -ms-transform: translateY(-1rem);
    -moz-transform: translateY(-1rem);
    -o-transform: translateY(-1rem);
    transform: translateY(-1rem);
} */

.location-image{
    width: 18rem;
    height: 18rem;
    margin: 0 auto 1.5rem;
    overflow: hidden;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    border: 0.4rem solid var(--main-color);
}

.location-card:hover .location-image{
    /* border-color: var(--secondary-color); */
    transform: scale(1.03);
}

.location-image img{
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    display: block;
    /* -webkit-transition: -webkit-transform 0.3s ease;
    transition: -webkit-transform 0.3s ease;
    transition: transform 0.3s ease;
    transition: transform 0.3s ease, -webkit-transform 0.3s ease; */
}

/* .location-card:hover .location-image img{
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
} */

.location-card h3{
    color: var(--secondary-color) !important;
}

/* .location-card:hover h3{
    background: var(--secondary-color);
} */

/*------------------------------ New Venue Locations Section (End) ------------------------------*/



/*------------------------------ Who We Are Section (Start) ------------------------------*/
.who-we-are{
    padding: 5rem 0;
    background-image: url('../images/new-images/about-background1.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* background-attachment: fixed; */
    position: relative;
}

.who-we-are::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background: rgba(255, 248, 240, 0.95); */
    z-index: 1;
}

.who-we-are .container{
    position: relative;
    z-index: 2;
    max-width: 150rem;
    margin: 0 auto;
    padding: 0 2rem;
}

.who-we-are-wrapper{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 5rem;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}

.who-image{
    -webkit-box-flex: 1;
        -ms-flex: 1 1 45rem;
            flex: 1 1 45rem;
}

.who-image img{
    width: 100%;
    height: auto;
    display: block;
    -webkit-border-radius: 2rem;
    -moz-border-radius: 2rem;
    -ms-border-radius: 2rem;
    -o-border-radius: 2rem;
    border-radius: 2rem;
    -webkit-box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.15);
            box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.15);
}

.who-content{
    -webkit-box-flex: 1;
        -ms-flex: 1 1 45rem;
            flex: 1 1 45rem;
}

/* .who-content .heading h2{
    font-size: 3.5rem;
    color: var(--secondary-color);
    margin-bottom: 2rem;
    position: relative;
    display: inline-block;
    text-align: left;
} */

/* .who-content .heading .decorative-element{
    display: inline-block;
    margin-left: 1rem;
}

.who-content .heading .decorative-element::before{
    content: '<<<';
    color: var(--main-color);
    font-size: 2rem;
    letter-spacing: 0.5rem;
}

.who-content .heading .decorative-element::after{
    content: '...';
    color: var(--main-color);
    font-size: 2rem;
} */

.who-content p{
    font-size: 1.6rem;
    color: var(--grey);
    line-height: 1.8;
    margin-bottom: 1.5rem;
    text-align: justify;
}

/* .who-content .btn{
    margin-top: 2rem;
    background: var(--secondary-color);
    color: var(--white);
    padding: 1.2rem 3rem;
    font-size: 1.6rem;
    -webkit-border-radius: 0.5rem;
    -moz-border-radius: 0.5rem;
    -ms-border-radius: 0.5rem;
    -o-border-radius: 0.5rem;
    border-radius: 0.5rem;
}

.who-content .btn:hover{
    background: var(--main-color);
} */

/*------------------------------ Who We Are Section (End) ------------------------------*/



/*------------------------------ What Do We Do Section (Start) ------------------------------*/
.what-we-do{
    padding: 5rem 0;
    background-image: url('../images/new-images/about-background2.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* background-attachment: fixed; */
    position: relative;
    margin-top: 3rem;
}

.what-we-do::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background: rgba(45, 20, 20, 0.92); */
    z-index: 1;
}

.what-we-do .container{
    position: relative;
    z-index: 2;
    max-width: 150rem;
    margin: 0 auto;
    padding: 0 2rem;
}

.what-we-do-wrapper{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 5rem;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}

.what-content{
    -webkit-box-flex: 1;
        -ms-flex: 1 1 45rem;
            flex: 1 1 45rem;
}

.what-content .heading h2{
    color: var(--white);
}

/* .what-content .heading .decorative-element{
    display: inline-block;
    margin-left: 1rem;
}

.what-content .heading .decorative-element::before{
    content: '<<<';
    color: var(--main-color);
    font-size: 2rem;
    letter-spacing: 0.5rem;
}

.what-content .heading .decorative-element::after{
    content: '...';
    color: var(--main-color);
    font-size: 2rem;
} */

.what-content .service-item{
    margin-bottom: 3rem;
    margin-top: 3rem;
}

.what-content .service-item h3{
    font-size: 2.2rem;
    color: var(--white);
    margin-bottom: 1rem;
    font-weight: 600;
   font-family: "Dancing Script", cursive;
}

.what-content .service-item p{
    font-size: 1.6rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.8;
    text-align: justify;
}

.what-image{
    -webkit-box-flex: 1;
        -ms-flex: 1 1 45rem;
            flex: 1 1 45rem;
    position: relative;
}

.what-image::before{
    content: '';
    position: absolute;
    top: -2rem;
    right: -2rem;
    width: 100%;
    height: 100%;
    border: 0.3rem solid var(--main-color);
    -webkit-border-radius: 2rem;
    -moz-border-radius: 2rem;
    -ms-border-radius: 2rem;
    -o-border-radius: 2rem;
    border-radius: 2rem;
    z-index: -1;
}

.what-image img{
    width: 100%;
    height: auto;
    display: block;
    -webkit-border-radius: 2rem;
    -moz-border-radius: 2rem;
    -ms-border-radius: 2rem;
    -o-border-radius: 2rem;
    border-radius: 2rem;
    -webkit-box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.3);
            box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.3);
}

/*------------------------------ What Do We Do Section (End) ------------------------------*/



/*------------------------------ Royal Destination Section (Start) ------------------------------*/
.royal-destination{
    position: relative;
    padding: 0;
    overflow: hidden;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin-top: 0;
    min-height: 85vh;
}

.royal-destination .background-video{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    -o-object-fit: cover;
    object-fit: cover;
    z-index: -1;
}

.royal-destination .overlay{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.royal-destination-content{
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 80rem;
    padding: 0 2rem;
    margin-top: 5rem;
}

.royal-destination-content h4{
    font-size: 1.8rem;
    color: var(--white);
    margin-bottom: 1rem;
    font-weight: 400;
    letter-spacing: 0.1rem;
}

.royal-destination-content h2{
    font-size: 5rem;
    color: var(--white);
    margin-bottom: 3rem;
    font-weight: 700;
    line-height: 1.2;
    /* font-family: 'quicksand', sans-serif; */
}

.royal-destination-content .btn{
    background: var(--white);
    color: var(--secondary-color);
    padding: 1.5rem 4rem;
    font-size: 1.6rem;
    font-weight: 600;
    -webkit-border-radius: 0.5rem;
    -moz-border-radius: 0.5rem;
    -ms-border-radius: 0.5rem;
    -o-border-radius: 0.5rem;
    border-radius: 0.5rem;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.royal-destination-content .btn:hover{
    background: var(--main-color);
    color: var(--white);
    -webkit-transform: translateY(-0.3rem);
        -ms-transform: translateY(-0.3rem);
        -moz-transform: translateY(-0.3rem);
        -o-transform: translateY(-0.3rem);
            transform: translateY(-0.3rem);
}

/*------------------------------ Royal Destination Section (End) ------------------------------*/



/*------------------------------ Page-Specific Breadcrumb Images (Start) ------------------------------*/

/* About Page Breadcrumb */
.page-title.about-page{
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5)), url("../images/new-images/background5.webp");
    /* background: linear-gradient(180deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5)), url("../images/new-images/About1.webp"); */
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.page-title.booking-page{
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5)), url("../images/new-images/background1.webp");
    /* background: linear-gradient(180deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5)), url("../images/new-images/About1.webp"); */
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

/* Gallery Page Breadcrumb */
.page-title.gallery-page{
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5)), url("../images/new-images/gallery1.webp");
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5)), url("../images/new-images/gallery1.webp");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

/* Contact Page Breadcrumb */
.page-title.contact-page{
    /* background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5)), url("../images/new-images/venue1.webp"); */
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5)), url("../images/new-images/wedding6.webp");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

/* Blog Page Breadcrumb */
.page-title.blogs-page{
    /* background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5)), url("../images/new-images/gallery2.webp"); */
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5)), url("../images/new-images/jodhpur-destination.webp");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

/*------------------------------ Page-Specific Breadcrumb Images (End) ------------------------------*/



/*------------------------------ Testimonials About Section (Start) ------------------------------*/

.testimonials-about {
    padding: 8rem 0;
    background-color: #f8f5f0;
}

.testimonials-about .heading {
    text-align: center;
    margin-bottom: 5rem;
}

.testimonials-about .heading .sub {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
       -moz-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.testimonials-about .heading .sub span {
    font-size: 1.8rem;
    font-weight: 500;
    color: #FF9933;
    text-transform: uppercase;
    letter-spacing: 0.2rem;
}

.testimonials-about .heading h2 {
    font-size: 4.5rem;
    font-weight: 700;
    color: #7A2E0E;
    text-transform: capitalize;
}

.testimonials-slider {
    max-width: 150rem;
    margin: 0 auto;
    padding: 0 2rem;
}

.testimonial-card {
    position: relative;
    height: 45rem;
    -webkit-border-radius: 2rem;
       -moz-border-radius: 2rem;
            border-radius: 2rem;
    overflow: hidden;
}

.testimonial-image {
    position: relative;
    width: 100%;
    height: 100%;
    -webkit-border-radius: 2rem;
       -moz-border-radius: 2rem;
            border-radius: 2rem;
    overflow: hidden;
}

.testimonial-image img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center;
       object-position: center;
    -webkit-transition: -webkit-transform 0.5s ease;
    transition: -webkit-transform 0.5s ease;
    -o-transition: -o-transform 0.5s ease;
    -moz-transition: transform 0.5s ease, -moz-transform 0.5s ease;
    transition: transform 0.5s ease;
    transition: transform 0.5s ease, -webkit-transform 0.5s ease, -moz-transform 0.5s ease, -o-transform 0.5s ease;
}

.testimonial-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: -webkit-gradient(linear, left bottom, left top, from(rgba(122, 46, 14, 0.95)), to(rgba(122, 46, 14, 0.7)));
    background: -webkit-linear-gradient(bottom, rgba(122, 46, 14, 0.95), rgba(122, 46, 14, 0.7));
    background: -moz-linear-gradient(bottom, rgba(122, 46, 14, 0.95), rgba(122, 46, 14, 0.7));
    background: -o-linear-gradient(bottom, rgba(122, 46, 14, 0.95), rgba(122, 46, 14, 0.7));
    background: linear-gradient(to top, rgba(122, 46, 14, 0.95), rgba(122, 46, 14, 0.7));
    opacity: 0;
    -webkit-transition: opacity 0.5s ease;
    -o-transition: opacity 0.5s ease;
    -moz-transition: opacity 0.5s ease;
    transition: opacity 0.5s ease;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
       -moz-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding: 3rem;
}

.testimonial-card:hover .testimonial-overlay {
    opacity: 1;
}

.testimonial-card:hover .testimonial-image img {
    -webkit-transform: scale(1.1);
       -moz-transform: scale(1.1);
        -ms-transform: scale(1.1);
         -o-transform: scale(1.1);
            transform: scale(1.1);
}

.testimonial-content {
    text-align: center;
    color: #fff;
    -webkit-transform: translateY(2rem);
       -moz-transform: translateY(2rem);
        -ms-transform: translateY(2rem);
         -o-transform: translateY(2rem);
            transform: translateY(2rem);
    opacity: 0;
    -webkit-transition: all 0.5s ease 0.2s;
    -o-transition: all 0.5s ease 0.2s;
    -moz-transition: all 0.5s ease 0.2s;
    transition: all 0.5s ease 0.2s;
}

.testimonial-card:hover .testimonial-content {
    -webkit-transform: translateY(0);
       -moz-transform: translateY(0);
        -ms-transform: translateY(0);
         -o-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
}

.testimonial-content h3 {
    font-size: 2.8rem;
    font-weight: 700;
    color: #FFD18B;
    margin-bottom: 0.5rem;
    text-transform: capitalize;
}

.testimonial-content .location {
    font-size: 1.6rem;
    font-weight: 500;
    color: #fff;
    margin-bottom: 2rem;
    opacity: 0.9;
}

.testimonial-content .testimonial-text {
    font-size: 1.6rem;
    line-height: 1.8;
    color: #fff;
    font-style: italic;
}

/* Testimonials Navigation Arrows */
.testimonials-next,
.testimonials-prev {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
       -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
         -o-transform: translateY(-50%);
            transform: translateY(-50%);
    width: 5rem;
    height: 5rem;
    background-color: #FF9933;
    color: #fff;
    -webkit-border-radius: 50%;
       -moz-border-radius: 50%;
            border-radius: 50%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
       -moz-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    font-size: 2rem;
    cursor: pointer;
    z-index: 10;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.testimonials-next:hover,
.testimonials-prev:hover {
    background-color: #7A2E0E;
    -webkit-transform: translateY(-50%) scale(1.1);
       -moz-transform: translateY(-50%) scale(1.1);
        -ms-transform: translateY(-50%) scale(1.1);
         -o-transform: translateY(-50%) scale(1.1);
            transform: translateY(-50%) scale(1.1);
}

.testimonials-next {
    right: 2rem;
}

.testimonials-prev {
    left: 2rem;
}

.testimonials-next::after,
.testimonials-prev::after {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}

.testimonials-next::after {
    content: "\f054";
}

.testimonials-prev::after {
    content: "\f053";
}

/*------------------------------ Testimonials About Section (End) ------------------------------*/



/*------------------------------ FAQ Section (Start) ------------------------------*/

.faq-section {
    /* margin-top: 2rem; */
    padding: 8rem 0;
    /* background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 153, 51, 0.08)), to(rgba(122, 46, 14, 0.05))), url("../images/new-images/background5.webp"); */
    /* background: -webkit-linear-gradient(top, rgba(255, 153, 51, 0.08), rgba(122, 46, 14, 0.05)), url("../images/new-images/faq-background.webp"); */
    /* background: -moz-linear-gradient(top, rgba(255, 153, 51, 0.08), rgba(122, 46, 14, 0.05)), url("../images/new-images/background5.webp");
    background: -o-linear-gradient(top, rgba(255, 153, 51, 0.08), rgba(122, 46, 14, 0.05)), url("../images/new-images/background5.webp");
    background: linear-gradient(180deg, rgba(255, 153, 51, 0.08), rgba(122, 46, 14, 0.05)), url("../images/new-images/background5.webp"); */
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.faq-section .container {
    max-width: 150rem;
    margin: 0 auto;
    padding: 0 2rem;
}

.faq-wrapper {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 5rem;
}

.faq-content {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
       -moz-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
}

.faq-content .heading {
    margin-bottom: 4rem;
}

/* .faq-content .heading .sub {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.faq-content .heading .sub span {
    font-size: 1.8rem;
    font-weight: 500;
    color: #FF9933;
    text-transform: uppercase;
    letter-spacing: 0.2rem;
} */

/* .faq-content .heading h2 {
    text-align: left !important;
}
.faq-content .heading .sub span{
    text-align: left !important;
} */

.faq-accordion {
    margin-bottom: 3rem;
}

.faq-item {
    background-color: #fff;
    -webkit-border-radius: 1rem;
       -moz-border-radius: 1rem;
            border-radius: 1rem;
    margin-bottom: 2rem;
    overflow: hidden;
    border: 0.5px solid  #7a2e0eaf;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.faq-item:hover {
    -webkit-box-shadow: 0 0.8rem 1rem rgba(0, 0, 0, 0.12);
       -moz-box-shadow: 0 0.8rem 1rem rgba(0, 0, 0, 0.12);
            box-shadow: 0 0.8rem 1rem rgba(0, 0, 0, 0.12);
}

.faq-question {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
       -moz-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 2rem 2.5rem;
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

.faq-question h3 {
    font-size: 1.8rem;
    font-weight: 600;
    color: #333;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
       -moz-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    margin-right: 2rem;
    padding-bottom: 0px;
    margin-bottom: 0px;
}

.faq-question i {
    font-size: 1.6rem;
    color: #FF9933;
    -webkit-transition: -webkit-transform 0.3s ease;
    transition: -webkit-transform 0.3s ease;
    -o-transition: -o-transform 0.3s ease;
    -moz-transition: transform 0.3s ease, -moz-transform 0.3s ease;
    transition: transform 0.3s ease;
    transition: transform 0.3s ease, -webkit-transform 0.3s ease, -moz-transform 0.3s ease, -o-transform 0.3s ease;
}

.faq-item.active .faq-question i {
    -webkit-transform: rotate(180deg);
       -moz-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
         -o-transform: rotate(180deg);
            transform: rotate(180deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    -webkit-transition: max-height 0.3s ease, padding 0.3s ease;
    -o-transition: max-height 0.3s ease, padding 0.3s ease;
    -moz-transition: max-height 0.3s ease, padding 0.3s ease;
    transition: max-height 0.3s ease, padding 0.3s ease;
}

.faq-item.active .faq-answer {
    max-height: 50rem;
    padding: 0 2.5rem 2rem;
}

/* .faq-answer p {
     font-size: 1.5rem;
   line-height: 1.8;
    color: #666;
} */

/* .faq-content .btn {
    display: inline-block;
    padding: 1.5rem 4rem;
    background-color: #7A2E0E;
    color: #fff;
    font-size: 1.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1rem;
    -webkit-border-radius: 0.5rem;
       -moz-border-radius: 0.5rem;
            border-radius: 0.5rem;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
    text-decoration: none;
} */

/* .faq-content .btn:hover {
    background-color: #FF9933;
    -webkit-transform: translateY(-0.3rem);
       -moz-transform: translateY(-0.3rem);
        -ms-transform: translateY(-0.3rem);
         -o-transform: translateY(-0.3rem);
            transform: translateY(-0.3rem);
    -webkit-box-shadow: 0 0.5rem 1.5rem rgba(255, 153, 51, 0.4);
       -moz-box-shadow: 0 0.5rem 1.5rem rgba(255, 153, 51, 0.4);
            box-shadow: 0 0.5rem 1.5rem rgba(255, 153, 51, 0.4);
} */

.faq-image {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 45rem;
       -moz-box-flex: 0;
        -ms-flex: 0 0 45rem;
            flex: 0 0 45rem;
}

.faq-image img {
    width: 100%;
    height: 60rem;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center;
       object-position: center;
    -webkit-border-radius: 2rem;
       -moz-border-radius: 2rem;
            border-radius: 2rem;
    /* -webkit-box-shadow: 0 1rem 4rem rgba(0, 0, 0, 0.2);
       -moz-box-shadow: 0 1rem 4rem rgba(0, 0, 0, 0.2);
            box-shadow: 0 1rem 4rem rgba(0, 0, 0, 0.2); */
}

/*------------------------------ FAQ Section (End) ------------------------------*/


/*------------------------------ Wedding Loader (Start) ------------------------------*/

.wedding-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
       -moz-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    z-index: 99999;
    -webkit-transition: opacity 0.8s ease, visibility 0.8s ease;
    -o-transition: opacity 0.8s ease, visibility 0.8s ease;
    -moz-transition: opacity 0.8s ease, visibility 0.8s ease;
    transition: opacity 0.8s ease, visibility 0.8s ease;
}

.wedding-loader.fade-out {
    opacity: 0;
    visibility: hidden;
}

.loader-content {
    text-align: center;
    position: relative;
}

/* Mandala Container */
.mandala-container {
    position: relative;
    width: 30rem;
    height: 30rem;
    margin: 0 auto 3rem;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
       -moz-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

/* Mandala SVG */
.mandala-svg {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-filter: drop-shadow(0 0 1rem rgba(255, 153, 51, 0.3));
            filter: drop-shadow(0 0 1rem rgba(255, 153, 51, 0.3));
    -webkit-animation: mandalaGlow 2s ease-in-out infinite;
       -moz-animation: mandalaGlow 2s ease-in-out infinite;
         -o-animation: mandalaGlow 2s ease-in-out infinite;
            animation: mandalaGlow 2s ease-in-out infinite;
}

/* Mandala Circles */
.mandala-circle {
    stroke-dasharray: 565;
    stroke-dashoffset: 565;
    -webkit-animation: drawCircle 1.5s ease-out forwards;
       -moz-animation: drawCircle 1.5s ease-out forwards;
         -o-animation: drawCircle 1.5s ease-out forwards;
            animation: drawCircle 1.5s ease-out forwards;
}

.mandala-circle-1 {
    -webkit-animation-delay: 0s;
       -moz-animation-delay: 0s;
         -o-animation-delay: 0s;
            animation-delay: 0s;
}

.mandala-circle-2 {
    stroke-dasharray: 440;
    stroke-dashoffset: 440;
    -webkit-animation-delay: 0.3s;
       -moz-animation-delay: 0.3s;
         -o-animation-delay: 0.3s;
            animation-delay: 0.3s;
}

.mandala-circle-3 {
    stroke-dasharray: 314;
    stroke-dashoffset: 314;
    -webkit-animation-delay: 0.6s;
       -moz-animation-delay: 0.6s;
         -o-animation-delay: 0.6s;
            animation-delay: 0.6s;
}

/* Mandala Petals */
.mandala-petals path {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    -webkit-animation: drawPetal 0.8s ease-out forwards;
       -moz-animation: drawPetal 0.8s ease-out forwards;
         -o-animation: drawPetal 0.8s ease-out forwards;
            animation: drawPetal 0.8s ease-out forwards;
}

.outer-petals path {
    -webkit-animation-delay: 0.9s;
       -moz-animation-delay: 0.9s;
         -o-animation-delay: 0.9s;
            animation-delay: 0.9s;
}

.inner-petals path {
    -webkit-animation-delay: 1.2s;
       -moz-animation-delay: 1.2s;
         -o-animation-delay: 1.2s;
            animation-delay: 1.2s;
}

/* Logo Center */
.logo-center {
    position: relative;
    z-index: 2;
    width: 12rem;
    height: 12rem;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
       -moz-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    opacity: 0;
    -webkit-transform: scale(0.5);
       -moz-transform: scale(0.5);
        -ms-transform: scale(0.5);
         -o-transform: scale(0.5);
            transform: scale(0.5);
    -webkit-animation: logoFadeIn 0.8s ease-out 1.8s forwards;
       -moz-animation: logoFadeIn 0.8s ease-out 1.8s forwards;
         -o-animation: logoFadeIn 0.8s ease-out 1.8s forwards;
            animation: logoFadeIn 0.8s ease-out 1.8s forwards;
    
}

.logo-center img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    -webkit-border-radius: 50%;
       -moz-border-radius: 50%;
            border-radius: 50%;
}

/* Wedding Rings Animation */
.wedding-rings {
    position: relative;
    width: 12rem;
    height: 12rem;
    margin: 0 auto 3rem;
}

.ring {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
       -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
         -o-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
}

.ring i {
    font-size: 6rem;
    color: #FF9933;
    -webkit-animation: ringPulse 2s ease-in-out infinite;
       -moz-animation: ringPulse 2s ease-in-out infinite;
         -o-animation: ringPulse 2s ease-in-out infinite;
            animation: ringPulse 2s ease-in-out infinite;
}

.ring-1 {
    -webkit-transform: translate(-70%, -50%);
       -moz-transform: translate(-70%, -50%);
        -ms-transform: translate(-70%, -50%);
         -o-transform: translate(-70%, -50%);
            transform: translate(-70%, -50%);
    -webkit-animation: ring1Move 3s ease-in-out infinite;
       -moz-animation: ring1Move 3s ease-in-out infinite;
         -o-animation: ring1Move 3s ease-in-out infinite;
            animation: ring1Move 3s ease-in-out infinite;
}

.ring-2 {
    -webkit-transform: translate(-30%, -50%);
       -moz-transform: translate(-30%, -50%);
        -ms-transform: translate(-30%, -50%);
         -o-transform: translate(-30%, -50%);
            transform: translate(-30%, -50%);
    -webkit-animation: ring2Move 3s ease-in-out infinite;
       -moz-animation: ring2Move 3s ease-in-out infinite;
         -o-animation: ring2Move 3s ease-in-out infinite;
            animation: ring2Move 3s ease-in-out infinite;
}

.ring-2 i {
    color: #7A2E0E;
}

/* Loading Text */
.loader-text {
    margin-top: 2rem;
}

.loader-text p {
    font-size: 2rem;
    color: #FF9933;
    font-weight: 600;
    letter-spacing: 0.1rem;
    text-transform: none;
    font-family: 'Merriweather', serif;
}

.loader-text .dot {
    -webkit-animation: dotBlink 1.5s infinite;
       -moz-animation: dotBlink 1.5s infinite;
         -o-animation: dotBlink 1.5s infinite;
            animation: dotBlink 1.5s infinite;
}

.loader-text .dot:nth-child(1) {
    -webkit-animation-delay: 0s;
       -moz-animation-delay: 0s;
         -o-animation-delay: 0s;
            animation-delay: 0s;
}

.loader-text .dot:nth-child(2) {
    -webkit-animation-delay: 0.3s;
       -moz-animation-delay: 0.3s;
         -o-animation-delay: 0.3s;
            animation-delay: 0.3s;
}

.loader-text .dot:nth-child(3) {
    -webkit-animation-delay: 0.6s;
       -moz-animation-delay: 0.6s;
         -o-animation-delay: 0.6s;
            animation-delay: 0.6s;
}

/* Preloading Image Container */
.preload-image-container {
    position: relative;
    width: 35rem;
    height: 35rem;
    margin: 0 auto 3rem;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
       -moz-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

/* Preloading Image */
.preload-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    -webkit-border-radius: 50%;
       -moz-border-radius: 50%;
            border-radius: 50%;
    -webkit-filter: brightness(1.1) saturate(1.2);
            filter: brightness(1.1) saturate(1.2);
    -webkit-animation: spinSmooth 10s linear infinite;
       -moz-animation: spinSmooth 10s linear infinite;
         -o-animation: spinSmooth 10s linear infinite;
            animation: spinSmooth 10s linear infinite;
}

/* Logo Symbol in Center (Static) */
.preload-logo-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    width: 12rem;
    height: 12rem;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 0 2rem rgba(255, 153, 51, 0.6);
    -webkit-box-shadow: 0 0 2rem rgba(255, 153, 51, 0.6);
    -moz-box-shadow: 0 0 2rem rgba(255, 153, 51, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

/* Logo Symbol Image (Static - No Spin) */
.preload-logo {
    width: 80%;
    height: 80%;
    object-fit: contain;
    filter: brightness(1.15) saturate(1.3) contrast(1.1) drop-shadow(0 0 10px rgba(255, 215, 0, 0.7));
    -webkit-filter: brightness(1.15) saturate(1.3) contrast(1.1) drop-shadow(0 0 10px rgba(255, 215, 0, 0.7));
}

/* Smooth Spin Animation */
@-webkit-keyframes spinSmooth {
    0% {
        -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
    }
}

@-moz-keyframes spinSmooth {
    0% {
        -moz-transform: rotate(0deg);
             transform: rotate(0deg);
    }
    100% {
        -moz-transform: rotate(360deg);
             transform: rotate(360deg);
    }
}

@-o-keyframes spinSmooth {
    0% {
        -o-transform: rotate(0deg);
           transform: rotate(0deg);
    }
    100% {
        -o-transform: rotate(360deg);
           transform: rotate(360deg);
    }
}

@keyframes spinSmooth {
    0% {
        -webkit-transform: rotate(0deg);
           -moz-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
             -o-transform: rotate(0deg);
                transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
           -moz-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
             -o-transform: rotate(360deg);
                transform: rotate(360deg);
    }
}

/* Float Animation for Preloading Image */
@-webkit-keyframes imageFloat {
    0%, 100% {
        -webkit-transform: translateY(0);
                transform: translateY(0);
    }
    50% {
        -webkit-transform: translateY(-1rem);
                transform: translateY(-1rem);
    }
}

@-moz-keyframes imageFloat {
    0%, 100% {
        -moz-transform: translateY(0);
             transform: translateY(0);
    }
    50% {
        -moz-transform: translateY(-1rem);
             transform: translateY(-1rem);
    }
}

@-o-keyframes imageFloat {
    0%, 100% {
        -o-transform: translateY(0);
           transform: translateY(0);
    }
    50% {
        -o-transform: translateY(-1rem);
           transform: translateY(-1rem);
    }
}

@keyframes imageFloat {
    0%, 100% {
        -webkit-transform: translateY(0);
           -moz-transform: translateY(0);
            -ms-transform: translateY(0);
             -o-transform: translateY(0);
                transform: translateY(0);
    }
    50% {
        -webkit-transform: translateY(-1rem);
           -moz-transform: translateY(-1rem);
            -ms-transform: translateY(-1rem);
             -o-transform: translateY(-1rem);
                transform: translateY(-1rem);
    }
}

/* Fade out animation for preloading image */
.wedding-loader.fade-out .preload-image-container {
    opacity: 0;
    -webkit-transform: scale(1.2) rotate(180deg);
       -moz-transform: scale(1.2) rotate(180deg);
        -ms-transform: scale(1.2) rotate(180deg);
         -o-transform: scale(1.2) rotate(180deg);
            transform: scale(1.2) rotate(180deg);
    -webkit-transition: all 0.8s ease;
    -o-transition: all 0.8s ease;
    -moz-transition: all 0.8s ease;
    transition: all 0.8s ease;
}

/* Fade out for loader text */
.wedding-loader.fade-out .loader-text {
    opacity: 0;
    -webkit-transform: translateY(2rem);
       -moz-transform: translateY(2rem);
        -ms-transform: translateY(2rem);
         -o-transform: translateY(2rem);
            transform: translateY(2rem);
    -webkit-transition: all 0.8s ease;
    -o-transition: all 0.8s ease;
    -moz-transition: all 0.8s ease;
    transition: all 0.8s ease;
}

/* Keyframe Animations */
@-webkit-keyframes drawCircle {
    to {
        stroke-dashoffset: 0;
    }
}

@-moz-keyframes drawCircle {
    to {
        stroke-dashoffset: 0;
    }
}

@-o-keyframes drawCircle {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes drawCircle {
    to {
        stroke-dashoffset: 0;
    }
}

@-webkit-keyframes drawPetal {
    to {
        stroke-dashoffset: 0;
    }
}

@-moz-keyframes drawPetal {
    to {
        stroke-dashoffset: 0;
    }
}

@-o-keyframes drawPetal {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes drawPetal {
    to {
        stroke-dashoffset: 0;
    }
}

@-webkit-keyframes logoFadeIn {
    to {
        opacity: 1;
        -webkit-transform: scale(1);
                transform: scale(1);
    }
}

@-moz-keyframes logoFadeIn {
    to {
        opacity: 1;
        -moz-transform: scale(1);
             transform: scale(1);
    }
}

@-o-keyframes logoFadeIn {
    to {
        opacity: 1;
        -o-transform: scale(1);
           transform: scale(1);
    }
}

@keyframes logoFadeIn {
    to {
        opacity: 1;
        -webkit-transform: scale(1);
           -moz-transform: scale(1);
            -ms-transform: scale(1);
             -o-transform: scale(1);
                transform: scale(1);
    }
}

@-webkit-keyframes mandalaGlow {
    0%, 100% {
        -webkit-filter: drop-shadow(0 0 1rem rgba(255, 153, 51, 0.3));
                filter: drop-shadow(0 0 1rem rgba(255, 153, 51, 0.3));
    }
    50% {
        -webkit-filter: drop-shadow(0 0 2rem rgba(255, 153, 51, 0.6));
                filter: drop-shadow(0 0 2rem rgba(255, 153, 51, 0.6));
    }
}

@-moz-keyframes mandalaGlow {
    0%, 100% {
        -moz-filter: drop-shadow(0 0 1rem rgba(255, 153, 51, 0.3));
             filter: drop-shadow(0 0 1rem rgba(255, 153, 51, 0.3));
    }
    50% {
        -moz-filter: drop-shadow(0 0 2rem rgba(255, 153, 51, 0.6));
             filter: drop-shadow(0 0 2rem rgba(255, 153, 51, 0.6));
    }
}

@-o-keyframes mandalaGlow {
    0%, 100% {
        filter: drop-shadow(0 0 1rem rgba(255, 153, 51, 0.3));
    }
    50% {
        filter: drop-shadow(0 0 2rem rgba(255, 153, 51, 0.6));
    }
}

@keyframes mandalaGlow {
    0%, 100% {
        -webkit-filter: drop-shadow(0 0 1rem rgba(255, 153, 51, 0.3));
           -moz-filter: drop-shadow(0 0 1rem rgba(255, 153, 51, 0.3));
                filter: drop-shadow(0 0 1rem rgba(255, 153, 51, 0.3));
    }
    50% {
        -webkit-filter: drop-shadow(0 0 2rem rgba(255, 153, 51, 0.6));
           -moz-filter: drop-shadow(0 0 2rem rgba(255, 153, 51, 0.6));
                filter: drop-shadow(0 0 2rem rgba(255, 153, 51, 0.6));
    }
}

@-webkit-keyframes dotBlink {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}

@-moz-keyframes dotBlink {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}

@-o-keyframes dotBlink {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}

@keyframes dotBlink {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}


/*------------------------------ Wedding Loader (End) ------------------------------*/

/*------------------------------ Service Detail Page Styles (Start) ------------------------------*/

/* Service Page Title */
.page-title.service-page{
    /* background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5)), url("../images/new-images/hero-banner2.webp"); */
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5)), url("../images/new-images/hero-banner2.webp");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}


/* Service Detail Section */

.wedding-service-detail{
    padding: 6rem 0;
}

.service-detail .container{
    max-width: 150rem;
    margin: 0 auto;
    padding: 0 2rem;
}

/*----- Wedding Management Service Specific Styles -----*/

/* Top Section - Heading & Paragraph */
.service-top-section{
    /* text-align: center; */
    align-items: center;
    /* max-width: 90%; */
    margin: 0 auto 6rem;
    padding: 0 2rem;
    max-width: 150rem;
}


.udaipur-service-top-section{
    padding-bottom: 0px !important;
    max-width: 90%;
}

.service-top-section .heading{
    margin-bottom: 2rem;
}

/* 
.service-top-section .heading .sub{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 1rem;
    font-size: 1.6rem;
    color: var(--main-color);
    text-transform: uppercase;
    letter-spacing: 0.2rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
} */

/* .service-top-section p{
    font-size: 1.7rem;
    line-height: 1.8;
    color: var(--text-color);
    margin: 0;
} */

/* Service Cards Grid - 4 Cards in Row */
.service-cards-grid{
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 3rem 1fr 3rem 1fr 3rem 1fr;
    grid-template-columns: repeat(4, 1fr);
    gap: 3rem;
    margin: 0 auto 2rem;
    max-width: 150rem;
    padding: 0 2rem;
}

.service-card{
    background: url('../images/card-bg.jpg');
    background-size: cover;
    background-position: center;
    padding: 3.5rem 2.5rem;
    text-align: center;
    -webkit-box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.08);
    /* box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.08); */
    transition: all 0.3s ease-in-out;
    border: 1px solid var(--main-color);
    border-radius: 20px;
}

.service-card:hover{
   
    -webkit-box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.15);
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.15);
    border-color: var(--main-color);
}

.service-card .card-icon{
    width: 7rem;
    height: 7rem;
    margin: 0 auto 2rem;
    background: var(--main-color);
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

/* .service-card:hover .card-icon{
    background: var(--secondary-color);
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
} */

.service-card .card-icon i{
    font-size: 3.2rem;
    color: var(--white);
}

.service-card .card-icon svg{
    width: 3.2rem;
    height: 3.2rem;
    color: var(--white);
}

.service-card h3{
    font-size: 2rem;
    color: var(--secondary-color);
    margin-bottom: 1.2rem;
    font-weight: 600;
    line-height: 1.4;
}

/* .service-card p{
    font-size: 1.5rem;
    line-height: 1.6;
    color: var(--text-color);
    margin: 0;
} */

/* Split Content Section - Image Left, Content Right */
.split-content-section{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 5rem;
    margin: 0 auto 8rem;
    max-width: 150rem;
    padding: 0 2rem;
    margin-top: 8rem;
}

.split-image{
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.split-image img{
    width: 100%;
    height: auto;
    -webkit-border-radius: 1rem;
    -moz-border-radius: 1rem;
    -ms-border-radius: 1rem;
    -o-border-radius: 1rem;
    border-radius: 1rem;
    -webkit-box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.1);
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.1);
}

.split-content{
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.split-content .heading{
    margin-bottom: 2rem;
}

/* .split-content .heading .sub{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 1rem;
    font-size: 1.6rem;
    color: var(--main-color);
    text-transform: uppercase;
    letter-spacing: 0.2rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
} */

/* .split-content .heading h2{
    font-size: 3.5rem;
    color: var(--secondary-color);
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 0;
} */
/* 
.split-content p{
    font-size: 1.6rem;
    line-height: 1.8;
    color: var(--text-color);
    margin-bottom: 2rem;
} */

.split-content .benefit-points{
    list-style: none;
    margin-bottom: 3rem;
    /* margin-top: 2rem; */
}

 .split-content .benefit-points li{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
    font-size: 1.8rem;
    /* line-height: 1.8; */
    color: var(--grey);
    margin-top: 2rem;
} 

/* .split-content .benefit-points li .sparkle-icon{
    margin-top: 0.5rem;
    -ms-flex-negative: 0;
    flex-shrink: 0;
} */

/* Second Content Section - Heading, Paragraph & Cards */
.second-content-section{
    text-align: center;
    max-width: 150rem;
    margin: 0 auto;
    padding: 0 2rem;
}

.second-content-section .heading{
    margin-bottom: 2rem;
}

.second-content-section .heading .sub{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 1rem;
    font-size: 1.6rem;
    color: var(--main-color);
    text-transform: uppercase;
    letter-spacing: 0.2rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.second-content-section .heading h2{
    font-size: 4rem;
    color: var(--secondary-color);
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 0;
}

.second-content-section > p{
    font-size: 1.7rem;
    line-height: 1.8;
    color: var(--text-color);
    margin: 0 auto 5rem;
    max-width: 90%;
}

/* Service Introduction */
.service-intro{
    text-align: center;
    max-width: 90rem;
    margin: 0 auto 6rem;
}

.service-intro .heading{
    margin-bottom: 2rem;
}

.service-intro p{
    font-size: 1.7rem;
    line-height: 1.8;
    color: var(--text-color);
}

/* Service Features Grid */
.service-features-grid{
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 3rem 1fr 3rem 1fr;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
    margin-bottom: 8rem;
}

.feature-box{
    background: var(--white);
    padding: 3rem;
    text-align: center;
    -webkit-border-radius: 1rem;
    -moz-border-radius: 1rem;
    -ms-border-radius: 1rem;
    -o-border-radius: 1rem;
    border-radius: 1rem;
    -webkit-box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.05);
    box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.05);
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.feature-box:hover{
    -webkit-transform: translateY(-0.5rem);
    -ms-transform: translateY(-0.5rem);
    -moz-transform: translateY(-0.5rem);
    -o-transform: translateY(-0.5rem);
    transform: translateY(-0.5rem);
    -webkit-box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.1);
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.1);
}

.feature-box .icon-wrapper{
    width: 7rem;
    height: 7rem;
    margin: 0 auto 2rem;
    background: -webkit-linear-gradient(135deg, var(--main-color), var(--secondary-color));
    background: linear-gradient(135deg, var(--main-color), var(--secondary-color));
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.feature-box .icon-wrapper i{
    font-size: 3rem;
    color: var(--white);
}

.feature-box h3{
    font-size: 2rem;
    color: var(--secondary-color);
    margin-bottom: 1.5rem;
    font-weight: 600;
}

.feature-box p{
    font-size: 1.5rem;
    line-height: 1.7;
    color: var(--text-color);
}

/* Service Process */
.service-process{
    margin-bottom: 8rem;
}

.service-process .heading{
    text-align: center;
    margin-bottom: 5rem;
}

.process-steps{
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 3rem 1fr 3rem 1fr;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
}

.step-item{
    background: var(--white);
    padding: 3rem;
    -webkit-border-radius: 1rem;
    -moz-border-radius: 1rem;
    -ms-border-radius: 1rem;
    -o-border-radius: 1rem;
    border-radius: 1rem;
    position: relative;
    border-top: 0.4rem solid var(--main-color);
}

.step-number{
    font-size: 4rem;
    font-weight: 700;
    color: var(--main-color);
    opacity: 0.2;
    margin-bottom: 1rem;
}

.step-item h3{
    font-size: 2rem;
    color: var(--secondary-color);
    margin-bottom: 1.5rem;
    font-weight: 600;
}

.step-item p{
    font-size: 1.5rem;
    line-height: 1.7;
    color: var(--text-color);
}

/* Why Choose Us */
.why-choose-us{
    /* display: -webkit-box;
    display: -ms-flexbox;
    display: flex; */
    gap: 5rem;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 8rem;
}

.why-content{
     display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.why-content .heading{
    margin-bottom: 3rem;
}

.benefits-list{
    list-style: none;
    margin-bottom: 3rem;
}

.benefits-list li{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 2rem;
    font-size: 1.6rem;
    line-height: 1.8;
    color: var(--text-color);
}

.benefits-list li .sparkle-icon{
    margin-top: 0.5rem;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.why-image{
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.why-image img{
    width: 100%;
    -webkit-border-radius: 1rem;
    -moz-border-radius: 1rem;
    -ms-border-radius: 1rem;
    -o-border-radius: 1rem;
    border-radius: 1rem;
    -webkit-box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.1);
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.1);
}

/* Service Testimonials */
.service-testimonials{
    margin-bottom: 6rem;
}

.service-testimonials .heading{
    text-align: center;
    margin-bottom: 5rem;
}

.testimonials-grid{
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 3rem 1fr 3rem 1fr;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
}

.testimonial-box{
    background: var(--white);
    padding: 3rem;
    -webkit-border-radius: 1rem;
    -moz-border-radius: 1rem;
    -ms-border-radius: 1rem;
    -o-border-radius: 1rem;
    border-radius: 1rem;
    -webkit-box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.05);
    box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.05);
}

.testimonial-box .stars{
    margin-bottom: 1.5rem;
}

.testimonial-box .stars i{
    color: var(--accent-color);
    font-size: 1.4rem;
    margin-right: 0.3rem;
}

.testimonial-box p{
    font-size: 1.5rem;
    line-height: 1.8;
    color: var(--text-color);
    margin-bottom: 2rem;
    font-style: italic;
}

.client-info h4{
    font-size: 1.7rem;
    color: var(--secondary-color);
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.client-info span{
    font-size: 1.4rem;
    color: var(--main-color);
}

/* Image Collage Section */
.service-collage-section{
    text-align: center;
    max-width: 150rem;
    margin: 0 auto 8rem;
    padding: 0 2rem;
}

.service-collage-section .heading{
    margin-bottom: 2rem;
}

/* .service-collage-section .heading .sub{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 1rem;
    font-size: 1.6rem;
    color: var(--main-color);
    text-transform: uppercase;
    letter-spacing: 0.2rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
} */

/* .service-collage-section .heading h2{
    font-size: 4rem;
    color: var(--secondary-color);
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 0;
} */

/* .service-collage-section > p{
    font-size: 1.6rem;
    line-height: 1.8;
    color: var(--text-color);
    margin: 0 auto 4rem;
    max-width: 90%;
} */

/* Image Collage Grid */
.image-collage-grid{
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 2rem 1fr 2rem 1fr;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 4rem;
}

.collage-item{
    position: relative;
    overflow: hidden;
    -webkit-border-radius: 1rem;
    -moz-border-radius: 1rem;
    -ms-border-radius: 1rem;
    -o-border-radius: 1rem;
    border-radius: 1rem;
    height: 30rem;
    cursor: pointer;
    -webkit-box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.1);
    box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.1);
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

.collage-item:hover{
    -webkit-transform: translateY(-0.5rem);
    -ms-transform: translateY(-0.5rem);
    -moz-transform: translateY(-0.5rem);
    -o-transform: translateY(-0.5rem);
    transform: translateY(-0.5rem);
    -webkit-box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.15);
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.15);
}

.collage-item img{
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    display: block;
    -webkit-transition: -webkit-transform 0.4s ease;
    transition: -webkit-transform 0.4s ease;
    transition: transform 0.4s ease;
    transition: transform 0.4s ease, -webkit-transform 0.4s ease;
}

.collage-item:hover img{
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}



.why-udaipur-section .service-top-section .heading{
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

/* .why-udaipur-section .service-top-section .heading .sub{
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
} */

/* .why-udaipur-section .service-top-section p{
    text-align: center;
    max-width: 90%;
    margin: 0 auto;
} */

.udaipur-split-layout{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 6rem;
    margin-top: 5rem;
}

/* Image Collage Container */
.image-collage-container{
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    position: relative;
}

.collage-layout{
    position: relative;
    width: 100%;
    height: 65rem;
}
/* 
.collage-img{
    position: absolute;
    overflow: hidden;
    -webkit-border-radius: 1.5rem;
    -moz-border-radius: 1.5rem;
    -ms-border-radius: 1.5rem;
    -o-border-radius: 1.5rem;
    border-radius: 1.5rem;
    -webkit-box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.15);
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.15);
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
} */

.collage-img:hover{
    -webkit-transform: scale(1.02);
    -ms-transform: scale(1.02);
    -moz-transform: scale(1.02);
    -o-transform: scale(1.02);
    transform: scale(1.02);
    -webkit-box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.2);
    box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.2);
    z-index: 10;
}

.collage-img img{
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    display: block;
}

/* Large Image - Right Side */
/* .collage-large{
    width: 60%;
    height: 65%;
    top: 50%;
    right: 0;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 2;
} */

/* Small Images - Left Side Stacked */
.collage-small-1{
    width: 48%;
    height: 32%;
    top: 0;
    left: 0;
    z-index: 3;
}

.collage-small-2{
    width: 48%;
    height: 28%;
    top: 35%;
    left: 0;
    z-index: 3;
}

.collage-small-3{
    width: 48%;
    height: 28%;
    bottom: 0;
    left: 0;
    z-index: 3;
}

/* Udaipur Content */
.udaipur-content{
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.udaipur-content .heading h2{
    font-size: 3.2rem;
    color: var(--secondary-color);
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 2rem;
}

.udaipur-content > p{
    font-size: 1.6rem;
    line-height: 1.8;
    color: var(--text-color);
    margin-bottom: 3rem;
}

.udaipur-features{
    list-style: none;
}

.udaipur-features li{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    gap: 1.5rem;
    margin-bottom: 2rem;
    font-size: 1.6rem;
    line-height: 1.7;
    color: var(--text-color);
}

.udaipur-features .feature-icon{
    width: 4rem;
    height: 4rem;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    background: var(--main-color);
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.udaipur-features .feature-icon svg{
    width: 2rem;
    height: 2rem;
    color: var(--white);
}

/* Booking Popup Modal Styles */
.booking-modal{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999999;
    display: none;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 2rem;
}

.booking-modal.active{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.modal-overlay{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

.modal-content{
    position: relative;
    background: #fff7f8;
    max-width: 90rem;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    -webkit-border-radius: 1.5rem;
    -moz-border-radius: 1.5rem;
    -ms-border-radius: 1.5rem;
    -o-border-radius: 1.5rem;
    border-radius: 1.5rem;
    padding: 4rem 3rem;
    -webkit-box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.3);
    box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.3);
    z-index: 10;
    -webkit-animation: modalSlideIn 0.3s ease;
    animation: modalSlideIn 0.3s ease;
}

@-webkit-keyframes modalSlideIn {
    from {
        opacity: 0;
        -webkit-transform: translateY(-5rem);
        transform: translateY(-5rem);
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        -webkit-transform: translateY(-5rem);
        -moz-transform: translateY(-5rem);
        -ms-transform: translateY(-5rem);
        -o-transform: translateY(-5rem);
        transform: translateY(-5rem);
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
    }
}

.modal-close{
    position: absolute;
    top: 2rem;
    right: 2rem;
    width: 4rem;
    height: 4rem;
    background: var(--main-color);
    border: none;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    z-index: 11;
}

.modal-close:hover{
    background: var(--secondary-color);
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}

.modal-close svg{
    width: 2rem;
    height: 2rem;
    color: var(--white);
}

.modal-header{
    text-align: center;
    margin-bottom: 3rem;
}

.modal-header .heading{
    margin-bottom: 1rem;
}

.modal-header .heading .sub{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 1rem;
    font-size: 1.4rem;
    color: var(--main-color);
    text-transform: uppercase;
    letter-spacing: 0.2rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.modal-header .heading h2{
    font-size: 2.8rem;
    color: var(--secondary-color);
    font-weight: 700;
    line-height: 1.3;
}

.modal-header p{
    font-size: 1.4rem;
    line-height: 1.6;
    color: var(--text-color);
}

/* Booking Popup Modal Styles */
.booking-modal{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999999;
    display: none;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 2rem;
}

.booking-modal.active{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.modal-overlay{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

.modal-content-wrapper{
    position: relative;
    background: var(--white);
    max-width: 150rem;
    width: 100%;
    max-height: 88vh;
    overflow: hidden;
    -webkit-border-radius: 1.5rem;
    -moz-border-radius: 1.5rem;
    -ms-border-radius: 1.5rem;
    -o-border-radius: 1.5rem;
    border-radius: 1.5rem;
    -webkit-box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.3);
    box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.3);
    z-index: 10;
    -webkit-animation: modalSlideIn 0.3s ease;
    animation: modalSlideIn 0.3s ease;
}

@-webkit-keyframes modalSlideIn {
    from {
        opacity: 0;
        -webkit-transform: translateY(-5rem);
        transform: translateY(-5rem);
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        -webkit-transform: translateY(-5rem);
        -moz-transform: translateY(-5rem);
        -ms-transform: translateY(-5rem);
        -o-transform: translateY(-5rem);
        transform: translateY(-5rem);
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
    }
}

.modal-close{
    position: absolute;
    top: 2rem;
    right: 2rem;
    width: 4rem;
    height: 4rem;
    background: var(--main-color);
    border: none;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    z-index: 11;
}

.modal-close:hover{
    background: var(--secondary-color);
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}

.modal-close svg{
    width: 2rem;
    height: 2rem;
    color: var(--white);
}

.modal-body{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    max-height: 88vh;
}

/* Left Side - Form Section */
.booking-form-section{
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding: 2.5rem 2.5rem;
    background: #fff7f8;
    overflow-y: visible;
}

.modal-header{
    text-align: center;
    margin-bottom: 1.5rem;
}

.modal-header .heading{
    margin-bottom: 1rem;
}

.modal-header .heading .sub{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 0.8rem;
    font-size: 1.1rem;
    color: var(--main-color);
    text-transform: uppercase;
    letter-spacing: 0.2rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.modal-header .heading h2{
    font-size: 2rem;
    color: var(--secondary-color);
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 0.3rem;
}

.modal-header p{
    font-size: 1.2rem;
    line-height: 1.4;
    color: var(--text-color);
}

/* Right Side - Image Section */
.booking-image-section{
    -webkit-box-flex: 0.8;
    -ms-flex: 0.8;
    flex: 0.8;
    display: flex;
    align-items: center;
}
   

.image-wrapper{
    width: 100%;
    height: 100%;
    position: relative;
}

.image-wrapper img{
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.image-overlay{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.85), transparent);
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.85), transparent);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    padding: 3rem;
}

.overlay-content{
    text-align: center;
    color: var(--white);
    width: 100%;
}

.overlay-content .sparkle-icon.large{
    font-size: 3rem;
    margin-bottom: 1.5rem;
}

.overlay-content h3{
    font-size: 2.4rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--white);
}

.overlay-content p{
    font-size: 1.5rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
}

/* Book Your Date Page Styles */
.book-date-section{
    padding: 8rem 5%;
    background: var(--white);
}

.book-date-container{
    max-width: 140rem;
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 6rem;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}

/* Booking Form Wrapper */
.booking-form-wrapper{
    -webkit-box-flex: 1.2;
    -ms-flex: 1.2;
    flex: 1.2;
    background: #fff7f8;
    padding: 5rem 4rem;
    -webkit-border-radius: 1.5rem;
    -moz-border-radius: 1.5rem;
    -ms-border-radius: 1.5rem;
    -o-border-radius: 1.5rem;
    border-radius: 1.5rem;
    -webkit-box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.08);
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.08);
}

.form-header{
    text-align: center;
    margin-bottom: 4rem;
}

.form-header .heading{
    margin-bottom: 1.5rem;
}

.form-header .heading .sub{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 1rem;
    font-size: 1.6rem;
    color: var(--main-color);
    text-transform: uppercase;
    letter-spacing: 0.2rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.form-header .heading h2{
    font-size: 3.5rem;
    color: var(--secondary-color);
    font-weight: 700;
    line-height: 1.3;
}

.form-header p{
    font-size: 1.6rem;
    line-height: 1.7;
    color: var(--text-color);
}

/* Wedding Booking Form */
.wedding-booking-form{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 1.2rem;
}

.form-row{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 1.5rem;
}

.form-group{
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

.form-group.full-width{
    width: 100%;
}

.form-group label{
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--secondary-color);
    margin-bottom: 0.6rem;
    display: block;
}

.form-group .required{
    color: var(--main-color);
}

.form-group input,
.form-group select,
.form-group textarea{
    width: 100%;
    padding: 1rem 1.3rem;
    font-size: 1.3rem;
    color: var(--black);
    background: var(--white);
    border: 0.2rem solid #e0e0e0;
    -webkit-border-radius: 0.8rem;
    -moz-border-radius: 0.8rem;
    -ms-border-radius: 0.8rem;
    -o-border-radius: 0.8rem;
    border-radius: 0.8rem;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    font-family: "Poppins", sans-serif;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
    outline: none;
    border-color: var(--main-color);
    -webkit-box-shadow: 0 0 0 0.3rem rgba(255, 153, 51, 0.1);
    box-shadow: 0 0 0 0.3rem rgba(255, 153, 51, 0.1);
}

.form-group textarea{
    resize: vertical;
    min-height: 6rem;
    max-height: 6rem;
}

/* Checkbox Group */
.checkbox-group{
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 1.5rem 1fr;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.checkbox-label{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
    font-size: 1.5rem;
    color: var(--text-color);
    font-weight: normal;
}

.checkbox-label input[type="checkbox"]{
    width: 2rem;
    height: 2rem;
    cursor: pointer;
    accent-color: var(--main-color);
}

/* Submit Button */
.submit-btn{
    margin-top: 1rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 1rem;
    padding: 1.2rem 2rem;
    font-size: 1.4rem;
    font-weight: 600;
}

.submit-btn svg{
    width: 2rem;
    height: 2rem;
}

/* Booking Image Wrapper */
.booking-image-wrapper{
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    position: relative;
}

.image-content{
    position: relative;
    height: 100%;
    -webkit-border-radius: 1.5rem;
    -moz-border-radius: 1.5rem;
    -ms-border-radius: 1.5rem;
    -o-border-radius: 1.5rem;
    border-radius: 1.5rem;
    overflow: hidden;
    -webkit-box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.15);
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.15);
}

.image-content img{
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.image-overlay{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.9), transparent);
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.9), transparent);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    padding: 4rem;
}

.overlay-content{
    text-align: center;
    color: var(--white);
}

.overlay-content .sparkle-icon.large{
    font-size: 4rem;
    margin-bottom: 2rem;
}

.overlay-content h3{
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: var(--white);
}

.overlay-content p{
    font-size: 1.6rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.9);
}

/*------------------------------ Service Detail Page Styles (End) ------------------------------*/
        /* opacity: 0.6;
    }
    50% {
        -o-transform: translateY(-2rem) scale(1.2);
           transform: translateY(-2rem) scale(1.2);
        opacity: 0.3;
    }
} */

@keyframes floatHeart {
    0%, 100% {
        -webkit-transform: translateY(0) scale(1);
           -moz-transform: translateY(0) scale(1);
            -ms-transform: translateY(0) scale(1);
             -o-transform: translateY(0) scale(1);
                transform: translateY(0) scale(1);
        opacity: 0.6;
    }
    50% {
        -webkit-transform: translateY(-2rem) scale(1.2);
           -moz-transform: translateY(-2rem) scale(1.2);
            -ms-transform: translateY(-2rem) scale(1.2);
             -o-transform: translateY(-2rem) scale(1.2);
                transform: translateY(-2rem) scale(1.2);
        opacity: 0.3;
    }
}

/*------------------------------ Wedding Loader (End) ------------------------------*/

/*------------------------------ Home Gallery Section (Start) ------------------------------*/



.home-gallery-section .heading{
    text-align: center;
    margin-bottom: 5rem;
}

.home-gallery-slider-wrapper{
    max-width: 150rem;
    margin: 0 auto;
    position: relative;
    padding: 0 0;
}

.home-gallery-swiper{
    width: 100%;
    padding: 2rem 0 5rem 0;
}

.home-gallery-swiper .swiper-wrapper{
    align-items: stretch;
}

.home-gallery-slide{
    height: auto;
    display: flex;
    align-items: stretch;
}

.home-gallery-image{
    position: relative;
    width: 100%;
    height: 40rem;
    overflow: hidden;
    border-radius: var(--border-radius-2);
    /* box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.15); */
    transition: all 0.4s ease;
}

.home-gallery-image:hover{
    transform: translateY(-1rem);
    /* box-shadow: 0 2rem 4rem rgba(0, 0, 0, 0.25); */
}

.home-gallery-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.home-gallery-image:hover img{
    transform: scale(1.03);
}

/* Navigation Buttons */
.home-gallery-next,
.home-gallery-prev{
    width: 5rem;
    height: 5rem;
    background: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--main-color);
    font-size: 2rem;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    cursor: pointer;
}

.home-gallery-next::after,
.home-gallery-prev::after{
    font-size: 2rem;
    font-weight: 900;
}

.home-gallery-next:hover,
.home-gallery-prev:hover{
    background: var(--main-color);
    color: var(--white);
    transform: scale(1.1);
}

.home-gallery-next{
    right: 0;
}

.home-gallery-prev{
    left: 0;
}

/* Pagination */
.home-gallery-pagination{
    bottom: 0 !important;
}

.home-gallery-pagination .swiper-pagination-bullet{
    width: 1.2rem;
    height: 1.2rem;
    background: var(--grey);
    opacity: 0.5;
    transition: all 0.3s ease;
}

.home-gallery-pagination .swiper-pagination-bullet-active{
    background: var(--main-color);
    opacity: 1;
    width: 3rem;
    border-radius: 0.6rem;
}
.form-heading{
margin-bottom: 0rem !important;
padding-bottom: 0rem !important;
}

/*------------------------------ Home Gallery Section (End) ------------------------------*/

/* blogs page css  */

    /* Modern Blog Page Styles */
    .modern-blog-section {
      padding: 80px 0;
      background: linear-gradient(135deg, #FFF7F8 0%, #FFFFFF 100%);
    }

    .blog-page-container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;
    }

    .blog-page-header {
      text-align: center;
      margin-bottom: 60px;
    }

    .blog-page-header h1 {
      font-size: 2.5rem;
      font-weight: 500;
      color: var(--main-color);
      margin-bottom: 15px;
      letter-spacing: -1px;
    }

    .blog-page-header h3 {
      font-size: 2.2rem;
      color: var(--secondary-color);
      font-weight: 400;
      max-width: 600px;
      margin: 0 auto;
    }

    /* Search Bar */
    .blog-search-bar {
      max-width: 600px;
      margin: 40px auto;
      display: flex;
      gap: 10px;
      background: var(--white);
      padding: 8px;
      border-radius: 50px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    }

    .blog-search-bar input {
      flex: 1;
      border: none;
      padding: 15px 25px;
      font-size: 1.5rem;
      border-radius: 50px;
      outline: none;
    }

    .blog-search-bar button {
      background: var(--main-color);
      color: var(--white);
      border: none;
      padding: 15px 35px;
      border-radius: 50px;
      font-size: 1.5rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .blog-search-bar button:hover {
      background: var(--secondary-color);
      transform: translateY(-2px);
    }

    /* Featured Blog Card */
    .featured-blog {
      background: var(--white);
      border-radius: 8px;
      overflow: hidden;
      margin-bottom: 60px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .featured-blog:hover {
      transform: translateY(-5px);
      box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15);
    }

    .featured-blog-image {
      position: relative;
      height: 100%;
      overflow: hidden;
    }

    .featured-blog-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.5s ease;
    }

    .featured-blog:hover .featured-blog-image img {
      transform: scale(1.05);
    }

    .featured-blog-image::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(135deg, rgba(255, 153, 51, 0.3) 0%, rgba(43, 43, 43, 0.3) 100%);
    }

    .featured-blog-date {
      position: absolute;
      top: 20px;
      left: 20px;
      background: var(--white);
      color: var(--main-color);
      padding: 10px 20px;
      border-radius: 50px;
      font-size: 1.3rem;
      font-weight: 600;
      z-index: 1;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }

    .featured-blog-content {
      padding: 40px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .featured-blog-category {
      display: inline-block;
      color: var(--main-color);
      font-size: 1.4rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 1px;
      margin-bottom: 15px;
    }

    .featured-blog-content .blog-featured-title {
      font-size: 3.2rem;
      color: var(--secondary-color);
      margin-bottom: 20px;
      line-height: 1.3;
      font-weight: 700;
    }

    .featured-blog-content p {
      font-size: 1.6rem;
      color: var(--grey);
      line-height: 1.8;
      margin-bottom: 25px;
    }

    .featured-blog-meta {
      display: flex;
      align-items: center;
      gap: 20px;
      margin-bottom: 25px;
      font-size: 1.4rem;
      color: var(--grey);
    }

    .featured-blog-meta i {
      color: var(--main-color);
      margin-right: 5px;
    }

    .read-more-btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: var(--main-color);
      color: var(--white);
      padding: 15px 35px;
      border-radius: 50px;
      font-size: 1.5rem;
      font-weight: 600;
      text-decoration: none;
      transition: all 0.3s ease;
      width: fit-content;
    }

    .read-more-btn:hover {
      background: var(--secondary-color);
      transform: translateX(5px);
    }

    /* Blog Grid */
    .blog-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 30px;
      margin-bottom: 60px;
    }

    .blog-card {
      background: var(--white);
      border-radius: 8px;
      overflow: hidden;
      transition: all 0.3s ease;
      display: flex;
      flex-direction: column;
    }

    .blog-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    }

    .blog-card-image {
      position: relative;
      height: 240px;
      overflow: hidden;
    }

    .blog-card-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.5s ease;
    }

    .blog-card:hover .blog-card-image img {
      transform: scale(1.1);
    }

    .blog-card-image::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.4) 100%);
    }

    .blog-card-date {
      position: absolute;
      bottom: 15px;
      left: 15px;
      background: var(--white);
      color: var(--main-color);
      padding: 8px 15px;
      border-radius: 50px;
      font-size: 1.2rem;
      font-weight: 600;
      z-index: 1;
    }

    .blog-card-content {
      padding: 25px;
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    .blog-card-category {
      color: var(--main-color);
      font-size: 1.2rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 10px;
    }

    .blog-card-content h3 {
      font-size: 2rem;
      color: var(--secondary-color);
      margin-bottom: 12px;
      line-height: 1.4;
      font-weight: 600;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      /* line-break: 2; */
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      min-height: 0;
      max-height: calc(2rem * 1.4 * 2);
    }

    .blog-card-excerpt {
      font-size: 1.6rem;
      color: var(--grey);
      line-height: 1.6;
      margin-bottom: 15px;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
      flex: 1;
    }

    .blog-card-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-top: 15px;
      border-top: 1px solid #f0f0f0;
    }

    .blog-card-author {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 1.6rem;
      color: var(--main-color);
    }

    .blog-card-author i {
      color: var(--main-color);
    }

    .blog-card-link {
      color: var(--main-color);
      font-size: 1.6rem;
      font-weight: 600;
      text-decoration: none;
      display: flex;
      align-items: center;
      gap: 5px;
      transition: all 0.3s ease;
    }

    .blog-card-link:hover {
      color: var(--secondary-color);
      gap: 10px;
    }

    /* Pagination */
    .blog-pagination {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 10px;
      margin-top: 60px;
    }

    .blog-pagination a,
    .blog-pagination span {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 45px;
      height: 45px;
      border-radius: 50%;
      font-size: 1.5rem;
      font-weight: 600;
      text-decoration: none;
      transition: all 0.3s ease;
    }

    .blog-pagination a {
      background: var(--white);
      color: var(--secondary-color);
      border: 2px solid #e0e0e0;
    }

    .blog-pagination a:hover {
      background: var(--main-color);
      color: var(--white);
      border-color: var(--main-color);
      transform: translateY(-2px);
    }

    .blog-pagination .active {
      background: var(--main-color);
      color: var(--white);
      border: 2px solid var(--main-color);
    }

    /* Empty State */
    .empty-blog-state {
      text-align: center;
      padding: 100px 20px;
      background: var(--white);
      border-radius: 20px;
      box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    }

    .empty-blog-state i {
      font-size: 80px;
      color: var(--accent-color);
      margin-bottom: 25px;
    }

    .empty-blog-state h2 {
      font-size: 3rem;
      color: var(--secondary-color);
      margin-bottom: 15px;
    }

    .empty-blog-state p {
      font-size: 1.6rem;
      color: var(--grey);
    }

    /* Responsive Design */
    @media (max-width: 1024px) {
      .blog-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .featured-blog {
        grid-template-columns: 1fr;
      }

      .featured-blog-image {
        height: 300px;
      }
    }

    @media (max-width: 768px) {
      .blog-page-header h1 {
        font-size: 4rem;
      }

      .blog-grid {
        grid-template-columns: 1fr;
      }

      .featured-blog-content {
        padding: 30px;
      }

      .featured-blog-content .blog-featured-title {
        font-size: 2.4rem;
      }
    }

    /* blog detail page css  */

    .blog-detail-section {
      padding: 80px 0;
      background: linear-gradient(135deg, #FFF7F8 0%, #FFFFFF 100%);
    }

    .blog-detail-container {
      max-width: 900px;
      margin: 0 auto;
      padding: 0 20px;
    }

    .blog-detail-featured {
      width: 100%;
      height: 500px;
      border-radius: 20px;
      overflow: hidden;
      margin-bottom: 40px;
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    }

    .blog-detail-featured img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .blog-detail-meta {
      display: flex;
      align-items: center;
      gap: 30px;
      flex-wrap: wrap;
      margin-bottom: 30px;
      padding-bottom: 25px;
      border-bottom: 2px solid #f0f0f0;
    }

    .blog-detail-meta-item {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 1.5rem;
      color: var(--grey);
    }

    .blog-detail-meta-item i {
      color: var(--main-color);
      font-size: 1.6rem;
    }

    .blog-detail-category {
      display: inline-block;
      background: var(--main-color);
      color: var(--white);
      padding: 8px 20px;
      border-radius: 50px;
      font-size: 1.3rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .blog-detail-content {
      background: var(--white);
      padding: 50px;
      border-radius: 20px;
      box-shadow: 0 5px 30px rgba(0, 0, 0, 0.05);
    }

    .blog-detail-content h1 {
      font-size: 4.2rem;
      color: var(--secondary-color);
      margin-bottom: 30px;
      line-height: 1.3;
      font-weight: 700;
    }

    .blog-detail-content h2 {
      font-size: 3rem;
      color: var(--secondary-color);
      margin: 35px 0 20px;
      font-weight: 600;
      position: relative;
      padding-left: 20px;
    }

    .blog-detail-content h2::before {
      content: '';
      position: absolute;
      left: 0;
      top: 8px;
      width: 5px;
      height: 35px;
      background: var(--main-color);
      border-radius: 3px;
    }

    .blog-detail-content h3 {
      font-size: 2.4rem;
      color: var(--secondary-color);
      margin: 25px 0 15px;
      font-weight: 600;
    }

    .blog-detail-content p {
      font-size: 1.7rem;
      color: var(--grey);
      line-height: 1.9;
      margin-bottom: 20px;
    }

    .blog-detail-content ul,
    .blog-detail-content ol {
      font-size: 1.7rem;
      color: var(--grey);
      line-height: 1.9;
      margin: 20px 0;
      padding-left: 40px;
    }

    .blog-detail-content li {
      margin-bottom: 10px;
    }

    .blog-detail-content img {
      max-width: 100%;
      height: auto;
      border-radius: 15px;
      margin: 30px 0;
      box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    }

    .blog-detail-content blockquote {
      background: linear-gradient(135deg, #FFF7F8 0%, #FFE8D6 100%);
      border-left: 5px solid var(--main-color);
      padding: 25px 30px;
      margin: 30px 0;
      border-radius: 10px;
      font-size: 1.8rem;
      font-style: italic;
      color: var(--secondary-color);
    }

    .blog-detail-footer {
      margin-top: 50px;
      padding-top: 35px;
      border-top: 2px solid #f0f0f0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 20px;
    }

    .blog-detail-tags {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
    }

    .blog-detail-tags h3 {
      font-size: 1.6rem;
      color: var(--secondary-color);
      margin: 0;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .blog-detail-tags i {
      color: var(--main-color);
    }

    .blog-tag {
      display: inline-block;
      background: var(--light-grey);
      color: var(--secondary-color);
      padding: 8px 18px;
      border-radius: 50px;
      font-size: 1.3rem;
      font-weight: 600;
      text-decoration: none;
      transition: all 0.3s ease;
    }

    .blog-tag:hover {
      background: var(--main-color);
      color: var(--white);
      transform: translateY(-2px);
    }

    .blog-detail-share {
      display: flex;
      align-items: center;
      gap: 15px;
    }

    .blog-detail-share h3 {
      font-size: 1.6rem;
      color: var(--secondary-color);
      margin: 0;
    }

    .blog-detail-share i {
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--light-grey);
      color: var(--secondary-color);
      border-radius: 50%;
      font-size: 1.6rem;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .blog-detail-share i:hover {
      background: var(--main-color);
      color: var(--white);
      transform: translateY(-3px);
    }

    .blog-back-btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: var(--white);
      color: var(--main-color);
      padding: 15px 30px;
      border-radius: 50px;
      font-size: 1.5rem;
      font-weight: 600;
      text-decoration: none;
      border: 2px solid var(--main-color);
      transition: all 0.3s ease;
      margin-bottom: 40px;
    }

    .blog-back-btn:hover {
      background: var(--main-color);
      color: var(--white);
      transform: translateX(-5px);
    }

    /* Responsive Design */
    @media (max-width: 768px) {
      .blog-detail-featured {
        height: 300px;
        border-radius: 15px;
      }

      .blog-detail-content {
        padding: 30px 25px;
      }

      .blog-detail-content h1 {
        font-size: 3rem;
      }

      .blog-detail-content h2 {
        font-size: 2.4rem;
      }

      .blog-detail-content p {
        font-size: 1.6rem;
      }

      .blog-detail-footer {
        flex-direction: column;
        align-items: flex-start;
      }
    }