/* Set padding to keep content from hitting the edges */
/*.body-content {
    margin-top: 15px;
    padding-left: 15px;
    padding-right: 15px;
}*/

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
/*.dl-horizontal dt {
    white-space: normal;
}*/

/* Set width on the form input elements since they're 100% wide by default */
/*input,
select,
textarea {
    max-width: 280px;
}*/

body {
    font-family: 'Inter', sans-serif;
    margin: 0;
    line-height: 1.6;
    background: #f8fafc;
    color: #1e293b;
}

header {
    background: #fff;
    color: #0f172a;
    padding: 1rem 2rem;
    position: sticky;
    top: 0;
    z-index: 1000;
}

    header nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    header a {
        color: #0f172a;
        text-decoration: none;
        margin: 0 1rem;
    }

.hero {
    text-align: center;
    padding: 4rem 2rem;
    background: linear-gradient(135deg, #25d0eb,#1e7aaf); /* #2563eb,#1e40af);*/
    color: white;
}

    .hero h1 {
        font-size: 2.5rem;
        margin-bottom: 1rem;
    }

.container {
    width: 90%;
    max-width: 1100px;
    margin: auto;
}

section {
    padding: 4rem 2rem;
}

.section-title {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 1rem;
}

.card {
    background: #fff;
    padding: 1.5rem;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    margin-bottom: 1.5rem;
}

footer {
    background: linear-gradient(135deg, #25d0eb, #1e7aaf); /* #0f172a; */
    color: #fff;
    text-align: center;
    padding: 1rem;
}

.map-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 ratio */
    height: 0;
    overflow: hidden;
    border-radius: 10px;
    margin-top: 1rem;
}

    .map-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

.btns {
    background: #358fbb; /* 2563eb;*/
    color: white;
    padding: 0.8rem 1.2rem;
    border: none;
    border-radius: 6px;
    text-decoration: none;
    display: inline-block;
    margin: 0.5rem;
}
/* Contact form styles */
/* .contact-form {
                    max-width: 600px;
                    margin: 20px auto;
                }

                    .contact-form input, .contact-form textarea {
                        width: 100%;
                        padding: 10px;
                        margin-bottom: 15px;
                        border: 1px solid #ccc;
                        border-radius: 5px;
                        font-size: 14px;
                    }*/
/* Contact Us section layout */
.contact-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 20px;
}

.contact-info, .contact-form, .map-container {
    flex: 1;
    min-width: 280px;
    background: #f9f9f9;
    /* padding: 20px; */
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

    .contact-info p {
        margin: 8px 0;
    }

    /* Contact form styles */
    .contact-form input, .contact-form textarea {
        width: 100%;
        padding: 10px;
        margin-bottom: 15px;
        border: 1px solid #ccc;
        border-radius: 5px;
        font-size: 14px;
    }

    .contact-form button {
        background: #0a3d62;
        color: #fff;
        border: none;
        padding: 12px 20px;
        font-size: 16px;
        cursor: pointer;
        border-radius: 5px;
    }

        .contact-form button:hover {
            background: #074270;
        }

    /* Map */
    .map-container iframe {
        width: 100%;
        height: 100%;
        border-radius: 8px;
    }
/*.contact-form button {
                        background: #0a3d62;
                        color: #fff;
                        border: none;
                        padding: 12px 20px;
                        font-size: 16px;
                        cursor: pointer;
                        border-radius: 5px;
                    }

                        .contact-form button:hover {
                            background: #074270;
                        }
        */
.success-message, .error-message {
    text-align: center;
    margin-top: 10px;
    font-weight: bold;
    display: none;
}

.success-message {
    color: green;
}

.error-message {
    color: red;
}
.typewrite {
    text-decoration: none;
    color:cornflowerblue; /*lightgoldenrodyellow;*/ /*cornflowerblue*/
    font-size: 20px;
}

#owl-demo .item {
    margin: 3px;
}

#owl-demo .item img {
/*display: block;*/
        width: 100%;
        height: auto;
    }

    .technologiesLev {
        display: flex;
    }
    
    .technologyLeverage {
        width: calc(100% / 3);
        margin-bottom: 30px;
        padding: 0 8px;
    }
    
        .technologyLeverage .card {
            border: transparent;
            border-radius: 0;
            height: 90%;
            border-bottom: 3px solid #007bff;
            box-shadow: 0px 1px 20px #b0c3fc;
        }
    
            .technologyLeverage .card:hover {
                box-shadow: 0px 1px 20px  #5980f3;
            }
    
        .technologyLeverage ul li {
            float: left;
            text-align: center;
            max-width: 50%;
            width: 100%;
            display: block;
            margin-bottom: 15px;
        }
    
            .technologyLeverage ul li img {
                max-height: 25px;
                /*filter: grayscale(80%);*/
            }
    
            .technologyLeverage ul li:hover img {
                filter: grayscale(0%);
            }
    
    .colplexAppplication li {
        display: block;
        padding: 4px;
        color: #fff;
        font-size: 18px;
        position: relative;
        padding-left: 25px;
    }
    
        .colplexAppplication li::before {
            position: absolute;
            content: '\f046';
            font: normal normal normal 14px/1 FontAwesome;
            left: 0;
            top: 10px;
        }