* {
    font-family: "Outfit", sans-serif;
}

html,
body {
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    width: 100%;
}

:root {
    --primary-color: rgb(198, 4, 4);
    --secondary-color: #f9f9f9;
    --bodyColor: #f8f6f4;
    --boxColor: #eff0ef;
    --dark-brand-color: #202020;
}

.title2 {
    color: #404742;
    font-size: 45px;
    font-weight: bold;
    position: relative;
    text-transform: capitalize;
}

.heading .pretitle {
    text-transform: uppercase;
    font-weight: bold;
    font-size: 16px;
    color: var(--primary-color);
}

.box-service .box-icon i {
    color: var(--brand-color);
    font-size: 4rem;
}

.services .box-service a {
    display: flex;
    align-items: baseline;
    text-decoration: none;
}

.services .box-service a i {
    font-size: 18px;
    margin: 0 5px;
}





.box.box-hover::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    background-color: var(--primary-color);
    transition: transform 400ms ease-in-out;
    transform: scaleX(0);
    transform-origin: left;
    color: #f3f3f3;
    border-radius: 2rem;
}

.box.box-hover:hover:before,
.box.box-hover:focus:before {
    transform: scaleX(1);
}

.box.box-hover:hover,
.box.box-hover:focus,
.box.box-hover:hover a i,
.box.box-hover:hover .box-icon i,
.box.box-hover:hover>* {
    color: #f9f9f9;
}

.box.box-hover:hover>p {
    color: #def3de;
}

.home-rtl .box {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    text-align: end;
}

.box.box-hover:hover .btn{
    border: rgb(198, 4, 4);
    color: rgb(198, 4, 4);
    background-color: white;
}
.box.box-hover:hover .bi{
    color: rgb(198, 4, 4);
}
/* end main button style */