@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700&display=swap');



.auto-container {

    position: static;

    max-width: 1200px;

    padding: 0px 15px;

    margin: 0 auto;

}



.btn-one {

    position: relative;

    display: inline-block;

    border-radius: 30px;

    padding: 0 35px;

    color: #FFFFFF;

    font-size: 16px;

    line-height: 60px;

    font-weight: 600;

    text-transform: capitalize;

    font-family: 'Almarai', serif;

    transition: all 0.3s ease-in-out 0.1s;

}

.btn-one:before{

	position: absolute;

    content: '';

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: 1;

    opacity: 0;

    border-radius: 30px;

    background-color: #f3f3f3;

    -webkit-transition: all 0.4s;

    -moz-transition: all 0.4s;

    -o-transition: all 0.4s;

    transition: all 0.4s;

    -webkit-transform: scale(0.5, 1);

    transform: scale(0.5, 1);

}

.btn-one:hover::before{

    opacity: 1;

    -webkit-transform: scale(1, 1);

    transform: scale(1, 1);

}

.btn-one .txt{

    position: relative;

    z-index: 1;

}



.btn-one:hover,

.btn-one:focus{

    color: #000000;

}



/*** 

=====================================================

	Main Slider style

=====================================================

***/

.main-slider {
    position: relative;
    overflow: hidden;
    z-index: 10;
	border-bottom:solid 5px #045184;
}

.main-slider.style1 {

    margin-top: 0px;

}

.main-slider .slide{

	position: relative;

	padding: 100px 0 270px 0;

	background-size: cover;

	background-repeat: no-repeat;

	background-position: center center;

}

.main-slider.one_page .slide{

	padding: 354px 0px 250px;    

}

.main-slider .slide .image-layer{

	position:absolute;

	left:0;

	top:0;

	width:100%;

	height:100%;

	background-repeat: no-repeat;

	background-position: center;

	background-size: cover;

	-webkit-transform:scale(1);

	-ms-transform:scale(1);

	transform:scale(1);

	-webkit-transition: all 6000ms linear;

	-moz-transition: all 6000ms linear;

	-ms-transition: all 6000ms linear;

	-o-transition: all 6000ms linear;

	transition: all 6000ms linear; 

}

.main-slider .slide .image-layer:before{

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    content: "";

    z-index: -1;

}

.main-slider .active .slide .image-layer{

	-webkit-transform:scale(1.1);

	-ms-transform:scale(1.1);

	transform:scale(1.1);

}

.main-slider .content{

	position:relative;

	z-index:10;

}





.main-slider .content h4{

    position: relative;

    color: #ffffff;

	font-family: 'Almarai', serif;

	font-size:60px;

    margin: 0;

	opacity: 0;

	transition: all 1000ms ease;

	transform: translateY(80px);

	text-align:center;

	text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.6); 

}

.main-slider .active .content h4{

	opacity: 1;

	transform: translateX(0);

	transition-delay: 2000ms;    

}

.main-slider .content .border-box{

    position: relative;

    display: inline-block;

    width: 0px;

    height: 3px;

    background: #ffffff;

    transition: all 1000ms ease;

}

.main-slider .active .content .border-box{

    width: 110px;

    transition-delay: 1500ms;    

}

.main-slider .content {

	position: relative;

	transition: all 1000ms ease;

	transform: translateY(80px);

	background-color:rgba(4, 81, 132, 0.7);
	padding:10px 20px;
	margin:100px 0 0 0;
	direction:rtl;
	float:right;
	}



.slide_title{

	font-family:'Almarai', san-serif;

	color:#87caf0;

	font-size:40px;

	}

	

.slide_title span{

	color:#fff;

	font-size:25px;

	}

	

.slide_button{

	border:none;

	background:#87caf0;

	border-radius:40px;

	-webkit-border-radius:40px;

	-moz-border-radius:40px;

	padding:10px 30px;

	color:#fff;

	font-family:'Almarai', san-serif;

	font-size:18px;

	font-weight:400;

	}

	

.slide_button:hover{

	background:#fff;

	color:#87caf0;

	}

	

.slide_button:focus{

	outline:none;

	}

	

.slide_text{

	font-family:'Almarai', san-serif;
	color:#fff;
	font-weight:bold;
	font-size:17px;
	text-align:justify;
	}

	

.main-slider .active .content h2{

	opacity: 1;

	transform: translateX(0);

	transition-delay: 2000ms;

}

.main-slider .content .btns-box{

    position: relative;

	opacity: 0;

	transition: all 1000ms ease;

	transform: translateY(80px);

}

.main-slider .active .content .btns-box{

	opacity: 1;

	transform: translateX(0);

	transition-delay: 2500ms;

}



.main-slider .owl-theme .owl-nav {

    position: absolute;

    top: 50%;

    left: 0;

    right: 0;

    margin: 0 auto;

    width: 100%;

}

.main-slider .owl-theme .owl-prev span, 

.main-slider .owl-theme .owl-next span{

    display: block;

}

.main-slider .owl-theme .owl-nav .owl-prev {

    position: absolute;

    left: 30px;

    top: 0;

    background: rgba(4,81,132,0.65);

    height: 50px;

    width: 50px;

    border-radius: 0%;

    border: none;

    text-align: center;

    color: #fff;

    font-size: 30px;

    line-height: 50px;

    font-weight: 700;

    opacity: 1;

    margin: 0;

    padding: 0;

    margin-top: -30px;
	
	border-radius:45px;
	-moz-border-radius:45px;
	-webkit-border-radius:45px;

    -webkit-transition: all 300ms ease;

    -moz-transition: all 300ms ease;

    -ms-transition: all 300ms ease;

    -o-transition: all 300ms ease;

    transition: all 300ms ease;

}

.main-slider .owl-theme .owl-nav .owl-prev:hover{

    background: rgba(4,81,132,1);    

}

.main-slider .owl-theme .owl-nav .owl-next {

    position: absolute;
    right: 30px;
    top: 0;
    background: rgba(4,81,132,0.65);
    height: 50px;
    width: 50px;
    border: none;
    text-align: center;
    color: #fff;
    font-size: 30px;
    line-height: 50px;
    font-weight: 700;
    opacity: 1;
    margin: 0;
    padding: 0;
    margin-top: -30px;
	border-radius:45px;
	-moz-border-radius:45px;
	-webkit-border-radius:45px;
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;
}

.main-slider .owl-theme .owl-nav .owl-next:hover{

    background: rgba(4,81,132,1);    

}





.slider-social-links{

    position: absolute;

    left: 0;

    bottom: 60px;

    right: 0;

    max-width: 1170px;

    width: 100%;

    margin: 0 auto;

    z-index: 11;

}

.slider-social-links ul{

    position: relative;

    display: block;

    float: right;

}

.slider-social-links ul li{

    position: relative;

    display: inline-block;

    float: left;

}

.slider-social-links ul li a{

    position: relative;

    display: block;

    width: 50px;

    height: 50px;

    background: transparent;

    border: 1px solid transparent;

    border-radius: 50%;

    color: #ffffff;

    font-size: 16px;

    line-height: 48px;

    text-align: center;

    transition: all 200ms linear;

    transition-delay: 0.1s;

}





/*** 

=====================================================

	Main Slider Style2 style

=====================================================

***/

.main-slider.style2 {



}

.main-slider.style2 .slider-box{

    position: relative;

    display: block;

}

.main-slider.style2 .slide {

    padding: 394px 0px 330px;   

}



.main-slider.style2 .active .slide .image-layer{

	transform: none;

}

.main-slider.style2 .slide .image-layer:before {

    background-color: rgba(0, 0, 0, 0.60);

}

.main-slider.style2 .content{}

.main-slider.style2 .content.middle {

    position: relative;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

    flex-wrap: wrap;

}

.main-slider.style2 .content.right {

    position: relative;

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    align-items: flex-end;

    text-align: right;

    flex-wrap: wrap;

}



.main-slider.style2 .content h2{

	position: relative;

	color: #ffffff;

	font-size: 60px;

	line-height: 1.2em;

	font-weight: 400;

    margin-top: 0;

    margin-bottom: 26px;

	opacity: 0;

	transition: all 1000ms ease;

	transform: translateY(80px);    

}

.main-slider.style2 .active .content h2{

	opacity: 1;

	transform: translateX(0);

	transition-delay: 1000ms;        

}

.main-slider.style2 .content .text{

	position: relative; 

    margin-bottom: 38px;

	opacity: 0;

	transform: translateY(80px);  

	transition: all 1000ms ease;

}

.main-slider.style2 .active .content .text{

	opacity: 1;

	transform: translateX(0);

	transition-delay: 1500ms;        

}

.main-slider.style2 .content .text p{

    color: #ffffff;

    font-size: 18px;

    line-height: 36px;

    font-weight: 400;

    margin: 0;

}

.main-slider.style2 .content .btns-box{

    position: relative;

	opacity: 0;

	transform: translateY(80px);

	transition: all 1000ms ease;

}

.main-slider.style2 .active .content .btns-box{

	opacity: 1;

	transform: translateX(0);

	transition-delay: 2500ms;    

}

.main-slider.style2 .content .btns-box a{

    text-transform: uppercase;

    border-radius: 5px;

}

.main-slider.style2 .content .btns-box a.btn-one:before {

    border-radius: 5px;

    background-color: #f3f3f3;

    transition: all 0.4s;

    transform: scale(0.1, 1);

}

.main-slider.style2 .content .btns-box a.btn-one:hover::before{

    opacity: 1;

    -webkit-transform: scale(1, 1);

    transform: scale(1, 1);

}



.main-slider .mouse-btn-down {

    position: absolute;

    left: 0;

    bottom: 150px;

    right: 0;

    width: 34px;

    height: 31px;

    margin: 0 auto;

    cursor: pointer;

    display: block;

    background: url(../images/icon/scroll-to-explore.png) no-repeat;

    animation: fadeInDown 3s infinite;

    z-index: 20;

}



/*** 

=====================================================

	Main Slider Style3 style

=====================================================

***/

.main-slider.style3 {

    position: relative;

    display: block;

    overflow: hidden;

}

.main-slider.style3 .slider-box{

    position: relative;

    display: block;

}

.main-slider.style3 .slide {

    padding: 417px 0px 335px;   

}

.main-slider.style3.pd .slide {

    padding: 247px 0px 250px;

}

.main-slider.style3 .slide .image-layer:before {

    background-color: rgba(0, 0, 0, 0.50);

}

.main-slider.style3 .active .slide .image-layer{}

.main-slider.style3 .content{}

.main-slider.style3 .content.middle {

    position: relative;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

    flex-wrap: wrap;

}

.main-slider.style3 .content.left {

    position: relative;

    display: flex;

    flex-direction: column;

    justify-content: flex-start;

    align-items: flex-start;

    text-align: left;

    flex-wrap: wrap;

}







.main-slider.style3 .content h3{

	position: relative;

	color: #ffffff;

	font-size: 24px;

	line-height: 1.2em;

	font-weight: 400;

    margin-bottom: 19px;

	opacity: 0;

	transition: all 1000ms ease;

	transform: translateY(80px);    

}

.main-slider.style3 .active .content h3{

	opacity: 1;

	transform: translateX(0);

	transition-delay: 1000ms;        

}

.main-slider.style3 .content h2{

	position: relative;

	color: #ffffff;

	font-size: 72px;

	line-height: 1.2em;

	font-weight: 400;

    margin-top: 0;

    margin-bottom: 23px;

	opacity: 0;

	transition: all 1000ms ease;

	transform: translateY(80px);  

}

.main-slider.style3 .active .content h2{

	opacity: 1;

	transform: translateX(0);

	transition-delay: 1500ms;        

}

.main-slider.style3 .content .text{

	position: relative; 

    margin-bottom: 48px;

	opacity: 0;

	transform: translateY(80px);  

	transition: all 1000ms ease;

}

.main-slider.style3 .active .content .text{

	opacity: 1;

	transform: translateX(0);

	transition-delay: 2000ms;        

}

.main-slider.style3 .content .text p{

    color: #ffffff;

    font-size: 18px;

    line-height: 36px;

    font-weight: 400;

    margin: 0;

}





.main-slider.style3 .content .btns-box{

    position: relative;

	opacity: 0;

	transform: translateY(80px);

	transition: all 1000ms ease;

}

.main-slider.style3 .active .content .btns-box{

	opacity: 1;

	transform: translateX(0);

	transition-delay: 2500ms;    

}

.main-slider.style3 .content .btns-box a{

    margin: 0 8px;

}

.main-slider.style3 .content .btns-box a.style2{

    line-height: 56px;

    background: transparent;

    border: 2px solid #ffffff;

}