.expertise-other-pages{
  top: -50px;

  .expertises_content{
    background-color: white;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 25px 50px -12px;
    padding: 20px 30PX;
  }
}

.service{
    .container{
        padding: 30px 70PX;
    }

    .section-name{
      text-transform: uppercase;
      color: #D3A062;
      font-size: 18px;
  }
    .section-title{
        color: var(--bleu);
        font-size: 2.2rem;
        font-weight: 600;
        margin: 10px 0;
    }

    .intro-container{
        width: 85%;
        margin: 20px auto;
        .intro{
            display: flex;
            justify-content: space-between;
            gap: 45px;
        }

        .intro-left, .intro-right{
            width: calc((100% - 30px)/2);
        }

        .intro-left{
            h2{
                width: 50%;
            }
        }

        .intro-desc{
            line-height: 1.5;
        }
    }

    .nos-projets-container{
      background-color: #F6F7F9;
      padding-top: 50px;
      padding-bottom: 30px;
        
      .grid-piscines {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: minmax(100px, auto);
        gap: 8px;
        height: 650px;
      }

      img{
        height: 100%;
        width: 100%;
        object-fit: cover;
      }

      img:hover{
        cursor: pointer;
      }
        

      .img2 {
        grid-row: span 2 / span 2;
      }


      .img4 {
        grid-row: span 3 / span 3;
      }

      .img5 {
        grid-row: span 2 / span 2;
        grid-column-start: 2;
        grid-row-start: 3;
      }

      .img6 {
        grid-row: span 3 / span 3;
        grid-column-start: 3;
        grid-row-start: 2;
      }
           
    }

    .faq-contain{
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0px;
        gap: 0px;
      }
    .faq-item {
        border-bottom: 1px solid #CCCCCC;
        line-height: 1.6em;
        cursor: pointer;
        overflow: hidden;
      }
    .faq-item {
        width: 100%;
      }
    .faq-item:hover {
        background-color: rgba(119, 119, 119, 0.04);
      }
       .faq-question{
        display: flex;
        align-items: center;
      }
       .faq-questiontext{
        flex: 1;
        font-weight: 400;
        color: black;
        text-transform: uppercase;
        letter-spacing: 1px;
      }
       .faq-questionicon {
        position: relative;
        padding: 20px;
      
        justify-content: center;
        align-items: center;
        display: flex;
        gap: 10px;
        color: var(--orange);
        font-weight: 300;
      }
       .faq-icon {
        position: relative;
        display: flex;
        width: 1.25rem;
        height: 1.25rem;
        justify-content: center;
        align-items: center;
        transform: rotate(45deg);
        transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
        transform-style: preserve-3d;
        transition: transform 0.3s ease;
      }
       .faq-stripe-1 {
        width: 2px;
        height: 100%;
        background-color: var(--orange);
        opacity: 1;
        transition: opacity 0.3s ease;
      }
       .faq-stripe-2 {
        position: absolute;
        width: 100%;
        height: 2px;
        background-color: var(--orange);
      }
       .faq-reponse{
        width: 100%;
        height: 0;
        opacity: 0;
        transition: height 0.5s, opacity 0.5s;
      }
       .faq-answer-text-wrapper {
        padding-right: 1.25rem;
        padding-bottom: 1.25rem;
        padding-left: 1.25rem;
        box-sizing: border-box;
      }
       .faq-answer-text {
        line-height: 1.6em;
        transition: transform 0.5s, opacity 0.2s;
        color: #282F37;
        margin-top: 0;
      }

    .all-project{
        display: flex;  
        align-items: center;
        justify-content: flex-end; 
        gap: 20px;     
        padding: 30px 0;
        text-transform: uppercase;

        img{
            width: 100px;
        }

        a{
            color: black;
        }
    }
    
}

@media (max-width:1024px) {
    .service{ 
        .container{
            padding: 15px;
        }   
        .intro-container{
            width: 90%;
            margin: 0 auto;
            .intro{
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                gap: 25px;
            }
    
            .intro-left, .intro-right{
                width: 100%;
            }

            .intro-left{

                h2{
                    width: 70%;
                }
            }
        }
      
    }
    
}

@media(max-width:767px){
  .service{
    .nos-projets-container{
      .grid-piscines {
        grid-template-columns: repeat(2, 1fr);
      }
    
      /* Adapter les positionnements si nécessaire */
      .img4{
        grid-row-start: span 2 / span 2;
      }

      .img5 {
        grid-column-start: auto;
        grid-row-start: auto;
      }
    
      .img6 {
        grid-column-start: auto;
        grid-row-start: span 2 / span 2;
      }
    }

    .intro-container{
      .intro-left{
        text-align: center;
          h2{
              width: 100%;
          }
      }
    }

    .section-name{
      text-align: center;
      display: flex;
      justify-content: center;
    }
  }         
}