/*
 blue like : #075278
 light blue: #2eb3cb
 dark blue:  #004467

 boxs like:  #ebf8fa
*/
@font-face {
    font-family: monofont;
    src: url("../font/font.ttf"), url("../font/monofont.ttf") format("ttf");
}
* {
    margin: 0;
    padding: 0;
    text-decoration: none;
    box-sizing: border-box;
}
a{ text-decoration: none; }
body { background-color: aliceblue; }
.base{
    font-family: monofont;
    width: 100%;
    max-width: 1280px;
    margin: auto;
    direction: rtl;
}

/* ------------------------------------------ Buttons ------------------------------------------ */ 
.blue_button{
    width: auto;
    padding: 3%;
    background-color: #004467;
    color: aliceblue;
    cursor: pointer;
    border: 0px;
    border-radius: 4px;
    font-family: monofont;
    font-weight: bold;
}
.blue_button:hover{
    background-color: #2eb3cb;
    color: aliceblue;
}

/* ------------------------------------------ Header ------------------------------------------ */ 
.header{
    width:100%;
    display: block;
    text-align: center;
    box-shadow: #004467;
}
.header .desktop .logo{
    width:11%;
    display: inline-block;
    vertical-align: top;
    padding: 0.5%;
}
.header .desktop .menu{
    width:44%;
    display: inline-block;
    vertical-align: top;
    padding: 0.5%;
}
.header .desktop .menu .menu_box{
    display: inline-block;
    margin-right: 1.5%;
    margin-left: 1.5%;
}
.header .desktop .menu .menu_box:hover{
    color:orange;
    font-weight: bold;
}
.header .desktop .search{
    width:32%;
    display: inline-block;
    vertical-align: top;
    padding: 0.5%;
}
.header .desktop .login{
    width:8%;
    display: inline-block;
    vertical-align: top;
    padding: 0.5%;
}

/* ------------------------------------------- Boxs ------------------------------------------- */ 
.boxs{
    width: 100%;
    margin-top: 2%;
    margin-bottom: 2%;
}

/* ############################### Home page - Banners ###############################  */
.banners { 
    width:100%; 
    height: auto; 
    display: block; 
    margin-top: 10px; 
    margin-bottom: 20px;
}
.banners .one{
    margin: auto; 
    max-width: 800px; 
    padding: 5px;
    width: 100%; 
    height: 424px; 
    display:inline-block; 
    vertical-align:top;
    border-radius: 15px;
}
/* Slideshow container */
.cover{
    width: 100%;
    height: 100%;
    border-radius: 15px;
}
.banners .one .shs {
    border-radius: 15px;
    color: black;
    font-size: 12px;
    margin: auto;
    position: relative;
    overflow: hidden;
    height: 100%;
    width: 100%;
    background-color: #2eb3cb;
}
.banners .one .shs .j1 {display: none;}
/* Number text (1/3 etc) */
.banners .one .numbertext {
    display: none;
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
}
/* The dots/bullets/indicators */
.banners .one .dot {
    display: none;
    height: 5px;
    width: 5px;
    margin: 0 2px;
    background-color: gold;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}
.banners .one .active { background-color: orangered; }
/* Fading animation */
.banners .one .fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
    width: 100%;
    height: 100%;
}
@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}
@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}

.banners .two{
    width:100%; 
    max-width:455px; 
    padding: 5px;
    height: auto; 
    display:inline-block;
    border-radius: 15px;
}
.banners .two .towin{
    width:100%; 
    background-color:#2eb3cb;
    height: 200px; 
    display:inline-block;
    border-radius: 15px;
}
.banners .three{
    margin:auto; 
    margin-top: 30px;
    margin-bottom: 10px;
    width:96%; 
    background-color:white;
    height: 100px; 
    display: block;
    border-radius: 15px;
}
.mark{
    width: 90%;
    max-width: 1366px;
    height: 100px;
    margin-left: auto;
    margin-right: auto;
}
.mark .mark1{
    width: 25%;
    height: 100px;
    float: right;
}
.mark .mark1 .mark1-1{
    width: 45%;
    height: 100px;
    float: right;
}
.mark .mark1 .mark1-2{
    width: 55%;
    height: 100px;
    float: right;  
}
.mark .mark2{
    width: 25%;
    height: 100px;
    float: right;
}
.mark .mark2 .mark2-1{
    width: 45%;
    height: 100px;
    float: right;
}
.mark .mark2 .mark2-2{
    width: 55%;
    height: 100px;
    float: right;
}
.mark .mark3{
    width: 25%;
    height: 100px;
    float: right;
}
.mark .mark3 .mark3-1{
    width: 45%;
    height: 100px;
    float: right;
}
.mark .mark3 .mark3-2{
    width: 55%;
    height: 100px;
    float: right; 
}
.mark .mark4{
    width: 25%;
    height: 100px;
    float: right;
}
.mark .mark4 .mark4-1{
    width: 45%;
    height: 100px;
    float: right;
}
.mark .mark4 .mark4-2{
    width: 55%;
    height: 100px;
    float: right; 
}

/* -------------------- Wrapper -------------- */
.b4{
    width: 99%;
    height: auto;
    margin: auto;
    border-radius: 15px;
    direction: ltr;
    position: relative;
    overflow: hidden;
    background-color: #075278;
    font-family: monofont;
}
.wrapper{
    width:100%;
    max-height: auto;
    text-align: center;
    overflow: hidden;
    font-family: monofont;
}
.carousel{
    width:100%;
    margin:0px auto;
    font-family: monofont;
}
.carousel2{
    width:100%;
    margin:0px auto;
    font-family: monofont;
}
.next{
    width: 40px;
    height: 35px;
    color:black;
    font-size: 25px;
    vertical-align: middle;
    text-align: center;
    position: absolute;
    top: 42%;
    cursor: pointer;
    background-color: #F5F5F5;
    z-index: 2;
    border-radius: 25px 0 0 25px;
    padding-top: 5px;
}
.next:hover{
    right: -3px;
    color:darkorange;
}
.next1{
    width: 40px;
    height: 35px;
    color:black;
    font-size: 25px;
    vertical-align: middle;
    text-align: center;
    position: absolute;
    top: 42%;
    cursor: pointer;
    background-color: #F5F5F5;
    z-index: 2;
    border-radius: 25px 0 0 25px;
    padding-top: 5px;
}
.next1:hover{
    right: -3px;
    color: darkorange;
}
.prev{
    width: 40px;
    height: 35px;
    color:black;
    font-size: 25px;
    vertical-align: middle;
    text-align: center;
    position: absolute;
    top: 42%;
    left: 0px;
    cursor: pointer;
    background-color: #F5F5F5;
    z-index: 2;
    border-radius: 0px 25px 25px 0px;
    padding-top: 5px;
}
.prev:hover{
    left: -3px;
    color: darkorange;
}
.prev1{
    max-height: 32px;
    border-radius: 50%;
    position: absolute;
    top: 42%;
    left: 7px;
    cursor: pointer;
    background-color: #ffffff6a;
    z-index: 2;
}
.prev1:hover{
    left: 3px;
    background-color: #ffffff;
}
.slick-slide{
    margin:5px;
}
.slick-prev, .slick-next{
    background-color: lime;
}
.slick-prev .slick-arrow{
    color: red;
}
.slick-slide img{
    width:100%;
    border: 0px solid #fff;
}
.wrapper .slick-dots li button:before {
    font-size:20px;
    color:white;
}
.p_s-img{
    width: 100%;
    height: 100%;
    border-radius: 30px;
}
.gotoarrow{
    max-height: 32px;
    border-radius: 50%;
    position: absolute;
    right: 7px;
    cursor: pointer;
    background-color: #ffffff6a;
    z-index: 2;
}




/* ------------------------------------------ Footer ------------------------------------------ */ 
.footer {
    width:100%;
    background-color: #075278;
    color:aliceblue;
}
.footer .title{
    width: 100%;
    display: block;
    color:#2eb3cb;
    font-weight: bold;
}
.foter .text{
    width:100%;
}
.footer .info{
    width: 100%;
    max-width:500px;
    display: inline-block;
    vertical-align: top;
    padding: 5px;
    margin-bottom: 10px;
}
.footer .call{
    width: 100%;
    max-width:380px;
    display: inline-block;
    vertical-align: top;
    padding: 5px;
    margin-bottom: 10px;
}
.footer .logos{
    width: 100%;
    max-width:380px;
    display: inline-block;
    vertical-align: top;
    padding: 5px;
    margin-bottom: 10px;
}
.footer .end_line{
    width: 100%;
    display: block;
    background-color: #004467;
    text-align: center;
}