/* =========================================
1. ROOT VARIABLES (DESKTOP DEFAULT)
========================================= */
:root {
/* Colors */
--primary-color: #32588f;
--secondary-color: #ff3300;

/* Buttons */
--cta-bg: #0d6efd;
--cta-text: #ffffff;

/* --- SIZES (DESKTOP) --- */
--h1-size: 32px;
--h2-size: 18px;
--menu-size: 14px;
--logo-w: 200px;
--sublogo-w: 114px;
--ov-size: 16px;
--high-img: 70px;
--conf-size: 14px;
--conf-size: 14px;
--conf-btn-size: 14px;
--am-icon-size: 40px;
--am-img-size: 70px;
--am-text-size: 14px;
--conn-h-size: 16px;
--conn-i-size: 14px;
--ab-size: 16px;
--stat-val-size: 40px;
--stat-lbl-size: 18px;
--cont-size: 20px;
--cont-sub-size: 22px;
--mob-size: 18px;
--foot-img: 80px;
--foot-size: 14px;
--foot-sub-size: 10px;

/* --- COLORS --- */
--h1-color: #f9a410;
--h2-color: #191a1a;
--menu-bg: #0a0a0a;
--menu-text: #ffffff;
--ov-color: #333333;
--high-bg: #d4bd25;
--high-text: #000000;
--high-icon: #ffffff;
--conf-main: #e0ff42;
--conf-sub: #4a4a4a;
--conf-text: #dd6969;
--conf-alttext: #dd6969;
--conf-btn-bg: #E0E0E0;
--am-icon-col: #0d6efd;
--am-box-bg: #FF0F0F;
--am-text-col: #000000;
--gal-tab: #6396CA;
--gal-act-tab: #000000;
--gal-text: #D6C2C2;
--gal-act-text: #C70000;
--conn_body_bg: #000000;
--conn-h-bg: #418AD2;
--conn-h-text: #F5F5F5;
--conn-i-bg: #C9C9C9;
--conn-i-text: #333333;
--ab-color: #333333;
--stat-val-col: #000000;
--stat-lbl-col: #000000;
--cont-col: #FFFFFF;
--cont-sub-col: #ffffff;
--mob-col: #0d6efd;
--foot-text: #ffffff;
--foot-sub-col: #FFFFFF;
}

/* =========================================
2. AUTOMATIC RESPONSIVENESS (The Magic)
========================================= */

/* Tablet & Small Desktop (Max Width 991px) - Scale to 85% */
@media (max-width: 991px) {
:root {
--h1-size: calc(32px * 0.85);
--h2-size: calc(18px * 0.9);
--logo-w: calc(200px * 0.8);
--stat-val-size: calc(40px * 0.9);
}
}

/* Mobile Devices (Max Width 768px) - Scale to 70% */
@media (max-width: 768px) {
:root {
/* Headings shrink significantly */
--h1-size: calc(32px * 0.65);
--h2-size: calc(18px * 0.8);

/* Logos shrink */
--logo-w: calc(200px * 0.6);
--sublogo-w: calc(114px * 0.6);

/* Icons & Images shrink */
--high-img: calc(70px * 0.7);
--am-icon-size: calc(40px * 0.8);
--am-img-size: calc(70px * 0.8);
--foot-img: calc(80px * 0.7);

/* Text stays readable (don't shrink too much) */
--ov-size: max(14px, calc(16px * 0.9));
--ab-size: max(14px, calc(16px * 0.9));

/* Stats */
--stat-val-size: calc(40px * 0.75);
}
}

/* =========================================
3. COMPONENT APPLICATION
========================================= */

/* Utilities */
.text-primary { color: var(--primary-color) !important; }
.bg-primary { background-color: var(--primary-color) !important; }

/* Buttons */
.btn-primary, .sticky-btn, .btn-enquire {
background-color: var(--cta-bg) !important;
border-color: var(--cta-bg) !important;
color: var(--cta-text) !important;
}
.btn-primary:hover { filter: brightness(90%); }

/* Headings */
h1, h2, .section-title .sec-head { font-size: var(--h1-size); color: var(--h1-color); }
h3, h4, .section-subtitle .sub-head { font-size: var(--h2-size); color: var(--h2-color); }

/* Menu */
.navbar { background-color: var(--menu-bg) !important; }
.nav-link { color: var(--menu-text) !important; font-size: var(--menu-size); }
.navbar-brand img.main-logo { width: var(--logo-w); }
.navbar-brand img.sub-logo { width: var(--sublogo-w); }

/* Overview */
#overview p { font-size: var(--ov-size); color: var(--ov-color); line-height: 1.6; text-align:center; }

/* Highlights */
#highlights .bo { background-color: var(--high-bg); }
#highlights .bo span{ color: var(--high-text); font-size: 1.1rem; }
#highlights i { color: var(--high-icon); font-size: var(--high-img); }
#highlights img { width: var(--high-img); }

/* Configuration */
#configuration .her { background-color: var(--conf-main); color: var(--conf-text); font-size: var(--conf-size); }
#configuration .her1 { background-color: var(--conf-sub); color: var(--conf-alttext); font-size: var(--conf-altsize); }
#configuration .table { color: var(--conf-text); font-size: var(--conf-size); }
<!-- #configuration .click_here { font-size: var(--conf-btn-size);  } -->
#configuration .price-click { font-size: var(--conf-btn-size); background-color: var(--conf-btn-bg); color:
var(--conf-btn-text); border-color: var(--conf-btn-bg); padding: 10px;
display: inline-block; }


/* Amenities */
#ame i { color: var(--am-icon-col); font-size: var(--am-icon-size); }
#ame .amebox img { width: var(--am-img-size);background-color: var(--am-box-bg); }
#ame p { font-size: var(--am-text-size); color: var(--am-text-col); margin-top: 10px; }

/* Gallery */
#gallery .nav-item .nav-link { background-color: var(--gal-tab);color: var(--gal-text) !important;border-color: var(--gal-act-tab) !important; }
#gallery .nav-item .nav-link.active { background-color: var(--gal-act-tab);color: var(--gal-act-text) !important;border-color: var(--gal-act-tab) !important; }

/* Connectivity */
.accordion .accordion-header button { background-color: var(--conn-h-bg); color: var(--conn-h-text); font-size: var(--conn-h-size); }
.accordion .accordion-body { background-color: var(--conn_body_bg);}
.accordion .accordion-body li { background-color: var(--conn-i-bg) !important; color: var(--conn-i-text); font-size: var(--conn-i-size); }


/* About Us */
#about p { font-size: var(--ab-size); color: var(--ab-color); line-height: 1.6; text-align:center}
.counterTxt {    color: var(--stat-val-col) !important;font-size: var(--stat-val-size); font-weight: bold !important; }
.highbox {   color: var(--stat-lbl-col) !important;  font-size: var(--stat-lbl-size);  line-height: 3 !important;  font-weight: 600; }

/* Footer */
#contactus .white { color: var(--cont-col); }
#contactus .address-wrap h3 { color: var(--cont-sub-col); font-size: var(--cont-sub-size); }
#contactus .call-me { color: var(--mob-col); font-size: var(--mob-size); text-decoration: none; font-weight: bold; }

#footer { background-color: #222;  }
#footer .footer-text {color: var(--foot-text); font-size: var(--foot-size);}
#footer .footer-logo { width: var(--foot-img); }
#footer .distext { color: var(--foot-sub-col); font-size: var(--foot-sub-size); }


    .fixed-footer-cust {
      background-color: #222222;
      text-align: center;
      padding: 10px 0px;
      /* width: 100%; */
      border-top: 2px solid #fff;
      position: fixed;
      bottom: 5px;
      text-align: center;
      z-index: 99;
      border-radius: 50px;
    }

.fix-link {
    color: #d16161;
}
    
/* =========================================
4. DYNAMIC SECTION BACKGROUNDS
========================================= */
#home {
background-color: #ffffff;
}
#overview {
background-color: #ffffff;
}
#highlights {
background-color: #ffffff;
}
#configuration {
background-color: #bfbfbf;
background-image: url('assets/uploads/backgrounds/1768391656_4_conf-bg.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
}
#amenities {
background-color: #ffffff;
}
#gallery {
background-color: #ffffff;
}
#connectivity {
background-color: #bababa;
}
#about {
background-color: #ffffff;
}
#contactus {
background-color: #f5f5f5;
background-image: url('assets/uploads/backgrounds/1768391276_9_con.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
}
#footer {
background-color: #2853b8;
}