/* assets/css/style.css - clean, responsive, JSW-like */

:root{
  --accent:#4472c4;
  --dark:#13161a;
  --muted:#6b7280;
  --max:1200px;
  --radius:14px;
}

*{box-sizing:border-box}
body{font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; margin:0; color:#222; background:#fcfcf7; -webkit-font-smoothing:antialiased; background-color:#fff7da !important;}
.wrap{max-width:var(--max); margin:0 auto; padding:0 18px;}
.site-header{background:#fcfcf5; border-bottom:1px solid #eee; position:sticky; top:0; z-index:100; box-shadow:0 1px 0 rgba(0,0,0,0.02);}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:18px 0;}
.brand img{height:56px;}
.main-nav{display:flex; gap:18px; align-items:center;}
.main-nav a{color:#222; text-decoration:none; font-weight:500;}
.btn{padding:10px 16px; border-radius:8px; cursor:pointer; border:0;}
.btn-primary{background:var(--accent); color:#fff;}
.btn-outline{background:transparent; border:1px solid #ddd; padding:8px 14px; border-radius:10px;}

/* mobile toggle */
.mobile-toggle{display:none; background:none; border:0; width:40px; height:40px;}
.mobile-toggle span{display:block; height:2px; background:#333; margin:6px 0; border-radius:2px;}

/* Hero */
.hero{padding:48px 0; background:#FAFAF5;}
.hero-grid{display:grid; grid-template-columns:1fr 480px; gap:32px; align-items:center; min-height: 480px; align-content:center;}
.hero-left h1{font-size:44px; margin:0 0 12px; line-height:1.02;}
.hero-left .accent{color:var(--accent);}
.lead{color:var(--muted); font-size:18px; margin:12px 0 18px;}
.stats{display:flex; gap:26px; margin:18px 0;}
.stats div{min-width:90px;}
.stats strong{font-size:28px; display:block;}
.hero-right img{width:100%; height:420px; border-radius:18px; object-fit:cover;}
.hero-left {
    display: flex;
    flex-direction: column;
    justify-content: center;    /* vertical centering */
    height: 100%;
}

/* Sections */
.section{display:flex; gap:28px; align-items:center; padding:48px 0;}
.section-left,.section-right{flex:1;}
.section-left img{width:500px; border-radius:18px; display:block;}

/* Promise */
.promise-section{text-align:center; padding:56px 0;}
.promise-box{background:var(--accent); color:#fff; border-radius:40px; padding:40px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;}
.catalog-thumb{height:72px; width:auto; border-radius:8px; margin:6px;}

/* Process */
.process{padding:40px 0;}
.process-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
.step{background:#e3e3e0; border-radius:12px; padding:18px; box-shadow:0 6px 18px rgba(0,0,0,0.06);}

/* Packages */
.packages{padding:40px 0;}
.packages-wrapper{display:flex; gap:20px; justify-content:space-between; align-items:flex-start;}
.package-card{background:#e3e3e0; padding:20px; border-radius:12px; flex:1; box-shadow:0 6px 18px rgba(0,0,0,0.04);}
.package-title{font-size:18px; margin-bottom:12px;}
.accordion-row{border-top:1px solid #eee; padding-top:12px; margin-top:12px;}
.accordion-header{display:flex; justify-content:space-between; align-items:center; cursor:pointer; padding:8px 0;}
.accordion-header .icon{width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;border:1px solid #e1dccf;}
.accordion-content{display:none;padding:8px 0;color:#555;font-size:14px;}

/* modal */
.modal{display:none; position:fixed; left:0; right:0; top:0; bottom:0; background:rgba(0,0,0,0.4); align-items:center; justify-content:center; z-index:200;}
.modal-inner{background:#e3e3e0; padding:22px; border-radius:12px; width:100%; max-width:760px; position:relative;}
.modal-close{position:absolute; right:12px; top:8px; background:none; border:0; font-size:26px; cursor:pointer;}
.modal.show {
  display: flex !important;
}

/* footer */
.site-footer{background:var(--dark); color:#f1f3f5; padding:48px 0 24px 0;}
.footer-grid{display:flex; gap:20px; align-items:flex-start;}
.footer-grid .col{flex:1;}
.footer-logo{height:38px;}
.footer-bottom{padding:18px 0; text-align:center; color:#bfc3c6;}

/* forms */
.form-row{display:flex; gap:12px; margin-bottom:12px;}
.form-row input, .form-row select, input[type=text], input[type=email]{
  padding:10px; border:1px solid #ddd; border-radius:8px; width:100%; background:#e3e3e0;
}

/* responsive */
@media (max-width:1100px){
  .hero-grid{grid-template-columns:1fr 360px;}
  .process-grid{grid-template-columns:repeat(2,1fr);}
  .packages-wrapper{flex-direction:column;}
  .footer-grid{flex-direction:column;}
}
@media (max-width:780px){
  .main-nav{display:none;}
  .mobile-toggle{display:block;}
  .hero-grid{grid-template-columns:1fr;}
  .process-grid{grid-template-columns:1fr;}
  .stats{flex-direction:row; gap:12px;}
}

.bookmeet-section {
    padding: 60px 0;
    background: #F9FAFB;
    
}
@media (max-width: 900px) {

    .section {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center;
        padding: 32px 0 !important;
        gap: 24px !important;
    }

    .section-left,
    .section-right {
        flex: unset !important;
        max-width: 100% !important;
        padding-left: 0 !important;
    }

    .section-left img,
    .section-right img {
        /* max-width: 100% !important; */
        width: 364px;
        height: 420px;
        border-radius: 18px;
        margin: 0 auto;
    }
}

@media (max-width: 900px) {
    .benefits-list {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .benefits-list div {
        width: 100%;
        padding: 12px;
        font-size: 15px;
    }
}

.auto-popup-box {
    padding: 28px 32px;
    background-color: #4472c4 !important;
    color: #fff !important;
    border-radius: 22px !important;

    text-align: center;           /* CENTER TEXT */
    display: flex;
    flex-direction: column;
    justify-content: center;      /* VERTICAL CENTER */
    align-items: center;          /* HORIZONTAL CENTER */
}

.auto-popup-box p {
    margin: 4px 0;
    font-size: 20px;
}


/* --- JSW Style Why Section --- */

.why-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 64px 18px;
    display: flex;
    align-items: center;
    gap: 40px;
}

.why-left img {
    width: 500px;
    border-radius: 18px;
    object-fit: cover;
}

.why-right {
    flex: 1;
}

.why-right h2 {
    font-size: 32px;
    margin-bottom: 8px;
}

.why-right .muted {
    color: #6b7280;
    margin-bottom: 24px;
}

.why-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.why-card {
    background: #e3e3e0;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.06);
}

.why-card h4 {
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 600;
}

.why-card p {
    margin: 0;
    font-size: 14px;
    color: #555;
}

/* --- Mobile --- */
@media (max-width: 900px) {
    .why-wrap {
        flex-direction: column;
        text-align: center;
        padding: 32px 18px;
    }

    .why-left img {
        width: 100%;
        max-width: 380px;
        height: auto;
    }

    .why-grid {
        grid-template-columns: 1fr;
    }
}


.packages-heading {
  font-size: 32px;
  font-weight: 700;
  text-align: center;
}

.packages-subtitle {
  text-align: center;
  font-size: 16px;
  color: #666;
  margin-bottom: 32px;
}

/* ---------------- JSW Style Book Meeting ---------------- */

.bookmeet-section {
    padding: 80px 0;
    background: #FAF7F2;
    display: flex;
    justify-content: center;
    background-image: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), url('../img/formbg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
}

.content-wrapper {
    max-width: 900px;
    width: 100%;
    text-align: center;
}

/* Title */
.bm-title {
    font-size: 34px;
    font-weight: 700;
    margin-bottom: 8px;
}

.bm-subtitle {
    font-size: 16px;
    color: #555;
    margin-bottom: 28px;
}

/* Form Card */
.jsw-form {
    background: #e3e3e0;
    padding: 32px;
    border-radius: 16px;
    box-shadow: 0 6px 22px rgba(0,0,0,0.08);
}

/* Form Grid */
.jsw-form .form-row {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
}

.jsw-form .form-control {
    flex: 1;
    padding: 12px 14px;
    border: 1px solid #ddd;
    border-radius: 10px;
    background: #e3e3e0;
    font-size: 15px;
}

/* Radio options */
.radio-group {
    flex: 1;
    display: flex;
    text-align: left;
    /* justify-content: space-between;  */
    flex-wrap: nowrap !important; 
    gap: 20px;
    width: 100%;
}

.radio-options {
    display: flex;
    gap: 15px;
    margin-top: -20px;
    white-space: nowrap;
    align-items: center;
}
.radio-options label {
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}
.radio-group > label {
    font-weight: 100;
    margin: 0;
    white-space: nowrap;
}
.radio-group .radio-label {
    white-space: nowrap; /* keep text in one line */
    margin-right: 10px;
}
/* Button */
.bm-btn {
    width: 30%;
    padding: 14px;
    margin-top: 20px;
    background: #4472c4;
    border: 0;
    color: white;
    font-size: 17px;
    border-radius: 30px;
    cursor: pointer;
}

/* Mobile Responsive */
@media (max-width: 780px) {

    .radio-group {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
    
    
    /* .radio-options {
        gap: 14px;
        margin-top: 3px;
    } */

    .agree-box {
        justify-content: flex-start !important;
        align-items: flex-start;
        text-align: left;
    }
    .jsw-form {
        padding: 22px;
    }

    .jsw-form .form-row {
        flex-direction: column;
    }

    .bm-btn {
        width: 100%;
    }
}

.agree-box {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-start !important; /* force left alignment */
    margin-top: 10px;
    text-align: left;
}

.btn-row {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

@media (max-width: 780px) {

    /* Make each input take full width */
    #bookMeetingForm2 .form-row {
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
    }

    #bookMeetingForm2 .form-control,
    #bookMeetingForm2 input,
    #bookMeetingForm2 select {
        /* width: 100% !important; */
        flex: none !important;
    }

    /* Fix radio group wrapping */
    #bookMeetingForm2 .radio-group {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px !important;
        width: 100% !important;
    }

    #bookMeetingForm2 .radio-options {
        margin-top: 0 !important;
        gap: 14px !important;
    }
}


/* FIX MOBILE MENU DROPDOWN */
@media (max-width: 780px) {

    #mainNav {
        display: none;                /* hidden by default */
        position: absolute;
        top: 70px;                    /* below header */
        right: 0;
        width: 100%;
        background: #fcfcf5;
        padding: 20px 0;
        flex-direction: column;       /* vertical menu */
        align-items: flex-start;
        gap: 16px;
        border-top: 1px solid #eee;
        box-shadow: 0 4px 10px rgba(0,0,0,0.08);
        z-index: 200;
    }

    #mainNav a {
        padding: 10px 24px;
        width: 100%;
    }

    .nav-right {
        padding: 0 24px;
        width: 100%;
    }
}



.about-hgh {
    padding: 60px 0;
    text-align: center;
}

.about-hgh h2 {
    font-size: 30px;
    font-weight: 700;
}

.about-text {
    max-width: 700px;
    margin: 12px auto 18px auto;
    color: #555;
    font-size: 16px;
}

.what-sets {
    margin-top: 20px;
    font-weight: 600;
}

/* --- TIMELINE BAR WITH DOTS --- */
.timeline-bar {
    width: 100%;
    max-width: 900px;
    height: 6px;
    background: #4472c4;
    margin: 40px auto 30px auto;
    border-radius: 20px;
    position: relative;
}

.timeline-bar .dot {
    width: 18px;
    height: 18px;
    background: #ff8a00;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.timeline-bar .dot:nth-child(1) { left: 5%; }
.timeline-bar .dot:nth-child(2) { left: 32%; }
.timeline-bar .dot:nth-child(3) { left: 59%; }
.timeline-bar .dot:nth-child(4) { left: 86%; }

/* --- CARDS --- */
.about-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    margin-top: 20px;
}

.about-card {
    background: #4472c4;
    color: #fff;
    padding: 28px 20px;
    border-radius: 22px;
    min-height: 180px;
    box-shadow: 0px 8px 22px rgba(0,0,0,0.08);
}

.about-card h4 {
    font-size: 18px;
    margin-bottom: 8px;
}

.about-card p {
    font-size: 14px;
    line-height: 1.4;
}

/* --- Mobile Responsive --- */
@media (max-width: 900px) {

    .about-cards {
        grid-template-columns: 1fr 1fr;
    }

    .timeline-bar .dot {
        display: none; /* hide dots on small screens */
    }

    .timeline-bar {
        height: 4px;
    }
}

@media (max-width: 600px) {
    .about-cards {
        grid-template-columns: 1fr;
    }
}