/* =========================================================

   MAHESHWARI SUPPLIERS LEHNGEWALE

   Main Responsive Stylesheet

   Bootstrap 5 + Custom CSS

   ========================================================= */



/* =========================================================

   1. ROOT VARIABLES

   ========================================================= */



:root {

    --maroon: #7f0101;

    --maroon-dark: #7f0101;

    --maroon-light: #7d2340;



    --gold: #fbc304;

    --gold-light: #dfbd68;

    --gold-dark: #fbc304;



    --cream: #fff9f1;

    --cream-dark: #f8eee0;



    --white: #ffffff;

    --black: #171717;

    --dark: #292323;

    --text: #555555;

    --light-border: #eadfce;



    --transition: all 0.35s ease;

    --shadow-sm: 0 5px 20px rgba(73, 29, 38, 0.08);

    --shadow-md: 0 10px 35px rgba(73, 29, 38, 0.12);

    --shadow-lg: 0 18px 50px rgba(73, 29, 38, 0.18);



    --radius: 15px;

}





/* =========================================================

   2. GLOBAL RESET

   ========================================================= */



html {

    scroll-behavior: smooth;

    scroll-padding-top: 90px;

}



body {

    margin: 0;

    padding: 0;

    font-family: "Poppins", sans-serif;

    font-size: 15px;

    line-height: 1.75;

    color: var(--text);

    background: var(--white);

    overflow-x: hidden;

}



* {

    box-sizing: border-box;

}



img {

    max-width: 100%;

    display: block;

}



a {

    color: inherit;

    text-decoration: none;

    transition: var(--transition);

}



button,

a {

    -webkit-tap-highlight-color: transparent;

}



p:last-child {

    margin-bottom: 0;

}



::selection {

    background: var(--maroon);

    color: var(--white);

}





/* =========================================================

   3. TYPOGRAPHY

   ========================================================= */



.playfair {

    font-family: "Playfair Display", serif;

}



h1,

h2,

h3,

h4,

h5,

h6 {

    color: var(--dark);

    line-height: 1.25;

}



h1,

h2,

h3 {

    font-family: "Playfair Display", serif;

}



h2 {

    font-size: 42px;

}



h3 {

    font-size: 32px;

}



.gold-text {

    color: var(--gold) !important;

}



.brand-maroon {

    color: var(--maroon);

}



.brand-gold {

    color: var(--gold);

}





/* =========================================================

   4. COMMON SECTION

   ========================================================= */



   section{

    overflow: hidden;

   }

.section-padding {

    padding: 85px 0;

}



.cream-bg {

    background: var(--cream);

}



.maroon-bg {

    background: var(--maroon);

}



.gold-divider {

    position: relative;

    width: 85px;

    height: 3px;

    margin: 16px 0;

    background: #fbc304;

    border-radius: 50px;

}



.gold-divider::after {

    content: "✦";

    position: absolute;

    left: 50%;

    top: 50%;

    transform: translate(-50%, -50%);

    background: inherit;

    color: #fbc304;

    font-size: 13px;

    padding: 0 8px;

}



.text-center .gold-divider {

    margin-left: auto;

    margin-right: auto;

}





/* =========================================================

   5. TOP HEADER

   ========================================================= */



.top-header {

    min-height: 40px;

    background: var(--maroon);

    color: rgba(255, 255, 255, 0.92);

    font-size: 12px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.12);

}



.top-header .container {

    min-height: 40px;

}



.top-header span {

    white-space: nowrap;

}



.gold-icon {

    color: var(--gold-light);

    margin-right: 5px;

}



.social-top a {

    color: var(--white);

    font-size: 14px;

}



.social-top a:hover {

    color: var(--gold-light);

    transform: translateY(-2px);

}





/* =========================================================

   6. NAVBAR

   ========================================================= */



.navbar {

    min-height: 78px;

    background: #7f0101;

    z-index: 1050;

}



.navbar-brand {

    font-family: "Playfair Display", serif;

    font-size: 21px;

    line-height: 1.1;

    letter-spacing: 0.2px;

    max-width: 360px;

}

/* ==============================

   RESPONSIVE NAVBAR LOGO

================================ */



.navbar-brand {

    display: inline-flex;

    align-items: center;

    padding: 0;

    margin: 0;

    line-height: 1;

}



.navbar-brand img {

    width: 180px;

    height: auto;

    max-width: 100%;

    display: block;

    object-fit: contain;

}



/* Tablet */

@media (max-width: 991px) {

    .navbar-brand img {

        width: 155px;

    }

}



/* Mobile */

@media (max-width: 767px) {

    .navbar-brand img {

        width: 135px;

    }

}



/* Small Mobile */

@media (max-width: 480px) {

    .navbar-brand img {

        width: 115px;

    }

}



.navbar-brand:hover {

    opacity: 0.9;

}



.navbar-nav {

    gap: 5px;

}



.navbar .nav-link {

    position: relative;

    color: #fbc304 !important;

    font-size: 16px;

    font-weight: 600;

    padding: 27px 13px !important;

}



.navbar .nav-link::after {

    content: "";

    position: absolute;

    left: 13px;

    right: 13px;

    bottom: 18px;

    height: 2px;

    background: var(--gold);

    transform: scaleX(0);

    transform-origin: center;

    transition: var(--transition);

}



.navbar .nav-link:hover,

.navbar .nav-link.active {

    color: #fbc304;

}



.navbar .nav-link:hover::after,

.navbar .nav-link.active::after {

    transform: scaleX(1);

}



.navbar-toggler {

    padding: 7px 9px;

    box-shadow: none !important;

}



.navbar-toggler:focus {

    box-shadow: none !important;

}



.navbar-toggler-icon {

    width: 24px;

    height: 24px;

}

.navbar-brand img {

    height: 100px;

    width: auto;

    max-width: 180px;

    display: block;

}

.navbar-toggler-icon {

    display: inline-block;

    width: 1.5em;

    height: 1.5em;

    vertical-align: middle;

    background-image: var(--bs-navbar-toggler-icon-bg);

    background-repeat: no-repeat;

    background-position: center;

    background-color: #fbc304;

    border-radius: 5px;

    background-size: 100%;

}



@media (max-width: 991px) {

    .navbar-brand img {

        height: 80px;

        max-width: 155px;

    }

}



@media (max-width: 767px) {

    .navbar-brand img {

        height: 42px;

        max-width: 135px;

    }

}



@media (max-width: 480px) {

    .navbar-brand img {

        height: 60px;

        max-width: 115px;

    }

}





/* =========================================================

   7. BUTTONS

   ========================================================= */



.btn {

    font-family: "Poppins", sans-serif;

    font-weight: 600;

    transition: var(--transition);

}



.btn-gold {

    color: var(--white) !important;

    background: linear-gradient(135deg,

            var(--gold),

            var(--gold-dark));

    border: 1px solid var(--gold);

    box-shadow: 0 7px 20px rgba(200, 155, 60, 0.22);

}



.btn-gold:hover {

    color: var(--white) !important;

    background: linear-gradient(135deg,

            var(--gold-dark),

            var(--gold));

    border-color: var(--gold-dark);

    transform: translateY(-2px);

    box-shadow: 0 10px 25px rgba(200, 155, 60, 0.35);

}



.btn-outline-gold {

    color: var(--maroon) !important;

    border: 1px solid var(--gold);

    background: transparent;

}



.btn-outline-gold:hover {

    color: var(--white) !important;

    background: var(--gold);

    border-color: var(--gold);

    transform: translateY(-2px);

}



.btn-outline-light:hover {

    color: var(--maroon) !important;

    background: var(--white);

}





/* =========================================================

   8. HERO SWIPER

   ========================================================= */



.hero-swiper {

    position: relative;

    width: 100%;

    overflow: hidden;

}



.mySwiperHero {

    width: 100%;

    height: 690px;

}



.mySwiperHero .swiper-slide {

    position: relative;

    display: flex;

    align-items: center;

    background-size: cover;

    background-position: center center;

    background-repeat: no-repeat;

}



.hero-overlay {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    background:

        linear-gradient(90deg,

            rgba(40, 8, 18, 0.86) 0%,

            rgba(45, 10, 20, 0.65) 38%,

            rgba(45, 10, 20, 0.18) 75%,

            rgba(45, 10, 20, 0.12) 100%);

}



.hero-content {

    max-width: 680px;

    padding: 30px 0;

}



.hero-content h1 {

    color: var(--white);

    font-size: clamp(42px, 5vw, 70px);

    line-height: 1.08;

    margin-bottom: 20px;

    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);

}



.hero-content .lead {

    max-width: 600px;

    color: rgba(255, 255, 255, 0.92);

    font-size: 17px;

    line-height: 1.8;

}



.mySwiperHero .swiper-pagination {

    bottom: 28px;

}



.mySwiperHero .swiper-pagination-bullet {

    width: 9px;

    height: 9px;

    background: var(--white);

    opacity: 0.55;

}



.mySwiperHero .swiper-pagination-bullet-active {

    width: 28px;

    border-radius: 20px;

    opacity: 1;

    background: var(--gold);

}



.hero-swiper {

    width: 100%;

    overflow: hidden;

}



.mySwiperHero {

    width: 100%;

    height: 700px;

}



.mySwiperHero .swiper-slide {

    height: 700px;

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    position: relative;

}



.hero-overlay {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    background: linear-gradient(

        90deg,

        rgba(0, 0, 0, 0.75),

        rgba(0, 0, 0, 0.35)

    );

}



.hero-content {

    max-width: 700px;

    position: relative;

    z-index: 5;

}



.mySwiperHero .swiper-pagination {

    z-index: 10;

    bottom: 25px;

}



.mySwiperHero .swiper-button-next,

.mySwiperHero .swiper-button-prev {

    color: #fff;

    z-index: 10;

}



.mySwiperHero .swiper-pagination-bullet {

    background: #fff;

    opacity: 0.7;

}



.mySwiperHero .swiper-pagination-bullet-active {

    background: #d4af37;

    opacity: 1;

}



@media (max-width: 767px) {

    .mySwiperHero,

    .mySwiperHero .swiper-slide {

        height: 600px;

    }



    .hero-content h1 {

        font-size: 36px;

        line-height: 1.15;

    }



    .hero-content p {

        font-size: 16px;

    }



    .mySwiperHero .swiper-button-next,

    .mySwiperHero .swiper-button-prev {

        display: none;

    }

}



/* =========================================================

   9. ABOUT PREVIEW

   ========================================================= */



.about-preview {

    background: var(--white);

}



.about-preview img {

    width: 100%;

    height: 500px;

    object-fit: cover;

}



.about-preview h2 {

    margin-bottom: 5px;

}



.about-preview p {

    color: var(--text);

}



.about-preview .row .col-sm-6 {

    font-size: 14px;

    font-weight: 500;

    color: #413739;

}





/* =========================================================

   10. SERVICES

   ========================================================= */



.services-preview {

    position: relative;

}



.service-card {

    position: relative;

    overflow: hidden;

    background: var(--white);

    border-radius: var(--radius) !important;

    transition: var(--transition);

}



.service-card:hover {

    transform: translateY(-8px);

    box-shadow: var(--shadow-lg) !important;

}



.service-card img {

    width: 100%;

    height: 270px;

    object-fit: cover;

    transition: transform 0.6s ease;

}



.service-card:hover img {

    transform: scale(1.06);

}



.service-card .card-body {

    padding: 25px 20px;

}



.service-card .card-title {

    color: var(--maroon);

    font-family: "Playfair Display", serif;

    font-size: 21px;

}



.service-card .card-text {

    color: var(--text);

    min-height: 67px;

}





/* =========================================================

   11. WHY CHOOSE US

   ========================================================= */



.why-choose {

    background: var(--white);

}



.why-choose img {

    width: 100%;

    height: 450px;

    object-fit: cover;

}



.why-choose ul {

    padding-left: 0;

}



.why-choose li {

    margin-bottom: 13px;

    font-size: 15px;

    font-weight: 500;

    color: #443a3c;

}



.why-choose li i {

    font-size: 16px;

}





/* =========================================================

   12. PROCESS

   ========================================================= */



.process {

    position: relative;

    overflow: hidden;

}



.process-step {

    position: relative;

    height: 100%;

    padding: 25px 15px;

}



.step-number {

    position: relative;

    display: inline-flex;

    justify-content: center;

    align-items: center;

    width: 70px;

    height: 70px;

    border: 2px solid var(--gold);

    border-radius: 50%;

    color: var(--white);

    background: var(--maroon);

    font-family: "Playfair Display", serif;

    font-size: 26px;

    font-weight: 700;

    box-shadow: 0 8px 25px rgba(100, 21, 43, 0.15);

}



.process-step h5 {

    color: var(--maroon);

    font-family: "Playfair Display", serif;

    font-size: 19px;

}



.process-step p {

    font-size: 13px;

    color: var(--text);

}





/* =========================================================

   13. GALLERY

   ========================================================= */



.gallery-preview {

    background: var(--white);

}



.gallery-preview a {

    position: relative;

    display: block;

    overflow: hidden;

    border-radius: 10px;

}



.gallery-img {

    width: 100%;

    height: 250px;

    object-fit: cover;

    transition: transform 0.55s ease, filter 0.4s ease;

}



.gallery-preview a::after {

    content: "\F4F4";

    font-family: "bootstrap-icons";

    position: absolute;

    left: 50%;

    top: 50%;

    display: flex;

    justify-content: center;

    align-items: center;

    width: 45px;

    height: 45px;

    color: var(--white);

    background: rgba(100, 21, 43, 0.88);

    border: 1px solid var(--gold);

    border-radius: 50%;

    opacity: 0;

    transform: translate(-50%, -50%) scale(0.7);

    transition: var(--transition);

}



.gallery-preview a:hover .gallery-img {

    transform: scale(1.08);

    filter: brightness(0.78);

}



.gallery-preview a:hover::after {

    opacity: 1;

    transform: translate(-50%, -50%) scale(1);

}

/* GLightbox Fix */

.glightbox-container .gclose {

    position: fixed !important;

    top: 20px !important;

    right: 20px !important;

    width: 45px !important;

    height: 45px !important;

    z-index: 999999 !important;

    opacity: 1 !important;

    visibility: visible !important;

    display: block !important;

}



.glightbox-container .gclose svg {

    width: 28px !important;

    height: 28px !important;

}



.glightbox-container .gnext,

.glightbox-container .gprev {

    z-index: 999999 !important;

    opacity: 1 !important;

    visibility: visible !important;

}



.glightbox-clean .gclose {

    background: rgba(0, 0, 0, 0.65) !important;

    border-radius: 50%;

}



.glightbox-clean .gclose svg {

    fill: #fff !important;

}



.glightbox-clean .gnext,

.glightbox-clean .gprev {

    background: rgba(0, 0, 0, 0.65) !important;

    border-radius: 50%;

}



.glightbox-clean .gnext svg,

.glightbox-clean .gprev svg {

    fill: #fff !important;

}

/* ==========================================

   WEDDING GALLERY CAROUSEL

========================================== */



.gallery-preview {

    background: #fff;

    overflow: hidden;

}



.weddingGallerySwiper {

    width: 100%;

    padding: 10px 50px 60px;

}



.weddingGallerySwiper .swiper-slide {

    height: auto;

}





/* Gallery Item */



.gallery-item {

    position: relative;

    width: 100%;

    height: 330px;

    overflow: hidden;

    border-radius: 15px;

    background: #f5f1e8;

    cursor: pointer;

}





/* Image */



.gallery-carousel-img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

    transition: transform 0.6s ease;

}





/* Hover Zoom */



.gallery-item:hover .gallery-carousel-img {

    transform: scale(1.08);

}





/* Overlay */



.gallery-overlay {

    position: absolute;

    inset: 0;

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    padding: 20px;

    background: linear-gradient(

        to top,

        rgba(0, 0, 0, 0.75),

        rgba(0, 0, 0, 0.05)

    );

    opacity: 0;

    transition: opacity 0.4s ease;

}





/* Show Overlay */



.gallery-item:hover .gallery-overlay {

    opacity: 1;

}





/* Gallery Title */



.gallery-overlay span {

    color: #fff;

    font-size: 18px;

    font-weight: 600;

    font-family: "Playfair Display", serif;

}





/* Search Icon */



.gallery-overlay i {

    width: 42px;

    height: 42px;

    border-radius: 50%;

    background: #d4af37;

    color: #fff;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 16px;

}





/* ==========================================

   NAVIGATION

========================================== */



.gallery-prev,

.gallery-next {

    width: 45px;

    height: 45px;

    background: #d4af37;

    border-radius: 50%;

    transition: all 0.3s ease;

}



.gallery-prev:hover,

.gallery-next:hover {

    background: #b8941f;

    transform: scale(1.08);

}



.gallery-prev::after,

.gallery-next::after {

    color: #fff;

    font-size: 18px;

    font-weight: bold;

}





/* ==========================================

   PAGINATION

========================================== */



.gallery-pagination {

    bottom: 10px !important;

}



.gallery-pagination .swiper-pagination-bullet {

    width: 9px;

    height: 9px;

    background: #d4af37;

    opacity: 0.35;

    transition: all 0.3s ease;

}



.gallery-pagination .swiper-pagination-bullet-active {

    width: 28px;

    border-radius: 10px;

    opacity: 1;

}





/* ==========================================

   GLIGHTBOX

========================================== */



.glightbox-clean .gclose {

    width: 45px !important;

    height: 45px !important;

    top: 20px !important;

    right: 20px !important;

    background: rgba(0, 0, 0, 0.7) !important;

    border-radius: 50%;

    opacity: 1 !important;

}



.glightbox-clean .gclose svg {

    width: 25px !important;

    height: 25px !important;

    fill: #fff !important;

}



.glightbox-clean .gnext,

.glightbox-clean .gprev {

    background: rgba(0, 0, 0, 0.65) !important;

    border-radius: 50%;

}



.glightbox-clean .gnext svg,

.glightbox-clean .gprev svg {

    fill: #fff !important;

}





/* ==========================================

   TABLET

========================================== */



@media (max-width: 991px) {



    .weddingGallerySwiper {

        padding-left: 40px;

        padding-right: 40px;

    }



    .gallery-item {

        height: 300px;

    }



}





/* ==========================================

   MOBILE

========================================== */



@media (max-width: 767px) {



    .weddingGallerySwiper {

        padding-left: 10px;

        padding-right: 10px;

        padding-bottom: 55px;

    }



    .gallery-item {

        height: 320px;

    }



    .gallery-overlay {

        opacity: 1;

    }



    .gallery-overlay span {

        font-size: 16px;

    }



    .gallery-prev,

    .gallery-next {

        width: 38px;

        height: 38px;

    }



    .gallery-prev::after,

    .gallery-next::after {

        font-size: 15px;

    }



}





/* Small Mobile */



@media (max-width: 480px) {



    .gallery-item {

        height: 300px;

    }



    .gallery-prev,

    .gallery-next {

        display: none;

    }



}

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



/* ==========================================

   WEDDING GALLERY

========================================== */



.gallery-preview {

    width: 100%;

    padding: 80px 0;

    background: #fff;

    overflow: hidden;

}



.gallery-preview .container {

    max-width: 1320px;

}



/* Gallery Swiper */

.weddingGallerySwiper {

    width: 100%;

    position: relative;

    padding: 10px 55px 60px;

    overflow: hidden;

}



/* IMPORTANT:

   Do not use width:100% on swiper-slide

*/

.weddingGallerySwiper .swiper-slide {

    width: auto;

    height: auto;

    flex-shrink: 0;

}



/* Gallery Item */

.gallery-item {

    position: relative;

    width: 100%;

    height: 360px;

    overflow: hidden;

    border-radius: 14px;

    cursor: pointer;

    background: #f5f1e8;

}



/* Image */

.gallery-carousel-img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

    transition: transform 0.5s ease;

}



/* Image Hover */

.gallery-item:hover .gallery-carousel-img {

    transform: scale(1.06);

}



/* Overlay */

.gallery-overlay {

    position: absolute;

    left: 0;

    right: 0;

    bottom: 0;

    padding: 25px 20px 18px;

    display: flex;

    align-items: center;

    justify-content: space-between;



    background: linear-gradient(

        to top,

        rgba(0, 0, 0, 0.75),

        transparent

    );



    opacity: 0;

    transition: opacity 0.35s ease;

}



/* Show overlay */

.gallery-item:hover .gallery-overlay {

    opacity: 1;

}



/* Title */

.gallery-overlay span {

    color: #fff;

    font-family: "Playfair Display", serif;

    font-size: 18px;

    font-weight: 600;

}



/* Search Icon */

.gallery-overlay i {

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;



    background: #d4af37;

    color: #fff;

    border-radius: 50%;

    font-size: 15px;

}





/* ==========================================

   SWIPER ARROWS

========================================== */



.weddingGallerySwiper .swiper-button-next,

.weddingGallerySwiper .swiper-button-prev {

    width: 45px;

    height: 45px;



    background: #d4af37;

    border-radius: 50%;



    top: 48%;



    margin-top: -22px;

}



.weddingGallerySwiper .swiper-button-next {

    right: 5px;

}



.weddingGallerySwiper .swiper-button-prev {

    left: 5px;

}



.weddingGallerySwiper .swiper-button-next::after,

.weddingGallerySwiper .swiper-button-prev::after {

    font-size: 17px;

    font-weight: 700;

    color: #fff;

}





/* ==========================================

   PAGINATION

========================================== */



.weddingGallerySwiper .swiper-pagination {

    bottom: 8px !important;

}



.weddingGallerySwiper .swiper-pagination-bullet {

    width: 9px;

    height: 9px;

    background: #d4af37;

    opacity: 0.35;

}



.weddingGallerySwiper .swiper-pagination-bullet-active {

    width: 26px;

    border-radius: 10px;

    opacity: 1;

}





/* ==========================================

   TABLET

========================================== */



@media (max-width: 1199px) {



    .gallery-item {

        height: 330px;

    }



    .weddingGallerySwiper {

        padding-left: 50px;

        padding-right: 50px;

    }

}





/* ==========================================

   MOBILE

========================================== */



@media (max-width: 767px) {



    .gallery-preview {

        padding: 60px 0;

    }



    .weddingGallerySwiper {

        padding: 10px 35px 55px;

    }



    .gallery-item {

        height: 330px;

    }



    .weddingGallerySwiper .swiper-button-next,

    .weddingGallerySwiper .swiper-button-prev {

        width: 38px;

        height: 38px;

    }



    .weddingGallerySwiper .swiper-button-next::after,

    .weddingGallerySwiper .swiper-button-prev::after {

        font-size: 14px;

    }



    .gallery-overlay {

        opacity: 1;

    }

}





/* ==========================================

   SMALL MOBILE

========================================== */



@media (max-width: 480px) {



    .weddingGallerySwiper {

        padding-left: 10px;

        padding-right: 10px;

    }



    .gallery-item {

        height: 300px;

    }



    .weddingGallerySwiper .swiper-button-next,

    .weddingGallerySwiper .swiper-button-prev {

        display: none;

    }

}

/* ==========================================

   GLIGHTBOX FIX

========================================== */



.glightbox-container {

    z-index: 999999 !important;

}



.glightbox-container .gslide-image {

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

}



.glightbox-container .gslide-image img {

    display: block !important;

    width: auto !important;

    max-width: 90vw !important;

    max-height: 85vh !important;

    height: auto !important;

    object-fit: contain !important;

    background: transparent !important;

    padding: 0 !important;

    margin: 0 auto !important;

}



.glightbox-container .gslide-description {

    background: rgba(0, 0, 0, 0.75) !important;

    color: #fff !important;

}



.glightbox-container .gclose {

    position: fixed !important;

    top: 20px !important;

    right: 25px !important;

    width: 45px !important;

    height: 45px !important;

    z-index: 9999999 !important;

    opacity: 1 !important;

    visibility: visible !important;

}



.glightbox-container .gclose svg {

    width: 25px !important;

    height: 25px !important;

    fill: #fff !important;

}



.glightbox-container .gnext,

.glightbox-container .gprev {

    z-index: 9999999 !important;

    opacity: 1 !important;

    visibility: visible !important;

}

.gallery-preview {

    width: 100%;

    overflow: hidden;

    background: #fff;

}



.weddingGallerySwiper {

    width: 100%;

    padding: 10px 50px 60px;

    overflow: hidden;

}



.weddingGallerySwiper .swiper-slide {

    flex-shrink: 0;

}



.weddingGallerySwiper .swiper-slide > a {

    display: block;

    width: 100%;

    overflow: hidden;

    border-radius: 15px;

}



.gallery-carousel-img {

    width: 100%;

    height: 330px;

    display: block;

    object-fit: cover;

    object-position: center;

    border-radius: 15px;

    transition: transform 0.5s ease;

}



.weddingGallerySwiper .swiper-slide:hover .gallery-carousel-img {

    transform: scale(1.05);

}





/* =========================================================

   14. TESTIMONIALS

   ========================================================= */



.testimonials {

    position: relative;

}



.testimonial-card {

    min-height: 190px;

    border: 1px solid rgba(200, 155, 60, 0.12);

    transition: var(--transition);

}



.testimonial-card:hover {

    transform: translateY(-5px);

    box-shadow: var(--shadow-md) !important;

}



.testimonial-card .stars {

    font-size: 18px;

    letter-spacing: 3px;

}



.testimonial-card p {

    color: #5d5355;

    font-size: 14px;

}



.testimonial-card h6 {

    color: var(--maroon);

}



.mySwiperTestimonials {

    padding: 5px 5px 50px;

}



.mySwiperTestimonials .swiper-pagination-bullet {

    background: var(--maroon);

    opacity: 0.4;

}



.mySwiperTestimonials .swiper-pagination-bullet-active {

    background: var(--gold);

    opacity: 1;

}





/* =========================================================

   15. LOCATIONS

   ========================================================= */



.locations {

    background:

        linear-gradient(rgba(255, 250, 243, 0.94),

            rgba(255, 250, 243, 0.94));

}



.location-card {

    position: relative;

    overflow: hidden;

    border: 1px solid var(--light-border);

    transition: var(--transition);

}



.location-card::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 4px;

    background: var(--gold);

}



.location-card:hover {

    transform: translateY(-8px);

    box-shadow: var(--shadow-lg) !important;

}



.location-card h5 {

    color: var(--maroon);

    font-family: "Playfair Display", serif;

    font-size: 23px;

    margin-bottom: 15px;

}



.location-card p {

    color: var(--text);

    font-size: 13px;

}



.location-card .bi-telephone {

    font-size: 13px;

}





/* =========================================================

   16. CTA

   ========================================================= */



.cta-section {

    position: relative;

    overflow: hidden;

    background:

        radial-gradient(circle at 10% 50%,

            rgba(200, 155, 60, 0.16),

            transparent 30%),

        radial-gradient(circle at 90% 50%,

            rgba(200, 155, 60, 0.12),

            transparent 30%),

        var(--maroon);

}



.cta-section::before {

    content: "";

    position: absolute;

    inset: 15px;

    border: 1px solid rgba(223, 189, 104, 0.3);

    pointer-events: none;

}



.cta-section h2 {

    position: relative;

    color: var(--white);

    font-size: 40px;

}



.cta-section p {

    position: relative;

    max-width: 800px;

    margin: 0 auto;

    color: rgba(255, 255, 255, 0.86);

}





/* =========================================================

   17. FOOTER

   ========================================================= */



.footer {

    position: relative;

    background: var(--maroon-dark);

}



.footer h5 {

    font-family: "Playfair Display", serif;

    font-size: 18px;

}



.footer p,

.footer li {

    color: rgba(255, 255, 255, 0.72);

}



.footer li {

    margin-bottom: 7px;

}



.footer li a {

    color: rgba(255, 255, 255, 0.75) !important;

}



.footer li a:hover {

    color: var(--gold-light) !important;

    padding-left: 4px;

}



.footer .social-footer a {

    display: flex;

    justify-content: center;

    align-items: center;

    width: 34px;

    height: 34px;

    border: 1px solid rgba(223, 189, 104, 0.45);

    border-radius: 50%;

    color: var(--white);

}



.footer .social-footer a:hover {

    color: var(--maroon-dark) !important;

    background: var(--gold);

    border-color: var(--gold);

    transform: translateY(-3px);

}



.border-gold {

    border-color: rgba(223, 189, 104, 0.35) !important;

}





/* =========================================================

   18. FLOATING BUTTONS

   ========================================================= */



.floating-buttons {

    position: fixed;

    right: 20px;

    bottom: 25px;

    z-index: 1090;

    display: flex;

    flex-direction: column;

    gap: 12px;

}



.float-btn {

    position: relative;

    display: flex;

    justify-content: center;

    align-items: center;

    width: 52px;

    height: 52px;

    border-radius: 50%;

    color: var(--white) !important;

    font-size: 20px;

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);

    transition: var(--transition);

}



.float-btn:hover {

    color: var(--white) !important;

    transform: translateY(-4px) scale(1.05);

}



.call-btn {

    background: var(--maroon);

    border: 2px solid var(--gold);

}



.whatsapp-btn {

    background: #25d366;

    border: 2px solid var(--white);

}





/* =========================================================

   19. TOOLTIP

   ========================================================= */



.tooltip-inner {

    background: var(--maroon);

    font-family: "Poppins", sans-serif;

    font-size: 11px;

    padding: 6px 10px;

}



.bs-tooltip-top .tooltip-arrow::before {

    border-top-color: var(--maroon);

}





/* =========================================================

   20. GLIGHTBOX

   ========================================================= */



.glightbox-clean .gslide-description {

    background: var(--maroon);

}



.glightbox-clean .gdesc-inner {

    padding: 15px;

}



.glightbox-clean .gslide-title {

    font-family: "Playfair Display", serif;

}





/* =========================================================

   21. SCROLLBAR

   ========================================================= */



::-webkit-scrollbar {

    width: 8px;

}



::-webkit-scrollbar-track {

    background: #f5eee6;

}



::-webkit-scrollbar-thumb {

    background: var(--maroon);

    border-radius: 20px;

}



::-webkit-scrollbar-thumb:hover {

    background: var(--gold-dark);

}





/* =========================================================

   22. ANIMATIONS

   ========================================================= */



@keyframes fadeUp {

    from {

        opacity: 0;

        transform: translateY(25px);

    }



    to {

        opacity: 1;

        transform: translateY(0);

    }

}



@keyframes pulseButton {

    0% {

        box-shadow: 0 0 0 0 rgba(200, 155, 60, 0.5);

    }



    70% {

        box-shadow: 0 0 0 12px rgba(200, 155, 60, 0);

    }



    100% {

        box-shadow: 0 0 0 0 rgba(200, 155, 60, 0);

    }

}



.btn-gold {

    animation: none;

}



.float-btn {

    animation: pulseButton 2.5s infinite;

}





/* =========================================================

   23. LARGE DESKTOP

   ========================================================= */



@media (min-width: 1400px) {



    .container {

        max-width: 1240px;

    }



    .mySwiperHero {

        height: 740px;

    }



    .hero-content {

        max-width: 720px;

    }



    .gallery-img {

        height: 350px;

    }

}





/* =========================================================

   24. LAPTOP

   ========================================================= */



@media (max-width: 1199.98px) {



    .navbar-brand {

        font-size: 18px;

        max-width: 300px;

    }



    .navbar .nav-link {

        padding-left: 8px !important;

        padding-right: 8px !important;

        font-size: 13px;

    }



    .navbar .nav-link::after {

        left: 8px;

        right: 8px;

    }



    .mySwiperHero {

        height: 620px;

    }



    .hero-content h1 {

        font-size: 54px;

    }



    .section-padding {

        padding: 75px 0;

    }



    h2 {

        font-size: 38px;

    }



    .service-card img {

        height: 240px;

    }



    .gallery-img {

        height: 220px;

    }

}





/* =========================================================

   25. TABLET

   ========================================================= */



@media (max-width: 991.98px) {



    .top-header {

        display: none !important;

    }



    .navbar {

        min-height: 70px;

    }



    .navbar-brand {

        font-size: 18px;

        max-width: 280px;

    }



    .navbar-collapse {

        padding: 15px 0 20px;

        border-top: 1px solid var(--light-border);

        margin-top: 10px;

    }



    .navbar-nav {

        gap: 0;

    }



    .navbar .nav-link {

        padding: 11px 5px !important;

        border-bottom: 1px solid rgba(100, 21, 43, 0.07);

    }



    .navbar .nav-link::after {

        display: none;

    }



    .navbar .nav-item:last-child {

        margin-top: 12px;

        margin-left: 0 !important;

    }



    .navbar .nav-item:last-child .btn {

        display: block;

        width: 100%;

        padding: 10px 20px;

    }



    .mySwiperHero {

        height: 560px;

    }



    .hero-overlay {

        background:

            linear-gradient(90deg,

                rgba(40, 8, 18, 0.86),

                rgba(40, 8, 18, 0.48));

    }



    .hero-content {

        max-width: 600px;

    }



    .hero-content h1 {

        font-size: 48px;

    }



    .hero-content .lead {

        font-size: 15px;

    }



    .about-preview img {

        height: 430px;

    }



    .why-choose img {

        height: 400px;

    }



    .gallery-img {

        height: 230px;

    }



    .location-card {

        padding: 30px 20px !important;

    }



    .cta-section h2 {

        font-size: 34px;

    }

}



/* =========================================================

   MAHESHWARI SUPPLIERS LEHNGEWALE

   ABOUT US PAGE CSS

   Bootstrap 5 + Custom CSS

   ========================================================= */



/* =========================

   ROOT VARIABLES

========================= */







/* =========================

   BUTTONS

========================= */



.btn-gold {

    color: var(--white) !important;

    background: linear-gradient(

        135deg,

        var(--gold),

        var(--gold-dark)

    );

    border: 1px solid var(--gold);

    font-weight: 600;

    box-shadow: 0 8px 22px rgba(200, 155, 60, 0.2);

}



.btn-gold:hover {

    color: var(--white) !important;

    transform: translateY(-2px);

    box-shadow: 0 12px 30px rgba(200, 155, 60, 0.35);

}



.btn-outline-gold {

    color: var(--maroon) !important;

    border: 1px solid var(--gold);

    background: transparent;

}



.btn-outline-gold:hover {

    color: var(--white) !important;

    background: var(--gold);

    border-color: var(--gold);

}





/* =========================================================

   ABOUT PAGE HERO

========================================================= */



.about-hero {

    position: relative;

    min-height: 430px;

    display: flex;

    align-items: center;

    background-image:

        linear-gradient(

            90deg,

            rgba(54, 7, 21, 0.88),

            rgba(71, 12, 30, 0.68),

            rgba(60, 8, 23, 0.35)

        ),

        url("../images/about/about-banner.jpg");



    background-position: center;

    background-size: cover;

    background-repeat: no-repeat;

}



.about-hero-content {

    position: relative;

    z-index: 2;

    width: 100%;

    color: var(--white);

    text-align: center;

}



.about-hero-content .small-title {

    display: inline-block;

    margin-bottom: 12px;

    color: var(--gold-light);

    font-size: 13px;

    font-weight: 600;

    letter-spacing: 4px;

    text-transform: uppercase;

}



.about-hero-content h1 {

    color: var(--white);

    font-size: clamp(42px, 5vw, 65px);

    line-height: 1.15;

    margin-bottom: 15px;

}



.about-hero-content p {

    max-width: 750px;

    margin: 0 auto;

    color: rgba(255, 255, 255, 0.9);

    font-size: 17px;

}



.about-breadcrumb {

    margin-top: 20px;

}



.about-breadcrumb a {

    color: var(--gold-light);

}



.about-breadcrumb span {

    color: rgba(255, 255, 255, 0.7);

    margin: 0 8px;

}





/* =========================================================

   MAIN ABOUT SECTION

========================================================= */



.about-main {

    background: var(--white);

}



.about-image-wrapper {

    position: relative;

    padding: 0 25px 25px 0;

}



.about-main-image {

    position: relative;

    width: 100%;

    height: 560px;

    object-fit: cover;

    border-radius: 18px;

    box-shadow: var(--shadow-lg);

}



.about-image-wrapper::after {

    content: "";

    position: absolute;

    left: 25px;

    bottom: 0;

    width: 75%;

    height: 75%;

    border: 2px solid var(--gold);

    border-radius: 18px;

    z-index: -1;

}



.about-floating-card {

    position: absolute;

    right: 0;

    bottom: 40px;

    width: 190px;

    padding: 20px;

    background: var(--maroon);

    color: var(--white);

    border-radius: 12px;

    border: 2px solid var(--gold);

    box-shadow: var(--shadow-md);

    text-align: center;

}



.about-floating-card i {

    display: block;

    margin-bottom: 7px;

    color: var(--gold-light);

    font-size: 30px;

}



.about-floating-card strong {

    display: block;

    font-family: "Playfair Display", serif;

    font-size: 17px;

}



.about-content .section-label {

    display: block;

    margin-bottom: 8px;

    color: var(--gold-dark);

    font-size: 13px;

    font-weight: 600;

    letter-spacing: 2px;

    text-transform: uppercase;

}



.about-content h2 {

    color: var(--maroon);

    font-size: 43px;

    line-height: 1.2;

}



.about-content p {

    color: var(--text);

    font-size: 14px;

}



.about-feature-list {

    margin: 25px 0 0;

    padding: 0;

    list-style: none;

}



.about-feature-list li {

    display: flex;

    align-items: flex-start;

    gap: 10px;

    margin-bottom: 13px;

    color: #453b3d;

    font-size: 14px;

    font-weight: 500;

}



.about-feature-list i {

    flex-shrink: 0;

    color: var(--gold);

    font-size: 17px;

    margin-top: 2px;

}





/* =========================================================

   SPECIALITY SECTION

========================================================= */



.speciality-section {

    position: relative;

    background: var(--cream);

    overflow: hidden;

}



.speciality-section::before {

    content: "✦";

    position: absolute;

    left: 4%;

    top: 15%;

    color: rgba(200, 155, 60, 0.12);

    font-size: 100px;

}



.speciality-section::after {

    content: "✦";

    position: absolute;

    right: 4%;

    bottom: 10%;

    color: rgba(200, 155, 60, 0.12);

    font-size: 100px;

}



.speciality-card {

    position: relative;

    height: 100%;

    padding: 35px 25px;

    background: var(--white);

    border: 1px solid var(--border);

    border-radius: 15px;

    box-shadow: var(--shadow-sm);

    text-align: center;

    overflow: hidden;

    transition: var(--transition);

}



.speciality-card:hover {

    transform: translateY(-8px);

    border-color: rgba(200, 155, 60, 0.55);

    box-shadow: var(--shadow-lg);

}



.speciality-number {

    position: absolute;

    top: 12px;

    right: 18px;

    color: rgba(100, 21, 43, 0.08);

    font-family: "Playfair Display", serif;

    font-size: 50px;

    font-weight: 700;

}



.speciality-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 68px;

    height: 68px;

    margin: 0 auto 20px;

    color: var(--white);

    background: var(--maroon);

    border: 2px solid var(--gold);

    border-radius: 50%;

    font-size: 26px;

    transition: var(--transition);

}



.speciality-card:hover .speciality-icon {

    color: var(--maroon);

    background: var(--gold);

    transform: rotateY(180deg);

}



.speciality-card h4 {

    color: var(--maroon);

    font-size: 22px;

}



.speciality-card p {

    margin-bottom: 0;

    font-size: 13px;

}





/* =========================================================

   COLLECTION SECTION

========================================================= */



.collection-section {

    background: var(--white);

}



.collection-card {

    height: 100%;

    background: var(--white);

    border: 1px solid var(--border);

    border-radius: 15px;

    overflow: hidden;

    box-shadow: var(--shadow-sm);

    transition: var(--transition);

}



.collection-card:hover {

    transform: translateY(-7px);

    box-shadow: var(--shadow-md);

}



.collection-image {

    position: relative;

    overflow: hidden;

}



.collection-image img {

    width: 100%;

    height: 275px;

    object-fit: cover;

    transition: transform 0.6s ease;

}



.collection-card:hover .collection-image img {

    transform: scale(1.08);

}



.collection-image::after {

    content: "";

    position: absolute;

    inset: 0;

    background: linear-gradient(

        to top,

        rgba(67, 13, 28, 0.45),

        transparent 55%

    );

    opacity: 0;

    transition: var(--transition);

}



.collection-card:hover .collection-image::after {

    opacity: 1;

}



.collection-content {

    padding: 22px 20px 25px;

    text-align: center;

}



.collection-content h4 {

    color: var(--maroon);

    font-size: 21px;

    margin-bottom: 9px;

}



.collection-content p {

    min-height: 58px;

    margin-bottom: 17px;

    color: var(--text);

    font-size: 13px;

}





/* =========================================================

   WHY CHOOSE US

========================================================= */



.why-about {

    position: relative;

    background: var(--maroon);

    overflow: hidden;

}



.why-about::before {

    content: "";

    position: absolute;

    top: 30px;

    left: 30px;

    right: 30px;

    bottom: 30px;

    border: 1px solid rgba(223, 189, 104, 0.25);

    pointer-events: none;

}



.why-about h2 {

    color: var(--white);

    font-size: 43px;

}



.why-about p {

    color: rgba(255, 255, 255, 0.8);

    font-size: 14px;

}



.why-image-wrapper {

    position: relative;

    padding: 20px;

}



.why-about-image {

    width: 100%;

    height: 470px;

    object-fit: cover;

    border-radius: 18px;

    border: 2px solid rgba(223, 189, 104, 0.65);

}



.why-feature-list {

    margin: 25px 0 0;

    padding: 0;

    list-style: none;

}



.why-feature-list li {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 14px;

    color: rgba(255, 255, 255, 0.9);

    font-size: 14px;

}



.why-feature-list i {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 26px;

    height: 26px;

    flex-shrink: 0;

    color: var(--maroon);

    background: var(--gold);

    border-radius: 50%;

    font-size: 13px;

}





/* =========================================================

   MISSION / VISION

========================================================= */



.mission-section,

.vision-section {

    background: var(--white);

}



.mission-image,

.vision-image {

    width: 100%;

    height: 430px;

    object-fit: cover;

    border-radius: 18px;

    box-shadow: var(--shadow-md);

}



.mission-content,

.vision-content {

    padding: 20px;

}



.mission-content h2,

.vision-content h2 {

    color: var(--maroon);

    font-size: 40px;

}



.mission-icon,

.vision-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 65px;

    height: 65px;

    margin-bottom: 20px;

    color: var(--white);

    background: var(--maroon);

    border: 2px solid var(--gold);

    border-radius: 50%;

    font-size: 26px;

}





/* =========================================================

   PROCESS

========================================================= */



.process-about {

    position: relative;

    background: var(--cream);

}



.process-line {

    position: absolute;

    top: 155px;

    left: 12%;

    right: 12%;

    height: 2px;

    background: rgba(200, 155, 60, 0.4);

    z-index: 0;

}



.process-item {

    position: relative;

    z-index: 1;

    padding: 10px 15px;

    text-align: center;

}



.process-number {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 72px;

    height: 72px;

    margin: 0 auto 20px;

    color: var(--white);

    background: var(--maroon);

    border: 3px solid var(--gold);

    border-radius: 50%;

    font-family: "Playfair Display", serif;

    font-size: 24px;

    font-weight: 700;

    box-shadow: 0 8px 25px rgba(67, 13, 28, 0.18);

}



.process-item h4 {

    color: var(--maroon);

    font-size: 20px;

}



.process-item p {

    font-size: 13px;

}





/* =========================================================

   LOCATIONS

========================================================= */



.locations-about {

    background: var(--white);

}



.location-about-card {

    position: relative;

    height: 100%;

    padding: 30px 25px;

    background: var(--white);

    border: 1px solid var(--border);

    border-radius: 15px;

    box-shadow: var(--shadow-sm);

    text-align: center;

    overflow: hidden;

    transition: var(--transition);

}



.location-about-card::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 4px;

    background: var(--gold);

}



.location-about-card:hover {

    transform: translateY(-8px);

    box-shadow: var(--shadow-lg);

}



.location-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 62px;

    height: 62px;

    margin: 0 auto 18px;

    color: var(--white);

    background: var(--maroon);

    border-radius: 50%;

    border: 2px solid var(--gold);

    font-size: 23px;

}



.location-about-card h4 {

    color: var(--maroon);

    font-size: 22px;

}



.location-about-card p {

    font-size: 12px;

    line-height: 1.7;

}



.location-phone {

    color: var(--maroon);

    font-weight: 600;

}





/* =========================================================

   CUSTOMER EXPERIENCE

========================================================= */



.experience-section {

    background: var(--cream);

}



.experience-card {

    height: 100%;

    padding: 30px 20px;

    background: var(--white);

    border-radius: 15px;

    border: 1px solid var(--border);

    text-align: center;

    transition: var(--transition);

}



.experience-card:hover {

    transform: translateY(-7px);

    box-shadow: var(--shadow-md);

}



.experience-card i {

    color: var(--gold);

    font-size: 32px;

}



.experience-card h4 {

    margin: 15px 0 10px;

    color: var(--maroon);

    font-size: 20px;

}



.experience-card p {

    font-size: 13px;

}





/* =========================================================

   TESTIMONIALS

========================================================= */



.testimonials-about {

    background: var(--white);

}



.about-testimonial {

    position: relative;

    height: 100%;

    padding: 30px;

    background: var(--cream);

    border: 1px solid var(--border);

    border-radius: 15px;

    text-align: center;

}



.about-testimonial::before {

    content: "\201C";

    position: absolute;

    top: -10px;

    left: 20px;

    color: rgba(200, 155, 60, 0.18);

    font-family: Georgia, serif;

    font-size: 100px;

    line-height: 1;

}



.testimonial-stars {

    color: var(--gold);

    letter-spacing: 3px;

    font-size: 17px;

}



.about-testimonial p {

    position: relative;

    z-index: 1;

    margin: 18px 0;

    color: #5c5254;

    font-size: 14px;

    font-style: italic;

}



.about-testimonial h6 {

    color: var(--maroon);

}





/* =========================================================

   CTA

========================================================= */



.about-cta {

    position: relative;

    padding: 80px 0;

    color: var(--white);

    background:

        radial-gradient(

            circle at 10% 50%,

            rgba(200, 155, 60, 0.18),

            transparent 30%

        ),

        radial-gradient(

            circle at 90% 50%,

            rgba(200, 155, 60, 0.12),

            transparent 30%

        ),

        var(--maroon);

    overflow: hidden;

}



.about-cta::before {

    content: "";

    position: absolute;

    inset: 15px;

    border: 1px solid rgba(223, 189, 104, 0.35);

}



.about-cta h2 {

    position: relative;

    color: var(--white);

    font-size: 43px;

}



.about-cta p {

    position: relative;

    max-width: 780px;

    margin: 0 auto 25px;

    color: rgba(255, 255, 255, 0.85);

}





/* =========================================================

   ENQUIRY FORM

========================================================= */



.about-enquiry {

    background: var(--cream);

}



.enquiry-wrapper {

    padding: 45px;

    background: var(--white);

    border: 1px solid var(--border);

    border-radius: 20px;

    box-shadow: var(--shadow-md);

}



.enquiry-title h2 {

    color: var(--maroon);

    font-size: 38px;

}



.enquiry-title p {

    font-size: 14px;

}



.enquiry-form .form-label {

    color: var(--dark);

    font-size: 13px;

    font-weight: 600;

}



.enquiry-form .form-control,

.enquiry-form .form-select {

    min-height: 48px;

    color: var(--dark);

    background: #fffdf9;

    border: 1px solid var(--border);

    border-radius: 8px;

    font-size: 13px;

}



.enquiry-form textarea.form-control {

    min-height: 120px;

    resize: vertical;

}



.enquiry-form .form-control:focus,

.enquiry-form .form-select:focus {

    border-color: var(--gold);

    box-shadow: 0 0 0 0.2rem rgba(200, 155, 60, 0.12);

}





/* =========================================================

   FOOTER

========================================================= */



.footer {

    background: var(--maroon-dark);

}



.footer h5 {

    font-family: "Playfair Display", serif;

}



.footer p,

.footer li {

    color: rgba(255, 255, 255, 0.72);

}



.footer a:hover {

    color: var(--gold-light) !important;

}



.social-footer a {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 35px;

    height: 35px;

    color: var(--white);

    border: 1px solid rgba(223, 189, 104, 0.4);

    border-radius: 50%;

}



.social-footer a:hover {

    color: var(--maroon-dark);

    background: var(--gold);

    border-color: var(--gold);

    transform: translateY(-3px);

}





/* =========================================================

   FLOATING BUTTONS

========================================================= */



.floating-buttons {

    position: fixed;

    right: 20px;

    bottom: 25px;

    z-index: 1090;

    display: flex;

    flex-direction: column;

    gap: 10px;

}



.float-btn {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 52px;

    height: 52px;

    color: var(--white) !important;

    border-radius: 50%;

    font-size: 20px;

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);

    transition: var(--transition);

}



.float-btn:hover {

    color: var(--white) !important;

    transform: translateY(-4px) scale(1.05);

}



.call-btn {

    background: var(--maroon);

    border: 2px solid var(--gold);

}



.whatsapp-btn {

    background: #25d366;

    border: 2px solid var(--white);

}





/* =========================================================

   LARGE DESKTOP

========================================================= */



@media (min-width: 1400px) {



    .about-hero {

        min-height: 470px;

    }



    .about-main-image {

        height: 600px;

    }



    .collection-image img {

        height: 300px;

    }

}





/* =========================================================

   LAPTOP

========================================================= */



@media (max-width: 1199.98px) {



    .navbar-brand {

        font-size: 18px;

    }



    .navbar .nav-link {

        padding-left: 9px !important;

        padding-right: 9px !important;

    }



    .about-content h2,

    .why-about h2 {

        font-size: 38px;

    }



    .about-main-image {

        height: 500px;

    }



    .collection-image img {

        height: 245px;

    }



    .process-line {

        left: 10%;

        right: 10%;

    }

}





/* =========================================================

   TABLET

========================================================= */



@media (max-width: 991.98px) {



    .section-padding {

        padding: 70px 0;

    }



    .navbar {

        min-height: 70px;

    }



    .navbar-collapse {

        padding: 15px 0 20px;

        border-top: 1px solid var(--border);

        margin-top: 10px;

    }



    .navbar .nav-link {

        padding: 11px 5px !important;

        border-bottom: 1px solid rgba(100, 21, 43, 0.07);

    }



    .navbar .nav-link::after {

        display: none;

    }



    .navbar .nav-item:last-child {

        margin-top: 12px;

        margin-left: 0 !important;

    }



    .navbar .nav-item:last-child .btn {

        display: block;

        width: 100%;

    }



    .about-hero {

        min-height: 380px;

    }



    .about-hero-content h1 {

        font-size: 48px;

    }



    .about-main-image {

        height: 450px;

    }



    .about-floating-card {

        right: 10px;

    }



    .about-content {

        margin-top: 25px;

    }



    .why-image-wrapper {

        margin-bottom: 25px;

    }



    .why-about-image {

        height: 400px;

    }



    .process-line {

        display: none;

    }



    .process-item {

        margin-bottom: 25px;

    }



    .mission-content,

    .vision-content {

        padding: 10px 0;

        margin-top: 20px;

    }



    .mission-image,

    .vision-image {

        height: 400px;

    }



    .enquiry-wrapper {

        padding: 35px 25px;

    }

}





/* =========================================================

   MOBILE

========================================================= */



@media (max-width: 767.98px) {



    .section-padding {

        padding: 55px 0;

    }



    .about-hero {

        min-height: 330px;

        background-position: center;

    }



    .about-hero-content {

        padding: 25px 15px;

    }



    .about-hero-content .small-title {

        font-size: 11px;

        letter-spacing: 3px;

    }



    .about-hero-content h1 {

        font-size: 38px;

    }



    .about-hero-content p {

        font-size: 13px;

    }



    .about-breadcrumb {

        font-size: 12px;

    }



    .about-image-wrapper {

        padding: 0 15px 20px 0;

    }



    .about-main-image {

        height: 390px;

    }



    .about-floating-card {

        width: 155px;

        padding: 15px 10px;

        bottom: 20px;

    }



    .about-floating-card i {

        font-size: 24px;

    }



    .about-floating-card strong {

        font-size: 14px;

    }



    .about-content h2,

    .why-about h2 {

        font-size: 32px;

    }



    .about-content p {

        font-size: 13px;

    }



    .speciality-card {

        padding: 30px 20px;

    }



    .collection-image img {

        height: 270px;

    }



    .why-about::before {

        inset: 12px;

    }



    .why-image-wrapper {

        padding: 10px;

    }



    .why-about-image {

        height: 350px;

    }



    .mission-image,

    .vision-image {

        height: 330px;

    }



    .mission-content h2,

    .vision-content h2 {

        font-size: 32px;

    }



    .process-number {

        width: 65px;

        height: 65px;

        font-size: 21px;

    }



    .location-about-card {

        padding: 28px 18px;

    }



    .about-cta {

        padding: 60px 15px;

    }



    .about-cta h2 {

        font-size: 31px;

    }



    .about-cta p {

        font-size: 13px;

    }



    .about-cta .btn {

        width: 100%;

        max-width: 280px;

    }



    .enquiry-wrapper {

        padding: 30px 18px;

        border-radius: 15px;

    }



    .enquiry-title h2 {

        font-size: 30px;

    }



    .floating-buttons {

        right: 13px;

        bottom: 17px;

        gap: 9px;

    }



    .float-btn {

        width: 47px;

        height: 47px;

        font-size: 18px;

    }

}





/* =========================================================

   SMALL MOBILE

========================================================= */



@media (max-width: 575.98px) {



    .about-hero {

        min-height: 300px;

    }



    .about-hero-content h1 {

        font-size: 31px;

    }



    .about-hero-content p {

        font-size: 12px;

        line-height: 1.6;

    }



    .about-main-image {

        height: 320px;

    }



    .about-floating-card {

        width: 135px;

        right: 0;

        bottom: 15px;

        padding: 12px 8px;

    }



    .about-floating-card i {

        font-size: 21px;

    }



    .about-floating-card strong {

        font-size: 12px;

    }



    .about-content h2,

    .why-about h2 {

        font-size: 28px;

    }



    .gold-divider {

        width: 65px;

    }



    .collection-image img {

        height: 250px;

    }



    .collection-content h4 {

        font-size: 19px;

    }



    .why-about-image {

        height: 300px;

    }



    .mission-image,

    .vision-image {

        height: 280px;

    }



    .mission-content h2,

    .vision-content h2 {

        font-size: 28px;

    }



    .location-about-card h4 {

        font-size: 20px;

    }



    .experience-card {

        padding: 25px 15px;

    }



    .about-testimonial {

        padding: 25px 18px;

    }



    .about-cta h2 {

        font-size: 27px;

    }



    .about-cta::before {

        inset: 10px;

    }



    .enquiry-title h2 {

        font-size: 27px;

    }



    .floating-buttons {

        right: 10px;

        bottom: 14px;

    }



    .float-btn {

        width: 44px;

        height: 44px;

        font-size: 17px;

    }

}





/* =========================================================

   EXTRA SMALL

========================================================= */



@media (max-width: 380px) {



    .about-hero {

        min-height: 280px;

    }



    .about-hero-content h1 {

        font-size: 28px;

    }



    .about-main-image {

        height: 280px;

    }



    .about-floating-card {

        width: 120px;

    }



    .about-floating-card strong {

        font-size: 11px;

    }



    .collection-image img {

        height: 220px;

    }



    .why-about-image {

        height: 270px;

    }



    .mission-image,

    .vision-image {

        height: 250px;

    }



    .float-btn {

        width: 42px;

        height: 42px;

    }

}







.contact-hero {

    min-height: 430px;

    display: flex;

    align-items: center;

    position: relative;

    background:

        linear-gradient(

            90deg,

            rgba(54, 7, 21, .9),

            rgba(71, 12, 30, .7)

        ),

        url("../images/contact/contact-banner.jpg")

        center/cover no-repeat;

}



.contact-hero-content {

    width: 100%;

    color: #fff;

    text-align: center;

}



.contact-hero-content .small-title {

    color: var(--gold-light);

    font-size: 13px;

    font-weight: 600;

    letter-spacing: 4px;

}



.contact-hero-content h1 {

    color: #fff;

    font-size: clamp(38px, 5vw, 62px);

}



.contact-hero-content p {

    max-width: 750px;

    margin: 15px auto;

    color: rgba(255,255,255,.88);

}



.contact-breadcrumb {

    margin-top: 20px;

    font-size: 13px;

}



.contact-breadcrumb a {

    color: var(--gold-light);

}





/* Contact Information */



.contact-info-section {

    background: var(--white);

}



.contact-info h2 {

    color: var(--maroon);

    font-size: 42px;

}



.contact-info-card {

    display: flex;

    gap: 15px;

    padding: 18px;

    margin-bottom: 15px;

    background: var(--cream);

    border: 1px solid var(--border);

    border-radius: 12px;

    transition: var(--transition);

}



.contact-info-card:hover {

    transform: translateX(5px);

    box-shadow: var(--shadow-sm);

}



.contact-info-icon {

    width: 48px;

    height: 48px;

    min-width: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #fff;

    background: var(--maroon);

    border: 2px solid var(--gold);

    border-radius: 50%;

    font-size: 18px;

}



.contact-info-card h5 {

    margin-bottom: 5px;

    color: var(--maroon);

}



.contact-info-card p,

.contact-info-card a {

    margin: 0;

    color: var(--text);

    font-size: 13px;

    line-height: 1.7;

}



.contact-info-card a:hover {

    color: var(--gold-dark);

}





/* Enquiry Form */



.enquiry-card {

    padding: 40px;

    background: #fff;

    border: 1px solid var(--border);

    border-radius: 20px;

    box-shadow: var(--shadow-md);

}



.enquiry-card h2 {

    color: var(--maroon);

    font-size: 38px;

}



.enquiry-card .form-label {

    color: var(--dark);

    font-size: 13px;

    font-weight: 600;

}



.enquiry-card .form-control,

.enquiry-card .form-select {

    min-height: 48px;

    background: #fffdf9;

    border: 1px solid var(--border);

    border-radius: 8px;

    font-size: 13px;

}



.enquiry-card textarea {

    min-height: 120px !important;

    resize: vertical;

}



.enquiry-card .form-control:focus,

.enquiry-card .form-select:focus {

    border-color: var(--gold);

    box-shadow: 0 0 0 .2rem rgba(200,155,60,.12);

}





/* Location */



.locations-contact {

    background: var(--cream);

}



.location-card-contact {

    position: relative;

    height: 100%;

    padding: 30px 22px;

    background: #fff;

    border: 1px solid var(--border);

    border-radius: 16px;

    text-align: center;

    box-shadow: var(--shadow-sm);

    transition: var(--transition);

    overflow: hidden;

}



.location-card-contact::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 4px;

    background: var(--gold);

}



.location-card-contact:hover {

    transform: translateY(-8px);

    box-shadow: var(--shadow-lg);

}



.location-card-contact .location-icon {

    width: 60px;

    height: 60px;

    margin: 0 auto 18px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #fff;

    background: var(--maroon);

    border: 2px solid var(--gold);

    border-radius: 50%;

    font-size: 23px;

}



.location-card-contact h4 {

    color: var(--maroon);

    font-size: 24px;

}



.location-card-contact p {

    font-size: 12px;

    line-height: 1.7;

}





/* Map */



.map-section {

    background: var(--white);

}



.map-wrapper {

    width: 100%;

    height: 450px;

    overflow: hidden;

    border: 5px solid #fff;

    border-radius: 18px;

    box-shadow: var(--shadow-lg);

}



.map-wrapper iframe {

    width: 100%;

    height: 100%;

    border: 0;

}





/* Why Choose */



.contact-why {

    background: var(--maroon);

    color: #fff;

}



.contact-why h2 {

    color: #fff;

}



.contact-why-card {

    height: 100%;

    padding: 30px 20px;

    text-align: center;

    border: 1px solid rgba(224,189,103,.3);

    border-radius: 15px;

    background: rgba(255,255,255,.05);

    transition: var(--transition);

}



.contact-why-card:hover {

    transform: translateY(-7px);

    background: rgba(255,255,255,.09);

}



.contact-why-card i {

    color: var(--gold-light);

    font-size: 32px;

}



.contact-why-card h4 {

    margin: 15px 0 10px;

    color: #fff;

}



.contact-why-card p {

    color: rgba(255,255,255,.75);

    font-size: 13px;

}





/* CTA */



.contact-cta {

    padding: 80px 15px;

    position: relative;

    text-align: center;

    color: #fff;

    background: var(--maroon-dark);

    overflow: hidden;

}



.contact-cta::before {

    content: "";

    position: absolute;

    inset: 15px;

    border: 1px solid rgba(224,189,103,.35);

}



.contact-cta h2 {

    position: relative;

    color: #fff;

    font-size: 43px;

}



.contact-cta p {

    position: relative;

    max-width: 750px;

    margin: 15px auto 25px;

    color: rgba(255,255,255,.82);

}





/* Floating Buttons */



.floating-buttons {

    position: fixed;

    right: 20px;

    bottom: 25px;

    z-index: 1090;

    display: flex;

    flex-direction: column;

    gap: 10px;

}



.float-btn {

    width: 52px;

    height: 52px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #fff !important;

    border-radius: 50%;

    font-size: 20px;

    box-shadow: 0 8px 25px rgba(0,0,0,.2);

    transition: var(--transition);

}



.float-btn:hover {

    color: #fff !important;

    transform: translateY(-4px) scale(1.05);

}



.call-btn {

    background: var(--maroon);

    border: 2px solid var(--gold);

}



.whatsapp-btn {

    background: #25d366;

    border: 2px solid #fff;

}





/* Responsive */



@media (max-width: 991.98px) {



    .contact-hero {

        min-height: 380px;

    }



    .contact-hero-content h1 {

        font-size: 46px;

    }



    .enquiry-card {

        margin-top: 30px;

        padding: 30px;

    }



    .map-wrapper {

        height: 400px;

    }

}



@media (max-width: 767.98px) {



    .contact-hero {

        min-height: 330px;

    }



    .contact-hero-content {

        padding: 20px 15px;

    }



    .contact-hero-content .small-title {

        font-size: 11px;

        letter-spacing: 3px;

    }



    .contact-hero-content h1 {

        font-size: 35px;

    }



    .contact-hero-content p {

        font-size: 13px;

        line-height: 1.6;

    }



    .contact-info h2,

    .contact-cta h2 {

        font-size: 32px;

    }



    .enquiry-card {

        padding: 25px 18px;

        border-radius: 15px;

    }



    .enquiry-card h2 {

        font-size: 30px;

    }



    .location-card-contact {

        padding: 28px 18px;

    }



    .map-wrapper {

        height: 350px;

        border-width: 3px;

    }



    .contact-why-card {

        padding: 25px 18px;

    }



    .contact-cta {

        padding: 60px 15px;

    }



    .contact-cta h2 {

        font-size: 30px;

    }



    .floating-buttons {

        right: 12px;

        bottom: 15px;

    }



    .float-btn {

        width: 47px;

        height: 47px;

        font-size: 18px;

    }

}



@media (max-width: 575.98px) {



    .contact-hero {

        min-height: 300px;

    }



    .contact-hero-content h1 {

        font-size: 30px;

    }



    .contact-info h2,

    .contact-cta h2 {

        font-size: 28px;

    }



    .contact-info-card {

        padding: 14px;

    }



    .contact-info-icon {

        width: 42px;

        height: 42px;

        min-width: 42px;

    }



    .enquiry-card h2 {

        font-size: 27px;

    }



    .map-wrapper {

        height: 300px;

        border-radius: 12px;

    }



    .contact-cta::before {

        inset: 10px;

    }



    .floating-buttons {

        right: 9px;

        bottom: 12px;

    }



    .float-btn {

        width: 44px;

        height: 44px;

        font-size: 17px;

    }

}



/* =========================================================

   ACCESSIBILITY / REDUCED MOTION

========================================================= */



@media (prefers-reduced-motion: reduce) {



    html {

        scroll-behavior: auto;

    }



    *,

    *::before,

    *::after {

        transition: none !important;

        animation: none !important;

    }

}





/* =========================================================

   26. MOBILE LANDSCAPE / LARGE MOBILE

   ========================================================= */



@media (max-width: 767.98px) {



    body {

        font-size: 14px;

    }



    .section-padding {

        padding: 60px 0;

    }



    h2 {

        font-size: 32px;

    }



    h3 {

        font-size: 27px;

    }



    .navbar {

        min-height: 65px;

    }



    .navbar-brand {

        font-size: 16px;

        max-width: 245px;

        white-space: normal;

    }



    .mySwiperHero {

        height: 550px;

    }



    .mySwiperHero .swiper-slide {

        background-position: center center;

    }



    .hero-overlay {

        align-items: center;

        background:

            linear-gradient(90deg,

                rgba(40, 8, 18, 0.88),

                rgba(40, 8, 18, 0.58));

    }



    .hero-content {

        width: 100%;

        padding: 20px 10px;

    }



    .hero-content h1 {

        font-size: 39px;

        line-height: 1.12;

    }



    .hero-content .lead {

        font-size: 14px;

        line-height: 1.7;

        max-width: 520px;

    }



    .hero-content .btn {

        font-size: 13px;

        padding: 10px 22px !important;

    }



    .mySwiperHero .swiper-pagination {

        bottom: 18px;

    }



    .about-preview img {

        height: 380px;

        margin-bottom: 10px;

    }



    .about-preview .row .col-sm-6 {

        font-size: 13px;

    }



    .service-card img {

        height: 280px;

    }



    .service-card .card-body {

        padding: 22px 18px;

    }



    .service-card .card-text {

        min-height: auto;

        margin-bottom: 18px;

    }



    .why-choose img {

        height: 360px;

        margin-bottom: 10px;

    }



    .why-choose li {

        font-size: 14px;

    }



    .process-step {

        padding: 20px 15px;

    }



    .step-number {

        width: 60px;

        height: 60px;

        font-size: 22px;

    }



    .gallery-img {

        height: 220px;

    }



    .testimonial-card {

        min-height: auto;

        padding: 25px 20px !important;

    }



    .location-card {

        min-height: auto !important;

    }



    .cta-section {

        padding: 55px 15px !important;

    }



    .cta-section::before {

        inset: 10px;

    }



    .cta-section h2 {

        font-size: 30px;

        padding: 0 10px;

    }



    .cta-section p {

        font-size: 14px;

    }



    .footer {

        padding-top: 50px !important;

    }



    .footer .col-md-3 {

        margin-bottom: 10px;

    }



    .floating-buttons {

        right: 14px;

        bottom: 18px;

        gap: 9px;

    }



    .float-btn {

        width: 47px;

        height: 47px;

        font-size: 18px;

    }

}





/* =========================================================

   27. SMALL MOBILE

   ========================================================= */



@media (max-width: 575.98px) {



    .container {

        padding-left: 15px;

        padding-right: 15px;

    }



    .section-padding {

        padding: 50px 0;

    }



    h2 {

        font-size: 28px;

    }



    .gold-divider {

        margin-top: 12px;

        margin-bottom: 12px;

    }



    .navbar-brand {

        font-size: 14px;

        max-width: 220px;

        line-height: 1.2;

    }



    .navbar-toggler {

        padding: 5px 7px;

    }



    .mySwiperHero {

        height: 570px;

    }



    .mySwiperHero .swiper-slide {

        background-position: 60% center;

    }



    .hero-content {

        padding: 10px 5px 40px;

    }



    .hero-content h1 {

        font-size: 34px;

        margin-bottom: 14px;

    }



    .hero-content .lead {

        font-size: 13px;

        line-height: 1.65;

    }



    .hero-content .mt-4 {

        margin-top: 20px !important;

    }



    .hero-content .btn {

        width: 100%;

        font-size: 13px;

        padding: 10px 15px !important;

    }



    .about-preview img {

        height: 320px;

    }



    .about-preview .btn {

        width: 100%;

    }



    .service-card img {

        height: 250px;

    }



    .service-card .card-title {

        font-size: 20px;

    }



    .services-preview .btn {

        max-width: 100%;

    }



    .why-choose img {

        height: 310px;

    }



    .why-choose li {

        margin-bottom: 10px;

        font-size: 13px;

    }



    .gallery-img {

        height: 180px;

    }



    .gallery-preview .row {

        --bs-gutter-x: 8px;

        --bs-gutter-y: 8px;

    }



    .gallery-preview a::after {

        width: 38px;

        height: 38px;

        font-size: 14px;

    }



    .location-card {

        padding: 28px 17px !important;

    }



    .location-card h5 {

        font-size: 21px;

    }



    .location-card p {

        font-size: 12px;

    }



    .cta-section h2 {

        font-size: 27px;

    }



    .cta-section .btn {

        width: 100%;

        max-width: 280px;

    }



    .footer h5 {

        font-size: 17px;

    }



    .footer p,

    .footer li {

        font-size: 12px;

    }



    .floating-buttons {

        right: 12px;

        bottom: 15px;

    }



    .float-btn {

        width: 45px;

        height: 45px;

        font-size: 17px;

    }

}





/* =========================================================

   28. EXTRA SMALL DEVICES

   ========================================================= */



@media (max-width: 380px) {



    .navbar-brand {

        font-size: 13px;

        max-width: 190px;

    }



    .mySwiperHero {

        height: 540px;

    }



    .hero-content h1 {

        font-size: 30px;

    }



    .hero-content .lead {

        font-size: 12px;

    }



    h2 {

        font-size: 26px;

    }



    .gallery-img {

        height: 160px;

    }



    .float-btn {

        width: 42px;

        height: 42px;

    }

}





/* =========================================================

   29. TOUCH DEVICES

   ========================================================= */



@media (hover: none) {



    .service-card:hover {

        transform: none;

    }



    .location-card:hover {

        transform: none;

    }



    .testimonial-card:hover {

        transform: none;

    }



    .float-btn:hover {

        transform: none;

    }

}





/* =========================================================

   30. REDUCE MOTION

   ========================================================= */



@media (prefers-reduced-motion: reduce) {



    html {

        scroll-behavior: auto;

    }



    *,

    *::before,

    *::after {

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;

    }

}