@font-face {
  font-family: 'Lalezar';
  font-style: normal;
  src: local('Pacifico-Regular'), url('../../main_style/fonts/Lalezar/Lalezar-Regular.ttf') format('woff2');
}

@font-face {
  font-family: 'Almarai';
    font-style: normal;
  src: local('Pacifico-Regular'), url('../../main_style/fonts/Almarai/Almarai-Regular.ttf') format('woff2');
}

@font-face {
  font-family: 'Lemonada';
    font-style: normal;
  src: local('Pacifico-Regular'), url('../../main_style/fonts/Lemonada/Lemonada-VariableFont_wght.ttf') format('woff2');
}

.font_main{ 
    font-family: 'Lalezar', cursive;
    color: #121941;
    font-size: 40px;
    font-weight: 700;
    line-height: 1.3;
}

.font_child{
    font-family: 'Almarai', sans-serif;
    color: #464c57;
    margin-bottom: 40px;
    font-size: 20px;
    line-height: 30px;
    font-weight: bold;
    
}

.heading{  margin: 50px 0;}

.heading .border{
    height: 6px;
    width: 20%;
    background: linear-gradient(to right, rgba(0,0,0,0) , #2b044d , rgba(0,0,0,0));
    margin-bottom: 30px;
    margin: 10px auto 30px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}

/*************************************************/

.header { padding-top: 65px; }

.content-header {
    position:relative;
    text-align:center;
    background: linear-gradient(60deg, rgba(84,58,183,1) 0%, rgba(0,172,193,1) 100%);
    color:white;
}
.content-header .logo { width:50px; fill:white; padding-right:15px; display:inline-block; vertical-align: middle;}
.content-header .inner-header { height:65vh; width:100%; margin: 0; padding: 0;}
.content-header .flex {  display: flex; justify-content: center; align-items: center; text-align: center;}
.content-header .flex h1{  color: white;     font-weight: 100;}

.content-header .waves {
position:relative;
width: 100%;
height:15vh;
margin-bottom:-7px; /*Fix for safari gap*/
min-height:100px;
max-height:150px;
}

.content-header .content { position:relative; height:20vh; text-align:center; background-color: white;}

/* Animation */

.content-header .parallax > use { animation: move-forever 25s cubic-bezier(.55,.5,.45,.5)     infinite; }
.content-header .parallax > use:nth-child(1) { animation-delay: -2s; animation-duration: 7s; }
.content-header .parallax > use:nth-child(2) { animation-delay: -3s; animation-duration: 10s; }
.content-header .parallax > use:nth-child(3) {
animation-delay: -4s;
animation-duration: 13s;
}
.content-header .parallax > use:nth-child(4) {
animation-delay: -5s;
animation-duration: 20s;
}
@keyframes move-forever {
    0% { transform: translate3d(-90px,0,0);}
100% {
    transform: translate3d(85px,0,0);
    -webkit-transform: translate3d(85px,0,0);
    -moz-transform: translate3d(85px,0,0);
    -ms-transform: translate3d(85px,0,0);
    -o-transform: translate3d(85px,0,0);
}
}
/*Shrinking for mobile*/
@media (max-width: 768px) {
    .content-header .waves { height:40px; min-height:40px; }
    .content-header .content { height:30vh;}
    .content-header h1 {font-size:24px;}
}

/*********************************************/


.element .conent-element{ padding: 40px;}
.element .conent-element .items{
    border-radius: 3px;
    margin-bottom: 20px;
    box-shadow: 10px 10px 5px #e6e6e4;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
}
.element .conent-element .img-element{ position: relative;}
.element .conent-element .img-element img{ max-width: 100%; height: 236px;} 
.element .conent-element .img-element .ovarlay{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    transition: .5s all ease-in-out;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
}

.element .conent-element .img-element .ovarlay i{
    position: absolute;
    top: 40%;
    left: 40%;
    background-color: white;
    border-radius: 50%;
    padding: 20px;
    font-weight: bold;
    font-size: 20px;
}

.element .conent-element .img-element .ovarlay i:hover{
    background-color: rgba(0, 36, 102, 0.911);
    transition: .5s all ease-in-out;
    -webkit-transition: .5s all ease-in-out;
    -moz-transition: .5s all ease-in-out;
    -ms-transition: .5s all ease-in-out;
    -o-transition: .5s all ease-in-out;
}

.element .conent-element .img-element .ovarlay:hover{ opacity: 1;}
.element .conent-element .info-element{ background-color: #f2f2f2; padding: 20px 0; }
.element .conent-element .info-element h5{ font-size: 25px; }
.element .conent-element .info-element span{ font-size: 17px;}
/***************************************/






/*Extra small devices (portrait phones, less than 576px)*/
@media (max-width: 575.98px) { 

    .font_main{   font-size: 23px !important;}
    .font_child{ font-size: 15px !important;}

}