@font-face {
    font-family: tajawal;
    src: url(../fonts/Tajawal-Regular.ttf);
  }
  @font-face {
    font-family: tajawal-bold;
    src: url(../fonts/Tajawal-Bold.ttf);
  }
body{
    direction: rtl;
    font-family: tajawal;
    min-height: 100vh;
}
a{
    text-decoration: none;
}
.text-justify{
    text-align: justify;
}

/* Start Header Style */
.logo1-style{
    height: 100%;
    width: auto;
}
.logo2-style{
    height: 100%;
    width: auto;
}
.custom-header-style, .custom-links-icon{
    background-color: #293a50;
    color: rgba(255,255,255,.9) !important;
}
.logo-sec{
    font-size: .8125rem;
    border-bottom:1px solid rgba(255,255,255,.1);
    height: 8em;
}
/* .custom-header-style .navbar{
    width: 95%;
}
.custom-links-icon{
    width: 5%;
    align-self: center;
} */
.custom-header-style  .navbar-nav .nav-link{
    color: rgba(255,255,255,.9);
    font-size: .8125rem;
    padding: 0.875rem 1rem;
}

.custom-header-style  .navbar-nav .nav-link:hover{
    color: #fff;
    background-color: rgba(0,0,0,.15);
}

/* End Header Style */

/* Start  Main Section Style */
.right-side-sec{
    background: #eaecee;
    border-bottom-left-radius: 100%;
    color: #eaecee;
    position: relative;

}
.flag-img{
    position: absolute;
    bottom: 3.5rem;
    left: 3.5rem;
    height: 7rem;
    width: 7rem;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 7%;
}
.right-side-details{
    flex-direction: column;
}
.right-side-details a{
    font-family: tajawal-bold;
    margin-left: 5%;
}
.right-side-details h4{
    color: #293a50;
    font-size: 1.5rem;
}
.right-side-details h3{
    color: #009933;
    font-size: 2rem;
}
.right-side-details .touch-img{
    width: 6rem;
    padding-bottom: 20%;
    opacity: 0.1;
    transform: rotate(-5deg);
    /* padding-right: 5%; */
    /* margin: 0 auto; */
    margin-left: 5%;
}

.help-icon{
    position: absolute;
    top: 5px;
    left: 5px;
}
.help-icon span{
    font-weight: normal;
}
.help-icon span.badge.rounded-pill.bg-secondary {
    background-color: #009933 !important;
}
.help-icon:hover span.badge.rounded-pill.bg-secondary {
    background-color: #6c757d !important;
}
.right-img-style{
    min-height: 96%;
    object-fit: cover;
    max-width: unset;
}
.main-icons-style {
    border-radius: 10px;
    text-decoration: none;
    height: 100%;
    color: #333;
    box-sizing: border-box;
    font-weight: bold !important;
}
.green-background {
    background-color: #ebf5ed;
}

.gray-background {
    background-color: #f1f2f4;
}
.light-gray-background {
    background-color: #ebf4f3;
}
.custom-main-img-style {
    height: 4em;
}
.main-icons-style h3{
    font-size: 1.5rem;
}
.sub-icon-style h4 a{
    font-size: 1.25rem;
}
.main-icons-style h3, .sub-icon-style h4 a {
    font-weight: bold !important;
    color:#314056;
}

.main-icons-style:hover, .sub-icon-style h4:hover {
    box-shadow: 0px 0px 16px 0px #c9c9c9;
    -webkit-box-shadow: 0px 0px 16px 0px #c9c9c9;
    -moz-box-shadow: 0px 0px 16px 0px #c9c9c9;
}

.main-icons-style:hover h3, .sub-icon-style h4 a:hover {
    font-weight: bold !important;
    color: #009933;
}
.sub-icon-style h4{
    background-color: #efefef;
}
.sub-icon-style img{
    width: 3.5em;
    align-self: center;
    max-height: 2.6em;
}

.app-icon-style{
    box-shadow: 0px 0px 16px 0px #c9c9c9;
    -webkit-box-shadow: 0px 0px 16px 0px #c9c9c9;
    -moz-box-shadow: 0px 0px 16px 0px #c9c9c9;
    border: 1px solid #eeeeee;
    border-radius: 10px;
}
/* End Main Section Style */

/* Start Footer Section */
.custom-footer{
    text-align: center;
    box-shadow: 0px 0px 16px 0px #c9c9c9;
    -webkit-box-shadow: 0px 0px 16px 0px #c9c9c9;
    -moz-box-shadow: 0px 0px 16px 0px #c9c9c9;
    background: #eaebee;
    font-size: 0.9rem;
}
/* End Footer Section */
/* Start Off Canvas Style */
.custom-offcanvas-style{
    background-color: #eaebee;
    border: unset;
}
.custom-offcanvas-style .offcanvas-header{
    border-bottom:1px solid #c9c9c9;
}
.custom-offcanvas-style .nav-link{
    font-weight: bold;
    color: #293a50;
}
.custom-offcanvas-style .nav-item:hover{
    background-color: #c9c9c9;
}
.custom-offcanvas-style .nav-link i{
    color: #009933;
    background: #ebf4f3;
    padding: 5px;
    margin-left: 0.5em;
    border-radius: 3px;
}
ul.nav.flex-column li {
    border-bottom: 1px solid #d9d9d9;
    padding: 0.5em 0;
}
.custom-offcanvas-style  .offcanvas-title{
    font-weight: bold;
    color: #293a50;
}
/* End Off Canvas Style */

/* Start Adds Section */
.adds-section{
    border-radius: 15px;
}
.adds-section a{
    letter-spacing: 3px;
    word-wrap: break-word;
}
.adds-section:nth-child(1){
    border: 1px solid #F7941D;
    background: #fff;
}
.adds-section p{
    font-size: 1.15rem;
    font-family: tajawal-bold;
}
.adds-section:nth-child(1) p{
    color: #227FA2;
}
.adds-section:nth-child(1) h4{
    color:#F7941D;
}
.adds-section:nth-child(1) a{
    background-color: #227FA2;
    color:#fff;
}
.adds-section:nth-child(2){
    border: 1px solid #efefef;
    background-color: #efefef;
}

.adds-section:nth-child(2) p{
    color: #009933;
}
.adds-section:nth-child(2) h4{
    color:#F7941D;
}
.adds-section:nth-child(2) a{
    background-color: #009933;
    color:#fff;
}
.adds-section:nth-child(3){
    border: 1px solid #293a50;
    background-color: #293a50;
}

.adds-section:nth-child(3) p{
    color: #efefef;
}
.adds-section:nth-child(3) h4{
    color:#F7941D;
}
.adds-section:nth-child(3) a{
    background-color: #009933;
    color:#fff;
}
.custom-slider .carousel-indicators{
    margin-bottom: -1.5rem;
}
.custom-slider .carousel-indicators [data-bs-target]{
    background-color: #293a50;
}
/* End Adds Section */
/* Start Inner Pages Style */

.inner-page-title:after, .inner-page-title:before {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 4px;
    content: "";
    right: 0;
    margin: auto;
    background-color: #d9d9d9;
  }
  .inner-page-title:after { 
    background-color: #009933;
    left: auto;
    width: 50%;
  }
/* main.inner-page,.offcanvas-body{
    background-image: url(../img/image.png);
    background-repeat: no-repeat;
    background-position: bottom left;
} */
/* main.inner-page{
    background-size: 30%;

} */
.inner-page{
    line-height: 1.75;
}
.inner-page ul li, .inner-page ol li{
    text-align: justify;
}
.inner-page .right-side-details{
    height: 80vh;
}
/* .offcanvas-body{
    background-size: 80%;
} */
/* End Inner Pages Style */

/* Start Media Query */
@media (max-width: 767.98px) { 
    .logo1-style{
        width: 100%;
        height: auto;
    }
    .logo2-style{
        width: 18%;
        height: auto;
    }
    .logo-sec{
        font-size: .5125rem;
    }
    .custom-header-style  .navbar-nav{
        border-top:1px solid rgba(255,255,255,.1);
    
    }
    .logo-sec{
        height: auto;
    }
    .custom-offcanvas-style .offcanvas-body{
        padding: 1rem 0.5rem;
    }
    /* main.inner-page{
    background-image: unset;
    } */
 }
 @media (max-width: 991.98px){
    .navbar.custom-header-style{
        width: 85%;
    }
    .custom-links-icon{
        width: 15%;
    }
    .mobile-header-sec {
        background-color: #f9f9f9;
        box-shadow: 0px 6px 16px 0px #c3c3c3;
        -webkit-box-shadow: 0px 6px 16px 0px #c3c3c3;
        -moz-box-shadow: 0px 6px 16px 0px #c3c3c3;
        border-bottom-right-radius: 10px;
        border-bottom-left-radius: 10px;
    }
    .mobile-header-sec h2 {
        color: #78767c;
        margin: 0;
        font-weight: bold;
        font-size: 1.4375rem;
    }
    .mobile-header-sec p {
        color: #009933;
        font-weight: bold;
        font-size: 20px;
        margin: 0;
    }
 }

 @media (max-width: 1199.98px) { 
    .sub-icon-style h4 a{
        font-size: 1rem;
    }
    .main-icons-style h3 {
        font-size: 1.25rem;
    }

  }
  @media (min-width: 1200px) and (max-width: 1399.98px) {
    .right-side-details h4 {
        font-size: 2rem;
    }
    .right-side-details h3 {
        font-size: 2.5rem;
    }
  }
  @media (min-width: 1400px) { 
    /* main.inner-page {
        background-size: 20%;
    } */
    .flag-img {
        bottom: 15%;
        left: 15%;
    }
   }
   @media (min-width: 922px) and (max-width: 1199.98px) {
    .custom-header-style .navbar-nav .nav-link{
        padding: 0.875rem 0.5rem;
    }
 
    }

/* End Media Query */