.elementor-kit-18{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-18 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1200px;}.e-con{--container-max-width:1200px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* Elementor Header Transparent */
header, 
.elementor-location-header {
    background: transparent !important;
    box-shadow: none !important;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 9999;
}
.arrow {
  display: inline-block;
  animation: pulse 1.2s infinite;
}

@keyframes pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.4); }
  100% { transform: scale(1); }
}


.wave-text {
  font-weight: bold;
  font-size: 54px; 
  display: inline-block;
  background: linear-gradient(
    120deg,
    #1e88e5 40%,
    #ffffff 50%,
    #1e88e5 60%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: wave 2.5s linear infinite;
}
@keyframes wave {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}


.my-flip-section{
  padding: 40px 20px;
  font-family: Inter, system-ui, Arial, sans-serif;
  text-align: center;
}
.my-flip-section h2{
  font-size: 26px;
  margin-bottom: 30px;
  color: #0f1720;
}

/* container with perspective */
.my-flip-section .book-flip{
  width: 100%;
  max-width: 640px;
  height: 340px;
  margin: 0 auto;
  position: relative;
  perspective: 2000px;
  -webkit-perspective: 2000px;
}

/* page base */
.my-flip-section .page{
  position: absolute;
  inset: 0;
  transform-origin: right center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 1);
  background: linear-gradient(180deg,#fff 0%, #fbfbf 100%);
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  animation-name: pageFlip;
  animation-duration: 20s; /* Increased duration to ensure a full cycle for each page */
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  transform: rotateY(0deg);
}

/* corner curl */
.my-flip-section .page::after{
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  top: -22px;
  right: -22px;
  background: radial-gradient(circle at 30% 30%,
    rgba(255,255,255,0.95) 0 28%,
    rgba(255,255,255,0.85) 29% 42%,
    rgba(250,230,180,0.06) 43% 62%,
    rgba(0,0,0,0.04) 63% 100% );
  transform: rotate(25deg);
  border-radius: 50%;
  box-shadow: -8px 12px 20px rgba(9,14,28,0.12);
  pointer-events: none;
  mix-blend-mode: normal;
}

/* card content */
.my-flip-section .card{
  width: 100%;
  max-width: calc(640px - 60px);
  height: calc(340px - 40px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  border-left: 6px solid #f7d07a;
  border-right: 6px solid #f7d07a;
  border-radius: 10px;
  background: linear-gradient(180deg,#fff8e5 0%, #fffaf0 100%);
}
.my-flip-section .photo img{
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 14px;
  box-shadow: 0 6px 18px rgba(12,18,35,0.08);
}
.my-flip-section blockquote{
  margin: 0;
  text-align: center;
}
.my-flip-section blockquote p{
  font-size: 15px;
  line-height: 1.6;
  color: #1f2937;
  margin-bottom: 10px;
}
.my-flip-section blockquote footer{
  font-weight: 600;
  color: #4b5563;
  font-size: 13px;
}

/* stacking and delays */
.my-flip-section .page:nth-child(1){ z-index: 4; animation-delay: 0s; }
.my-flip-section .page:nth-child(2){ z-index: 3; animation-delay: 5s; }
.my-flip-section .page:nth-child(3){ z-index: 2; animation-delay: 10s; }
.my-flip-section .page:nth-child(4){ z-index: 1; animation-delay: 15s; }

/* animation keyframes */
@keyframes pageFlip{
  0%, 25%{ transform: rotateY(0deg); opacity: 1;}
  30%{ transform: rotateY(-120deg); opacity: 0.6; filter: brightness(0.98);}
  35%, 100%{ transform: rotateY(-180deg); opacity: 0;}
}

/* responsive */
@media (max-width:720px){
  .my-flip-section .book-flip{ max-width:92vw; height:320px; }
  .my-flip-section blockquote p{ font-size:14px; }
  .my-flip-section h2{ font-size:20px; }
}
/* मोबाइल/टैबलेट के लिए एडजस्टेड रिस्पॉन्सिव CSS */
@media (max-width: 720px) {
    
    /* book-flip कंटेनर की ऊँचाई एडजस्ट करना */
    .my-flip-section .book-flip { 
        max-width: 92vw; 
        height: auto; 
        /* min-height को 360px से 420px कर दिया गया है */
        min-height: 420px; 
    }

    /* page एलिमेंट को 100% ऊँचाई देना */
    .my-flip-section .page {
        height: 100%;
        position: absolute;
    }

    /* कार्ड की ऊँचाई को भी एडजस्ट करना */
    .my-flip-section .card {
        height: auto; 
        /* min-height को 280px से 340px कर दिया गया है */
        min-height: 340px; 
        padding: 15px; /* मोबाइल पर पैडिंग थोड़ी कम करें, यदि आवश्यक हो */
    }

    /* अन्य मोबाइल स्टाइलिंग जो पहले से थी */
    .my-flip-section blockquote p { 
        font-size: 14px; 
    }
    .my-flip-section h2 { 
        font-size: 20px; 
    }
} 


/* --- 1. PRIMARY LAYOUT FIXES (Layout Alignment and Floating) --- */

.custom-dashboard-wrapper {
    display: flex !important; 
    max-width: 1300px !important; 
    margin: 40px auto !important; 
    border-radius: 15px !important;
    box-shadow: 0 20px 50px rgba(23, 24, 31, 0.15) !important; 
    min-height: 700px;
}

.dashboard-nav-panel {
    flex: 0 0 320px !important; 
    max-width: 320px !important;
    padding: 30px 0 !important;
    background: #f7f7f7 !important;
    border-right: 1px solid #eee !important;
}

.dashboard-content-area {
    flex: 1 !important;
    padding: 40px !important;
}

/* 2. PROFILE & MENU BUTTON STYLING */

.profile-pic-box {
    width: 140px; 
    height: 140px;
    margin: 0 auto 10px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid #ff9900;
}
.user-name {
    font-size: 1.4em; font-weight: 700;
}
.menu-button {
    display: flex !important; 
    align-items: center !important;
    padding: 18px 25px !important;
    margin-bottom: 8px !important;
    border-radius: 10px;
    color: #17181f;
    font-weight: 500;
}
.menu-button i {
    margin-right: 15px !important;
    min-width: 20px !important;
}
.logout-button {
    margin-top: 25px;
    background: #ff5c5c !important; 
    color: white !important;
}

/* 3. MAIN TABS HIDE/SHOW FIX */

.custom-dashboard-wrapper .dashboard-content-area .tab-content {
    display: none !important; 
}
.custom-dashboard-wrapper .dashboard-content-area .tab-content.active {
    display: block !important; 
}

.tab-button.active {
    background: #ff9900 !important; 
    color: #ffffff !important;
    box-shadow: 0 5px 15px rgba(255, 153, 0, 0.4);
}

/* 4. NESTED TABS HIDE/SHOW */

.nested-tabs-menu {
    border-bottom: 2px solid #eee;
    margin-bottom: 20px;
    display: flex;
}
.nested-button {
    padding: 10px 15px;
    margin-right: 15px;
    color: #555;
    font-weight: 600;
    border-bottom: 3px solid transparent;
}
.nested-button.active {
    color: #ff9900;
    border-bottom: 3px solid #ff9900;
}
.nested-content {
    display: none;
}
.nested-content.active {
    display: block;
}




/* --- NEW: Form Styling for Edit Profile --- */

.custom-profile-form label {
    display: block;
    font-weight: 600;
    margin-top: 15px;
    margin-bottom: 5px;
    color: #333;
}
.custom-profile-form input[type="text"],
.custom-profile-form input[type="email"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box; /* Padding andar rahe */
    font-size: 16px;
}
.custom-profile-form input[type="text"][disabled] {
    background: #f0f0f0;
    cursor: not-allowed;
}
.update-account-button {
    background: #ff9900; /* Aapka theme colour */
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    margin-top: 25px;
    transition: background 0.3s;
}
.profile-success {
    padding: 10px;
    background: #e6ffe6;
    border: 1px solid #00cc00;
    color: #008000;
    margin-bottom: 20px;
    border-radius: 5px;
}
.profile-error {
    padding: 10px;
    background: #ffe6e6;
    border: 1px solid #cc0000;
    color: #cc0000;
    margin-bottom: 20px;
    border-radius: 5px;
}


/* --- CUSTOM LOGIN/REGISTER FORM STYLING --- */

.custom-login-wrapper {
    max-width: 400px;
    margin: 50px auto;
    padding: 30px;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.custom-login-wrapper label {
    display: block;
    font-weight: 600;
    margin-top: 15px;
    margin-bottom: 5px;
}

.custom-login-wrapper input[type="text"],
.custom-login-wrapper input[type="password"],
.custom-login-wrapper input[type="email"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box; 
    font-size: 16px;
    /* Aapke design jaisa boxy look */
    border-width: 2px;
    outline: none;
}

/* Submit Button (Login/Register) */
.custom-login-wrapper input[type="submit"] {
    background: #ff9900; /* Orange Accent */
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    margin-top: 20px;
    margin-right: 15px; /* Login button aur Register link ke beech space */
}

/* Forgot Password Link Styling */
.custom-login-wrapper .forgot-password-link {
    display: block;
    margin-top: 15px;
    font-size: 0.9em;
    color: #555;
    text-decoration: none;
}
.custom-login-wrapper .register-link {
    font-weight: 600;
    color: #0073aa; /* Default WordPress Blue */
    margin-left: 10px;
}



/* --- CUSTOM LOGIN/REGISTER FORM STYLING --- */

/* Wrapper for both Login and Register */
.custom-login-wrapper, 
.custom-register-wrapper { 
    max-width: 400px;
    margin: 50px auto;
    padding: 30px;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* Fields Styling */
.custom-login-wrapper input[type="text"],
.custom-login-wrapper input[type="password"],
.custom-register-wrapper input[type="text"], /* Naya Register Input */
.custom-register-wrapper input[type="email"] { /* Naya Register Input */
    /* ... baaki saari styling properties ... */
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    /* etc. */
}

/* Button Styling */
.custom-login-wrapper input[type="submit"],
.custom-register-wrapper input[type="submit"] { /* Naya Register Button */
    /* ... baaki saari button styling ... */
    background: #ff9900; 
    /* etc. */
}
/* ... etc. */  


/* --- 1. PRIMARY LAYOUT FIXES (Layout Alignment and Floating) --- */

.custom-dashboard-wrapper {
    display: flex !important; 
    max-width: 1100px !important; /* BOX CHOTA: Max width 1300px se 1100px kiya */
    margin: 40px auto !important; 
    border-radius: 20px !important; /* BOX CORNER ROUNDED: 15px se 20px kiya */
    box-shadow: 0 20px 50px rgba(23, 24, 31, 0.15) !important; 
    min-height: 600px; /* Thoda chota kiya */
}

/* LEFT PANEL CHANGES */
.dashboard-nav-panel {
    flex: 0 0 260px !important; /* BOX CHOTA: Width 320px se 260px kiya */
    max-width: 260px !important; /* BOX CHOTA: Max width 320px se 260px kiya */
    padding: 30px 0 !important;
    background: #f7f7f7 !important;
    border-right: 1px solid #eee !important;
    /* LEFT PANEL ROUNDED CORNERS: Sirf upar aur neeche left side par apply kiya */
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    text-align: center; /* LEFT PANEL CONTENT CENTER ALIGNMENT */
}

/* RIGHT CONTENT AREA */
.dashboard-content-area {
    flex: 1 !important;
    padding: 30px !important; /* Padding thoda kam kiya */
    /* RIGHT PANEL ROUNDED CORNERS: Sirf upar aur neeche right side par apply kiya */
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}

/* 2. PROFILE & MENU BUTTON STYLING */

.profile-pic-box {
    width: 120px; /* Center alignment ke liye width kam kiya */
    height: 120px; /* Center alignment ke liye height kam kiya */
    margin: 0 auto 10px; /* margin: 0 auto (already center-aligned) */
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid #ff9900;
}
.user-name {
    font-size: 1.2em; /* Font thoda chota kiya */
    font-weight: 700;
    margin-bottom: 20px; /* User Name ke baad thoda space badhaya */
}
.menu-button {
    /* BUTTON CHOTA: Max width set kiya taaki woh chota lage aur center ho sake */
    max-width: 200px; 
    margin-left: auto !important; /* Center align button */
    margin-right: auto !important; /* Center align button */
    display: flex !important; 
    justify-content: flex-start; /* Icon aur text left-aligned rahe button ke andar */
    align-items: center !important;
    padding: 15px 20px !important; /* BUTTON CHOTA: Padding kam kiya */
    margin-bottom: 8px !important;
    border-radius: 10px;
    color: #17181f;
    font-weight: 500;
}
.menu-button i {
    margin-right: 15px !important;
    min-width: 20px !important;
}
.logout-button {
    margin-top: 25px;
    background: #ff5c5c !important; 
    color: white !important;
}
/* --- NEW CSS: Animation-Friendly Hiding (Step 2) --- */
/* Yeh code .tab-content aur .nested-content ko smooth slide-in/out effect dega */

.custom-dashboard-wrapper .dashboard-content-area .tab-content,
.nested-content {
    /* Initial state: Hidden (Opacity 0) aur Right side mein (TranslateX 20px) */
    opacity: 0 !important;
    max-height: 0 !important; /* Hiding height */
    overflow: hidden !important;
    transform: translateX(20px); /* Content initialy 20px right mein hoga */
    
    /* Animation speed set karna (Transition) */
    transition: opacity 0.4s ease-out, max-height 0.4s ease-out, transform 0.4s ease-out;
    pointer-events: none; /* Hidden content par click disable karna */
}

/* Jab tab active ho (Click hone par), tab show karna */
.custom-dashboard-wrapper .dashboard-content-area .tab-content.active,
.nested-content.active {
    opacity: 1 !important; /* Fully Visible */
    max-height: 5000px !important; /* Height show karna */
    overflow: visible !important;
    transform: translateX(0); /* Original position par slide-in */
    pointer-events: auto; /* Click enable karna */
}





/* --- FINAL CSS: Dashboard, Login, Register, Booking (SUPER SLOW + FULL SCREEN) --- */

.custom-dashboard-wrapper, /* TARGET 1: Dashboard Box */
.custom-login-wrapper,     /* TARGET 2: Login Form */
.custom-register-wrapper,  /* TARGET 3: Register Form */
#customBookingForm,        /* TARGET 4: Booking Form */
.custom-profile-form,      /* TARGET 5: Edit Profile Form */
.custom-password-form      /* TARGET 6: Change Password Form */
{
    /* Transition 1.8s (Aapki final speed) */
    transition: opacity 1.8s ease-out, transform 1.8s ease-out; 
    
    /* Initial Hiding State: Full Screen ke bahar (Right mein) */
    opacity: 0 !important;
    transform: translateX(100%) !important; 
    
    /* Zaroori: Display/Visibility ko ON rakho taaki animation visible ho */
    visibility: visible !important; 
}

/* --- State: Loaded hone par Box ko screen par laana --- */
.custom-dashboard-wrapper.loaded,
.custom-login-wrapper.loaded,
.custom-register-wrapper.loaded,
#customBookingForm.loaded,
.custom-profile-form.loaded,
.custom-password-form.loaded {
    opacity: 1 !important;
    transform: translateX(0) !important; /* Original position par waapas */
}


/* --- Zaroori Fix for Login/Register Shortcode Visibility --- */
/* Kyunki aapke PHP code mein, login/register forms ka output wrapper div ke andar hota hai. 
   Isliye hum .custom-login-wrapper ko override nahi karenge, yeh code bas turant dikhega */
.logged-in-status-box {
    opacity: 1 !important;
    transform: translateX(0) !important;
    transition: none !important; /* Logged-in message mein animation nahi chahiye */
}

/* --- FINAL FIX: Mobile Responsiveness & Form Input Overflow --- */

/* 1. General Input/Form Elements Fix */
/* Yeh zyadatar forms ke text, password, email inputs aur select fields ko theek karta hai */
.custom-profile-form input[type="text"],
.custom-profile-form input[type="email"],
.custom-register-wrapper input[type="text"],
.custom-register-wrapper input[type="password"],
.custom-register-wrapper input[type="email"],
.custom-login-wrapper input[type="text"],
.custom-login-wrapper input[type="password"],
.custom-login-wrapper input[type="email"],

/* Agar booking ya contact form mein textareas/selects hain, toh unhein bhi shamil kiya */
textarea,
select {
    /* 100% width aur padding ko us width ke andar rakhne ke liye */
    box-sizing: border-box !important;
    width: 100% !important; 
    /* Max-width set kiya, agar koi parent element isse badha raha ho */
    max-width: 100% !important; 
    /* Input field mein choti screens par min-width ko hata diya */
    min-width: unset !important; 
}


/* 2. Form Wrapper Overflow Control (Poore Form Box ko theek rakhne ke liye) */
.custom-login-wrapper,
.custom-register-wrapper,
.custom-dashboard-wrapper,
.dashboard-content-area {
    /* Agar koi content galti se bahar nikal raha ho, toh use roko */
    overflow-x: hidden !important;
}

/* 3. My Account (Nested Tabs) ke andar ke forms ke liye fix */
/* Nested content ke andar ke inputs ko bhi theek se target kiya */
.nested-content input[type="text"],
.nested-content input[type="password"] {
    box-sizing: border-box !important;
    width: 100% !important;
}

/* 4. Small Screen Specific Tweak (Jab screen 720px se choti ho) */
@media (max-width: 720px) {
    /* Input fields par padding thoda kam kiya, taaki aur jagah mil sake */
    .custom-register-wrapper input[type="text"],
    .custom-register-wrapper input[type="password"],
    .custom-profile-form input[type="text"],
    .custom-profile-form input[type="email"] {
        padding: 8px 10px !important; /* Padding thoda kam kiya */
    }
}


/* --- FINAL FIX: My Booking History Responsiveness (Based on Shortcode) --- */

/* 1. My Bookings Tab Content Ko Target Kiya */
.dashboard-content-area .tab-content#tab-my-bookings { 
    /* Horizontal scrolling ko enable karo (safest option) */
    overflow-x: auto !important; 
}

/* 2. Shortcode se generate hone wali Table ko Target Kiya */
/* Zyadatar booking history tables mein .wp-list-table ya .widefat jaisi classes hoti hain. 
   Hum ek generic table tag use karte hain. */
.dashboard-content-area .tab-content#tab-my-bookings table {
    /* Table ko container ki width se bahar jane se roko */
    width: 100% !important;
    max-width: 100% !important;
    /* Browser ko batana ki yeh table ko ek block element ki tarah handle kare */
    display: block; 
    border-collapse: collapse; /* Borders ko theek rakho */
}

/* 3. Small Screen Specific Tweak (Jab screen 720px se choti ho) */
@media (max-width: 720px) {
    
    /* Table cells aur header cells ko chota karna */
    .dashboard-content-area .tab-content#tab-my-bookings td,
    .dashboard-content-area .tab-content#tab-my-bookings th {
        font-size: 12px !important; /* Font size choti karke jagah banayi */
        padding: 8px 5px !important; /* Cell padding kam kiya */
        white-space: nowrap; /* Text ko ek hi line mein rakhne ki koshish */
        min-width: 80px; /* Har cell ki minimum width set ki */
    }
    
    /* Agar Booking History list format mein hai (not table), toh uske item ko theek karna */
    .dashboard-content-area .tab-content#tab-my-bookings .booking-item-details {
        flex-direction: column; /* Details ko vertical stack karo */
        padding: 10px !important;
    }
}

/* ========================================================= */
/* 1. CONDITIONAL DISPLAY (Desktop vs. Mobile) */
/* ========================================================= */

/* Desktop पर, सिर्फ़ desktop-only कंटेनर दिखे */
.desktop-only {
    display: block; /* Default is visible */
}
.mobile-only {
    display: none; /* Default is hidden */
}

/* 📱 MOBILE (768px और नीचे) पर, mobile-only कंटेनर दिखे */
@media (max-width: 768px) {
    
    /* डेस्कटॉप कंटेनर को पूरी तरह से छुपा दें */
    .desktop-only {
        display: none !important;
    }

    /* मोबाइल कंटेनर को दिखाएं */
    .mobile-only {
        display: block !important; 
        overflow: hidden; /* Scrollbar हटा दें */
        white-space: nowrap; 
        padding: 0 10px; 
        text-align: center; 
    }
}

/* ========================================================= */
/* 2. 📱 MOBILE SETTINGS (768px और नीचे) पर बदलाव */
/* ========================================================= */
@media (max-width: 768px) {
    
    /* डेस्कटॉप कंटेनर को पूरी तरह से छुपा दें */
    .desktop-only {
        display: none !important;
    }

    /* मोबाइल कंटेनर को दिखाएं */
    .mobile-only {
        display: block !important; 
        overflow: hidden; 
        white-space: nowrap; 
        padding: 0 10px; 
        text-align: center; 
        /* HEIGHT FIX: ऊँचाई कम करने के लिए */
        height: 120px; /* फिक्स्ड हाइट सेट करें (उदाहरण के लिए 100px) */
    }

    /* टेक्स्ट साइज़ और एनीमेशन स्पीड */
    .mobile-scroll-text {
        color: #ff9800 !important; 
        font-size: 40px; 
        font-weight: bold;
        margin: 0;
        
        /* ALIGNMENT FIX: ऊँचाई को केंद्र में लाने के लिए */
        line-height: 80px; /* container height के बराबर line-height सेट करें */
        
        /* मार्की/स्क्रॉलिंग एनीमेशन */
        display: inline-block; 
        padding-left: 100%; 
        animation: marquee-scroll 20s linear infinite; 
    }
}

/* ========================================================= */
/* 3. स्क्रॉलिंग एनीमेशन Keyframes (Mobile) */
/* ========================================================= */
@keyframes marquee-scroll {
    0% {
        transform: translate(0, 0); 
    }
    100% {
        transform: translate(-100%, 0); 
    }
}


/* Default style for larger screens (Laptops/Desktops) */
.responsive-heading {
  font-size: 48px;
  font-weight: 400;
  color: white;
  line-height: 1.4;
  text-align: left;
}

/* Media Query for Mobile Screens (768px and smaller) */
@media (max-width: 768px) {
  .responsive-heading {
    font-size: 35px; /* Font size for mobile */
  }
}/* End custom CSS */