@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200;300;400;500;600&family=Domine:wght@400;500;600;700&family=Josefin+Sans:wght@100;200;300;400;500;600;700&family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
*{
    font-family: 'Cairo', sans-serif;
}body {
   

    background-color: rgba(246, 246, 246, 0.7);  
}
.box-area{
    width: 930px;
}
.right-box{
    padding: 40px 30px 40px 40px;
}
::placeholder{
    font-size: 16px;
}

@media only screen and(max-width:768px){
    .box-area{
        margin: 0 10px;
    }
    .left-box{
        height: 100px;
        overflow: hidden;
    }
    .right-box{
        padding: 20px;
    }
}
@media only screen and(max-width:412px){
    .box-area{
        margin: 0 10px;
    }
    .left-box{
        height: 100px;
        overflow: hidden;
    }
    .right-box{
        padding: 20px;
    }
}
.slider .carousel-item{
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
     background-size: cover;
 }
 .bg-img-1{
    background-image: url('../image/1.jpg');
}
.bg-img-2{
    background-image: url('../image/2.jpg');
}
.bg-img-3{
    background-image: url('../image/3.jpg');
}
.carousel-image{
    height: 100vh;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.myic{
    color: rgb(118, 168, 51) !important;
    font-size:30px ;
}
.carousel-caption{
    background-color: rgb(118, 168, 51, 0.09) ;
    border-radius: 20px;
    bottom: 8rem;
    padding: 50px !important;
}
.carousel-caption:hover{
    background-color: rgb(152, 69, 18,0.7);
transition: ease .7s;
}
.carousel-indicators button{
   
   
    background-color:#984512 !important;
 }
 .carousel-indicators button:hover{
 
    background-color:#984512 !important;
 
 }
 .carousel-caption h2{
  margin-bottom: 20px !important;
  font-size: 45px;
 }
 .carousel-caption p{
    font-size: 20px;

 }
 .myic{
    color: #984512 !important;
    font-size:30px ;
}
.side-section {
    

    
}
.side-section .card{
    margin: 10px;
   
}
.side-section .card .card-body {
    align-items: center !important;
}
.cards{
  
}
.card {
    size: 30px;
    margin-top: 20px;

}

.ic {
    font-size: 30px;
    color: #984512;
    padding-top:7px;
   
}


.box {
    opacity: 0;
    transition: opacity 0.5s;
}

.box.active {
    opacity: 1;
}
.cards-warrper{
    display: flex;
}
.card{
    margin: 0.5rem;
    width: calc(100%/1);
}