/* ============================================================
   OASIS SMART NETWORK – COMMON STYLESHEET
   Theme      : mysite
   Location   : assets/css/common.css
   Company    : Oasis Smart Connect Private Limited
   Notes:
   - Page-wise CSS organised using page wrapper classes
   - Parsing errors and overrides fixed
   - Responsive blocks kept at the bottom
============================================================ */

/* ============================
   OASIS HOME – SECTION ORDERED CSS
   Generated by tooling (base + media grouped per section)
   ============================ */

/* ============================================================
   SECTION: BANNER
   ============================================================ */

.banner {
    position: relative;
    overflow: hidden;
    width: 100%;
    min-height: clamp(450px, 45vw, 980px);
	height: 100%;
    background-image: url("../images/banner.webp");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

/* ✅ Same overlay as your original */
.banner .opacity_overlay {
    width: 100%;
    min-height: inherit;
    background: rgba(0, 0, 0, 0.55); /* KEEP SAME */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-top: clamp(90px, 7vw, 150px);
}

/* ✅ Premium inner hero area (like portfolio overlay feel) */
.banner .opacity_overlay .banner-hero {
    width: 100%;
}

.banner .opacity_overlay .info {
    text-align: center;
    width: 100%;
    max-width: clamp(1200px, 92vw, 3200px);
    margin: 0 auto;
    padding-left: clamp(15px, 3vw, 90px);
    padding-right: clamp(15px, 3vw, 90px);
}

/* h1 – bold premium hero */
.banner .opacity_overlay .info h1 {
    font-size: clamp(28px, 2.35vw, 74px);
    color: #FFF6E5;
    text-transform: uppercase;
    letter-spacing: clamp(1px, 0.18vw, 3px);
    line-height: 1.12;
    text-shadow: 0 0 12px rgba(0,0,0,0.75);
    margin: 0 0 clamp(10px, 1vw, 18px) 0;
}

/* h2 – refined */
.banner .opacity_overlay .info h2 {
    font-size: clamp(18px, 1.25vw, 42px);
    color: #FFF6E5;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: clamp(1px, 0.16vw, 2.6px);
    line-height: 1.2;
    text-shadow: 0 0 10px rgba(0,0,0,0.75);
    margin: 0 0 clamp(18px, 1.8vw, 30px) 0;
}

/* HR – premium balanced */
.banner .opacity_overlay .info hr {
    width: clamp(90px, 7vw, 160px);
    margin: clamp(16px, 2vw, 36px) auto;
    border-color: #ffffff;
    opacity: 0.95;
}

/* h3 – neat and luxury */
.banner .opacity_overlay .info h3 {
    font-size: clamp(14px, 0.95vw, 30px);
    font-weight: 300;
    color: #FFF6E5;
    text-transform: uppercase;
    letter-spacing: clamp(1px, 0.12vw, 2.2px);
    margin: 0 0 clamp(6px, 0.8vw, 14px) 0;
    text-shadow: 0 0 8px rgba(0,0,0,0.7);
}

/* ============================================
   BOTTOM STRIP – Premium (like modern hero footer)
============================================ */

.banner .opacity_overlay .secondary_layer {
    background: rgba(25, 25, 25, 0.96);
    margin-top: clamp(50px, 6vw, 110px);
    padding-top: clamp(16px, 1.2vw, 30px);
    padding-bottom: clamp(16px, 1.2vw, 30px);
    border-top: 1px solid rgba(255,255,255,0.10);
}

.banner .opacity_overlay .secondary_layer .msg {
    font-size: clamp(16px, 1.35vw, 34px);
    color: #f8f8f8;
    font-weight: 400;
    letter-spacing: 0.5px;
    margin: 0;
}

.banner .opacity_overlay .secondary_layer .msg span {
    font-size: clamp(18px, 1.55vw, 46px);
    font-style: italic;
    color: #ffffff;
    letter-spacing: 1px;
    text-shadow: 0 0 10px rgba(0,0,0,0.75);
}

.banner .opacity_overlay .secondary_layer .quote {
    font-size: clamp(14px, 1vw, 28px);
    color: #d8d8d8;
    font-weight: 300;
    letter-spacing: 0.5px;
    margin-top: clamp(6px, 0.6vw, 12px);
}

/* ============================================
   ENQUIRY BUTTON – keep your premium style (polished)
============================================ */

a#home-enquiry-btn.btn.btn-primary {
    margin-right: clamp(40px, 2.1vw, 150px);
	background: #ffffff !important;
    color: #000000 !important;
    padding: clamp(10px, 0.7vw, 14px) clamp(20px, 1.6vw, 36px) !important;
    border-radius: clamp(6px, 0.5vw, 12px) !important;
    font-weight: 700;
    text-transform: uppercase;
    font-size: clamp(14px, 1vw, 28px);
    letter-spacing: 0.9px;
    display: inline-block;
    border: 2px solid #000000 !important;
    position: relative;
    overflow: hidden;
    transition: all 0.35s ease-in-out;
}

a#home-enquiry-btn.btn.btn-primary:hover {
    background: #000000 !important;
    color: #ffffff !important;
    border-color: #000000 !important;
    box-shadow: 0 0 12px rgba(255,255,255,0.28),
                0 0 22px rgba(255,255,255,0.18);
    transform: translateY(-3px) scale(1.04);
}

/* Shine strip */
a#home-enquiry-btn.btn.btn-primary::before {
    content: "";
    position: absolute;
    top: 0;
    left: -150%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        120deg,
        rgba(255,255,255,0),
        rgba(255,255,255,0.5),
        rgba(255,255,255,0)
    );
    transform: skewX(-20deg);
    transition: 0.6s;
}

a#home-enquiry-btn.btn.btn-primary:hover::before {
    left: 180%;
}

/* Inner ripple */
a#home-enquiry-btn.btn.btn-primary::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255,255,255,0.15);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: 0.5s ease;
}

a#home-enquiry-btn.btn.btn-primary:hover::after {
    width: 260%;
    height: 260%;
}

/* ============================================
   MOBILE
============================================ */

@media screen and (max-width: 991px) {

    .banner {
        min-height: clamp(440px, 95vw, 650px);
    }

    .banner .opacity_overlay {
        padding-top: clamp(70px, 12vw, 100px);
    }
	
	.banner .opacity_overlay .info h1 {
		font-size: clamp(16px, 2.35vw, 28px);;
		font-weight: 600;
	}
	
	.banner .opacity_overlay .info h2 {
		font-size: clamp(14px, 1.5vw, 22px);
		font-weight: 300;
	}
	
	.banner .opacity_overlay .info h3 {
    font-size: clamp(14px, 1.5vw, 18px);
    font-weight: 300;
	}

    .banner .opacity_overlay .secondary_layer {
        text-align: center;
    }
	
	
    .banner .opacity_overlay .secondary_layer .msg,
    .banner .opacity_overlay .secondary_layer .quote {
		font-size: clamp(12px, 1.35vw, 16px);
        text-align: center;
    }

    .banner .opacity_overlay .secondary_layer .msg span {
		font-size: clamp(14px, 1.55vw, 18px);
        display: block;
        margin-top: 2px;
    }

    a#home-enquiry-btn.btn.btn-primary {		
        display: table;
        margin: clamp(10px, 1vw, 20px) auto clamp(6px, 0.8vw, 16px) auto;
		padding: clamp(10px, 0.7vw, 14px) clamp(5px, 1.6vw, 20px) !important;
        float: none !important;
        position: static;
        transform: none;
    }
}


/* ============================================================
   PREMIUM MARQUEE – ALL DEVICES (DESKTOP + TABLET + MOBILE)
   ============================================================ */

.marquee {	
    width: 100%;
    overflow: hidden;
    position: relative;
    background: #000;
    color: #FFF6E5;
    white-space: nowrap;

}

/* FADE LEFT & RIGHT EDGES */
.marquee::before,
.marquee::after {
    content: "";
    position: absolute;
    top: 0;
    width: 60px;
    height: 100%;
    z-index: 2;
}

.marquee::before {
    left: 0;
    background: linear-gradient(to right, #000, transparent);
}

.marquee::after {
    right: 0;
    background: linear-gradient(to left, #000, transparent);
}

/* SCROLLING TEXT */
.marquee-track {
    display: inline-block;
    padding-left: 100%;          /* right se bahar se start */
    font-size: clamp(14px, 1vw, 36px);
    
    white-space: nowrap;
    position: relative;
    z-index: 1;
    animation: marqueeTrackScroll 22s linear infinite;
}
@keyframes marqueeTrackScroll {
    0% {
        transform: translateX(0);        /* screen ke right edge se */
    }
    100% {
        transform: translateX(-100%);    /* poora left ke bahar */
    }
}

@media (max-width: 1024px) {
    .marquee-track {
        font-size: 16px;
        animation-duration: 26s;        /* tablet pe thoda slow */
    }
}

@media (max-width: 768px) {
    .marquee {
        padding: 4px 0;
    }
    .marquee-track {
        font-size: 13px;
        animation-duration: 30s;        /* mobile pe aur slow */
    }
}

@media (max-width: 480px) {
    .marquee-track {
        font-size: 12px;
        animation-duration: 34s;
    }
}
.home-enquiry-wrapper {
	max-width: clamp(960px, 50vw, 1920px);
	margin-left: auto;
    margin-right: auto;
}
/* ============================================================
   SECTION: SERVICES
   ============================================================ */


/* MAIN ANIMATION */

.services {
	padding-top: 40px;
    padding-bottom: 60px;
    background: #ffffff;
}
.services h2 {
	font-size: clamp(28px, 1.5vw, 56px);
    line-height: 1.3;
    text-align: center;
    font-weight: 600;
    margin-bottom: 20px;
    color: #000000; /* BLACK */
}


.services h3 {
	font-size: clamp(14px, 1vw, 28px);
    font-weight: 400;
    text-align: center;    
    color: #000000; /* BLACK */
}


.services .overview {
	margin-top: 20px;
}

.services .overview .feature-box img {
	width: 100%;
	margin-top: 30px;
}


.services .overview .feature-body h4 {
	line-height: 30px;
    font-size: clamp(20px, 1.2vw, 40px);
    font-weight: 600;
    margin-top: 15px;
    margin-bottom: 5px;
    color: #000000; /* BLACK */
}

.services .overview .feature-body p {	
    font-weight: 400;
    color: #000000; /* DARK GREY */
    line-height: 1.6;
}


@media screen and (max-width: 991px) {
.services h2 {
	font-size: 26px;
}
.services h3 {
	font-size: 16px;
}
}

@media screen and (max-width: 768px) {
.services h2 {
	font-size: 22px;
}
.services {
	padding-top: 20px;
	padding-bottom: 30px;
}
}

@media screen and (max-width: 534px) {
.services h2 {
	font-size: 20px;
}
.services h3 {
	font-size: 14px;
}
}

@media screen and (max-width: 500px) {
.services {
	padding-top: 10px;
	padding-bottom: 10px;
}
.services .overview .col-sm-4 {
	padding-right: 0px;
	padding-left: 0px;
}
.information {
	padding-top: 20px;
	padding-bottom: 30px;
}
}


/* ============================================================
   SECTION: CLIENTS
   ============================================================ */
/* ============================================================
   CLIENTS SECTION (CAROUSEL)
   Desktop: 4 | Tablet: 2 | Mobile: 1  (PHP/Bootstrap handles)
   ============================================================ */

.clients {
    padding-top: clamp(20px, 1vw, 40px);
    padding-bottom: clamp(20px, 1vw, 40px);
    background: #191919;
}

.clients-carousel {
    margin-top: clamp(40px, 1.2vw, 80px);
    padding: 0 clamp(100px, 2vw, 200px) clamp(30px, 2vw, 60px) clamp(100px, 2vw, 200px);
}

/* Keep Bootstrap carousel stable */
.clients-carousel .carousel-inner {
    width: 100%;
}

/* Row gutter behavior (Bootstrap 3 standard) */
.clients-carousel .row {
    margin-left: -15px;
    margin-right: -15px;
}

/* Thumbnail */
.clients-carousel .thumbnail {
    background: transparent;
    border: none;
    padding: 0;
    margin: clamp(10px, 0.6vw, 20px) 0;
    text-decoration: none;
    display: block;
    text-align: center;
}

/* Logo image */
.clients-carousel img {
    max-width: 100%;
    max-height: clamp(60px, 3vw, 120px);
    width: auto;
    height: auto;
    display: inline-block;
    object-fit: contain;
}

/* Hover */
.clients-carousel .thumbnail:hover {
    border: none;
    box-shadow: none;
}

/* ✅ Mobile spacing (1 logo per slide) looks cleaner */
@media (max-width: 575px) {
    .clients-carousel {
        padding-left: clamp(15px, 4vw, 24px);
        padding-right: clamp(15px, 4vw, 24px);
    }

    .clients-carousel .thumbnail {
        margin: 10px 0;
    }

    .clients-carousel img {
        max-height: 70px;
    }
}


/* ============================================================
   SECTION: PROJECTS – TIMELINE (FIXED ALIGNMENT)
   ============================================================ */

.projects {
    padding-top: clamp(60px, 1.56vw, 120px);
    padding-bottom: clamp(60px, 1.56vw, 120px);
    background: #ffffff;
}

.projects h3 {
	font-weight: 400;
    text-transform: uppercase;
    letter-spacing: clamp(1px, 0.10vw, 2px);
    text-align: center;
    margin-top: 0;
    margin-bottom: clamp(10px, 0.26vw, 20px);
    color: #000000;
}

.projects hr {
    width: clamp(75px, 1.95vw, 150px);
    height: clamp(2px, 0.05vw, 4px);
    background: #000;
    border: 0;
    margin: 0 auto clamp(10px, 0.26vw, 20px);
}

.projects .news {
    margin-top: clamp(50px, 1.30vw, 100px);
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

/* Center vertical line */
.projects .news:before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: clamp(2px, 0.05vw, 4px);
    background: #000;
    transform: translateX(-50%);
}

/* Year / date label */
.projects .news .date {
    color: #fff;
    text-align: center;
    display: block;
    background: #000;
    padding: clamp(4px, 0.10vw, 8px) clamp(8px, 0.21vw, 16px);
    margin: 0 auto clamp(50px, 1.30vw, 100px);
    width: clamp(120px, 3.12vw, 240px);
    border-radius: clamp(20px, 0.52vw, 40px);
}

.projects .news .date h4 {
	font-size: clamp(16px, 1.2vw, 32px);
	font-weight: 500;
    margin: 0;
}

/* Each timeline section (row) */
.projects .news .section {
    margin-top: clamp(40px, 1.04vw, 80px);
    position: relative;
}

/* ------------------------------------------------------------
   LEFT SIDE SECTION
------------------------------------------------------------- */
.projects .news .section-left:before {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: clamp(20px, 0.52vw, 40px);
    height: clamp(20px, 0.52vw, 40px);
    margin-top: clamp(-10px, -0.26vw, -20px);
    margin-right: clamp(-10px, -0.26vw, -20px);
    background: #000;
    border-radius: 50%;
    z-index: 100;
}

.projects .news .section-left:after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: clamp(80%, 1vw, 80%);
    height: clamp(2px, 0.05vw, 4px);
    background-color: #000;
    z-index: 50;
}

/* Card (left) */
.projects .news .section-left .article {
    background: #000;
    padding: clamp(26px, 0.67vw, 52px) 0 clamp(31px, 0.80vw, 62px);
    position: relative;
    z-index: 101;
    margin-right: clamp(50px, 1.30vw, 100px);
    border-radius: clamp(6px, 0.15vw, 12px);
    box-shadow: 0 clamp(10px, 0.26vw, 20px) clamp(25px, 0.65vw, 50px) rgba(0,0,0,0.15);
}

/* ------------------------------------------------------------
   RIGHT SIDE SECTION
------------------------------------------------------------- */
.projects .news .section-right:before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: clamp(20px, 0.52vw, 40px);
    height: clamp(20px, 0.52vw, 40px);
    margin-top: clamp(-10px, -0.26vw, -20px);
    margin-left: clamp(-10px, -0.26vw, -20px);
    background: #000;
    border-radius: 50%;
    z-index: 100;
}

.projects .news .section-right:after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: clamp(80%, 1vw, 80%);
    height: clamp(2px, 0.05vw, 4px);
    background-color: #000;
    z-index: 50;
}

/* Card (right) */
.projects .news .section-right .article {
    background: #000;
    padding: clamp(26px, 0.67vw, 52px) 0 clamp(31px, 0.80vw, 62px);
    position: relative;
    z-index: 101;
    margin-left: clamp(50px, 1.30vw, 100px);
    border-radius: clamp(6px, 0.15vw, 12px);
    box-shadow: 0 clamp(10px, 0.26vw, 20px) clamp(25px, 0.65vw, 50px) rgba(0,0,0,0.15);
}

/* ------------------------------------------------------------
   ARTICLE CONTENT
------------------------------------------------------------- */

.projects .news .article .wrap {
    padding: clamp(5px, 0.13vw, 10px) clamp(30px, 0.78vw, 60px);
}

.projects .news .article .wrap .heading {
    color: #fff;
}

.projects .news .article .wrap .heading h5 {	
    text-transform: uppercase;
    margin: 0 0 clamp(6px, 0.15vw, 12px);
    letter-spacing: clamp(0.03em, 0.1vw, 0.06em);
}

.projects .news .article .wrap .heading h5 span {
	color: #FFF6E5;
	font-size: clamp(20px, 2vw, 40px);
    margin-right: clamp(20px, 0.52vw, 40px);
}

.projects .news .article .wrap p {
	font-size: clamp(14px, 1vw, 28px);
	line-height: 1.6;
    color: #eaeaea;	
}

/* Button (View more / CTA) */
.projects .news .button {
    text-align: center;
    margin-top: clamp(40px, 1.04vw, 80px);
    position: relative;
}

.projects .news .button a {
	font-size: clamp(15px, 1vw, 30px);
    font-weight: 600;
    display: inline-block;
    color: #000;
    background: #fff;
    border: clamp(2px, 0.05vw, 4px) solid #000;
    text-transform: uppercase;
    padding: clamp(10px, 0.26vw, 20px) clamp(26px, 0.67vw, 52px);
    letter-spacing: clamp(0.08em, 0.15vw, 0.16em);
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease,
                transform 0.2s ease, box-shadow 0.2s ease;
}

.projects .news .button a:hover {
    background: #000;
    color: #fff;
    transform: translateY(clamp(-2px, -0.05vw, -4px));
    box-shadow: 0 clamp(8px, 0.20vw, 16px) clamp(18px, 0.46vw, 36px) rgba(0,0,0,0.25);
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Small padding on very small screens */
@media screen and (max-width: 500px) {
    .projects {
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .projects hr {
        width: 55px;
    }
}

@media (min-width: 1200px) {
    .projects .container {
        max-width: clamp(960px, 90vw, 2200px);
    }
}
/* To kill any Bootstrap offset on medium screens only (768px – 1199px) */
@media screen and (min-width: 992px) and (max-width: 1199px) {
    .projects .news .col-md-offset-1 {
        margin-left: 0%;
    }
}


	
/* Tablet & below – stack timeline, remove center line anchors */
@media screen and (max-width: 991px) {
	
	.projects .news .col-md-offset-1 {
        margin-left: clamp(5%, 6vw, 15%);
        margin-right: clamp(5%, 6vw, 15%);
    }

    .projects .news .col-md-offset-6 {
        margin-left: clamp(5%, 6vw, 15%);
        margin-right: clamp(5%, 6vw, 15%);
    }
	
	/* Date spacing */
    .projects .news .date {
        margin-bottom: 0px;
    }

    /* Hide center line and connectors */
    
    .projects .news .section-left:before,
    .projects .news .section-left:after,
    .projects .news .section-right:before,
    .projects .news .section-right:after {
        display: none;
    }

    /* Cards full width + spacing */
    .projects .news .section-left .article,
    .projects .news .section-right .article,
    .projects .news .article {
        margin-right: 0;
        margin-left: 0;
        margin-top: 25px;
    }
	
	.news .article .wrap .heading h5 {
		text-align: center;
		font-size: clamp(11px, 2.5vw, 20px);
	}
	
	.projects .news .article .wrap p {    
	 font-size: clamp(10px, 2.5vw, 14px);
	}
	
	.projects .news .article {
        margin-right: 0;
        margin-left: 0;
    }
	.projects .news .button a {
	font-size: clamp(12px, 1vw, 15px);
    padding: clamp(5px, 0.26vw, 10px) clamp(10px, 0.67vw, 26px);
	}
}



/* ============================================================
   SECTION: MORE INFORMATION
   ============================================================ */



.more-information {
	max-width: 2300px;
	background: #fff;
	padding-top: 10px;
	padding-bottom: 20px;
	margin-left: auto;
	margin-right: auto;
	
}

.more-information .container .row {
	
  display: flex;
  justify-content: space-between;
}

.more-information .container .col-md-6 {
  flex-basis: 100%;
  box-sizing: border-box;
  border: none;
}
	
.more-information .sides {
	background: #191919;
	padding-top: 40px;
	padding-bottom: 40px;
	font-family: "OpenSans", sans-serif;
	margin-top: 20px;
}

.more-information .sides h4 {
	text-align: center;
	color: #fff;
	font-size: clamp(22px, 1.2vw, 44px);
	letter-spacing: 1px;
}

.more-information .sides hr {
	width: clamp(75px, 10vw, 220px);
}

.more-information .sides p {
	color: #fff;
	font-size: clamp(15px, 1vw, 30px);
	padding: clamp(15px, 0.8vw, 30px) clamp(30px, 2vw, 60px);
	line-height: 1.7;
}
@media screen and (max-width: 500px) {
.more-information .col-md-6 {
	padding-right: 0px;
	padding-left: 0px;
}
}




/* ============================
   OASIS NETWORK – PORTFOLIO PAGE
   Monochrome / Clean Layout
   (Override-free + PHP order top-to-bottom)
   ============================ */

/* ============================================================
   1) PAGE WRAPPER (as in PHP: .oasis-portfolio-page)
============================================================ */

/* Reset for this page */
.oasis-portfolio-page * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.oasis-portfolio-page {
    width: 100%;
    background: #ffffff;
    color: #000;
    font-family: 'OpenSans', sans-serif;
    font-size: clamp(14px, 1vw + 0.2rem, 36px);
    line-height: 1.75;
}

/* Hero ko container se bahar nikal kar 100vw kar diya (template scope) */
.page-template-tpl-portfolio-top .portfolio-top-hero {
    width: auto;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    border-radius: 0;
}

/* ============================================================
   2) HERO (as in PHP: .portfolio-top-hero ...)
============================================================ */

.portfolio-top-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #1a1a1a 0%, #050505 100%);
    height: clamp(340px, 28vw, 720px);
}

.portfolio-top-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.portfolio-top-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(35%) contrast(1.05);
    opacity: 0.7;
    transition: transform 0.7s ease;
}

.portfolio-top-hero:hover .portfolio-top-hero-bg img {
    transform: scale(1.04);
}

/* dark overlay + text (inner hero container) */
.portfolio-top-hero-overlay {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: clamp(1200px, 98vw, 3200px);
    margin: 0 auto;
    padding-left: clamp(20px, 4vw, 80px);
    padding-right: clamp(12px, 2vw, 40px);
    color: #fff;
    background: linear-gradient(to right, rgba(0,0,0,0.85) 0%, transparent 70%);
}

/* eyebrow */
.portfolio-top-eyebrow {
    display: inline-block;
    letter-spacing: clamp(1px, 0.2vw, 3px);
    text-transform: uppercase;
    font-size: clamp(11px, 0.6vw + 0.2rem, 26px);
    opacity: 0.9;
    margin-bottom: clamp(3px, 0.4vw, 6px);
}

/* title */
.portfolio-top-title {
    font-family: 'ArbutusSlab', serif;
    font-size: clamp(28px, 2.8vw + 0.2rem, 84px);
    font-weight: 700;
    margin-bottom: clamp(6px, 1vw, 12px);
}

/* subtitle */
.portfolio-top-subtitle {
    font-size: clamp(14px, 1vw + 0.2rem, 36px);
    max-width: clamp(620px, 50vw, 900px);
    line-height: 1.6;
    color: #eeeeee;
}

/* ============================================================
   3) MAIN WRAPPER (as in PHP: .site-main.portfolio-page)
============================================================ */

.portfolio-page {
    background: #f7f9fc;
    font-family: 'OpenSans', sans-serif;
}

/* ============================================================
   4) INTRO (as in PHP: .portfolio-intro -> .oasis-container -> .section-heading ...)
============================================================ */
.portfolio-feature {
    padding-bottom: 0px;
}

.portfolio-intro {
    padding: clamp(50px, 3vw, 90px) 0 clamp(20px, 2vw, 48px);
}

.portfolio-intro .oasis-container {
    background: #000;
    border: none;
}

.portfolio-intro .section-heading {
    margin: 0 auto;
    text-align: center;
    padding: 0 clamp(15px, 1.5vw, 32px);
}

.portfolio-intro .section-heading p {
	padding-left: 0px;
}

.portfolio-title {
	font-size: clamp(28px, 2.2vw, 84px);
    text-transform: uppercase;
    letter-spacing: clamp(0.5px, 0.12vw, 1px);
    margin-bottom: clamp(12px, 0.8vw, 22px);
}

.portfolio-subtitle {
    line-height: 1.7;
    color: #d9d3d3;
}

/* ============================================================
   5) GRID (as in PHP: .portfolio-grid -> .oasis-container -> .row -> .portfolio-item ...)
============================================================ */


.portfolio-feature .oasis-container {
    margin: 0 auto;
    padding-left: clamp(15px, 1vw, 24px);
    padding-right: clamp(15px, 1vw, 24px);
	padding-bottom: 0px;
    background: #000;
    border: none;
}

.portfolio-grid {
	display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: clamp(24px, 1.5vw, 48px);
    padding: clamp(20px, 1.5vw, 40px) 0 clamp(0px, 3vw, 110px);
}

/* ✅ Override-free responsive layout (no more 3/2/1 media blocks needed) */

.portfolio-item {
    margin-bottom: 0;     /* gap handles spacing */
    padding: 0;           /* gap handles spacing */
}

.portfolio-card {
    background: #ffffff;
    border-radius: clamp(10px, 0.7vw, 20px);
    overflow: hidden;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
    display: column;
	height: 100%;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.portfolio-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

.portfolio-image-wrapper {
    position: relative;
    overflow: hidden;
    width: 100%;
    min-height: clamp(180px, 18vw, 250px);
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.portfolio-image-wrapper img,
.portfolio-image-wrapper .img-responsive {
    width: 100%;
    height: clamp(180px, 18vw, 250px);
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.portfolio-card:hover .portfolio-image-wrapper img,
.portfolio-card:hover .portfolio-image-wrapper .img-responsive {
    transform: scale(1.05);
}

.portfolio-content {
    padding: clamp(18px, 1.4vw, 32px) clamp(20px, 1.4vw, 32px) clamp(20px, 1.6vw, 36px);
    flex-grow: 1;
}

.portfolio-item-title {
	color: #555;
    font-size: clamp(18px, 0.9vw + 0.2rem, 34px);
    font-weight: 600;
    margin: 0 0 clamp(8px, 0.6vw, 16px);
    word-wrap: break-word;
}

.portfolio-meta {
    color: #777;
    margin-bottom: clamp(10px, 0.7vw, 18px);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(8px, 0.6vw, 14px);
}

.portfolio-meta .portfolio-tag {	
    display: inline-block;
    background: #000;
    color: #fff;
    padding: clamp(2px, 0.2vw, 4px) clamp(10px, 0.7vw, 18px);
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: clamp(0.5px, 0.06vw, 1px);
}

.portfolio-meta .portfolio-location {
    display: inline-block;
}

.portfolio-desc {
    line-height: 1.7;
    color: #333;
    word-wrap: break-word;
}

/* ============================================================
   6) CTA (as in PHP: .portfolio-cta -> .oasis-container -> .portfolio-cta-inner ...)
============================================================ */

.portfolio-cta {
    background: #000;
    color: #fff;
    padding: clamp(40px, 2.6vw, 72px) clamp(15px, 1.2vw, 32px) 0;
    text-align: center;
}

.portfolio-cta .oasis-container {
    background: #000;
    color: #fff;
    border: none;
}

.portfolio-cta-inner {
    margin: 0 auto;
    padding: 0 clamp(15px, 1.2vw, 32px);
}

.portfolio-cta-inner h2 {
    text-transform: uppercase;
    margin-bottom: clamp(10px, 0.7vw, 18px);
}

.portfolio-cta-inner p {
    margin-bottom: clamp(18px, 1.2vw, 30px);
    text-align: center;    
}

.portfolio-cta .wa-pill { width: 87%; }


/* ===========================================
   RESPONSIVE – max-width: 1024px
   (Tablets - 3 cards)
=========================================== */
@media (max-width: 1024px) and (min-width: 768px) {
	.portfolio-grid {
		gap: 5px;
        grid-template-columns: repeat(3, minmax(0,1fr));
    }

    .portfolio-item {
		
        margin-bottom: clamp(20px, 3.4vw, 25px);
        padding: 0 clamp(5px, 2vw, 10px);
    }
}

@media (max-width: 767px) and (min-width: 576px) {
	.portfolio-grid {
        gap: 5px;
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
	 .portfolio-item {
        margin-bottom: clamp(20px, 4vw, 25px);
        padding: 0 5px;
    }
}

@media (max-width: 575px) {
	.portfolio-grid {
		 gap: 5px;
        grid-template-columns: repeat(1, minmax(0,1fr));
    }

    .portfolio-item {
        margin-bottom: 20px;
        padding: 0 5px;
    }
}

/* ============================================================
   ✅ CLUBBED RESPONSIVE (ONE MEDIA ONLY)
   Rule:
   - MIN value = from @media (max-width: 575px)
   - if not found there → take from @media (max-width: 767px) and (min-width: 576px)
   - if not found there → take from @media (max-width: 1024px) and (min-width: 768px)
   - MAX value = from @media (max-width: 1024px) and (min-width: 768px)
============================================================ */

@media (max-width: 1024px) {

    /* ----------------------------
       HERO
    ---------------------------- */

    

    .portfolio-top-hero {
        height: clamp(220px, 35vw, 260px);
    }
	
	.portfolio-top-hero-overlay {
        max-width: 100%;
        padding-left: clamp(14px, 4vw, 20px);
        padding-right: clamp(10px, 3vw, 16px);
        background: linear-gradient(
            to bottom,
            rgba(0,0,0,0.75),
            transparent 80%
        );
    }

    .portfolio-top-title {
        font-size: clamp(22px, 3vw + 0.2rem, 30px);
    }

    .portfolio-top-subtitle {
        font-size: clamp(13px, 1.6vw + 0.2rem, 17px);
    }

    .portfolio-top-eyebrow {
        font-size: clamp(10px, 1.2vw + 0.2rem, 12px);
    }

  
    /* ----------------------------
       INTRO
       575: padding 20px 10px 10px
       1024: padding clamp(30px..35px) clamp(10px..15px) clamp(10px..15px)
       → min=20/10/10, max=35/15/15
    ---------------------------- */

    .portfolio-intro {
        padding: clamp(20px, 4vw, 35px) 0 clamp(10px, 3vw, 15px);
    }
	
	    /* ----------------------------
       TITLE
       (only in 1024 block)
       min not found in 575/767 → min = 14px, max = 22px
    ---------------------------- */

    .portfolio-title {
        font-size: clamp(14px, 3vw, 22px);
    }

    /* ----------------------------
       SUBTITLE
       575: 13px
       767: 14px
       1024: clamp(14..15)
       → min=13, max=15
    ---------------------------- */

    .portfolio-subtitle {
        font-size: clamp(13px, 2.4vw, 15px);
        line-height: 1.6;
    }

    /* ----------------------------
       CARD SHADOW
       (only in 1024 block)
    ---------------------------- */

    .portfolio-card {
        box-shadow: 0 4px 14px rgba(0,0,0,0.08);
    }

    /* ----------------------------
       CONTENT PADDING
       575: 12px 15px 15px
       767: 15px 15px 18px
       1024: clamp(15..18) clamp(16..20) clamp(18..22)
       → min=12/15/15, max=18/20/22
    ---------------------------- */

    .portfolio-content {
        padding: clamp(12px, 2.6vw, 18px) clamp(15px, 2.6vw, 20px) clamp(15px, 3vw, 22px);
    }

    /* ----------------------------
       ITEM TITLE
       575: 15px
       767: 16px
       1024: clamp(16..18)
       → min=15, max=18
    ---------------------------- */

    .portfolio-item-title {
        font-size: clamp(14px, 1vw, 16px);
    }

    /* ----------------------------
       META (font + gap)
       575: font 11px, gap 5px
       767: font 12px, gap 6px
       1024: clamp(12..13), gap clamp(6..8)
       → min=11 + 5, max=13 + 8
    ---------------------------- */

    .portfolio-meta {
        font-size: clamp(11px, 2.2vw, 13px);
        gap: clamp(5px, 1.6vw, 8px);
    }

    /* ----------------------------
       TAG (font + padding)
       575: font 9px, padding 2px 7px
       767: font 10px, padding 2px 8px
       1024: font clamp(10..11), padding clamp(2..3) clamp(8..10)
       → min=9 + (2 7), max=11 + (3 10)
    ---------------------------- */

    .portfolio-meta .portfolio-tag {
        font-size: clamp(9px, 2vw, 11px);
        padding: clamp(2px, 0.4vw, 3px) clamp(7px, 1.8vw, 10px);
    }

    /* ----------------------------
       DESC
       575: 12px
       767: 13px
       1024: clamp(13..14)
       → min=12, max=14
    ---------------------------- */

    .portfolio-desc {
        font-size: clamp(12px, 2.4vw, 14px);
        line-height: 1.6;
    }

    /* ----------------------------
       CTA PADDING
       575: 25px 10px 0
       1024: clamp(30..35) clamp(10..15) 0
       → min=25/10/0, max=35/15/0
    ---------------------------- */

    .portfolio-cta {
        padding: clamp(0px, 3vw, 35px) clamp(10px, 3vw, 15px) clamp(0px, 3vw, 35px);
    }

    /* ----------------------------
       CTA INNER PADDING
       (only in 1024 block)
       min not found → min=10, max=15
    ---------------------------- */

    .portfolio-cta-inner {
        padding: 0 clamp(10px, 3vw, 15px);
    }

    /* ----------------------------
       CTA H2
       575: 16px
       1024: clamp(18..20)
       → min=16, max=20
    ---------------------------- */

    .portfolio-cta-inner h2 {
        font-size: clamp(16px, 3vw, 20px);
        margin-bottom: clamp(8px, 1.8vw, 10px);
    }

    /* ----------------------------
       CTA P
       575: 12px
       1024: clamp(13..14), margin-bottom clamp(16..20)
       → min=12, max=14
    ---------------------------- */

    .portfolio-cta-inner p {
        font-size: clamp(12px, 2.4vw, 14px);
        margin-bottom: clamp(16px, 3vw, 20px);
       
    }

   
}


/* =========portfolio page end============*/

/* ============================
   OASIS NETWORK – CONTACT PAGE
   Monochrome (Black & White)
   FINAL UPDATED (Equal Height + Center Content)
   ============================ */

/* ============================
   0) RESET + BASE
   ============================ */

.oasis-contact-page * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.oasis-contact-page {
    width: 100%;
    background: #ffffff;
    color: #000;
    font-family: 'OpenSans', sans-serif;
    font-size: clamp(14px, 1vw + 0.2rem, 36px);
    line-height: 1.75;
}

/* ============================
   1) CONTACT PAGE – MAP (PHP: .contact-map-wrapper)
   ============================ */

.contact-map-wrapper {
    width: 100%;
    margin-top: 0;
    position: relative;
    overflow: hidden;
}

.contact-map-wrapper iframe {
    width: 100% !important;
    height: clamp(320px, 12vw, 640px) !important;
    border: 0 !important;
    display: block;
}

/* 🔹 Overlay ko transparent kar diya */
.contact-map-wrapper::after {
    content: "";
    position: absolute;
    inset: 0;
    background: transparent; /* 👈 ab gray/black nahi */
    pointer-events: none;
}


/* ============================
   2) CONTACT MAIN SECTION (PHP: div.contact)
   ============================ */

div.contact {
    background: #000000;
    padding: clamp(20px, 1.5vw, 40px) 0 clamp(10px, 1vw, 24px);
    color: #ffffff;
    position: relative;
    overflow: hidden;
}

div.contact::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #000000;
    opacity: 0.9;
    pointer-events: none;
}

div.contact > .oasis-container {
    position: relative;
    z-index: 2;
    background: #000000;
    border: none;
	padding-bottom: 0px;
}

/* ============================
   3) HEADING + INTRO
   ============================ */

div.contact > .oasis-container > h1,
div.contact > .oasis-container > h2 {
    margin-bottom: clamp(10px, 0.6vw, 20px);
    color: #f9fafb;
}

div.contact > .oasis-container > p {
	font-size: clamp(13px, 1.4vw, 16px);
    color: #e5e7eb;
    margin-bottom: clamp(32px, 2vw, 60px);
}

/* ============================
   4) GRID + EQUAL HEIGHT COLUMNS (DESKTOP)
   ============================ */

/* Equal height columns: row flex + columns stretch */
div.contact .row {
    display: flex;
    align-items: stretch;
}

/* Column becomes flex so card can stretch full height */
div.contact .col-md-6 {
    padding-left: clamp(15px, 2.2vw, 150px);
    padding-right: clamp(15px, 2.2vw, 150px);
    display: flex;
}

/* ============================
   5) CARDS (Form + Info) – FULL HEIGHT
   ============================ */

.col-md-6 .contact-form,
.col-md-6 .contact-info {
    background: #04060c;
    border-radius: clamp(20px, 1.4vw, 36px);
    padding: clamp(24px, 1.6vw, 44px) clamp(22px, 1.4vw, 40px);
    box-shadow: 0 18px 45px rgba(0,0,0,0.7);
    border: 1px solid rgba(148,163,184,0.45);
    width: 100%;
    height: 100%;
}

/* Center align BOTH cards content (Desktop default) */
.contact-form {
    display: flex;
    flex-direction: column;
    justify-content: center;   /* vertical center */
    align-items: center;       /* horizontal center */
    text-align: center;
}

.col-md-6 .contact-info {
    display: flex;
    flex-direction: column;
    justify-content: center;   /* vertical center */
    align-items: center;       /* horizontal center */
    text-align: center;
}

/* Make form inside card stay full width (so inputs don’t become tiny) */
.contact-form form {
    width: 100%;
    text-align: left; /* inputs labels better */
}

/* Card headings */
.contact-form h3,
.contact-info h3 {
    letter-spacing: clamp(0.06em, 0.1vw, 0.12em);
    text-transform: uppercase;
    margin: 0 0 clamp(8px, 0.6vw, 18px);
    color: #f3f4f6;
    text-align: center;
    width: 100%;
}

/* Thin rule inside cards */
.contact-form hr,
.contact-info hr {
    border: 0;
    border-top: 1px solid rgba(55,65,81,0.9);
    margin: clamp(8px, 0.6vw, 16px) 0 clamp(18px, 1vw, 28px);
    width: 100%;
}

/* ============================
   6) FORM FIELDS
   ============================ */

.contact-form .form-group {
    margin-bottom: clamp(12px, 0.9vw, 22px);
    position: relative;
}

.contact-form .form-control {
    width: 100%;
    border-radius: clamp(10px, 0.9vw, 20px);
    border: 1px solid #4b5563;
    padding: 0 clamp(11px, 0.9vw, 22px);
    color: #111827;
    background: #f9fafb;
    outline: none;
    transition:
        border-color 0.3s ease,
        box-shadow 0.3s ease,
        background-color 0.3s ease,
        transform 0.2s ease;
}

.contact-form .form-control::placeholder {
    color: #9ca3af;
    transition: color 0.3s ease;
}

.contact-form .form-control:focus::placeholder {
    color: #6b7280;
}

.contact-form .form-control:focus {
    border-color: #ffffff;
    box-shadow:
        0 0 0 3px rgba(255,255,255,0.2),
        0 4px 12px rgba(0,0,0,0.3);
    background-color: #ffffff;
    transform: translateY(-2px);
}

.contact-form .form-control:hover:not(:focus) {
    border-color: #6b7280;
    background-color: #ffffff;
}

.contact-form textarea.form-control {
    resize: vertical;
    min-height: clamp(110px, 6vw, 220px);
}

/* Submit button layout (visual style global .oasis-btn se) */
.contact-form .oasis-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: clamp(20px, 1.4vw, 32px) auto 0 auto;
}

/* Phone + Share location row (if shortcode uses these classes) */
.contact-form .phone-row {
    display: flex;
    align-items: center;
    gap: clamp(14px, 1vw, 26px);
}

.contact-form .phone-row .phone-input-wrap {
    flex: 1 1 auto;
}

.contact-form .share-location-label {
    display: flex;
    align-items: center;
    white-space: nowrap;
    cursor: pointer;
    line-height: 1;
    margin-top: clamp(4px, 0.4vw, 10px);
}

.contact-form .share-location-label input[type="checkbox"] {
    margin-right: clamp(6px, 0.5vw, 12px);
    transform: translateY(-1px);
}

/* ============================
   7) RIGHT SIDE INFO
   ============================ */

.contact-info p {
    color: #e5e7eb;
    margin: 0 0 clamp(16px, 1vw, 28px);
    transition: color 0.3s ease;
    text-align: center;
    width: 100%;
}

.contact-info p:hover {
    color: #ffffff;
}

.contact-info strong {
    font-weight: 600;
    color: #f9fafb;
    position: relative;
    display: inline-block;
}

.contact-info strong::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #ffffff, transparent);
    transition: width 0.3s ease;
}

.contact-info p:hover strong::after {
    width: 100%;
}

.contact-info a {
    color: #f3f4f6;
    text-decoration: none;
    border-bottom: 1px dotted rgba(249,250,251,0.45);
    transition: all 0.3s ease;
    position: relative;
}

.contact-info a::before {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: #ffffff;
    transition: width 0.3s ease;
}

.contact-info a:hover {
    border-bottom-style: solid;
    color: #ffffff;
    transform: translateX(2px);
}

.contact-info a:hover::before {
    width: 100%;
}

/* ============================
   8) MAP SEO DESCRIPTION
   ============================ */

.map-seo-description {
    max-width: clamp(1200px, 98vw, 3200px);
    margin: 0 auto 0 auto;
    background: #000000;
}

.map-seo-description h2 {
	font-size: clamp(20px, 2vw, 40px);
    color: #ffffff;
    letter-spacing: clamp(0.5px, 0.06vw, 1px);
    margin-bottom: clamp(10px, 0.8vw, 18px);
}

.map-seo-description p {
    color: #dcdcdc;
    margin-bottom: clamp(12px, 0.8vw, 20px);
}

.map-seo-description strong {
    color: #ffffff;
    font-weight: 600;
}

.map-seo-description p + p {
    border-top: 1px solid rgba(255,255,255,0.10);
    padding-top: clamp(12px, 0.9vw, 22px);
}

.map-seo-description h2,
.map-seo-description p {
    background: #04060c;
    border-radius: clamp(20px, 1.4vw, 36px);
    padding: clamp(24px, 1.6vw, 44px) clamp(22px, 1.4vw, 40px);
    box-shadow: 0 18px 45px rgba(0,0,0,0.7);
    border: 1px solid rgba(148,163,184,0.45);
}

/* ============================
   9) RESPONSIVE (max-width: 1024px)
   ============================ */
   
@media screen and (max-width: 1024px) {
	.map-seo-description h2 {
	font-size: clamp(15px, 3vw, 20px);
	letter-spacing: 0px ;
	}
}

@media screen and (max-width: 767px) {
	.contact-form .form-control::placeholder {
    font-size: clamp(10px, 1.5vw, 14px);
}

    /* back to normal stacked layout */
    div.contact .row {
        display: block;		
    }

    div.contact .col-md-6 {
        display: block;
        padding-left: 0;
        padding-right: 0;
    }

    div.contact {
        padding: clamp(24px, 4vw, 40px) 0 clamp(30px, 4.5vw, 50px);
    }

    div.contact > .oasis-container {
        padding-left: clamp(10px, 2.5vw, 15px);
        padding-right: clamp(10px, 2.5vw, 15px);		
    }
	div.contact > .oasis-container > h1 {
		font-size: clamp(17px, 1.5vw, 24px);
	}

    .contact-form,
    .contact-info {
		align-items: center;
        justify-content: center;
        text-align: center;
        margin-bottom: clamp(14px, 3vw, 20px);
        border-radius: clamp(12px, 2.6vw, 16px);
        box-shadow: 0 12px 28px rgba(0,0,0,0.8);

    }

    .contact-info p,
    .contact-info h3 {
		text-align: center;        
    }

    .contact-form .phone-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .contact-form .oasis-btn {
        margin-top: clamp(14px, 3vw, 18px);
    }
	
}


/* ============================================
   OASIS FAQ – PAGE
============================================ */

/* Reset for this page */
.oasis-faq-page * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.oasis-faq-page {
    width: 100%;
    background: #ffffff;
    color: #000;
	font-family: 'OpenSans', sans-serif;
    font-size: clamp(14px, 1vw + 0.2rem, 36px);
    line-height: 1.75;
}

/* ===================== FAQ PAGE BANNER ===================== */

.banner-faq {
    background: #000;
    padding: 0;
    margin: 0;
}

.banner-faq .banner-inner {
    max-width: clamp(1200px, 98vw, 3200px);
    margin: 0 auto;
    overflow: hidden;
}

.banner-faq img {
    width: 100%;
    height: auto;
    max-height: clamp(320px, 24vw, 760px); /* 320–380 approx */
    object-fit: fill;
    display: block;
    filter: grayscale(100%);
}

/* ============================================
   MAIN FAQ WRAPPER
============================================ */

.oasis-faq-wrapper {
    width: 100%;
    max-width: clamp(1200px, 98vw, 3200px); /* main container */
    margin: clamp(40px, 4vw, 80px) auto clamp(60px, 5vw, 120px);
    padding: 0 clamp(16px, 2vw, 32px);
    font-family: 'OpenSans', sans-serif;
	font-weight: 500;
    color: #111;
}

/* HEADER */

.oasis-faq-header {
    text-align: center;
    margin-bottom: clamp(32px, 3vw, 64px);
}

.oasis-faq-header h1 {
    
    letter-spacing: clamp(0.06em, 0.4vw, 0.12em);
    text-transform: uppercase;
    margin-bottom: clamp(10px, 1.8vw, 20px);
    color: #000;
}

.oasis-faq-header p {
    color: #555;
}

/* ============================================
   LIST CARD
============================================ */

.oasis-faq-list {
    border-radius: clamp(18px, 1.8vw, 36px); /* 18 → 36 */
    border: 1px solid #e0e0e0;
    background: #ffffff;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

/* ITEM SEPARATOR */
.oasis-faq-item + .oasis-faq-item {
    border-top: 1px solid #f0f0f0;
}

/* QUESTION BUTTON */

.oasis-faq-question {
    width: 100%;
    border: none;
    outline: none;
    background: #ffffff;
    cursor: pointer;

    padding: clamp(16px, 1.8vw, 32px) clamp(22px, 2.2vw, 44px); /* 16/22 → 32/44 */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(16px, 1.6vw, 32px); /* 16 → 32 */

     font-weight: 600;
    
    color: #111;
    transition: background 0.25s ease, color 0.25s ease;
}

.oasis-faq-question:hover {
    background: #f7f7f7;
}

/* EXPANDED STATE */
.oasis-faq-item.is-open .oasis-faq-question {
    background: #f2f2f2;
}

/* ICON (+ / -) CIRCLE */

.oasis-faq-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: clamp(26px, 2vw, 52px);   /* 26 → 52 */
    height: clamp(26px, 2vw, 52px);  /* 26 → 52 */
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.16);

    font-size: clamp(16px, 1.3vw, 32px); /* 16 → 32 */
    line-height: 1;
    color: #111;
    transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.oasis-faq-question[aria-expanded="true"] .oasis-faq-icon {
    transform: rotate(45deg);      /* + turns into x-style */
    background: #000;
    color: #fff;
    border-color: #000;
}

/* ANSWER CONTAINER – COLLAPSED BY DEFAULT */

.oasis-faq-answer {
    max-height: 0;
    overflow: hidden;
    background: #fafafa;
    transition: max-height 0.25s ease;
}

/* ANSWER CONTENT */

.oasis-faq-answer-inner {
    padding: 0 clamp(22px, 2vw, 44px) clamp(16px, 1.8vw, 32px); /* 0 22 16 → 0–44, 16–32 */
    line-height: 1.8;
    color: #333;
}

.oasis-faq-answer-inner p {
    margin: 0 0 clamp(10px, 1.4vw, 20px); /* 10 → 20 */
}

.oasis-faq-answer-inner ul {
    margin: clamp(6px, 1vw, 12px) 0 clamp(6px, 1vw, 12px) clamp(18px, 1.8vw, 36px); /* 6/0/6/18 */
    padding: 0;
}

.oasis-faq-answer-inner li {
    margin-bottom: clamp(4px, 0.8vw, 8px); /* 4 → 8 */
}

/* ============================================
   PREMIUM FAQ HEADING CARD
============================================ */

.faq-heading-card {
    width: 100%;
    max-width: clamp(900px, 70vw, 1600px);  /* 900 → 1600 main sub-container */
    margin: clamp(-25px, -2vw, -15px) auto clamp(25px, 3vw, 50px);
    padding: clamp(40px, 3.4vw, 80px) clamp(35px, 3vw, 70px);

    background: rgba(255,255,255,0.65);    /* Frosted glass effect */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    border: 1px solid rgba(255,255,255,0.35);
    border-radius: clamp(20px, 1.6vw, 40px); /* 20 → 40 */
    box-shadow:
        0 20px 40px rgba(0,0,0,0.18),
        0 4px 10px rgba(0,0,0,0.10);

    text-align: center;
    animation: faqFadeInUp 0.7s ease-out;
}

/* Heading inside card */
.faq-heading-card h1 {    
    letter-spacing: clamp(1px, 0.25vw, 2px); /* 1 → 2 */
    margin-bottom: clamp(12px, 1.4vw, 24px); /* 12 → 24 */
    color: #111;
}

/* Subtext */
.faq-heading-card p {    
    color: #333;    
    max-width: clamp(700px, 60vw, 1200px);
    margin: 0 auto;
}

/* Animation */
@keyframes faqFadeInUp {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   RESPONSIVE – 1024 AND BELOW
   (Purane 600/768 ko yahi pe merge kiya)
============================================ */

@media (max-width: 1024px) {

    .oasis-faq-wrapper {
        margin-top: clamp(24px, 4vw, 40px);          /* 24 base → up to 40 */
        margin-bottom: clamp(40px, 4vw, 60px);       /* 40 base → up to 60 */
        padding: 0 clamp(10px, 4vw, 16px);           /* 10 → 16 */
    }

    .oasis-faq-header h1 {
        /* 24px mobile → 48 max */
        font-size: clamp(24px, 3vw + 0.2rem, 48px);
        letter-spacing: clamp(0.04em, 0.3vw, 0.08em);
    }

    .oasis-faq-header p {
        font-size: clamp(14px, 1.2vw + 0.2rem, 20px); /* 14 → 20 */
    }

    .oasis-faq-question {
        padding: clamp(14px, 3vw, 20px) clamp(16px, 3vw, 26px); /* 14/16 base */
        font-size: clamp(14px, 1.2vw + 0.2rem, 24px);           /* 14 → 24 */
    }

    .oasis-faq-answer-inner {
        padding: 0 clamp(16px, 3vw, 22px) clamp(14px, 3vw, 20px); /* 0 16 14 */
        font-size: clamp(13px, 1.1vw + 0.2rem, 20px);             /* 13 → 20 */
    }

    .faq-heading-card {
        padding: clamp(28px, 4vw, 40px) clamp(20px, 4vw, 30px); /* 28/20 base */
        margin-top: clamp(-20px, -3vw, -10px);
    }

    .faq-heading-card h1 {
        font-size: clamp(22px, 3vw, 40px);          /* 22 → 40 */
        letter-spacing: clamp(0.5px, 0.25vw, 1px);  /* .5 → 1 */
    }

    .faq-heading-card p {
        font-size: clamp(14px, 1.1vw + 0.2rem, 20px); /* 14 → 20 */
    }

    .banner-faq img {
        max-height: clamp(260px, 30vw, 340px); /* mobile view controlled */
    }
}


/* ============================================
   OASIS – TERMS & CONDITIONS PAGE
   White Page + Dark Hero – Premium, Responsive
============================================ */

/* Reset for this page */
.oasis-terms-page * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.oasis-terms-page {
    width: 100%;
    background: #ffffff;
    color: #000;
    font-family: 'OpenSans', sans-serif;
    line-height: 1.75;
}

/* ============================================
   HERO – FULL WIDTH (BREAK OUT OF CONTAINER)
============================================ */

/* Hero ko container se bahar nikal kar 100vw kar diya */
.page-template-tpl-terms .terms-hero {
    width: auto;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    border-radius: 0;
}

/* PREMIUM DARK OVERLAY HERO */
.terms-hero {
    position: relative;
    height: clamp(360px, 30vw, 900px);
    overflow: hidden;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #1a1a1a 0%, #050505 100%);
    height: clamp(340px, 28vw, 720px);
}

.terms-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.terms-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(35%) contrast(1.05);
    opacity: 0.7;
    transition: transform 0.7s ease;
	height: clamp(340px, 28vw, 820px);
}

.terms-hero:hover .terms-hero-bg img {
    transform: scale(1.04);
}

/* dark overlay + text (inner hero container) */
.terms-hero-overlay {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: clamp(1200px, 98vw, 3200px); /* global container pattern ke hisaab se */
    margin: 0 auto;
    padding-left: clamp(20px, 4vw, 80px);
    padding-right: clamp(12px, 2vw, 40px);
    color: #fff;
    background: linear-gradient(
        to right,
        rgba(0,0,0,0.85) 0%,
        transparent 70%
    );
}

/* eyebrow */
.terms-eyebrow {
    display: inline-block;
    letter-spacing: clamp(1px, 0.2vw, 3px);
    text-transform: uppercase;
    font-size: clamp(11px, 0.6vw + 0.2rem, 26px); /* global font system se match */
    opacity: 0.9;
    margin-bottom: clamp(3px, 0.4vw, 6px);
}

/* main title – clamp (global h1 pattern jaisa) */
.terms-title {
    font-family: 'ArbutusSlab', serif;
    font-size: clamp(28px, 2.8vw + 0.2rem, 84px);
    font-weight: 700;
    margin-bottom: clamp(6px, 1vw, 12px);
}

/* subtitle – global p pattern ke saath aligned */
.terms-subtitle {
    font-size: clamp(14px, 1vw + 0.2rem, 36px);
    max-width: clamp(620px, 50vw, 900px);
    line-height: 1.6;
    color: #eeeeee;
}

/* ============================================
   CONTENT – MINIMAL, CLEAN
============================================ */

/* Content section ko bhi container se bahar nikaal diya */
.page-template-tpl-terms .terms-content-section {
    width: auto;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.terms-content-section {
    width: 100%;
    padding: clamp(10px, 2vw, 20px) 0; /* vertical spacing, horizontal spacing global .oasis-container se aayega */
}

/* Inner content – card layout inside global .oasis-container */
.oasis-terms-page .terms-content-section .oasis-container {
    background: #ffffff;
    border-radius: clamp(8px, 1vw, 16px);
    border: 1px solid #eaeaea;
    padding: clamp(10px, 2vw, 20px) clamp(16px, 2vw, 28px) clamp(14px, 2vw, 24px);
}

/* each logical block */
.terms-block {
    margin-bottom: clamp(18px, 2vw, 28px);
}

/* headings – NOW USING H3 (same style system as privacy h3)
   NOTE: font-size / font-family global h3 se aayega */
.terms-block h3 {
    color: #000;
    margin-top: clamp(12px, 2vw, 24px);
    margin-bottom: clamp(6px, 1vw, 12px);
    padding-left: clamp(14px, 1.2vw, 24px);
    position: relative;
}

.terms-block h3::before {
    content: '';
    position: absolute;
    left: 0;
    top: clamp(4px, 0.6vw, 10px);
    width: clamp(4px, 0.5vw, 10px);
    height: 60%;
    background: #000;
    border-radius: clamp(4px, 0.6vw, 10px);
}

/* paragraphs – ONLY color + spacing (font-size global p se) */
.terms-block p {
    color: #222;
    margin-bottom: clamp(8px, 1vw, 14px);
    line-height: 1.75;
}

/* lists – spacing + bullets, font-size global li se */
.terms-block ul {
    list-style: disc;
    padding-left: clamp(1.3rem, 2vw, 2rem);
    margin-bottom: clamp(8px, 1vw, 16px);
}

.terms-block ul li {
    color: #222;
    margin-bottom: clamp(4px, 1vw, 10px);
    line-height: 1.7;
}

/* nested list a bit tighter */
.terms-block ul ul {
    list-style: circle;
    margin-top: clamp(4px, 0.6vw, 10px);
}

/* links */
.terms-content a {
    color: #000;
    font-weight: 600;
    border-bottom: 1px dashed #555;
    text-decoration: none;
}

.terms-content a:hover {
    border-bottom-style: solid;
}

/* ============================================
   RESPONSIVE
============================================ */

@media (max-width: 1024px) {
    /* tablet & below – overlay thoda compact */
    .terms-hero-overlay {
        max-width: 100%;
        padding-left: clamp(14px, 4vw, 20px);
        padding-right: clamp(10px, 3vw, 16px);
        background: linear-gradient(
            to bottom,
            rgba(0,0,0,0.75),
            transparent 80%
        );
    }

    .terms-hero {
        height: clamp(220px, 35vw, 260px);
    }

    .terms-content {
        padding: clamp(8px, 3vw, 14px);
    }

    /* hero text size overrides only */
    .terms-title {
        font-size: clamp(22px, 3vw + 0.2rem, 30px);
    }

    .terms-subtitle {
        font-size: clamp(13px, 1.6vw + 0.2rem, 17px);
    }

    .terms-block p,
    .terms-block ul li {
        /* font-size global system se aayega */
    }

    .terms-eyebrow {
        font-size: clamp(10px, 1.2vw + 0.2rem, 12px);
    }
}

/* ============================================
   PRIVACY POLICY PAGE – FULLY MATCHED SYSTEM
   (Aligned with TERMS + REFUND global structure)
============================================ */

/* RESET */
.oasis-privacy-page * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* PAGE WRAPPER */
.oasis-privacy-page {
    width: 100%;
    background: #ffffff;
    color: #000;
    font-family: 'OpenSans', sans-serif;
    line-height: 1.75;
}

/* ============================================
   HERO – SAME STYLE AS TERMS & REFUND
============================================ */

/* Full-width breakout */
.page-template-tpl-privacy .privacy-hero {
    width: auto;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    border-radius: 0;
}

.privacy-hero {
    position: relative;
    height: clamp(360px, 30vw, 900px);
    overflow: hidden;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #1a1a1a 0%, #050505 100%);
	height: clamp(340px, 28vw, 720px);
}

/* Background image */
.privacy-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.privacy-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(35%) contrast(1.05);
    opacity: 0.7;
    transition: transform 0.7s ease;
	height: clamp(340px, 28vw, 820px);
}

.privacy-hero:hover .privacy-hero-bg img {
    transform: scale(1.04);
}

/* Overlay container */
.privacy-hero-overlay {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: clamp(1200px, 98vw, 3200px);
    margin: 0 auto;
    padding-left: clamp(20px, 4vw, 80px);
    padding-right: clamp(12px, 2vw, 40px);
    color: #fff;
    background: linear-gradient(
        to right,
        rgba(0,0,0,0.85) 0%,
        transparent 70%
    );
}

/* Eyebrow */
.privacy-eyebrow {
    display: inline-block;
    letter-spacing: clamp(1px, 0.2vw, 3px);
    text-transform: uppercase;
    font-size: clamp(11px, 0.6vw + 0.2rem, 26px);
    opacity: 0.9;
    margin-bottom: clamp(3px, 0.4vw, 6px);
}

/* Title */
.privacy-title {
    font-family: 'ArbutusSlab', serif;
    font-size: clamp(28px, 2.8vw + 0.2rem, 84px);
    font-weight: 700;
    margin-bottom: clamp(6px, 1vw, 12px);
}

/* Subtitle */
.privacy-subtitle {
    font-size: clamp(14px, 1vw + 0.2rem, 36px);
    max-width: clamp(620px, 50vw, 900px);
    line-height: 1.6;
    color: #eeeeee;
}

/* ============================================
   CONTENT SECTION
============================================ */

.page-template-tpl-privacy .privacy-content-section {
    width: auto;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.privacy-content-section {
    width: 100%;
    padding: clamp(10px, 2vw, 20px) 0;
}

/* Card (inside global .oasis-container) */
.oasis-privacy-page .privacy-content-section .oasis-container {
    background: #ffffff;
    border-radius: clamp(8px, 1vw, 16px);
    border: 1px solid #eaeaea;
    padding: clamp(10px, 2vw, 20px) clamp(16px, 2vw, 28px) clamp(14px, 2vw, 24px);
}


/* Blocks */
.privacy-content-block {
    margin-bottom: clamp(18px, 2vw, 28px);
}

/* Optional divider */
.privacy-section-divider {
    height: 1px;
    background: #eee;
    margin: clamp(10px, 2vw, 20px) 0;
}

/* ============================================
   HEADINGS – LEFT BAR STYLE (global h3)
============================================ */

.privacy-content-block h3 {
    margin-top: clamp(12px, 2vw, 24px);
    margin-bottom: clamp(6px, 1vw, 12px);
    padding-left: clamp(14px, 1.2vw, 24px);
    color: #000;
    position: relative;
}

.privacy-content-block h3::before {
    content: '';
    position: absolute;
    left: 0;
    top: clamp(4px, 0.6vw, 10px);
    width: clamp(4px, 0.5vw, 10px);
    height: 60%;
    background: #000;
    border-radius: clamp(4px, 0.6vw, 10px);
}

/* ============================================
   PARAGRAPHS
============================================ */

.privacy-content-block p {
    color: #222;
    margin-bottom: clamp(8px, 1vw, 14px);
}

.privacy-content-block p strong {
    color: #000;
}

/* ============================================
   LISTS (matching refund/terms spacing)
============================================ */

.privacy-content-block ul {
    list-style: disc;
    padding-left: clamp(1.3rem, 2vw, 2rem);
    margin-bottom: clamp(8px, 1vw, 16px);
}

.privacy-content-block ul li {
    color: #222;
    margin-bottom: clamp(4px, 1vw, 10px);
    line-height: 1.7;
}

.privacy-content-block ul ul {
    list-style: circle;
    margin-top: clamp(4px, 0.6vw, 10px);
}

/* ============================================
   CALLOUT BOXES
============================================ */

.privacy-data-point {
    padding: clamp(10px, 1.6vw, 14px) clamp(14px, 2vw, 20px);
    margin: clamp(10px, 1.6vw, 14px) 0;
    background: #fafafa;
    border-left: 4px solid #000;
    border-radius: 6px;
}

/* ============================================
   LINKS
============================================ */

.privacy-content-section a {
    color: #000;
    font-weight: 600;
    border-bottom: 1px dashed #555;
    text-decoration: none;
}

.privacy-content-section a:hover {
    border-bottom-style: solid;
}

/* ============================================
   RESPONSIVE
============================================ */

@media (max-width: 1024px) {
    .privacy-hero-overlay {
        max-width: 100%;
        padding-left: clamp(14px, 4vw, 20px);
        padding-right: clamp(10px, 3vw, 16px);
        background: linear-gradient(
            to bottom,
            rgba(0,0,0,0.75),
            transparent 80%
        );
    }

    .privacy-hero {
        height: clamp(220px, 35vw, 260px);
    }
.privacy-content-block {
        padding: clamp(8px, 3vw, 14px);
    }

    .privacy-title {
        font-size: clamp(22px, 3vw + 0.2rem, 30px);
    }

    .privacy-subtitle {
        font-size: clamp(13px, 1.6vw + 0.2rem, 17px);
    }
	
	.privacy-content-block p,
    .privacy-content-block ul li {
        /* font-size global system se aayega */
    }

    .privacy-eyebrow {
        font-size: clamp(10px, 1.2vw + 0.2rem, 12px);
    }
	
}


/* ============================================
   OASIS – REFUND & RETURN POLICY PAGE
   White Page + Dark Hero – Premium, Responsive
============================================ */

/* Reset for this page */
.oasis-refund-page * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.oasis-refund-page {
    width: 100%;
    background: #ffffff;
    color: #000;
    font-family: 'OpenSans', sans-serif;
    line-height: 1.75;
}

/* ============================================
   HERO – FULL WIDTH (BREAK OUT OF CONTAINER)
============================================ */

/* Hero ko container se bahar nikal kar 100vw kar diya */
.page-template-tpl-refund .refund-hero {
    width: auto;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    border-radius: 0;
}

/* PREMIUM DARK OVERLAY HERO */
.refund-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #1a1a1a 0%, #050505 100%);
    height: clamp(340px, 28vw, 720px);
}

.refund-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.refund-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(35%) contrast(1.05);
    opacity: 0.7;
    transition: transform 0.7s ease;
	height: clamp(340px, 28vw, 820px);
}

.refund-hero:hover .refund-hero-bg img {
    transform: scale(1.04);
}

/* dark overlay + text (inner hero container) */
.refund-hero-overlay {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: clamp(1200px, 98vw, 3200px); /* global container pattern ke hisaab se */
    margin: 0 auto;
    padding-left: clamp(20px, 4vw, 80px);
    padding-right: clamp(12px, 2vw, 40px);
    color: #fff;
    background: linear-gradient(
        to right,
        rgba(0,0,0,0.85) 0%,
        transparent 70%
    );
}

/* eyebrow (e.g. “Policy Update • 7 Days Return”) */
.refund-eyebrow {
    display: inline-block;
    letter-spacing: clamp(1px, 0.2vw, 3px);
    text-transform: uppercase;
    font-size: clamp(11px, 0.6vw + 0.2rem, 26px);
    opacity: 0.9;
    margin-bottom: clamp(3px, 0.4vw, 6px);
}

/* main title – global h1 pattern jaisa feel */
.refund-title {
    font-family: 'ArbutusSlab', serif;
    font-size: clamp(28px, 2.8vw + 0.2rem, 84px);
    font-weight: 700;
    margin-bottom: clamp(6px, 1vw, 12px);
}

/* subtitle – global p system ke saath align */
.refund-subtitle {
    font-size: clamp(14px, 1vw + 0.2rem, 36px);
    max-width: clamp(620px, 50vw, 900px);
    line-height: 1.6;
    color: #eeeeee;
}

/* ============================================
   CONTENT – MINIMAL, CLEAN
============================================ */

/* Content section ko bhi container se bahar nikaal diya */
.page-template-tpl-refund .refund-content-section {
    width: auto;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.refund-content-section {
    width: 100%;
    padding: clamp(10px, 2vw, 20px) 0; /* vertical spacing, horizontal global .oasis-container se */
}

/* Inner content – card style; width/padding global .oasis-container handle karega */
.oasis-refund-page .refund-content-section .oasis-container {
    background: #ffffff;
    border-radius: clamp(8px, 1vw, 16px);
    border: 1px solid #eaeaea;
    padding: clamp(10px, 2vw, 20px) clamp(16px, 2vw, 28px) clamp(14px, 2vw, 24px);
}

/* each logical block */
.refund-block {
    margin-bottom: clamp(18px, 2vw, 28px);
}

/* section headings – NOW USING H3, same as privacy h3 style
   NOTE: font-size / font-family global h3 se aayega */
.refund-block h3 {
    color: #000;
    margin-top: clamp(12px, 2vw, 24px);
    margin-bottom: clamp(6px, 1vw, 12px);
    padding-left: clamp(14px, 1.2vw, 24px);
    position: relative;
}

.refund-block h3::before {
    content: '';
    position: absolute;
    left: 0;
    top: clamp(4px, 0.6vw, 10px);
    width: clamp(4px, 0.5vw, 10px);
    height: 60%;
    background: #000;
    border-radius: clamp(4px, 0.6vw, 10px);
}

/* paragraphs – ONLY color + spacing (font-size global p se) */
.refund-block p {
    color: #222;
    margin-bottom: clamp(8px, 1vw, 14px);
    line-height: 1.75;
}

/* lists – spacing + bullets, font-size global li se */
.refund-block ul {
    list-style: disc;
    padding-left: clamp(1.3rem, 2vw, 2rem);
    margin-bottom: clamp(8px, 1vw, 16px);
}

.refund-block ul li {
    color: #222;
    margin-bottom: clamp(4px, 1vw, 10px);
    line-height: 1.7;
}

/* nested list tighter */
.refund-block ul ul {
    list-style: circle;
    margin-top: clamp(4px, 0.6vw, 10px);
}

/* links */
.refund-content a {
    color: #000;
    font-weight: 600;
    border-bottom: 1px dashed #555;
    text-decoration: none;
}

.refund-content a:hover {
    border-bottom-style: solid;
}

/* ============================================
   RESPONSIVE
============================================ */

@media (max-width: 1024px) {
    .refund-hero-overlay {
        max-width: 100%;
        padding-left: clamp(14px, 4vw, 20px);
        padding-right: clamp(10px, 3vw, 16px);
        background: linear-gradient(
            to bottom,
            rgba(0,0,0,0.75),
            transparent 80%
        );
    }

    .refund-hero {
        height: clamp(220px, 35vw, 260px);
    }

    .refund-content {
        padding: clamp(8px, 3vw, 14px);
    }

    .refund-title {
        font-size: clamp(22px, 3vw + 0.2rem, 30px);
    }

    .refund-subtitle {
        font-size: clamp(13px, 1.6vw + 0.2rem, 17px);
    }

    .refund-block p,
    .refund-block ul li {
        /* font-size global system se aayega */
    }

    .refund-eyebrow {
        font-size: clamp(10px, 1.2vw + 0.2rem, 12px);
    }
}