#videoModal video{width:100%;height:100%}
.video-close{position:absolute;top:15px;right:15px;z-index:10;color:#fff!important;font-size:32px;opacity:1;cursor: pointer;}
.video-close:hover{color:#ccc}

.hero-section{height:80vh;background:url('../../assets/img/hero-image.jpg') center/cover no-repeat;position:relative}
.hero-text{position: relative;z-index: 1;}
.image-text-section{background:url('../../assets/img/txt-bg.jpg') center/cover no-repeat;position:relative}
.text-banner{position: relative;z-index: 1;}
.text-banner h2{color: #fff;}
.hero-desc{font-size:16px;line-height:1.6;max-width:700px;margin:0 auto;color:rgba(255,255,255,0.9)}
.overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgb(9 14 34 / 57%)}
.hero-title{font-size:48px;font-weight:600;color: #fff;}
.video-btn{border:1px solid #fff;color:#fff;padding:12px 28px;background:transparent;cursor: pointer;}
.video-btn:hover{background:#055673;color:#fff;border-color: #055673;}
.section-padding{padding:80px 0}
.bg-soft{background:#efe9df}
.info-box{background:#e6e0d8;height:100%}
.info-box img{width: 100%;}
.info-content{padding:40px;}
.section-title{text-align:center;margin-bottom:50px}
.features-section{background-color: #fefdfd;}
.feature-box{display: flex;flex-wrap: wrap;justify-content: center;gap: 42px;}
.feature-item{padding:20px 32px;font-size:14px;flex: 0 22%;text-align: center;font-weight: 600;color: #676767;border-bottom: 1px solid #e8dbdb;}
.feature-item img{width: 50px;max-height:50px;display: block;margin: 0 auto;margin-bottom: 12px;}
.small-title{text-transform:uppercase;letter-spacing:2px;font-size:12px}
.styled-location-list{list-style:none;padding:0;margin:0}
.styled-location-list .loc-item{position:relative;padding-left:0px;margin-bottom:18px;font-size:14px;letter-spacing:1px;text-transform:uppercase;color:#2c2c2c;display: flex;gap: 8px;align-items: center;font-weight: 600;}
.veranda-collec{}
.veranda-collec .image-place{background-color: #e4e0d5; padding: 16px;border-radius: 5px;}
.veranda-collec .image-place p{font-size: 14px;line-height: 16px;padding: 0 20px;color: #959595;}
.loc-item i{padding: 6px;border-radius: 100%;color: #fff;width: 37px;height: 37px;font-size: 15px;display: inline-flex;justify-content: center;align-items: center;}
.loc-item.mall i{background:#c97c5d}
.loc-item.fuel i{background:#3b6f8f;}
.loc-item.park i{background:#4c7a57;}
.loc-item.mosque i{background:#8ca27d;}
.loc-item.school i{background:#d1b25f;}
.loc-item.highway i{background:#e0a14a;}
.loc-item.location i{background:#4c7a57;}
.map-wrapper{border-radius:8px;overflow:hidden}
.styled-map{filter:grayscale(50%) contrast(1.1) brightness(0.95)}
.map-embed{width:100%;height:450px;border: 5px solid #ffffff7a;border-radius: 5px;}
.image-placeholder{background:#d6d6d6;height:300px;display:flex;align-items:center;justify-content:center}
.pp-list-ro{row-gap: 20px;}
.pp-content{color: #2c2c2c;}
.spec-list li{margin-bottom:10px}
.sq-table tr td, .sq-table tr th{border-color: #eaeff5;padding: 8px 0px!important;vertical-align: middle;}
.sq-table tr th{font-weight: 700!important;}

.contact-section{background:#f7f4ef}
.contact-card{background:#fff;padding:50px 40px;border-radius:12px;box-shadow:0 15px 40px rgba(0,0,0,0.08)}
.contact-card h2{font-size:32px;font-weight:600}
.contact-card .form-control{height:52px;border-radius:0;border:1px solid #ddd;font-size:14px}
.contact-card textarea.form-control{height:auto;resize:none}
.contact-card .form-control:focus{box-shadow:none;border-color:#000}
.contact-info h2{font-size:30px;font-weight:600}
.contact-info p{font-size:14px}
.info-item{display:flex;align-items:flex-start;margin-bottom:25px}
.info-icon{font-size:25px;margin-right:15px;}
.info-item strong{display:block;font-size:15px}
.info-item p{margin:0;color:#555;font-size: 17px;}
.info-item p a{color:#555;}

/* Modal container */
#videoModal .modal-dialog {
  max-width: 400px;
  margin: 20px auto;
  display: flex;
  align-items: center;
  min-height: calc(100% - 1rem);
}

#videoModal .modal-content {
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  border: none;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
}

/* Video wrapper */
#videoWrapper {
  position: relative;
  width: 100%;
  background: #000;
}

/* Video element */
#videoWrapper video {
  width: 100%;
  height: auto;
  display: block;
}

/* Close button */
#videoModal .video-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 38px;
  height: 38px;
  line-height: 0px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 22px;
  font-weight: 300;
  text-align: center;
  opacity: 1;
  z-index: 10;
  transition: all 0.3s ease;
}

#videoModal .video-close:hover {
  background: #fff;
  color: #000!important;
  transform: rotate(90deg);
}

/* Remove Bootstrap default focus */
#videoModal .video-close:focus {
  outline: none;
  box-shadow: none;
}

/* Mobile optimization */
@media (max-width: 767px) {
  #videoModal .modal-dialog {
    margin: 10px;
  }

  #videoModal .video-close {
    top: 8px;
    right: 8px;
    width: 34px;
    height: 34px;
    font-size: 22px;
  }
}


@media (max-width:768px){
    .hero-title{
        line-height: 50px;
    }
    .hero-title br{
        display: none;
    }
    .info-content {
        padding: 20px;
    }
}
@media (max-width:767px){
    .hero-section {height: auto;}
    .hero-title{
        font-size:32px;
        line-height: 36px;
    }
    .hero-desc br{
        display: none;
    }
    .info-content {
        padding: 30px;
    }
    .feature-box {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 24px;
    }
    .feature-item {
        padding: 20px 20px;
        font-size: 13px;
        flex: 0 46%;
        text-align: center;
        font-weight: 600;
        color: #676767;
        border-bottom: 1px solid #e8dbdb;
    }
    .veranda-collec .image-place p {
        font-size: 12px;
    }
}