@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&family=Rubik+Mono+One&family=Titan+One&display=swap');
@import url(https://fonts.googleapis.com/css?family=Montserrat);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
:root {
    --color-white: #ffffff;
    --color-dark: black;
    --color-light: #f0eff538;
    --color-subtitle: #28282eb8;
    --color-light-2: rgba(125, 123, 142, 0.084);
    --color-primary: #8bb7e0;
    --color-primary-2: #8bb7e052;;
    --color-secondary: #307abe;
    --color-secondary-3: #8bb7e0;
    
    --color-secondary-bis: #3686d0;
    --color-tertiary:#e76e285a;
    --color-secondary-2: #4d89c2ae;
    --color-secondary-3: #4d89c273;
    --color-tertiary-2:#e76e28cb;
    --color-tertiary-3:#e76e28;
    --color-red:#e72828;
    --color-red-2:#e7282867;
    --color-green:#1bc13a;
    --color-green-2:#1bc13979;
    --font-2: "Rubik Mono One", monospace;
    --font-3: 'Jost', sans-serif;
    
}

.no-cursor {
    /* cursor: none; */
}

.flex {
    display: flex;
}

.center {
    justify-content: center;
    text-align: center;
}

.between {
    justify-content: space-between;
}

.t-center {
    text-align: center;
}

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

.titan-one-regular {
    font-family: "Titan One", sans-serif!important;
    font-weight: 400;
    font-style: normal;
  }

.rubik-mono-one-regular {
    font-family: "Rubik Mono One", monospace;
    font-weight: 400;
    font-style: normal;
  }
  

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

}

body {
    overflow-x: hidden;
    font-family: "Oswald", sans-serif;
    font-family: 400;
    cursor: auto;
}    

.home-container::-webkit-scrollbar {
    width: 10px;
  }
  
  .home-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
  }
  
  .home-container::-webkit-scrollbar-thumb {
    background: var(--color-primary);
    border-radius: 10px;
  }
  
  .home-container::-webkit-scrollbar-thumb:hover {
    background: var(--color-secondary);
  }


  /* Marges bas */
.m-1 {
    margin: 4px !important;
}
.m-2 {
    margin: 8px !important;
}
.m-3 {
    margin: 16px !important;
}
.m-4 {
    margin: 24px !important;
}
.m-5 {
    margin: 32px !important;
}
/* Marges droites */
.mr-1 {
    margin-right: 4px !important;
}
.mr-2 {
    margin-right: 8px !important;
}
.mr-3 {
    margin-right: 16px !important;
}
.mr-4 {
    margin-right: 24px !important;
}
.mr-5 {
    margin-right: 32px !important;
}

/* Marges bas */
.mb-0 {
    margin-bottom: 0px !important;
}
.mb-1 {
    margin-bottom: 4px !important;
}
.mb-2 {
    margin-bottom: 8px !important;
}
.mb-3 {
    margin-bottom: 16px !important;
}
.mb-4 {
    margin-bottom: 24px !important;
}
.mb-5 {
    margin-bottom: 32px !important;
}

/* Marges haut */
.mt-1 {
    margin-top: 4px !important;
}
.mt-2 {
    margin-top: 8px !important;
}
.mt-3 {
    margin-top: 16px !important;
}
.mt-4 {
    margin-top: 24px !important;
}
.mt-5 {
    margin-top: 32px !important;
}
.mt-6{
    margin-top: 64px !important;
}

/* Marges gauche */
.ml-1 {
    margin-left: 4px !important;
}
.ml-2 {
    margin-left: 8px !important;
}
.ml-3 {
    margin-left: 16px !important;
}
.ml-4 {
    margin-left: 24px !important;
}
.ml-5 {
    margin-left: 32px !important;
}

.p-0 {
    padding: 0!important;
}

/* Padding droite */
.pr-1 {
    padding-right: 4px !important;
}
.pr-2 {
    padding-right: 8px !important;
}
.pr-3 {
    padding-right: 16px !important;
}
.pr-4 {
    padding-right: 24px !important;
}
.pr-5 {
    padding-right: 32px !important;
}

/* Padding bas */
.pb-1 {
    padding-bottom: 4px !important;
}
.pb-2 {
    padding-bottom: 8px !important;
}
.pb-3 {
    padding-bottom: 16px !important;
}
.pb-4 {
    padding-bottom: 24px !important;
}
.pb-5 {
    padding-bottom: 32px !important;
}

/* Padding haut */
.pt-1 {
    padding-top: 4px !important;
}
.pt-2 {
    padding-top: 8px !important;
}
.pt-3 {
    padding-top: 16px !important;
}
.pt-4 {
    padding-top: 24px !important;
}
.pt-5 {
    padding-top: 32px !important;
}
.pt-6 {
    padding-top: 64px !important;
}


/* Padding gauche */
.pl-1 {
    padding-left: 4px !important;
}
.pl-2 {
    padding-left: 8px !important;
}
.pl-3 {
    padding-left: 16px !important;
}
.pl-4 {
    padding-left: 24px !important;
}
.pl-5 {
    padding-left: 32px !important;
}


/* Taille de police petite */
.t-sm {
    font-size: 12px;
}

/* Taille de police moyenne */
.t-s {
    font-size: 14px;
}

/* Taille de police grande */
.t-m {
    font-size: 16px;
}

/* Taille de police très grande */
.t-l {
    font-size: 20px;
}

/* Taille de police extra grande */
.t-xl {
    font-size: 24px;
}



a {
    text-decoration: none;
    color: var(--color-dark);
}

.primary {
    color: var(--color-primary)!important;
}

.secondary {
    color: var(--color-secondary)!important;
}

.light {
    color: var(--color-light)!important;
}

.tertiary {
    color: var(--color-tertiary);
}

.tertiary-2 {
    color: var(--color-tertiary-2);
}

.tertiary-3 {
    color: var(--color-tertiary-3);
}

.t-red {
    color: var(--color-red);
}

.t-green {
    color: var(--color-green);
}

.bg-dark {
    background: var(--color-dark);
}

.bg-white {
    background-color: var(--color-white);
}

.bg-primary {
    background-color: var(--color-primary);
}

.bg-secondary {
    background-color: var(--color-secondary);
}

html {
    font-size: 15px;
}

.main-container {
    position: fixed;
    display: flex;
    justify-content: center;
    width: 100vw;
    background-color: var(--color-secondary);
    max-height: 100vh;
    min-height: 100vh;

}


.home-container {
    border: 10px solid var(--color-white);
    z-index: 2;
    overflow: auto;
    display: flex;
    flex-direction: column;
    background-color: var(--color-white);
    width: 100%;
    transition: padding 1s ease-in-out;
    border-radius: 10px;
}

.main-container.animated {
    animation: paddingAnimation 1s forwards;
}

@keyframes paddingAnimation {
    0% {
        padding: 0;
    }

    100% {
        padding-left: 3vw;
        padding-right: 3vw;
        padding-top: 3vw;
        padding-bottom: 3vw;
    }
}

.main-container.animationend {
    animation: paddingAnimationEnd 1s forwards;
}

@keyframes paddingAnimationEnd {
    0% {
        padding-left: 3vw;
        padding-right: 3vw;
        padding-top: 3vw;
        padding-bottom: 3vw;
    }

    100% {
        padding: 0;
    }
}

.spawn {
    display: none;
    opacity: 0;
    animation: 0.5s showIn .3s forwards; 
    justify-content: center;
    align-items: center;
}

.spawn2 {
    display: none;
    opacity: 0;
    animation: 1s showIn 1.3s forwards; 
    justify-content: center;
    align-items: center;
}

.spawn-block {
    display: none;
    opacity: 0;
    animation: 1s showIn 0s forwards; 
    align-items: center;
}

.spawn-n {
    display: none;
    opacity: 0;
    animation: 1s showIn 1.5s forwards; 
}




#mainTitle {
    color: var(--color-secondary-2);
    margin-top: 0px!important;
    font-size: 50px;
}
.svg-home {
    opacity: 0; /* Initialement caché */
    transition: opacity 1s;
}





.showIn {
    animation: showIn 0.3s forwards;
}
.showOut {
    animation: showOut 0.3s forwards;
}
.btn-menu {
    width: 50px;
    align-items: center;
    height: fit-content;
    background-color: var(--color-secondary);
    border-radius: 10px;
    padding: 10px;
    display: flex;
    color: var(--color-white);
    margin: 10px;
    /* cursor: none; */
}

nav {
    display: flex;
    justify-content: space-between;
    padding: 20px 20px 0px 20px;
    position: fixed;
    z-index: 1500;
    background-color: var(--color-white);
    width: 92%;
    border-radius: 10px;
}

nav .menu-c ul {
    display: flex;
    padding: 20px;
}

nav .menu-c {
}


nav .menu-c ul li{
    list-style: none;
    font-family: "Oswald", sans-serif;
    font-weight: 400;
    font-style: normal;
    margin: 0px 2vw;
    font-size: 18px;
    padding: 10px 0px;
    color: var(--color-secondary);
    transition: color 0.3s;
}
nav .menu-c ul li:hover{
    color: var(--color-primary);
}



.nav-mobile-container {
    display: none; /* Caché par défaut */
    position: fixed;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    background-color: var(--color-secondary);
    transition: width 0.5s ease-out, height 0.5s ease-out 0.5s;
    z-index: 10000000;
    justify-content: space-between; /* Alignement flex */
    align-items: center; /* Alignement flex */
    flex-direction: column;
}

.nav-mobile-container.expand {
    display: flex; /* Affiché en mode flex */
    width: 100%;
    height: 100%;
    transition: width 0.5s ease-out, height 0.5s ease-out 0.5s;
}
.btn-nav-m {
    width: 100%;
    display: flex;
    justify-content: end;
    align-items: center;

}

.btn-menu-m {
    background-color: var(--color-primary);
    color: white;
    border-radius: 20px 0px 20px 70px;
    padding: 25px;
}

.ul-menu-m {

}
.ul-menu-m li {
    font-size: 20px;
    margin: 20px 0px;
    list-style: none;
    color: var(--color-white);
}

.services a{
    color: var(--color-secondary);
}
.services a:hover{
    color: var(--color-primary);
}

.grid-container-12 {
    margin: 0 20px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.grid-container-3 {
    margin: 0 20px;
    display: grid;
    grid-template-columns: 4fr 4fr 4fr;
    gap: 20px;
}


.sub-main-title {
    font-style: italic;
    color: var(--color-subtitle);
    font-size: 15px;
    margin-bottom: 100px;
}

.grid-container {
    display: grid;
    grid-template-columns: 4fr 4fr;
}

.grid-container-2 {
    display: grid;
    grid-template-columns: 4fr 4fr;
}

#waveCanvas2 {
    margin: 150px 0px;
}

.text-svg {
    fill: #ffffff; 
    font-size: 10px;
}


#sw-js-blob-svg {
    left: 15.4vw;
    z-index: 900;
    position: relative;
    width: 15vw;
    top: 100px;
}

#sw-js-blob-svg2 {
    z-index: 900;
    position: relative;
    width: 15vw;
    top: 450px;
    left: 1vw;
}

#sw-js-blob-svg3 {
    z-index: 900;
    position: relative;
    width: 15vw;
    top: 800px;
    right: 13vw;
}

#sw-js-blob-svg4 {
    z-index: 900;
    position: relative;
    width: 15vw;
    top: 1150px;
    left: 14vw;
}

#sw-js-blob-svg5 {
    z-index: 900;
    position: relative;
    width: 15vw;
    top: 900px;
}


.blob-path {
    fill: var(--color-secondary-bis);
    stroke: var(--color-secondary-bis);
}

.spawn-svg {
    justify-content: center;
    align-items: center;
    animation: 1s showIn 1.1s forwards; 
    opacity: 0;
    transition: transform 0.3s ease, fill 0.3s ease;
}



.spawn-svg:hover {
    transform: scale(1.2); /* Redimensionner au survol */
}

.spawn-svg:hover path {
    /* fill: var(--color-primary-2);  */
}

.svg-home:hover {
    transform: scale(1.2); /* Redimensionner au survol */
}

.svg-home:hover path {
    /* fill: var(--color-primary-2);  */
}

.svg-home {
    opacity: 0; /* Initialement caché */
    transition: opacity 1s, transform 0.3s ease, fill 0.3s ease; /* Transitions combinées */
}

.home-video-container {
margin-top: 50px;

}

.home-video-container h2 {
    display: flex;
    justify-content: start;
}

.img-container {
    display: flex;
justify-content: center;
}

.home-video-container .img-container img{
width: 20vw;

    }
    
.home-video-container p{
    display: flex;
    justify-content: start;
    margin: 15px 0px;
padding-top: 10px;
padding-bottom: 10px;
font-family: "Oswald", sans-serif;
font-family: 400;
font-size: 18px;
align-items: center;
/*
padding-right: 10px;
padding-left: 10px;
background-color: var(--color-primary);
border-radius: 10px;
color: var(--color-white); */
}
.shape-p {
    width: 40px;
    fill: var(--color-primary);
    color: var(--color-primary);
    background-color: var(--color-primary);
    border-radius: 50%;
    padding: 5px;
}

.home-video-container p:hover .shape-p{
    fill: var(--color-primary);
    color: var(--color-primary);
    background-color: var(--color-secondary);
}


.home-video-container p img{

margin-right: 10px;
}

.video video {
    max-width: 30vw;
    width: 30vw;
}

.btn-contact-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.btn-contact {
    padding: 15px;
    border: var(--color-secondary) 3px solid;
    border-radius: 10px;
    background-color: var(--color-white);
    color: var(--color-secondary);
    transition: background-color .3s ease-in-out, color .3s ease-in-out;
    font-size: 16px;
    align-items: center;
    display: flex;
}

.btn-contact:hover {
    background-color: var(--color-secondary);
    color: var(--color-white);
}


.btn-contact-container-nav {
    display: flex;
    justify-content: center;
    align-items: center;
}

.btn-contact-nav {
    padding: 10px;
    border: var(--color-secondary) 3px solid;
    border-radius: 10px;
    background-color: var(--color-white);
    color: var(--color-secondary);
    transition: background-color .3s ease-in-out, color .3s ease-in-out;
    font-size: 16px;
    align-items: center;
    display: flex;
}

.btn-contact-nav:hover {
    background-color: var(--color-secondary);
    color: var(--color-white);
}




.img-title {
    width: 200px;
}


.container-img-fonda {
    padding: 30px;
}

.container-img-fonda img{
border-radius: 15px;
width: 100%;
}

.container-fonda {
    margin: 150px 0px;
}

.link:hover, .btn-contact:hover, .csh-2:hover, .csh:hover {
    cursor: pointer;
}
/* REALISATIONS */

.real-container {
    display: flex;
    scroll-snap-type: x mandatory; /* Optional: Snap scrolling */
    margin: 50px 0px;

    min-height: 470px;
}

.p-real {
    min-width: 90vw;
    display: inline-block; /* Make the items inline-block for horizontal alignment */
    padding: 10px;
    scroll-snap-align: start; /* Optional: Snap to start */
}

.real {
    min-width: 80vw;
    width: 80vw;
    height: 300px;
    padding: 20px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
    min-height: 300px;
}

.real-img {
    max-width: 100%;
    justify-content: center;
    align-items: center;
    display: flex;
    border-radius: 15px;
    margin: 30px;
    min-height: 300px;
}

.real-img img {
    border-radius: 15px;
    max-width: 100%;
    max-height: 100%;
}

.text-real-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}



.services {
    position: relative;
}
.services a {
    font-family: "Oswald", sans-serif!important;
    /* cursor: none; */

}

.submenu {
    display: none!important;
    position: absolute;
    top: 100%;
    background-color: #fff;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    z-index: 1;
    padding: 10px;
    border-radius: 10px;
    left: -20px;
}

.submenu li {
    font-family: "Oswald", sans-serif!important;
    color: var(--color-secondary);
    margin: 0!important;
    padding: 5px!important;
    width: 100%;

}

.submenu li:hover {
    color: var(--color-primary);
}

.services:hover .submenu {
    display: block!important;
}


.container-services-title {
    height: 20vh;
    min-height: 20vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--color-secondary);
    border-radius: 20px;
    margin: 120px 50px 50px 50px;
}


.container-services-title h1 {
    font-family: "Oswald", sans-serif;
    font-size: 30px;
    color: var(--color-white);
}

.b-container-services {
    padding: 80px;
    height: 500px;
}


.container-service-list {
    height: fit-content;
}

.b-container-services p:hover .shape-p{
    fill: var(--color-primary);
    color: var(--color-primary);
    background-color: var(--color-secondary);
}


.b-container-services p img{

margin-right: 10px;
}

.b-container-services p {
justify-content: start;
align-items: center;
display: flex;
margin: 20px 0px;
    }

.service-list {
    margin: 20px;
    height: 100%;
    box-shadow: 0px 0px 5px var(--color-primary);
    border-radius: 20px;
    display: flex;
    padding: 30px;
    justify-content: space-around;
    flex-direction: column;
    align-items: center;
    min-height: 400px;

}

.service-list p, .service-list ul li {
font-family: "Oswald", sans-serif;
color: var(--color-primary);

}

.img-container-services {
    display: flex;
    justify-content: center;
    align-items: center;
}

.img-container-services img{
    width: 500px;
}

.service-list img{
    width: 300px;
    border-radius: 10px;
}

.real-c-mobile {
    display: none;
    flex-direction: column;
}

.real-c {
    padding: 20px;
}
.home-container.real-home-c {
    overflow:hidden;
}



.home-real-container {
    height: 460px;
margin: 2vw;
border-radius: 10px;
background-color: var(--color-primary);
display: flex;
justify-items: center;
justify-content: center;
align-items: center;
flex-direction: column;
padding: 10px;
}

.home-real-container h2 {
    flex: 1;
    color: var(--color-white);
    margin: 20px 0px;
}

.home-real {
    margin: 1vw;
    width: 100%;
    height: 340px;
    background-color: var(--color-white);
    border-radius: 10px;
}

.block-home-real {
    width: 100%;
    flex: 3;
    display: flex;
    justify-items: center;
    justify-content: center;
    align-items: center; 
}

.home-real img{
width: 100%;
border-radius: 10px;
max-height: 100%;
}

.home-real {
    padding: 40px 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.home-real h4 {
    margin-bottom: 8px;
    display: flex;
    justify-content: center;
    text-align: center;
}

.csh {
    width: 33.3333%;
}

.csh-2 {
    width: calc(50% + 15px)
}

.csh-d {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.hb-1-container {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 30px !important;
    padding-top: 0;
    padding-bottom: 0;
    width: 85%;
    max-width: 1620px;
    display: flex;
    justify-content: space-between;
    gap: 30px;
    padding: 2% 0;
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat;
    margin: auto 5vw;
    position: relative;
}

.hb-1-subcontainer {
    width: 100%;
    float: left;
    background-size: cover;
    background-position: 50%;
    position: relative;
    z-index: 2;
    min-height: 1px;
    line-height: 1em;
    height: 550px;
    border-radius: 10px;
}

.hb-1-subcontainer-2 {
    width: 100%;
    float: left;
    background-size: cover;
    background-position: 50%;
    position: relative;
    z-index: 2;
    min-height: 1px;
    line-height: 1em;
    height: 260px;
    border-radius: 10px;
}

.hb-1-subcontainer-3 {
    width: 100%;
    float: left;
    background-size: cover;
    background-position: 50%;
    position: relative;
    z-index: 2;
    min-height: 1px;
    line-height: 1em;
    height: 375px;
    border-radius: 10px;
}

.hb-1-s-subcontainer {
    max-width: 100%;
    height: 100%;
    margin: 0 auto;
    position: relative;
    text-align: center;
    word-wrap: break-word;
    overflow: hidden;
    width: 100%;
    border-radius: 10px;
}

.hb-1-s-subcontainer-2 {
    max-width: 100%;
    height: 100%;
    margin: 0 auto;
    position: relative;
    text-align: center;
    word-wrap: break-word;
    overflow: hidden;
    width: 100%;
    border-radius: 10px;
}

.hb-1-i-c {
    height: 100%;
    margin-bottom: 0;
    overflow: hidden;
    display: block;
    border-radius: 10px;
}

.hb-1-i-c span.s1 {
z-index: 4;
    position: relative;
    top: -51%;
    font-size: 20px;
    color: var(--color-white);
    font-weight: 7  00;

}

.hb-1-i-c span.s2 {
    z-index: 4;
        position: relative;
        top: -101%;
        font-size: 20px;
        color: var(--color-white);
        font-weight: 7  00;
    
    }

    .hb-1-i-c span.s3 {
        z-index: 4;
            position: relative;
            top: -171%;
            font-size: 20px;
            color: var(--color-white);
            font-weight: 7  00;
        
        }
        .hb-1-i-c span.s4 {
            z-index: 4;
                position: relative;
                top: -101%;
                font-size: 20px;
                color: var(--color-white);
                font-weight: 7  00;
            
            }
.hb-1-i-c::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(9, 77, 100, .5);
    transition: opacity ease-in-out .3s;
    border-radius: 10px;
}

.hb-1-t-c {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
}

.hb-1-t-c::after {
    z-index: 4;
    content: '';
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    bottom: 20px;
    border: 1px solid #fff;
}

.hb-2-container {
    display: flex;
    height: 500px;
    width: 100%;

}

.hb-2-i-c {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    flex: 7;
}

.hb-2-i-c img{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.hb-2-c-b {
    margin: 14vw 0 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hb-2-c-b button {
    padding: 25px;
    color: var(--color-white);
    border-radius: 50px;
    background-color: var(--color-secondary);
    cursor:default;
    font-weight: 600;

}
#hbIm1 .hb-1-i-c img,#hbIm2 .hb-1-i-c img,#hbIm3 .hb-1-i-c img,#hbIm4 .hb-1-i-c img,#hbIm5 .hb-1-i-c img,#hbIm6 .hb-1-i-c img{
    transition: transform .3s ease-in-out;

}

#hbIm1:hover .hb-1-i-c img {
    transform:translate(-27%, 0%) scale(1.2)!important;
}
#hbIm2:hover .hb-1-i-c img {
    transform:translate(-50%, 0%) scale(1.2)!important;
}
#hbIm3:hover .hb-1-i-c img {
    transform:translate(-27%, 0%) scale(1.2)!important;
}
#hbIm4:hover .hb-1-i-c img {
    transform: scale(1.2)!important;
}
#hbIm5:hover .hb-1-i-c img {
    transform: scale(1.2)!important;
}
#hbIm6:hover .hb-1-i-c img {
    transform: scale(1.2)!important;
}

.hb-title-real {
    margin-top: 150px;
    margin-bottom: 20px;
font-size: 25px;
}

.hb-title-real-2 {
    margin-top: 150px;
    margin-bottom: 100px;
font-size: 28px;
}


.hb-3-container {
    width: 60%;
    display: flex;
    margin: 150px auto 50px auto;
    background-color: var(--color-primary);
    border-radius: 20px;
    padding :15px;
}

.container-img-fonda img {
    max-width: 500px;
}

.hb-3-c-t {
    color : var(--color-white);
    margin: 0 10%;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.container-img-fonda-2 {
    display: none;
}

.contact-details {
    margin-top: 100px;
    margin-left: 10vw;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.contact-details h3 {
    margin-top: 30px;
    font-size: 26px;
    margin-bottom: 6px;
    color: var(--color-secondary);
}

.contact-form {
    padding: 50px 50px 50px 0px;
    margin-top: 200px;
    display: flex;
    justify-content: center;
    flex-direction: column;
}
.contact-form div input, .contact-form input, .contact-form textarea{

    padding: 10px;
    border: 2px solid var(--color-secondary);
    border-radius: 10px;
    margin: 20px 0px;
    background-color: var(--color-primary-3);

}

.contact-form textarea {
    width: calc(100%); height:100px
}

.btn-contact-c {
    border: none;
    display: flex;
    justify-content: center;
}

.btn-contact-c button {
    border-radius: 10px;
    color: var(--color-white);
    background-color: var(--color-secondary);
    transition: backround-color 0.3s;
    padding: 10px;
}

.btn-contact-c button:hover .btn-contact-c button {
background-color: var(--color-primary);

}

#h3sbt {
    font-size: 20px;
    margin-bottom: 150px;
}

#bgMainTitle1 {
    border-radius: 50px;
    width: 25vw;
    min-width: 100px;
    height: 150px;
    background: var(--color-primary-2);
    position: relative;
    top: 25%;
    left: -50%;
    animation: .5s introLeft 1s forwards;
    display: flex;
    justify-content: center;
    align-content: center;
    text-align: center;
    flex-direction: column;
    font-size: 35px;
    font-family: 'Oswald', sans-serif;
    font-weight: 900;

}

@keyframes introLeft {
0% {
    left: -50%;
}
100% {
    left: 25%;
}
}
#bgMainTitle2 {
    z-index: 3;
    border-radius: 50px;
    width: 30vw;
    min-width: 100px;
    height: 150px;
    background: var(--color-white);
    position: relative;
    top: 20%;
    left: -50%;
    animation: .8s introLeft3 1s forwards;
    display: flex;
    justify-content: center;
    align-content: center;
    text-align: center;
    flex-direction: column;
    font-size: 35px;
    font-family: 'Oswald', sans-serif;
    font-weight: 900;
    border: 1px solid var(--color-secondary);
}

@keyframes introLeft3 {
0% {
    left: -50%;
}
100% {
    left: 35%;
}
}

#bgMainTitle3 {
    border-radius: 50px;
    width: 25vw;
    min-width: 100px;
    height: 150px;
    background: var(--color-secondary-2);
    position: relative;
    top: -36%;
    left: -50%;
    animation: 1s introLeft2 1s forwards;
    display: flex;
    justify-content: center;
    align-content: center;
    text-align: center;
    flex-direction: column;
    font-size: 35px;
    font-family: 'Oswald', sans-serif;
    font-weight: 900;

}

@keyframes introLeft2 {
0% {
    left: -50%;
}
100% {
    left: 48%;
}
}

#hSbTitle {
    margin: 200px 0 200px 0;
}

.mobile-h-c {
    display: none;
}
.mobile-h-s {
    border-radius: 20px;
    height: 150px;
    display: flex;
    justify-content: start;
    align-content: center;
    font-family: var(--font-3);
    margin: 20px;
    border: 1px solid var(--color-light);
    text-align: center;
    flex-direction: column;
}

.mobile-h-s.s1 {
    box-shadow: 2px 2px 2px var(--color-primary);
    color: var(--color-primary);
}
.mobile-h-s.s1:hover {
    box-shadow: 2px 2px 2px var(--color-secondary);
}
.mobile-h-s.s1 .material-symbols-outlined {
    background-color: var(--color-primary);
}
.mobile-h-s.s2 {
    box-shadow: 2px 2px 2px var(--color-tertiary);
    color: var(--color-tertiary-2);
}
.mobile-h-s.s2:hover {
    box-shadow: 2px 2px 2px var(--color-tertiary-2);
}
.mobile-h-s.s2 .material-symbols-outlined {
    background-color: var(--color-tertiary);
}
.mobile-h-s.s2 {
    box-shadow: 2px 2px 2px var(--color-tertiary);
    color: var(--color-tertiary-2);
}
.mobile-h-s.s2:hover {
    box-shadow: 2px 2px 2px var(--color-tertiary-2);
}
.mobile-h-s.s2 .material-symbols-outlined {
    background-color: var(--color-tertiary);
}
.mobile-h-s.s3 {
    box-shadow: 2px 2px 2px rgba(15, 179, 163, 0.612);
    color: rgba(44, 231, 212, 0.584);
}
.mobile-h-s.s3:hover {
    box-shadow: 2px 2px 2px rgba(44, 231, 212, 0.584);
}
.mobile-h-s.s3 .material-symbols-outlined {
    background-color: rgba(15, 179, 163, 0.612);
}
.mobile-h-s.s4 {
    box-shadow: 2px 2px 2px rgba(116, 17, 197, 0.448);
    color: rgba(142, 35, 230, 0.662);
}
.mobile-h-s.s4:hover {
    box-shadow: 2px 2px 2px rgba(142, 35, 230, 0.662);
}
.mobile-h-s.s4 .material-symbols-outlined {
    background-color: rgba(116, 17, 197, 0.448);
}
.mobile-h-s .material-symbols-outlined {
color: var(--color-white);
    padding: 4px;
    width: 50px;
    margin: 30px 0px 0px 30px ;
    border-radius: 5px;
    display: flex;
    justify-content: center;
}


.mobile-h-s.s1:hover {
    box-shadow: 2px 2px 2px var(--color-secondary);

}

.real-mobile {
    display: none!important;
}
@media screen and (max-width :400px ) {
    .service-list img{
        width: 230px;
        border-radius: 10px;
    }  
}

@media screen and (max-width :350px ) {
    .service-list img{
        width: 200px;
        border-radius: 10px;
    }  
}

.t-r {
margin-top: 0px!important;
}

@media screen and (max-width :1169px ) {
    .contact-details {
        margin-top: 0px;
    }
    .contact-form {
        margin-top: 20px;
    }
    .t-r {
        margin-top: 150px!important;
        }
        

.mobile-h-c {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.hb-title-real-2 {
    margin-top: 50px;
    margin-bottom: 30px;
}

.real-computer {
    display: none!important;
}

.real-mobile {
    display: flex!important;
}


    #bgMainTitle1, #bgMainTitle2, #bgMainTitle3 {
        font-size: 20px;
        width: 40vw;
    }
    #bgMainTitle1 {
    animation: .5s introLeft4 1s forwards;
    }
    #bgMainTitle2 {
        animation: .8s introLeft6 1s forwards;
        }
    #bgMainTitle3 {
    animation: 1s introLeft5 1s forwards;
    }
    #h3sbt {
        margin:0px 20px 80px 20px;
    }
    .hb-title-real {
        margin-top: 50px;
    }
    .hb-2-c-b {
        margin: 90px 0 0 0;
    }
    #hbIm2 {
        margin-bottom: 30px;
    }
    .home-container {
        border: 2px solid var(--color-white);
    }
    #sav-hb {
        margin-bottom: 30px;
    }
    .s3, .s1, .s2 {
        top: -92%!important;
    }
.hb-1-subcontainer-2, .hb-1-subcontainer-3, .hb-1-subcontainer {
    height: 400px;
}

    .contact-details {
        margin-left: 0px;
    }
.contact-form {
    padding: 0px;

}
    .contact-form div input, .contact-form input, .contact-form textarea  {
        margin: 20px 0!important;
    }
    .contact-form form {
width: 80%;
    }
    .hb-1-container {
        flex-direction: column;
        margin: auto;
        display: none;
    }
    .csh, .csh-2 {
        width: 100%;
    }
    .hb-3-container { 
        width: 96%;
        flex-direction: column;
    }
    .grid-container-3 {
        margin: 0 20px;
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .hb-2-container {
        flex-direction: column;
        height: auto;
    }
    .service-list img {
        /* width: 150px; */
    }
    .service-list {
        margin: 20px 0;
    }
    .block-home-real {
        flex-direction: column;
        height: fit-content;
    }
    .home-real-container {
        height: fit-content;
        margin-top: 40px;
    }
.container-img-fonda {
    display: none;
    justify-content: center;
}
.container-img-fonda-2 {
    display: flex;
    justify-content: center;
}

.home-container.real-home-c {
    overflow: auto!important;
}

    .real-container {
    overflow: auto!important;
    display: none!important;
    }

    .real-c-mobile {
        display: flex;
    }
    
    .expertise {
        display: none;
    }
    .grid-container-2 {
        grid-template-columns: 1fr;
    }

    .btn-menu {
        opacity: 1;
    }
    .menu-c {
        display: none;
    }
    nav {
        width: 93.5%;
    }
    #mainTitle {
        font-size: 25px;
    }
    .grid-container {
        grid-template-columns: 1fr;
    }
    .services-home-container {
        display: none;
    }
    .home-container::-webkit-scrollbar {
        display: none;
      }
      .home-video-container {
        margin-top: 50px;
      }
      .home-video-container .img-container img{
        width: 40vw;
        
            }     

    .main-container {
    max-height: 93vh!important;
    min-height: 93vh!important;

    }
}

@media screen and (min-width :1170px ) {

    .contact-form {
        margin-top: 50px;
    }
    .contact-details {
        justify-content: start;
    }
    .expertise {
        display: flex;
    }
    .btn-menu {
        opacity: 0;
        pointer-events: none;
    }
    .menu-c {
        display: flex;
    }

}
.hidden {
    animation: 1s showIn 0s forwards; 

}

.visible-r-1 {
    animation: 1s showIn .5s forwards; 

}
.visible-r-2 {
    animation: 1s showIn 1s forwards; 

}
.visible-r-3 {
    animation: 1s showIn 1.5s forwards; 

}

.visible {
    animation: 1s showIn 0s forwards; 

}


.footer {
    margin: 100px 10vw 10px 10vw;
    font-family: 'Oswald', sans-serif;
}

.footer-container {
    border-top: 1px solid var(--color-secondary) ;
    padding: 20px;
    display: flex;
    justify-content: space-between;
}

.head-footer {
    display: flex;
    justify-content: start;
    margin-bottom: 20px;
}

.head-footer p{
max-width: 200px;
}


@keyframes showIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}
@keyframes showOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes introLeft4 {
    0% {
        left: -50%;
    }
    100% {
        left: 12%;
    }
}
@keyframes introLeft5 {
    0% {
        left: -50%;
    }
    100% {
        left: 48%;
    }
}
@keyframes introLeft6 {
    0% {
        left: -50%;
    }
    100% {
        left: 30%;
    }
}