:root {
    --theme-color: #1f2022;
    --black:#000;


}
/* Start Modal */

.discoverModal .modal-dialog {
    margin: 50px auto;
    max-width: 1000px;
    border: none !important;
    padding: 0;
    border: none;
}

.discoverModal .modal-content {
    border-radius: 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    opacity: 0;
    transform: scale(1.1);
    transition: 300ms all ease-in;
    outline-style: solid;
    outline-color: #fff;
    outline-width: 2px;
}

.discoverModal.show .modal-content {
    opacity: 1;
    transform: scale(1);
}

.discoverModal .modal-content .modal-body {
    padding: 50px 30px;
    border-radius: 15px;
    background-color: var(--theme-color);
}

.modal-img {
    margin-inline-start: -220px;
    margin-top: -38.5px;
    width: 663.4px;
    z-index: 8;
    transform: scale(1, 1) rotate(-25deg);
    position: relative;
}
.modal-img img{
    width:90%;
}

.discoverModal-inner .modal-text h3 {
    font-size: 37px;
    line-height: 1.1;
    color: #fff;
    font-weight: bold;
    margin: 0 0 5px;
}

.discoverModal-inner {
    align-items: center;
    -webkit-align-items: center;
}
.request-form select.form-select{
    all: unset; 
    display: block;
    width: 100% !important;
    padding: 14px 18px !important;
    background: #f9fafb !important;
    border: 2px solid #e0e0e0 !important;
    border-radius: 20px !important;
    font-size: 16px !important;
    color: #01062d !important;
    transition: all 0.3s ease !important;
    appearance: none;  
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
}
.modal-form .form-group .form-control {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    height: auto;
    line-height: 1.2;
    box-shadow: none;
    position: relative;
    color: #fff;
    padding: 16px  0 !important;
    font-size: 16px;
    cursor: initial;
    border-bottom: 1px #fff solid !important;
    border-radius: 0 !important;
    font-size: 14px;
}

.modal-form .form-group {
    margin-top: 25px;
    width:100%;
}

.modal-form .form-group .form-control::placeholder {
    color: #fff;
}
.modal-form .form-group .form-control option,.form-select option{
    color: var(--theme-color);
        padding-inline: -internal-auto-base(2px, 0.5em);
}
.modal-form .form-group .form-control option:hover{
    background-color: var(--theme-color);
    color:#fff;
}
.form-select option:hover{
    background-color: var(--theme-color);
    color:#fff;
}
.form-terms {
    margin-block: 18px 16px;
}

.form-terms .item {
    display: flex;
    align-items: center;
    margin-bottom: 9px;
    color: #fff;
    gap: 10px;
}

.form-terms .item input {
    width: 16px;
    height: 16px;
    accent-color: var(--black);
    z-index:1000;
}

.form-terms .item p {
    width: calc(100% - 26px);
    font-size: 10px;
    line-height: 20px;
}

.form-terms .item a {
    color: inherit;
    font-weight: bold;
}


.modal-items {
    margin-top: 35px;
}

.modal-item {
    background: #fff;
    background-color: rgb(255, 255, 255);
    border-width: 4px;
    border-style: solid;
    border-color: rgb(242, 242, 249);
    box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.1);
    padding: 21px 4px;
    color: #333;
    text-align: center;
    height: 150px;
}

.modal-item .icon img {
    max-height: 50px;
}

.modal-item .details {
    padding-top: 15px;margin-top:0px;
}

.modal-item .details h3 {
    font-size: 14px;
    font-weight: bold;
    line-height: 1.1;
    letter-spacing: 0em;
    color: rgb(55, 55, 55);
}

.discoverModal  button.btn-close {
    cursor: pointer;
    background: white;
    border: 2px solid black;
    border-radius: 100px;
    position: absolute;
    width: 30px;
    height: 30px;
    padding: 0;
    top: 0;
    right: 0;
    transition: transform 200ms;
    margin: -10px;
    opacity: 1;
    font-size: 15px;
}

.iti--separate-dial-code .iti__selected-dial-code {
    display: none;
}

.modal-form .form-group .form-control.phone {
    padding-inline-start: 50px !important;
}

.iti__selected-flag {
    padding: 0;
}

.iti__arrow {
    margin-left: 3px;
    border-top-color: #fff;
}
 .iti__country-list{
    width:300px !important;
}
@media (max-width: 991px) {
    .discoverModal-inner .modal-text h3 {
        font-size: 24px;
    }

    .modal-items {
        display: none;
    }

    .discoverModal .modal-dialog {
        max-width: 95%;
    }
    .discoverModal-inner .details .col-md-4{
        width:33%;
    }
    .modal-item .icon img {
    max-height: 30px;
    
    }
       
      .discoverModal-inner .details h3 {
        font-size: 10px;
    }
    .modal-img {
        transform:none;
           margin:20px 0px;
        width: 100%;
    } 
    .modal-img img{
    width:100%;
}
    
}
/* End Modal */
/* map location*/

  #map { height: 500px; margin-bottom: 40px; box-shadow: 0 -8px 15px rgba(0, 0, 0, 0.15), 
              0  8px 15px rgba(0, 0, 0, 0.15);  z-index: 1;}
    .leaflet-bottom.leaflet-right{
        display:none;
    }
    .cards { display: flex; gap: 15px; flex-wrap: wrap; }
   .mapLocation .card {
      padding: 15px;
      border: 1px solid #01062d;
      border-radius: 10px;
      cursor: pointer;
      flex: 1 1 150px;
      text-align: center;
      transition: all 0.3s ease;
    }
    .mapLocation .card:hover {
      background: #f0f0f0;
      transform: scale(1.05);
    }
    .mapLocation .card h4 .mapLocation .card p{
        color:#01062d;
    }
    .svgclock{
        padding-top:10px;
    }
    .mapLocation .card h4{
         font-size:22px; 
             margin: 10px;
    }
    .mapLocation .card img{
           height: 180px;
        width: 80%;
        margin: 10px auto;
        border-radius: 20px;
    }
    .minutes{
        font-size:22px;
    }
    .mapLocation{
            background-color: #1a1a1a;
            padding-bottom:0px;
    }
    
    
    @media only screen and (max-width: 599px) {
      .mapLocation .cards{
        padding: 5px 10px;
    }
    .mapLocation .card{
        padding: 0px !important;
    }
    .mapLocation .card img {
        height: 125px;
    }
   .mapLocation .card h4 {
    font-size: 18px;
        margin: 10px 0px;
   }
   .minutes {
    font-size: 18px;
    }
    .svgclock svg{
        width: 14px;
         height: 14px;
    }
    
    .hero-4 .hero-content{
        margin-top:50px;
    }
    }
    /*new section */
    .facts-section {
    padding: 100px 50px;
   background: linear-gradient(rgba(0,0,0,0.30), rgba(0,0,0,0.30)),
              url('../img/location/Banner2 1600.jpg') center/cover no-repeat;
    margin-top:80px ;
    background-size: cover;
    }

.facts-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr); /* 8 كروت جنب بعض */
  gap: 15px;
}

.fact-card {
 background: rgb(38 153 192 / 50%);

  color: #fff;
  padding: 10px 5px 50px; /* padding تحت أكبر علشان الأيقونة ما تغطيش النص */
  border-radius: 12px;
  text-align: left;
  min-height: 300px; /* طويل ورفيع */
  position: relative; /* علشان الأيقونة تتثبت */
  transition: 0.3s ease;
}

.fact-card:hover {
background-image: linear-gradient(180deg, rgba(32, 155, 198, 0.8), #209bc6);

}

.fact-card h3 {
  font-size: 9px;
  font-weight: 500;
  margin-bottom: 8px;
}

.fact-card p {
  font-size: 18px;
  line-height: 28px;
}

.fact-card img {
  width: 50px;
  position: absolute;
  bottom: 10px;
  left: 10px; /* شمال */
}

/* الموبايل - اتنين بس في الصف */
@media (max-width: 768px) {
  .facts-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .fact-card {
        min-height: 180px;
  }
  .fact-card p {
      font-size: 16px;
  }
}
.readMore{
    margin-left: 8%;
}


/*project details modal*/

/*.modal .page-title {*/
/*    position: relative;*/
/*    background-size: cover;*/
/*    background-repeat: no-repeat;*/
/*    background-position: center;*/
/*    background-attachment: fixed;*/
    /*padding: 145px 0px;*/
/*    padding: 300px 0px;*/
/*    margin-top:0px !important;*/
/*}*/

/*.modal .page-title:before {*/
/*    position: absolute;*/
/*    content: '';*/
/*    left: 0px;*/
/*    top: 0px;*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    display: block;*/
/*    opacity: .50;*/
/*}*/
.modal .page-title {
    position: relative;
    padding: 300px 0px;
    margin-top: 0px !important;
    overflow: hidden;
}

.modal .page-title .bg-image {
    position: absolute;
    inset: 0;
    background-image: url('path/to/your-image.jpg');
    background-size: 100% 100%;
    background-position: center;
    background-attachment: fixed;
    transform: scale(1);
    z-index: 0;
}

.modal .page-title::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1;
}



.modal .page-title h1 {
    position: relative;
    font-size: 70px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1em;
    z-index: 99;
    letter-spacing: 5px;
    text-transform: uppercase;
}


.info{
    /*margin-top:80px;*/
}
.info h2, .info p{
    color:#01062d;
}
.info h2{
    font-size:26px;
   
    
}
.info-title{
     border-left:4px solid #01062d;
     padding-left:20px;
}
.info p{
    font-size:22px;
    margin-top:10px;
}
.modal-form{
        background-color: var(--theme-color);
    padding: 20px;
}
.modal-form .form-group input{
  
        background-color: #fff !important;
            border-radius: 14px;
}
.modal-form .form-group button{
     border-radius: 14px;
}

   /* Form Inputs */
        .request-form .form-group {
          position: relative;
          margin-bottom: 25px;
        }
        .request-form input {
          width: 100%;
          padding: 14px 18px;
          background: #f9fafb;
          border: 2px solid #e0e0e0;
          border-radius: 20px;
          font-size: 16px;
          color: #01062d;
          transition: all 0.3s ease;
        }
        .request-form input:focus {
          border-color: #faa300;
          background: #fff;
          box-shadow: 0px 0px 8px rgba(250, 163, 0, 0.2);
          outline: none;
        }
        .request-form input::placeholder {
          color: #999;
          font-size: 14px;
        }
      
       
        @media (min-width: 992px) {
      .modal-dialog.modal-xl {
        max-width: 80%; /* بدل 500px أو 800px الافتراضي */
      }
    }
@media (max-width: 768px) {
      .page-title {
        padding: 100px 0px 120px;
    }
        .page-title h1 {
        font-size: 44px;
    }
    
}
/* Start Gallery-img-h */



.gallery-img-h {
    overflow: hidden;
    border-radius: 8px;
    margin: 30px 0;
    height: 364px;
}
.modal .gallery-img-h {
  
    height: 185px;
}
.gallery-img-h.gallery-img-tall {
    height: 760px;
    margin-bottom: 0;
}
.modal .gallery-img-h.gallery-img-tall {
    height: 400px;
}
.gallery-img-h .img,
.gallery-img-h .img img {
    width: 100%;
    height: 100%;
    object-fit: cover !important;
    object-position: center;
}

.link-block {
    position: absolute;
    inset: 0;
    z-index: 3;
}

.col-md-7 .gallery-img-h.gallery-img-width:last-child {
    margin: 0;
}

.single-gallery-h {
    /*padding-block: 0 96px;*/
    margin-top:80px;
    margin-bottom:80px;
}

.gallery-img-h .img img {
    transition: all .4s;
}

.gallery-img-h:hover .img img {
    transform: scale(1.05);
}

.btns-block {
    position: absolute;
    bottom: 0;
    right: 0;
    margin: 16px;
    gap: 16px;
    display: flex;
    align-items: center;
    -webkit-align-items: center;
    z-index: 5;
}

.btns-block .btn {
    font-size: 14px;
    height: 36px;
    min-width: auto;
    /*padding: 0px 16px;*/
    background: #fff;
    color: var(--theme-color);
    border-radius: 4px;
}

.btns-block .btn:nth-child(2) {
    background: rgb(240, 243, 248);
}

.btns-block .btn:hover {
    background: var(--theme-color);
    color: #fff !important;
}
  .res-only {
    display: none;
}
@media (max-width: 991px) {
  
.res-none{
    display:none;
}
 .single-details-price .item {
        padding: 15px 0;
    }

    .single-gallery-h .row {
        display: none;
    }
    .modall .single-gallery-h .row {
        display: block;
    }
     .modal .single-gallery-h .row {
        display: block;
    }
    .single-gallery-h .res-only {
        display: flex;
    }
.modall .gallery-img-h.gallery-img-tall {
    height: 200px;
}
.modal .gallery-img-h.gallery-img-tall {
    height: 200px;
}
    .gallery-inner {
        position: relative;
        height: 260px;
    }

    .gallery-inner .gallery-img-h {
        height: 260px;
        overflow: hidden;
        border-radius: 8px;
        margin: 0;
    }
.modall .gallery-img-h {
    height: 200px;
}
    .gallery-inner .btn {
        position: absolute;
        bottom: 0;
        right: 0;
        margin: 10px;
        background: #fff;
        color: var(--theme-color);
        min-width: auto;
        height: 44px;
        padding: 0 14px;
        border-radius: 4px;
        font-size: 14px;
    }

    .gallery-inner .slick-prev,
    .gallery-inner .slick-next {
         background: transparent !important; 
         border: none !important; 
        margin: 150px 43%;
        /* border: 1px solid var(--theme-color); */
        font-size: 20px;
        padding: 11px;
    }

    .gallery-inner .slick-prev::before,
    .gallery-inner .slick-next::before {
        color: var(--theme-color);
        font-size: 20px;
        font-weight: 900;
    }

    .single-gallery-h {
        padding-block: 0 40px;
    }

}
/* End Gallery-img-h */
/* Start Floors-h */

.single-floor-h {
    padding-block: 88px;
}

.title {
    margin-bottom: 56px;
}

.title h3 {
    font-size: 38px;
    letter-spacing: -0.01em;
    line-height: 110%;
    font-weight: 700;
    color: var(--theme-color);
    margin: 0;
    max-width: 780px;
     text-transform:uppercase;
}

.floor-text-item .btn {
    margin-top: 40px;
}

.floor-text-item .item {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 0;
    border-bottom: 1px #e1e8ed solid;
    cursor: pointer;
}

.floor-text-item .item h3 {
    font-size: 18px;
    margin: 0;
    font-weight: 700;
    color: var(--theme-color);
}

.floor-text-item .item:first-child {
    border-top: 1px #e1e8ed solid;
}

.floor-text-item .item i {
    transition: all .4s;
    opacity: 0;
    font-size: 22px;
}

.floor-text-item .item.active i {
    opacity: 1;
    color: var(--sec-color);
}

.floor-text-item .item.active h3 {
    color: var(--sec-color);
}

.floors-slider .img {
    height: 482px;
    overflow: hidden;
    text-align: center;
    border: 1px solid #e1e8ed;
    border-radius: 5px;
    background: #fff;
    margin: 0;
}

.slick-slide .img img {
    height: 100%;
    width: 100%;
    /*object-fit: cover;*/
}

.slick-prev,
.slick-next {
    width: 40px;
    height: 40px;
    /* background: var(--theme-color); */
    z-index: 3;
    border-radius: 50%;
    /* opacity: .5; */
    border: 1px var(--theme-color) solid;
    background: #fff;
    margin: 0 20px;
}

.floors-slider {
    /*max-width: 492px;*/
    /*margin-inline-start: auto;*/
}

.slick-prev:before,
.slick-next:before {
    font-family: 'Font Awesome 6 Pro';
    font-size: 16px;
    color: var(--theme-color);
}

.slick-next {
    right: 0;
}
.area-slider .slick-next{
    right: 50px;
}

.slick-prev {
    left: 0;
}

.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus {
    background: transparent;
    border-color: var(--theme-color);
}

.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before {
    color: var(--theme-color);
}

.floor-group {
    display: none;
}

@media (max-width: 768px) {
    .single-floor-h {
        padding-block: 40px;
    }

    .title {
        margin-bottom: 20px;
    }

    .title h3 {
        font-size: 24px;
        line-height: 34px;
    }

    .single-floor-h .row .col-md-6:nth-child(3) {
        order: 2 !important;
    }

    .single-floor-h .row .col-md-6:nth-child(2) {
        order: 3;
    }

    .floors-slider .img {
        height: 250px;
        margin-bottom: 30px;
    }
}
/* End Floors-h */
.lang{
    border: 2px solid var(--theme-color);
    padding: 10px 20px;
    border-radius: 25px;
    color: var(--theme-color);
    font-weight: 700;
}
.btn-links{
 display: flex;
    flex-direction: row;
    /*gap: ;*/
}
.iti{
    width:100%;
}
.contact-wrap7 .th-btn{
    z-index:1;
}

.main-menu ul li a.active{
    color: var(--theme-color2);
    font-weight:700;
}

.portfolio-img {
  position: relative;
  overflow: hidden;
}

.portfolio-overlay {
  position: absolute;
  inset: 0; /* top:0; right:0; bottom:0; left:0; */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: rgba(0, 0, 0, 0.3); /* طبقة غامقة */
  backdrop-filter: blur(6px); /* البلور */
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.portfolio-overlay p{
    font-size:1rem;
    margin:5px;
}
.portfolio-img:hover .portfolio-overlay {
  opacity: 1;
}
.iti--separate-dial-code .iti__selected-flag{
    background:none !important;
}
.service-img img{
    height:280px;
}

 .read_more button.btn-close{
    cursor: pointer;
    background: white;
    color:var(--theme-color);
    border: 2px solid black;
    border-radius: 100px;
    position: absolute;
    width: 30px;
    height: 30px;
    padding: 0;
    top: 0;
    right: 0;
    transition: transform 200ms;
    margin: -10px;
    opacity: 1;
    font-size: 18px;
}
.details.about-table {
  padding: 40px 0;
  margin-top:40px;
  background-color: black;
}

.about-table .about-items {
  display: flex;
  flex-wrap: wrap; /* يخلي العناصر تنزل تحت لو المكان ضيق */
  gap: 3.5rem; /* مسافة بين العناصر */
  justify-content: center; /* يوزع العناصر بشكل متوازن */
  align-item:center;
  
}

.about-table .about-items .item {
  /*background: #fff;*/
  padding: 10px 20px;
  border-radius: 6px;
  /*box-shadow: 0 1px 3px rgba(0,0,0,0.08);*/
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  white-space: nowrap; /* يمنع الكلمات تتكسر */
}

.about-table .about-items .item span:first-child {
  font-weight: 600;
  color: #fff;
}
.btn-details{
    cursor:pointer;
}
#site-logo {
padding:10px;

}
#logo{
      filter: brightness(0) invert(1);

}
.nav-home-1.tparrows {
    display:none;
}

.icon-box {
    padding: 37px 38px;
    height: -webkit-fill-available;
}
.content-box img{
    height:250px;
}
.about-img-1{
    height:100%;
}
.about-img-1 img{
     height:100%;
}
#about .main-heading{
    font-size:28px;
}
.blog-one__btn-box a,.portfolio-cates a{
    cursor:pointer;
}
.team-thumb img{
    height:400px;
}
.post-box {
    height: -webkit-fill-available;
}
.entry-media img{
    height:250px;
}
.modal-item .details{
    background:none;
}


.octf-btn {
    background: linear-gradient(135deg, #bfa14a 0%, #d8c37f 40%, #f1e3a0 60%, #bfa14a 100%);
    color: #1a1a1a !important;
    border: none;
    /*padding: 12px 28px;*/
    border-radius: 6px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 0 10px rgba(175, 164, 103, 0.4);
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

/* تأثير اللمعة */
.octf-btn::after {
    content: "";
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.1) 100%);
    transform: skewX(-25deg);
}

/* حركة اللمعة */
.octf-btn:hover::after {
    animation: shine 1s ease-in-out;
}

/* حركة اللمعة المتحركة */
@keyframes shine {
    0% {
        left: -75%;
    }
    100% {
        left: 125%;
    }
}

.octf-btn:hover {
    box-shadow: 0 0 20px rgba(175, 164, 103, 0.8), 0 0 40px rgba(175, 164, 103, 0.5);
    transform: translateY(-2px);
    color:#fff !important;
}
.ot-tabs{
    padding:0px 8%;
}