@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

/* =========================================================

   VARIABLES

========================================================= */



:root {

    --bg: #000;

    --white: #fff;

    --text: #ffffff;

    --muted: #ffffff;

    --line: #e6eaf0;

    --blue: #24356b;

    --dark: #0f1728;

    --max: 90%;

}





/* =========================================================

   RESET / BASE

========================================================= */



* {

    box-sizing: border-box;

}



html {

    scroll-behavior: smooth;

}



body {

    margin: 0;

    font-family: "Montserrat", sans-serif;

    color: var(--dark);

    line-height: 1.65;

    background: var(--muted);

}



a {

    text-decoration: none;

    color: inherit;

    font-weight: 500;

    font-size: 18px;

}



.container {

    width: min(var(--max), calc(100% - 40px));

    margin: auto;

    display: flex;

    flex-wrap: wrap;

}



.container img{

    width: 50%;

    border-radius: 8px;

}



.w-100{

    width: 100%!important;

}



.w-200{

    width: 200%!important;

}



.d-fx-h {

    display: flex;

    justify-content: space-around;

    align-items: center;

}



.t-a-c {

    text-align: center;

}



.d-none{

    display: none;

}



.procces-textil {

    padding: 8px;

    border-radius: 100px!important;

    border: 3px solid #8d5910;

}





.btn-primary{

    padding: 12px 24px;

    background: #1a6cb5;

    border-radius: 100px;

    font-weight: 600;

    text-transform: capitalize;

    color: #fff;

    margin: 16px 0;

}



.btn-primary:hover {

    background-color: #0c3962fa;

}





/* =========================================================

   HEADER / NAVIGATION

========================================================= */



header {

    position: sticky;

    top: 0;

    z-index: 50;

    backdrop-filter: blur(14px);

    border-bottom: 1px solid var(--blue);

    background-color: var(--white);

}



.nav {

    min-height: 76px;

    display: flex;

    align-items: center;

    justify-content: space-around;

}



.navup {

     min-height: 50px;

}



.navup div{

        display: flex;

    gap: 16px;

}



.navup p{

    margin: 0;

    padding: 0;

}



.navup a{

    background-color: #003478;

    color: var(--line);

    display: flex;

    width: 30px;

    height: 30px;

    font-size: 16px;

    justify-content: center;

    align-items: center;

    border-radius: 50px;

}



.brand {

    display: flex;

    align-items: center;

    gap: 12px;

    font-weight: 900;

}



.mark {

    width: 44px;

    height: 44px;

    border-radius: 13px;

    display: grid;

    place-items: center;

    background: linear-gradient(135deg, #215dff, #7394ff);

    color: #fff;

    font-size: 13px;

}



.brand small {

    display: block;

    color: var(--muted);

    font-size: 10px;

    font-weight: 600;

}



nav ul {

    display: flex;

    gap: 22px;

    list-style: none;

    margin: 0;

    padding: 0;

    font-size: 14px;

    font-weight: 700;

}



nav ul > li > a > i{

    font-size: 16px;

    border-radius: 50px;

    border: 1px solid var(--blue);

    padding: 4px;

}



nav a:hover {

    color: var(--blue);

}





/* =========================================================

   HERO

========================================================= */



.hero {

    padding: 100px 0 88px;

    color: #fff;

    background-image: url(/src/imgs/Banner\ centro\ de\ servicio.png);

    background-size: cover;

    background-repeat: no-repeat;

        min-height: 800px;

        position: relative;

}





.hero-grid {

    background: linear-gradient(96deg, rgb(0 52 120) 0%, rgb(0 52 120 / 14%) 70%);

    height: 100%;

    width: 100%;

    position: absolute;

    top: 0;

    display: flex;

    align-items: center;

    padding: 0 5%;;

}



.eyebrow,

.kicker {

    font-size: 12px;

    font-weight: 600;

    letter-spacing: 0.1em;

    text-transform: uppercase;

}



.eyebrow {

    color: var(--line);

}



.kicker {

    color: var(--blue);

    margin-bottom: 10px;

}



h1 {

    font-size: clamp(46px, 6vw, 78px);

    line-height: 0.96;

    letter-spacing: -0.05em;

    margin: 14px 0;

        font-weight: 500;

}



h1 span{

    color:var(--blue) ;

}



h2 {

    font-size: clamp(34px, 4vw, 40px);

    line-height: 1.05;

    letter-spacing: -0.035em;

    margin: 0 0 14px;

    font-weight: 500;

}



h3 {

    margin: 0 0 9px; 

    font-weight: 600;

}



.hero p {

    font-size: 18px;

    color: #d4d9e3;

    max-width: 760px;

    font-weight: 600;

}



.tags {

    display: flex;

    flex-wrap: wrap;

    gap: 9px;

    margin: 26px 0;

}



.tag {

    padding: 7px 11px;

    border: 1px solid rgba(255, 255, 255, 0.14);

    border-radius: 999px;

    background: rgb(255 255 255 / 84%);

    font-size: 12px;

    font-weight: 700;

    color: #3F51B5;

}



.actions {

    display: flex;

    gap: 10px;

    flex-wrap: wrap;

}



.btn {

    display: inline-flex;

    min-height: 48px;

    padding: 0 20px;

    border-radius: 12px;

    align-items: center;

    justify-content: center;

    font-size: 14px;

    font-weight: 600;

}



.primary {

    background: #4667b0;

    color: #ffffff;

}

.primary:hover {

    background: var(--blue);

    color: #ffffff;

}

.secondary {

    border: 1px solid var(--blue);

    background: #e6173c9e;

}

.secondary:hover {

    border: 1px solid var(--blue);

    background: #F44336;

}





/* =========================================================

   HERO CARD

========================================================= */



.hero-card {

    padding: 28px;

    border: 1px solid rgba(255, 255, 255, 0.12);

    border-radius: 24px;

    background: rgba(255, 255, 255, 0.07);

    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.22);

}



.hero-item {

    padding: 14px 0;

    border-bottom: 1px solid rgba(255, 255, 255, 0.08);

    color: #dce1ea;

}



.hero-item:last-child {

    border: 0;

}



.hero-item strong {

    display: block;

    color: #fff;

}





/* =========================================================

   CLIENTS / LOGOS CAROUSEL

========================================================= */



.clients {

    padding: 70px 0;

    background: #fff;

    overflow: hidden;

}



.clients-head {

    text-align: center;

    max-width: 700px;

    margin: 0 auto 40px;

}



.clients-head h2 {

    margin-bottom: 0;

}



.logos-carousel {

    width: 100%;

    overflow: hidden;

    position: relative;



    /* Degradado lateral */

    mask-image: linear-gradient(

        to right,

        transparent 0%,

        #000 8%,

        #000 92%,

        transparent 100%

    );



    -webkit-mask-image: linear-gradient(

        to right,

        transparent 0%,

        #000 8%,

        #000 92%,

        transparent 100%

    );

}



.logos-track {

    display: flex;

    align-items: center;

    width: max-content;

    animation: logos-scroll 28s linear infinite;

}



.logo-item {

    width: 180px;

    height: 90px;



    margin: 0 25px;



    display: flex;

    align-items: center;

    justify-content: center;



    flex-shrink: 0;



    opacity: 0.65;

    filter: grayscale(100%);



    transition:

        opacity 0.3s ease,

        filter 0.3s ease,

        transform 0.3s ease;

}



.logo-item img {

    max-width: 140px;

    max-height: 55px;

    width: auto;

    height: auto;

    object-fit: contain;

}



.logo-item:hover {

    opacity: 1;

    filter: grayscale(0%);

    transform: scale(1.05);

}





/* =========================================================

   ANIMACIÓN INFINITA

========================================================= */



@keyframes logos-scroll {



    from {

        transform: translateX(0);

    }



    to {

        transform: translateX(-50%);

    }



}





/* =========================================================

   PAUSA AL PASAR EL MOUSE

========================================================= */



.logos-carousel:hover .logos-track {

    animation-play-state: paused;

}





/* =========================================================

   MOBILE

========================================================= */



@media (max-width: 650px) {



    .clients {

        padding: 55px 0;

    }



    .clients-head {

        margin-bottom: 30px;

    }



    .logo-item {

        width: 140px;

        height: 75px;

        margin: 0 15px;

    }



    .logo-item img {

        max-width: 110px;

        max-height: 45px;

    }



    .logos-track {

        animation-duration: 22s;

    }



}





/* =========================================================

   SECTIONS

========================================================= */



section {

    padding: 48px 0;

    scroll-margin-top: 90px;

}



.head {

    width: 50%;

    margin-bottom: 38px;

}



.lead {

    font-size: 18px;

    color: var(--muted);

    margin: 0;

}





/* =========================================================

   GRID / CARDS

========================================================= */



.grid4 {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 18px;

}



.grid5 {

    display: grid;

    grid-template-columns: repeat(5, 1fr);

    gap: 18px;

}

.grid6 {

    display: grid;

    grid-template-columns: repeat(6, 1fr);

    gap: 18px;

}



.card {

    border-radius: 20px;

    padding: 25px;

    text-align: left;

}



.card img{

    width: 80px;

}



.card h3 span{

    font-size: 16px !important;

    font-weight: 500;

}



.card p {

    color: var(--dark);

    margin: 0;

}



.num {

    font-size: 12px;

    color: var(--blue);

    font-weight: 900;

    margin-bottom: 14px;

}

/***********************************/



.accordion-horizontal {

    max-width: 1400px;

    margin: 60px auto;

    padding: 0 20px;

}





/* =========================

   PESTAÑAS

========================= */



.accordion-tabs {

    display: grid;

    grid-template-columns: repeat(6, 1fr);

    gap: 0;

    border-bottom: 1px solid #ddd;

}



.accordion-tab {

    position: relative;



    background: transparent;

    border: none;



    padding: 20px 10px;



    font-size: 15px;

    font-weight: 700;



    text-transform: uppercase;



    color: #003478;



    cursor: pointer;



    transition: 0.3s ease;

}



.accordion-tab::after {

    content: "";



    position: absolute;



    bottom: -2px;

    left: 50%;



    width: 0;

    height: 4px;



    background: #e30613;



    transform: translateX(-50%);



    transition: 0.3s ease;

}



.accordion-tab:hover {

    color: #e30613;

}



.accordion-tab.active::after {

    width: 70%;

}



.accordion-tab.active {

    color: #003478;

}





/* =========================

   CONTENEDOR

========================= */



.accordion-content {

    position: relative;



    min-height: 430px;



    margin-top: 25px;



    overflow: hidden;



    border-radius: 18px;



    background: #f5f7fa;

}





/* =========================

   PANEL

========================= */



.accordion-panel {

    display: none;



    grid-template-columns: 42% 58%;



    min-height: 430px;



    animation: accordionFade 0.5s ease;

}



.accordion-panel.active {

    display: grid;

}





/* =========================

   INFORMACIÓN

========================= */



.accordion-info {

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 55px;

}



.accordion-info ol{

    margin: 0 0 40px 0;

    padding: 0;

    list-style: none;

}



.accordion-info ol li {

    margin-bottom: 16px;

    font-size: 16px;

}



.accordion-label {

    margin-bottom: 12px;



    font-size: 24px;

    font-weight: 700;



    color: #e30613;



    text-transform: uppercase;

}



.accordion-info h2 {

    max-width: 500px;



    margin: 0 0 20px;



    font-size: clamp(32px, 4vw, 45px);

    line-height: 1.05;



    color: #003478;

}



.accordion-info p {

    max-width: 520px;



    margin: 0 0 30px;



    font-size: 17px;

    line-height: 1.7;



    color: #444;

}





/* =========================

   BOTÓN

========================= */



.accordion-btn {

    display: inline-flex;



    align-items: center;

    justify-content: space-between;



    width: fit-content;



    gap: 25px;



    padding: 15px 22px;



    border-radius: 6px;



    background: #e30613;



    color: #fff;



    font-weight: 700;



    text-decoration: none;



    transition: 0.3s ease;

}



.accordion-btn span {

    font-size: 22px;



    transition: 0.3s ease;

}



.accordion-btn:hover {

    background: #003478;

}



.accordion-btn:hover span {

    transform: translateX(5px);

}





/* =========================

   IMAGEN

========================= */



.accordion-image {

    position: relative;



    min-height: 430px;



    overflow: hidden;

}



.accordion-image img {

    width: 100%;

    height: 100%;



    object-fit: cover;



    transition: transform 0.6s ease;

}



.accordion-panel:hover .accordion-image img {

    transform: scale(1.03);

}





/* =========================

   ANIMACIÓN

========================= */



@keyframes accordionFade {



    from {

        opacity: 0;

        transform: translateY(10px);

    }



    to {

        opacity: 1;

        transform: translateY(0);

    }



}





/* =========================

   RESPONSIVE

========================= */



@media (max-width: 992px) {



    .accordion-tabs {

        display: flex;



        overflow-x: auto;



        scrollbar-width: none;

    }



    .accordion-tabs::-webkit-scrollbar {

        display: none;

    }



    .accordion-tab {

        min-width: 150px;

    }



    .accordion-panel,

    .accordion-panel.active {

        grid-template-columns: 1fr;

    }



    .accordion-info {

        padding: 40px 30px;

    }



    .accordion-image {

        min-height: 320px;

    }



}





@media (max-width: 576px) {



    .accordion-horizontal {

        margin: 35px auto;

        padding: 0 15px;

    }



    .accordion-tab {

        min-width: 130px;



        padding: 16px 10px;



        font-size: 13px;

    }



    .accordion-info {

        padding: 35px 22px;

    }



    .accordion-info h2 {

        font-size: 32px;

    }



    .accordion-info p {

        font-size: 15px;

    }



    .accordion-image {

        min-height: 240px;

    }



}





/* =========================================================

   PRODUCTS

========================================================= */



.products {
    color: var(--dark);
}



.products .kicker {

    color: #9db3ff;

}



.products .lead {

    color: #cbd5e1;

}



.product-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 20px;

}



.product {

    display: flex;

    flex-direction: column;

    min-height: 440px;

    padding: 28px;

    border-radius: 24px;

    border: 1px solid rgba(255, 255, 255, 0.12);

    background: rgba(255, 255, 255, 0.06);

}



.category {

    font-size: 11px;

    font-weight: 900;

    letter-spacing: 0.1em;

    text-transform: uppercase;

    color: #9db3ff;

}



.product h3 {

    font-size: 28px;

    margin: 9px 0 12px;

}



.product p {

    color: #d4d9e3;

    margin: 0 0 16px;

}



.product .claim {

    font-size: 16px;

    font-weight: 800;

    color: #fff;

    margin-top: 4px;

}



.product a {

    color: #b9c7ff;

    font-weight: 900;

    margin-top: auto;

}



.relation {

    margin-top: 18px;

    padding: 13px;

    border-radius: 12px;

    background: rgba(255, 255, 255, 0.07);

    font-size: 12px;

    color: #e6eaf2;

}





/* =========================================================

   ABOUT

========================================================= */



.about {

    display: grid;

    grid-template-columns: 1.08fr 0.92fr;

    gap: 26px;

}



.facts {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 16px;

}



.fact {

    background: #fff;

    border: 1px solid var(--line);

    border-radius: 18px;

    padding: 20px;

}



.fact strong {

    display: block;

    margin-bottom: 4px;

}





/* =========================================================

   METHOD

========================================================= */



.method {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 18px;

}



.method .card strong {

    display: block;

    font-size: 12px;

    color: var(--blue);

    margin-bottom: 8px;

}





/* =========================================================

   CTA

========================================================= */



.cta {

    background: #edf3ff;

}



.cta-box {

    padding: 44px;

    border-radius: 26px;

    background: #fff;

    border: 1px solid #dce5f5;

    display: grid;

    grid-template-columns: 1fr auto;

    gap: 30px;

    align-items: center;

}



.cta-box p {

    color: var(--muted);

}



.bluebtn {

    background: var(--blue);

    color: #fff;

}





/* =========================================================

   PRODUCT CAROUSEL

========================================================= */



.products-section {

    padding: 86px 0;

    background: var(--bg);

    overflow: hidden;

}





/* =========================================================

   HEADER DEL CARRUSEL

========================================================= */



.section-head {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 30px;

    margin-bottom: 35px;

}





/* =========================================================

   FLECHAS

========================================================= */



.carousel-arrows {

    display: flex;

    gap: 10px;

    flex-shrink: 0;

}



.carousel-btn {

        width: 46px;

    height: 46px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid var(--line);

    border-radius: 50%;

    background: #ffffffbd;

    color: #85560b;

    font-size: 32px;

    cursor: pointer;

}



.carousel-btn:hover {

    background: var(--blue);

    border-color: var(--blue);

    color: #fff;

    transform: translateY(-2px);

}



.carousel-btn:active {

    transform: scale(.94);

}





/* =========================================================

   VIEWPORT

========================================================= */



.product-carousel {

    width: 100%;

    overflow: hidden;



    cursor: grab;



    user-select: none;

    -webkit-user-select: none;



    touch-action: pan-y;

}



.product-carousel.is-dragging {

    cursor: grabbing;

}





/* =========================================================

   TRACK

========================================================= */



.product-track {

    display: flex;

    gap: 20px;



    will-change: transform;



    transition: transform .45s cubic-bezier(.22, .61, .36, 1);

}





/* =========================================================

   PRODUCT CARD

========================================================= */



.product-card {

    flex: 0 0 calc(

        (100% - 60px) / 4

    );



    min-width: 0;



    background: #fff;



    border: 1px solid var(--line);

    border-radius: 22px;



    overflow: hidden;



    box-shadow: 0 12px 30px rgba(16, 24, 40, .05);



    transition:

        transform .3s ease,

        box-shadow .3s ease;

}



.product-card:hover {

    transform: translateY(-5px);



    box-shadow:

        0 18px 40px rgba(16, 24, 40, .10);

}





/* =========================================================

   PRODUCT IMAGE

========================================================= */



.product-image {



    display: flex;

    align-items: center;

    justify-content: center;

    background: #f6f8fc;

}



.product-image img {

    width: 100%;

    height: 100%;



    object-fit: contain;



    pointer-events: none;

}





/* =========================================================

   PRODUCT CONTENT

========================================================= */



.product-content {

    padding: 22px;

}



.product-category {

    display: inline-block;



    margin-bottom: 8px;



    color: var(--blue);



    font-size: 11px;

    font-weight: 900;



    letter-spacing: .08em;



    text-transform: uppercase;

}



.product-content h3 {

    margin: 0 0 10px;

    color: #000;

    font-size: 22px;

    line-height: 1.2;

}



.product-content p {

    margin: 0 0 20px;



    color: #000;



    font-size: 14px;

    line-height: 1.6;

}



.product-link {

    display: inline-flex;



    color: var(--blue);



    font-size: 14px;

    font-weight: 900;

}



.product-link:hover {

    text-decoration: underline;

}

/* =========================================================

   TABLET

========================================================= */



@media (max-width: 1100px) {



    .product-card {

        flex: 0 0 calc(

            (100% - 40px) / 3

        );

    }



}





/* =========================================================

   TABLET PEQUEÑA

========================================================= */



@media (max-width: 800px) {



    .product-card {

        flex: 0 0 calc(

            (100% - 20px) / 2

        );

    }



}





/* =========================================================

   MOBILE

========================================================= */



@media (max-width: 600px) {



    .products-section {

        padding: 65px 0;

    }



    .section-head {

        align-items: flex-start;

        flex-direction: column;

    }



    .carousel-arrows {

        margin-top: 5px;

    }



    .carousel-btn {

        width: 42px;

        height: 42px;

    }



    .product-card {

        flex: 0 0 85%;

    }



    .product-image {

        height: 200px;

    }



}





/* =========================================================

   REDUCIR MOVIMIENTO

========================================================= */



@media (prefers-reduced-motion: reduce) {



    .product-track {

        transition: none;

    }



    .product-card,

    .carousel-btn {

        transition: none;

    }



}



/* =========================================================

   QUOTE / COTIZACIÓN

========================================================= */



.quote-section {

    padding: 90px 0;

    background: var(--bg);

}



.quote-wrapper {

    display: grid;

    grid-template-columns: .9fr 1.1fr;

    gap: 70px;

    align-items: center;

}





/* =========================================================

   INFORMACIÓN

========================================================= */



.quote-info h2 {

    max-width: 520px;

}



.quote-info > p {

    max-width: 500px;

    margin: 0 0 35px;



    color: var(--muted);

    font-size: 17px;

}





/* =========================================================

   BENEFICIOS

========================================================= */

.quote-benefits-1{

    display: flex;

    flex-direction: column;

    gap: 20px;

    list-style: none;

}

.quote-benefits-1 li{

    display: flex;

        align-items: center;

}



.quote-benefits-1 li span{

    margin-right: 16px;

}

.quote-benefits {

    display: flex;

    flex-direction: column;

    gap: 20px;

    list-style: none;

}



.quote-benefit {

    display: flex;

    align-items: flex-start;

    gap: 14px;

}



.quote-icon {

    width: 30px;

    height: 30px;



    display: flex;

    align-items: center;

    justify-content: center;



    flex-shrink: 0;



    border-radius: 50%;



    background: var(--blue);

    color: #fff;



    font-size: 14px;

    font-weight: 900;

}



.quote-benefit strong {

    display: block;



    margin-bottom: 2px;



    font-size: 14px;

}



.quote-benefit small {

    color: var(--muted);

    font-size: 13px;

}





/* =========================================================

   FORMULARIO

========================================================= */



.quote-form-wrapper {

    padding: 35px;



    background: #fff;



    border: 1px solid var(--line);

    border-radius: 24px;



    box-shadow:

        0 20px 60px rgba(16, 24, 40, .08);

}



.quote-form {

    display: flex;

    flex-direction: column;

    gap: 20px;

}





/* =========================================================

   FILAS

========================================================= */



.form-row {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 18px;

}





/* =========================================================

   CAMPOS

========================================================= */



.form-group {

    display: flex;

    flex-direction: column;

    gap: 7px;

}



.form-group label {

    font-size: 13px;

    font-weight: 600;

    color: #3c3c3c;

}



.form-group input,

.form-group textarea {

    width: 100%;



    padding: 14px 15px;



    border: 1px solid var(--line);

    border-radius: 11px;



    background: #fff;



    color: var(--text);



    font-family: inherit;

    font-size: 14px;



    outline: none;



    transition:

        border-color .25s ease,

        box-shadow .25s ease;

}



.form-group textarea {

    resize: vertical;

    min-height: 130px;

}



.form-group input::placeholder,

.form-group textarea::placeholder {

    color: #98a2b3;

}





/* =========================================================

   FOCUS

========================================================= */



.form-group input:focus,

.form-group textarea:focus {

    border-color: var(--blue);



    box-shadow:

        0 0 0 3px rgba(33, 93, 255, .10);

}





/* =========================================================

   FOOTER FORM

========================================================= */



.form-footer {

    display: flex;

    align-items: center;

    justify-content: space-between;



    gap: 20px;

}



.form-check {

    display: flex;

    align-items: flex-start;

    gap: 8px;



   font-weight: 600;

    color: #3c3c3c;



    font-size: 12px;

    line-height: 1.4;



    cursor: pointer;

}



.form-check input {

    margin-top: 2px;

    accent-color: var(--blue);

}



.form-footer .bluebtn {

    border: 0;

    cursor: pointer;



    gap: 10px;



    transition:

        transform .25s ease,

        box-shadow .25s ease;

}



.form-footer .bluebtn:hover {

    transform: translateY(-2px);



    box-shadow:

        0 8px 20px rgba(33, 93, 255, .25);

}





/******************************/





#footer-02{

    background-image: url(https://qa.bateriaslthmexico.com.mx/src/imgs/Servicio-cambio-de-bateria.webp);

    background-position: center center;

    background-repeat: no-repeat;

    background-size: cover;

    color: var(--text-white);

}



#footer-02 > ul {

    margin: 0;

    padding: 5% 20% 3% 20%;

    display: flex;

    background: var(--blue);

    color: var(--line);

}



#footer-02 > ul > li {

    width: 50%;

    display: flex;

    flex-wrap: wrap;

}



#footer-02 > ul > li > img{

    margin-right: 10px;

    border-radius: 20px;

}



#footer-02 > ul > li > p{

    width: 50%;

    font-size: 14px;

    letter-spacing: 0.5px;

    line-height: 1.5em;

    color: var(--text-white-op5);

    padding: 15px 0;

}



#footer-02 > ul > li > ol{

    width: 100%;

    margin: 0;

    padding: 0;

    display: flex;

    list-style: none;

    justify-content: flex-start;

    align-items: center;

}



#footer-02 > ul > li > ol > li{

    width: 35px;

    height: 35px;

    border-radius: 50px;

    background: var(--backbroud-white);

    color: var(--primary);

    display:flex;

    justify-content: center;

    align-items: center;

    margin-right: 5px;

}



#footer-02 > ul > li > ol > li > a {

    color: var(--primary);

    text-decoration: none;

}



#footer-02 > ul > li > div {

    width: 50%;

    display: flex;

    flex-wrap: wrap;

    align-content: flex-start;

}



#footer-02 > ul > li > div > h3 {

    font-size: 18px;

    letter-spacing: 1px;

    text-transform: uppercase;

    font-weight: bold;

    border-bottom: 1px solid var(--text-white-op5);

    padding: 0px 0 10px 0;

    position: relative;

}



#footer-02 > ul > li > div > h3::after{

    content: "";

    width: 30px;

    height: 2px;

    background: var(--text-white-op5);

    padding: 1px;

    position: absolute;

    left: 0;

    bottom: 0;

}



#footer-02 > ul > li > div > ol{

    margin: 0;

    padding: 0;

    list-style: none;

    line-height: 30px;

}



#footer-02 > ul > li > div > ol > li {

    margin: 0 0 0 20px;

    font-size: 14px!important;

    letter-spacing: 0.5px;

    line-height: 2em;

}



#footer-02 > ul > li > div > ol > li > a{

    text-decoration: none;

    color: var(--text-white);

    font-size: 14px!important;

}



#footer-02 > ul > li > div > ol > li > a > i{

    margin-left: -20px;

    margin-right: 10px;

}



#footer-02 > p{

        width: 100%;

    font-size: 12px;

    letter-spacing: 0.5px;

    color: #ffffff59;

    text-align: center;

    background: #0a1025;

    padding: 10px;

    margin: 0;

}



#footer-02 > p > a{

    color: var(--text-white-op5);

}





/* =========================================================

   TABLET

========================================================= */



@media (max-width: 900px) {



    .quote-wrapper {

        grid-template-columns: 1fr;



        gap: 45px;

    }



    .quote-info h2 {

        max-width: 700px;

    }



    .quote-info > p {

        max-width: 700px;

    }



     #footer-02 > ul {

        flex-direction: column-reverse;

    }



    #footer-02 > ul > li {

        width: 100%;

    }



    #footer-02 > ul > li {

        width: 100%;

        justify-content: center;

    }



    #footer-02 > ul > li > p{

        width: 100%;    

        text-align: center;

    }



    #footer-02 > ul > li > ol {

        justify-content: center;

        align-items: center;

    }



    #footer-02 > ul > li > div {

        width: 100%;

            flex-direction: column;

    }



}





/* =========================================================

   MOBILE

========================================================= */



@media (max-width: 650px) {



    .quote-section {

        padding: 65px 0;

    }



    .quote-wrapper {

        gap: 35px;

    }



    .form-row {

        grid-template-columns: 1fr;

    }



    .quote-form-wrapper {

        padding: 24px 20px;



        border-radius: 20px;

    }



    .form-footer {

        flex-direction: column;

        align-items: stretch;

    }



    .form-footer .bluebtn {

        width: 100%;

    }



}





/* =========================================================

   FOOTER

========================================================= */



footer {

    padding: 5% 0 0 0;

    background: #ffffff;

}



.footer-grid {

        display: grid;

    grid-template-columns: 1.2fr 0.8fr;

    gap: 30px;

    width: 100%;

    align-items: center;

}



.footer-links {

    display: flex;

    justify-content: flex-end;

    gap: 18px;

    flex-wrap: wrap;

}



.copy {

    margin-top: 25px;

    padding-top: 20px;

    border-top: 1px solid rgba(255, 255, 255, 0.09);

    font-size: 12px;

    color: #7f8a9c;

}





/* =========================================================

   RESPONSIVE - TABLET

========================================================= */



@media (max-width: 980px) {



    nav ul {

        display: none;

    }



    .hero-grid,

    .about,

    .footer-grid {

        grid-template-columns: 1fr;

    }



    .grid4 {

        grid-template-columns: 1fr 1fr;

    }



    .product-grid {

        grid-template-columns: 1fr;

    }



    .footer-links {

        justify-content: flex-start;

    }



    .grid5 {

        grid-template-columns: repeat(3, 1fr);

    }



    .grid6 {

        grid-template-columns: repeat(3, 1fr);

    }





}





/* =========================================================

   RESPONSIVE - MOBILE

========================================================= */



@media (max-width: 650px) {



    .container {

        width: 100%;

    }



    .navup div {

        width: 100%;

        justify-content: center;

        padding: 16px 0;

    }



    .nav {

        min-height: 76px;

        display: flex;

        align-items: center;

        justify-content: center;

    }



    .navup a {

        width: 50px;

        height: 50px;

        font-size: 18px;

    }



    .hero {

        padding: 65px 0;

    }



    .btn-primary {

        margin: 8px;

        font-size: 16px;

    }



    section {

        padding: 65px 0;

    }



    .grid4,

    .facts,

    .method,

    .cta-box {

        grid-template-columns: 1fr;

    }



     .grid5 {

        grid-template-columns: repeat(1, 1fr);

    }



    .grid6 {

        grid-template-columns: repeat(1, 1fr);

    }



    .w-200 {

        width: 100%!important;

    }



    #bann-icons {

        background-image: none; 

    }



    .d-mob-none{

        display: none;

    }



    .container img {

        margin: 16px;

        width: 148px;

    }



    .card {

        text-align: center;

    }



    .d-fx-h {

        display: flex;

        justify-content: center;

        align-items: center;

        flex-direction: column;

    }



    #footer-02 > ul {

        padding: 8% 8% 3% 8%;

    }

    

}