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


/*CONFIGURACION INICIAL */
        :root {
            --accent: rgb(255, 155, 0);
            --line-separator: #5398BE;
            --hover-links: #AA1155;
        }

        html,
        body {
            margin: 0;
            max-width: 100vw;
            font-family: 'Poppins', sans-serif;
            font-size: 0.90em;
            color: #333;
            font-weight: 400;
            background-color: #f8f9fa;
        }

        .bold {
            font-weight: 600;
        }

        a {
            text-decoration: none;
            color: #333;
        }

        a:visited {
            color: #333;
        }

        a:hover {
            /* color: var(--accent); */
            color: var(--hover-links);
            /*    background-color: var(--accent);*/
        }

    /* Displays y visualizar */
        .d-none {
            display: none;
        }

        .d-block {
            display: block;
        }

        .visualizar-ipad-o-menos {
            display: none;
        }

        .visualizar-solo-escritorio {
            display: block;
        }

        .visualizar-solo-celular {
            display: none;
        }

        /* Animaciones */
        .animate {
            transition: all 0.3s ease;
        }

        .link {
            color: rgb(255, 155, 0) !important;
        }

        .link:hover {
            color: black;
        }

        .link-menu {
            color: black;
        }

        .link-menu:hover {
            /* color: rgb(255, 155, 0); */
            color: var(--hover-links);
        }

        *::selection {
            background-color: var(--accent);
            /* Background color when text is selected */
            color: #ffffff;
            /* Text color when selected */
        }

        h3 {
            font-weight: 600;
        }

        .generalContainer {
            display: flex;
            flex-direction: column;
        }

        .bnw {
            filter: grayscale(90%);
        }

        .material-icons {
            vertical-align: middle;
            margin-right: 5px;
            font-size: 12px;
            /* Adjust icon size if necessary */
        }


    /*GENERAL */ 

        .container>* {
            margin-left: 100px;
            margin-right: 100px;
            /*	width: 100%;*/
        }

        .container-2 {
            margin: 0 200px;
        }

        .container-tarjetas {
            margin: 0 100px;
        }

        .bg-gray {
            background-color: #fafafa;
        }

        .bg-darkgray {
            background-color: #f1f1f1;
        }

        .bg-orange {
            background-color: rgb(255, 155, 0);
        }

        .bg-white {
            background-color: white;
        }

    /*BARRA DE NAVEGACION */
        .barra {
            /*        background-color: rgb(0, 38, 77);*/
            /*        background-color: rgb(0, 38, 77);*/
            padding: 10px 10px 10px 30px;
            background-color: #333;
            color: white;
            color: #333;
            border-bottom: 1px solid lightgray;
            display: flex;
            justify-content: space-between;
            align-items: center;
            /* Ensures elements are centered vertically */
            flex-wrap: nowrap;
            /* Prevents wrapping */
        }
        .barra>* {
            color: white;
        }
    /* */ 

    /*MENU DE NAVEGACION */
    .navbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        /*        padding: 10px;*/
        /*        background-color: #f5f5f5; */
        /*        border: 1px solid white; /* Add a dashed border */
        color: #333;
        width: 100%;
    }

    .barra span {
        flex-grow: 1;
        /* Make each span take an equal amount of space */
        text-align: center;
        white-space: nowrap;
        /* Prevent line breaks inside spans */
        /*        height: 12px;*/
    }

    .logo {
        display: flex;
        align-items: center;
        /*        text-align: left;*/
        /*        white-space: nowrap; /* Prevents text from wrapping */

    }

    .logo span {
        padding-top: 10px;
    }

    .logo-font {
        font-weight: 600;
        font-size: 1.2rem;
        color: rgba(50, 50, 50);
    }

    .logo span {
        text-align: center;
    }


    /*FRONTTAL BANNER */


    .front-banner {
        display: flex;
        flex-direction: row;

        margin-bottom: 100px;

        align-items: center;
        overflow: hidden;
    }

    .parallax {
        background-size: contain;
        max-height: 700px;
        /* Create the parallax scrolling effect */
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;

    }

    .explanation {
        min-height: 500px;
    }

    .title-container {
        /*        position: absolute;*/
        margin-top: 5%;
        margin-left: 15%;
        /* max-width: 50%; */
        color: #333;
        /* Text color for better visibility on the orange background */
    }

    .title-image>img {
        object-fit: contain;
        height: 100%;

    }

    .title-image {
        /*        height: 400px;*/
        max-height: 600px;

    }

    .main-title {
        font-size: 40px;
        /* Adjust size based on design */
        font-weight: 600;
        /*        color: white;*/
        margin: 0;
        /* Remove default margin */
    }

    .subtitle {
        font-size: 20px;
        /* Adjust size as necessary */
        font-weight: 300;
        margin: 10px 0 0 0;
        /* Optional: Add space between title and subtitle */
    }

    /*BANNER DE SERVICIOS */
    .banner {
        background-image: url('your-logo-or-residential-photo.jpg');
        /*        background-image: url('your-logo-or-residential-photo.jpg');*/
        background-size: cover;
        background-position: center;
        color: #ffffff;
        text-align: center;
        padding: 100px 20px;
        position: relative;
    }

    .banner::after {
        content: '';
        background-color: rgba(0, 0, 0, 0.5);
        /* Dark overlay for readability */
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .banner-content {
        position: relative;
        z-index: 1;
    }

    .banner h1 {
        font-size: 3em;
        margin-bottom: 20px;
    }

    .banner h2 {
        font-size: 1.5em;
        margin-bottom: 50px;
    }


    /*SERVICES 1 */

    .services1 {
        display: flex;
        flex-direction: row;
    }



    .col-left {
        width: 40%
    }

    .col-left>img {
        object-fit: cover;
        height: 100%;
        width: 100%;
    }

    .col-middle {
        width: 15%;
    }

    .col-right {
        width: 60%;
        display: flex;
        flex-direction: column;
        /*    margin-left: 30%;*/
        margin-right: 10%;
    }

    .leftbar {
        /* border-left: 3px solid var(--accent); */
        border-left: 3px solid var(--line-separator);
        padding: 15px;
    }

    .p15 {
        padding: 15px;
    }


    /*service WAllet */

    .articleSection {
        padding: 50px;
        background-color: #f4f4f4;
    }

    .lineahorizontal {}

    .serviceWallet {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        grid-gap: 1em;
        /*  height: 30vh;*/
    }

    .article {
        padding: 15px;
        background: #fff;
        box-shadow:
            0 5px 10px rgba(0, 0, 0, 0.1),
            0 5px 20px rgba(0, 0, 0, 0.05);
        border-radius: 10px;
    }

    .article>.imagen {
        height: 100px
        
        ;
        /*    width: 100%;*/
    }

    .imagen>img {
        width: 100%;
        /* height: 100%; */
        height: 230px;
        object-fit: cover;
    }


    .grandote {
        grid-column: span 2;
        /*    grid-row: span 2;*/
    }

    .grandote>.imagen {
        height: 300px;
    }

    /* Services Styles */

    .services {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        padding: 50px 20px;
    }

    .service-column {
        flex: 1 1 30%;
        max-width: 30%;
        margin: 10px;
        text-align: left;
        
    }

    .service-column h3 {
        font-size: 1.5em;
        margin-bottom: 15px;
    }

    .service-column p {
        font-size: 1em;
        line-height: 1.6;
    }

    .bg-dark {
        background-color: #263238;
        color: white;
    }

    .bg-dark * {
        color: white;
    }

    .actioncall {
        height: 400px;
        /*        padding: 20px;*/
        padding-top: 10%;

    }

    .title {
        font-size: 2em;
    }

    .actioncall-text {
        margin-right: 50%;
    }

    .button-link {
        display: inline-block;
        padding: 10px 20px;
        background-color: #4CAF50;
        /* Button background color */
        color: white;
        /* Button text color */
        text-align: center;
        text-decoration: none;
        border-radius: 5px;
        /* Rounded corners */
        font-size: 16px;
        transition: background-color 0.3s ease;
        /* Smooth background change on hover */
    }

    .button-link:hover {
        background-color: #45a049;
        /* Darker shade on hover */
    }

    .form-quote label {
        font-size: 18px;
    }

    .form-quote.small label {
        font-size: 1rem;
    }

    .form-quote.small input[type="text"],
    .form-quote.small input[type="email"],
    .form-quote.small input[type="tel"],
    .form-quote.small textarea {
        width: 100%;
        padding: 5px;
        border: 1px solid #ccc;
        border-radius: 4px;
        font-family: 'Poppins', sans-serif;
        font-size: 1rem;
        color: #333;
        background-color: #fff;
    }

    .form-quote .form-select {
        width: 100%;
        padding: 5px;
        border: 1px solid #ccc;
        border-radius: 4px;
        font-family: 'Poppins', sans-serif;
        font-size: 16px;
        color: #333;
        background-color: #fff;
    }

    .form-quote input[type="submit"] {
        background-color: rgb(255, 155, 0);
        color: white;
        padding: 10px 20px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        font-size: 16px;
        transition: background-color 0.3s ease;
    }

    .result-table {
        /* font-size: 15px; */
        width: 100%;
        border-collapse: collapse;
    }

    .result-table th {
        text-align: left;
    }

    .result-table td,
    .result-table th {
        padding: 10px;
    }

    .result-table tr {
        border-bottom: 1px solid #ddd;
    }

    .text-result {
        /* font-size: 15px; */
    }

    .alert-success {
        background-color: #d1e7dd;
        border-radius: 5px;
        border: 1px solid #badbcc;
        padding: 5px 10px;
    }

    .alert-error {
        background-color: #f8d7da;
        border-radius: 5px;
        border: 1px solid #f5c2c7;
        padding: 5px 10px;
    }

    .renglon {
        display: flex;
        align-items: center;
        gap: 5px;
        margin-bottom: 20px;
    }

    .renglon-left {
        width: 50%;
    }

    .renglon-right {
        width: 50%;
    }

    .quote-container {
        display: flex;
        justify-content: center; 
        align-items: center; 
        flex-direction: column;
        margin-bottom: 2rem;
    }

    .section-title {
        cursor: pointer;
        padding: 10px 0;
        display: flex;
        border-top: 1px solid #e9ecef;
        border-bottom: 1px solid #e9ecef;
        user-select: none;
        font-weight: 500;
    }

    /* .section-title i.bi-caret-down-fill,
    .section-title i.bi-caret-up-fill {
        margin-left: auto;
    } */

    .section-title span.material-symbols-outlined {
        margin-left: auto;
    }

    .section-container-hidden {
        display: none;
        transition: background 225ms ease-in-out;
        overflow: hidden;
        position: relative;

        padding: 10px 0;
    }

    /* Columnas */
        .two-columns {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }

        .two-columns .column {
            flex: 1 1 45%;
            max-width: 45%;
        }

    /* Footer */
        .footer {
            display: flex;
            justify-content: space-between;
            align-items: center;

            padding: 50px;
            /* height: 200px;*/
        }

        .footer-section {
            /*        text-align: center;*/
            flex-basis: 30%;
        }

        .footer img {
            max-width: 150px;
            height: auto;
        }

    /* Contact details styling */
        .contact-list {
            list-style-type: none;
            padding: 0;
        }

        .contact-list li {
            margin: 10px 0;
        }


    /* Buttons */
        .btn-link {
            display: inline-block;
            padding: 10px 20px;
            background-color: white;
            /* Button background color */
            /*        color: white; /* Button text color */
            text-align: center;
            text-decoration: none;
            border-radius: 5px;
            /* Rounded corners */
            font-size: 16px;
            transition: background-color 0.3s ease;
            /* Smooth background change on hover */
        }

        .btn-link:hover {
            background-color: rgb(255, 155, 0);
            color: white;
            /* Darker shade on hover */
        }

        .btn-reg {
            background-color: rgb(255, 155, 0) !important;
            color: white !important;
        }

        .btn-reg:hover {
            background-color: black !important;
        }

        hr {
            border: 0;
            border-top: 1px solid;
            margin: 1rem 0;
            opacity: .25;
        }

    /* Flex */
        
        .d-flex {
            display: flex;
            align-items: center;
            gap: 2rem;
        }
        
        .d-lg-flex {
            display: flex;
            gap: 2rem;
        }

        .d-flex-normal {
            
            display: flex;
        }

        .flex-end {
            justify-content: flex-end;
        }

        .flex-middle {
            justify-content: center; 
        }

        .flex-column {
            flex-direction: column;
        }
        
        .align-left {
            align-items: flex-start;
        }

        .align-center {
            align-items: center;
        }

        .align-right {
            align-items: flex-end;
        }

        .no-align {
            align-items: initial;
        }

    /* Margenes */
        .mx-1 {
            margin-left: 1rem;
            margin-right: 1rem;
        }

        .mx-2 {
            margin-left: 2rem;
            margin-right: 2rem;
        }

        .mb-1 {
            margin-bottom: 1rem;
        }

        .mb-2 {
            margin-bottom: 2rem;
        }

        .mb-3 {
            margin-bottom: 3rem;
        }

        .ms-auto {
            margin-left: auto;
        }

        .me-auto {
            margin-right: auto;
        }

        .mx-auto {
            margin-left: auto;
            margin-right: auto;
        }

        .mx-15px {
            margin-left: 15px;
            margin-right: 15px;
        }

        .mt-auto {
            margin-top: auto;
        }

        .mt-1 {
            margin-top: 1rem;
        }

        .mt-2 {
            margin-top: 2rem;
        }

        .mt-3 {
            margin-top: 3rem;
        }

        .mt-4 {
            margin-top: 4rem;
        }

        .mt-5 {
            margin-top: 5rem;
        }

    /* Padding */
        .px-0 {
            padding-left: 0;
            padding-right: 0;
        }

        .p-0 {
            padding: 0;
        }

        .p-1 {
            padding: 1rem;
        }

        .p-2 {
            padding: 2rem;
        }

        .p-3 {
            padding: 3rem;
        }

        .py-1 {
            padding-top: 1rem;
            padding-bottom: 1rem;
        }

        .py-2 {
            padding-top: 2rem;
            padding-bottom: 2rem;
        }

    /* Width */
        .w-100 {
            width: 100%;
        }

    /* Cards */
        .card {
            /* border: 2px solid #e9ecef; */
            /* border-radius: 5px; */
            padding: 10px;
            background: #fff;
            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1), 0 5px 20px rgba(0, 0, 0, 0.05);
        }

        .cuadro {
            width: 8rem;
            height: 13rem;
        }

        .align-list-0 {
            margin-left: 17px;
            padding-left: 0;
        }

        p {
            text-align: justify !important;
        }

        .bg-navy {
            background-color: #05204A;
            color: white;
        }

        .indent-desktop {
            padding-left: 40px;
        }

        .quitar-fondo {
            mix-blend-mode: multiply;
        }

        .w-lg-75 {
            width: 75%;
        }

        .w-lg-50 {
            width: 50%;
        }

        .w-lg-100 {
            width: 100%;
        }

        .btn {
            padding: 10px 20px;
            background-color: var(--accent);
            color: white !important;
            text-align: center;
            text-decoration: none;
            border-radius: 5px;
            font-size: 16px;
            transition: background-color 0.3s ease;
            border: none;
            box-shadow: 3px 3px 15px #888888ad;
        }

        .contenedor {
            padding: 10% 100px 0 100px;
        }

        .align-items-initial {
            align-items: initial;
        }

/*MOBILE */
/* For iPads and tablets (screen width between 768px and 1024px) */
    @media only screen and (max-width: 1024px) {
        .visualizar-ipad-o-menos {
            display: block;
        }

        .visualizar-solo-escritorio {
            display: none;
        }

        .visualizar-solo-celular {
            display: none;
        }
        .d-lg-flex {
            display:initial;
        }      

        .flex-md-column {
            flex-direction: column;
        }

        .mx-md-auto {
            margin-left: auto;
            margin-right: auto;
        }

        .mx-sm-15px {
            margin-left: 15px;
            margin-right: 15px;
        }

        .w-lg-75 {
            width: 100%;
        }

        .w-lg-50 {
            width: 100%;
        }

        .w-lg-100 {
            width: 100%;
        }

        .w-md-100 {
            width: 100%;
        }

        .link-menu {
            color: black;
            width: 100%;
            border-bottom: 1px solid black;
        }
        .services1 {
            display: flex;
            flex-direction: row;
        }
        
        .services1 {
            display: block;
        }   

        .indent-desktop {
            padding-left: 0;
        }
        
        .container>* {
            margin-left: 40px;
            margin-right: 40px;
        }

        .containerbig {
            padding-left: 15%;
            padding-right: 15%;
        }

        .barra {
            flex-direction: column;
            /* Cambia la dirección a columna */
            align-items: flex-start;
            /* Alinea los elementos al inicio de la columna */

        }

        .barra span {
            margin-bottom: 10px;
            /* Añade un margen inferior entre los elementos */
        }

        .parallax {
            background-attachment: scroll;
        }

        .service-column {
            flex: 1 1 100%;
            max-width: 100%;
            margin: 0;
        }

        .container-2 {
            margin: 0 15px;
        }

        .container-tarjetas {
            margin: 0;
        }

        .navbar {
            flex-direction: column;
            padding: 0;
            margin: 0 !important;
            background-color: red;
        }

        .menu div {
            margin-left: 0;
            text-align: center;
            padding: 10px;
            border-bottom: 1px solid #ddd;
        }

        .menu-toggle {
            display: flex;
            cursor: pointer;
            padding: 10px;
            background-color: #333;
            color: white;
            text-align: center;
            /* position: absolute;
            right: 10px;
            top: 10px; */
            margin-left: auto;
        }
    }

/* For mobile devices (screen width less than or equal to 768px) */
    @media only screen and (max-width: 768px) {
        .services1 {
            display: block;
        }

        .d-lg-flex {
            display:initial;
        }        
        .visualizar-ipad-o-menos {
            display: block;
        }

        .visualizar-solo-escritorio {
            display: none;
        }

        .visualizar-solo-celular {
            display: block;
        }

        .flex-md-column {
            flex-direction: column;
        }

        .flex-s-column {
            flex-direction: column;
        }

        .mx-md-auto {
            margin-left: auto;
            margin-right: auto;
        }

        .mx-sm-15px {
            margin-left: 15px;
            margin-right: 15px;
        }

        .w-lg-75 {
            width: 100%;
        }

        .w-lg-50 {
            width: 100%;
        }

        .w-lg-100 {
            width: 100%;
        }

        .w-md-100 {
            width: 100%;
        }

        .link-menu {
            color: black;
            width: 100%;
            border-bottom: 1px solid black;
        }

        .indent-desktop {
            padding-left: 0;
        }

        .actioncall {
            padding: 15px;
            padding-top: 10%;
        }

        .articleSection {
            padding: 5px;
        }

        .mb-sm-2 {
            margin-bottom: 2rem;
        }

        .mb-sm-3 {
            margin-bottom: 3rem;
        }

        .container>* {
            margin-left: 1px;
            margin-right: 1px;
        }

        .front-banner  {
            padding: 0;
        }
        .title-container {
            /*        position: absolute;*/
            margin-top: 5%;
            margin-left: 15px;
            margin-right: 15px;
            /* max-width: 50%; */
            color: #333;
            /* Text color for better visibility on the orange background */
        }
        .logo {
            white-space: initial;
            /* Contracts for the menu*/
        }

        .hide-small {
            display: none;
        }

        .menu>div {
            padding: 0;
            margin: 5;
        }

        .footer {
            flex-direction: column;
            align-items: center;
        }

        .footer-section {
            flex-basis: 100%;
            text-align: center;
            /* Center text for better alignment on mobile */
            margin-bottom: 30px;
            /* Adds spacing between the sections */
        }

        .two-columns {
            flex-direction: column;
        }

        .two-columns .column {
            max-width: 100%;
            flex: 1 1 100%;
        }

        .renglon {
            display: column;
            width: 100%;
        }

        @keyframes slideDown {
            from {
                opacity: 0;
                transform: translateY(-20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .front-banner {
            /* margin: 35px; */
            margin: 0px 0px  ;
            flex-direction: column;
            align-items: initial;
            margin-top: 0px;
            max-height: 800px;
            /* margin-bottom: 0px; */
        }

        .title-image {
            align-items: center;

        }

        .container {
            flex-direction: column;
        }

        .col-left {
            width: 100%;
        }

        .col-left > img {
            height: 100px;
            width: 100%;
            /* margin-top: 20px; */
        }

        .col-right {
            width: 100%;
        }

        /* .menu-toggle {
            display: none;
        } */

        .article {
            border-radius: 0;
        }
    }