* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif;
    background: #ffffff;
}

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: white;
    padding: 18px 0;
    z-index: 999;
    transition: .4s;
}

header.sticky {
    box-shadow: 0 10px 30px rgba(0, 0, 0, .1);
    padding: 12px 0;
}

.container {
    width: 90%;
    margin: auto;
}

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

.logo img {
    height: 65px;
}

.menu {
    display: flex;
    list-style: none;
    gap: 35px;
}

.menu a {
    text-decoration: none;
    color: #222;
    font-weight: 500;
    transition: .3s;
}

.menu a:hover {
    color: #4271b6;
}

.btn-contact {
    background: #4271b6;
    color: white;
    padding: 14px 26px;
    border-radius: 40px;
    text-decoration: none;
    font-weight: 600;
    transition: .3s;
}

.btn-contact:hover {
    background: #4271b6;
    transform: translateY(-3px);
}

/* ===== HEADER RESPONSIVE ===== */

/* Desktop : menu visible, hamburger caché */
.hamburger {
    display: none;
    cursor: pointer;
    font-size: 1.5rem;
    color: #333;
    padding: 0.5rem;
}

/* Mobile : afficher le hamburger, cacher le menu */
@media (max-width: 991.98px) {
    .hamburger {
        display: block;
    }

    .menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 70%;
        max-width: 300px;
        height: 100vh;
        background: white;
        flex-direction: column;
        padding: 5rem 2rem 2rem;
        box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
        transition: right 0.3s ease;
        z-index: 999;
        overflow-y: auto;
    }

    .menu.active {
        right: 0;
    }

    .menu li {
        margin: 0;
        width: 100%;
    }

    .menu li a {
        display: block;
        padding: 1rem 0;
        border-bottom: 1px solid #f0f0f0;
    }

    /* Bouton contact en mobile */
    .btn-contact {
        display: none; /* Ou gardez-le visible si vous voulez */
    }

    /* Overlay sombre quand le menu est ouvert */
    .menu-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 998;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease;
    }

    .menu-overlay.active {
        opacity: 1;
        visibility: visible;
    }
}

/* Desktop : menu horizontal normal */
@media (min-width: 992px) {
    .menu {
        display: flex;
        gap: 2rem;
        list-style: none;
        margin: 0;
        padding: 0;
    }
}

.hero {

    height: 100vh;

    /* show image first then gradient as fallback/bg under it
       (image must be the top layer so it is visible) */
    background: url("../images/hero.png")  center / auto 100% no-repeat, linear-gradient(135deg, #0B1F47, #114FB3);

    display: flex;

    align-items: center;

    position: relative;

    overflow: hidden;

    padding-top: 90px;

}

.overlay {

    position: absolute;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, .20);

}

.hero-content {

    position: relative;

    display: flex;

    align-items: center;

    /* keep content to the left since image is now in background */
    justify-content: flex-start;

    gap: 60px;

    z-index: 2;

}

.hero-left {

    color: white;

    /* allow more space for the text while the image sits in the background */
    width: 55%;

    animation: fadeLeft 1s ease;

}

.badge-tech {

    display: inline-block;

    padding: 10px 20px;

    background: rgba(255, 255, 255, .12);

    border-radius: 40px;

    margin-bottom: 25px;

    font-weight: 500;

}

.hero h1 {

    font-size: 64px;

    font-weight: 600;

    line-height: 1.15;

    margin-bottom: 25px;

}

.hero h1 span {

    color: #4DD0FF;

}

.hero p {

    font-size: 20px;

    line-height: 1.8;

    opacity: .9;

    margin-bottom: 40px;

}

.hero-buttons {
    display: flex;

    gap: 20px;

    margin-bottom: 40px;

}

.btn-primary {
    background: #272959;
    padding: 16px 30px;
    border-radius: 40px;
    color: white;
    text-decoration: none;
    font-weight: 600;
    transition: .3s;
}

.btn-primary:hover {

    transform: translateY(-4px);

    background: #4271b6;

}

.btn-secondary {

    border: 2px solid white;

    padding: 16px 30px;

    border-radius: 40px;

    color: white;

    text-decoration: none;

    font-weight: 600;

    transition: .3s;

}

.btn-secondary:hover {

    background: white;

    color: #114FB3;

}

.hero-features {

    display: flex;

    gap: 30px;

    flex-wrap: wrap;

    font-size: 17px;

}

.hero-features i {

    color: #4DD0FF;

    margin-right: 8px;

}

.hero-right {
    /* removed visual column: keep element hidden for compatibility */
    display: none;
}

/* On smaller screens, use cover and center the background image */
@media (max-width: 992px) {
    .hero {
        background-size: cover;
        background-position: center;
    }
    .hero-right { display: none; }
}

@keyframes fadeLeft {

    from {

        opacity: 0;

        transform: translateX(-60px);

    }

    to {

        opacity: 1;

        transform: translateX(0);

    }

}

@keyframes fadeRight {

    from {

        opacity: 0;

        transform: translateX(60px);

    }

    to {

        opacity: 1;

        transform: translateX(0);

    }

}

@media (max-width: 992px) {

    .hero {

        height: auto;

        padding: 140px 0 80px;

    }

    .hero-content {

        flex-direction: column;

        text-align: center;

    }

    .hero-left,
    .hero-right {

        width: 100%;

    }

    .hero h1 {

        font-size: 42px;

    }

    .hero-buttons {

        justify-content: center;

        flex-wrap: wrap;

    }

    .hero-features {

        justify-content: center;

    }

}

/* ======================================
   SECTION EXPERTISE
====================================== */

.expertise {
    padding: 120px 0;
    background: #f7f9fc;
}

.section-title {
    text-align: center;
    margin-bottom: 70px;
}

.section-title span {
    color: #2F8BFF;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.section-title h2 {
    margin-top: 15px;
    font-size: 42px;
    font-weight: 700;
    color: #1B2440;
}

.section-title p {
    margin-top: 20px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    color: #666;
    line-height: 1.8;
}

.expertise-grid {
    display: grid;
    grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
    gap: 35px;
}

.expertise-card {
    background: #fff;
    padding: 45px 35px;
    border-radius: 20px;
    text-align: center;
    transition: .4s;
    cursor: pointer;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .06);
}

.expertise-card:hover {

    transform: translateY(-10px);

    box-shadow: 0 20px 45px rgba(0, 0, 0, .12);

}

.expertise-card i {

    font-size: 55px;

    color: #2F8BFF;

    margin-bottom: 25px;

    transition: .4s;

}

.expertise-card:hover i {

    transform: rotate(8deg) scale(1.15);

}

.expertise-card h3 {

    margin-bottom: 18px;

    font-size: 24px;

    color: #1B2440;

}

.expertise-card p {

    color: #666;

    line-height: 1.8;

    font-size: 16px;

}


/*==============================
FORMATIONS
==============================*/

.formations {

    padding: 120px 0;

    background: #ffffff;

}

.formations-grid {

    display: grid;

    grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));

    gap: 35px;

    margin-top: 70px;

}

.formation-card {

    background: #fff;

    border-radius: 20px;

    overflow: hidden;

    box-shadow: 0 15px 40px rgba(0, 0, 0, .08);

    transition: .4s;

}

.formation-card:hover {

    transform: translateY(-12px);

}

.formation-header {

    height: 180px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 65px;

    color: white;

}

.cpp {

    background: #0F5FFF;

}

.qt {

    background: #1ABC9C;

}

.robot {

    background: #6C63FF;

}

.cyber {

    background: #E74C3C;

}

.formation-body {

    padding: 35px;

}

.formation-body h3 {

    margin-bottom: 20px;

    font-size: 24px;

}

.formation-body p {

    color: #666;

    line-height: 1.8;

    margin-bottom: 25px;

}

.infos {

    display: flex;

    justify-content: space-between;

    margin-bottom: 30px;

    font-size: 15px;

    color: #777;

}

.btn-formation {

    display: inline-block;

    background: #0057ff;

    color: white;

    padding: 12px 28px;

    border-radius: 30px;

    text-decoration: none;

    transition: .3s;

}

.btn-formation:hover {

    background: #003cb5;

}


/*==============================
WHY US
==============================*/

.why-us {

    padding: 120px 0;

    background: #f7f9fc;

}

.why-grid {

    display: grid;

    grid-template-columns:1fr 1fr;

    gap: 70px;

    align-items: center;

}

.why-image img {

    width: 100%;

    border-radius: 25px;

    box-shadow: 0 20px 50px rgba(0, 0, 0, .15);

}

.subtitle {

    color: #0F5FFF;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 2px;

}

.why-content h2 {

    font-size: 42px;

    margin: 20px 0;

    color: #182848;

}

.why-content p {

    color: #666;

    line-height: 1.9;

    margin-bottom: 35px;

}

.advantages {

    display: grid;

    grid-template-columns:1fr 1fr;

    gap: 30px;

    margin-bottom: 40px;

}

.advantage {

    display: flex;

    gap: 20px;

    background: white;

    padding: 25px;

    border-radius: 18px;

    transition: .4s;

    box-shadow: 0 10px 25px rgba(0, 0, 0, .05);

}

.advantage:hover {

    transform: translateY(-8px);

}

.advantage i {

    font-size: 34px;

    color: #0057ff;

    margin-top: 8px;

}

.advantage h4 {

    margin-bottom: 10px;

}

.advantage p {

    margin: 0;

    font-size: 15px;

}

@media (max-width: 992px) {

    .why-grid {

        grid-template-columns:1fr;

    }

    .advantages {

        grid-template-columns:1fr;

    }

}

/*====================================
STATISTIQUES
====================================*/

.stats {

    padding: 120px 0;

    background: linear-gradient(135deg, #0B1F47, #114FB3);

    color: white;

}

.light h2,
.light p {

    color: white;

}

.light span {

    color: #71D4FF;

}

.stats-grid {

    display: grid;

    grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));

    gap: 35px;

    margin-top: 70px;

}

.stat-card {

    background: rgba(255, 255, 255, .08);

    backdrop-filter: blur(12px);

    padding: 45px 30px;

    border-radius: 20px;

    text-align: center;

    transition: .4s;

    border: 1px solid rgba(255, 255, 255, .12);

}

.stat-card:hover {

    transform: translateY(-10px);

    background: rgba(255, 255, 255, .12);

}

.stat-card i {

    font-size: 50px;

    margin-bottom: 25px;

    color: #6ED8FF;

}

.stat-card h3 {

    font-size: 52px;

    font-weight: 700;

    margin-bottom: 15px;

}

.stat-card p {

    font-size: 18px;

    opacity: .9;

}

/*====================================
TECHNOLOGIES
====================================*/

.technologies {

    padding: 120px 0;

    background: white;

}

.tech-grid {

    display: grid;

    grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));

    gap: 30px;

    margin-top: 70px;

}

.tech-card {

    background: #fff;

    border-radius: 20px;

    padding: 40px 25px;

    text-align: center;

    box-shadow: 0 10px 30px rgba(0, 0, 0, .06);

    transition: .35s;

    border: 1px solid #ECECEC;

}

.tech-card:hover {

    transform: translateY(-12px);

    background: #0057ff;

    color: white;

}

.tech-card i {

    font-size: 55px;

    margin-bottom: 20px;

    color: #0057ff;

    transition: .35s;

}

.tech-card:hover i {

    color: white;

    transform: scale(1.15);

}

.tech-card h3 {

    font-size: 22px;

    font-weight: 600;

}

/*====================================
CALL TO ACTION
====================================*/

.cta {

    padding: 120px 0;

    background: linear-gradient(135deg, #0D1B45, #0057ff);

}

.cta-box {

    text-align: center;

    color: white;

    padding: 80px;

    border-radius: 30px;

    background: rgba(255, 255, 255, .06);

    backdrop-filter: blur(10px);

    border: 1px solid rgba(255, 255, 255, .15);

    box-shadow: 0 25px 60px rgba(0, 0, 0, .25);

}

.cta-badge {

    display: inline-block;

    padding: 12px 25px;

    background: rgba(255, 255, 255, .15);

    border-radius: 40px;

    margin-bottom: 25px;

    font-weight: 600;

}

.cta h2 {

    font-size: 52px;

    margin-bottom: 25px;

    font-weight: 700;

}

.cta p {

    max-width: 850px;

    margin: auto;

    line-height: 1.9;

    font-size: 19px;

    margin-bottom: 50px;

    opacity: .95;

}

.cta-buttons {

    display: flex;

    justify-content: center;

    gap: 25px;

    flex-wrap: wrap;

}

.btn-light {

    background: white;

    color: #0057ff;

    padding: 18px 35px;

    border-radius: 50px;

    text-decoration: none;

    font-weight: 700;

    transition: .35s;

}

.btn-light:hover {

    transform: translateY(-5px);

    background: #F5F5F5;

}

.btn-outline {

    padding: 18px 35px;

    border-radius: 50px;

    border: 2px solid white;

    color: white;

    text-decoration: none;

    font-weight: 700;

    transition: .35s;

}

.btn-outline:hover {

    background: white;

    color: #0057ff;

    transform: translateY(-5px);

}

.btn-light i,
.btn-outline i {

    margin-right: 10px;

}

@media (max-width: 992px) {

    .cta-box {

        padding: 50px 30px;

    }

    .cta h2 {

        font-size: 36px;

    }

    .cta p {

        font-size: 17px;

    }

}

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

.footer {
    background: #08152F;
    color: white;
    padding-top: 80px;
}

.footer-grid {
    display: grid;
    grid-template-columns:2fr 1fr 1fr 1fr;
    gap: 50px;
    padding-bottom: 60px;
}

.footer-logo {
    height: 70px;
    margin-bottom: 25px;
}

.footer p {
    line-height: 1.8;
    opacity: .85;
}

.footer h3 {

    margin-bottom: 25px;
    font-size: 22px;

}

.footer ul {

    list-style: none;
    padding: 0;

}

.footer ul li {
    margin-bottom: 14px;
}

.footer ul li a {
    color: #d6d6d6;
    text-decoration: none;
    transition: .3s;
}

.footer ul li a:hover {
    color: #4CC9FF;
    padding-left: 5px;
}

.footer ul li i {

    margin-right: 10px;

    color: #4CC9FF;

}

.socials {

    margin-top: 25px;

    display: flex;

    gap: 15px;

}

.socials a {

    width: 45px;
    height: 45px;
    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #113166;

    color: white;

    text-decoration: none;

    transition: .3s;

}

.socials a:hover {
    background: #0057ff;
    transform: translateY(-5px);
}

.footer hr {

    border: 1px solid rgba(255, 255, 255, .08);
    margin: 0;

}

.footer-bottom {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 30px 0;

    flex-wrap: wrap;

}

.footer-bottom p {

    margin: 0;

}

.footer-bottom a {

    margin-left: 20px;

    color: #ccc;

    text-decoration: none;

    transition: .3s;

}

.footer-bottom a:hover {

    color: #4CC9FF;

}

@media (max-width: 992px) {

    .footer-grid {

        grid-template-columns:1fr;
        text-align: center;

    }

    .socials {
        justify-content: center;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 20px;
        text-align: center;

    }

    .footer-bottom a {
        margin: 0 10px;
    }

}

.page-banner {
    padding: 180px 0 100px;
    background: linear-gradient(135deg, #08152F, #0057ff);
    text-align: center;
    color: white;

}

.page-banner h1 {
    font-size: 50px;
    font-weight: 600;
    margin-bottom: 20px;
}

.page-banner p {
    font-size: 22px;
    opacity: .9;
}

.about-company {
    padding: 120px 0;
}

.about-grid {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 60px;
    align-items: center;
}

.about-grid img {
    width: 100%;
    border-radius: 20px;
    box-shadow: 0 20px 45px rgba(0, 0, 0, .12);
}

.values {
    padding: 100px 0;
    background: #F6F9FC;
}

.values-grid {
    display: grid;
    grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
    gap: 35px;

    margin-top: 60px;

}

.value {
    background: white;
    padding: 45px;
    border-radius: 20px;
    text-align: center;
    transition: .35s;
}

.value:hover {

    transform: translateY(-10px);

}

.value i {

    font-size: 55px;

    color: #0057ff;

    margin-bottom: 20px;

}

.services-list{

    padding:120px 0;

    background:#F8FAFD;

}

.services-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:35px;
    margin-top:60px;
}

.service-card{
    background:white;
    padding:45px;
    border-radius:20px;
    transition:.4s;
    box-shadow:0 15px 35px rgba(0,0,0,.08);
}

.service-card:hover{
    transform:translateY(-12px);
}

.service-card i{
    font-size:55px;
    color:#0057ff;
    margin-bottom:25px;
}

.service-card h3{
    margin-bottom:18px;
    font-size:25px;
}

.service-card p{
    line-height:1.8;
    color:#666;
}

/*====================================
DOMAINES D'INTERVENTION
====================================*/

.industries{
    padding:120px 0;
    background:#ffffff;
}

.industry-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:30px;
    margin-top:70px;
}

.industry-card{
    background:white;
    padding:40px 30px;
    border-radius:20px;
    text-align:center;
    border:1px solid #ECECEC;
    box-shadow:0 10px 30px rgba(0,0,0,.05);
    transition:.35s;
}

.industry-card:hover{
    background:#0057ff;
    color:white;
    transform:translateY(-10px);
}

.industry-card i{
    font-size:55px;
    margin-bottom:25px;
    color:#0057ff;
    transition:.35s;
}

.industry-card:hover i{
    color:white;
    transform:scale(1.15);
}

.industry-card h3{
    font-size:24px;
    margin-bottom:15px;
    font-weight:600;
}

.industry-card p{
    line-height:1.8;
    font-size:15px;
}


/*====================================
METHODOLOGIE PREMIUM
====================================*/

.methodology{
    padding:110px 0;
    background:#F7F9FC;
}

.process-steps{
    display:flex;
    align-items:center;
    justify-content:center;
    margin:70px auto 50px;
    max-width:1000px;
}

.step{
    display:flex;
    flex-direction:column;
    align-items:center;
    cursor:pointer;
    transition:.35s;
}

.circle{
    width:70px;
    height:70px;
    border-radius:50%;
    background:white;
    border:3px solid #0057ff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:26px;
    font-weight:bold;
    color:#0057ff;
    transition:.35s;
}

.step.active .circle{
    background:#0057ff;
    color:white;
    transform:scale(1.1);
}

.step span{

    margin-top:15px;

    font-weight:600;

    color:#333;

}

.line{

    flex:1;

    height:4px;

    background:#D7E4FF;

    margin:0 15px;

    margin-bottom:40px;

}

.process-card{

    max-width:900px;

    margin:auto;

    background:white;

    border-radius:20px;

    padding:45px;

    display:flex;

    align-items:center;

    gap:35px;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

    transition:.4s;

}

.process-icon{

    width:90px;

    height:90px;

    border-radius:20px;

    background:linear-gradient(135deg,#0057ff,#00A6FF);

    display:flex;

    align-items:center;

    justify-content:center;

    color:white;

    font-size:36px;

    flex-shrink:0;

}

.process-text h3{

    font-size:28px;

    margin-bottom:15px;

    color:#182848;

}

.process-text p{

    line-height:1.9;

    color:#666;

    font-size:17px;

}

@media(max-width:992px){

    .process-steps{

        flex-wrap:wrap;

        gap:20px;

    }

    .line{

        display:none;

    }

    .process-card{

        flex-direction:column;

        text-align:center;

    }

}

.catalogue-card{
    transition:all .3s ease;
    border-radius:18px;
}

.catalogue-card:hover{
    transform:translateY(-8px);
    box-shadow:0 18px 45px rgba(0,0,0,.12)!important;
}

.catalog-icon{
    width:70px;
    height:70px;
    border-radius:16px;
    background:linear-gradient(135deg,#272959,#4271b6);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:30px;
}

.catalogue-card .btn{
    border-radius:10px;
}

.catalogue-card h3{
    font-weight:600;
}

.catalogue-card p{
    min-height:110px;
}

.catalog-version {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    margin: 1.2rem 0;
    padding: .55rem 1rem;
    border-radius: 999px;
    background: rgba(255,255,255,.12);
    color: #272959;
    font-size: .95rem;
    font-weight: 500;
    backdrop-filter: blur(8px);
}

.catalog-version i {
    color: #4271b6;
}

/* ===== MENU HAMBURGER MOBILE ===== */

/* S'assurer que le bouton est visible en mobile */
.navbar-toggler {
    border: none;
    padding: 0.5rem;
    z-index: 1050;
}

.navbar-toggler:focus {
    box-shadow: none;
    outline: none;
}

/* Icône hamburger personnalisée (optionnel) */
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2833, 37, 41, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Menu mobile : fond et animation */
@media (max-width: 991.98px) {
    .navbar-collapse {
        background-color: white;
        padding: 1rem;
        margin-top: 1rem;
        border-radius: 8px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .navbar-nav .nav-link {
        padding: 0.75rem 0;
        border-bottom: 1px solid #f0f0f0;
    }

    .navbar-nav .nav-link:last-child {
        border-bottom: none;
    }
}

/* Desktop : menu horizontal */
@media (min-width: 992px) {
    .navbar-nav .nav-link {
        padding: 0.5rem 1rem;
    }
}

/* Header sticky */
#navbar.sticky {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    background-color: white !important;
}

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

.contact-section{
    padding:120px 0;
    background:#F7F9FC;
}

.contact-grid{
    display:grid;
    grid-template-columns:1fr 2fr;
    gap:40px;
    align-items:start;
}

.contact-info{
    display:flex;
    flex-direction:column;
    gap:25px;
}

.contact-item{
    display:flex;
    align-items:center;
    gap:20px;
    background:white;
    padding:25px;
    border-radius:20px;
    box-shadow:0 10px 25px rgba(0,0,0,.05);
    transition:.35s;
}

.contact-item:hover{
    transform:translateY(-6px);
}

.contact-icon{
    width:60px;
    height:60px;
    border-radius:16px;
    background:linear-gradient(135deg,#272959,#4271b6);
    color:white;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
    flex-shrink:0;
}

.contact-item h4{
    font-size:18px;
    margin-bottom:5px;
    color:#1B2440;
}

.contact-item p{
    margin:0;
    color:#666;
}

.contact-item a{
    color:#666;
    text-decoration:none;
    transition:.3s;
}

.contact-item a:hover{
    color:#4271b6;
}

.contact-form-card{
    background:white;
    padding:45px;
    border-radius:20px;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
}

.contact-form-card h3{
    font-size:26px;
    font-weight:600;
    color:#1B2440;
    margin-bottom:30px;
}

.contact-form-card .form-label{
    font-weight:500;
    color:#333;
}

.contact-form-card .form-control,
.contact-form-card .form-select{
    padding:12px 16px;
    border-radius:12px;
    border:1px solid #DDE3EE;
}

.contact-form-card .form-control:focus,
.contact-form-card .form-select:focus{
    border-color:#4271b6;
    box-shadow:0 0 0 .2rem rgba(66,113,182,.2);
}

.contact-form-card .form-check-label{
    color:#666;
    font-size:15px;
}

.contact-hp{
    position:absolute;
    left:-9999px;
}

.btn-send{
    background:#272959;
    color:white;
    border:none;
    padding:16px 34px;
    border-radius:40px;
    font-weight:600;
    transition:.3s;
}

.btn-send i{
    margin-right:10px;
}

.btn-send:hover{
    background:#4271b6;
    transform:translateY(-4px);
}

.btn-send:disabled{
    opacity:.7;
    transform:none;
}

@media(max-width:992px){

    .contact-grid{
        grid-template-columns:1fr;
    }

    .contact-form-card{
        padding:30px 20px;
    }

}