@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@100..900&display=swap');


* {
    margin: 0;
    padding: 0;
}
.containerCA{
    height: 100vh;
    width: 100%;
    text-align: center;
}
.hero{
    background-image:url("../media/hero-mobile.png") ;
    background-size: cover;
    height: 137px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.hero h1{
    justify-self: center;
    color:#FFFFFF;
    font-family: "Heebo" ,sans-serif;
}
.card1{
    height: 148px;
    width: 157px;
    overflow: hidden;
    overflow-y: hidden;
    background: url("../media/Categories/1.png");
    text-decoration: none;
    border-radius: 27%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.card1 h2{
    color:#FFFFFF;
    font-family:"Heebo",sans-serif;
}
.card1:active{
    transform: scale(1.2);
    box-shadow: 0 4px 16px rgba(59, 157, 113, 0.2);
}
.card2{
    height: 148px;
    width: 157px;
    overflow: hidden;
    overflow-y: hidden;
    background: url("../media/Categories/2DT.png");
    border-radius: 27%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.card2 h2{
    color:#FFFFFF;
    font-family:"Heebo",sans-serif;
    font-weight: bold;
}

.card3{
    height: 148px;
    width: 157px;
    overflow: hidden;
    overflow-y: hidden;
    background: url("../media/Categories/3.png");
    border-radius: 27%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.card3 h2{
    color:#FFFFFF;
    font-family:"Heebo",sans-serif;
}
.card4{
    height: 148px;
    width: 157px;
    overflow: hidden;
    overflow-y: hidden;
    background: url("../media/Categories/4.png");
    border-radius: 27%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.card4 h2{
    color:#FFFFFF;
    font-family:"Heebo",sans-serif;
}
.gridCA{
    margin-top:10%;
    display: grid;
    grid-template-rows: auto auto;
    grid-template-columns: auto auto;
    justify-items: center;
    justify-content: space-evenly;
    row-gap:10%;
}
.button-container-CA{
    display: none;
}
.header-dt{
    display: none;
}
.footer-dt{
 display: none;
}
@media(min-width:1024px){
    
    .hero{
    background: url("../media/hero-blue.png");
    }
    .hero h1{
        font-size: 3rem;
    }
    .card1{
      width: 300px;
      height: 300px;
      background: url("../media/Categories/1DT.jpg");
      background-repeat: no-repeat;
      background-size: cover;
    }
    .card1 h2{
        font-size:2rem;
    }
    .card2{
      width: 300px;
      height: 300px;
      background: url("../media/Categories/2DT.png");
      background-repeat: no-repeat;
      background-size: cover;
    }
     .card2 h2{
        font-size:2rem;
    }
    .card3{
      width: 300px;
      height: 300px;
      background: url("../media/Categories/3DT.png");
      background-repeat: no-repeat;
      background-size: cover;
    }
     .card3 h2{
        font-size:2rem;
    }
    .card4{
      width: 300px;
      height: 300px;
      background: url("../media/Categories/4DT.png");
      background-repeat: no-repeat;
      background-size: cover;
    }
     .card4 h2{
        font-size:2rem;
    }
    .gridCA{
        margin-top:5%;
        grid-template-rows: auto auto auto auto;
        grid-template-columns:auto auto auto auto ;
    }
    .card1:hover{
        box-shadow: 0 10px 20px rgb(2, 2, 2);
        transform: scale(1.1);
    }
    .card2:hover{
        box-shadow: 0 10px 20px rgb(2, 2, 2);
        transform: scale(1.1);
    }
    .card3:hover{
        box-shadow: 0 10px 20px rgb(2, 2, 2);
        transform: scale(1.1);
    }
    .card4:hover{
        box-shadow: 0 10px 20px rgb(2, 2, 2);
        transform: scale(1.1);
    }
    .button-container-CA{
    margin-top: 30px;
    display: flex;
    justify-content: center;
    }
   .bouton-CA{
    display: inline-block;
    padding: 15px 30px;
    background-color: #525B44;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-size: 18px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    }
    .bouton-CA:hover {
    background-color: #000001;
    transform: translateY(-2px);
   }
   .header-MO{
    display: none;
   }
   .footer-mo{
    display: none;
   }
}