:root {
    --blue-1:#1d5e9f;
}

p{
  line-height: 1.8; 
}

.hidden {
  transform: translateY(-100%); 
  transition: transform 0.3s;
}

.row {
    background-color: rgb(205, 205, 205);
    padding: 0.5px;
    width: 60%;
}

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999; 
    background-color: var(--blue-1);
    min-height: 10vh;
    transition: transform 0.3s ease;
}

.navbar img {
  max-width: 280px !important;
  min-width: 120px;
  width: 100%;
  height: auto;
}

a.nav-link{
    color: white !important;
    text-decoration: none !important;
    box-shadow: inset 0 0 0 0 #133c65 !important;
    transition: color .3s ease-in-out, box-shadow .3s ease-in-out !important;
}

a.nav-link:hover {
    color: #cccccc !important;
    box-shadow: inset 180px 0 0 0 #133c65 !important;
}

.hero-section {
    min-height: 90vh;
    background-color: #133c65;
    color: white;
}

.title p{
    width: 80% !important;
}

.text{
    font-size: 2vw;
}

.about-section {
    min-height: 60vh;
}

#about-title {
    color: rgb(121, 121, 121);
}

.about-section .container {
    max-width: 450px;
}

.card-section{
    min-height: 60vh;
    background-color: #11324e;
    color: white;
}

.card {
    width: 33%;
    min-height: 20vh;
    gap: 10px;
}

.card-section .card {
    box-shadow: 8px 8px 0px #1d5e9f;
}

.card-logo img{
    width: 20%;
    margin-bottom: 10px;
}

button {
    padding: 15px;
    width: 100%;
    background-color: #216bb5;
    border: none;
    color: white;
}

.who-section-card:hover {
    background-color: #1d5e9f;
    box-shadow: 0 8px 24px rgba(29, 94, 159, 0.3);
    color: white !important;
}

.who-section-card:hover .fs-3 {
    color: white !important;
}

.functionality-section {
    background-color: #1d5e9f;
}

.black {
    background-color: black;
    width: 40%;
}

.experience-section p{
    color: rgb(121, 121, 121);
}

.experience.card {
    min-height: 35vh;
    width: 100%;
    background-color: #1d5e9f;
}

.demo-section{
    background-color: #1d5e9f;
}

Form {
    gap: 10px;
    display: flex;
    flex-direction: column;
    background-color: white;
    padding: 80px;
    width: 50%;
    margin-bottom: 100px;
}

input, textarea {
    border: 1px solid rgb(204, 204, 204);
    height: 35px;
    border-radius: 2px;
    margin-bottom: 15px;
}

label {
    color: rgb(99, 99, 99)
}

Form button {
    padding: 15px;
    width: 100%;
    background-color: #216bb5;
    border: none;
    color: white;
}

textarea {
    height: 100px;
}

.social-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #11324e;
    border-radius: 100%;
    width: 45px;
    height: 45px;
}

.info-container {
    min-height: 50vh;
}

.map, .map p {
    background-color: #1d5e9f;
    color: white;
    line-height: 1.2; 
}

footer, footer a {
    background-color: #216bb5;
    color: white;
    text-decoration: none;
    gap: 30px;
}




@media (max-width: 991px) {

    .navbar {
        position:initial;
        transition: none;
        transform: none;
    }

    a.nav-link .home{
        display: none;
    }

    .about-section-content {
        flex-direction: column-reverse !important;
        width: 60%;  
    }

    .about-section-content-text {
        width: 100% !important;
    }

    .about-section .container {
        max-width: 100%;
    }

    .card-container {
        width: 100% !important;
    }

    .who-section-main {
        flex-direction: column-reverse !important;
        align-items: center;
    }

    .who-section-main .container {
        width: 75% !important;
    }

    .who-section-card {
        width: 100% !important;
    }

    .card-container.experience {
        width: 75% !important;
    }      

    Form {
        width: 60%;
        padding: 70px;
    }

    footer {
        width: 100% !important;
    }

    .footer-content p, .footer-content a{
        font-size: 14px;
    }

}

@media (max-width: 767px) {
    
    .navbar-links {
        display: none !important;
    }

    .about-section-content {
        text-align: center !important;
    }

    .card-container {
        flex-direction: column !important;
        align-items: center;
    }

    .card {
        padding: 10px;
        width: 70%;
    }

    .card-logo img {
        width: 20%; 
    }

    .experience.card {
        max-width: 75% !important;
    }

    Form {
        width: 75%;
        padding: 70px;
    }

    .info-container {
        width: 100% !important;
    }

    .map-container {
        text-align: center !important;
    }

    .text-container {
        width: 100% !important;
    }

    .social-container {
        width: 100% !important;
    }

    .map {
        padding: 20px !important;
    }

    .footer-content {
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .footer-terms {
        flex-direction: column !important;
    }


    .footer-content p, .footer-content a{
        font-size: 16px;
        text-align: center !important;
    }


}

@media (max-width: 576px) {

    .card-section {
        padding: 20px !important;
    }

    .card-container {
        width: 80% !important;
    }

    .card-logo img {
        width: 50px; 
    }

    .card {
        width: 100% !important;
        padding: 5px !important;
    }

    .who-section-main {
        width: 100% !important;
    }

    .who-section-card {
        width: 100%;
    }

    .functionality-section, 
    .functionality-section p{
        padding: 15px !important;
        width: 100% !important;
    }

    .card-container.experience {
        width: 100% !important;
    }


    Form {
        width: 90%;
        padding: 40px;
    }

    .social-icon-container {
        flex-direction: column !important;
    }

    .info-container {
        flex-direction: column !important;
        width: 100% !important;
        padding: 0px !important;
        align-items: center;
    }


    .text-box {
        width: 75% !important;
    }

    .text-container {
        align-items: center !important;
    }

    iframe {
        width: 200px;
    }

    .footer-content .d-flex{
        padding: 0px !important;
        width: 100% !important;
    }

    .footer-terms a{
        font-size: 1rem !important;
    }

}

@media (max-width: 300px) {
    body {
        min-width: 300px;
        overflow-x: auto;
    }
}