/* Images block */
.image-gallery { display: flex; flex-wrap: wrap; gap: 12px; width: fit-content; justify-content: center; margin: 10px auto;}
.image-gallery .gallery-item img { border-radius: 6px; display: block; max-width: 480px !important; width: 100%; height: auto;}


/* F.A.Q. block  */
.faq-item { border: 2px solid #fe8c07; border-radius: 12px; margin-bottom: 12px; overflow: hidden;}
.faq-q { padding:8px 18px; font-size: 18px; cursor: pointer; position: relative; display: flex; align-items: center;}
.faq-q::after { content: "+"; position: absolute; right: 20px; font-weight: 600; font-size: 28px; transform: rotate(0deg); transition: transform 0.3s ease;}
.faq-a { max-height: 0; overflow: hidden; padding: 0 18px; font-size: 18px; transition: 0.3s;}
.faq-item.open .faq-a { max-height:200px; padding: 10px 18px; background: #fe8c07; color:#fff;}
.faq-item.open .faq-q::after { transform: rotate(45deg);}


/* Banner block  */
.slide { max-width:100%; min-width:100%; }
.slide img{ width:100% }
.slide video{ width:100% }
.hero-slider { position: relative; overflow: hidden; height: auto;}
.slider-track { display: flex; transition: transform 0.45s ease; height: auto;}
.slide { position:relative; height: auto; display: flex; align-items: center; justify-content: center;}
.slide img { height: 100%; object-fit: cover;}
/* ---------- Nav buttons---------- */
.nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255, 255, 255, 0.12); border: none; color: #fff; font-size: 30px; padding: 10px 14px; cursor: pointer; z-index: 30; border-radius: 6px;}
.prev { left: 16px;}
.next { right: 16px;}
/* ---------- Indicators common ---------- */
.indicators { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; gap: 12px; z-index: 2; align-items: center;}
/* ---------- STYLE A: filled dots ---------- */
.dots-style-a .indicators button { width: 12px; height: 12px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, 0.45); cursor: pointer; transition: transform 0.08s ease, background 0.08s ease;}
.dots-style-a .indicators button.active { background: #fff; transform: scale(1.05);}
/* ---------- STYLE B: Capsule (small) with progress fill ---------- */
.dots-style-b .indicators button { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.45); border: 0; cursor: pointer; overflow: hidden; position: relative; padding: 0; transition: width 0.22s ease, height 0.22s ease,   border-radius 0.22s ease, background 0.22s ease;}
.dots-style-b .indicators button.active { width: 28px; height: 6px; border-radius: 20px; background: rgba(255, 255, 255, 0.28);}
.dots-style-b .indicators .progress-fill { position: absolute; left: 0; top: 0; height: 100%; width: 0; background: #fff; border-radius: inherit; transform-origin: left center;}
@keyframes fillCapsule { from {width: 0;} to { width: 100%;}}
/* ---------- STYLE C: small rectangular bars ---------- */
.dots-style-c .indicators button { width: 28px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.45); border: 0; cursor: pointer; transition: background 0.18s ease, transform 0.18s ease;}
.dots-style-c .indicators button.active { background: #fff; transform: scale(1.02);}
.hero-wrapper{max-width:1200px; margin:auto;}
.hero-wrapper.hero-first{ max-width:100vw !important; padding: 0 !important; margin: 0 auto !important;}


/* Flexible Content block */
.fc-wrapper { display: flex; gap: 40px; max-width: 1200px; margin: 0 auto;}
.fc-wrapper.reverse { flex-direction: row-reverse;}
.fc-right-content { width: 50%; max-width: 320px;}
.fc-right-content img { width: 100%; border-radius: 20px; object-fit: cover;}
.fc-left-content { margin: auto 0;}
.fc-content-para { font-size: 1.1rem;}
.fc-info-cta { display: inline-flex; align-items: center; gap: 6px; padding: 10px 15px; border: 1px solid currentColor; border-radius: 8px; text-decoration: none;}
@media (max-width:480px) {
    .fc-wrapper { flex-direction: column; gap: 15px;}
    .fc-right-content { width: 100%; max-width: 100%;}
}


/* blog */
.section-title { text-align: center; margin-bottom: 50px; font-size: 2.2rem; font-weight: 700;}
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px;}
.blog-card { background: #fff; border-radius: 6px; overflow: hidden; transition: transform 0.3s ease;}
.blog-card:hover { transform: translateY(-5px);}
.blog-image img { width: 100%; height: 220px; object-fit: cover;}
.blog-content { padding: 22px;}
.blog-category { display: inline-block; font-size: 0.75rem; letter-spacing: 1px; color: #007bff; font-weight: 700; text-transform: uppercase; margin-bottom: 10px;}
.blog-content h3 { font-size: 1.35rem; line-height: 1.4; margin-bottom: 8px; color: #111;}
.blog-date { display: block; font-size: 0.85rem; color: #888; margin-bottom: 14px;}
.blog-content p { font-size: 0.95rem; color: #444; line-height: 1.6; margin-bottom: 18px;}
.blog-content a { font-weight: 600; color: #007bff; text-decoration: none;}
.blog-content a:hover {text-decoration: underline;}
@media (max-width: 992px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr);}
}
@media (max-width: 576px) {
  .blog-grid { grid-template-columns: 1fr;}
}

/* cta contact us  */
.cta-container{background:#fe8c07; border-radius:25px; padding:20px;}
.cta-wrapper{display: flex; gap: 20px; align-items: center;}
.cta-img{max-width: 380px;}
.cta-form{display:flex; gap:15px; flex-wrap:wrap;}
.cta-form input, .cta-form textarea {border:1px solid #000; border-radius:15px; padding:10px;}
#cta-name, #cta-number, #cta-mail, #cta-location{width:calc(50% - 8px);}
#cta-message, .cta-btn{width:100%;}
.cta-btn{color:#fff; background:#246187; border-radius:30px; padding:8px;}
.cta-btn:hover{cursor:pointer;}
.cta-logo {display:flex; justify-content:center; padding:20px;}
.cta-logo img{max-width:380px; width:100%; margin:auto;}
@media (max-width: 780px) {
  .cta-wrapper{flex-direction: column;}
}
@media (max-width: 480px) {
  #cta-name, #cta-number, #cta-mail, #cta-location{width:100%;}
}