/* VARIABLES */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&display=swap');

:root{
  --mainColor:#BE0101;
  --onehoverColor:#af0000b7;
  --twohoverColor:#ffffff;
  --mainColorC:#1EB8A4;
  --backColor:#edebeb;
  --smallColor:#1D1D1D;
  --ParagrafColor:#585858;
  --footerBtn:#D04515;
  --mainFont:"Almarai", sans-serif;
  --h1:2.5rem;
  --h2:30px;
  --h3:24px;
  --h4:20px;
  --p:16px;
  --h5:14px;
  --h6:14px;
}
/*  */

/* MAIN */
body {
  font-family: var(--mainFont) !important;
  background-color: var(--backColor) !important;
  
  
}
.topNav,.footer,.navbar .btn, .btn{
  background-color: var(--smallColor) !important;
  
}
.reserve,.fa-calendar,.active,.article-headline,span,.article a,.home .label i{
color: var(--mainColor) !important;
}
a{
  text-decoration: none !important;
}
.rtl {
  direction: rtl;
  text-align: right; /* Align text to the right, if needed */
}
.ltr{
  direction: ltr !important;
  text-align: left !important; /* Align text to the right, if needed */
}
h1{
font-size: var(--h1) ;
line-height: 1.3;
}
h2{
font-size: var(--h1) ;
line-height: 1.2;
}
h3{
font-size: var(--h3) !important;
line-height: 1.5;
}
h4{
font-size: var(--h4) !important;
font-weight: 100;  
line-height: 1.8;
}
h5{
font-size: var(--h5) ;
margin-bottom: 0px;
}
h6{
font-size: var(--h6) !important;
line-height: 1.8;
}
p{
font-size: var(--p) !important;
color: var(--ParagrafColor) !important;
line-height: 1.8;
}
.bg-mainColor{
  background-color: var(--mainColor) !important;
}
.text-mainColor{
  color: var(--mainColor) !important;
}
.text-paragraf{
color: var(--ParagrafColor) !important;
}
.contain{
  width: 80% !important;
  margin: auto !important;
}

.social-ic{
  font-size: 22px !important;
  margin: 0;
  list-style: none;
}
.social-ic a{ 
  color: white !important;
}
span{
  font-weight: bold;
}
.list-style{
  list-style: none !important;
}
.btn:hover{
background-color: var(--onehoverColor) !important;
color: var(--twohoverColor) !important;
}

.team-details-image-box img {
    max-width: 300px !important;
}
/*  */
/* TOPNAV */
.social-ic{
    font-size: 16px !important;
  }
  .top-nav{
    
    background-color: var(--mainColor) !important;
}
/*  */
/* NAV */
.nav-item{
    font-weight: 600 !important;
    color: black;
}
.nav-btn:hover,button:hover{
background-color:var(--onehoverColor) !important;
}
.form-select{
    box-shadow: none !important;
    border: none !important;
    width: auto ;
}
/*  */
/* Header */
.header{
  height: 80vh;
}
.header .contain{
  width: 50% !important;
  text-align: center !important;
  z-index: 7887 !important;
}
before
.layer{
  background-color: #00000057 !important;
}
.header img {

  object-fit: cover;

}

.header button:hover {
background-color: transparent !important;
}


@media screen and (max-width: 600px) {
  .header .contain {
      width: 90% !important;
  }
}

.navbar-brand img {
    width: 100px !important;
}
/*  */


/* ABOUT */
  .adventage i{
    color: var(--mainColor) !important;
  }

  .adventage ul{
    display:flex; 
    flex-wrap: wrap;
    align-items: center;
    text-decoration: none !important;
  }
  .adventage li{
    font-weight: 500;
    display: flex;
    align-items: center;
    flex: 0 0 50%; max-width: 50%; 
  }
  .adventage li::before {
    font-family: "Font Awesome 6 Free";
    content: "\f058";
    font-weight: 900;
    font-size: 1rem;
    color: var(--mainColor);
    margin: 10px 0px 10px 10px;
  }
  
/*  */
.team-details {
  background-color: white;
  padding: 40px 20px 20px 20px;
}


.newsletter-popup-inner {
  padding-top: 20px;
}

.content-column ul {
  list-style: none;
  text-align: right;
  padding-right: 0;
}

.timetable {
  padding: 0 30px;
}

.datesForm {
  padding: 0 30px;
}

.link-btn{
margin-top: 20px;
}


.inner-page {
  padding: 20px 30px;
  text-align: right;
}


/* Gallary */
.link-disapled {
  pointer-events: none !important;
  cursor: default !important;
}

.gallery-img {
  height: 300px; /* Set fixed height */
  object-fit: cover; /* Ensures the image covers the entire area */
  width: auto; /* Ensure the image takes full width of its parent */
}

#lg-container-1 {
  direction: ltr;
}

/*  */
/* ARTICLE */
.home-article .writer-img{
width: 20px;
height: 20px;

}

.home-article .article-img{
  height: 300px;
  object-fit: cover; /* Change this to contain, fill, etc. */
border-radius: 15px 15px 0px 0px;
}

.home-article-card{
  border-radius: 15px 15px 0px 0px;
}

/*  */










/* footer */
.footer button{
  background-color: var(--footerBtn) ;
  }
.footer a{
    color: white !important;
}
.footer h5{
    padding: 8px 0px;
}
.footer-welcome-p{
line-height: 26px;
}

/* FOOTER SEARCH BAR */
.search-container {
    width: 300px;
}

.footer input[type="text"] {
    width: 100% !important;
    padding: 10px  !important;
    border: 1px solid #ccc !important;
    border-radius: 5px !important;
    outline: none !important;
    box-sizing: border-box !important;
    margin-bottom: 10px;
    /* background-color: #76b233 !important; */
}
.search-container input[type="text"]::placeholder {
    color: #aec6d1; /* Change this to your desired color */
}

.footer button {
  width: 100%;
  padding: 10px 0px;
    border: none;
    color: white;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
    outline: none;
}


/* FOOTER CONTACT UNDERLINE */
.under-line {
    position: relative;
    display: inline-block;
}

.under-line::after {
    content: "";
    display: block;
    width: 70px; /* Adjust the width of the line */
    height: 3px; /* Adjust the height of the line */
    background-color: var(--mainColor) !important; /* Change to your desired color */
    margin: 0.5rem 0 0; /* Adjust spacing */
}
.box{
  height:300px !;  
  width: 500px; /*could be different, but you ought to have some min*/
  overflow:hidden;
}

.box img {
  height: 100%;
  width: 100%;   
  -ms-transform-origin: 100% 100% !important; /* IE 9 */
  -webkit-transform-origin: 100% 100% !important; /* Safari and Chrome */
  -moz-transform-origin: 100% 100% !important; /* Firefox */
  -o-transform-origin: 100% 100% !important; /* Opera */
  transform-origin: 100% 100% !important;
}
.footer a:hover{
color: var(--backColor) !important;
}



/* /////////////// ABOUT ////////////////// */
.contact input ,.contact textarea{
  border: none !important;
  margin: 10px 0px ;
  padding: 10px;
  background-color: transparent !important;
  border-bottom: 1px solid black !important;
}

 p{
color: var(--ParagrafColor) !important;
margin: 10px 0px;
}

.adventage h4::before {
  content: "\f058"; /* Unicode for the check-circle icon from Font Awesome */
  font-family: "Font Awesome 6 Free"; /* Ensure the correct Font Awesome font is used */
  font-weight: 900; /* Font Awesome solid style */
  transform: translateY(-50%); /* Center the icon vertically */
  font-size: 1rem; /* Adjust the size of the icon */
  color: var(--mainColor); /* Set the color of the icon */
  margin: 10px 0px 10px 10px; /* Optional: Add some spacing between the text and the icon */
}


.btn {
  display: inline-block !important;
  width: auto !important;
  padding: 12px 24px; }

.overlay-section {
  position: relative;
  overflow: hidden; 
height: 400px;

}
.overlay-section img{
object-fit: cover;
width: 100%;
height: 100%;
object-position: center 80%; 
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.616); 
  z-index: 1; 
}

.content {
  position: relative;
  z-index: 2; 
  color: white; 
  padding: 20px; 
}



/* //////////////////// Article/////////////// */
.artcile-post p{
  font-weight: 100 !important;
  font-size: 18px !important;
  color: #9D9B9B !important;
  }
  
.artcile-post  p,.artcile-post  h4,.artcile-post h5{
    font-weight: 400 !important;
    line-height: 20px !important;
}
.sub-article {
  font-size: .9rem !important;
}
.sub-article img{
  max-height: 10rem;
  object-fit: cover;
}
  .sub-article p{
  font-size: .9rem !important;
}

.article .col-md-6 img{
  height: 150px;
  object-fit: cover;
}
.first-big-img{
  height: auto !important;

}
.article h4{
  color: black !important;
  font-weight: bold !important;
}

/* /////////////// Gallery //////// */
.gallery-back{
  object-position: center 60% !important;
}

/* /////////////////////////////////// */
.gallery-grid {
  display: grid;
  gap: 16px; 
  grid-template-columns: repeat(12, 1fr); 
}
.gallery-grid a:nth-child(1) {
  grid-column: span 2; 
}
.gallery-grid a:nth-child(2) {
  grid-column: span 8; 
}

.gallery-grid a:nth-child(3) {
  grid-column: span 2; 
}
.gallery-grid a:nth-child(4) {
  grid-column: span 4; 
}
.gallery-grid a:nth-child(5) {
  grid-column: span 2; 
}
.gallery-grid a:nth-child(6) {
  grid-column: span 4; 
}
.gallery-grid a:nth-child(7) {
  grid-column: span 2; 
}
.gallery-grid a:nth-child(8) {
  grid-column: span 2; 
}
.gallery-grid a:nth-child(9) {
  grid-column: span 4; 
}
.gallery-grid a:nth-child(10) {
  grid-column: span 2; 
}
.gallery-grid a:nth-child(11) {
  grid-column: span 4; 
}



/* /////////////////////////////////// */
/* //////////Contact */
.contact-head h3{
color: var(--mainColor);
}
.contact-head p{
color: var(--ParagrafColor) !important;
}
.contact-page {
  padding: 2rem 0;
}

.contact-container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.contact-info, .contact-form {
  flex: 1;
  min-width: 300px;
  margin: 10px;
}
.info-box {
    background-color: #fff;
    padding: 2rem;
    border-radius: 8px;
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    text-align: right;
    direction: rtl;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.103); /* Adding a subtle shadow */

  }

  .info-box .icon {
    background-color: var(--mainColor);
    color: #fff;
    border-radius: 50%;
    padding: 10px;
    font-size: 1.2rem;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 1rem; /* Space between icon and text */
  }
  
  .info-box h6 {
    margin: 0;
    padding: 0;
  }

.info-box p {
  margin: 0;
  padding-right: 2rem;
}


.info-box .icon i {
  margin: 0;
}

form {
  padding: 0rem;
  border-radius: 8px;
  text-align: right;
  direction: rtl;
}

.form-row {
  justify-content: space-between;
  flex-wrap: wrap;
  display: flex ;
  gap: 40px;
  justify-content: space-between !important;

}

.form-group {
  flex: 1;
  min-width: 45%;
  margin: .5rem 1rem;
  margin: 0 !important;

  
}

form label {
  display: block;
  margin-bottom: 0.5rem;
}

form input, form textarea, form select {
  width: 100%;
  padding: 1rem;
  border-radius: 8px;
  text-align: right;
  direction: rtl;
  outline: none;
  border: 1px #18194521 solid;
}
/* custom */
form select {
    padding: 1rem 2rem 1rem 1rem !important;
    cursor: pointer;
    width: 100% !important;

}
/* bootstrap */
.form-select{
box-shadow: none !important;
border: none !important;
}
.contact-container button[type="submit"] {
  width: 100%;
  padding: 0.75rem;
  background-color: var(--mainColor);
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
}

.contact-container button[type="submit"]:hover {
  background-color: darken(var(--mainColor), 10%);
}
.branch-card-column{
  transition: all .5s;
}
.branch-card-column:hover{
transform: scale(1.05);
cursor: pointer;

}
/* /////////////login///////// */
.form {
  background-color: #fff;
  display: block;
  padding: 1rem;
  max-width: 350px;
  border-radius: 0.5rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.form-title {
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 600;
  text-align: center;
  color: #000;
}

.input-container {
  position: relative;
}

.input-container input, .form button {
  outline: none;
  border: 1px solid #e5e7eb;
  margin: 8px 0;
}

.input-container input {
  background-color: #fff;
  padding: 1rem;
  padding-right: 3rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  width: 300px;
  border-radius: 0.5rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.submit {
  display: block;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  background-color: #4F46E5;
  color: #ffffff;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  width: 100%;
  border-radius: 0.5rem;
  text-transform: uppercase;
}

.signup-link {
  color: #6B7280;
  font-size: 0.875rem;
  line-height: 1.25rem;
  text-align: center;
}

.signup-link a {
  text-decoration: underline;
}
/* /////// */
@media screen and (max-width:600px) {
  
 .form-row{
  display: block !important;
 }

}
.link-disapled

/* ///////////// adetails /////////////// */
.article-details-container{
  width: 60%;
  margin: auto;
}
.article-details-container h4{
  font-weight: bold !important;
}

.article-details-container p{
  text-align: start;
  margin: 1rem 0px;
}
.article-details-container .main-details img{
border-radius: 20px;
}
.share{
  display: flex;
  justify-content: center;
  align-items: center;
}
.share h5{
  font-weight: bold !important;
  margin: 0%;
}
.share-ic{
  display: flex;
  justify-content: center;
  align-items: center;
}

.share-ic .ic{
  background-color: var(--mainColor);
  color: white;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  margin: 0% 10px;
}
.article-details-container .artcile-post span a{
  color: var(--mainColor) !important;
}





/* //////////////////////CONTACT */
input::placeholder{
  text-align: right;
}
















@media screen  and (max-width:1400px){
    
   .footer {
    text-align: center !important;
   }
   .footer .search-container{
    margin: auto !important;
   }
   .contact-heading::after {
    margin: 10px auto !important; /* Adjust spacing */
    
   }
   .article-details-container{
    width:70% !important;
  }
}
@media screen  and (max-width:900px){
  .gallery-grid a {
    grid-column: span 6 !important; /* Each item takes the full width */
  }
}
@media screen  and (max-width:768px){
   .footer {
    text-align: center !important;

   }
   .footer .search-container{
    margin: auto !important;
   }
   .contact-heading::after {
    margin: 10px auto !important; /* Adjust spacing */
    
   }
   #lightgallery a {
    width: 100% !important;
  }
  #lightgallery img {
    width: 100%;
    margin-bottom: 10px;
  }
  #lightgallery .row{
    padding: 0px !important;
  }
  h1{
    font-size: 30px !important;
  }
  .adventage h4::after {
    font-size: 0.9rem; /* Slightly smaller icon */
    padding-right: 25px; /* Reduce padding on smaller screens */
  }
  .article-details-container{
    width:80% !important;
  }

  .info-box .w-75 {
    width: 100% !important;
}
.info-box  {
    width: 100% !important;
}
.home-carousel-content {
  width: 90% !important;
}

}
@media screen  and (max-width:576px){
  .footer {
    text-align: center;
    margin-left: 0;
    margin-right: 0;
    
    
  }
  .imgdiv{
    display: none !important;
  }
   .contain{
width: 95% !important; 
  }
  .topnav-column{
    flex-direction: column !important;
  }
  .topnav-column div{
    margin: auto !important;
  }
   .footer .search-container{
    margin: auto !important;
   }
   .contact-heading::after {
    margin: 10px auto !important; /* Adjust spacing */
    
   }
   .adventage h4::after {
    font-size: 0.8rem; /* Smaller icon */
    padding-right: 20px; /* Further reduce padding */
    margin-left: 5px; /* Reduce spacing between text and icon */
  }
  .article-details-container{
    width:90% !important;
  }
    .info-box .w-75 {
        width: 100% !important;
    }
    .info-box  {
        width: 100% !important;
    }
.home-carousel-content {
  width: 90% !important;
}
.gallery-grid a {
  grid-column: span 12 !important; /* Each item takes the full width */
}
}


/*.home-article .article-img { =>max-height:300px !important}*/

/*.article .col-md-6 img {*/
/*    height: 200px !important;*/
/*    object-fit: cover;*/
/*}*/

/*.big-article img {*/
/*    max-height: 500px !important;*/
/*    object-fit: cover;*/
/*}*/


/* #adventages .adventage-card {*/
/*    max-height: 260px;*/
     
/* }*/

/*.article-post img{*/
/*    max-height: 370px;*/
/*    object-fit: cover;*/
/*}*/

.postdetails img {
max-width: 60%;
    max-height: 650px;
    object-fit: cover;
    object-position: center;
}

/*.profile img{   */
/*  max-width: 200px;*/
/*    object-fit: cover;*/
/*}*/

.small-article img{
  width: 100%;
}
.big-article img{
width: 100%;
max-height: 350px !important;
}
.article-post img{
  width: 100% !important;
  max-height: 320px;
  object-fit: cover;

}