@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

/* ========================= */
/* RESET */
/* ========================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

html {
    scroll-behavior: smooth;
}

body {
    background: #f8f9fa;
    color: #222;
}

/* ========================= */
/* NAVBAR */
/* ========================= */

.navbar {
    background: #ffffff !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    padding: 15px 0;
}

.navbar-brand {
    font-size: 28px;
    font-weight: 800;
    color: #000 !important;
}

.navbar a {
    font-weight: 600;
    font-size: 16px;
}

.nav-link {
    color: #333 !important;
    transition: 0.3s;
}

.nav-link:hover {
    color: #0d6efd !important;
}

/* ========================= */
/* CAROUSEL */
/* ========================= */

.carousel-item {
    height: 100vh;
    min-height: 700px;
    position: relative;
}

.carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* DARK OVERLAY */

.carousel-item::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 1;
}

/* CAPTION */

.carousel-caption {
    z-index: 2;
    bottom: 12%;
    background: rgba(0, 0, 0, 0.60);
    padding: 35px;
    border-radius: 20px;
    max-width: 900px;
    margin: auto;
    left: 8%;
    right: 8%;
}

/* TITLE */

.carousel-caption h5 {
    font-size: 3rem;
    font-weight: 800;
    color: #fff;
    text-transform: uppercase;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.9);
    margin-bottom: 20px;
}

/* TEXT */

.carousel-caption p {
    font-size: 1.1rem;
    font-weight: 500;
    color: #fff;
    width: 100%;
    margin: auto;
    line-height: 1.7;
}

/* BUTTON */

.carousel-caption .btn {
    font-size: 1rem;
    font-weight: 700;
    padding: 14px 30px;
    border-radius: 12px;
}

/* ========================= */
/* RIDE REQUEST SECTION */
/* ========================= */

.ride-request {
    background: #f8f9fa;
    padding: 60px 20px;
}

/* FORM BOX */

.ride-form {
    max-width: 1000px;
    margin: auto;
    background: #fff;
    padding: 35px;
    border-radius: 18px;
    box-shadow: 0 6px 25px rgba(0,0,0,0.12);
}

/* FORM TITLE */

.ride-request h2 {
    font-size: 48px;
    font-weight: 800;
    margin-bottom: 15px;
}

.ride-request p {
    font-size: 22px;
    color: #555;
    margin-bottom: 30px;
}

/* INPUTS / SELECTS */

.ride-form .form-control,
.ride-form .form-select {
    font-size: 22px;
    font-weight: 500;
    padding: 18px 20px;
    height: 65px;
    border-radius: 12px;
    border: 2px solid #ddd;
    color: #222;
}

/* PLACEHOLDER TEXT */

.ride-form .form-control::placeholder,
.ride-form textarea::placeholder {
    font-size: 20px;
    color: #666;
    font-weight: 500;
}

/* SELECT TEXT */

.ride-form select {
    font-size: 22px;
    font-weight: 500;
}

/* TEXTAREA */

.ride-form textarea {
    min-height: 100px;
    font-size: 22px;
    padding-top: 18px;
    resize: none;
}

/* BUTTON */

.ride-form .btn {
    font-size: 24px;
    font-weight: 700;
    padding: 18px;
    height: auto;
    border-radius: 12px;
}

/* ========================= */
/* SECTION GENERAL */
/* ========================= */

section {
    padding: 90px 0;
}

section h2 {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 15px;
}

section p {
    color: #555;
    line-height: 1.8;
}

/* ========================= */
/* SERVICES */
/* ========================= */

.services {
    background: #f8f9fa;
}

.service-box {
    background: #fff;
    padding: 40px 25px;
    text-align: center;
    border-radius: 20px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    margin-bottom: 25px;
    height: 100%;
    transition: 0.3s;
}

.service-box:hover {
    transform: translateY(-8px);
}

.service-box i {
    font-size: 50px;
    color: #0d6efd;
    margin-bottom: 20px;
}

.service-box h3 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 15px;
}

.service-box p {
    color: #555;
}

/* ========================= */
/* ABOUT */
/* ========================= */

#about {
    background: #fff;
}

#about img {
    width: 100%;
    border-radius: 20px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.1);
}

#about h3 {
    font-weight: 700;
    margin-bottom: 20px;
}

#about p {
    color: #555;
}

/* ========================= */
/* SAFETY */
/* ========================= */

#safety {
    background: #f8f9fa;
}

#safety .service-box {
    text-align: left;
}
/* ========================= */
/* FAQ */
/* ========================= */

.faqs .accordion-button {
    font-size: 18px;
    font-weight: 700;
    color: #000 !important;
    background: #ffffff !important;
    border: 2px solid #0d6efd;
    padding: 18px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.faqs .accordion-button:not(.collapsed) {
    background: #0d6efd !important;
    color: #fff !important;
}

.faqs .accordion-button:focus {
    box-shadow: none;
    border-color: #0d6efd;
}

.faqs .accordion-body {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.8;
    color: #222;
    background: #f8f9fa;
    padding: 20px;
    border-left: 2px solid #0d6efd;
    border-right: 2px solid #0d6efd;
    border-bottom: 2px solid #0d6efd;
}

.faqs h2 {
    font-size: 36px;
    font-weight: 700;
    color: #000;
}

.faqs p {
    font-size: 18px;
    font-weight: 500;
    color: #444;
}

/* ========================= */
/* ABOUT ABT ACCORDION */
/* ========================= */

#about-abt .accordion-button {
    font-size: 22px;
    font-weight: 700;
    color: #000 !important;
    background: #ffffff !important;
    border: 2px solid #0d6efd;
    padding: 20px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.10);
}

#about-abt .accordion-button:not(.collapsed) {
    background: #0d6efd !important;
    color: #fff !important;
}

#about-abt .accordion-button:focus {
    box-shadow: none;
    border-color: #0d6efd;
}

#about-abt .accordion-body {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.9;
    color: #222;
    background: #f8f9fa;
    padding: 25px;
    border-left: 2px solid #0d6efd;
    border-right: 2px solid #0d6efd;
    border-bottom: 2px solid #0d6efd;
}

#about-abt h2 {
    font-size: 42px;
    font-weight: 700;
    color: #000;
}

#about-abt h4 {
    font-size: 28px;
    font-weight: 700;
    color: #0d6efd;
}

#about-abt h5 {
    font-size: 22px;
    font-weight: 700;
    color: #000;
}

#about-abt p,
#about-abt li {
    font-size: 18px;
    font-weight: 500;
    color: #444;
}

#about-abt ul {
    padding-left: 25px;
}

/* ========================= */
/* CONTACT */
/* ========================= */

.contact {
    background: #fff;
}

.contact form {
    border-radius: 20px;
}

.contact .form-control {
    height: 55px;
    border-radius: 12px;
}

.contact textarea {
    height: auto !important;
}

.contact button {
    height: 55px;
    border-radius: 12px;
    font-weight: 700;
}

/* ========================= */
/* FOOTER */
/* ========================= */

footer {
    background: #111;
    padding: 25px 0;
}

footer p {
    margin: 0;
    color: #fff;
    font-size: 15px;
}

/* GOOGLE VOICE TEXT BUTTON */

.text-float {
    position: fixed;
    width: 65px;
    height: 65px;
    bottom: 25px;
    right: 25px;
    background: #4285F4;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    z-index: 999;
    transition: 0.3s ease;
}

.text-float:hover {
    transform: scale(1.08);
    background: #3367d6;
}

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

@media(max-width: 767px) {

    .navbar-brand {
        font-size: 22px;
    }

    .carousel-item {
        min-height: 850px;
    }

    .carousel-caption {
        bottom: 6%;
        padding: 20px;
        left: 5%;
        right: 5%;
    }

    .carousel-caption h5 {
        font-size: 1.7rem;
    }

    .carousel-caption p {
        font-size: 0.95rem;
    }

    .ride-request {
        padding: 50px 15px;
    }

    .ride-request h2 {
        font-size: 34px;
    }

    .ride-request p {
        font-size: 18px;
    }

    .ride-form {
        padding: 25px 18px;
    }

    .ride-form .form-control,
    .ride-form .form-select,
    .ride-form textarea {
        font-size: 18px;
        height: auto;
        padding: 14px;
        margin-bottom: 10px;
    }

    .ride-form .btn {
        font-size: 20px;
    }

    section {
        padding: 60px 0;
    }

    section h2 {
        font-size: 2rem;
    }

    #about {
        text-align: center;
    }

    #about img {
        margin-bottom: 25px;
    }

    .service-box {
        padding: 30px 20px;
    }

    .whatsapp-float {
        width: 58px;
        height: 58px;
        font-size: 30px;
    }
}

/* ========================= */
/* FLIP CARDS */
/* ========================= */

.flip-card {
    background: transparent;
    width: 100%;
    min-height: 280px;
    perspective: 1000px;
    margin-bottom: 25px;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    min-height: 280px;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner,
.flip-card:focus-within .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
    position: absolute;
    width: 100%;
    min-height: 280px;
    backface-visibility: hidden;
    border-radius: 20px;
}

.flip-card-front {
    background: #fff;
    color: #000;
}

.flip-card-back {
    background: #0d6efd;
    color: #fff;
    transform: rotateY(180deg);
    padding: 30px 25px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: 0 5px 20px rgba(0,0,0,0.15);
}

.flip-card-back h3 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 15px;
}

.flip-card-back p {
    font-size: 17px;
    font-weight: 500;
    line-height: 1.7;
    color: #fff;
}

.click-hint {
    display: inline-block;
    margin-top: 15px;
    padding: 8px 18px;
    background: #0d6efd;
    color: #fff;
    border-radius: 30px;
    font-size: 15px;
    font-weight: 700;
}

@media(max-width: 767px) {

    .flip-card,
    .flip-card-inner,
    .flip-card-front,
    .flip-card-back {
        min-height: 340px;
    }

    .flip-card-back {
        padding: 25px 18px;
    }

    .flip-card-back h3 {
        font-size: 22px;
    }

    .flip-card-back p {
        font-size: 16px;
    }
}

/* CONTACT INFO BOX */

.contact .bg-white p {
    font-size: 22px;
    font-weight: 500;
    color: #333;
}

.contact .bg-white i {
    font-size: 24px;
    margin-right: 8px;
}

.contact h4 {
    font-size: 30px;
    font-weight: 700;
}

/* ========================= */
/* ABTRIDES LOGO + QR CODE */
/* ========================= */

.abt-navbar-logo {
    height: 45px;
    width: auto;
    margin-right: 10px;
}

.abt-qr-section {
    padding: 40px 0;
    background: #f8f9fa;
    text-align: center;
}

.abt-qr-box {
    background: #ffffff;
    padding: 25px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.12);
    display: inline-block;
}

.abt-qr-img {
    width: 180px;
    max-width: 100%;
    height: auto;
    margin-bottom: 15px;
}

.abt-footer-logo {
    width: 120px;
    height: auto;
    margin-bottom: 15px;
}

.abt-footer-qr {
    width: 120px;
    height: auto;
    background: white;
    padding: 8px;
    border-radius: 10px;
    margin-bottom: 15px;
}

/* MOBILE */

@media(max-width: 767px) {

    .abt-navbar-logo {
        height: 38px;
    }

    .abt-qr-img {
        width: 150px;
    }

    .abt-footer-logo {
        width: 90px;
    }

    .abt-footer-qr {
        width: 90px;
    }
}
.chat-label{
    position: fixed;
    bottom: 95px; /* Ajusta según la posición de tu botón */
    right: 20px;
    background: #fff;
    color: #000;
    padding: 5px 10px;
    border-radius: 15px;
    font-size: 12px;
    font-weight: bold;
    z-index: 999;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.text-float{
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 999;
}
.mobile-contact-style {
   background: #f7f7f7;
   padding: 25px 10px;
}

.contact-card {
   width: 95%;
   max-width: 1100px;
   margin: 14px auto;
   background: #fff;
   border-radius: 10px;
   padding: 18px;
   display: flex;
   align-items: center;
   gap: 18px;
   box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

.icon-circle {
   width: 58px;
   height: 58px;
   min-width: 58px;
   border-radius: 50%;
   background: #eaf6ed;
   color: #218b32;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 28px;
}

.contact-card h4 {
   margin: 0;
   font-size: 16px;
   color: #218b32;
   font-weight: 800;
}

.contact-card h2 {
   margin: 3px 0 0;
   font-size: 22px;
   color: #001b3f;
   line-height: 1.2;
   font-weight: 800;
}

.contact-card h2 span,
.why-card span {
   color: #218b32;
}

.why-card {
   display: block;
}

.why-card h3 {
   text-align: center;
   color: #001b3f;
   font-size: 17px;
   font-weight: 900;
   margin-bottom: 15px;
   padding-bottom: 12px;
   border-bottom: 1px solid #ddd;
}

.why-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 14px;
}

.why-grid div {
   color: #001b3f;
   font-size: 14px;
   line-height: 1.2;
}

.why-grid small {
   font-size: 11px;
   color: #001b3f;
}

.call-card {
   width: 95%;
   max-width: 1100px;
   margin: 14px auto;
   background: #001b3f;
   color: #fff;
   border-radius: 10px;
   padding: 14px 16px;
   display: flex;
   align-items: center;
   gap: 16px;
   text-decoration: none;
   box-shadow: 0 2px 8px rgba(0,0,0,.12);
}

.phone-icon {
   width: 70px;
   height: 70px;
   min-width: 70px;
   border-radius: 50%;
   background: #218b32;
   border: 2px solid #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 34px;
}

.call-card h4 {
   margin: 0;
   color: #00d84a;
   font-size: 15px;
   font-weight: 800;
}

.call-card h2 {
   margin: 2px 0;
   color: #fff;
   font-size: 28px;
   font-weight: 900;
}

.call-card p {
   margin: 0;
   color: #fff;
   font-size: 11px;
}
/* FAQ STYLE LIKE SAMPLE */

.faqs {
   background: #f7f8fa;
}

.faqs h2 {
   color: #001b3f;
   font-weight: 900;
   font-size: 34px;
}

.faqs h2::after {
   content: "";
}

.faqs h2 span,
.faqs .text-center h2::first-letter {
   color: inherit;
}

.faqs .text-center h2 {
   font-family: 'Poppins', sans-serif;
}

.faqs .text-center p {
   color: #4a5568;
   font-size: 15px;
}

.faqs .accordion {
   max-width: 760px;
   margin: 0 auto;
}

.faqs .accordion-item {
   border: none;
   border-radius: 10px;
   margin-bottom: 12px;
   overflow: hidden;
   box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

.faqs .accordion-button {
   background: #ffffff;
   color: #001b3f;
   font-weight: 800;
   font-size: 16px;
   padding: 18px 22px;
}

.faqs .accordion-button:not(.collapsed) {
   background: #168c2b;
   color: #ffffff;
}

.faqs .accordion-button:focus {
   box-shadow: none;
}

.faqs .accordion-body {
   background: #ffffff;
   color: #333;
   font-size: 15px;
   line-height: 1.7;
   border-top: 3px solid #168c2b;
}
/* RIDE ESTIMATE FORM */

.estimate-section {
   background: #f7f8fa;
   padding: 50px 15px;
}

.estimate-box {
   max-width: 850px;
   margin: 0 auto;
   background: #fff;
   border-radius: 24px;
   padding: 35px;
   box-shadow: 0 10px 35px rgba(0,0,0,.08);
}

.estimate-header {
   text-align: center;
   margin-bottom: 25px;
}

.estimate-icon {
   width: 55px;
   height: 55px;
   background: #eaf7ee;
   color: #168c2b;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto 10px;
   font-size: 26px;
}

.estimate-header h2 {
   color: #001b3f;
   font-size: 52px;
   line-height: 1.05;
   font-weight: 900;
   margin: 0;
}

.estimate-header h2 span {
   color: #168c2b;
}

.estimate-header h4 {
   color: #168c2b;
   font-weight: 800;
   margin: 5px 0;
}

.estimate-header p {
   color: #555;
   font-size: 18px;
   margin-top: 12px;
}

.estimate-form label {
   color: #001b3f;
   font-weight: 800;
   margin: 12px 0 6px;
   display: block;
}

.estimate-form label span {
   color: #777;
   font-weight: 500;
}

.estimate-form input,
.estimate-form select,
.estimate-form textarea {
   width: 100%;
   border: 1px solid #dcdfe4;
   border-radius: 14px;
   padding: 16px 18px;
   font-size: 16px;
   outline: none;
   background: #fff;
}

.estimate-form input:focus,
.estimate-form select:focus,
.estimate-form textarea:focus {
   border-color: #168c2b;
   box-shadow: 0 0 0 3px rgba(22,140,43,.12);
}

.schedule-fields {
   grid-template-columns: 1fr 1fr;
   gap: 12px;
   margin-top: 12px;
}

.estimate-form h3 {
   text-align: center;
   color: #168c2b;
   font-size: 17px;
   font-weight: 900;
   margin: 25px 0 10px;
}

.contact-row {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 15px;
}

.estimate-benefits {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   gap: 8px;
   margin: 25px 0 15px;
   background: #f3f8f5;
   border-radius: 10px;
   padding: 15px 8px;
   text-align: center;
}

.estimate-benefits div {
   color: #001b3f;
   font-size: 12px;
   border-right: 1px solid #d8e6dd;
}

.estimate-benefits div:last-child {
   border-right: none;
}

.estimate-benefits strong {
   font-size: 11px;
   line-height: 1.2;
}

.estimate-btn {
   width: 100%;
   background: #14a94a;
   color: #fff;
   border: none;
   border-radius: 14px;
   padding: 18px;
   font-size: 22px;
   font-weight: 900;
   margin-top: 15px;
   cursor: pointer;
   transition: .3s;
}

.estimate-btn:hover {
   background: #0f8d3d;
}

.estimate-note{
    color:#222;
    font-size:15px;
    line-height:1.3;
    text-align:center;
    margin:0;
}

.notice-title{
    display:block;
    font-size:1.3rem;
    font-weight:700;
    color:#000;
    margin-bottom:4px;
    text-align:center;
}
.faster-call {
   margin-top: 15px;
   border: 1px solid #dcdfe4;
   border-radius: 10px;
   padding: 14px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   text-decoration: none;
   color: #001b3f;
   background: #fff;
}

.faster-call span {
   width: 45px;
   height: 45px;
   background: #eaf7ee;
   color: #168c2b;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 22px;
}

.faster-call small {
   display: block;
   color: #001b3f;
   font-size: 12px;
}

.faster-call strong {
   color: #168c2b;
   font-size: 15px;
}

.faster-call h4 {
   color: #168c2b;
   font-size: 26px;
   font-weight: 900;
   margin: 0;
}

@media (max-width: 768px) {
   .estimate-box {
      padding: 22px 15px;
   }

   .contact-row,
   .schedule-fields {
      grid-template-columns: 1fr;
   }

   .estimate-benefits {
      grid-template-columns: 1fr 1fr;
   }

   .estimate-benefits div {
      border-right: none;
      border-bottom: 1px solid #d8e6dd;
      padding-bottom: 8px;
   }

   .estimate-header h2 {
      font-size: 28px;
   }

   .faster-call {
      flex-direction: column;
      gap: 8px;
      text-align: center;
   }
}

.estimate-form label{
   color:#001b3f;
   font-weight:800;
   font-size:16px;
}

.estimate-form input::placeholder,
.estimate-form textarea::placeholder{
   color:#9aa1aa;
}

.estimate-form textarea{
   min-height:120px;
}

.estimate-header{
   text-align:left;
}

.estimate-header h4{
   display:flex;
   gap:20px;
   flex-wrap:wrap;
   font-size:16px;
   margin-top:15px;
}

.estimate-note{
   font-size:14px;
}