* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  html {
    scroll-behavior: smooth;
  }
  
  p,
  a,
  span,
  li,
  label,
  input,
  div {
    font-size: 16px;
  }

  body{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    font-family: 'OpenSans', sans-serif;
  }

  button{
    padding: 15px 20px;
    border-radius: 25px;
    border: none;
    color: rgb(54, 43, 112);
    font-weight: 600;
    transition: all .3s ease;
  }

  button:hover{
    transform: translateY(-10px);
  }

  a:hover{
    opacity: 0.75;
  }

  h4{
    color: rgb(59, 46, 115);
    margin-bottom: 25px;
  }

/***************************section welcome debut***************************/

.welcome{
    width: 100%;
    background-image: url(../images/hero-bg.jpg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 40px;
}

header{
    width: 85%;
    display: flex;
    align-items: center;
    display: flex;
    padding: 30px 0;
    position: relative;
    gap: 20px;
}

.header2{
    width: 100%;
    background-color: white;
    top: 0px;
    position: fixed;
    padding: 25px 40px;
    color: rgb(28, 43, 79);
    transition: all .8s;
    transform: translateY(-200%);
    h1{
        color: rgb(28, 43, 79);
    }
    a{
        color: rgb(28, 43, 79);
    }
    i{
        color: rgb(28, 43, 79);
    }
    button{
        background-color: rgb(28, 43, 79);
        color: rgb(233, 233, 252);
    }
}

.secondHeader{
    transform: translateY(0);
    z-index: 1;
}

header div:nth-child(1){
    display: flex;
    justify-content: flex-end;
}

header div:nth-child(2){
    display: none;
}

header i{
    font-size: 30px;
    color: white;
}

header h1{
    color: rgb(247, 238, 238);
    font-size: 40px;
    flex: 3;
}
header nav{
    flex: 2;
}

header ul{
    list-style: none;
    display: flex;
    gap: 30px;
}

header ul a{
    text-decoration: none;
    color: rgb(247, 238, 238);
    transition: all .3s ease;
}

header .but{
    flex: 1;
}

header .icon{
    display: none;
}

header .icon2{
    display: none;
}

.but2{
    display: none;
}

.welcome > div{
    width: 85%;
    display: flex;
    gap: 20px;
    padding-bottom: 30px;
    transition: all .8s;
}

.welcome > div div:nth-child(1){
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.welcome > div div:nth-child(1) h1{
    font-size: 40px;
    color: white;
    margin-bottom: 20px;
}

.welcome > div div:nth-child(1) p{
    color: white;
    margin-bottom: 20px;
}

.welcome > div div:nth-child(1) .but{
    display: flex;
    gap: 20px;
}

.welcome > div div:nth-child(1) 
.but button:nth-child(2){
    background-color: transparent;
    border: solid 1px white;
    color: white;
}

.welcome > div div:nth-child(2){
    width: 50%;
    display: flex;
    position: relative;
}

.welcome > div div:nth-child(2) .slides{
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.slider .slides img{
    width: 100%;
    height: 90%;
    border-radius: 10px;
    display: none;
}

.slider .slides img.displaySlide{
    display: block;
}

.butslide{
    font-size: 20px;
    width: 30px;
    height: 30px;
    border: solid 1px rgb(31, 37, 54);
    border-radius: 50%;
    text-align: center;
    background-color: white;
    opacity: 0.5;
    cursor: pointer;
}

.prev{
    position: absolute;
    top: 50%;
    left: 1px;
}

.next{
    position: absolute;
    top: 50%;
    right: 1px;
}

/*************************welcome responsive*************************/

@media (width < 950px){
    header .icon{
        display: block;
    }

    header .icon2{
        display: block;
    }

    header nav, .header2 nav{
        position: absolute;
        width: 30%;
        top: 100%;
        right: 0;
        background-color: white;
        transform: translateY(-200%);
        transition: all .8s;
        padding: 20px 0;
        border-radius: 10px;
    }
    .header2 nav{
        background-color: rgb(28, 43, 79);
        a{
            color: white;
        }
        button{
            background-color: white;
            color:rgb(28, 43, 79);
        }
    }
    header nav ul a{
        color: rgb(54, 43, 112);
    }
    header nav ul{
        flex-direction: column;
        text-align: center;
    }
    header .but{
        display: none;
    }
    .but2{
        display: block;
        button{
            background-color: rgb(28, 43, 79);
            color: white;
        }
    }
    .menu nav{
        transform: translateY(0);
        z-index: 100;
    }
    .menu2 nav{
        transform: translateY(0);
        z-index: 100;
    }
    .welcome1{
        opacity: 0.1;
    }
    .welcome > div div:nth-child(1) h1{
        font-size: 30px;
    }
}

@media (width < 700px){
    .welcome > div{
        width: 100%;
    }

    header{
        width: 90%;
    }
    
    .welcome > div div:nth-child(1) h1{
        font-size: 25px;
    }

    .welcome > div{
        flex-direction: column-reverse;
        align-items: center;
        gap: 30px;
    }

    .welcome > div div:nth-child(2){
        width: 75%;
    }

    .welcome > div div:nth-child(1){
        width: 70%;
        text-align: center;
    }
    header nav, .header2 nav{
        width: 50%;
    }
}

@media (width < 430px){
    .welcome > div div:nth-child(1) .but{
        flex-direction: column;
    }
    header nav, .header2 nav{
        width: 90%;
    }
}

/***************************section welcome fin***************************/




/***************************section services debut***************************/

.services{
    width: 85%;
    padding: 80px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.services h1{
    font-size: 30px;
    text-align: center;
    color: rgb(48, 46, 46);
    width: 50%;
    margin-bottom: 40px;
}

.services > div{
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    width: 100%;
}

.services > div > div{
    width: 250px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 30px;
    border: solid 1px rgb(201, 197, 197);
    border-radius: 10px;
}

.services .item > i{
    width: 50px;
    height: 50px;
    font-size: 20px;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(99, 66, 160);
    border-radius: 50%;
    margin-bottom: 20px;
  }

  .services h3{
    color: rgb(48, 46, 46);
    margin-bottom: 20px;
    font-weight: 500;
  }

  .services p{
    color: rgb(99, 95, 95);
    margin-bottom: 20px;
    font-size: 14px;
    text-align: center;
  }
  .services a{
    text-decoration: none;
    color: rgb(59, 46, 115);
  }

/*************************services responsive*************************/

@media (width < 800px){
    .services h1{
        font-size: 25px;
        width: 70%;
    }  
}

@media (width < 600px){
    .services{
        width: 100%;
    }
    .services{
        padding: 40px 0;
    }
    .services h1{
        font-size: 20px;
        width: 80%;
    }  
}

/***************************section services fin***************************/




/***************************section about debut***************************/

.about{
    padding: 40px 0;
    width: 85%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
}

.about div:nth-child(1){
    width: 50%;
}

.about div:nth-child(1) img{
    width: 100%;
    height: 100%;
}

.about div:nth-child(2){
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px;
}

.about h1{
    font-size: 30px;
    color: rgb(48, 46, 46);
    margin-bottom: 40px;
}

.about ul{
    list-style: none;
}

.about ul li{
    margin-bottom: 20px;
    color: rgb(48, 46, 46);
    font-weight: 600;
}

.about details p{
    font-weight: 100;
    font-size: 14px;
    word-spacing: 1px;
    margin-left: 30px;
}

/* .about details{
    transition: all .3s;
} */

/*************************about responsive*************************/

@media (width < 900px){
    .about{
        flex-direction: column-reverse;
    }

    .about div:nth-child(1){
        width: 90%;
    }

    .about div:nth-child(2){
        text-align: center;
        width: 90%;
    }
}

@media (width < 650px){
    .about{
        width: 95%;
        padding: 0;
    }

    .about h1{
        font-size: 25px;
    }

    .about div:nth-child(2){
        width: 100%;
    }
}

/***************************section about fin***************************/



/***************************section solutions debut***************************/

.solutions{
    padding: 40px 0 150px 0;
    width: 85%;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 40px;
    position: relative;
}

.solutions .content{
    display: flex;
    align-items: center;
    width: 100%;
}

.solutions .content > div:nth-child(1){
    width: 50%;
}

.solutions .content div:nth-child(1) img{
    width: 100%;
    height: 100%;
}

.solutions .content > div:nth-child(2){
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px;
}

.solutions .content h1{
    font-size: 30px;
    color: rgb(48, 46, 46);
    margin-bottom: 20px;
}

.solutions .content > div > p{
    font-size: 14px;
    color: rgb(48, 46, 46);
    margin-bottom: 30px;
}

.solutions .content > div > div{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.solutions .content .elt{
    display: flex;
    align-items: center;
    gap: 10px;
}

.solutions .content .elt p{
    font-size: 14px;
    color: rgb(48, 46, 46);
}

.solutions .content .elt i{
    color: rgb(48, 46, 46);
}

.solutions .content1{
    width: 80%;
    display: flex;
    flex-wrap: wrap;
    background-image: url(../images/stats-bg.jpg);
    background-size: cover;
    justify-content: space-around;
    padding: 60px 40px;
    gap: 30px;
    border-radius: 10px;
    margin: 20px 0;
    position: absolute;
    bottom: -20%;
}

.solutions .content1 div{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    gap: 10px;
    h1{
        font-size: 30px;
    }
    p{
        font-weight: 600;
    }
}

/*************************solutions responsive*************************/
@media (width < 900px){
    .solutions .content{
        flex-direction: column;
    }

    .solutions .content > div:nth-child(1){
        text-align: center;
        width: 90%;
    }

    .solutions .content > div:nth-child(2){
        text-align: center;
        width: 90%;
    }
}

@media (width < 650px){
    .solutions .content{
        width: 95%;
    }

    .solutions .content h1{
        font-size: 20px;
    }

    .solutions .content > div:nth-child(2){
        width: 100%;
    }
    .solutions .content > div > div{
        grid-template-columns: 1fr;
    }
}

@media (width < 585px){
    .solutions{
        padding: 40px 0 250px 0;
    }
}

@media (width < 510px){
    .solutions{
        padding: 40px 0 300px 0;
    }
}
/***************************section solutions fin***************************/




/***************************section case debut***************************/

  .case{
    width: 100%;
    padding: 200px 0 60px 0;
    background-color: rgb(233, 233, 252);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .case h1{
    font-size: 30px;
    color: rgb(48, 46, 46);
    margin-bottom: 40px;
    text-align: center;
    width: 60%;
}

  .case .content{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    width: 85%;
  }

  .case .content .elt{
    border-radius: 10px;
  }

  .case .elt > div:nth-child(1){
    background-size: cover;
    padding: 100px 80px;
    border-radius: 10px 10px 0 0;
  }

  .case .elt:nth-child(1) > div:nth-child(1){
    background-image: url(../images/blog-1.jpg);
  }

  .case .elt:nth-child(2) > div:nth-child(1){
    background-image: url(../images/blog-2.jpg);
  }

  .case .elt:nth-child(3) > div:nth-child(1){
    background-image: url(../images/blog-3.jpg);
  }
  
  .case .content .elt div:nth-child(2){
    background-color: rgb(240, 245, 250);
    border-radius: 0 0 10px 10px;
    padding: 20px;
  }

  .case .content .elt div:nth-child(2) h2{
    font-size: 20px;
    color: rgb(28, 43, 79);
    margin-bottom: 20px;
  }

  .case .content .elt div:nth-child(2) p{
    font-size: 14px;
    margin-bottom: 20px;
  }

  .case .content .elt div:nth-child(2) p:nth-child(3){
    color: rgb(122, 120, 120);
  }

/*************************case responsive*************************/
@media (width < 900px){
    .case .content{
      grid-template-columns: repeat(2, 1fr);
    }
  
  }

  @media (width < 600px){
    .case{
        padding-top: 250px;
    }
    .case .content{
      grid-template-columns: 1fr;
    }
    .case h1{
        font-size: 25px;
        width: 80%;
    }
  }
/***************************section case fin***************************/




/***************************footer debut***************************/

footer{
    width: 100%;
    background-color: rgb(31, 37, 54);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  
  footer .content0{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 85%;
    padding: 50px 0;
    border-bottom: solid 1px rgb(122, 120, 120);
  }
  
  footer .content{
    width: 85%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 40px 0;
    gap: 20px;
  }

  footer ul{
    list-style: none;
  }

  footer a{
    font-size: 14px;
    color: rgb(201, 197, 197);
  }
  
  footer .content div ul:nth-child(3){
    display: flex;
  }

  footer .content div ul:nth-child(3) li i{
    margin: 20px 30px 0 0;
    color: rgb(201, 197, 197);
  }
  
  footer li{
    margin: 20px 0;
  }
  
  footer li a, footer p{
    text-decoration: none;
    color: white;
  }
  
  footer div h1{
    color: rgb(240, 245, 250);
    font-size: 18px;
    margin-bottom: 25px;
  }

  footer .content p{
    font-size: 14px;
    color: rgb(201, 197, 197);
    margin-bottom: 20px;
}
  
  footer form{
    display: flex;
    margin-top: 30px;
    width: 100%;
  }
  
  footer input:nth-child(1){
    border: none;
    width: 65%;
    border-radius: 10px 0 0 10px;
    padding: 15px 20px;
    background-color: rgb(39, 44, 58);
    outline: none;
  }
  
  footer input:nth-child(2){
    border: none;
    width: 35%;
    border-radius:  0 10px 10px 0;
    margin-left: -1px;
    background-color: rgb(28, 43, 79);
    padding: 15px 20px;
  }
  
  input::placeholder{
    color: white;
  }
  
  
  
  /********************responsive footer********************/
  
  @media (width < 1000px){
    footer .content{
      grid-template-columns: repeat(2, 1fr);
    }
  }
  
  @media (width < 700px){
    footer .content{
      grid-template-columns: 1fr;
    }

    footer .content0{
        flex-direction: column;
    }
  }

/***************************footer fin***************************/