body{

font-family:cairo;

background:#f6f8ff;

}

.header{

background:white;

padding:10px;

}

.logo{

color:#4e73ff;

}

.hero{

position:relative;

}

.hero img{

width:100%;

height:500px;

object-fit:cover;

}

.heroText{

position:absolute;

top:50%;

right:10%;

color:white;

}

.sectionTitle{

text-align:center;

margin:40px;

}

.serviceCard{

background:white;

padding:20px;

text-align:center;

border-radius:10px;

box-shadow:0 5px 20px rgba(0,0,0,.1);

transition:.3s;

}

.serviceCard:hover{

transform:translateY(-10px);

}

.filterButtons{

text-align:center;

margin:30px;

}

.filterButtons button{

margin:5px;

border:none;

background:#4e73ff;

color:white;

padding:10px;

border-radius:5px;

}

.product{

width:100%;

border-radius:10px;

margin:10px;

cursor:pointer;

}

.about{

background:white;

padding:50px;

margin-top:50px;

}

.contactForm{

max-width:500px;

margin:auto;

}

.contactForm input,
.contactForm textarea{

width:100%;

margin:10px;

padding:10px;

}

.whatsapp{

position:fixed;

bottom:20px;

right:20px;

background:#25D366;

color:white;

padding:15px;

border-radius:50%;

font-size:25px;

}

#top{

position:fixed;

bottom:20px;

left:20px;

background:#4e73ff;

color:white;

border:none;

padding:10px;

display:none;

}