/* =====================================================
   RIYA GOLD PACKERS - HERO SECTION COMPLETE CSS
   Fixes: navigation overlap, header stacking, responsive
   Load this stylesheet AFTER style.css and responsive.css
===================================================== */

/* Keep the existing site header above the hero without removing it from normal flow */
.main_header_area {
    position: relative;
    z-index: 1000;
    width: 100%;
}

.main_header_area .header_top,
.main_header_area .header_menu,
.main_header_area .navbar,
.main_header_area .navbar-collapse {
    position: relative;
}

.main_header_area .header_menu {
    z-index: 1002;
}

.main_header_area .navbar {
    margin-bottom: 0;
}

.main_header_area .navbar .dropdown-menu {
    z-index: 1100;
}

/* Do not pull hero upward beneath the navigation */
.rgp-hero {
    --rgp-navy: #10365e;
    --rgp-navy-dark: #082744;
    --rgp-orange: #ff831b;
    --rgp-orange-dark: #ed7010;

    display: block !important;
    position: relative !important;
    z-index: 1;
    isolation: isolate;
    clear: both;
    float: none !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 58px 0 54px !important;
    overflow: hidden;
    box-sizing: border-box;
    background:
        radial-gradient(circle at 15% 15%, rgba(47, 100, 145, .35), transparent 40%),
        linear-gradient(120deg, var(--rgp-navy-dark), var(--rgp-navy)) !important;
}

.rgp-hero *,
.rgp-hero *::before,
.rgp-hero *::after {
    box-sizing: border-box;
}

.rgp-hero::before {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
    top: -180px;
    right: -120px;
    width: 430px;
    height: 430px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 50%;
    box-shadow: 0 0 0 55px rgba(255,255,255,.025),
                0 0 0 110px rgba(255,255,255,.02);
}

.rgp-hero-container {
    position: relative;
    z-index: 1;
    width: calc(100% - 48px) !important;
    max-width: 1280px !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr) !important;
    align-items: center !important;
    gap: 42px !important;
}

.rgp-hero-content {
    position: relative;
    z-index: 1;
    min-width: 0;
    margin: 0;
    padding: 0;
    color: #fff;
}

.rgp-hero-tag {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 20px !important;
    color: #ffb46e;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.6px;
    line-height: 1.5;
}

.rgp-hero-tag span {
    display: inline-block;
    width: 27px;
    height: 3px;
    flex: 0 0 27px;
    border-radius: 4px;
    background: var(--rgp-orange);
}

.rgp-hero-content h1 {
    max-width: 680px;
    margin: 0 0 22px !important;
    padding: 0 !important;
    color: #fff !important;
    font-size: clamp(36px, 3.8vw, 54px) !important;
    line-height: 1.13 !important;
    letter-spacing: -1.2px !important;
    font-weight: 800 !important;
}

.rgp-hero-content h1 span {
    display: block !important;
    margin-top: 5px;
    color: var(--rgp-orange) !important;
}

.rgp-hero-description {
    max-width: 610px;
    margin: 0 0 28px !important;
    padding: 0;
    color: #d7e3f0 !important;
    font-size: 15px;
    line-height: 1.8 !important;
}

.rgp-hero-features {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px 22px !important;
    max-width: 550px;
    margin: 0 0 32px !important;
    padding: 0;
}

.rgp-feature {
    display: flex !important;
    align-items: center;
    gap: 12px;
    min-width: 0;
    margin: 0;
}

.rgp-feature-icon {
    width: 47px;
    height: 47px;
    flex: 0 0 47px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.65);
    border-radius: 50%;
    color: #fff;
    font-size: 19px;
}

.rgp-feature:nth-child(even) .rgp-feature-icon {
    border-color: var(--rgp-orange);
    color: #ffb46e;
}

.rgp-feature strong,
.rgp-feature small {
    display: block;
}

.rgp-feature strong {
    margin: 0 0 5px;
    color: #fff;
    font-size: 13px;
    line-height: 1.4;
}

.rgp-feature small {
    color: #c5d6e7;
    font-size: 12px;
    line-height: 1.4;
}

.rgp-hero-buttons {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: 0 0 26px !important;
    padding: 0;
}

.rgp-hero .rgp-call-btn,
.rgp-hero .rgp-quote-btn {
    min-height: 51px;
    padding: 14px 19px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.4;
    text-decoration: none !important;
    transition: background .2s ease, transform .2s ease;
}

.rgp-hero .rgp-call-btn {
    border: 1px solid var(--rgp-orange);
    background: var(--rgp-orange);
    color: #fff !important;
}

.rgp-hero .rgp-call-btn:hover {
    background: var(--rgp-orange-dark);
    transform: translateY(-2px);
}

.rgp-hero .rgp-quote-btn {
    border: 1px solid rgba(255,255,255,.65);
    background: transparent;
    color: #fff !important;
}

.rgp-hero .rgp-quote-btn:hover {
    background: rgba(255,255,255,.1);
    transform: translateY(-2px);
}

.rgp-hero-bottom {
    display: flex !important;
    flex-wrap: wrap;
    gap: 10px 17px;
    color: #e0eaf4;
    font-size: 11px;
    line-height: 1.7;
}

.rgp-hero-bottom span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.rgp-hero-bottom i {
    color: var(--rgp-orange);
    font-size: 14px;
}

/* Form card: keep it in the grid, never absolutely positioned */
.rgp-form-card {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    float: none !important;
    align-self: center;
    width: 100% !important;
    max-width: none !important;
    min-width: 0;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 30px !important;
    border: 1px solid rgba(255,255,255,.7);
    border-radius: 14px;
    background: #fff !important;
    color: #17324f;
    box-shadow: 0 20px 55px rgba(0,0,0,.18);
    scroll-margin-top: 25px;
}

.rgp-form-heading {
    margin: 0 0 25px !important;
    padding: 0;
}

.rgp-form-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 11px !important;
    color: #e66e10;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.4px;
}

.rgp-form-heading h2 {
    margin: 0 0 12px !important;
    padding: 0 !important;
    color: var(--rgp-navy) !important;
    font-size: clamp(25px, 2.4vw, 34px) !important;
    line-height: 1.25 !important;
    letter-spacing: -.7px;
    font-weight: 600 !important;
}

.rgp-form-heading h2 span {
    color: #f58220 !important;
}

.rgp-form-heading p {
    margin: 0 !important;
    padding: 0;
    color: #68798c !important;
    font-size: 13px;
    line-height: 1.75;
}

.rgp-form-card form {
    width: 100%;
    margin: 0 !important;
    padding: 0;
}

.rgp-form-card .rgp-field {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    margin: 0;
}

.rgp-form-card .rgp-field.rgp-full {
    margin: 0 0 20px !important;
}

.rgp-form-card .rgp-field label {
    display: block;
    margin: 0 0 9px !important;
    padding: 0 !important;
    color: #17324f !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.5;
}

.rgp-form-card .rgp-field label span {
    color: #e56e19;
}

.rgp-form-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px 14px !important;
}

.rgp-form-card .rgp-field input,
.rgp-form-card .rgp-field select {
    display: block;
    width: 100% !important;
    max-width: 100%;
    height: 51px !important;
    min-width: 0;
    margin: 0 !important;
    padding: 0 13px !important;
    border: 1px solid #d8e2ee !important;
    border-radius: 7px !important;
    background: #f9fbfd !important;
    color: #183552 !important;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px !important;
    line-height: normal;
    box-shadow: none;
    box-sizing: border-box !important;
}

.rgp-form-card .rgp-field input::placeholder {
    color: #8b9aab;
    opacity: 1;
}

.rgp-form-card .rgp-field input:focus,
.rgp-form-card .rgp-field select:focus {
    outline: none;
    border-color: var(--rgp-orange) !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px rgba(245,130,32,.12) !important;
}

.rgp-form-card .rgp-submit-btn {
    display: flex !important;
    width: 100% !important;
    min-height: 53px;
    height: auto !important;
    margin: 25px 0 0 !important;
    padding: 15px !important;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border: 0 !important;
    border-radius: 7px !important;
    background: var(--rgp-orange) !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 800;
    line-height: 1.4 !important;
    cursor: pointer;
    box-sizing: border-box !important;
}

.rgp-form-card .rgp-submit-btn:hover {
    background: var(--rgp-orange-dark) !important;
}

.rgp-form-note {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
    margin: 12px 0 0 !important;
    color: #7b8998 !important;
    font-size: 10px;
    line-height: 1.6;
    text-align: center;
}

/* Tablet */
@media (max-width: 991px) {
    .rgp-hero {
        padding: 44px 0 !important;
    }

    .rgp-hero-container {
        width: calc(100% - 36px) !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        gap: 24px !important;
    }

    .rgp-form-card {
        padding: 23px !important;
    }

    .rgp-hero-content h1 {
        font-size: clamp(31px, 4vw, 42px) !important;
    }

    .rgp-hero-description {
        font-size: 13px;
    }

    .rgp-hero-features {
        gap: 16px 10px !important;
    }

    .rgp-hero .rgp-call-btn,
    .rgp-hero .rgp-quote-btn {
        padding: 12px !important;
        font-size: 12px;
    }
}

/* Mobile: stack content and form; prevent navbar/hero overlap */
@media (max-width: 767px) {
    .main_header_area {
        z-index: 1000;
    }

    .main_header_area .header_menu,
    .main_header_area .navbar,
    .main_header_area .navbar-header {
        min-height: 0;
    }

    .rgp-hero {
        margin-top: 0 !important;
        padding: 36px 0 42px !important;
    }

    .rgp-hero-container {
        width: calc(100% - 32px) !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 30px !important;
    }

    .rgp-hero-content h1 {
        font-size: clamp(32px, 8vw, 45px) !important;
        line-height: 1.15 !important;
    }

    .rgp-hero-description {
        font-size: 14px;
    }

    .rgp-hero-buttons {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .rgp-hero .rgp-call-btn,
    .rgp-hero .rgp-quote-btn {
        width: 100% !important;
        min-height: 49px;
    }

    .rgp-form-card {
        padding: 23px 18px !important;
    }

    .rgp-form-heading h2 {
        font-size: 28px !important;
    }

    .rgp-form-grid {
        gap: 18px 11px !important;
    }

    .rgp-form-card .rgp-field input,
    .rgp-form-card .rgp-field select {
        height: 49px !important;
        padding: 0 10px !important;
        font-size: 12px !important;
    }
}

/* Small mobile */
@media (max-width: 380px) {
    .rgp-hero-container {
        width: calc(100% - 24px) !important;
    }

    .rgp-form-card {
        padding: 20px 13px !important;
    }

    .rgp-form-grid {
        gap: 17px 9px !important;
    }

    .rgp-form-card .rgp-field input,
    .rgp-form-card .rgp-field select {
        padding: 0 8px !important;
        font-size: 11px !important;
    }
}