*{
   
    font-family: 'El Messiri', sans-serif;
    
   
}
@media (min-width:2560px){
    .body{
        width:1024px ;
    }
}


.slide-one{
    width: 30px; 
    height:30px; 
    background: white;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 9999px;
    position: relative;
    right: 420px;
    bottom: 15px;
    padding-top: 5px;
}
.slide-one-2{
    border: 1.5px #004579 solid; 
    width: 425px; 
    position: relative;
}
.slide-one-3{
    border: 1.5px white solid; 
    width: 456px; 
    position: absolute;
}
.slide-two-3{
    border: 1.5px white solid; 
    width: 456px; 
    position: absolute;
}
.slide-two-2{
    border: 1.5px #004579 solid; 
    width: 420px; 
    position: relative;
}
.slide-two{
    width: 30px; 
    height:30px; 
    background: white;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 9999px;
    position: relative;
    right: 400px;
    bottom: 15px;
    padding-top: 5px;
}
.slide-three{
    width: 30px; 
    height:30px; 
    background: white;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 9999px;
    position: relative;
    right: 380px;
    bottom: 15px;
    padding-top: 5px;
}
.slide-three-2{
    border: 1.5px #004579 solid; 
    width: 385px; 
    position: relative;
}
.slide-three-3{
    border: 1.5px white solid; 
    width: 456px; 
    position: absolute;
}
.slide-four{
    width: 30px; 
    height:30px; 
    background: white;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 9999px;
    position: relative;
    right: 440px;
    bottom: 15px;
    padding-top: 5px;
}
.slide-four-2{
    border: 1.5px #004579 solid; 
    width: 448px; 
    position: relative;
}
.slide-four-3{
    border: 1.5px white solid; 
    width: 456px; 
    position: absolute;
}
@media(max-width:550px){
    .slide-three{
        
        right: 170px;
       
    }
    .slide-three-2{
        
        width: 200px !important; 
       
    }
    .slide-three-3{
       
        width: 270px !important; 
        
    }
    .slide-one{
        
        right: 220px;
       
    }
    .slide-one-2{
        
        width: 230px; 
       
    }
    .slide-one-3{
       
        width: 270px; 
        
    } 

    .slide-four{
        
        right: 235px;
       
    }
    .slide-four-2{
        
        width: 240px; 
       
    }
    .slide-four-3{
       
        width: 270px; 
        
    } 

    .slide-two{
        
        right: 200px;
       
    }
    .slide-two-2{
        
        width: 209px; 
       
    }
    .slide-two-3{
       
        width: 265px; 
        
    }
  



}


/* section one  */
.sec1_0{
    height: fit-content;
    background-repeat: no-repeat;
    background-size:cover;
    background-image:  linear-gradient(180deg , rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%), url(../images/Rectangle\ 177.svg);
}


.sec1{
    height: fit-content;
    background-repeat: no-repeat;
    background-size:cover;
    background-image:  linear-gradient(180deg , rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%), url(../images/Rectangle\ 177.svg);
}

.sec1copy{
    height: fit-content;
    background-repeat: no-repeat;
    background-size:cover;
    background-image:  linear-gradient(180deg , rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%), url(../images/Rectangle\ 177.svg);
}
.navbar ul li{
    position: relative;
    margin-left: 9px;
    margin-right: 9px;
   
}
.nav-link{
    color:white !important;
}

@media(max-width:1024px){
    .offcanvas-body{
        background-color:#004579;
    }
}



.navbar ul li::after{
    content:'';
    height: 3px;
    width: 0px;
    background: white;
    position: absolute;
    left: 0px;
    bottom: -10px;
    transition: 0.5s;

}
.navbar ul li:hover::after{
    width: 100%;


}


.btn:hover,.btn:active{
    transform: scale(1.1,1.1);
    transition-property: transform;
    transition-duration: 1ms;
}

.inner2{
    margin-top: 90px;
}

.float{
	position:fixed;
	width:60px;
	height:60px;
	bottom:40px;
	right:40px;
	background-color:#25d366;
	color:#FFF;
	border-radius:50px;
	text-align:center !important;
    font-size:30px;
	box-shadow: 2px 2px 3px #999;
    z-index:100;
}

.my-float{
	margin-top:16px;
    margin-left: 10px ;
}

.float2{
	position:fixed;
	width:60px;
	height:60px;
	bottom:130px;
	right:40px;
	background-color:#FFFFFF;
	color:#FFF;
	border-radius:50px;
	text-align:center;
    font-size:30px;
	box-shadow: 2px 2px 3px 2px #999;
    z-index:100;
}

.my-float2{
	margin-top:18px;
  
}

.inner3{
    
    background: #004579;
    margin-top: 90px;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 5px;
    height: 62px;
    width: 432px;
    display: flex;
    align-items: center;
    justify-content:space-around;
}
.parag1{
    font-size: 20px;
   
}
@media(max-width:498px){
    .inner3{
        height: 50px;
        width: 200px; 
    }
    .parag1{
        font-size: 14px;
       
    }
    .img_1{
        width: 20px;

    }

}


.inner4{
    background: rgba(0, 0, 0, 0.5);
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.25);
    height:fit-content;
    margin-top: 90px !important ;
}
.inner4-2{
    background-color: #004579;
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.25);
    height:fit-content;
    margin-top: 90px !important ;
}





.parag2{
    font-size: 14px !important;
}

@media(max-width:1024px){
    .parag2{
        font-size: 8px!important;
    }
    .img2{
        width:12px;
    }
   
}

/* end section one */


/* start section two */

.sec-2{
    margin-top: 90px;
}
.sec-2 p{
    font-size: 33px;
}

@media(max-width:1024px){
    .sec-2 p{
        font-size: 16px;
    }
}


/* end sec two */


.cards3{
    
    box-shadow: 0px 20px 40px rgba(53, 52, 52, 0.25);
    border-radius: 15px;
}
.sec4{
    background-color: #004579;
    width: 290px;
    height: 60px;
    border-radius:15px;
    margin-top: 50px;
    margin-bottom: 40px;
}
.sec5{
    font-weight: 700;
    font-size: 40px;
    line-height: 63px;
}

.cap0{
    position: relative;
}
.bottom {
    position: absolute;
    top: 83%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .cap1{
    position: relative;
}
.bottom1 {
    position: absolute;
    top: 83%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .cap2{
    position: relative;
}
.bottom2 {
    position: absolute;
    top: 83%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .cap3{
    position: relative;
}
.bottom3 {
    position: absolute;
    top: 83%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .cap4{
    position: relative;
}
.bottom4 {
    position: absolute;
    top: 83%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .cap5{
    position: relative;
}
.bottom5 {
    position: absolute;
    top: 83%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  @media(min-width: 425px){
    .nonn{
      display: none;
    }
    .notnonn{
      display: block;
    }
    .nonn2{
        display: none;
      }
      .notnonn2{
        display: block;
    }

     
}

@media(max-width: 425px){
      .notnonn{
        display: none;
      }
      .nonn{
        display: block;
        margin: 12px;
      }
      .notnonn2{
        display: none;
      }
      .nonn2{
        display: block;
        margin: 12px;
      }

}
.sec6{
    height:fit-content;
    /* background:url(../photo/Rectangle\ 178.svg) left  no-repeat ,
    url(../photo/Rectangle\ 194.svg) right  no-repeat; */
}
.inner5{
    background-image: linear-gradient(rgba(161, 158, 158, 0.75), rgba(77, 69, 69, 0.75)),url(../images/Rectangle\ 194.svg);
    background-repeat: no-repeat ;
    background-size: cover;
    text-align: justify;
}
.inner6{
    background-image: url(../images/Rectangle\ 178.svg); 
    background-size: cover;
    background-repeat: no-repeat ;
}


.parag3{
    font-size: 40px;
    margin-top: 50px;
    padding-right: 50px;
}
.parag4{
    font-size: 20px;
    padding: 70px;
    margin-bottom: 40px;

}
.button2{
    
    margin: 70px;
    background-color: #004579;
    
}
.parag-priv{
    font-size: 40px;
}
@media(max-width: 768px){
    
    .parag-priv{
        font-size: 30px;
    }
    .parag3{
        font-size: 18px;
    }
    .parag4{
        font-size:14px;
    }
}

@media(max-width: 390px){
    .parag3{
       
        margin-top: 50px;
        padding-right: 50px;
    }
    .parag4{
       
        padding: 40px;
        margin-bottom: 40px;
    
    }
    
}


.sec10{
    background-image: url(../images/Rectangle\ 229.svg);
    background-repeat: no-repeat;
    background-size: cover;
    height:600px;
    margin-top: 50px;
}
.inner7{
    background-color: rgba(0,0,0,.5); 
    width: 35%; 
    height: 100%;
}
@media(max-width: 592px){
    .parag-priv{
        font-size: 20px;
    }
    .inner7{
        width: 100%; 
    }
    
}
.parag5{
    font-size: 30px;
   
}
.parag6{
    font-size: 40px;
}
.artic{
    padding-top: 180px;
    padding-right: 80px;
}
.map-container {
    background-color: rgba(13,49,76,1);
}
.parag7{
    font-size: 36px;
}
.parag8{
    font-size: 20px;
}

@media(max-width:768px){
    .parag7{
        font-size: 20px;
    }
    .parag8{
        font-size: 13px;
    }
    .parag9{
        font-size: 10px;
    }
    .img3{
        width: 20px;
    }
    
}

.roww0{
    background-image:linear-gradient(rgba(0,0,0,.4), rgba(0,0,0,.4)),
    url(../images/Rectangle\ 212.svg);
    height: 400px;
    background-size: cover;
    background-repeat: no-repeat;
}
.roww1{
    background-image:linear-gradient(rgba(0,0,0,.4), rgba(0,0,0,.4)),
    url(../images/Rectangle\ 211.svg);
    height: 400px;
    background-size: cover;
    background-repeat: no-repeat;
}
.roww3{
    background-image:linear-gradient(rgba(0,0,0,.4), rgba(0,0,0,.4)),
    url(../images/Rectangle\ 213.svg);
    height: 400px;
    background-size: cover;
    background-repeat: no-repeat;

}
.roww4{
    background-image:linear-gradient(rgba(0,0,0,.4), rgba(0,0,0,.4)),
    url(../images/Rectangle\ 214.svg);
    height: 400px;
    background-size: cover;
    background-repeat: no-repeat;

}

.inner8{
    background: #FFFFFF;
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.25);
    border-radius: 10px;
    height: fit-content;
    vertical-align: middle;
   
}
.inner8 >button{
    
    background: #004579;
    box-shadow: 0px 4px 4px;
    border-radius: 8px;
    height: 45px;
}
.link2{
    font-size: 18px;
}

@media(max-width:768px){
    .link2{
        font-size: 10px;
    }   
}


.user-img {
    position: absolute;
    padding: 8px;
    width: 36px;
  }

[dir="rtl"] select {
    background-position: left 0.5rem center;
    padding-left: 2.5rem;
}

/* 
[dir="rtl"] .accordion-button {
    background-position: left 0.5rem center;
    padding-right: 20rem;
} */



.accordion-button{
    direction: rtl !important;
}
.logo{
    width: 80px;
}
.parag10{
    font-size: 16px;
}
.parag11{
    font-size: 20px ;
}
.img4{
    width: 25px;
}
.img5{
    width: 20px;
}
.fa-whatsapp{
    width: 18px;
}

@media(max-width:990px){
    .logo{
        width: 80px;
    }
    .parag10{
        font-size: 10px;
    }
    .parag11{
        font-size: 12px ;
    }
    .img4{
        width: 12px;
    }
    .fa-whatsapp{
        width: 12px;
    }
    .img5{
        width: 12px;
    }
     
}

@media(max-width:700px){
    .logo{
        width: 50px;
    }
    .parag10{
        font-size: 8px;
    }
    .parag11{
        font-size: 10px ;
    }
    .img4{
        width: 12px;
    }
    .fa-whatsapp{
        width: 8px;
    }
     
}

@media(max-width:550px){
    .logo{
        width: 80px;
        
    }
    .cont-img{
        display:flex;
        justify-content: center;
    }
    .parag10{
        font-size: 16px;
        text-align: center;
    }
    .parag11{
        font-size: 24px ;
        text-align: center;
    }
    .img4{
        width: 20px;
        margin-right: 5px;
        
    }
    .fa-whatsapp{
        width: 2px;
        margin-left: 12px;
    }
    .log-cont{
        text-align: center;
        padding-bottom: 9px;
    }
     
}


.button3{
    width: 20%;
}

@media(max-width:750px){
    
    .button3{
        width: 40%;
    }
     
}

.section-1{
    height:fit-content;
    background-image: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),url(../images/Rectangle\ 777.svg);
    background-repeat: no-repeat;
    background-size: cover;
}
.parag12{
    font-size: 32px;
}
.parag13{
    font-size: 20px;
}
.parag22{
    font-size: 20px;
}
.parag28{
    font-size: 20px;
}
@media(max-width:800px){
    .parag28{
        font-size:12px ;
    }
    .parag12{
        font-size: 20px;
    }
    .parag13{
        font-size: 12px;
    }
    .parag14{
       font-size: 12px;
    }
    .parag22{
        font-size: 10px;
    }
}

.artic2{
    background-color: #004579;
}

.button4{
    width: 50%;
}
.section-2{
    background-color: #004579;
}
.img5{
    width:12px ;
}
.form{
    border-radius:15px ;
    height: 90%;
    margin: 20px;

}

.img9{
    width: 23px;
}
.parag14{
    font-size: 24px;
}
.parag29{
    font-size: 12px;
}
.parag15{
    font-size: 16px;
}
.parag16{
    font-size: 16px;
}
.parag17{
    font-size: 14px;
}
.parag18{
    font-size: 40px;
}
.parag19{
    font-size:16px ;
}
.parag20{
    font-size:34px ;
}
.parag23{
    font-size:14px ;
}
.parag24{
    font-size:14px ;
}
.parag25{
    font-size:9px;
}
.parag26{
    position: absolute; 
    margin-top: -35px; 
    margin-right: 9px;
}
.parag27{
    font-size:10px ;
}
.img7{
    position: absolute; 
    margin-top: -25px; 
    margin-right: 9px;
}
.img8{
    position: absolute; 
    margin-top: -35px; 
    margin-right: 9px;
}
.img10{
    width:16px ;
}
.img12{
    width:12px ;
}
.img13{
    width:5px ;
}
.parag-1{
    font-size: 20px;
    text-align: justify;
    padding: 20px;
}

@media(max-width:800px){
    .img13{
        width:2px ;
    }
    .parag-1{
        font-size: 13px;
        text-align: justify;
    }
    .img12{
        width:5px ;
    }
    .img10{
        width:8px ;
    }
    .img9{
        width: 14px;
    }
    .img8{
        position: absolute; 
        margin-top: -30px; 
        margin-right: 9px;
    }
    .img7{
        position: absolute; 
        margin-top: -20px; 
        margin-right: 9px;
    }
    .parag29{
        font-size: 5px;
    }
    .parag27{
        font-size:7px ;
    }
    .parag26{
        position: absolute; 
        margin-top: -30px; 
        margin-right: 9px;
    }
    .parag25{
        font-size:3px;
    }
    .parag24{
        font-size:8px ;
    }
    .parag23{
        font-size:6px ;
    }

    .parag14{
       font-size: 12px;
    }
    .parag15{
        font-size: 12px;
    }
    .img6{
        width:12px ;
    }
    .parag16,
    .parag17{
        font-size: 10px;
    }
    .parag18{
        font-size: 20px;
    }
    .parag19{
        font-size:9px ;
    }
    .parag20{
        font-size:15px ;
    }
    

}

.nav-0{
    background-color:rgba(0, 0, 0, 0.25) ;
}
.section-3{
    background-image: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),url(../images/Rectangle\ 188.svg);
    background-size:cover;
    background-repeat:no-repeat ;
    height:fit-content ;
}
.inner9{
    background-image:linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)) , url(../images/Rectangle\ 1999.svg);
    background-repeat: no-repeat;
    background-size: cover;
}

.inner10{
    background: linear-gradient(to top,#ffffff 75%, transparent 5%); 
    margin-top: -35px;
}
.inner11{
    background: #FFFFFF;
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.25);
    border-radius: 10px;
    margin: 5px;
    height: fit-content;
}
.inner12{
    background: linear-gradient(to bottom , white 20% ,  #004579 20% ,  #004579 80% ,white 80%   );
    
}
.section-4{
    background-image: linear-gradient(to right , #004579 50% , #FFFFFF 50% );
    height: fit-content;
}
.cards2{
    background: #FFFFFF;
    box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.25);
    border-radius: 15px;
}

#more {
    display: none;
}


.grade,
.grade2,
.grade3,
.grade4{
    
    background: rgba(0, 69, 121, 0.05);
    border: 1px solid #004579;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 5px;
}
.inner13{
    background-image: url(../images/Rectangle\ 218.svg);
    background-size: cover;
    background-repeat: no-repeat;
}
.card-blog{
   
    height: 450px;
    
    overflow: hidden;
   
    border-radius: 20px;
    position: relative;
}
.img-card{
    width: 100%;
    height: 100%;
    overflow: hidden;
    object-fit: cover;
    border-radius: 15px;
}
.body-card{
    width: 100%;
    height: 100%;
    top: 0px;
    left:-100%;
    position: absolute;
    background: #1f3d4738;
    backdrop-filter: blur(5px);
    border-radius: 15px;
    padding: 30px !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: 2s;

    

}
.card-blog:hover .body-card{
    left: 0px;


}
.title-card{
     text-transform: uppercase;
    
     font-weight: 500;
     color: #FFFFFF;
}


.card-info{
    
     line-height: 25px;
     margin: 40px 0;
     font-weight: 300;
     color: #FFFFFF;
}
.card-btn{
    color: #004579;
    background-color: #8fabba;
    padding: 10px 20px ;
    border-radius: 5px;
    text-transform: capitalize;
    border: none;
    outline: none;
    font-weight:500 ;
    cursor: pointer;
}
.section2{
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.25);
    height:fit-content ;
    border-radius: 20px;
}

.img1{
    overflow: hidden;
    border-radius: 20px;
    padding: 20px;
}
.video-container{
    height: 500px;
}


.priv{
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url(../images/pexels-cottonbro-studio-4065876.jpg);
    height: 50vh;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}



