* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

:root {
--dark: #000;
--white: #ffffff;
  --primary-color: #b50500;     /* Your deep berry brand color */
  --primary-dark: #891B18;      /* Dark accent shade */
  --text-dark: #2c1824;         /* Charcoal base text */
  --text-muted: #8c7d85;        /* Subtitle gray */
}


body {
font-family: 'Inter', 'Segoe UI', sans-serif;
line-height: 1.6;
padding-top: 80px;
color: var(--dark);
overflow-x: hidden;
}

h2{font-size: 38px;color: rgb(14, 4, 70);}
p{color: #000;}

section{
padding: 60px 0;
}
.title{font-size: 38px;color: #000;font-weight: 700;}
.title span{color: #b50500;}

/* Header & Navigation */
header {
position: fixed;
width: 100%;
top: 0;
z-index: 1000;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px);
/* border-bottom: 1px solid rgba(75, 70, 70, 0.233); */
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

   /* --- Color Variable Registry --- */


/* --- Desktop Layout Engine --- */
.navbar {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.733);
  background-color: #ffce1b;
  transition: all 0.3s ease;
  padding: 0;
}
#enquiry{ background-color: #fff6d4;}


.navbar-nav .nav-link {
  font-weight: 600;
  padding: 15px 14px !important;
  color: var(--text-dark);
  font-size: 15px;
  transition: color 0.2s ease;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
  color: var(--primary-color);
}

/* Smooth Desktop Hover Interaction Map */
@media (min-width: 992px) {
  .dropdown:hover > .dropdown-menu {
    display: block;
    margin-top: 0;
    animation: fadeIn 0.2s ease-in-out;
  }
}

.dropdown-menu {
  border: none;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(69,0,37,.12);
  padding: 8px 0;
}

.dropdown-item {
  padding: 10px 18px;
  font-size: 14px;
  color: var(--text-dark);
  font-weight: 500;
  transition: all 0.2s ease;
}

.dropdown-item:hover {
  background-color: rgba(160, 1, 85, 0.05);
  color: var(--primary-color);
  padding-left: 22px;
}

@media (min-width: 1200px) {
  .container, .container-lg, .container-md, .container-sm, .container-xl {
    max-width: 1240px;
  }
}

/* --- Mobile Device Layout Target Fixes --- */
.offcanvas {
  width: 300px;
}

/* Fixes the far alignment drifting and recovers missing arrow hooks on mobile views */
@media (max-width: 991.98px) {
  /* Targets both native collapsed lists and cloned offcanvas scripts */
  .navbar-collapse .navbar-nav,
  .offcanvas-body .navbar-nav {
    flex-direction: column !important;
    width: 100% !important;
    padding: 10px 0;
    margin: 0 !important;
  }

  .navbar-collapse .nav-item,
  .offcanvas-body .nav-item {
    width: 100% !important;
    border-bottom: 1px solid #f5f2f4;
  }

  .navbar-collapse .nav-link,
  .offcanvas-body .nav-link {
    padding: 14px 8px !important;
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    width: 100% !important;
    box-sizing: border-box;
  }

  /* Force Custom Cross-Platform Dropdown Chevron Icons */
  .navbar-collapse .dropdown-toggle::after,
  .offcanvas-body .dropdown-toggle::after {
    display: inline-block !important;
    content: "" !important;
    width: 8px !important;
    height: 8px !important;
    border-right: 2px solid var(--text-muted) !important;
    border-bottom: 2px solid var(--text-muted) !important;
    border-top: 0 !important;
    border-left: 0 !important;
    margin-left: auto !important;
    margin-right: 4px;
    transform: rotate(45deg) !important;
    transition: transform 0.2s ease-in-out, border-color 0.2s ease-in-out;
  }

  /* Handles active toggle chevron flipping cleanly */
  .navbar-collapse .dropdown-toggle.show::after,
  .offcanvas-body .dropdown-toggle.show::after {
    transform: rotate(225deg) !important; /* Fixed break rotation point offset */
    border-color: var(--primary-color) !important;
  }

  /* Submenu Nested Block Cleanup Layouts */
  .navbar-collapse .dropdown-menu,
  .offcanvas-body .dropdown-menu {
    position: static !important;
    float: none !important;
    width: 100% !important;
    box-shadow: none !important;
    background-color: #fdfbfd !important; /* Light brand background tint */
    padding: 0 0 0 16px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border: none !important;
  }

  .navbar-collapse .dropdown-item,
  .offcanvas-body .dropdown-item {
    padding: 12px 8px !important;
    font-size: 14px !important;
    color: var(--text-dark) !important;
    border-bottom: 1px solid #fdfbfd !important;
    white-space: normal !important; /* Protects word wrapping issues on small viewports */
    display: block !important;
    width: 100% !important;
  }

  .navbar-collapse .dropdown-item:last-child,
  .offcanvas-body .dropdown-item:last-child {
    border-bottom: none !important;
  }
  
  .navbar-collapse .dropdown-item:hover,
  .offcanvas-body .dropdown-item:hover {
    background-color: transparent !important;
    color: var(--primary-color) !important;
  }
}

/* --- Framework Animation States --- */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width:991.98px){

.offcanvas{
    width:320px;
}

.offcanvas-body{
    padding:0;
}

.offcanvas-body .navbar-nav{
    width:100%;
    display:block;
    margin:0;
    padding:0;
}

.offcanvas-body .nav-item{
    width:100%;
    list-style:none;
    border-bottom:1px solid #ececec;
}

.offcanvas-body .nav-link{

    display:flex;
    align-items:center;
    justify-content:space-between;

    width:100%;

    padding:10px 20px 10px 40px !important;

    color:#222;
    background-color: #f2f2f2;

    font-weight:500;

    text-decoration:none;
}

.offcanvas-body .nav-link:hover{
    color:#b50500;
}

.offcanvas-body .dropdown-toggle::after{

    margin-left:auto;

    transition:.3s;

}

.offcanvas-body .dropdown-toggle.show::after{

    transform:rotate(-180deg);

}

.offcanvas-body .dropdown-menu{

    position:static !important;

    transform:none !important;

    float:none !important;

    width:100%;

    display:none;

    margin:0;

    padding:0;

    border:0;

    border-radius:0;

    box-shadow:none;

    background:#fafafa;

}

.offcanvas-body .dropdown-menu.show{

    display:block;

}

.offcanvas-body .dropdown-item{

    display:block;

    width:100%;

    padding:12px 40px;

    color:#555;

    font-size:14px;

    border-top:1px solid #ececec;

    white-space:normal;

}

.offcanvas-body .dropdown-item:hover{

    color:#b50500;

    background:#fff;

    padding-left:48px;

}

}

.cta-btn {
background: linear-gradient(135deg, #eb0606 0%, #530000 100%);
color: var(--white) !important;
padding: 0.8rem 2rem !important;
border-radius: 50px;
transition: all 0.3s;
box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
}

.cta-btn::after {
display: none;
}

.cta-btn:hover {
transform: translateY(-2px);
box-shadow: 0 15px 40px rgba(102, 126, 234, 0.6);
}



/* --- Core Section Settings --- */
.premium-hero {
position: relative;
min-height: 100vh;
background-color: #891B18; /* Re-themed Deep Berry/Magenta base */
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
padding: 80px 24px;
}

/* Engineering/Tech Grid Vector Background pattern calibrated for magenta */
.vector-grid-bg {
position: absolute;
inset: 0;
background-image: 
linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
background-size: 40px 40px;
mask-image: radial-gradient(circle at 70% 50%, black, transparent 80%);
-webkit-mask-image: radial-gradient(circle at 70% 50%, black, transparent 80%);
z-index: 1;
}

/* Layout Core Structure */
.hero-wrapper {
position: relative;
z-index: 2;
width: 100%;
max-width: 1280px;
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 60px;
align-items: center;
}

/* --- Left Column: Narrative & Typography --- */
.status-badge {
display: inline-flex;
align-items: center;
gap: 10px;
background-color: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.25);
color: #ffe4e6;
padding: 6px 16px;
border-radius: 100px;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
margin-bottom: 24px;
}

.pulse-dot {
width: 8px;
height: 8px;
background-color: #ffeb3b; /* Vibrant gold pulse warning indicator for contrast */
border-radius: 50%;
box-shadow: 0 0 0 0 rgba(255, 235, 59, 0.7);
animation: pulseEffect 1.8s infinite;
}

.hero-narrative h1 {
font-size: clamp(2.4rem, 4.5vw, 4.2rem);
font-weight: 800;
line-height: 1.1;
letter-spacing: -0.02em;
color: #ffffff;
margin-bottom: 20px;
}

.gradient-text {
/* High contrast neon gradient balancing out the magenta canvas */
background: linear-gradient(135deg, #ffeb3b 0%, #ff8a00 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.hero-narrative p {
font-size: clamp(1.05rem, 1.2vw, 1.3rem);
color: #fbcfe8;
line-height: 1.6;
margin-bottom: 40px;
max-width: 540px;
}

/* Action Buttons Interaction styling */
.action-cluster {
display: flex;
gap: 16px;
flex-wrap: wrap;
}

.action-btn {
padding: 14px 28px;
border-radius: 12px;
font-weight: 600;
font-size: 16px;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 12px;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-cta {
background-color: #ffffff;
color: #b50500;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.btn-cta:hover {
background-color: #fbcfe8;
color: #70003a;
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
}

.btn-outline {
background-color: rgba(255, 255, 255, 0.06);
color: #ffffff;
border: 1px solid rgba(255, 255, 255, 0.3);
}

.btn-outline:hover {
background-color: rgba(255, 255, 255, 0.15);
border-color: #ffffff;
transform: translateY(-2px);
}

/* --- Right Column: Operations Dashboard Frame --- */
.dashboard-frame {
background-color: #ffffff56; /* Deep shadow value of #b50500 */
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 20px;
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
overflow: hidden;
}

.dashboard-header {
background-color: #780101; /* Intermediate step value */
padding: 14px 20px;
display: flex;
align-items: center;
gap: 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.window-dots {
display: flex;
gap: 6px;
}

.window-dots span {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.3);
}

.mock-search {
background-color: #4b0301;
font-size: 11px;
color: #fbcfe8;
padding: 4px 14px;
border-radius: 6px;
flex-grow: 1;
max-width: 250px;
opacity: 0.8;
}

/* Control Panel List Body */
.dashboard-body {
padding: 24px;
display: flex;
flex-direction: column;
gap: 16px;
}

.panel-card {
background-color: rgb(77, 1, 1);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 14px;
padding: 20px;
display: grid;
grid-template-columns: auto 1fr;
gap: 20px;
align-items: start;
transition: all 0.3s ease;
}

.panel-card:hover {
background-color: rgba(128, 11, 11, 0.767);
border-color: rgba(255, 255, 255, 0.2);
transform: scale(1.01);
}

.icon-hex {
width: 44px;
height: 44px;
background-color: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: #ffeb3b; /* Matches neon accents */
font-size: 18px;
}

.meta-tag {
font-size: 11px;
text-transform: uppercase;
color: #fbcfe8;
font-weight: 700;
letter-spacing: 0.05em;
display: block;
margin-bottom: 2px;
opacity: 0.8;
}

.panel-card h3 {
font-size: 16px;
font-weight: 600;
color: #ffffff;
margin: 0 0 4px 0;
}

.panel-card p {
font-size: 13px;
color: #f9a8d4;
margin: 0;
line-height: 1.4;
}

/* --- Scroll Indicator Animation --- */
.scroll-prompt {
position: absolute;
bottom: 24px;
left: 50%;
transform: translateX(-50%);
z-index: 2;
}

.mouse-icon {
width: 26px;
height: 42px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 20px;
display: block;
position: relative;
}

.mouse-icon .wheel {
width: 4px;
height: 8px;
background-color: #ffeb3b;
border-radius: 20px;
position: absolute;
top: 8px;
left: 50%;
transform: translateX(-50%);
animation: scrollWheelAnimation 1.6s infinite ease-out;
}

/* --- Responsive Layout Configurations --- */
@media (max-width: 991.98px) {
.premium-hero {
padding-top: 80px;
padding-bottom: 60px;
}

.hero-wrapper {
grid-template-columns: 1fr;
gap: 40px;
text-align: center;
}

.status-badge {
justify-content: center;
}

.hero-narrative p {
margin: 0 auto 32px auto;
text-align: justify;
hyphens: auto;
}

.action-cluster {
justify-content: center;
}

.panel-card {
grid-template-columns: 1fr;
justify-items: center;
text-align: center;
gap: 12px;
}
}

/* --- Keyframe Key Engines --- */
@keyframes pulseEffect {
0% { box-shadow: 0 0 0 0 rgba(255, 235, 59, 0.5); }
70% { box-shadow: 0 0 0 10px rgba(255, 235, 59, 0); }
100% { box-shadow: 0 0 0 0 rgba(255, 235, 59, 0); }
}

@keyframes scrollWheelAnimation {
0% { top: 6px; opacity: 1; }
100% { top: 22px; opacity: 0; }
}

/* .about-list{display: flex;} */
.about-list li{
display: flex;
gap: 20px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
margin-bottom: 15px;
padding: 15px;
}
.about-list li h6{font-size: 20px;color: #080808;font-weight: 700;}
.about-inner .about-list li i {
width: 64px;
height: 64px;
-webkit-box-flex: 0;
-ms-flex: 0 0 64px;
flex: 0 0 64px;
text-align: center;
line-height: 64px;
border-radius: 50%;
margin-right: 15px;
font-weight: 600;
font-size: 25px;
color: #f5f1f1;
background: #891B18;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.about-list li p{margin-bottom: 0;}


/* ---------------------------------------------------------------- */
/* 12.Services                            
/* ---------------------------------------------------------------- */
.services-item {
padding: 15px 20px 20px 10px;
margin-bottom: 30px;
text-align: center;
position: relative;
background: #fff;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
-webkit-box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
border: 1px solid hsl(0deg 0% 30% / 27%);
border-radius: 10px;
}

.services-item .services-icon {
margin-bottom: 20px;
}
.services-item .services-icon img
{
width: 100px;
}

.services-item .services-icon i:before {
font-size: 100px;
margin-left: 0;
line-height: 1;
display: inline-block;
text-align: center;
color: #140d52;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}

.services-item .services-body h5 {
margin-bottom: 10px;
color: #b50500;
font-weight: 600;
}

.services-item .services-body p {
margin-bottom: 5px;
}

.services-item .services-body a {
color: #032444;
position: relative;
font-weight: 500;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
text-decoration: none;


}

.services-item:hover {
-webkit-box-shadow: 0 23px 49px rgba(0, 0, 0, 0.15);
box-shadow: 0 23px 49px rgba(0, 0, 0, 0.15);
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}

.services-item:hover .services-icon i:before {
color: #f80e0e;
}


.telemetry-stats-container {
position: relative;
z-index: 2;
width: 100%;
max-width: 1240px;
margin: 0 auto;
}


/* --- Seamless Border-Grid Engine (No Spaces) --- */
.telemetry-stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0; /* Eliminates all spacing between cards */
background-color: #891B18;
border: 1px solid rgba(255, 255, 255, 0.15); /* The structural outer frame */
border-radius: 12px;
overflow: hidden; /* Clips corner tiles safely into the container border radius */
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.telemetry-stat-tile {
background-color: #891B18;
padding: 32px 24px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 32px;
position: relative;
transition: background-color 0.25s ease;

/* Create the inner vertical dividers */
border-right: 1px solid rgba(255, 255, 255, 0.15);
border-bottom: none;
}

/* Eliminate trailing outer border on the last grid item on desktop */
.telemetry-stat-tile:nth-child(4) {
border-right: none;
}

.telemetry-stat-tile:hover {
background-color: rgba(69, 0, 37, 0.6); /* Gentle interactive response without lifting */
}

/* Tile Internal Assets Styling */
.tile-header-bar {
display: flex;
justify-content: space-between;
align-items: center;
}

.tile-sys-code {
font-size: 12px;
font-weight: 600;
color: #fbcfe8;
letter-spacing: 0.03em;
opacity: 0.8;
}

.tile-icon {
font-size: 22px;
color: #ffeb3b;
}

.tile-display {
display: flex;
flex-direction: column;
gap: 4px;
}

.tile-number {
font-size: clamp(2rem, 2.5vw, 2.6rem);
font-weight: 800;
color: #ffffff;
line-height: 1;
}

.tile-label {
font-size: 14px;
color: #ece6e9;
font-weight: 500;
}

.tile-progress-indicator {
width: 100%;
height: 3px;
background-color: rgba(255, 255, 255, 0.08);
border-radius: 20px;
overflow: hidden;
}

.indicator-active-bar {
display: block;
height: 100%;
background-color: #ffeb3b;
border-radius: 20px;
transition: all 0.4s ease;
}

.bar-wide { width: 85%; }
.bar-mid  { width: 65%; }
.bar-full { width: 98%; }
.bar-max  { width: 94%; }

.telemetry-stat-tile:hover .indicator-active-bar {
background: linear-gradient(90deg, #ffeb3b, #ff8a00);
}

/* --- Responsive Layout Breakpoints --- */

/* Tablet & Landscape Mobile (2x2 Grid) */
@media (max-width: 991.98px) {
.telemetry-stats-grid {
grid-template-columns: repeat(2, 1fr);
}

/* Reset desktop lines & calculate 2-column crosshair layout borders */
.telemetry-stat-tile {
border-right: 1px solid rgba(255, 255, 255, 0.15);
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

/* Right column tiles lose right border */
.telemetry-stat-tile:nth-child(2),
.telemetry-stat-tile:nth-child(4) {
border-right: none;
}

/* Bottom row tiles lose bottom border */
.telemetry-stat-tile:nth-child(3),
.telemetry-stat-tile:nth-child(4) {
border-bottom: none;
}
}

/* Portrait Mobile (1 Column Stack) */
@media (max-width: 575.98px) {
.telemetry-stats-section {
padding: 60px 16px;
}

.telemetry-stats-grid {
grid-template-columns: 1fr;
}

/* Calculate single line stacking borders safely */
.telemetry-stat-tile {
border-right: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
padding: 28px 20px;
}

/* Pure bottom item loses border line */
.telemetry-stat-tile:nth-child(4) {
border-bottom: none;
}
}

/* ---------------------------------------------------------------- */
/* 11.Features                                                 
/* ---------------------------------------------------------------- */
.bg_dark{background-color: #891B18;}
.features-inner .features-title {
margin-bottom: 20px;
color: #fff;
}

.features-inner .features-title span {
font-weight: 800;
font-style: italic;
color: #cfbc0a;
position: relative;
}

.features-inner .features-text {
margin-bottom: 31px;
color: #fff;

}

.features-inner .features-list li {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
margin-bottom: 30px;
}

.features-inner .features-list li i {
width: 42px;
height: 42px;
-webkit-box-flex: 0;
-ms-flex: 0 0 42px;
flex: 0 0 42px;
text-align: center;
line-height: 42px;
border-radius: 50%;
margin-right: 15px;
color: #300101;
background: #ffeb33;
}

.features-inner .features-list li:last-child {
margin-bottom: 0;
}

.features-inner .features-list h6 {
margin-bottom: 10px;
font-size: 18px;
color: #ffe451;
}

.features-inner .features-list p {
color: #f0ebeb;

}

.features-skills {
background: #fff;
padding: 20px 20px 30px 20px;
}
.features-skills p{
margin-bottom: 15px;

}

.features-skills .skills-progress-wrap .skills-item {
overflow: hidden;
position: relative;
margin-bottom: 23px;
background: #fff;
-webkit-transition: all 0.5s linear;
transition: all 0.5s linear;
}

.features-skills .skills-progress-wrap .skills-item:last-child {
margin-bottom: 0;
}

.progress {
height: 4px;
position: relative;
background: #eaeceb !important;
margin-top: 10px;
overflow: hidden;
}
.progress .progress-bar {background: #04b648 !important;}


/* ---------------------------------------------------------------- */
/* Responsive Media Query (less than 992px)
/* ---------------------------------------------------------------- */
@media only screen and (max-width: 992px) {
.features-inner {
margin-bottom: 30px;
}
}



/* Common Button Style */

.btn_theme1,
.btn_theme2{
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;
padding:10px 32px;
border-radius:50px;
font-size:16px;
font-weight:600;
text-decoration:none;
transition:all .35s ease;
cursor:pointer;
border:2px solid #b50500;
position:relative;
overflow:hidden;
z-index:1;
}

/* ===========================
Filled Button
=========================== */

.btn_theme1{
background:#b50500;
color:#fff;
box-shadow:0 8px 25px rgba(160,1,85,.25);
}

.btn_theme1:hover{
background:#820045;
border-color:#820045;
color:#fff;
transform:translateY(-3px);
box-shadow:0 14px 35px rgba(160,1,85,.35);
}

/* ===========================
Outline Button
=========================== */

.btn_theme2{
background:#fff;
color:#b50500;
}

.btn_theme2:hover{
background:#b50500;
color:#fff;
transform:translateY(-3px);
box-shadow:0 14px 35px rgba(160,1,85,.35);
}

/* Active Effect */

.btn_theme1:active,
.btn_theme2:active{
transform:scale(.97);
}

/* Focus */

.btn_theme1:focus,
.btn_theme2:focus{
outline:none;
box-shadow:0 0 0 .25rem rgba(160,1,85,.2);
}

/* Responsive */

@media(max-width:576px){

.btn_theme1,
.btn_theme2{
width:100%;
padding:13px 24px;
font-size:15px;
}

}

/* --- Base Structural Layout --- */
.movers-reviews-section {
padding: 60px 24px;
background-color: #ffffff; /* Contrast switch from the previous light gray block */
color: #2c1824;
}

.movers-reviews-container {
max-width: 1240px;
margin: 0 auto;
}

/* --- Section Top Typography Styles --- */
.reviews-header-block {
text-align: center;
margin: 0 auto 64px auto;
}

.reviews-mini-badge {
display: inline-block;
background-color: rgba(160, 1, 85, 0.08);
color: #b50500;
padding: 4px 14px;
border-radius: 20px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 14px;
}

.reviews-header-block h2 {
font-size: clamp(1.8rem, 2.5vw, 2.4rem);
font-weight: 800;
color: #891B18;
margin-bottom: 12px;
}

.reviews-header-block p {
font-size: 15px;
color: #61525a;
line-height: 1.5;
}

/* --- Balanced 3-Column Review Grid Matrix --- */
.movers-reviews-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
margin-bottom: 56px;
}

.mover-review-card {
background-color: #ffffff;
border: 1px solid rgba(160, 1, 85, 0.16);
border-radius: 16px;
padding: 40px 32px;
display: flex;
flex-direction: column;
position: relative;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.mover-review-card.active{
background-color: #fffbf3;
border: 1px solid rgba(160, 1, 85, 0.06);
}

.mover-review-card:hover {
transform: translateY(-6px);
box-shadow: 0 16px 32px rgba(69, 0, 37, 0.05);
background-color: #ffffff;
border-color: rgba(160, 1, 85, 0.15);
}

/* --- Custom CSS Avatar Alternative (Uses Font Awesome Quote) --- */
.mover-avatar-fallback {
width: 52px;
height: 52px;
background-color: #891B18;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 24px;
box-shadow: 0 4px 12px rgba(69, 0, 37, 0.15);
transition: background-color 0.25s ease;
}

.avatar-quote-icon {
font-size: 18px;
color: #ffeb3b; /* Accent matching yellow theme details */
}

.mover-review-card:hover .mover-avatar-fallback {
background-color: #b50500;
}

/* Star Array Metrics Layout */
.mover-rating-stars {
display: flex;
gap: 4px;
color: #ff8a00; /* Warm orange gold star color */
font-size: 13px;
margin-bottom: 16px;
}

.mover-review-text {
font-size: 15px;
line-height: 1.6;
color: #40323a;
font-style: italic;
margin-bottom: 24px;
flex-grow: 1; /* Pushes author profiles perfectly flat to card bottom rows */
}

/* Author Profiling Details Rows */
.mover-review-author {
display: flex;
flex-direction: column;
border-top: 1px solid rgba(69, 0, 37, 0.08);
padding-top: 16px;
}

.author-name {
font-size: 15px;
font-weight: 700;
color: #891B18;
}

.author-meta {
font-size: 12px;
color: #8c7d85;
margin-top: 2px;
}

/* --- Centered Footer Action Button Linking to FAQ --- */
.reviews-action-footer {
text-align: center;
}

.reviews-faq-btn {
display: inline-flex;
align-items: center;
gap: 12px;
background-color: #891B18;
color: #ffffff;
text-decoration: none;
padding: 16px 32px;
border-radius: 12px;
font-weight: 700;
font-size: 15px;
box-shadow: 0 10px 20px rgba(69, 0, 37, 0.1);
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-arrow-icon {
font-size: 14px;
transition: transform 0.25s ease;
}

.reviews-faq-btn:hover {
background-color: #b50500;
box-shadow: 0 14px 28px rgba(160, 1, 85, 0.2);
}

.reviews-faq-btn:hover .btn-arrow-icon {
transform: translateX(5px);
}

/* --- Structural Media Viewport Breakpoints --- */
@media (max-width: 991.98px) {
.movers-reviews-grid {
grid-template-columns: 1fr; /* Safe stack on tablet and mobile */
gap: 24px;
}

.mover-review-card {
padding: 32px 24px;
}
}

@media (max-width: 575.98px) {
.movers-reviews-section {
padding: 60px 16px;
}

.reviews-faq-btn {
width: 100%;
justify-content: center;
padding: 16px 20px;
font-size: 14px;
}
}


/* --- Base Structural Parameters --- */
.faq-telemetry-section {
padding: 100px 24px;
background-color: #fcfafb; /* High contrast ultra-light gray base */
color: #2c1824;

}

.faq-section-container {
max-width: 1240px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 48px;
align-items: flex-start;
}

/* Left Column Engine (Fulfills col-md-7 proportion) */
.faq-content-column {
grid-column: span 7;
}

/* Right Column Banner Engine */
.faq-sidebar-column {
grid-column: span 5;
position: sticky;
top: 40px;
}

/* --- Left Accordion Typography Elements --- */
.faq-intro-block {
margin-bottom: 40px;
}

.faq-mini-tag {
display: inline-block;
background-color: #fbcfe8;
color: #b50500;
padding: 4px 12px;
border-radius: 4px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: 12px;
}

.faq-intro-block h2 {
font-size: clamp(1.8rem, 2.5vw, 2.4rem);
font-weight: 800;
color: #891B18;
margin-bottom: 12px;
letter-spacing: -0.02em;
}

.faq-intro-block p {
font-size: 15px;
color: #61525a;
line-height: 1.5;
}

/* --- Pure CSS Native Accordion Architecture --- */
.faq-accordion-group {
display: flex;
flex-direction: column;
gap: 12px;
}

.faq-accordion-item {
background-color: #ffffff;
border: 1px solid rgba(160, 1, 85, 0.1);
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 12px rgba(69, 0, 37, 0.02);
transition: all 0.25s ease;
}

.faq-input-gate {
display: none; /* Keeps input element hidden from standard display rendering */
}

.faq-trigger-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 24px;
font-size: 16px;
font-weight: 600;
color: #891B18;
cursor: pointer;
user-select: none;
transition: background-color 0.2s ease;
}

.faq-trigger-header:hover {
background-color: rgba(160, 1, 85, 0.02);
}

.faq-arrow {
font-size: 14px;
color: #b50500;
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Accordion Smooth Height Handling */
.faq-panel-body {
display: grid;
grid-template-rows: 0fr; /* Collapsed state via css grid layout trick */
transition: grid-template-rows 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-inner-text {
overflow: hidden;
padding: 0px 24px;
font-size: 14px;
color: #201f20;
line-height: 1.6;
transition: padding 0.25s ease;
}

/* --- Interactivity CSS Target Bindings --- */
.faq-input-gate:checked ~ .faq-trigger-header {
background-color: rgba(160, 1, 85, 0.04);
}

.faq-input-gate:checked ~ .faq-trigger-header .faq-arrow {
transform: rotate(180deg);
}

.faq-input-gate:checked ~ .faq-panel-body {
grid-template-rows: 1fr; /* Instantly triggers structural expand interpolation */
}

.faq-input-gate:checked ~ .faq-panel-body .faq-inner-text {
padding: 8px 24px 20px 24px;
}

/* --- Right Side Multi-Layered Image Banner Overlay --- */
.faq-image-card {
position: relative;
border-radius: 16px;
overflow: hidden;
min-height: 480px;
display: flex;
align-items: flex-end;
box-shadow: 0 20px 40px rgba(69, 0, 37, 0.15);
}

.faq-card-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Image zoom effect on card interaction frame */
.faq-image-card:hover .faq-card-bg {
transform: scale(1.05);
}

/* The dark tint scrim protecting overlay readability */
.faq-card-tint-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(180deg, rgba(69, 0, 37, 0.4) 0%, rgba(69, 0, 37, 0.95) 85%);
z-index: 1;
}

.faq-card-content {
position: relative;
z-index: 2;
padding: 40px;
color: #ffffff;
}

.faq-card-badge {
display: inline-flex;
align-items: center;
gap: 6px;
background-color: #ffeb3b;
color: #891B18;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 20px;
margin-bottom: 20px;
letter-spacing: 0.02em;
}

.faq-card-content h3 {
font-size: 24px;
font-weight: 800;
line-height: 1.3;
margin-bottom: 12px;
color: #ffffff;
}

.faq-card-content p {
font-size: 14px;
color: #fbcfe8;
line-height: 1.5;
margin-bottom: 32px;
opacity: 0.9;
}

/* --- Inline Phone Action Row Widget --- */
.faq-phone-anchor {
display: flex;
align-items: center;
gap: 16px;
text-decoration: none;
background-color: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
padding: 16px 20px;
border-radius: 12px;
transition: all 0.25s ease;
}

.phone-icon-frame {
width: 44px;
height: 44px;
background-color: #ffeb3b;
color: #891B18;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.phone-meta {
display: flex;
flex-direction: column;
}

.phone-label {
font-size: 11px;
text-transform: uppercase;
color: #fbcfe8;
letter-spacing: 0.05em;
font-weight: 600;
}

.phone-number {
font-size: 18px;
font-weight: 700;
color: #ffffff;
}

.faq-phone-anchor:hover {
background-color: #ffffff;
border-color: #ffffff;
}

.faq-phone-anchor:hover .phone-meta .phone-label {
color: #b50500;
}

.faq-phone-anchor:hover .phone-meta .phone-number {
color: #891B18;
}

.faq-phone-anchor:hover .phone-icon-frame {
transform: scale(1.1) rotate(-10deg);
background-color: #891B18;
color: #ffeb3b;
}

/* --- Adaptive Viewport Adjustments --- */
@media (max-width: 991.98px) {
.faq-section-container {
grid-template-columns: 1fr; /* Convert directly to safe single column stacked stream */
gap: 40px;
}

.faq-content-column,
.faq-sidebar-column {
grid-column: span 7 !important;
width: 100%;
}

.faq-sidebar-column {
position: static; /* Disables sticky lock mechanics on mobile views */
}

.faq-image-card {
min-height: 380px;
}
}

@media (max-width: 575.98px) {
.faq-telemetry-section {
padding: 60px 16px;
}

.faq-card-content {
padding: 24px;
}
}

/* --- Master Section Integration --- */
.brand-process-section {
padding: 80px 0 0 0;
background-color: #fcfafb; /* Clean alternative background layout */

}

/* --- Card Row Alignment Tuning --- */
.process-cards-row {
display: flex;
flex-wrap: wrap;
}

/* --- Individual Step Item Card Blocks --- */
.process_sec {
background: #ffffff;
border: 1px solid rgba(160, 1, 85, 0.06);
border-radius: 16px;
padding: 40px 32px;
height: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
position: relative;
overflow: hidden;
box-shadow: 0 4px 20px rgba(69, 0, 37, 0.02);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Card Hover States */
.process_sec:hover {
transform: translateY(-8px);
border-color: rgba(160, 1, 85, 0.15);
box-shadow: 0 20px 40px rgba(69, 0, 37, 0.06);
}

/* Floating Numeric Step Count Accents */
.process-step-badge {
font-size: 44px;
font-weight: 900;
color: rgba(160, 1, 85, 0.08); /* Faded accent color backdrop */
line-height: 1;
margin-bottom: 20px;
transition: color 0.3s ease;
}

.process_sec:hover .process-step-badge {
color: rgba(160, 1, 85, 0.2);
}

/* Typography Inside Component Blocks */
.process_sec h5 {
font-size: 20px;
font-weight: 700;
color: #891B18;
margin-bottom: 14px;
}

.process_sec p {
font-size: 14.5px;
line-height: 1.6;
color: #1f1d1e;
margin-bottom: 28px;
flex-grow: 1; /* Automatically forces action links down uniformly */
}

/* --- Contextual Navigation Routing Buttons --- */
.process-route-btn {
display: inline-flex;
align-items: center;
gap: 10px;
background-color: transparent;
border: 2px solid #891B18;
color: #891B18;
text-decoration: none;
padding: 10px 20px;
border-radius: 8px;
font-size: 14px;
font-weight: 700;
width: 100%;
justify-content: space-between;
box-sizing: border-box;
transition: all 0.25s ease;
}

.process-route-btn i {
font-size: 12px;
transition: transform 0.25s ease;
}

/* Button Hover State Interactions */
.process_sec:hover .process-route-btn {
background-color: #b50500;
border-color: #b50500;
color: #ffffff;
}

.process-route-btn:hover i {
transform: translateX(4px);
}


/* --- Core Footer Layout Setup --- */
.site-operations-footer {
position: relative;
background-color: #060310; /* Super deep contrast shadow shade of your berry profile */
color: #ffffff;
padding: 70px 24px 20px 24px;
overflow: hidden;
border-top: 4px solid #130a60; /* Solid brand colored top bar edge accent */
}

.footer-ambient-mesh {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at 15% 20%, rgba(160, 1, 85, 0.15) 0%, transparent 50%);
pointer-events: none;
z-index: 1;
}

.footer-main-container {
position: relative;
z-index: 2;
width: 100%;
max-width: 1240px;
margin: 0 auto;
}

/* Master Grid Configuration */
.footer-grid-row {
display: grid;
grid-template-columns: 1.2fr 0.8fr 0.9fr 1.1fr;
gap: 40px;
margin-bottom: 60px;
}

/* Common Column Styling Rules */
.footer-title {
font-size: 18px;
font-weight: 700;
margin: 0 0 28px 0;
position: relative;
color: #ffffff;
letter-spacing: -0.01em;
}

/* Subtle accent line below column headers */
.footer-title::after {
content: '';
position: absolute;
bottom: -8px;
left: 0;
width: 35px;
height: 2px;
background-color: #ffeb3b; /* Highlight yellow detail accent */
}

/* --- Column 1 Specifics: Contact Parameters --- */
.footer-contact-list {
list-style: none;
padding: 0;
margin: 0 0 32px 0;
display: flex;
flex-direction: column;
gap: 20px;
}

.footer-contact-list li {
display: flex;
align-items: flex-start;
gap: 14px;
}

.contact-icon {
font-size: 15px;
color: #ffeb3b;
margin-top: 4px;
}

.contact-meta {
display: flex;
flex-direction: column;
gap: 2px;
}

.contact-meta span {
font-size: 11px;
text-transform: uppercase;
color: #fbcfe8;
letter-spacing: 0.05em;
font-weight: 600;
}

.contact-link {
font-size: 15px;
color: #ffffff;
text-decoration: none;
transition: color 0.2s ease;
}

.contact-link:hover {
color: #ffeb3b;
}

.contact-text {
font-size: 14px;
line-height: 1.5;
color: #ece6e9;
margin: 0;
}

/* Social Media Channels Button Bar */
.footer-social-wrapper {
display: flex;
gap: 10px;
}

.social-icon-btn {
width: 38px;
height: 38px;
background-color: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: #fbcfe8;
font-size: 14px;
text-decoration: none;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.social-icon-btn:hover {
background-color: #b50500;
border-color: #b50500;
color: #ffffff;
transform: translateY(-3px);
}

/* --- Column 2 & 3 Specifics: Standard Lists Link Handles --- */
.footer-links-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 5px;
}

.footer-links-list a {
font-size: 14px;
color: #ece6e9;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
transition: all 0.2s ease;
}

.link-arrow {
font-size: 10px;
color: rgba(255, 255, 255, 0.2);
transition: transform 0.2s ease, color 0.2s ease;
}

.footer-links-list a:hover {
color: #ffeb3b;
transform: translateX(4px);
}

.footer-links-list a:hover .link-arrow {
color: #ffeb3b;
transform: translateX(2px);
}

/* --- Column 4 Specifics: Map Container Clipping Box --- */
.footer-map-frame {
width: 100%;
height: 270px;
background-color: rgba(0, 0, 0, 0.2);
border-radius: 10px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.1);
}

/* --- Bottom Copyright Bar Row Layout --- */
.footer-bottom-bar {
border-top: 1px solid rgba(255, 255, 255, 0.08);
padding-top: 20px;
display: flex;
justify-content: center;
align-items: center;
}

.footer-bottom-bar p {
font-size: 16px;
color: #ffffff;
margin: 0;
}

/* --- Adaptive Grid Layout Viewport Breakpoints --- */
@media (max-width: 1024px) {
.footer-grid-row {
grid-template-columns: repeat(2, 1fr); /* Clean 2x2 grid structure setup for tablet profiles */
gap: 48px;
}
}
@media (max-width: 800px) {
.navbar-brand img {
height:70px;
}
}
@media (max-width: 650px) {
.site-operations-footer {
padding: 60px 16px 24px 16px;
}

.footer-grid-row {
grid-template-columns: 1fr; /* Pure vertical stack handling for small smartphone form factors */
gap: 36px;
}

.footer-title {
margin-bottom: 20px;
}
}
.form_sec{
    background: #5c5c00;
}
.form_sec h4{
    font-size: 20px;
    background-color: #200312;
    color: #fff;
    font-weight: 700;
    text-align: center;
    padding: 8px 5px;
}
.form_sec form{
    padding: 8px 20px 20px 20px;

}
.my-form1 .form-control{
    background: rgba(0, 0, 0, 0.2) !important;
    color: #fff;
}
.my-form1 .form-control::placeholder{color: #fff !important;}
.form_sec p{color: #fff;padding: 8px 20px 20px 20px;font-size: 13px;background-color: #200312;}
/* CSS*/
.fix-icon {
    display: inline-block;
    position: fixed;
    bottom: 100px;
    left: 20px;
    z-index: 999999;
}
#fix-icon {
    -webkit-animation-duration: 2.5s;
    animation-duration: 2.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
}
.fix-icon-item {
    animation: bounce 1s infinite alternate;
    animation-duration: 1s;
    -webkit-animation: bounce 1s infinite alternate;
        animation-duration: 1s;
        animation-timing-function: ease;
        animation-iteration-count: infinite;
        animation-fill-mode: none;
}
.fix-icon-item img {
    width: 55px !important;
	height: 55px !important;
    background: 
    #ff7400;
    border-radius: 50%;
    text-align: center;
    cursor: pointer;
    padding: 10px;
}
.fix-icon-whataap {
    display: inline-block;
    position: fixed;
    bottom: 30px;
    left: 20px;
    z-index: 999999;
    transition: all0.5s ease-in-out;
}
.fix-icon-whataap-item img {
    border-radius: 50%;
    box-shadow: 1px 1px 4px 
rgba(60, 60, 60, .4);
transition: box-shadow .2s;
cursor: pointer;
overflow: hidden;
width: 55px !important;
height: 55px !important;
background:
    #25d366 !important;
}
.fix-icon-whataap-item:before {
    content: "";
    border: 20px solid rgba(37, 211, 102, .51);
    border-radius: 50%;
    height: 80px;
    width: 80px;
    position: absolute;
    animation: pulsate 1s ease-out;
    animation-iteration-count: infinite;
    opacity: 0;
    z-index: -1;
    top: -12px;
    left: -13px;
}

@keyframes pulsate {
    0% {
        transform: scale(.6, .6);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: scale(1.5, 1.5);
        opacity: 0;
    }
}
img{max-width:100%;}
/*---*/