:root {
    --green-color:rgb(17, 77, 17);
    --green-two:#00a653;
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: 'Cairo', sans-serif;
    height: auto;
}



/* Start Header */
.container-fluid {
    position: relative;
    height: 300px;
}
.container-fluid .tx {
    margin-top: -200px;
    text-align: center;
    font: bolder 90px calibiri;
    background-image: linear-gradient(135deg,white  25%,rgb(20, 163, 20) 50% ,white 50%,white 75%,rgb(20, 163, 20) 75%);
    background-size: 50px 50px;
    animation: bganim 3s linear 3s infinite;
    -webkit-background-clip:text;
    -webkit-text-stroke: 1px #00a653;
    color: transparent;

}
@media (max-width: 1250px)  {
    .container-fluid .tx {
        font: bolder 60px calibiri;
      } 
}
@media (max-width: 1050px)  {
    .container-fluid .tx {
        font-size: 61px;
    margin-top: -216px;
    margin-right: -35px;
    } 
}
@media (max-width: 800px)  {
    .container-fluid .tx {
        font-size: 61px;
    margin-top: -224px;
    margin-right: -50px;
      } 
}
@media (max-width: 700px)  {
    .container-fluid .tx {
        font-size: 30px;
        margin-top: -275px;
        margin-right: 0px;
      } 
}
@media (max-width: 500px)  {
    .container-fluid .tx {
        font-size: 30px;
        margin-top: -275px;
        margin-right: 0px;
      } 
}
@keyframes bganim {
    to {background-position: 50px;}
}
.logo {
    width: 600px;
    height:300px;
    margin-right: -140px;
    top: -70px;
}

@media (max-width: 1000px)  {
    .logo {
        height: 300px;
    width: 439px;
    margin-top: -24px;
    margin-right: 386px;
       
      } 
}
@media (max-width: 950px)  {
    .logo {
        height: 300px;
        width: 350px;
        margin-left: -83px;
        margin-top: -21px;
    } 
}
@media (max-width: 850px)  {
    .logo {
        height: 300px;
        width: 329px;
        margin-left: -107px;
        margin-top: -21px;
    } 
}

@media (max-width: 800px)  {
    .logo {
        height: 300px;
        width: 350px;
        margin-left: -140px;
        margin-top: -21px
    } 
}
@media (max-width: 700px)  {
    .logo  {
        width: 270px;
        margin-top: 27px;
        height: 250px;
        margin-right: -190px;
        padding-bottom: 14px;
    } 
}
@media (max-width: 500px)  {
    .logo {
        margin-right: -170px;
      } 
}

.info-tel {
    background-color: var(--green-color);
    height: 50px;
    border-radius: 0px 0px 70px 0px;
    padding-right: 45px;
    position: relative;
}

.tel {
    position: absolute;
    color: rgb(201, 214, 25);
    height: 25px;
    margin-top: 10px; 
    margin-right: -5px;  
} 

.info-tel h4 {
    position: absolute;
    color: rgb(201, 214, 25) ;
    font-size: 18px;
    margin-top: 5px;
    margin-right: 30px;

}
@media (max-width: 700px)  {
    .info-tel h4  {
      margin-right: 35px;
    } 
}
@media (max-width: 500px)  {
    .info-tel h4  {
      
      margin-right: 8px;
    } 
}
.info-tel h2 {
    position: absolute;
    margin-top: -3px;
    margin-right: 100px;
    color: white;
    font-weight: bold;
}
@media (max-width: 1000px)  {
    .info-tel h2  {
      margin-right: 120px;
    } 
}
@media (max-width: 950px)  {
    .info-tel h2  {
      margin-right: 86px;
      font-size: 20px;
    } 
}
@media (max-width: 700px)  {
    .info-tel h2  {
      margin-right: 85px;
    } 
}
@media (max-width: 500px)  {
    .info-tel h2  {
      margin-top: -5px;
      margin-right: 80px;
    } 
}
.info-social {
    background-color: var(--green-two);
    height: 50px;
}
.info-social ul li{
    margin-top: -60px;
    
}
.info-social ul li .facebook , .twitter , .linkedin, .youtube{
    height: 27px;
}
.info-social ul li .youtube:hover
{
    background-color: rgb(197, 23, 23);
}
.info-social ul li .facebook:hover
{
    background-color: rgb(28, 19, 97);
}
.info-social ul li .linkedin:hover
{
    background-color: rgb(116, 22, 122);
}
.info-social ul li .twitter:hover
{
    background-color: rgb(58, 122, 205);
}

.kafil {
     left: 0;
     top: 50px;
     height: 180px;
     width: 250px;
}
@media (max-width: 1200px)  {
    .kafil  {
        left: 35px;
        top: 50px;
    } 
}

/* End Header */

/* Start Navbar */
.navbar {
    background-color: #00aa5b;
    margin-top: -80px;
}
@media (max-width: 991px)  {
    .navbar {
        margin-top: -34px;
    } 
}
@media (min-width: 991px)  {
    .navbar {
        display: flex;
        justify-content: center;
        text-align: center;
        margin-top: -34px;
    } 
}
.navbar .navbar-nav .nav-link {
    color: white;
    font-size: 16px;
    font-weight: bold;
    margin-right: 55px;
}
@media (max-width: 1200px) {
    .navbar .navbar-nav .nav-link  {
        font-size: 14px;
        margin-right: 16px;
    }
}


.navbar .navbar-nav .dropdown-menu {
    background-color: var(--green-two);
    margin-left: -25px;
    margin-top: 7px;
    
}
.navbar .navbar-nav .photo {
    background-color: var(--green-two);
    margin-left: 25px;
    margin-top: 7px;
    
}

@media (max-width: 991px) {
    .navbar .navbar-nav .dropdown-menu{
       margin-right: 15px;
       background-color: #1b7ed6;
       
      
    }
}
.navbar .navbar-nav .dropdown-menu .dropdown-item {
    color: white;
    font-size: 18px;
}
@media (max-width: 991px) {
    .navbar .navbar-nav .dropdown-menu .dropdown-item{
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        font-size: 15px;
        color: white;
    }
   
}
@media (max-width: 991px) {
   
    .navbar .navbar-nav .dropdown-menu li:hover {
        color: #d3c11b;
        cursor: pointer;
    }
}

.navbar .navbar-nav .dropdown-menu li a {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 15px;
    color: white;
}
.navbar .navbar-nav .dropdown-menu li a:hover{
    background-color:#2556a2;
    margin-right: 0px;
    color: white;
}
.navbar .navbar-nav .nav-link.active,
.navbar .navbar-nav .nav-link:focus,
.navbar .navbar-nav .nav-link:hover {
    color: #d3c11b;
}
.navbar .navbar-toggler {
    color: white;
    font-size: 25px;
    border-color:white ;
}
.navbar .navbar-toggler:focus {
    box-shadow: none;
}
.navbar .navbar-toggler[aria-expanded="true"] {
   border-color: var(--green-color);
}

/* End Navbar */
/*Start moves photo section 1 الصفحة الرئيسية */
.content {
    top: 0;
}
.content.active {
    display: block;
}
.content .heigh {
    height: 450px;
}
@media (max-width: 991px) {
    .carousel-control-prev,
    .carousel-control-next{
       display: none;
    }
}

.carousel-control-prev {
    
    background-color: rgba(66, 61, 61, 0.181);
    width: 100px;
   
}
.carousel-control-next {
    background-color: rgba(66, 61, 61, 0.181);
    width: 100px;
    
    
}

/*End moves photo section 1 الصفحة الرئيسية */
/* Start section 02 الصفحة الرىيسية */
.com-2 {
    background: #eff7fa;
    height: auto;
}
.com-2 h4 {
    background-color: var(--green-two);
}



@media (min-width: 1200px) {
    .com-2 h4 {
        margin-top: 50px;
    }
}
@media (max-width: 1000px) {
    .com-2 h4 {
        font-size: 15px;
    }
}
@media (max-width: 1000px) {
    .com-2 h5 {
        font-size: 14px;
    }
}

/* End section 02 الصفحة الرىيسية */

/* Start section 03 الصفحة الرىيسية */
@media (max-width: 1000px) {
    .com-3 h4 {
        font-size: 17px;
    }
}
.com-3 .proba {
    background-color: #f3f6f9;
}
.com-3 .proba h4 {
    color: white;
}
@media (max-width: 991px) {
    .com-3 .proba  {
       height: auto;
    }
}
.com-3 .proba .stat {
    display:flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    margin: 5px;
    padding: 7px;
    margin-right: 70px;
    background-color: rgb(35, 171, 96);
    border-radius: 50%;
    box-shadow: 0px 15px 20px rgb(0,0,0,0.2);
}
@media (max-width: 991px) {
    .com-3 .proba .stat  {
     margin: auto;
     margin-top: 20px;
     width: 40%;
     border-radius: 45%;
     
    }
}
.com-3 .proba .stat .num {
    font-size: 30px;
}
@media (max-width: 991px) {
    .com-3 .proba .stat .num {
       font-size: 25px;
     
    }
}

.com-3 .proba .stat p {
    font-size: 18px;
    font-weight: bold;
    
}
@media (max-width: 991px) {
    .com-3 .proba .stat p  {
       font-size: 11px;
     
    }
}

.com-3 .proba .stat .fa-children,.fa-seedling,.fa-hands-holding-circle {
    font-size: 25px;
    padding: 15px 0px; 
}
@media (max-width: 991px) {
    .com-3 .proba .stat .fa-children,.fa-seedling,.fa-hands-holding-circle {
       font-size: 18px;
     
    }
}


/* End section 03 الصفحة الرىيسية */

/* Start section 04 الصفحة الرىيسية */
@media (max-width: 991px) {
    .com4 h4 {
      font-size: 17px;
     
    }
}
@media (max-width: 991px) {
    .com4 .container {
      margin-top: -350px;
    }
}
.com4 .he {
    height: 280px;
}
.com4 {
    margin-top: -60px;
}

@media (max-width: 991px) {
    .com4  {
      margin-top: 370px;
    }
}
.com4 .card {
    height: 710px;
    
}
@media (max-width: 991px) {
    .com4 .card {
       height: auto;
    }
}
.com4 .card h5 {
    padding: 15px;
    width: 100%;
    color: white;
    background-color: var(--green-two);
    font-size: 16px;
    font-weight: bolder;
}
@media (max-width: 991px) {
    .com4 .card h5 {
       font-size: 17px;
    }
}

.com4 .card p {
    line-height: 30px;
}
@media (max-width: 991px) {
    .com4 .card p {
       font-size: 15px;
       
    }
}

/* End section 04 الصفحة الرىيسية */

/* Start section 05 الصفحة الرىيسية */

@media (min-width: 991px) {
    .mapBox  {
        height: 500px;
        margin-top: -90px;
        
    }
}
  
/* End section 05 الصفحة الرىيسية */


/* Start footer */
.footer {
    height: 580px;
}
@media (min-width: 991px) {
    .footer  {
       margin-top: -200px;
    }
}

.footer .fo p {
    padding-top: 10px;
}
.footer .link h5 {
    padding-top: 15px;
    font-size: 18px;
}
.footer .link a {
    text-decoration: none;
    color: #eff7fa;
}
.footer .link a:hover {
    
    color: #00a653;
}

.footer .contact ul {
    margin-left: 120px;
}


.footer .contact .fa-envelope ,.fa-skype {
    width: 25px;
    height: 25px;
    
} 
.footer .contact ul svg {
    width: 20px;
    height: 20px;
}


.footer .facebook {
    background-color: #1877f2;
    height: 25px;
}
.footer .twitter {
    background-color: #1da1f2;

}
.footer .instagram {
    background-color: #0077b5;
}
.footer .youtube {
    background-color: #ff0000;
}
.footer .facebook:hover,.footer .twitter:hover,.footer .instagram:hover,.footer .youtube{
        
        transition: all 0.3s linear;
    
}
.footer .facebook:hover,.footer .twitter:hover,.footer .instagram:hover,.footer .youtube:hover{
    transform: scale(1.3);
}
.fo-tel p {
    font-size: 16px;
}

.fo-tel {
    height: 1300px;
    background-color: black;
    margin-top: 370px;
} 
.fo-tel .facebook{
    background-color: #1877f2;
    height: 25px;
}
.fo-tel .twitter{
    background-color: #1da1f2;
}
.fo-tel .instagram{
    background-color: #0077b5;
}
.fo-tel .youtube{
    background-color: #ff0000;
}
.fo-tel .link a {
    text-decoration: none;
    color: #eff7fa;
}
.fo-tel .link a:hover {
    
    color: #00a653;
}

.fo-tel .facebook:hover,.fo-tel .twitter:hover,.fo-tel .instagram:hover,.fo-tel .youtube{
        
    transition: all 0.3s linear;

}
.fo-tel .facebook:hover,.fo-tel .twitter:hover,.fo-tel .instagram:hover,.fo-tel .youtube:hover{
transform: scale(1.3);
}

.fin h4 {
   background-color: #00aa5b;    
}

@media (max-width: 1000px) {
    .fin h4 {
        
        font-size: 15px;
        
    }
}
/* End footer */
.to-top {
    background: rgb(56, 50, 50);
    position: fixed;
    bottom: 16px;
    left: 30px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: var(--green-two);
    text-decoration: none;
    opacity: 0;
    pointer-events: none;
    transition: all .4s;
}
@media (max-width: 1200px) {
    .to-top  {
        display: none;
    }
}
.to-top.active {
    bottom: 32px;
    pointer-events: auto;
    opacity: 1;
}

/* Start page defintion */
.def .kafil-def  {
  background-color: #00aa5b;
  border-radius: 10px;
} 
.def  .content {
    border :1px solid gray;
    border-radius:5px;
    margin-bottom: 20px;
}
.def  .content img {
    border-radius: 250px;
    height: 200px;
    margin-top: 70px;
}



/* End page defintion */

/*  Start Contact*/
.def .content .fa-envelope,.fa-skype,.fa-phone {
    height: 25px;
    color: #00a653;
}
.def .content spa {
    font-size: 18px;
}
@media (max-width: 991px) {
    .def .content .bank  {
        font-size: 12px;
    }
}

/*End Contact*/
.def .content .con {
    background-color: #6890cd;
    padding: 20px;
    margin: 10px;
    margin: auto;
    height: 250px;
}
@media (max-width: 991px) {
    .def .content .con {
        margin-bottom: 10px;
        width: 80%;
        height: auto;
    }
}

.def .content .con h2 {
    color: white;
}
.def .content .con p {
    color: white;
    font-size: 18px;
    line-height: 35px;
}


/* start but */
.def-1 h4 {
    background: #00aa5b;
    color: white;
    margin-top: 10px;
}
.def-1 .but {
    color: white;
    font-size: 20px;
    background-color: #6890cd;
}
@media (max-width: 991px) {
    .def-1 .but {
        font-size: 18px;
    }
}



/* fin but */



.def .tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
  }
  
  
  /* Style the buttons inside the tab */
  .def .tab button {
    background-color: inherit;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 17px;
  }
  
  /* Change background color of buttons on hover */
  .def .tab button:hover {
    background-color: #ddd;
  }
  
  /* Create an active/current tablink class */
  .def .tab button.active {
    background-color: #ccc;
  }
  
  /* Style the tab content */
  .def .tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
    margin-bottom: 40px;
  }
  .def .tabcontent p {
    font-size: 20px;
}
  @media (max-width: 991px) {
    .def .tabcontent p {
        font-size: 20px;
        line-height: 150%;
    }
}