@font-face {
    src: url("../fonts/Bahij_TheSansArabic-Bold.ttf");
    font-family: "sans-serif";
}

body {
    background: #fff;
    color: #444;
    /* font-family: "Open Sans", sans-serif; */
}

a:active,
a:focus {
    outline: none;
    text-decoration: none;
}

p {
    padding: 0;
    margin: 0 0 30px 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
    margin: 0 0 20px 0;
    padding: 0;
}

h1 {
    color: #076755;
    font-weight: bold;
}


.intro {
    width: 100%;
    height: 650px;
    position: relative;
    background: url("../img/background.jpg") no-repeat;
    background-size: cover;
}

.nav-item {
    padding: 13px 7px;

}

.logo {
    width: 7%;
    margin-left: 4%;
    margin-top: -7%;
}

.intro h1 {

    font-size: 60px;
    font-weight: bold;
    color: #c82038;
}

.intro h2 {
    font-size: 45px;
    font-weight: bold;
}


ul li a:hover{
    color: #fff;
    background-color: #076755ad;
    border-radius: 5px;

}


.btn-intro {
    padding: 8px 49px;
    border: none;
    background-color: #076755;
    color: white;
    border-radius: 5px;
}

.btn-intro:hover{
    transform: scale(1.06) translateY(-5px);
    box-shadow: 3px 3px #02020236;
}
.section1 h1 {
    color: #076755;
    font-weight: bold;
    margin-top: 5%;
}

.section1 img {
    width: 37%;
    border-radius: 40px 3px 3px 40px;
}

.div1 h3 {
    width: 38%;
    margin-top: -24%;
    margin-right: 11%;
    text-align: justify;
    color: #126653;
    line-height: 50px;
}

.div1 ul {
    line-height: 55px;
    margin-right: 10%;
    margin-top: 3%;
    color: #076755;
}

.div1 ul li a {
    color: #076755;
}

.slider h1 {
    margin-top: 10%;
}

.carousel {
    width: 65%;
    margin: auto;
    margin-top: 6%;
    box-shadow: 1px 1px 10px 0px;
}

.carousel-control-next-icon {
    background-color: #00000045;
}

.carousel-control-prev-icon {
    background-color: #00000045;
}

.text-center {
    text-align: center !important;
}

.box {
    padding: 15px 50px 15px 50px;
    background: var(--bg-color);
    box-shadow: 0px 5px 40px rgb(19 8 73 / 13%);
    border-radius: 20px;
    transition: all .40s ease;
    width: 70%;
    margin-left: 10%;
}


.box-img img {
    width: 100%;
    height: auto;
    border-radius: 100%;
}

.box a {
    color: #50d8af;
    transition: 0.5s;
}


.row {
    justify-content: center;
    margin-top: 6%;
}

.box:hover {
    transform: scale(1.04) translateY(-5px);
    border: 1px solid #076755;
    box-shadow: 3px 3px #076755;
}

.memb h1 {
    margin-top: 6%;
}

.nav1 {
    background-color: white;
    box-shadow: 2px 1px 6px 0px #126653a3;
}

.body-founder {
    background-color: rgba(0, 128, 0, 0.05);
}

.rtl {
    direction: rtl;
} 

.img-founder {
    width: 30%;
    margin-left: 13%;
    margin-top: 4%;
}

.p1-founder {
    margin-top: -21%;
    width: 43%;
    font-size: 20px;
    color: #076755;
    margin-left: 45%;
    text-align: right;
}

.p2-founder {
    margin-top: 2%;
    margin-left: 21%;
    color: #076755;
}

.div2 .img-about {
    width: 33%;
    margin-left: 13%;
}

.div2 .p-about {
    margin-top: -24%;
    width: 40%;
    font-size: 20px;
    color: #076755;
    margin-left: 48%;
    text-align: justify;
    line-height: 35px;
}

.img-ser {
    width: 40%;
    box-shadow: 1px 0px 10px 0px #076755;
}

.div2 h1 {
    margin-top: 5%;
}

.div3 h1 {
    margin-top: 7%;
}

.div3 img {
    margin-left: 55%;
    margin-top: 5%;
}

.div3 p {
    margin-top: -20%;
    width: 38%;
    font-size: 20px;
    color: #076755;
    margin-left: 12%;
    text-align: justify;
    line-height: 35px;
}

.div4 img {
    width: 37%;
    margin-left: 11%;
}

.div4 h1 {
    margin-top: 16%;
}

.div4 p {
    margin-top: -24%;
    width: 40%;
    font-size: 20px;
    color: #076755;
    margin-left: 48%;
    text-align: justify;
    line-height: 35px;
}

.content h1 {
    margin-top: 6%;
}

.cont {
    text-align: center;
}

.fa-whatsapp:before {
    font-size: 40px;
    color: #076755;
}

.content a{
    text-decoration: none;
}

.content h3{
    margin-top: 16px;
    color: #076755;
    font-size: 24px;
}

.fa-phone:before {
    font-size: 40px;
    color: #076755;
}

.fa-location-dot:before, .fa-map-marker-alt:before {
    font-size: 40px;
    color: #076755;
}

.footer{
    background-color: rgba(174, 223, 174, 0.276);
    height: 60px;
}

.footer p{
    padding-top: 20px;
    color:#076755;
}
@media(max-width : 768px) {
    .pattern {
        width: 53%;
        margin-left: 8%;
        margin-top: 19%;
    }

    .logo {
        width: 13%;
        margin-left: 4%;
        margin-top: -77%;
    }

    .intro h1 {
        margin-top: 11%;
        font-size: 33px;
        font-weight: bold;
        color: #c82038;
        margin-left: 97px;
    }

    .intro h2 {
        font-size: 26px;
        font-weight: bold;
        margin-left: 122px;
    }

    .btn-intro {
        margin-left: 131px;
        margin-top: 33px;
        padding: 8px 10px;
        border: none;
        background-color: #076755;
        color: white;
        border-radius: 5px;
    }

    .section1 img {
        width: 65%;
        margin-left: 18%;
        border-radius: 5px 5px 5px 5px;
        margin-top: 3%;
    }

    .section1 h1 {
        margin-top: 9%;
    }

    .div1 h3 {
        width: 56%;
        margin-top: 7%;
        margin-right: 21%;
    }

    .box {
        margin-bottom: 4%;
    }

    .carousel {
        width: 77%;
        margin: auto;
        margin-top: 6%;
        margin-left: 12%;
    }

    .row {
        margin-left: 9%;
    }

    .img-founder {
        width: 76%;
        margin-top: 8%;
    }

    .p1-founder {
        margin-top: -1%;
        width: 58%;
        font-size: 20px;
        color: #076755;
        margin-left: 23%;
        text-align: justify;
        line-height: 40px;
    }

    .p2-founder {
        margin-top: 9%;
        margin-left: 31%;
    }


    .div2 .img-about {
        width: 64%;
        margin-left: 17%;
        margin-top: 6%;
    }


    .div2 .p-about {
        margin-top: 6%;
        width: 70%;
        margin-left: 16%;

    }

    .img-ser {
        width: 90%;
        box-shadow: 1px 0px 10px 0px #076755;
        margin-top: 26%;
    }

    .div3 img {
        width: 60%;
        margin-left: 21%;
    }

    .div3 p {
        margin-top: 14%;
        width: 65%;
        margin-left: 19%;

    }

    .div4 img {
        width: 79%;
    }

    .div4 p {
        margin-top: 3%;
        width: 64%;
        margin-left: 20%;

    }

    .content .row{
        display: block;
    }
}