@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@300..900&display=swap');

:root {
    --primary1: 9, 13, 15;
    /*  #090D0F; */
    --primary2: 25, 27, 30;
    /*  #191B1E; */
    --primary3: 143, 151, 157;
    /*  #8F979D; */
    --primary4: 1, 127, 226;
    /*  #D9D9D9; */
    --primary5: 226, 248, 255;
    /* #E2F8FF */
    --bs-color: 29, 29, 29;
    /* #1D1D1D; */
    --color_black: 0, 0, 0;
    --color_white: 255, 255, 255;
    --baseFont: "Figtree", sans-serif;
    --imgPrimary1: invert(4%) sepia(6%) saturate(2839%) hue-rotate(155deg) brightness(100%) contrast(97%);
    --imgPrimary2: invert(6%) sepia(5%) saturate(1768%) hue-rotate(177deg) brightness(95%) contrast(89%);
    --imgPrimary3: invert(68%) sepia(7%) saturate(335%) hue-rotate(163deg) brightness(87%) contrast(84%);
    --imgWhite: invert(100%) sepia(100%) saturate(0%) hue-rotate(13deg) brightness(103%) contrast(102%);
    --imgBlack: invert(0%) sepia(100%) saturate(0%) hue-rotate(108deg) brightness(93%) contrast(103%);
    --padding: clamp(3.125rem, 2.5rem + 3.125vw, 6.25rem);
    --paddingSm: clamp(1.5625rem, 1.25rem + 1.5625vw, 3.125rem);
    --radius: 12px;
}

.bg-primary1 {
    background-color: rgb(var(--primary1));
}

.bg-primary2 {
    background-color: rgb(var(--primary2));
}

.clr-1 {
    color: rgb(var(--primary1));
}

.clr-2 {
    color: rgb(var(--primary2));
}

.clr-3 {
    color: rgb(var(--primary3));
}

html {
    scroll-behavior: auto !important;
}

body {
    font-family: var(--baseFont);
    color: rgb(var(--bs-color));
}


a,
a:hover,
a:focus {
    outline: none;
    text-decoration: none;
}

button:focus {
    outline: none;
}

.padding {
    padding: var(--padding) 0;
}

.paddingsm {
    padding: var(--paddingSm) 0;
}

h2.title {
    color: rgb(var(--bs-color));
    font-size: 2.25rem;
    font-weight: 600;
    margin: 0 0 48px 0;
}

h2.title span {
    background: linear-gradient(to right, #44C8F5, #017FE2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.radius {
    border-radius: var(--radius);
}

.btn-custom {
    position: relative;
    background: linear-gradient(to bottom, rgba(68, 200, 245, 1) 0%, rgba(1, 127, 226, 1) 100%);
    color: rgb(var(--color_white));
    border: none;
    border-radius: var(--radius);
    padding: 16px 24px;
    cursor: pointer;
    transition: all 0.3s ease;
    line-height: normal;
}


.btn-custom:hover,
.btn-custom:focus,
.btn-custom:active {
    background: linear-gradient(to bottom, rgba(1, 127, 226, 1) 0%, rgba(68, 200, 245, 1) 100%);
}

#wrapper {
    max-width: 1920px;
    margin: 0 auto;
}

/* header */
.header {
    z-index: 99;
    max-width: 1920px;
    box-shadow: 0px 4px 50px rgba(44, 48, 50, 0.1);
    background: linear-gradient(to right, rgb(var(--color_white)) 0%, #dbf6ff 100%);

}

.header * {
    transition: all .3s linear;
}

.header .navbar {
    padding: 24px 0;
}

.header .navbar-nav .nav-item .nav-link {
    padding: 16px 18px;
    color: rgb(var(--color_white));
    line-height: normal;
}

.header .navbar-nav .nav-item:last-child .nav-link {
    background: linear-gradient(to bottom, rgba(68, 200, 245, 1) 0%, rgba(1, 127, 226, 1) 100%);
    border-radius: var(--radius);
    padding: 16px 24px;
    margin-left: 18px;
    color: rgb(var(--color_white));
}

.header .navbar-nav .nav-item:last-child .nav-link:hover {
    background: linear-gradient(to bottom, rgba(1, 127, 226, 1) 0%, rgba(68, 200, 245, 1) 100%);
    color: rgb(var(--color_white));
}

.header .navbar-nav .nav-item .nav-link {
    color: rgb(var(--bs-color));
}

.header .navbar-nav .nav-item .nav-link:hover {
    color: rgb(var(--primary4));
}

.header .navbar-nav .nav-item.active .nav-link {
    color: rgb(var(--primary4));
}

.header .navbar-nav .nav-item .nav-link.dropdown-toggle {
    cursor: default;
}

.header .navbar-nav li.dropdown a .toggle-icon img {
    width: 13px;
    margin-left: 5px;
}

.dropdown-menu {
    display: none;
}

.header .dropdown:hover>.dropdown-menu {
    display: block;
}

.header .dropdown-menu .dropdown-item:focus,
.header .dropdown-menu .dropdown-item:hover {
    color: rgb(var(--primary1));
    background-color: transparent;
}

/* banner */
#banner {
    position: relative;
    padding: 3rem 0 5rem;
    overflow: hidden;
    margin-top: 99px;

}

#banner video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;

}

h1 {
    font-size: 3rem;
    margin: 0 0 20px;
    font-weight: 400;
    color: rgb(var(--bs-color));
}

.image-wrapper {
    position: sticky;
    display: flex;
    transition: all 0.3s ease;
    align-items: flex-end;
    justify-content: center;
}

.image-wrapper img {
    transition: all 0.3s ease;
    top: -1rem;
}

.image-wrapper .left-img {
    position: relative;
    z-index: 2;
    left: 100px;
}

.image-wrapper .right-img {
    position: relative;
    right: 100px;
    top: -4rem;
    z-index: 1;
}

.image-wrapper .left-img,
.image-wrapper .right-img {
    transform: translateX(0);
}


/* rent-block */
.rent-block div.title {
    font-size: 1.5rem;
    line-height: normal;
    color: rgb(var(--bs-color));
}


/* logo-slider */
.logo-slider::before,
.logo-slider::after {
    content: "";
    top: 0;
    height: 100%;
    width: 70px;
    position: absolute;
    z-index: 1;
}

.logo-slider::before {
    left: 0;
    background-image: linear-gradient(to right, rgb(var(--primary1)), transparent);
}

.logo-slider::after {
    right: 0;
    background-image: linear-gradient(to left, rgb(var(--primary1)), transparent);
}

.logo-slider .item {
    display: flex;
    height: 60px;
    align-items: center;
}

.logo-slider .item img {
    width: auto;
}


/* rent-block */
.rent-block .rent-card {
    background-color: rgb(var(--primary5));
    border-radius: clamp(1.5rem, 0.8571rem + 3.2143vw, 3.75rem);
    padding: calc(var(--padding) / 1.2);
}

.rent-block .rent-card .rent-item .ratio {
    border-radius: calc(var(--radius) * 3);
    overflow: hidden;
}

.rent-block .rent-card .rent-item img {
    border-radius: calc(var(--radius) * 3);
}

.rent-block .rent-card .rent-item * {
    transition: all .3s linear;
}

.rent-block .rent-card .rent-item:hover img {
    transform: scale(1.07);
}

.rent-block .rent-card .rent-item h4 {
    margin-bottom: 12px;
    color: rgb(var(--bs-color));
    font-weight: 600;
    line-height: normal;
}

.rent-block .rent-card .rent-item p {
    color: rgb(var(--primary3));
    line-height: normal;
    max-width: 85%;
    margin: 0 auto;
}

.power-bank {
    overflow: hidden;
}

/* image-group */
.image-group {
    height: 400px;
    position: relative;
    display: flex;
    transition: all 0.3s ease;
    align-items: center;
    justify-content: center;
}

.image-group img {
    position: absolute;
    transition: all 0.3s ease;
}

.image-group .left-img {
    z-index: 2;
    left: 125px;
    top: 0;
}

.image-group .right-img {
    right: 10%;
    z-index: 1;
}

.image-group .text-block {
    position: absolute;
    padding: 1.5rem;
    border-radius: calc(var(--radius) * 2);
    background-color: rgba(var(--primary2), 0.8);
    z-index: 2;
    min-width: 236px;
}

.image-group .text-block h2.title {
    font-weight: 500;
    font-size: 2rem;
}

.image-group .text-block.text-01 {
    left: 15px;
    bottom: 50px;
}

.image-group .text-block.text-02 {
    right: -40px;
    top: -20px;
}

/* map-wrap */
.map {
    position: relative;
}

.map::before {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    display: block;
    width: 100%;
    height: 100%;
    z-index: 0;
    background: linear-gradient(to bottom, rgb(var(--primary2)) 0%, transparent 30%, transparent 75%, rgb(var(--primary2)) 100%);
}

.map iframe {
    display: block;
}

.location {
    position: absolute;
    left: 60px;
    transform: translateY(-50%);
    top: 50%;
    border-radius: calc(var(--radius) * 3);
    background-color: rgb(var(--primary5));
    border: 1px solid rgb(var(--primary5));
    min-width: 425px;
}

.location .icon {
    margin-right: 12px;
}

.location .text h4 {
    font-weight: 300;
    color: rgb(var(--bs-color));
    margin-bottom: 0;
    font-size: 1.25rem;
}

.location small {
    color: rgb(var(--primary3));
    font-weight: 300;
    font-size: 14px;
}

.location .item {
    margin-bottom: 1.5rem;
}

.location .item:last-child {
    margin-bottom: 0;
}

.location .item p {
    color: rgb(var(--primary3));
    font-size: 14px;
    margin-bottom: 0;
}

.location .item p:first-child {
    color: rgb(var(--bs-color));
}

.location .button-wrap {
    display: flex;
    justify-content: space-between;
}

.location .button-wrap .btn-custom {
    width: 48%;
    padding: 12px 24px;
}

.location .button-wrap .btn-custom:hover,
.location .button-wrap .btn-custom:focus {
    color: rgb(var(--color_white));
}


/* why-boosted */
.why-boosted .item {
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: calc(var(--radius) * 3);
    padding: 1.5rem;
    transition: all .3s linear;
    text-align: center;
    overflow: hidden;
}

.why-boosted .item:hover {
    background-color: rgb(var(--primary5));
}

.why-boosted .item .icon {
    margin-bottom: 36px;
}

.why-boosted .item:hover .icon {
    transform: rotate(15deg);
}

.why-boosted .item h4 {
    margin-bottom: 12px;
    color: rgb(var(--bs-color));
}

.why-boosted .item p {
    margin-bottom: 0;
    color: rgb(var(--primary3));
}

/* smart-charging*/
.smart-charging .item {
    background-color: rgb(var(--primary5));
    border-radius: calc(var(--radius) * 2);
    padding: 1.5rem;
    transition: all .3s linear;
    position: relative;
}

.smart-charging h4 {
    font-size: 1.25rem;
    color: rgb(var(--bs-color));
}

.smart-charging .item:hover {
    background: linear-gradient(135deg, rgba(68, 200, 245, 1) 0%, rgba(1, 127, 226, 1) 100%);
}

.smart-charging .item:hover h4 {
    color: rgb(var(--color_white));
}

.smart-charging .item .icon img {
    filter: var(--imgPrimary3);
    transition: all .3s linear;
}

.smart-charging .item:hover .icon img {
    filter: grayscale(1);
    transform: scale(1.2);
}

/* charging-network */
.charging-network .charging-card {
    background: linear-gradient(135deg, rgba(68, 200, 245, 1) 0%, rgba(1, 127, 226, 1) 100%);
    border-radius: calc(var(--radius) * 5);
}

.charging-network .charging-card h2.title {
    font-size: 2.25rem;
    margin-bottom: 6px;
    color: rgb(var(--color_white));
}

.charging-network .charging-card h4 {
    color: rgb(var(--color_white));
}

.charging-network .charging-card .btn-wrap {
    margin-top: 1.5rem;
}

.charging-network .charging-card .btn-wrap .btn-custom {
    margin-bottom: 12px;
    background: linear-gradient(to right, rgba(25, 27, 30, 1) 0%, rgba(9, 13, 15, 1) 100%);
    transition: all .2s linear;
    position: relative;
    top: 0;
}

.charging-network .charging-card .btn-wrap .btn {
    width: 200px;
    padding: 0;
}

.charging-network .charging-card .btn-wrap .btn:first-child {
    margin-right: 1.5rem;
}



.charging-pic * {
    transition: all .3s linear;
}

.charging-pic {
    border-radius: calc(var(--radius) * 3);
    overflow: hidden;
}

.charging-pic:hover img {
    transform: scale(1.07);
}


.main-container {
    border-radius: 0 0 calc(var(--radius) * 5) calc(var(--radius) * 5);
    position: relative;
    background-color: rgb(var(--color_white));
}

/* accordion */
.faqs h2.title {
    color: rgb(var(--bs-color));
}

.accordion .card {
    background-color: transparent;
    margin-top: -1px;
}

.accordion .card-header {
    border-radius: 0;
    background-color: transparent;
}

.accordion .card-header a {
    text-decoration: none;
    font-size: 1.5rem;
    color: rgb(var(--bs-color));
    border-top: 1px solid rgb(var(--primary3));
    border-bottom: 1px solid rgb(var(--primary3));
    position: relative;
    padding-right: 45px !important;
}

.accordion .card-header a::after {
    content: "";
    background: url('../images/arrow.png') no-repeat 0 0;
    width: 24px;
    height: 24px;
    background-size: cover;
    position: absolute;
    right: 1rem;
    top: 1.3rem;
    filter: invert();
}

.accordion .card-header a:not(.collapsed)::after {
    transform: rotate(180deg);
}

.accordion .card-body {
    padding: 1rem 0;
}

.accordion .card-body p {
    color: rgb(var(--bs-color));
}


.accordion .card-body .card-sample {
    background: linear-gradient(0deg, #B8E0FF 0%, #C3E5FF 0.01%, rgba(214, 237, 255, 0.00) 68.75%);
}

.accordion .card-body .card-sample .card-img-top {
    height: auto;
}

.accordion .card-body .card-sample a:hover {
    color: rgb(var(--primary1)) !important;
}

.accordion .card-body .card-sample .btn-custom {
    color: rgb(var(--primary4));
    font-weight: 700;
    font-size: 0.75rem;
    background-color: transparent;
    border: 1px solid rgb(var(--primary1));
    display: flex;
    align-items: center;
}

.accordion .card-body ul {
    margin: 0;
    margin-bottom: 1.5rem;
    padding: 0;
    list-style: none;
}

.accordion .card-body ul li {
    color: rgb(var(--color_white));
    position: relative;
    padding-left: 20px;
    margin-bottom: 8px;
}

/* footer */
footer {
    background: linear-gradient(135deg, rgba(68, 200, 245, 1) 0%, rgba(1, 127, 226, 1) 100%);
    margin-top: calc(var(--padding) * -1);
}

footer .top {
    padding: calc(var(--padding) * 2) 0 var(--padding);
}

footer .theme-mode a {
    margin-right: 12px;
    display: inline-block;
    border-radius: 50%;
}

footer .theme-mode a.active {
    background-color: rgb(var(--color_black));
}

footer .footer-links li {
    margin: 0 0 18px 0;
}

footer .footer-links li:last-child {
    margin-bottom: 0;
}

footer .footer-links li a {
    color: rgb(var(--color_white));
    display: inline-block;
}

footer .footer-links li a:hover,
.footer .footer-links li a:focus {
    color: rgb(var(--primary1));
}



.footer .copyright {
    color: rgb(var(--color_white));
}

.footer .social-media li {
    margin-bottom: 18px;
}

.footer .social-media li a {
    display: block;
    color: rgb(var(--color_white));
}

.footer .social-media a img {
    margin-right: 7px;
    filter: var(--imgWhite);
}

.footer .social-media a:hover {
    color: rgb(var(--primary1));
}


.footer .bottom {
    padding: calc(var(--padding) / 2.2) 0;
    border-top: 1px solid rgba(var(--color_white), 0.5);
}

.footer .other-links li:first-child {
    margin-right: 1rem;
    padding-right: 1rem;
    position: relative;
}

.footer .other-links li a {
    color: rgb(var(--color_white));

}

.footer .other-links li a:hover {
    color: rgb(var(--primary1));
}




.char {
    display: inline-block;
    opacity: 0;
    transform: translateY(60px);
}




/*toggle-btn */
#toggle-btn {
    position: relative;
    border: none;
    width: 32px;
    height: 32px;
    padding: 0;
    background-color: transparent;
    border-radius: 50%;
    overflow: hidden;
}

#toggle-btn span {
    display: inline-block;
    vertical-align: middle;
}

#toggle-btn .icon {
    background: url('../images/light-mode.png') no-repeat center center / contain;
    width: 32px;
    height: 32px;
    transition: all .3s linear;
}


#toggle-btn:hover {
    cursor: pointer;
    opacity: 0.7;
}


/* dark-theme */
.dark-mode-theme #toggle-btn .icon {
    background: rgb(var(--color_black)) url('../images/dark-mode.png') no-repeat center center / contain;
}

.dark-mode-toggle {
    background-color: transparent;
    border: none;
}

.dark-mode-theme .header {
    background: rgb(var(--primary1));
}

.dark-mode-theme .header .navbar-nav .nav-item.active .nav-link {
    color: rgba(var(--color_white), 0.7);
}

.dark-mode-theme .header .navbar-nav .nav-item .nav-link {
    color: rgb(var(--color_white));
}

.dark-mode-theme .header .navbar-nav .nav-item .nav-link:hover {
    color: rgba(var(--color_white), 0.7);
}

.dark-mode-theme .main-container {
    background-color: rgb(var(--primary1));
}

.dark-mode-theme .rent-block .rent-card {
    background-color: rgb(var(--primary2));
}

.dark-mode-theme h2.title {
    color: rgb(var(--color_white));
}

.dark-mode-theme .rent-block .rent-card .rent-item h4 {
    color: rgb(var(--color_white));
}

.dark-mode-theme .rent-block div.title {
    color: rgb(var(--color_white));
}

.dark-mode-theme .location {
    background-color: #1F2225;
    border: 1px solid rgb(var(--primary2));
}

.dark-mode-theme .location .text h4 {
    color: rgb(var(--color_white));
}

.dark-mode-theme .location .item p:first-child {
    color: rgb(var(--color_white));
}

.dark-mode-theme .why-boosted .item:hover {
    background-color: rgb(var(--primary2));
}

.dark-mode-theme .why-boosted .item h4 {
    color: rgb(var(--color_white));
}

.dark-mode-theme .smart-charging .item {
    background-color: rgb(var(--primary2));
}

.dark-mode-theme .smart-charging h4 {
    color: rgb(var(--color_white));
}

.dark-mode-theme .smart-charging .item .icon img {
    filter: grayscale(1);
}

.dark-mode-theme .smart-charging .item:hover {
    background: linear-gradient(to bottom, rgba(1, 127, 226, 1) 0%, rgba(68, 200, 245, 1) 100%);
}

.dark-mode-theme .accordion .card-header a {
    color: rgb(var(--color_white));
    border-top: 1px solid #272B2E;
    border-bottom: 1px solid #272B2E;
}

.dark-mode-theme .faqs h2.title {
    color: rgb(var(--color_white));
}

.dark-mode-theme .accordion .card-header a::after {
    filter: none;
}

.dark-mode-theme .accordion .card-body p {
    color: rgb(var(--color_white));
}

.dark-mode-theme .main-container h1 {
    color: rgb(var(--color_white));
}

.dark-mode-theme .main-container p {
    color: rgb(var(--color_white));
}

.dark-mode-theme .main-container h2 {
    color: rgb(var(--color_white));
}

.dark-mode-theme .main-container h3 {
    color: rgb(var(--color_white));
}

.dark-mode-theme .main-container ul li {
    color: rgb(var(--color_white));
}

.content h2 {
    font-size: 2.25rem;
    margin-bottom: 1rem;
}


/* ===== Contact Page Polish ===== */

:root {
    --bc-bg: #0f1115;
    --bc-card: #1b1e24;
    --bc-card-2: #171a1f;
    --bc-text: #eef1f7;
    --bc-subtle: #a9b2c3;
    --bc-accent: #2e8fff;
    /* primary accent */
    --bc-accent-2: #00b1ff;
    /* secondary accent for gradients */
    --bc-radius: 16px;
    --bc-shadow: 0 10px 30px rgba(0, 0, 0, .25);
}

/* Page background + spacing under fixed header */
.contact-section {
    padding: 40px 0 80px;
    background: linear-gradient(180deg, #eef7ff 0%, #ffffff 35%) no-repeat;
}

/* Keep overall max width nice and readable */
.contact-section .container {
    max-width: 1160px;
}

/* Left info column */
.info-card {
    background: #ffffff;
    border: 1px solid #e9eef7;
    border-radius: var(--bc-radius);
    box-shadow: 0 6px 22px rgba(20, 55, 90, .08);
    padding: 28px;
}

.info-card h3 {
    font-weight: 700;
    font-size: 28px;
    margin-bottom: 18px;
    color: #0c1730;
}

.info-card p {
    color: #2c3a52;
    margin-bottom: 18px;
    line-height: 1.55;
}

.info-card strong {
    display: inline-block;
    margin-bottom: 6px;
    color: #0c1730;
}

.info-card a {
    color: var(--bc-accent);
    text-decoration: none;
}

.info-card a:hover {
    text-decoration: underline;
}

/* Right form column */
.contact-card {
    background: linear-gradient(180deg, var(--bc-card) 0%, var(--bc-card-2) 100%);
    border-radius: var(--bc-radius);
    box-shadow: var(--bc-shadow);
    padding: 28px;
    color: var(--bc-text);
    border: 1px solid rgba(255, 255, 255, .06);
}

.contact-card h3 {
    display: inline-block;
    font-weight: 700;
    font-size: 28px;
    margin-bottom: 18px;
    padding: 6px 12px;
    border-radius: 10px;
    background: linear-gradient(90deg, var(--bc-accent) 0%, var(--bc-accent-2) 100%);
    color: #fff;
}

/* Labels */
.contact-card .form-label {
    color: #dbe3ef;
    font-weight: 600;
}

/* Inputs */
.contact-card .form-control {
    background: #111318;
    border: 1px solid #262b33;
    color: #e9eef7;
    border-radius: 10px;
    padding: 10px 12px;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.contact-card .form-control::placeholder {
    color: #7f8aa3;
}

.contact-card .form-control:focus {
    background: #0e1015;
    border-color: var(--bc-accent);
    box-shadow: 0 0 0 .2rem rgba(46, 143, 255, .18);
    color: #fff;
}

/* Textarea sizing */
.contact-card textarea.form-control {
    min-height: 120px;
    resize: vertical;
}

/* Checkbox */
.contact-card .form-check-input {
    background-color: #0e1015;
    border: 1px solid #2a3039;
    width: 1.1rem;
    height: 1.1rem;
    margin-top: .35rem;
    accent-color: var(--bc-accent);
}

.contact-card .form-check-label {
    color: #cfd7e6;
}

/* Button */
.contact-card .btn-primary {
    border: none;
    border-radius: 12px;
    padding: 10px 18px;
    font-weight: 600;
    letter-spacing: .2px;
    background: linear-gradient(90deg, var(--bc-accent) 0%, var(--bc-accent-2) 100%);
    box-shadow: 0 8px 18px rgba(46, 143, 255, .28);
    transition: transform .12s ease, box-shadow .15s ease;
}

.contact-card .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(46, 143, 255, .35);
}

/* Success + error flashes inside dark card */
.contact-card .alert {
    border-radius: 12px;
    border: none;
}

.contact-card .alert-success {
    background: rgba(30, 180, 90, .12);
    color: #bdf3cf;
}

.contact-card .alert-danger,
.contact-card .alert-warning {
    background: rgba(255, 120, 120, .12);
    color: #ffd4d4;
}

/* Spacing tweaks between columns on large screens */
@media (min-width: 992px) {
    .info-card {
        margin-right: 8px;
    }

    .contact-card {
        margin-left: 8px;
    }
}

/* Stack nicely on mobile */
@media (max-width: 991.98px) {
    .contact-section {
        padding-top: 24px;
    }

    .info-card {
        margin-bottom: 16px;
    }

    .contact-card {
        padding: 22px;
    }

    .contact-card h3 {
        font-size: 24px;
    }
}

/* Optional: tighten form row gutters a bit */
.contact-card .row>[class*="col-"] {
    margin-bottom: 14px;
}

/* ===== Form Error States ===== */

/* Highlight form group with error */
.has-error .form-control {
    border-color: #e74c3c !important;
    /* red border */
    box-shadow: 0 0 0 0.15rem rgba(231, 76, 60, 0.25);
    background-color: #1a0f0f;
    /* subtle red-tinted background */
    color: #fff;
}

.has-error .form-control:focus {
    border-color: #ff6b6b !important;
    box-shadow: 0 0 0 0.25rem rgba(255, 107, 107, 0.35);
    background-color: #150b0b;
}

/* Error label */
.has-error .control-label {
    color: #ff6b6b;
    font-weight: 600;
}

/* Error message below input */
.has-error .help-block {
    color: #ff6b6b;
    font-size: 0.875rem;
    margin-top: 4px;
    line-height: 1.3;
}

/* Add a little spacing if multiple errors stack */
.help-block:empty {
    display: none;
}


/* ================================
   About Page – Polished Styling
   (no content changes required)
   ================================ */

.about-page {
    padding-top: 40px;
    /* space under fixed header */
    padding-bottom: 80px;
    background: linear-gradient(180deg, #f7fbff 0%, #ffffff 60%);
}

.about-page .container,
.about-page .container-fluid {
    max-width: 1100px;
    /* comfy reading width */
}

/* Headings */
.about-page h1,
.about-page .display-5 {
    font-weight: 800;
    letter-spacing: -0.5px;
    margin-bottom: 16px;
}

.about-page h2,
.about-page h3 {
    font-weight: 700;
    letter-spacing: -0.2px;
    margin-top: 28px;
    margin-bottom: 12px;
}

/* Subheading / lead text right after the main title */
.about-page .lead {
    color: #5c6b80;
    font-size: 1.15rem;
    line-height: 1.6;
}

/* Divider accent under the first heading found */
.about-page h1+.lead,
.about-page h1+p,
.about-page .display-5+.lead {
    position: relative;
    padding-top: 12px;
}

.about-page h1+.lead::before,
.about-page h1+p::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 72px;
    height: 4px;
    border-radius: 6px;
    background: linear-gradient(90deg, #2e8fff 0%, #00b1ff 100%);
}

/* Body text */
.about-page p {
    color: #2a3648;
    line-height: 1.75;
    margin-bottom: 0.9rem;
}

/* Lists */
.about-page ul,
.about-page ol {
    margin: 0 0 1rem 1.2rem;
    color: #2a3648;
}

.about-page li {
    margin-bottom: .4rem;
}

/* Links */
.about-page a {
    color: #2e8fff;
    text-decoration: none;
}

.about-page a:hover {
    text-decoration: underline;
}

/* Nice card wrapper for any sections you already have */
.about-page .about-card {
    background: #0f1115;
    color: #eaf0f9;
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 18px;
    box-shadow: 0 14px 34px rgba(18, 31, 60, .18);
    padding: 24px;
    margin: 16px 0;
}

.about-page .about-card h2,
.about-page .about-card h3 {
    color: #fff;
}

/* Image polish (apply class="about-img" to existing imgs if you like) */
.about-page img.about-img,
.about-page .about-img img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 16px;
    box-shadow: 0 10px 26px rgba(15, 17, 21, .18);
}

/* Inline stat blocks (if you already list numbers) */
.about-page .stat {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 16px 18px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid #e9eef7;
    box-shadow: 0 6px 20px rgba(22, 44, 88, .08);
    min-width: 120px;
    margin: 6px;
}

.about-page .stat .num {
    font-size: 1.6rem;
    font-weight: 800;
    color: #0e2a56;
}

.about-page .stat .label {
    color: #64748b;
    font-size: .9rem;
}

/* CTA buttons you already have (keeps Bootstrap semantics) */
.about-page .btn-primary {
    border: none;
    border-radius: 12px;
    padding: 10px 18px;
    font-weight: 600;
    background: linear-gradient(90deg, #2e8fff 0%, #00b1ff 100%);
    box-shadow: 0 10px 22px rgba(46, 143, 255, .28);
}

.about-page .btn-outline-primary {
    border-radius: 12px;
    border-width: 2px;
}

/* Soft section wrapper if you want to group chunks */
.about-page .section {
    background: #ffffff;
    border: 1px solid #edf2fa;
    border-radius: 18px;
    padding: 28px;
    margin: 18px 0;
}

/* Responsive spacing */
@media (max-width: 991.98px) {
    .about-page {
        padding-top: 24px;
    }

    .about-page .about-card,
    .about-page .section {
        padding: 22px;
    }
}



/* Location popup styles (paste into your CSS) */
.loc-card {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(22, 65, 92, 0.08);
  padding: 16px;
  max-width: 520px;
  margin: 12px;
}
.loc-head { padding-bottom: 8px; border-bottom: 1px solid #eef4f6; }
.loc-thumb img { width: 80px; height: 60px; object-fit: cover; border-radius: 8px; }

.loc-title h4 { font-size: 1.15rem; margin: 0; color: #0b6fb8; }
.loc-title small { color: #6c7a86; display:block; }

.loc-body { padding-top: 12px; }

.loc-meta p { margin: 0; }

.loc-stats { display:flex; }
.stat-box {
  flex:1;
  background:#0b6fb8; /* primary */
  color:#fff;
  border-radius:10px;
  padding:10px;
  text-align:center;
  min-width:0;
}
.stat-box .stat-label { font-size: 0.70rem; opacity:0.9; }
.stat-box .stat-value { font-size: 1.5rem; font-weight:700; margin-top:6px; }
.stat-box-green { background: #2fb06f; }
.stat-box-gray { background: #9aa3a8; }

.loc-distance { font-size: 0.85rem; }

.pricing-card {
  display:flex;
  gap:12px;
  background: linear-gradient(180deg, #f6fbff 0%, #eef8ff 100%);
  padding: 12px;
  border-radius: 10px;
  align-items:flex-start;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}
.pricing-thumb img { width:72px; height:72px; object-fit:cover; border-radius:8px; }
.pricing-body .price-value { font-weight:700; color:#046bb8; font-size:1.05rem; margin-bottom:6px; }
.pricing-list { margin:0; padding-left:16px; color:#63707a; }

.loc-actions .btn { flex:1; padding:10px 12px; border-radius:10px; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.btn-direction { background:#ffd95a; color:#08324a; border: none; }
.btn-app { background:#07aaf2; color:#fff; border: none; }
.btn-direction .me-2, .btn-app .me-2 { opacity:0.9; }

.btn-disabled { opacity:0.6; pointer-events:none; }

.coming-soon-banner {
  border-radius: 10px;
  background: linear-gradient(180deg,#fff9ec 0%, #fff6e0 100%);
  padding: 10px;
  margin-bottom: 12px;
  box-shadow: 0 4px 10px rgba(10,30,50,0.04);
  display:flex;
  align-items:center;
}
.cs-inner { display:flex; justify-content:space-between; align-items:center; width:100%; gap:12px; }
.cs-left { flex:1; }
.cs-title { color:#e09900; font-weight:700; display:block; }
.cs-sub{ color:#6b6b6b; margin-top:4px; display:block; }
.cs-actions { display:flex; gap:8px; align-items:center; }
.btn-request { background:#ffd95a; color:#08324a; padding:8px 12px; border-radius:8px; text-decoration:none; display:inline-block; }
.btn-notify { background:#07aaf2; color:white; padding:8px 12px; border-radius:8px; border:none; cursor:pointer; }

@media (max-width: 768px) {
  .loc-card { max-width: 100%; padding: 12px; margin:8px; }
  .loc-thumb img { width:64px; height:48px; }
  .stat-box .stat-value { font-size:1.25rem; }
}