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

html,body{
    overflow-x: hidden;
}

@media (max-width: 479px){
    body                    {overflow-x:hidden;}
}


.navbar{
    background-color: #D0BD93 !important;
    position: ;
}

.navbar .nav-link{
    color: #000 !important;
    transition: .6s;
}

.navbar .nav-link{
    cursor: pointer;
}

.navbar .nav-link:hover{
    color:#03188D !important;
}


.sec1{

    height: 100vh;
    background: url('/assets/img/main-pic.png') center  ;
    background-size:cover;
    position: relative;
    overflow: hidden;
    
    
    
}
.sec1 .overlay{
    position: absolute;
    height: 100%;
    width: 100%;
    top:0;
    bottom:0;
    overflow: hidden;
    background: linear-gradient(180deg, #D0BD93 0%, rgba(217, 217, 217, 0) 100%);


}

.sec1 .container{
    height: 100%;
    width: 100%;
}

.sec1 .container .row{
    height: 100%;
    width: 100%;
}

.sec1 .container .row .text-box{
    height: 100%;
    width: 100%;
}


.sec1 .container .text-box{
        z-index: 100;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
}

.sec1 .container .text-box h1{
    color:#fff;
    font-size: 55px;
    font-weight: 500;
    z-index: 100;
    
}

.sec1 .container .text-box p{
    color:#fff;
    font-size: 23px;
    z-index: 100;
    
}

.sec1 .container .img-box {
height: 100%;
width: 100%;
display: flex;
justify-content: flex-end;
align-items: center;

    
}


.sec1 .img-box img{
    z-index: 100;
    width: 280px;
}



























@media (min-width: 992px) and (max-width: 1199.98px) { 
    
    .navbar{
        background-color: #D0BD93 !important;
        position: ;
    }
    
    .navbar .nav-link{
        color: #000 !important;
        transition: .6s;
    }
    
    .navbar .nav-link{
        cursor: pointer;
    }
    
    .navbar .nav-link:hover{
        color:#03188D !important;
    }
    
    
    .sec1{
    
        height: 120vh;
        background: url('/assets/img/main-pic.png') center  ;
        background-size:cover;
        position: relative;
        overflow: hidden;
        
        
        
    }
    .sec1 .overlay{
        position: absolute;
        height: 100%;
        width: 100%;
        top:0;
        bottom:0;
        overflow: hidden;
        background: linear-gradient(180deg, #D0BD93 0%, rgba(217, 217, 217, 0) 100%);
    
    
    }
    
    .sec1 .container{
        height: 100%;
        width: 100%;
    }
    
    .sec1 .container .row{
        height: 100%;
        width: 100%;
    }
    
    .sec1 .container .row .text-box{
        height: 100%;
        width: 100%;
    }
    
    
    .sec1 .container .text-box{
            z-index: 100;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
    }
    
    .sec1 .container .text-box h1{
        color:#fff;
        font-size: 55px;
        font-weight: 500;
        z-index: 100;
        
    }
    
    .sec1 .container .text-box p{
        color:#fff;
        font-size: 23px;
        z-index: 100;
        
    }
    
    .sec1 .container .img-box {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    
        
    }
    
    
    .sec1 .img-box img{
        z-index: 100;
        width: 280px;
    }



}



















@media (min-width: 1200px) and (max-width: 1400px) {
    
    .navbar{
        background-color: #D0BD93 !important;
        position: ;
    }
    
    .navbar .nav-link{
        color: #000 !important;
        transition: .6s;
    }
    
    .navbar .nav-link{
        cursor: pointer;
    }
    
    .navbar .nav-link:hover{
        color:#03188D !important;
    }
    
    
    .sec1{
    
        height: 130vh;
        background: url('/assets/img/main-pic.png') center no-repeat  ;
        background-size:cover;
        position: relative;
        overflow: hidden;
        
        
        
        
    }
    .sec1 .overlay{
        position: absolute;
        height: 100%;
        width: 100%;
        top:0;
        bottom:0;
        overflow: hidden;
        background: linear-gradient(180deg, #D0BD93 0%, rgba(217, 217, 217, 0) 100%);
    
    
    }
    
    .sec1 .container{
        height: 100%;
        width: 100%;
    }
    
    .sec1 .container .row{
        height: 100%;
        width: 100%;
    }
    
    .sec1 .container .row .text-box{
        height: 100%;
        width: 100%;
    }
    
    
    .sec1 .container .text-box{
            z-index: 100;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
    }
    
    .sec1 .container .text-box h1{
        color:#fff;
        font-size: 55px;
        font-weight: 500;
        z-index: 100;
        
    }
    
    .sec1 .container .text-box p{
        color:#fff;
        font-size: 23px;
        z-index: 100;
        
    }
    
    .sec1 .container .img-box {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    
        
    }
    
    
    .sec1 .img-box img{
        z-index: 100;
        width: 320px;
    }



}































@media (min-width: 768px) and (max-width: 992px) {
    
    .navbar{
        background-color: #D0BD93 !important;
        position: ;
    }
    
    .navbar .nav-link{
        color: #000 !important;
        transition: .6s;
    }
    
    .navbar .nav-link{
        cursor: pointer;
    }
    
    .navbar .nav-link:hover{
        color:#03188D !important;
    }
    
    
    .sec1{
    
        height: 100vh;
        background: url('/assets/img/main-pic.png') center  ;
        background-size:cover;
        position: relative;
        overflow: hidden;
        
        
        
    }
    .sec1 .overlay{
        position: absolute;
        height: 100%;
        width: 100%;
        top:0;
        bottom:0;
        overflow: hidden;
        background: linear-gradient(180deg, #D0BD93 0%, rgba(217, 217, 217, 0) 100%);
    
    
    }
    
    .sec1 .container{
        height: 100%;
        width: 100%;
    }
    
    .sec1 .container .row{
        height: 100%;
        width: 100%;
    }
    
    .sec1 .container .row .text-box{
        height: 100%;
        width: 100%;
    }
    
    
    .sec1 .container .text-box{
            z-index: 100;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
    }
    
    .sec1 .container .text-box h1{
        color:#fff;
        font-size: 40px !important;
        font-weight: 500;
        z-index: 100;
        
    }
    
    .sec1 .container .text-box p{
        color:#fff;
        font-size: 20px;
        z-index: 100;
        
    }
    
    .sec1 .container .img-box {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    
        
    }
    
    
    .sec1 .img-box img{
        z-index: 100;
        width: 240px;
    }



}













@media (min-width: 576px) and (max-width: 768px) {
    
    .navbar{
        background-color: #D0BD93 !important;
        position: ;
    }
    
    .navbar .nav-link{
        color: #000 !important;
        transition: .6s;
    }
    
    .navbar .nav-link{
        cursor: pointer;
    }
    
    .navbar .nav-link:hover{
        color:#03188D !important;
    }
    
    
    .sec1{
    
        height: 100vh;
        background: url('/assets/img/main-pic.png') center  ;
        background-size:cover;
        position: relative;
        overflow: hidden;
        
        
        
    }
    .sec1 .overlay{
        position: absolute;
        height: 100%;
        width: 100%;
        top:0;
        bottom:0;
        overflow: hidden;
        background: linear-gradient(180deg, #D0BD93 0%, rgba(217, 217, 217, 0) 100%);
    
    
    }
    
    .sec1 .container{
        height: 100%;
        width: 100%;
    }
    
    .sec1 .container .row{
        height: 100%;
        width: 100%;
    }
    
    .sec1 .container .row .text-box{
        height: 100%;
        width: 100%;
    }
    
    
    .sec1 .container .text-box{
            z-index: 100;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
    }
    
    .sec1 .container .text-box h1{
        color:#fff;
        font-size: 30px !important;
        font-weight: 500;
        z-index: 100;
        
    }
    
    .sec1 .container .text-box p{
        color:#fff;
        font-size: 15px;
        z-index: 100;
        
    }
    
    .sec1 .container .img-box {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    
        
    }
    
    
    .sec1 .img-box img{
        z-index: 100;
        width: 200px;
    }



}





















@media  (max-width: 576px) {
    
    .navbar{
        background-color: #D0BD93 !important;
        position: ;
    }
    
    .navbar .nav-link{
        color: #000 !important;
        transition: .6s;
    }
    
    .navbar .nav-link{
        cursor: pointer;
    }
    
    .navbar .nav-link:hover{
        color:#03188D !important;
    }
    
    
    .sec1{
    
        height: 100vh;
        background: url('/assets/img/main-pic.png') center  ;
        background-size:cover;
        position: relative;
        overflow: hidden;
        
        
        
    }
    .sec1 .overlay{
        position: absolute;
        height: 100%;
        width: 100%;
        top:0;
        bottom:0;
        overflow: hidden;
        background: linear-gradient(180deg, #D0BD93 0%, rgba(217, 217, 217, 0) 100%);
    
    
    }
    
    .sec1 .container{
        height: 100%;
        width: 100%;
    }
    
    .sec1 .container .row{
        height: 100%;
        width: 100%;
    }
    
    .sec1 .container .row .text-box{
        height: 100%;
        width: 100%;
    }
    
    
    .sec1 .container .text-box{
            z-index: 100;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            flex-direction: column;
    }
    
    .sec1 .container .text-box h1{
        color:#fff;
        font-size: 30px !important;
        font-weight: 500;
        z-index: 100;
        
    }
    
    .sec1 .container .text-box p{
        color:#fff;
        font-size: 16px;
        z-index: 100;
        
    }
    
    .sec1 .container .img-box {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    
        
    }
    
    
    .sec1 .img-box img{
        z-index: 100;
        width: 150px;
        margin-top: 20px;
    }



}




/* sec2 style home page  */

.sec2{
    position: relative;
    height: auto;
   
   
}
.sec2 .container{
    position: relative;
    
    
}

.sec2 .row{
    background: #C2B59BCC;

    width: 70%;
    height:500px;
    padding:32px ;
    display: flex;
    align-items: center;
    position: absolute ;
    top: -300px;
    right:-1px ;
    padding: ;

}

.sec2 .row h2{
    font-family:'Tajawal', sans-serif ;
    color: #fff;

}

.sec2 .row p{
    font-family:'Tajawal', sans-serif ;
    color: #000;
    font-weight: 600;
    padding: 16px 48px;
    font-size: 18px;
    
}

.sec2 .imgbox{
    height: 100%;
    width:100%;
    position: relative;
}

.sec2 .imgbox .polly{
    position: absolute;
    right:0px ;
    width: 100%;
    z-index: 0;
}

.sec2 .imgbox .pic{
    height: 80%;
    width:90% ;
    z-index: 2;
    position: relative;
    border-radius: 1rem;
}

















@media (min-width: 1800px) and (max-width: 4000px){
    .sec2{
        height: 20vh;
    }
   
    .sec2 .row{
        background: #C2B59BCC;
    
        width: 80%;
        height:auto;
        padding:32px ;
        display: flex;
        align-items: center;
        position: absolute ;
        top: -300px;
        right:-1px ;
        padding: ;
    
    }
    .sec2 .imgbox{
        height: 100%;
        width:100%;
        position: relative;
    }
    
    .sec2 .imgbox .polly{
        position: absolute;
        right:15px !important ;
        width: 100%;
        z-index: 1;
    }
    
    .sec2 .imgbox .pic{
        height: 100%;
        width:95% ;
        z-index: 2;
        position: relative;
        border-radius: 1rem;
    }
    
    .sec2 .row h2{
        font-family:'Tajawal', sans-serif ;
        color: #fff;
    
    }
    
    .sec2 .row p{
        font-family:'Tajawal', sans-serif ;
        color: #000;
        font-weight: 600;
        padding: 16px 48px;
        font-size: 25px;
        
    } 
    
    .sec3{
        margin-top: 400px !important; 
    }
}



@media (min-width: 992px) and (max-width: 1200px){





    .sec2{
        position: relative;
        height: auto;
    }
    
    .sec2 .row{
        background: #C2B59BCC;
    
        width: 80%;
        height:400px;
        padding:32px ;
        display: flex;
        align-items: center;
        position: absolute ;
        top: -300px;
        right:-1px ;
        padding: ;
    
    }

    .sec2 .imgbox{
        height: 100%;
        width:100%;
        position: relative;
    }
    
    .sec2 .imgbox .polly{
        position: absolute;
        right:15px !important ;
        width: 100%;
        z-index: 1;
    }
    
    .sec2 .imgbox .pic{
        height: 100%;
        width:95% ;
        z-index: 2;
        position: relative;
        border-radius: 1rem;
    }
    
    .sec2 .row h2{
        font-family:'Tajawal', sans-serif ;
        color: #fff;
    
    }
    
    .sec2 .row p{
        font-family:'Tajawal', sans-serif ;
        color: #000;
        font-weight: 600;
        padding: 16px 48px;
        font-size: 16px;
        
    }


}


@media (min-width: 768px) and (max-width: 991.9px){


    .sec2{
        position: relative;
        height: auto;
    }
    
    .sec2 .row{
        background: #C2B59BCC;
    
        width: 80%;
        height:auto;
        padding:32px ;
        display: flex;
        align-items: center;
        position: absolute ;
        top: -300px;
        right:-1px ;
        padding: ;
    
    }

    .sec2 .imgbox{
        height: 100%;
        width:100%;
        position: relative;
    }
    
    .sec2 .imgbox .polly{
        position: absolute;
        right:15px !important ;
        width: 100%;
        z-index: 1;
    }
    
    .sec2 .imgbox .pic{
        height: 100%;
        width:95% ;
        z-index: 2;
        position: relative;
        border-radius: 1rem;
    }
    
    .sec2 .row h2{
        font-family:'Tajawal', sans-serif ;
        color: #fff;
    
    }
    
    .sec2 .row p{
        font-family:'Tajawal', sans-serif ;
        color: #000;
        font-weight: 600;
        padding: 8px 8px;
        font-size: 14px;
        
    }

    
}



@media (min-width: 576px) and (max-width: 768px){


    
    

    .sec2{
        position: relative;
        height: auto;
    }
    
    .sec2 .row{
        background: #C2B59BCC;
    
        width: 80%;
        height:auto;
        padding:32px ;
        display: flex;
        align-items: center;
        position: absolute ;
        top: -250px;
        right:-1px ;
        padding: ;
    
    }

    .sec2 .imgbox{
        height: 100%;
        width:100%;
        position: relative;
    }
    
    .sec2 .imgbox .polly{
        position: absolute;
        right:15px !important ;
        width: 100%;
        z-index: 1;
    }
    
    .sec2 .imgbox .pic{
        height: 100%;
        width:95% ;
        z-index: 2;
        position: relative;
        border-radius: 1rem;
    }
    
    .sec2 .row h2{
        font-family:'Tajawal', sans-serif ;
        color: #fff;
        font-size: 18px;
    
    }
    
    .sec2 .row p{
        font-family:'Tajawal', sans-serif ;
        color: #000;
        font-weight: 600;
        padding: 4px 4px;
        font-size: 12px;
        
    }

    .sec3{
   
        margin-top: 0px;
    }

}


@media  (max-width: 576px){


    .sec2{
        position: relative;
        height: auto;
        width:100% ;
    }
    
    .sec2 .row{
        background: #C2B59BCC;
    
        width: auto;
        height:auto;
        padding:10px ;
        display: flex;
        align-items: center;
        position: relative ;
       top:-50px ;
    
    }

    .sec2 .imgbox{
        height: 100%;
        width:100%;
        position: relative;
    }
    
    .sec2 .imgbox .polly{
        position: absolute;
        right:15px !important ;
        width: 100%;
        z-index: 1;
    }
    
    .sec2 .imgbox .pic{
        height: 100%;
        width:95% ;
        z-index: 2;
        position: relative;
        border-radius: 1rem;
    }
    
    .sec2 .row h2{
        font-family:'Tajawal', sans-serif ;
        color: #fff;
        font-size: 18px;
    
    }
    
    .sec2 .row p{
        font-family:'Tajawal', sans-serif ;
        color: #000;
        font-weight: 600;
        padding: 4px 4px;
        font-size: 10px;
        
    }

    .sec3{
   
        margin-top: 0px !important ;
    }

    
}





















































/* sec3 style home page  */

.sec3{
   
    margin-top: 200px;
}
.sec3 h3{
     color: #000;
     font-family:'Tajawal', sans-serif ;
}
.sec3 .title{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}


.sec3 .title .line{

    
    height: 6px;
    width: 21% ;
    background: #30BAFF;
   
    border-radius: 8px;
    position: relative;
}


.sec3 .line .dot{
    
      
    position: absolute;
    height: 6px;
    width: 6px;
    background:#30BAFF ;
    right: -5%;
    border-radius: 50px;
   
   
    
}


.sec3 .imgbox{
   
    width: 100%;
}



.sec3 .imgbox img{
   
    width: 100%;
}

.sec3 .textbox h5{
    color: #000;
}

.sec3 .textbox p{
    color: #000;
}

.sec3 .textbox a{
    color: #000;
}



.triangle-left {
	width: 0;
	height: 0;
	border-top: 4px solid transparent;
	border-right: 8px solid #13BAFF;
	border-bottom: 4px solid transparent;
}


@media  (max-width: 576px){


    .sec3 .title .line{

    
        height: 6px;
        width: 40% ;
        background: #30BAFF;
       
        border-radius: 8px;
        position: relative;
    }
    
    .sec3 .line .dot{
    
      
        position: absolute;
        height: 6px;
        width: 6px;
        background: #30BAFF;
        right: -6%;
        border-radius: 50px; 
   

}
}


@media (min-width: 576px) and (max-width: 767px){


    .sec3 .title .line{

    
        height: 6px;
        width: 50% ;
        background: #30BAFF;
       
        border-radius: 8px;
        position: relative;
    }
    
    
    .sec3 .line .dot{
    
      
        position: absolute;
        height: 6px;
        width: 6px;
        background: #30BAFF;
        right: -6%;
        border-radius: 50px;
       
        
    }

}


    @media (min-width: 768px) and (max-width: 992px){


        .sec3 .title .line{
    
        
            height: 6px;
            width: 50% ;
            background: #30BAFF;
           
            border-radius: 8px;
            position: relative;
        }
        
        
        .sec3 .line .dot{
        
          
            position: absolute;
            height: 6px;
            width: 6px;
            background: #30BAFF;
            right: -6%;
            border-radius: 50px;
           
            
        }

}






/* sec4 style home page  */

.sec4 .swiper {
    width: 100%;
    height: 50%;
  }

  .sec4 .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: transparent !important;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;

  }

   

  .sec4 .card{
    height:190px;
    width: 90%;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    position: relative;
  
}

.sec4 h3{
    color: #000;
    font-family:'Tajawal', sans-serif ;
}

.sec4 .card h4{
    z-index: 2;
    display: inline;
    font-family: 'Tajawal', sans-serif;
    color: #000;
    font-weight: 400;
    text-align: right;
  
}



.sec4 .card .imgbox{
    height: 100%;
    width: 100%;
    position: relative;
    
    

  
}



.sec4 .card .imgbox img{
    position: absolute;

  
}

.sec4 .card .imgbox .poly{
    
    width: 60%;
    height:100% ;
    z-index:2 ;
    top: -63%;
    left:0 ; 
    border-radius: 10px;
}

.sec4 .card .imgbox .food{
    width: 47%;
    height:155px ;
    z-index:3 ;
    left: 0;
    bottom: 0;
}

.sec4 .card .imgbox .food1{
    width: 65%;
    height:175px ;
    z-index:3 ;
    left: 0;
    bottom: 0;
}


  



.sec4 {
    height: 80vh;
    background: url('/assets/img/res-list.png') center;
    background-size: cover;
}




.sec4 .container{

    height: 100%;
}

.sec4 .row{

    height: 100%;
}

.sec4 .overlay{
    position: absolute;
    height: 100%;
    width: 100%;
    background:#D0BD9333 ;
    
}

.sec4 h3{
    color:#fff;
    
    font-family: 'Tajawal', sans-serif;


}



.sec4 .box .card{
    height: 100%;
    width: 80%;
  
}

.sec4 .box .card h4{
    z-index: 2;
    display: inline;
    font-family: 'Tajawal', sans-serif;
    color: #000;
    font-weight: 400;
  
}
.sec4 .btn{
   height: 40px;
   width: 200px;
   background-color: #fff;
   font-family:'Tajawal', sans-serif;
   color: #000;
}

.sec4 .btn:hover{
    height: 40px;
    width: 200px;
    background-color: #fff;
    color: #000;
 }
 


.sec4 .box .card .imgbox{
    height: 100%;
    width: 100%;
    background: url('/assets/img/17\ 4.png') center no-repeat;
    background-size: cover;
    z-index:1 ;
    position: absolute;
    display: flex;
    justify-content: flex-end;

  
}



.sec4 .box .card .imgbox img{
    height: 90%;
    width: 50%;
    margin-top: 5%;
   

  
}

.sec4 .line{

    background-color:#fff ;
    height: 5px;
    width:160px;
    border-radius: 100px;
    margin-bottom: 20px;
    position: relative;
    margin-right: 0px;
}


.sec4 .line .dot{
    position: absolute;
    right: -10px;
    height: 5px;
    width: 5px;
    border-radius: 50%;
    background: #fff;
    
}

@media (min-width: 768px) and (max-width: 991px){
    .sec4 .swiper-slide{
   
        width: 335px !important;
    }

  }




@media (min-width: 576px) and (max-width: 767px) { 


    .sec4{
        height: auto;
    
    }

    .sec4 .card{
        margin-bottom: 50px;
       height: 230px;
    }
    
    .sec4 .card .imgbox .poly{
    
        width: 60%;
        height:100% ;
        z-index:2 ;
        top: -47%;
        left:0 ; 
        border-radius: 10px;
    }
    
    .sec4 .card .imgbox .food{
        width: 42%;
        height:155px ;
        z-index:3 ;
        left: 0;
        bottom: 0;
    }
    
    .sec4 .card .imgbox .food1{
        width: 60%;
        height:175px ;
        z-index:3 ;
        left: 0;
        bottom: 0;
    }


    .sec4 .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    width: 100% !important;
  }



     }


     @media (max-width: 576px)  { 


        .sec4{
            height: auto;
        
        }
    
        .sec4 .card{
            margin-bottom: 50px;
           height: 230px;
        }
        
        .sec4 .card .imgbox .poly{
        
            width: 60%;
            height:100% ;
            z-index:2 ;
            top: -47%;
            left:0 ; 
            border-radius: 10px;
        }
        
        .sec4 .card .imgbox .food{
            width: 42%;
            height:155px ;
            z-index:3 ;
            left: 0;
            bottom: 0;
        }
        
        .sec4 .card .imgbox .food1{
            width: 60%;
            height:175px ;
            z-index:3 ;
            left: 0;
            bottom: 0;
        }
    
       
    
        .sec4 .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;
        
            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
            width: 100% !important;
          }
    
    
         }
    

         








@media  (max-width: 576px){
    .sec4 {
        height: auto;
        background: url('/assets/img/res-list.png') center;
        background-size: cover; 
    }


    .sec4 .box .card{
        height: 90%;
        width: 90%;

      
    }


    .sec4 .box{
        display: flex;
        justify-content: center;
       
    }



   
}




@media (min-width: 576px) and (max-width: 767px){


    .sec4 {
        
        background: url('/assets/img/res-list.png') center;
        background-size: cover; 
    }

    .sec4 .box .card{
        height: 90%;
        width: 90%;

      
    }


    

}




@media (min-width: 768px) and (max-width: 992px){


    .sec4 .box .card .imgbox img{
        height: 90%;
        width: 50%;
        margin-top: 5%;
       
    
      
    }

    .sec4 .box .card{
        height: 90%;
        width: 90%;

      
    }


    
    
    
   


}





/* sec5 style home page  */

.sec5{
    height: 70vh;
    margin-bottom: 50px;

}

.sec5 .container {

    height: 100%;
    background: url('/assets/img/sec5.png') center no-repeat;
    background-size: cover;
    position: relative;
    z-index: 1;
   
}


.sec5 .container .row {

    
    height: 100%;
    padding: 32px;
    z-index: 100;
    position: absolute;
   
   
   


}

.sec5 .container .overlay{

    height: 100%;
    width: 100%;
    position: absolute;
    background: rgba(0, 0, 0, 0.75);
    left:0 ;
    z-index: 0;
    padding: 32px;

}

.sec5 .container .row h3{
    color:#fff;
   
   font-family: 'Tajawal', sans-serif;
   font-weight: 400;
    

}


.sec5 .container .row .line{
    width: 210px;
    height: 3px;
    background-color: #fff;
    border-radius: 20px;
    position: relative;
    margin-right: 12px;

}

.sec5 .container .row .line::before{
    content: '';
    position: absolute;
    bottom:0 ;
    height: 4px;
    right: -10px;
    width: 5px;
    z-index: 100;
    background-color: #fff;
    border-radius: 50px;

}

.sec5 .container .row h5{
    color:#fff;
   
   font-family: 'Tajawal', sans-serif;
   font-weight: 400;
   font-size: 28px;
   padding: 10px;
   text-align: justify;
   line-height: 60px;
    

}


@media  (max-width: 576px){

   
    .sec5 .container .row h5{
        color:#fff;
       
       font-family: 'Tajawal', sans-serif;
       font-weight: 400;
       font-size: 16px;
       padding: 10px;
       text-align: justify;
       line-height: 40px;
        
    
    }
   
}


@media (min-width: 576px) and (max-width: 767px){

     
    .sec5 .container .row h5{
        color:#fff;
       
       font-family: 'Tajawal', sans-serif;
       font-weight: 400;
       font-size: 22px;
       padding: 10px;
       text-align: justify;
       line-height: 40px;
        
    
    }



}












/* sec6 style home page  */

.sec6{
    height: 80vh;
}

.sec6 .container{
    height: 100%;
}

.sec6 .container .row{
    height: 100%;
    width: 100%;
}

.sec6 .container .row .box .imgbox{
    height: 75%;
    width: 100%;
}
.sec6 .container .row .box .imgbox img{
    height: 100%;
    width: 100%;
}

.sec6 .container .row .box .textbox{
    text-align: center;
    padding-top: 20px;
    width:100% ;
}


.sec6 .container .row a{

    width:154px ;
    height: 35px;
    background-color: #30BAFF;
    color: #fff;
     font-family:'Tajawal', sans-serif ;
}

.sec6 .container .row h4{
    color: #000;
    font-family: 'Tajawal', sans-serif ;
}


.sec6 .container .row .line{
    width: 140px;
    height: 3px;
    background-color: #30BAFF;
    border-radius: 20px;
    position: relative;
    margin-right: 12px;

}

.sec6 .container .row .line::before{
    content: '';
    position: absolute;
    bottom:0 ;
    height: 4px;
    right: -10px;
    width: 5px;
    z-index: 100;
    background-color: #30BAFF;
    border-radius: 50px;

}


.sec6 .container .row .box .textbox h5{

    color: #000;
    font-family:'Tajawal', sans-serif ;
}




@media (min-width: 576px) and (max-width: 767px){

    .sec6{
        height: auto;
    }
}

@media  (max-width: 576px){

    .sec6{
        height: auto;
    }
}





/* sec7 style home page  */




@media (min-width: 1600px) and (max-width: 1800px){
    .imgbox .overlay {
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.555);
        position: absolute;
        z-index: 1001;
        width: 18.5% !important;
        transition: 1s;
    }
}



    @media (min-width: 1800px) and (max-width: 2000px){
        .imgbox .overlay {
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.555);
            position: absolute;
            z-index: 1001;
            width: 18.5% !important;
            transition: 1s;
        }
}




@media (min-width: 2000px) and (max-width: 2800px){
    .imgbox .overlay {
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.555);
        position: absolute;
        z-index: 1001;
        width: 18.5% !important;
        transition: 1s;
    }
}
 
  @media (min-width: 992px) and (max-width: 3000px){



    .sec7{
        height: auto;
         position: relative;
    }
    
    .sec7 .col-lg-3{
        width: 20% !important;
    }
    .sec7 .container-fluid{
        height: 100%;
        
    }
    .sec7 .row{
        height: 100%;
        height: 100%;
       
    }
    
    .sec7 .imgbox {
        width: 100%;
        height: 100%;
        
        position: relative;
    }


    .sec7 .imgbox .overlay {
        width: 100% !important;
        height: 100%;
        background: rgba(0, 0, 0, 0.555);
        position: absolute;
        z-index:1001 ;
        width: 18%;
        transition: 1s;
        
        
        
        
    }


    .sec7 .imgbox:hover .overlay {
        width: 0;
        height: 0;
        background: transparent;
        position: absolute;
       
        width: 0;
        
        
        
    }
    
    .sec7 .imgbox img{
        
       position: relative;
       width: 100%;
       z-index: 1000;
       height: 100%;
    
       
        
    
       
       
       
       
    }
    
    .sec7 .imgbox .img1, .sec7 .imgbox .overlay1{
        animation-name: floating;
        animation-duration: 50s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out;
        top: 10px ;
    }
    
    
    @keyframes floating {
    
        from { transform: translate(0,  10px); }
        65%  { transform: translate(0, 100px); }
        to   { transform: translate(0, 10px); } 
       
       
      }
    
    
    
    
      .sec7 .imgbox .img3,.sec7 .imgbox .overlay3{
        animation-name: floating;
        animation-duration: 50s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out;
       top: -40px;
    }
    
    
    @keyframes floating {
    
        from { transform: translate(0,  -40px); }
        65%  { transform: translate(0, 50px); }
        to   { transform: translate(0, -40px); } 
       
       
      }
    
    
    
    
    
    
      .sec7 .imgbox .img2,.sec7 .imgbox .overlay2{
        animation-name: floating;
        animation-duration: 60s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out;
       top: -70px;
    }
    
    
    @keyframes floating {
    
        from { transform: translate(0,  -70px); }
        65%  { transform: translate(0, 0px); }
        to   { transform: translate(0, -70px); } 
       
       
      }
    
    
    
    
      .sec7 .imgbox .img4,.sec7 .imgbox .overlay4{
        animation-name: floating;
        animation-duration: 60s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out;
        top: 50px;
    }
    
    
    @keyframes floating {
    
        from { transform: translate(0,  50px); }
        65%  { transform: translate(0, 40px); }
        to   { transform: translate(0, 50px); } 
       
       
      }
    
    
    
    
      .sec7 .imgbox .img5,.sec7 .imgbox .overlay5{
        animation-name: floating;
        animation-duration: 60s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out;
        margin-left: 30px;
        margin-top: 5px;
    }
    
    
    @keyframes floating {
    
        from { transform: translate(0,  30px); }
        65%  { transform: translate(0, 150px); }
        to   { transform: translate(0, 30px); } 
       
       
      }
    

    
    
   

  }




  @media (min-width: 768px) and (max-width: 991px){

    .sec7{
        height: auto;
         position: relative;
    }
    
    .sec7 .col-md-4{
        width: 33.33% !important;
        height: 100%;
        margin-bottom: 30px;
    }
    .sec7 .container-fluid{
        height: 100%;
        margin-top: 200px;

        
    }
    .sec7 .row{
        display: flex;
        justify-content: center;
    }
    
    .sec7 .imgbox {
        width: 100%;
        height: 100%;
        position: relative;
        
        
    }

    .sec7 .imgbox img {
        width: 100%;
        height: 100%;
        position: relative;
        
    }


    .sec7 .imgbox .overlay {
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.6);
        position: absolute;
        z-index:1001 ;
      
        transition: 1s;
        
        
        
        
    }


    .sec7 .imgbox .overlay:hover {
        width: 0;
        height: 0;
        background: transparent;
        position: absolute;
       
        width: 0;
        
        
        
    }

  }



  @media (min-width: 576px) and (max-width: 767px){


    .sec7{
        height:auto ;
         margin-top: 200px;
         position: relative;
    }
    
    .sec7 .col-12{
        width: 100% !important;
        height: 100%;
        margin-bottom: 30px;
        position: relative;
    }


    
    .sec7 .container-fluid{
        height: 100%;
        margin-top: 200px;
        height: 100%;
        position: relative;

        
    }
    .sec7 .row{
        display: flex;
        justify-content: center;

        height: 100%;
        width: 100%;
        position: relative;
    }
    
    .sec7 .imgbox {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        position: relative;
        
        
    }

    .sec7 .imgbox img {
        width: 80%;
        height: 80%;
        position: relative;
        z-index: 1;
        
    }


    .sec7 .imgbox .overlay {
        width: 80%;
        height: 100%;
        background: rgba(0, 0, 0, 0.6);
        position: absolute;
        z-index:1001 ;
      
        transition: 1s;
        
        
        
        
    }


    .sec7 .imgbox .overlay:hover {
        width: 0;
        height: 0;
        background: transparent;
        position: absolute;
       
        width: 0;
        
        
        
    }


  }




  @media  (max-width: 576px){


    .sec7{
        height:auto ;
         margin-top: 200px;
         position: relative;
    }
    
    .sec7 .col-12{
        width: 100% !important;
        height: 100%;
        margin-bottom: 30px;
        position: relative;
    }


    
    .sec7 .container-fluid{
        height: 100%;
        margin-top: 00px;
        height: 100%;
        position: relative;

        
    }
    .sec7 .row{
        display: flex;
        justify-content: center;

        height: 100%;
        width: 100%;
        position: relative;
    }
    
    .sec7 .imgbox {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
position: relative;        
        
    }

    .sec7 .imgbox img {
        width: 90%;
        height: 90%;
        position: relative;
        z-index: 1;
        
    }


    .sec7 .imgbox .overlay {
        width: 90%;
        height: 100%;
        background: rgba(0, 0, 0, 0.6);
        position: absolute;
        z-index:1001 ;
      
        transition: 1s;
        
        
        
        
    }


    .sec7 .imgbox .overlay:hover {
        width: 0;
        height: 0;
        background: transparent;
        position: absolute;
       
        width: 0;
        
        
        
    }



  }



  footer{
    height: 70vh;
    background: #D0BD93;


  }


  footer .container-fluid{
    height: 100%;
    width: 100%;
  }

  footer .row{
    height: 100%;
    width: 100%;
  }

  footer .logo{
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  footer .logo img{

    height: 80%;
    width: 70%;
  }



  footer .list{
    flex-direction: column; height: 100%; font-family:'Tajawal', sans-serif;
    color:#000;
  }

  footer .list h5{
    color:#000;
    font-family:'Tajawal', sans-serif;
  }

  footer .list a{
    color:#000;
    font-family:'Tajawal', sans-serif;
  }


  footer .location{
    height: 100%;
    width: 100%;
  }


  footer .location .mapouter{
    height: 250px !important;
    width: 100%;
    border-radius:6rem ;
  }


  footer .location iframe{
    border-radius: 2rem;
  }


  footer .contact-us{
    flex-direction: column;
  }
  footer .contact-us h5{
    color: #000;
    font-family: 'Tajawal', sans-serif ;
  }


  footer .contact-us span{
    color: #000;
    font-family: 'Tajawal', sans-serif ;
    margin-bottom: 7px;
  }

footer .poly{

  position: absolute; height: 80%; left:-2% ; width: auto; opacity: .4; top: 10%; z-index: 0;

}
  @media (min-width: 576px) and (max-width: 767px){
    footer{
        height: auto;
    }


    footer .logo img{

        height:auto;
        width: 30%;
      }

      footer .list {
        padding-bottom: 100px;
      }

      footer .contact-us {
        padding-bottom: 100px;
      }

      footer .location{
        margin-bottom: 100px;
      }
      footer .poly{

        position: absolute; height: 30%; left:-5% ; width: auto; opacity: .3; top: 70%; z-index: 0; width: 90%; 
      
      }
    
  }



  @media (max-width: 576px){


    footer{
        height: auto;
    }


    footer .logo img{

        height:auto;
        width: 50%;
        margin-bottom: 40px;
      }

      footer .list {
        padding-bottom: 100px;
      }

      footer .contact-us {
        padding-bottom: 100px;
      }

      footer .location{
        margin-bottom: 100px;
      }

      footer .poly{

        position: absolute; height: 30%; left:-5% ; width: auto; opacity: .3; top: 70%; z-index: 0; width: 90%; 
      
      }
    

  }


  @media (min-width: 768px) and (max-width: 992px){
    
    footer{
        height: auto;
    }
    footer .poly{

        position: absolute; height: 40%; left:-5% ; width: auto; opacity: .3; top: 60%; z-index: 0; width: 60%; 
      
      }


      footer .logo img{

        height:auto;
        width: 50%;
        margin-bottom: 40px;
      }
  
  }


 
/*  style about page  */


/* sec1 style about page  */


.about-sec1{
    height: 60vh;
    background: url('/assets/img/Mask\ group.png') ;
    background-size: cover; 
    position: relative;
}

.about-sec1 .overlay{

    position: absolute;
    height: 100%;
    width: 100%;
    background: linear-gradient(180deg, #D0BD93 14.44%, rgba(217, 217, 217, 0) 100%);
}



.about-sec2{
    height: auto;
     
}


.about-sec2 .container{
    height: 100%;
}


.about-sec2 .row{
    height: 100%;
}

.about-sec2 .imgbox{
    background: #C2B59B; 
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: relative;
    
}
.about-sec2 .imgbox img{
    height:95% ;
    width: 95%;
    z-index: 1;
}

.about-sec2 .imgbox .poly img{
    position: absolute;
    opacity: .4;
    right:0 ;
    z-index:0;
    top:0 ;
}

.about-sec2 .text1{
    position: relative;
    margin-bottom: 100px;
}

.about-sec2 .text2{
    position: relative;
    margin-bottom: 100px;
}

.about-sec2 .text3{
    position: relative;
}

.about-sec2 .text1 .bino{
    position: absolute;
    right: -90px;
    height: 60px;
    width: 60px;
    background: #13BAFF;
    top:0 ;
    z-index: 10;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;

}

.about-sec2 .text2 .light{
    position: absolute;
    right: -90px;
    height: 60px;
    width: 60px;
    background: #13BAFF;
    top:0 ;
    z-index: 10;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;

}

.about-sec2 .text3 .target{
    position: absolute;
    right: -90px;
    height: 60px;
    width: 60px;
    background: #13BAFF;
    top:0 ;
    z-index: 10;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;

}
.about-sec2 .text1 .bino img{
    height: 80%;
    width:80% ;
}

.about-sec2 .text2 .light img{
    height: 80%;
    width:80% ;
}


.about-sec2 .text3 .target img{
    height: 80%;
    width:80% ;
}


.about-sec2 .textbox h4{
    color: #000;
    font-family:'Tajawal', sans-serif ;

}


.about-sec2 .textbox p{
    color: #000;
    font-family:'Tajawal', sans-serif ;
    font-size: 20px;

}
.about-sec2 .text1 .line{

    background-color:#13BAFF ;
    height: 4px;
    width: 50px;
    border-radius: 100px;
    margin-bottom: 20px;
    position: relative;
}

.about-sec2 .text2 .line{

    background-color:#13BAFF ;
    height: 5px;
    width: 75px;
    margin-bottom: 20px;
    border-radius: 100px;
    position: relative;
}

.about-sec2 .text3 .line{

    background-color:#13BAFF ;
    height: 5px;
    width: 75px;

    border-radius: 100px;
    margin-bottom: 20px;
    position: relative;
}


.about-sec2 .text1 .line .dot{
    position: absolute;
    right: -12px;
    height: 6px;
    width: 6px;
    border-radius: 50%;
    background: #13BAFF;
    top:-1px ;
}

.about-sec2 .text2 .line .dot{
    position: absolute;
    right: -12px;
    height: 6px;
    width: 6px;
    border-radius: 50%;
    background: #13BAFF;
    top:-1px ;
}


.about-sec2 .text3 .line .dot{
    position: absolute;
    right: -12px;
    height: 6px;
    width: 6px;
    border-radius: 50%;
    background: #13BAFF;
    top:-1px ;
}














































.about-sec3{
    height: 50vh;
}
.about-sec3 .container{
    height: 100%;
}
.about-sec3 .row {
    height: 100%;
    margin-top: 80px;
    
}


.about-sec3 .card{
    height: 280px;
    width: 75%;
    background-color: #fff;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
   text-align: center;
   position: relative;
   display: flex;
   justify-content: center;
   
}
   .about-sec3 .card img{
    border-radius: 16px;
    width: 90%;
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    top: -20px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px 
   }

   .about-sec3 .card h4{
    margin-top: 40%;
    color: #000;
    font-family:'Tajawal', sans-serif ;
   }
   
   .about-sec3 h3{
    color: #000;
    font-family:'Tajawal', sans-serif ;
   }



   .about-sec3 .line{

    background-color:#13BAFF ;
    height: 4px;
    width: 130px;
    border-radius: 100px;
    margin-bottom: 20px;
    position: relative;
    margin-right: 10px;
}


.about-sec3 .line .dot{
    position: absolute;
    right: -10px;
    height: 5px;
    width: 5px;
    border-radius: 50%;
    background: #13BAFF;
    top:-1px ;
}



@media (min-width: 768px) and (max-width: 992px){
    .about-sec3 {
        height: auto;
    }


    .about-sec3 .card{
        margin-bottom: 50px;
    }

    .about-sec3 .row{
        display: flex;
        justify-content: center;
    }
}


@media (min-width: 576px) and (max-width: 767px){

    .about-sec3 {
        height: auto; 

    }


    .about-sec3 .card{
        margin-bottom: 50px;
        height: 400px;
        width:80% ;
    }

    .about-sec3 .row{
       
    }

}
@media (max-width: 576px)


{

    .about-sec1{
      height: 50vh;
      background-size: cover;
      background: url('/assets/img/Mask\ group.png') center;
    }

    .about-sec3 {
        height: auto; 
        display: flex;
        justify-content: center;
        align-items: center;

    }
    .about-sec3 .col-12{
        display: flex;
        justify-content: center;
    }

    .about-sec3 .card{
        margin-bottom: 50px;
        height: 300px;
        width:300px ;
    }

    .about-sec3 .row{
        display: flex;
        justify-content: center;
        align-items: center;
       
    }

    

}














/*  style list page  */

/*  style list-=sec2 page  */

.list-sec2{
    height: 60vh;

}

.list-sec2 .container{
    height: 100%;
}

.list-sec2 .row{
    height: 60%;
}


.list-sec2 .card{
    height:190px;
    width: 90%;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    position: relative;
  
}

.list-sec2 h3{
    color: #000;
    font-family:'Tajawal', sans-serif ;
}

.list-sec2 .card h4{
    z-index: 2;
    display: inline;
    font-family: 'Tajawal', sans-serif;
    color: #000;
    font-weight: 400;
    text-align: right;
  
}



.list-sec2 .card .imgbox{
    height: 100%;
    width: 100%;
    position: relative;
    
    

  
}



.list-sec2 .card .imgbox img{
    position: absolute;

  
}

.list-sec2 .card .imgbox .poly{
    
    width: 60%;
    height:100% ;
    z-index:2 ;
    top: -63%;
    left:0 ; 
    border-radius: 10px;
}

.list-sec2 .card .imgbox .food{
    width: 47%;
    height:155px ;
    z-index:3 ;
    left: 0;
    bottom: 0;
}

.list-sec2 .card .imgbox .food1{
    width: 65%;
    height:175px ;
    z-index:3 ;
    left: 0;
    bottom: 0;
}





.list-sec2 .line{

    background-color:#13BAFF ;
    height: 4px;
    width:90px;
    border-radius: 100px;
    margin-bottom: 20px;
    position: relative;
    margin-right: 10px;
}


.list-sec2 .line .dot{
    position: absolute;
    right: -10px;
    height: 5px;
    width: 5px;
    border-radius: 50%;
    background: #13BAFF;
    
}






.list-sec2 .swiper {
    width: 100%;
    height: 100%;
  }

  .list-sec2 .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;

  }

  .list-sec2 .swiper-slide{
    
  }

   

  


  
  @media (min-width: 768px) and (max-width: 991px){
    .list-sec2 .swiper-slide{
   
        width: 335px !important;
    }

  }




@media (min-width: 576px) and (max-width: 767px) { 


    .list-sec2{
        height: auto;
    
    }

    .list-sec2 .card{
        margin-bottom: 50px;
       height: 230px;
    }
    
    .list-sec2 .card .imgbox .poly{
    
        width: 60%;
        height:100% ;
        z-index:2 ;
        top: -47%;
        left:0 ; 
        border-radius: 10px;
    }
    
    .list-sec2 .card .imgbox .food{
        width: 42%;
        height:155px ;
        z-index:3 ;
        left: 0;
        bottom: 0;
    }
    
    .list-sec2 .card .imgbox .food1{
        width: 60%;
        height:175px ;
        z-index:3 ;
        left: 0;
        bottom: 0;
    }


    .list-sec2 .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    width: 100% !important;
  }



     }


     @media (max-width: 576px)  { 


        .list-sec2{
            height: auto;
        
        }
    
        .list-sec2 .card{
            margin-bottom: 50px;
           height: 230px;
        }
        
        .list-sec2 .card .imgbox .poly{
        
            width: 60%;
            height:100% ;
            z-index:2 ;
            top: -47%;
            left:0 ; 
            border-radius: 10px;
        }
        
        .list-sec2 .card .imgbox .food{
            width: 42%;
            height:155px ;
            z-index:3 ;
            left: 0;
            bottom: 0;
        }
        
        .list-sec2 .card .imgbox .food1{
            width: 60%;
            height:175px ;
            z-index:3 ;
            left: 0;
            bottom: 0;
        }
    
       
    
        .list-sec2 .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;
        
            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
            width: 100% !important;
          }
    
    
         }
    

         @media (min-width: 768px) and (max-width: 991px) { 


            .list-sec2{
                height: auto;
            
            }
        
           .list-sec2 .card{
            margin-bottom: 50px;
           }
            
           
        
        
          
        
        
        
             }














/* start style sec3 in list page */

.list-sec3{
    height: 100vh;

}

.list-sec3 .container{
    height: 100%;
}

.list-sec3 .row{
    height: 100%;
}


.list-sec3 .card{
    height:250px;
    width: 85%;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    position: relative;
    margin-bottom: 30px;
  
}

.list-sec3 h3{
    color: #000;
    font-family:'Tajawal', sans-serif ;
}

.list-sec3 .card h4{
    z-index: 2;
    display: inline;
    font-family: 'Tajawal', sans-serif;
    color: #000;
    font-weight: 400;
  
}



.list-sec3 .card .imgbox{
    height: 100%;
    width: 100%;
    position: relative;
    
    

  
}



.list-sec3 .card .imgbox img{
    position: absolute;

  
}

.list-sec3 .card .imgbox .poly{
    
    width: 50%;
    height:100% ;
    z-index:2 ;
    bottom: 42%;
    left:0 ; 
    border-radius: 10px;
}


.list-sec3 .card .imgbox .poly1 {
    width: 16%;
    height: 43%;
    z-index: 2;
    top: -42.3%;
    left: 2px;
    border-radius: 10px;
    transform: rotate(90deg);
}

.list-sec3 .card .imgbox .food{
    width: 45%;
    height:190px ;
    z-index:3 ;
    left: 0;
    bottom: 0;
}

.list-sec3 .card .imgbox .small{
    width: 45%;
    height: 150px;
    z-index:3 ;
    left: 18%;
    bottom: 0;
}

.list-sec3 .card .imgbox .food1{
    width: 55%;
    height:205px ;
    z-index:3 ;
    left: 0;
    bottom: 0;
}





.list-sec3 .line{

    background-color:#13BAFF ;
    height: 4px;
    width:190px;
    border-radius: 100px;
    margin-bottom: 20px;
    position: relative;
    margin-right: 10px;
}


.list-sec3 .line .dot{
    position: absolute;
    right: -10px;
    height: 5px;
    width: 5px;
    border-radius: 50%;
    background: #13BAFF;
    
}



@media (min-width: 576px) and (max-width: 767px) { 


.list-sec3{
    height: auto;

}



 }




 @media (min-width: 768px) and (max-width: 991px) { 


    .list-sec3{
        height: auto;
    
    }

   .list-sec3 .card{
    margin-bottom: 50px;
   }
    
   .list-sec3 .card .imgbox .poly1 {
    width: 16%;
    height: 43%;
    z-index: 2;
    top: -49.3%;
    left: 14px;
    border-radius: 10px;
    transform: rotate(90deg);
}






     }


     @media (min-width: 992px) and (max-width: 1200px) {

        .list-sec3 .card .imgbox .poly1 {
            width: 13%;
            height: 43%;
            z-index: 2;
            top: -49%;
            left: 13px;
            border-radius: 10px;
            transform: rotate(90deg);
        }





     }

     @media (min-width: 1400px) and (max-width: 2000px) {

        .list-sec3 .card .imgbox .poly1 {
            width: 11%;
            height: 43%;
            z-index: 2;
            top: -46%;
            left: 8px;
            border-radius: 10px;
            transform: rotate(90deg);
        }





     }








     @media (max-width: 576px){

     .list-sec3 .card .imgbox .poly1 {
        width: 16%;
        height: 43%;
        z-index: 2;
        top: -45.3%;
        left: 14px;
        border-radius: 10px;
        transform: rotate(90deg);
    }


    .list-sec3 {
        height: auto;
    }
}















.sub-list-sec2{
    height: 70vh;

}

.sub-list-sec2 .container{
    height: 100%;
}

.sub-list-sec2 .row{
    height: 100%;
}


.sub-list-sec2 .card{
    height:190px;
    width: 90%;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    position: relative;
  
}

.sub-list-sec2 h3{
    color: #000;
    font-family:'Tajawal', sans-serif ;
}

.sub-list-sec2 .card h4{
    z-index: 2;
    display: inline;
    font-family: 'Tajawal', sans-serif;
    color: #000;
    font-weight: 400;
  
}



.sub-list-sec2 .card .imgbox{
    height: 100%;
    width: 100%;
    position: relative;
    
    

  
}



.sub-list-sec2 .card .imgbox img{
    position: absolute;

  
}

.sub-list-sec2 .card .imgbox .poly{
    
    width: 60%;
    height:100% ;
    z-index:2 ;
    top: -63%;
    left:0 ; 
    border-radius: 10px;
}

.sub-list-sec2 .card .imgbox .food{
    width: 47%;
    height:155px ;
    z-index:3 ;
    left: 0;
    bottom: 0;
}

.sub-list-sec2 .card .imgbox .food1{
    width: 65%;
    height:175px ;
    z-index:3 ;
    left: 0;
    bottom: 0;
}





.sub-list-sec2 .line{

    background-color:#13BAFF ;
    height: 4px;
    width:90px;
    border-radius: 100px;
    margin-bottom: 20px;
    position: relative;
    margin-right: 10px;
}


.sub-list-sec2 .line .dot{
    position: absolute;
    right: -10px;
    height: 5px;
    width: 5px;
    border-radius: 50%;
    background: #13BAFF;
    
}




@media (min-width: 576px) and (max-width: 767px) { 


    .sub-list-sec2{
        height: auto;
    
    }

    .sub-list-sec2 .card{
        margin-bottom: 50px;
       height: 230px;
    }

    
    
    .sub-list-sec2 .card .imgbox .poly{
    
        width: 60%;
        height:100% ;
        z-index:2 ;
        top: -47%;
        left:0 ; 
        border-radius: 10px;
    }
    
    .list-sec2 .card .imgbox .food{
        width: 42%;
        height:155px ;
        z-index:3 ;
        left: 0;
        bottom: 0;
    }
    
    .sub-list-sec2 .card .imgbox .food1{
        width: 60%;
        height:175px ;
        z-index:3 ;
        left: 0;
        bottom: 0;
    }






     }


     @media (max-width: 576px)  { 


        .sub-list-sec2{
            height: auto;
        
        }
    
        .sub-list-sec2 .card{
            margin-bottom: 50px;
           height: 230px;
        }
        
        .sub-list-sec2 .card .imgbox .poly{
        
            width: 60%;
            height:100% ;
            z-index:2 ;
            top: -47%;
            left:0 ; 
            border-radius: 10px;
        }
        
        .sub-list-sec2.card .imgbox .food{
            width: 42%;
            height:155px ;
            z-index:3 ;
            left: 0;
            bottom: 0;
        }
        
        .sub-list-sec2 .card .imgbox .food1{
            width: 60%;
            height:175px ;
            z-index:3 ;
            left: 0;
            bottom: 0;
        }
    
    
    
    
    
    
         }
    

         @media (min-width: 768px) and (max-width: 991px) { 


            .sub-list-sec2{
                height: auto;
            
            }
        
            .sub-list-sec2 .card{
            margin-bottom: 50px;
           }
            
           
        
        
        
        
        
        
             }












/* start style page food item*/


.item-sec2 {
    height: auto;
}

.item-sec2 .card{
    height: 100%;
    width: 75%;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    

}




.item-sec2 .card .imgbox{

    height:70% ;
    width: 100%;
    
}


.item-sec2 .card .imgbox img{

    height:100% ;
    width: 100%;
}


.item-sec2 .card .name{
padding: 10px 20px;

}


.item-sec2 .card .name h4{
    color: #000;
    font-family: 'Tajawal', sans-serif;
    
    }
    .item-sec2 .card .price h6{
        color: #000;
    font-family: 'Tajawal', sans-serif;
    }

.item-sec2 .card .price{
    padding: 10px 20px;
    display: flex;
    justify-content: flex-end;
    }



    .item-sec2 h3{
        color: #000;
        font-family:'Tajawal', sans-serif ;
        margin-bottom: 50px;
        margin-top: 50px;
       }
    
    
    
       .item-sec3 .line{
    
        background-color:#13BAFF ;
        height: 4px;
        width: 130px;
        border-radius: 100px;
        margin-bottom: 20px;
        position: relative;
        margin-right: 10px;
    }
    
    
    .item-sec2 .line .dot{
        position: absolute;
        right: -10px;
        height: 5px;
        width: 5px;
        border-radius: 50%;
        background: #13BAFF;
        top:-1px ;
    }

    .item-sec2 .box{
        display: flex;
        justify-content: center;
    }



    @media (min-width: 768px) and (max-width: 991px){
        .item-sec2 {
            height: auto;
        }

    }


    @media (min-width: 576px) and (max-width: 767px){
        .item-sec2 {
            height: auto;
        }

    }


    @media (max-width: 575px) {
        .item-sec2 {
            height: auto;
        }

    }


























/* style page food details*/


#featured_img img{
    width: 300px;
    border-radius: 1rem;
    height: 200px;
}
#thumb_img img {
  max-width: 100%;
}

#thumb_img img  {
  margin-top:5%;
  
   
   height:140px ;
    width: 92%;
    cursor: pointer;
    margin-right:2%;
    border:2px solid #eee;
    box-sizing:border-box;
    border-radius: 1rem;
    
   
  }
  .details-sec2  h3{
    color: #000;
    font-family:'Tajawal', sans-serif ;

  }
  .details-sec2  h3{
    color: #000;
    font-family:'Tajawal', sans-serif ;
    padding: 10px;
  }

  .details-sec2  h6{
    color: #000;
    font-family:'Tajawal', sans-serif ;
    padding: 16px;
  }

  .details-sec2  p{
    color: #000;
    font-family:'Tajawal', sans-serif ;
    padding: 16px;
  }



  .details-sec2 .line{
    
    background-color:#13BAFF ;
    height: 4px;
    width: 170px;
    border-radius: 100px;
    margin-bottom: 20px;
    position: relative;
    margin-right: 15px;
}


.details-sec2 .line .dot{
    position: absolute;
    right: -8px;
    height: 5px;
    width: 5px;
    border-radius: 50%;
    background: #13BAFF;
    top:-1px ;
}
.details-sec2{
    height: auto;
}

















.gallary-sec2  h3{
  color: #000;
  font-family:'Tajawal', sans-serif ;

}

.gallary-sec2 .line-box{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.gallary-sec2 .line{
    
    background-color:#13BAFF ;
    height: 4px;
    width: 125px;
    border-radius: 100px;
    margin-bottom: 20px;
    position: relative;
    margin-right: 10px;
}


.gallary-sec2 .line .dot{
    position: absolute;
    right: -8px;
    height: 5px;
    width: 5px;
    border-radius: 50%;
    background: #13BAFF;
    top:-1px ;
}









.gallary-sec2 .line1{
    
    background-color:#13BAFF ;
    height: 7px;
    width: 60px;
    border-radius: 100px;
    margin-bottom: 20px;
    position: relative;
    margin-right: ;
}


.gallary-sec2 .line-box .line1 .dot1{
    position: absolute;
    right: -25px;
    height:7px;
    width: 12px;
    border-radius: 30%;
    background: #13BAFF;
    top:0 ;
}

.gallary-sec2 .line1 .dot2{
    position: absolute;
    left: -25px;
    height: 7px;
    
    width: 12px;
    border-radius: 30%;
    background: #13BAFF;
    top:0;
}











/* start style gallary page */

.gallary-sec2{
     height: auto;
}

.gallary-sec2 .my-6 {
    margin-top: 4rem !important;
    margin-bottom: 0 !important;
}


@media (max-width: 575px) {
   
    #slider {
        position: relative;
        width: 70% !important;
       height: 200px !important;
        margin: 80px auto;
        font-family: 'Helvetica Neue', sans-serif;
        perspective: 1400px;
        transform-style: preserve-3d;
      }

}





#slider {
    position: relative;
    width: 70%;
    height: 26vw;
    margin: 80px auto;
    font-family: 'Helvetica Neue', sans-serif;
    perspective: 2200px;
    transform-style: preserve-3d;
  }
  
  input[type=radio] {
    position: relative;
    top: 108%;
    left: 50%;
    width: 18px;
    height: 18px;
    margin: 0 15px 0 0;
    opacity: 0.4;
    transform: translateX(-83px);
    cursor: pointer;
    opacity: 0;
  }
  
  
  input[type=radio]:nth-child(5) {
   
  }
  
  input[type=radio]:checked {
    opacity: 0;
  }
  
  
  #slider label img{
    border-left: 5px solid #fff;
    border-right: 5px solid #fff;
  }
  
  #slider label {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    color: white;
    font-size: 70px;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 400ms ease;
  }
  
  #slide1 {
    background: tomato;
  }
  
  #slide2 {
    background: yellowgreen;
  }
  
  #slide3 {
    background: dodgerblue;
  }
  
  #slide4 {
    background: slateblue;
  }
  
  #slide5 {
    background: violet;
  }
  
  
  /* Slider Functionality */
  
  /* Active Slide */
  #s1:checked ~ #slide1, #s2:checked ~ #slide2, #s3:checked ~ #slide3, #s4:checked ~ #slide4, #s5:checked ~ #slide5 {
    box-shadow: 0 13px 26px rgba(0,0,0, 0.3), 0 12px 6px rgba(0,0,0, 0.2);
    transform: translate3d(0%, 0, 0px);
  }
  
  /* Next Slide */
  #s1:checked ~ #slide2, #s2:checked ~ #slide3, #s3:checked ~ #slide4, #s4:checked ~ #slide5, #s5:checked ~ #slide1 {
    box-shadow: 0 6px 10px rgba(0,0,0, 0.3), 0 2px 2px rgba(0,0,0, 0.2);
    transform: translate3d(15%, 0, -100px);
  }
  
  
  /* Next to Next Slide */
  #s1:checked ~ #slide3, #s2:checked ~ #slide4, #s3:checked ~ #slide5, #s4:checked ~ #slide1, #s5:checked ~ #slide2 {
    box-shadow: 0 1px 4px rgba(0,0,0, 0.4);
    transform: translate3d(30%, 0, -250px);
  }
  
  /* Previous to Previous Slide */
  #s1:checked ~ #slide4, #s2:checked ~ #slide5, #s3:checked ~ #slide1, #s4:checked ~ #slide2, #s5:checked ~ #slide3 {
    box-shadow: 0 1px 4px rgba(0,0,0, 0.4);
    transform: translate3d(-30%, 0, -250px);
  }
  
  /* Previous Slide */
  #s1:checked ~ #slide5, #s2:checked ~ #slide1, #s3:checked ~ #slide2, #s4:checked ~ #slide3, #s5:checked ~ #slide4 {
    box-shadow: 0 6px 10px rgba(0,0,0, 0.3), 0 2px 2px rgba(0,0,0, 0.2);
    transform: translate3d(-15%, 0, -100px);
  }
  
  
  
  
  
  
.gallary-sec3{

    height: auto;
    
}

.gallary-sec3 .container{

    height: auto;
   
    
}
  
.gallary-sec3 .row1{
    height: auto;
   
}

.gallary-sec3 .row1 .imgbox{
    height: 100%;
    width: 100;
}

.gallary-sec3 .row1 .imgbox img{
    height: 100%;
    width: 100%;
}

.gallary-sec3 .row3{
    height: auto;
   
}

.gallary-sec3 .row3 .imgbox{
    height: 100%;
    width: 100;
}

.gallary-sec3 .row3 .imgbox img{
    height: 100%;
    width: 100%;
}


.gallary-sec3 .row2{
    height: auto;

}


.gallary-sec3 .row2 .imgbox{
    height: 100%;
    width: 100;
}

.gallary-sec3 .row2 .imgbox img{
    height: 100%;
    width: 100%;
}


.gallary-sec3 .row2 .sub-row .imgbox{
    height:97% ;
}



@media (max-width: 991px){

    .gallary-sec3 .row1 .imgbox{
        height: 100%;
        width: 100;
        margin-bottom: 20px;
    }
    
    .gallary-sec3 .row1 .imgbox img{
        height: 97%;
        width: 100%;
        margin-bottom: 20px;
    }


    .gallary-sec3 .row1 .imgbox{
        height: 100%;
        width: 100;
        margin-bottom: 20px;
    }
    
    .gallary-sec3 .row2 .imgbox img{
        height: 97%;
        width: 100%;
        margin-bottom: 20px;
    }



    .gallary-sec3 .row3 .imgbox{
        height: 100%;
        width: 100;
        margin-bottom: 20px;
    }
    
    .gallary-sec3 .row3 .imgbox img{
        height: 97%;
        width: 100%;
        margin-bottom: 20px;
    }

}




/* start style product-page */ 

.product-sec2{
    height: auto;
}

.product-sec2 .container{
    height: 100%;
}

.product-sec2 .container .row{
    height: 100%;
    width: 100%;
}

.product-sec2 .container .row .box .imgbox{
    height: 75%;
    width: 100%;
}
.product-sec2 .container .row .box .imgbox img{
    height: 100%;
    width: 100%;
}

.product-sec2 .container .row .box .textbox{
    text-align: center;
    padding-top: 20px;
    width:100% ;
}


.product-sec2 .container .row a{

    width:154px ;
    height: 35px;
    background-color: #30BAFF;
    color: #fff;
     font-family:'Tajawal', sans-serif ;
}

.product-sec2 .container .row h4{
    color: #000;
    font-family: 'Tajawal', sans-serif ;
}


.product-sec2 .container .row .line{
    width: 140px;
    height: 3px;
    background-color: #30BAFF;
    border-radius: 20px;
    position: relative;
    margin-right: 12px;

}

.product-sec2 .container .row .line::before{
    content: '';
    position: absolute;
    bottom:0 ;
    height: 4px;
    right: -10px;
    width: 5px;
    z-index: 100;
    background-color: #30BAFF;
    border-radius: 50px;

}


.product-sec2 .container .row .box .textbox h5{

    color: #000;
    font-family:'Tajawal', sans-serif ;
}


/* start style employe message */



.emp-sec2{
    height: auto;
}

.emp-sec2 h4{
    color: #000;
    font-family:'Tajawal', sans-serif ;
}

.emp-sec2 .title{
    margin-bottom: 50px !important;
}

.emp-sec2 .text-box{
    color: #000;
    font-family:'Tajawal', sans-serif ;
    padding: 10px;

}

.emp-sec2 .text-box p{
    font-size: 18px;
}

.emp-sec2 .imgbox{
    position: relative;
    padding: 10px;

    
}

.emp-sec2 .imgbox .polly{
    position:absolute ;
    z-index:0 ;
    left: 0;
    height: 90%;

}

.emp-sec2 .imgbox .pic{
    position:relative ;
    z-index: 5;
    left:0 ;
    top:0;
    height: 100%;
    border-radius:16px ;
    width:80% ;
     
}

.emp-sec2 .row2{
    height: 100% ;
    border-radius: 1rem;
    padding: 16px;
}



.emp-sec2 .container .row .line{
    width: 140px;
    height: 5px;
    background-color: #30BAFF;
    border-radius: 20px;
    position: relative;
    margin-right: 12px;

}

.emp-sec2 .container .row .line::before{
    content: '';
    position: absolute;
    bottom:0 ;
    height: 5px;
    right: -10px;
    width: 5px;
    z-index: 100;
    background-color: #30BAFF;
    border-radius: 50px;

}


.emp-sec3 label{
    color: #000;
}


.emp-sec3 .container .line{
    width: 140px;
    height: 5px;
    background-color: #30BAFF;
    border-radius: 20px;
    position: relative;
    margin-right: 12px;

}

.emp-sec3 .container .line::before{
    content: '';
    position: absolute;
    bottom:0 ;
    height: 5px;
    right: -10px;
    width: 5px;
    z-index: 100;
    background-color: #30BAFF;
    border-radius: 50px;

}

.emp-sec3 h4{
    color: #000;
    font-family:'Tajawal', sans-serif ;
}



/* style companies page */

.comp-sec2{
    height: auto;
}

.comp-sec2 .imgbox{
    width: 100%;
    position: relative;
    height: 100%;
}

.comp-sec2 .imgbox .polly{

    position: absolute;
    right:-5px;
    z-index: 0;
    height: 100%;


}

.comp-sec2 .imgbox .pic{
    width: 80%;
    position: relative;
    z-index:3 ;
    height: 80%;
    border-radius: 2rem;
}


.comp-sec2 h4{
color: #000;
font-family:'Tajawal', sans-serif ;

}

.comp-sec2 p{
    color: #000;
    font-family:'Tajawal', sans-serif ;
    font-weight: 600;
    
    }

.comp-sec2 .container .line{
    width: 350px;
    height: 5px;
    background-color: #30BAFF;
    border-radius: 20px;
    position: relative;
    margin-right: 12px;

}

.comp-sec2 .container .line::before{
    content: '';
    position: absolute;
    bottom:0 ;
    height: 5px;
    right: -10px;
    width: 5px;
    z-index: 100;
    background-color: #30BAFF;
    border-radius: 50px;

}




@media (max-width: 576px){
    .comp-sec2 .imgbox{
        width: 100%;
        position: relative;
        height: 100%;
        display: flex;
        justify-content: center;
    }
    .comp-sec2 .imgbox .polly{
       right: 20px;
    }

    .comp-sec2 p{
        padding: 0 !important;
    }

}