.elementor-124 .elementor-element.elementor-element-0eae0d3{margin-top:-11px;margin-bottom:0px;}.elementor-124 .elementor-element.elementor-element-a0ff244 > .elementor-container{min-height:500px;}.elementor-124 .elementor-element.elementor-element-a0ff244 .elementor-background-slideshow__slide__image{background-position:center center;}.elementor-124 .elementor-element.elementor-element-a0ff244{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;margin-top:-10px;margin-bottom:0px;}.elementor-124 .elementor-element.elementor-element-a0ff244 > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-widget-divider{--divider-color:var( --e-global-color-secondary );}.elementor-widget-divider .elementor-divider__text{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-divider.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-secondary );}.elementor-widget-divider.elementor-view-framed .elementor-icon, .elementor-widget-divider.elementor-view-default .elementor-icon{color:var( --e-global-color-secondary );border-color:var( --e-global-color-secondary );}.elementor-widget-divider.elementor-view-framed .elementor-icon, .elementor-widget-divider.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-secondary );}.elementor-124 .elementor-element.elementor-element-3a96931{--divider-border-style:double;--divider-color:#E1A739;--divider-border-width:1px;margin:-17px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-124 .elementor-element.elementor-element-3a96931 .elementor-divider-separator{width:100%;margin:0 auto;margin-center:0;}.elementor-124 .elementor-element.elementor-element-3a96931 .elementor-divider{text-align:center;padding-block-start:4px;padding-block-end:4px;}.elementor-124 .elementor-element.elementor-element-f72f3bd{margin-top:-23px;margin-bottom:0px;}.elementor-124 .elementor-element.elementor-element-f352994{margin-top:-20px;margin-bottom:0px;}.elementor-124 .elementor-element.elementor-element-bbff37d{margin-top:-20px;margin-bottom:0px;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-fb4e9e6 *//* =========================================
   BASTI NIKAH - COMING SOON MARQUEE
   ========================================= */

.bn-coming-soon-bar {
    width: 100%;
    height: 48px;

    display: flex;
    align-items: center;

    overflow: hidden;

    background: linear-gradient(
        90deg,
        #061b45 0%,
        #0b397c 50%,
        #061b45 100%
    );

    border-bottom: 2px solid #d4af37;

    box-shadow:
        0 3px 12px rgba(0, 0, 0, 0.18);

    position: relative;
    z-index: 999;
}


/* =========================================
   FIXED COMING SOON LABEL
   ========================================= */

.bn-coming-label {
    height: 100%;
    min-width: 145px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    background: linear-gradient(
        135deg,
        #d4af37,
        #f5d76e,
        #d4af37
    );

    color: #061b45;

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 0.7px;

    position: relative;
    z-index: 5;

    box-shadow:
        5px 0 15px rgba(0, 0, 0, 0.18);
}


/* Bell Animation */

.bn-coming-icon {
    font-size: 15px;

    animation: bnBellShake 1.8s infinite;
}

@keyframes bnBellShake {

    0%,
    100% {
        transform: rotate(0deg);
    }

    10% {
        transform: rotate(-12deg);
    }

    20% {
        transform: rotate(12deg);
    }

    30% {
        transform: rotate(-8deg);
    }

    40% {
        transform: rotate(8deg);
    }

    50% {
        transform: rotate(0deg);
    }
}


/* =========================================
   MARQUEE WRAPPER
   ========================================= */

.bn-marquee-wrapper {
    flex: 1;

    overflow: hidden;

    white-space: nowrap;
}


/* =========================================
   MOVING CONTENT
   ========================================= */

.bn-marquee-content {

    display: inline-flex;

    align-items: center;

    gap: 18px;

    padding-left: 30px;

    white-space: nowrap;

    animation:
        bnMarqueeMove 30s linear infinite;
}


/* =========================================
   TEXT
   ========================================= */

.bn-marquee-content span {

    color: #ffffff;

    font-size: 14px;

    font-weight: 600;

    white-space: nowrap;
}


/* =========================================
   GOLDEN ARROW
   ========================================= */

.bn-marquee-content .bn-arrow {

    color: #f5d76e;

    font-size: 19px;

    font-weight: 800;

    text-shadow:
        0 0 8px rgba(245, 215, 110, 0.45);
}


/* =========================================
   MARQUEE ANIMATION
   ========================================= */

@keyframes bnMarqueeMove {

    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }

}


/* =========================================
   PAUSE WHEN HOVER
   ========================================= */

.bn-marquee-wrapper:hover
.bn-marquee-content {

    animation-play-state: paused;
}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 767px) {

    .bn-coming-soon-bar {
        height: 43px;
    }

    .bn-coming-label {

        min-width: 105px;

        font-size: 9px;

        letter-spacing: 0.3px;

        gap: 5px;
    }

    .bn-coming-icon {
        font-size: 12px;
    }

    .bn-marquee-content {

        gap: 13px;

        padding-left: 20px;

        animation-duration: 24s;
    }

    .bn-marquee-content span {

        font-size: 12px;
    }

    .bn-marquee-content .bn-arrow {

        font-size: 16px;
    }

}/* End custom CSS */
/* Start custom CSS for divider, class: .elementor-element-3a96931 */*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
font-family:Poppins,sans-serif;
}

.why-choose{
background:#0d2c56;
padding:80px 20px;
}

.container{
max-width:1200px;
margin:auto;
}

.section-title{
text-align:center;
color:#fff;
font-size:42px;
font-weight:700;
margin-bottom:60px;
position:relative;
}

.section-title span{
color:#f4b223;
}

.section-title:before,
.section-title:after{
content:"";
position:absolute;
top:50%;
width:140px;
height:2px;
background:#d6a13b;
}

.section-title:before{
left:12%;
}

.section-title:after{
right:12%;
}

.feature-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:25px;
}

.feature-card{
background:#143663;
border:1px solid rgba(255,255,255,.08);
border-radius:18px;
padding:35px 25px;
text-align:center;
transition:.45s;
position:relative;
overflow:hidden;
cursor:pointer;
}

.feature-card::before{
content:"";
position:absolute;
left:0;
top:0;
width:100%;
height:4px;
background:#f4b223;
transform:scaleX(0);
transition:.45s;
}

.feature-card:hover::before{
transform:scaleX(1);
}

.feature-card:hover{
transform:translateY(-12px);
border-color:#f4b223;
box-shadow:
0 20px 40px rgba(0,0,0,.35),
0 0 25px rgba(244,178,35,.30);
}

.icon-circle{
width:90px;
height:90px;
background:#fff;
border-radius:50%;
display:flex;
justify-content:center;
align-items:center;
margin:auto;
margin-bottom:25px;
font-size:38px;
color:#123d70;
border:4px solid #f4b223;
transition:.45s;
}

.feature-card:hover .icon-circle{
background:#f4b223;
color:#fff;
transform:rotateY(180deg) scale(1.1);
box-shadow:0 0 25px rgba(244,178,35,.6);
}

.feature-card h3{
font-size:24px;
color:#fff;
margin-bottom:18px;
transition:.4s;
}

.feature-card:hover h3{
color:#f4b223;
}

.feature-card p{
font-size:15px;
line-height:1.8;
color:#d6dce6;
}

.active{
border:2px solid #f4b223;
box-shadow:0 0 25px rgba(244,178,35,.25);
}

@media(max-width:992px){

.feature-grid{
grid-template-columns:repeat(2,1fr);
}

}

@media(max-width:600px){

.section-title{
font-size:30px;
}

.section-title:before,
.section-title:after{
display:none;
}

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

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-678ba5c *//* =====================================================
   BASTI NIKAH - FEATURES SECTION
   ===================================================== */

.bn-features-section {
    width: 100%;
    box-sizing: border-box;

    background: #102f59;

    padding: 60px 20px 70px;
}


/* =====================================================
   OPTIONAL HEADING
   ===================================================== */

.bn-features-heading {
    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 48px;
}

.bn-heading-line {
    width: 120px;
    height: 1px;

    background: #fdbb24;

    display: block;
}

.bn-features-heading h2 {
    margin: 0 18px;

    color: #ffffff;

    font-size: 34px;
    font-weight: 700;

    line-height: 1.2;

    text-align: center;
}

.bn-features-heading h2 strong {
    color: #fdbb24;
}


/* =====================================================
   6 CARDS
   3 TOP + 3 BOTTOM
   ===================================================== */

.bn-features-grid {
    width: 100%;
    max-width: 1100px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 22px;
}


/* =====================================================
   CARD
   ===================================================== */

.bn-feature-card {
    position: relative;

    background: #193f70;

    border: 1px solid rgba(255, 255, 255, 0.12);

    border-radius: 15px;

    min-height: 285px;

    padding: 30px 25px;

    box-sizing: border-box;

    text-align: center;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    overflow: hidden;

    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease,
        background 0.35s ease;
}


/* =====================================================
   CARD HOVER
   ===================================================== */

.bn-feature-card:hover {
    transform: translateY(-8px);

    border-color: #fdbb24;

    background: #1b4275;

    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.20),
        0 0 18px rgba(253, 187, 36, 0.12);
}


/* =====================================================
   GOLDEN ROUND ICON
   ===================================================== */

.bn-feature-icon {
    width: 72px;
    height: 72px;

    border-radius: 50%;

    background: #fdbb24;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 20px;

    box-shadow:
        0 4px 10px rgba(0, 0, 0, 0.20);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}


/* =====================================================
   ICON HOVER
   ===================================================== */

.bn-feature-card:hover .bn-feature-icon {
    transform: scale(1.10);

    box-shadow:
        0 6px 18px rgba(253, 187, 36, 0.35);
}


/* =====================================================
   ICON
   ===================================================== */

.bn-feature-icon i {
    color: #0d3768;

    font-size: 30px;

    line-height: 1;

    transition:
        transform 0.35s ease;
}


/* Small icon movement on hover */

.bn-feature-card:hover .bn-feature-icon i {
    transform: scale(1.05);
}


/* =====================================================
   CARD TITLE
   ===================================================== */

.bn-feature-card h3 {
    margin: 0 0 13px;

    color: #ffffff;

    font-size: 20px;

    font-weight: 700;

    line-height: 1.35;

    text-align: center;
}


/* =====================================================
   CARD DESCRIPTION
   ===================================================== */

.bn-feature-card p {
    margin: 0;

    max-width: 280px;

    color: #ffffff;

    font-size: 14px;

    font-weight: 400;

    line-height: 1.65;

    text-align: center;

    opacity: 0.94;
}


/* =====================================================
   GOLDEN TOP LINE ON HOVER
   ===================================================== */

.bn-feature-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 50%;

    width: 0;
    height: 3px;

    background: #fdbb24;

    transform: translateX(-50%);

    transition: width 0.35s ease;
}

.bn-feature-card:hover::before {
    width: 55%;
}


/* =====================================================
   TABLET
   ===================================================== */

@media (max-width: 900px) {

    .bn-features-grid {
        grid-template-columns: repeat(2, 1fr);

        max-width: 720px;
    }

}


/* =====================================================
   MOBILE
   ===================================================== */

@media (max-width: 600px) {

    .bn-features-section {
        padding: 45px 15px 55px;
    }

    .bn-features-heading {
        margin-bottom: 35px;
    }

    .bn-heading-line {
        width: 45px;
    }

    .bn-features-heading h2 {
        font-size: 26px;

        margin: 0 12px;
    }

    .bn-features-grid {
        grid-template-columns: 1fr;

        max-width: 420px;

        gap: 18px;
    }

    .bn-feature-card {
        min-height: 270px;

        padding: 30px 22px;
    }

}


/* =====================================================
   SMALL MOBILE
   ===================================================== */

@media (max-width: 400px) {

    .bn-heading-line {
        width: 30px;
    }

    .bn-features-heading h2 {
        font-size: 23px;

        margin: 0 9px;
    }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-6ff23b5 *//* =====================================================
   BASTI NIKAH - HOW IT WORKS
   FINAL CSS
===================================================== */

.how-it-works-container {
    width: 100%;
    max-width: 1125px;
    min-height: 400px;

    /* SAME BACKGROUND AS 24/7 FEATURES */
    background: #102f59;

    padding: 60px 40px;
    margin: 0 auto;

    border-radius: 15px;

    box-sizing: border-box;

    text-align: center;

    display: flex;
    flex-direction: column;
    justify-content: center;

    overflow: hidden;
}


/* =====================================================
   MAIN HEADING
===================================================== */

.main-title {
    margin: 0 0 45px;

    color: #ffffff;

    font-family: 'Poppins', sans-serif;

    font-size: 38px;
    font-weight: 700;

    line-height: 1.2;
    letter-spacing: 0.5px;

    text-align: center;
}


/* =====================================================
   STEPS WRAPPER
===================================================== */

.steps-wrapper {
    width: 100%;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 15px;
}


/* =====================================================
   STEP ITEM
===================================================== */

.step-item {
    flex: 1;

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;

    cursor: pointer;

    transition: transform 0.35s ease;
}


/* =====================================================
   GOLDEN ICON CIRCLE
===================================================== */

.icon-circle {
    width: 90px;
    height: 90px;

    border-radius: 50%;

    background: #fdbb24;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 20px;

    box-shadow:
        0 4px 10px rgba(0, 0, 0, 0.20);

    transition:
        transform 0.35s ease,
        background 0.35s ease,
        box-shadow 0.35s ease;
}


/* =====================================================
   SVG ICON
===================================================== */

.step-icon {
    width: 44px;
    height: 44px;

    fill: #0d3768;

    transition: transform 0.35s ease;
}


/* =====================================================
   HOVER EFFECT
===================================================== */

.step-item:hover {
    transform: translateY(-5px);
}


/* ICON HOVER */

.step-item:hover .icon-circle {
    transform: translateY(-8px) scale(1.06);

    background: #f1bf48;

    box-shadow:
        0 6px 18px rgba(253, 187, 36, 0.35);
}


/* ICON SCALE */

.step-item:hover .step-icon {
    transform: scale(1.10);
}


/* =====================================================
   STEP TITLE
===================================================== */

.step-number-title {
    margin: 0 0 10px;

    color: #ffffff;

    font-family: 'Poppins', sans-serif;

    font-size: 20px;
    font-weight: 700;

    line-height: 1.35;

    text-align: center;

    transition: color 0.35s ease;
}


/* TITLE HOVER */

.step-item:hover .step-number-title {
    color: #fdbb24;
}


/* =====================================================
   DESCRIPTION
===================================================== */

.step-description {
    margin: 0 auto;

    max-width: 190px;

    color: #ffffff;

    font-family: 'Poppins', sans-serif;

    font-size: 13.5px;
    font-weight: 400;

    line-height: 1.5;

    text-align: center;

    opacity: 0.94;
}


/* =====================================================
   ARROW DIVIDER
===================================================== */

.arrow-divider {
    display: flex;

    align-items: center;
    justify-content: center;

    margin-top: 32px;

    flex-shrink: 0;
}


/* ARROW */

.arrow-divider svg {
    width: 28px;
    height: 28px;

    stroke: #fdbb24;

    transition:
        transform 0.35s ease,
        stroke 0.35s ease;
}


/* ARROW HOVER */

.step-item:hover + .arrow-divider svg {
    transform: translateX(5px);

    stroke: #f1bf48;
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 850px) {

    .how-it-works-container {
        padding: 45px 25px;
    }

    .main-title {
        font-size: 30px;
        margin-bottom: 35px;
    }

    .steps-wrapper {
        gap: 10px;
    }

    .icon-circle {
        width: 78px;
        height: 78px;
    }

    .step-icon {
        width: 38px;
        height: 38px;
    }

    .step-number-title {
        font-size: 16px;
    }

    .step-description {
        font-size: 12px;
    }

    .arrow-divider svg {
        width: 24px;
        height: 24px;
    }
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 600px) {

    .how-it-works-container {
        padding: 45px 15px 50px;
        border-radius: 12px;
    }

    .main-title {
        font-size: 26px;
        margin-bottom: 30px;
    }

    .steps-wrapper {
        display: grid;

        grid-template-columns: repeat(2, 1fr);

        gap: 35px 15px;
    }

    .arrow-divider {
        display: none;
    }

    .icon-circle {
        width: 68px;
        height: 68px;

        margin-bottom: 15px;
    }

    .step-icon {
        width: 34px;
        height: 34px;
    }

    .step-number-title {
        font-size: 14px;
    }

    .step-description {
        font-size: 11px;
        max-width: 160px;
    }
}


/* =====================================================
   SMALL MOBILE
===================================================== */

@media (max-width: 400px) {

    .steps-wrapper {
        grid-template-columns: 1fr;
    }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-f81bb80 *//* =====================================================
   BASTI NIKAH - HOW TO REGISTER
===================================================== */

.bn-how-register {
    width: 100%;
    box-sizing: border-box;

    background: #102f59;

    padding: 55px 40px;

    border-radius: 15px;

    overflow: hidden;
}


/* =====================================================
   MAIN CONTAINER
===================================================== */

.bn-register-inner {
    width: 100%;
    max-width: 1100px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: 0.9fr 1.1fr;

    align-items: center;

    gap: 18px;
}


/* =====================================================
   LEFT SIDE
===================================================== */

.bn-register-left {
    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 18px;
}


/* =====================================================
   HEADING
===================================================== */

.bn-register-title {
    margin: 0;

    color: #ffffff;

    font-family: 'Poppins', sans-serif;

    font-size: 32px;

    font-weight: 700;

    line-height: 1.25;

    white-space: nowrap;
}


/* GOLD LINE */

.bn-register-title::after {
    content: "";

    display: block;

    width: 55px;
    height: 3px;

    margin-top: 10px;

    background: #fdbb24;

    border-radius: 5px;
}


/* =====================================================
   BIG ARROW
===================================================== */

.bn-register-arrow {
    width: 58px;
    height: 58px;

    min-width: 58px;

    border-radius: 50%;

    background: rgba(253, 187, 36, 0.12);

    border: 1px solid rgba(253, 187, 36, 0.40);

    display: flex;

    align-items: center;
    justify-content: center;

    transition: all 0.35s ease;
}

.bn-register-arrow svg {
    width: 34px;
    height: 34px;

    stroke: #fdbb24;

    transition: transform 0.35s ease;
}


/* =====================================================
   VIDEO BOX
===================================================== */

.bn-register-video {
    width: 100%;

    background: #193f70;

    padding: 10px;

    border-radius: 15px;

    box-sizing: border-box;

    border: 1px solid rgba(255, 255, 255, 0.12);

    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.18);

    transition: all 0.35s ease;
}


/* =====================================================
   YOUTUBE VIDEO AREA
===================================================== */

.bn-register-video-box {
    position: relative;

    width: 100%;

    aspect-ratio: 16 / 9;

    background: #102f59;

    border-radius: 10px;

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: center;
}


/* =====================================================
   YOUTUBE ICON
===================================================== */

.bn-youtube-button {
    width: 72px;
    height: 50px;

    background: #ff0000;

    border-radius: 14px;

    display: flex;

    align-items: center;
    justify-content: center;

    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.30);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}


/* WHITE PLAY TRIANGLE */

.bn-youtube-button::after {
    content: "";

    width: 0;
    height: 0;

    border-top: 11px solid transparent;
    border-bottom: 11px solid transparent;
    border-left: 18px solid #ffffff;

    margin-left: 4px;
}


/* =====================================================
   VIDEO TEXT
===================================================== */

.bn-video-content {
    position: absolute;

    bottom: 18px;
    left: 0;
    right: 0;

    text-align: center;
}

.bn-video-content h3 {
    margin: 0 0 4px;

    color: #ffffff;

    font-size: 17px;

    font-weight: 700;
}

.bn-video-content p {
    margin: 0;

    color: #dce6f0;

    font-size: 12px;
}


/* =====================================================
   HOVER EFFECTS
===================================================== */

.bn-register-left:hover .bn-register-arrow {
    transform: translateX(7px);

    background: rgba(253, 187, 36, 0.20);

    box-shadow:
        0 5px 15px rgba(253, 187, 36, 0.20);
}

.bn-register-left:hover .bn-register-arrow svg {
    transform: scale(1.10);
}


.bn-register-video:hover {
    transform: translateY(-6px);

    border-color: #fdbb24;

    box-shadow:
        0 14px 30px rgba(0, 0, 0, 0.22),
        0 0 18px rgba(253, 187, 36, 0.12);
}


.bn-register-video:hover .bn-youtube-button {
    transform: scale(1.10);

    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.40);
}


/* =====================================================
   YOUTUBE IFRAME
===================================================== */

.bn-register-video iframe {
    width: 100%;
    height: 100%;

    position: absolute;

    top: 0;
    left: 0;

    border: 0;

    border-radius: 10px;
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 850px) {

    .bn-how-register {
        padding: 45px 25px;
    }

    .bn-register-inner {
        grid-template-columns: 0.8fr 1.2fr;

        gap: 15px;
    }

    .bn-register-title {
        font-size: 27px;
    }

    .bn-register-arrow {
        width: 52px;
        height: 52px;

        min-width: 52px;
    }

    .bn-register-arrow svg {
        width: 30px;
        height: 30px;
    }
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 650px) {

    .bn-how-register {
        padding: 40px 15px 45px;
    }

    .bn-register-inner {
        grid-template-columns: 1fr;

        gap: 25px;

        max-width: 500px;
    }

    .bn-register-left {
        justify-content: center;
    }

    .bn-register-title {
        font-size: 25px;
    }

    .bn-register-video {
        width: 100%;
    }
}


/* =====================================================
   SMALL MOBILE
===================================================== */

@media (max-width: 400px) {

    .bn-register-title {
        font-size: 22px;
    }

    .bn-register-arrow {
        width: 48px;
        height: 48px;

        min-width: 48px;
    }

    .bn-register-arrow svg {
        width: 28px;
        height: 28px;
    }

    .bn-youtube-button {
        width: 62px;
        height: 44px;
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-a5a0ffe *//* ==========================================
   BASTI NIKAH FAQ
   BLUE + GOLDEN
   NO NUMBERING
========================================== */

.bnikah-faq,
.bnikah-faq * {
  box-sizing: border-box;
}

/* SECTION */

.bnikah-faq {
  width: 100%;
  padding: 70px 20px;
  background: #f8fbff;
}

/* HEADER */

.bnikah-faq-header {
  max-width: 1200px;
  margin: 0 auto 45px;
  text-align: center;
}

.bnikah-faq-label {
  color: #c59a24;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.bnikah-faq-header h2 {
  margin: 0 0 10px;
  color: #0756a8;
  font-size: 38px;
  font-weight: 700;
  line-height: 1.2;
}

.bnikah-faq-header p {
  margin: 0;
  color: #64748b;
  font-size: 16px;
}

/* TWO COLUMNS */

.bnikah-faq-grid {
  max-width: 1200px;
  margin: 0 auto;

  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

/* CARD */

.bnikah-faq-card {
  background: #ffffff;
  border: 1px solid #e1e9f2;
  border-left: 4px solid #0756a8;
  border-radius: 14px;
  overflow: hidden;

  box-shadow: 0 5px 20px rgba(7, 86, 168, 0.07);

  transition: 0.3s ease;
}

/* QUESTION */

.bnikah-faq-question {
  width: 100%;
  min-height: 72px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 15px;

  padding: 18px 20px;

  margin: 0;
  border: 0;
  outline: 0;

  background: #ffffff !important;

  color: #0756a8 !important;

  text-align: left;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;

  cursor: pointer;
}

/* REMOVE ANY NUMBERING */

.bnikah-faq,
.bnikah-faq ol,
.bnikah-faq ul,
.bnikah-faq li {
  list-style: none !important;
  list-style-type: none !important;
  counter-reset: none !important;
  counter-increment: none !important;
  padding-left: 0;
  margin-left: 0;
}

.bnikah-faq-card::before,
.bnikah-faq-card::after,
.bnikah-faq-question::before,
.bnikah-faq-question::after,
.bnikah-faq-question span::before,
.bnikah-faq-question span::after {
  content: none !important;
  display: none !important;
}

/* QUESTION TEXT */

.bnikah-faq-question span {
  color: #0756a8 !important;
  transition: color 0.25s ease;
}

/* HOVER */

.bnikah-faq-question:hover {
  background: #ffffff !important;
}

.bnikah-faq-question:hover span {
  color: #c59a24 !important;
}

/* PLUS */

.bnikah-faq-question i {
  flex: 0 0 32px;

  width: 32px;
  height: 32px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: #0756a8;
  color: #ffffff;

  font-size: 22px;
  font-style: normal;
  font-weight: 400;

  transition: 0.3s ease;
}

/* HOVER PLUS */

.bnikah-faq-question:hover i {
  background: #c59a24;
}

/* ANSWER */

.bnikah-faq-answer {
  max-height: 0;
  overflow: hidden;

  padding: 0 20px;

  transition:
    max-height 0.35s ease,
    padding 0.35s ease;
}

.bnikah-faq-answer p {
  margin: 0;

  color: #475569;

  font-size: 15px;
  line-height: 1.7;
}

/* OPEN CARD */

.bnikah-faq-card.bnikah-open {
  border-color: #c59a24;
  border-left-color: #c59a24;
}

/* OPEN QUESTION */

.bnikah-faq-card.bnikah-open .bnikah-faq-question {
  background: #ffffff !important;
}

.bnikah-faq-card.bnikah-open .bnikah-faq-question span {
  color: #0756a8 !important;
}

/* OPEN ICON */

.bnikah-faq-card.bnikah-open .bnikah-faq-question i {
  background: #c59a24;
  transform: rotate(45deg);
}

/* OPEN ANSWER */

.bnikah-faq-card.bnikah-open .bnikah-faq-answer {
  padding-bottom: 20px;
}

/* CARD HOVER */

.bnikah-faq-card:hover {
  border-color: #c59a24;
  box-shadow: 0 8px 25px rgba(197, 154, 36, 0.12);
}


/* ==========================================
   TABLET
========================================== */

@media (max-width: 900px) {

  .bnikah-faq-grid {
    grid-template-columns: 1fr;
  }

  .bnikah-faq-header h2 {
    font-size: 32px;
  }

}


/* ==========================================
   MOBILE
========================================== */

@media (max-width: 600px) {

  .bnikah-faq {
    padding: 50px 15px;
  }

  .bnikah-faq-header {
    margin-bottom: 30px;
  }

  .bnikah-faq-header h2 {
    font-size: 28px;
  }

  .bnikah-faq-header p {
    font-size: 14px;
  }

  .bnikah-faq-grid {
    gap: 14px;
  }

  .bnikah-faq-question {
    min-height: 65px;
    padding: 16px;
    font-size: 14px;
  }

  .bnikah-faq-question i {
    flex-basis: 29px;
    width: 29px;
    height: 29px;
    font-size: 20px;
  }

  .bnikah-faq-answer {
    padding-left: 16px;
    padding-right: 16px;
  }

  .bnikah-faq-answer p {
    font-size: 14px;
  }

  .bnikah-faq-card.bnikah-open .bnikah-faq-answer {
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: 16px;
  }

}/* End custom CSS */