.elementor-540 .elementor-element.elementor-element-76d0700{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-540 .elementor-element.elementor-element-05ac834{--spacer-size:100px;}.elementor-540 .elementor-element.elementor-element-cfd2aec{--display:flex;--min-height:760px;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-540 .elementor-element.elementor-element-3dd06fe{--display:flex;}.elementor-540 .elementor-element.elementor-element-3dd06fe.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-540 .elementor-element.elementor-element-aece2f1{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-540 .elementor-element.elementor-element-ca0badd .fluentform-widget-wrapper .ff-el-group .ff-btn-submit{background-color:#1a7efb !important;color:#ffffff !important;}.elementor-540 .elementor-element.elementor-element-e78da87{--display:flex;--min-height:210px;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;}.elementor-540 .elementor-element.elementor-element-e78da87:not(.elementor-motion-effects-element-type-background), .elementor-540 .elementor-element.elementor-element-e78da87 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#0D0F14;}.elementor-540 .elementor-element.elementor-element-f384545{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-540 .elementor-element.elementor-element-f384545:not(.elementor-motion-effects-element-type-background), .elementor-540 .elementor-element.elementor-element-f384545 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#050509;}.elementor-540 .elementor-element.elementor-element-7e7b015{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-540 .elementor-element.elementor-element-3809d2d{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-540 .elementor-element.elementor-element-3809d2d:not(.elementor-motion-effects-element-type-background), .elementor-540 .elementor-element.elementor-element-3809d2d > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#07090D;}.elementor-540 .elementor-element.elementor-element-e749eed{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-540 .elementor-element.elementor-element-7bbf7aa{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-540 .elementor-element.elementor-element-7bbf7aa:not(.elementor-motion-effects-element-type-background), .elementor-540 .elementor-element.elementor-element-7bbf7aa > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#0D1015;}.elementor-540 .elementor-element.elementor-element-624aca3{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-540 .elementor-element.elementor-element-4f46fc8{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-540 .elementor-element.elementor-element-08816cf{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-540 .elementor-element.elementor-element-6415ad8{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-540 .elementor-element.elementor-element-87d1bc0{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-540 .elementor-element.elementor-element-c7f794d{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}:root{--page-title-display:none;}@media(min-width:768px){.elementor-540 .elementor-element.elementor-element-3dd06fe{--width:52.53%;}.elementor-540 .elementor-element.elementor-element-aece2f1{--width:42%;}}/* Start custom CSS for html, class: .elementor-element-8157727 *//* =========================================
   AYAN HERO FORM HEADING + FORM
   COMPACT VERSION
   ========================================= */

.ayan-form-heading {
    width: 100%;
    text-align: center;
    margin: 0 auto 22px;
    padding: 0;
}

.ayan-form-heading h2 {
    margin: 0 0 8px;
    padding: 0;
    font-size: 30px;
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -0.8px;
    color: #f5f5f7;
}

.ayan-form-heading h2 span {
    background: linear-gradient(
        90deg,
        #ff9d00 0%,
        #e7c52b 45%,
        #65c47c 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.ayan-form-heading p {
    margin: 0 auto;
    max-width: 650px;
    font-size: 15px;
    line-height: 1.5;
    font-weight: 400;
    color: #91a0b8;
}


/* =========================================
   FLUENT FORM
   ========================================= */

.ayan-form-heading + .fluentform,
.ayan-form-heading ~ .fluentform {
    width: 100%;
    margin: 0;
}


/* Labels */

.ayan-form-heading ~ .fluentform label {
    font-size: 15px !important;
    line-height: 1.3 !important;
    font-weight: 500 !important;
    color: #f1f3f5 !important;
    margin-bottom: 7px !important;
}


/* Required star */

.ayan-form-heading ~ .fluentform .ff-el-required {
    color: #ff6464 !important;
}


/* Input / Select */

.ayan-form-heading ~ .fluentform input,
.ayan-form-heading ~ .fluentform select,
.ayan-form-heading ~ .fluentform textarea {
    min-height: 52px !important;
    height: 52px !important;
    padding: 0 18px !important;

    border-radius: 11px !important;
    border: 1px solid #29313d !important;

    background: #10141a !important;
    color: #f5f5f7 !important;

    font-size: 15px !important;
    line-height: 1.4 !important;

    box-shadow: none !important;
    transition: all 0.25s ease !important;
}


/* Select */

.ayan-form-heading ~ .fluentform select {
    cursor: pointer;
}


/* Placeholder */

.ayan-form-heading ~ .fluentform input::placeholder,
.ayan-form-heading ~ .fluentform textarea::placeholder {
    color: #66758c !important;
    opacity: 1 !important;
}


/* Focus */

.ayan-form-heading ~ .fluentform input:focus,
.ayan-form-heading ~ .fluentform select:focus,
.ayan-form-heading ~ .fluentform textarea:focus {
    border-color: #ff9d00 !important;
    box-shadow: 0 0 0 2px rgba(255, 157, 0, 0.08) !important;
    outline: none !important;
}


/* Form rows */

.ayan-form-heading ~ .fluentform .ff-el-group {
    margin-bottom: 17px !important;
}


/* Button */

.ayan-form-heading ~ .fluentform button[type="submit"],
.ayan-form-heading ~ .fluentform .ff-btn-submit {
    width: 100% !important;
    min-height: 54px !important;

    margin-top: 2px !important;

    border: 0 !important;
    border-radius: 10px !important;

    background: #ff9d00 !important;
    color: #08090b !important;

    font-size: 15px !important;
    font-weight: 700 !important;

    cursor: pointer !important;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease !important;
}

.ayan-form-heading ~ .fluentform button[type="submit"]:hover,
.ayan-form-heading ~ .fluentform .ff-btn-submit:hover {
    transform: translateY(-2px);
    background: #ffad22 !important;
    box-shadow: 0 10px 25px rgba(255, 157, 0, 0.18) !important;
}


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

@media (max-width: 767px) {

    .ayan-form-heading {
        margin-bottom: 18px;
    }

    .ayan-form-heading h2 {
        font-size: 23px;
        line-height: 1.2;
        letter-spacing: -0.4px;
        margin-bottom: 6px;
    }

    .ayan-form-heading p {
        font-size: 13px;
        line-height: 1.45;
        max-width: 95%;
    }

    .ayan-form-heading ~ .fluentform label {
        font-size: 13px !important;
        margin-bottom: 6px !important;
    }

    .ayan-form-heading ~ .fluentform input,
    .ayan-form-heading ~ .fluentform select,
    .ayan-form-heading ~ .fluentform textarea {
        min-height: 47px !important;
        height: 47px !important;
        padding: 0 14px !important;
        border-radius: 9px !important;
        font-size: 13px !important;
    }

    .ayan-form-heading ~ .fluentform .ff-el-group {
        margin-bottom: 13px !important;
    }

    .ayan-form-heading ~ .fluentform button[type="submit"],
    .ayan-form-heading ~ .fluentform .ff-btn-submit {
        min-height: 49px !important;
        font-size: 14px !important;
        border-radius: 9px !important;
    }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-aece2f1 *//* =========================================================
   AYAN HERO FORM
   FLUENT FORM #1
   IMPROVED FINAL VERSION
   ========================================================= */


/* =========================================================
   MAIN FORM CARD
   ========================================================= */

.ayan-form-card {
    position: relative;

    width: 100%;
    max-width: 100%;

    box-sizing: border-box;

    /* IMPORTANT:
       creates proper breathing space between header
       and form */
    margin-top: 42px !important;

    padding: 30px !important;

    border: 1px solid rgba(255, 157, 0, 0.32);

    border-radius: 18px;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(25, 184, 166, 0.055),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            rgba(18, 21, 28, 0.98),
            rgba(8, 10, 15, 0.98)
        );

    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.42),
        0 0 35px rgba(255, 157, 0, 0.035);

    overflow: visible;

    z-index: 5;
}


/* =========================================================
   DECORATIVE LINE ABOVE FORM
   ========================================================= */

.ayan-form-card::before {

    content: "";

    position: absolute;

    top: -18px;

    left: 8%;

    width: 84%;

    height: 1px;

    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 157, 0, 0.18) 12%,
        rgba(255, 157, 0, 0.85) 38%,
        rgba(25, 184, 166, 0.85) 65%,
        rgba(25, 184, 166, 0.18) 88%,
        transparent 100%
    );

    pointer-events: none;
}


/* glowing point on accent line */

.ayan-form-card::after {

    content: "";

    position: absolute;

    top: -20px;

    left: 28%;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #19b8a6;

    box-shadow:
        0 0 8px rgba(25, 184, 166, 0.85),
        0 0 18px rgba(25, 184, 166, 0.25);

    animation: ayanFormPulse 2.8s ease-in-out infinite;

    pointer-events: none;
}


/* =========================================================
   FORM HEADER
   ========================================================= */

.ayan-form-top {

    position: relative;

    z-index: 2;

    margin-bottom: 24px;
}


/* badge */

.ayan-form-badge {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    margin-bottom: 11px;

    color: #ff9d00;

    font-family: "Inter", sans-serif;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 0.12em;

    line-height: 1.3;

    text-transform: uppercase;
}


/* badge dot */

.ayan-form-badge::before {

    content: "";

    width: 5px;
    height: 5px;

    flex: 0 0 5px;

    border-radius: 50%;

    background: #19b8a6;

    box-shadow:
        0 0 9px rgba(25, 184, 166, 0.8);
}


/* heading */

.ayan-form-card h2 {

    margin: 0 !important;

    padding: 0 !important;

    color: #f7f8fa !important;

    font-family: "Manrope", sans-serif !important;

    font-size: 29px !important;

    font-weight: 700 !important;

    line-height: 1.18 !important;

    letter-spacing: -0.025em !important;
}


/* gradient heading */

.ayan-form-card h2 span {

    background: linear-gradient(
        100deg,
        #ff9d00 0%,
        #e7c52b 42%,
        #19b8a6 100%
    );

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent;
}


/* description */

.ayan-form-card p {

    max-width: 520px;

    margin: 10px 0 0 !important;

    color: #858e9c !important;

    font-family: "Inter", sans-serif !important;

    font-size: 13px !important;

    font-weight: 400 !important;

    line-height: 1.65 !important;
}


/* =========================================================
   REMOVE OLD PLACEHOLDER
   ========================================================= */

.ayan-form-placeholder {

    display: none !important;
}


/* =========================================================
   FLUENT FORM
   ========================================================= */

#fluentform_1 {

    position: relative;

    z-index: 2;

    width: 100% !important;

    max-width: 100% !important;

    margin: 0 !important;

    padding: 0 !important;
}


/* universal box sizing */

#fluentform_1 *,
#fluentform_1 *::before,
#fluentform_1 *::after {

    box-sizing: border-box;
}


/* =========================================================
   FORM ROW / FIELD GROUP
   ========================================================= */

#fluentform_1 .ff-el-group {

    width: 100%;

    margin: 0 0 15px !important;

    padding: 0 !important;
}


/* =========================================================
   LABEL
   ========================================================= */

#fluentform_1 .ff-el-form-label {

    display: block !important;

    margin: 0 0 7px !important;

    padding: 0 !important;

    color: #e4e7eb !important;

    font-family: "Inter", sans-serif !important;

    font-size: 13px !important;

    font-weight: 600 !important;

    line-height: 1.4 !important;
}


#fluentform_1 .ff-el-form-label .required {

    color: #ff6d6d !important;
}


/* =========================================================
   INPUTS
   ========================================================= */

#fluentform_1 input[type="text"],
#fluentform_1 input[type="email"],
#fluentform_1 input[type="tel"],
#fluentform_1 input[type="number"],
#fluentform_1 input[type="url"],
#fluentform_1 input[type="password"],
#fluentform_1 select,
#fluentform_1 textarea {

    display: block !important;

    width: 100% !important;

    min-width: 0 !important;

    min-height: 56px !important;

    margin: 0 !important;

    padding: 14px 16px !important;

    border: 1px solid #303640 !important;

    border-radius: 10px !important;

    background: #0f1319 !important;

    color: #f4f6f8 !important;

    font-family: "Inter", sans-serif !important;

    font-size: 14px !important;

    font-weight: 400 !important;

    line-height: 1.4 !important;

    outline: none !important;

    box-shadow: none !important;

    transition:
        border-color .22s ease,
        background .22s ease,
        box-shadow .22s ease,
        transform .22s ease !important;
}


/* =========================================================
   PLACEHOLDER
   ========================================================= */

#fluentform_1 input::placeholder,
#fluentform_1 textarea::placeholder {

    color: #66717f !important;

    opacity: 1 !important;
}


/* =========================================================
   INPUT HOVER
   ========================================================= */

#fluentform_1 input[type="text"]:hover,
#fluentform_1 input[type="email"]:hover,
#fluentform_1 input[type="tel"]:hover,
#fluentform_1 input[type="number"]:hover,
#fluentform_1 input[type="url"]:hover,
#fluentform_1 input[type="password"]:hover,
#fluentform_1 select:hover,
#fluentform_1 textarea:hover {

    border-color: #414a56 !important;

    background: #12171e !important;
}


/* =========================================================
   INPUT FOCUS
   ========================================================= */

#fluentform_1 input[type="text"]:focus,
#fluentform_1 input[type="email"]:focus,
#fluentform_1 input[type="tel"]:focus,
#fluentform_1 input[type="number"]:focus,
#fluentform_1 input[type="url"]:focus,
#fluentform_1 input[type="password"]:focus,
#fluentform_1 select:focus,
#fluentform_1 textarea:focus {

    border-color: #ff9d00 !important;

    background: #12171d !important;

    color: #ffffff !important;

    outline: none !important;

    box-shadow:
        0 0 0 2px rgba(255, 157, 0, 0.08),
        0 0 20px rgba(255, 157, 0, 0.035) !important;
}


/* =========================================================
   SELECT
   ========================================================= */

#fluentform_1 select {

    color: #9ca5b1 !important;

    cursor: pointer !important;
}


#fluentform_1 select option {

    background: #10141a !important;

    color: #ffffff !important;
}


/* =========================================================
   TEXTAREA
   ========================================================= */

#fluentform_1 textarea {

    min-height: 90px !important;

    resize: vertical !important;
}


/* =========================================================
   PHONE FIELD
   ========================================================= */

#fluentform_1 .iti {

    width: 100% !important;
}


#fluentform_1 .iti input {

    width: 100% !important;
}


#fluentform_1 .iti__selected-flag {

    background: transparent !important;
}


#fluentform_1 .iti__country-list {

    z-index: 99999 !important;

    max-width: 100vw;

    background: #10141a !important;

    border: 1px solid #303640 !important;

    color: #ffffff !important;

    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.55) !important;
}


#fluentform_1 .iti__country:hover {

    background: #1a2028 !important;
}


/* =========================================================
   SUBMIT BUTTON
   ========================================================= */

#fluentform_1 .ff-btn-submit {

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    width: 100% !important;

    min-height: 56px !important;

    margin: 5px 0 0 !important;

    padding: 14px 18px !important;

    border: 1px solid #ffad1a !important;

    border-radius: 10px !important;

    background: #ff9d00 !important;

    color: #07090c !important;

    font-family: "Inter", sans-serif !important;

    font-size: 14px !important;

    font-weight: 800 !important;

    line-height: 1 !important;

    text-align: center !important;

    cursor: pointer !important;

    box-shadow:
        0 8px 24px rgba(255, 157, 0, 0.12) !important;

    transition:
        background .2s ease,
        border-color .2s ease,
        transform .2s ease,
        box-shadow .2s ease !important;
}


/* button hover */

#fluentform_1 .ff-btn-submit:hover {

    background: #ffad1a !important;

    border-color: #ffbd3c !important;

    color: #07090c !important;

    transform: translateY(-2px) !important;

    box-shadow:
        0 12px 30px rgba(255, 157, 0, 0.20) !important;
}


/* button active */

#fluentform_1 .ff-btn-submit:active {

    transform: translateY(0) !important;
}


/* =========================================================
   VALIDATION
   ========================================================= */

#fluentform_1 .ff-el-is-error input,
#fluentform_1 .ff-el-is-error select,
#fluentform_1 .ff-el-is-error textarea {

    border-color: #e06464 !important;

    box-shadow:
        0 0 0 2px rgba(224, 100, 100, .08) !important;
}


#fluentform_1 .error {

    display: block;

    margin-top: 5px !important;

    color: #ff8585 !important;

    font-family: "Inter", sans-serif !important;

    font-size: 11px !important;

    line-height: 1.4 !important;
}


/* =========================================================
   SUCCESS MESSAGE
   ========================================================= */

#fluentform_1 .ff-message-success {

    margin: 14px 0 0 !important;

    padding: 13px 14px !important;

    border: 1px solid rgba(25, 184, 166, .30) !important;

    border-radius: 9px !important;

    background: rgba(25, 184, 166, .055) !important;

    color: #8bded5 !important;

    font-family: "Inter", sans-serif !important;

    font-size: 12px !important;

    line-height: 1.5 !important;
}


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

#fluentform_1 .ff-el-help-message {

    margin-top: 5px !important;

    color: #697481 !important;

    font-size: 10px !important;

    line-height: 1.4 !important;
}


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

.ayan-form-security {

    position: relative;

    z-index: 2;

    margin-top: 16px;

    color: #6e7784;

    font-family: "Inter", sans-serif;

    font-size: 11px;

    line-height: 1.5;

    text-align: center;
}


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

@keyframes ayanFormPulse {

    0%,
    100% {

        opacity: .45;

        transform: scale(.85);
    }

    50% {

        opacity: 1;

        transform: scale(1.15);
    }
}


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

@media (max-width: 1024px) {

    .ayan-form-card {

        margin-top: 32px !important;

        padding: 26px !important;

        border-radius: 16px;
    }


    .ayan-form-card h2 {

        font-size: 27px !important;
    }


    .ayan-form-card p {

        font-size: 12px !important;
    }


    #fluentform_1 .ff-el-form-label {

        font-size: 12px !important;
    }


    #fluentform_1 input[type="text"],
    #fluentform_1 input[type="email"],
    #fluentform_1 input[type="tel"],
    #fluentform_1 input[type="number"],
    #fluentform_1 input[type="url"],
    #fluentform_1 input[type="password"],
    #fluentform_1 select,
    #fluentform_1 textarea {

        min-height: 52px !important;

        font-size: 13px !important;
    }
}


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

@media (max-width: 767px) {

    .ayan-form-card {

        width: 100% !important;

        max-width: 100% !important;

        margin-top: 34px !important;

        padding: 22px 18px !important;

        border-radius: 15px;

        overflow: visible;
    }


    /* mobile accent line */

    .ayan-form-card::before {

        top: -14px;

        left: 7%;

        width: 86%;
    }


    .ayan-form-card::after {

        top: -16px;

        left: 24%;
    }


    .ayan-form-top {

        margin-bottom: 20px;
    }


    .ayan-form-badge {

        margin-bottom: 9px;

        font-size: 9px;

        letter-spacing: .10em;
    }


    .ayan-form-card h2 {

        font-size: 25px !important;

        line-height: 1.18 !important;
    }


    .ayan-form-card p {

        margin-top: 9px !important;

        font-size: 12px !important;

        line-height: 1.6 !important;
    }


    #fluentform_1 .ff-el-group {

        margin-bottom: 14px !important;
    }


    #fluentform_1 .ff-el-form-label {

        margin-bottom: 6px !important;

        font-size: 11px !important;
    }


    #fluentform_1 input[type="text"],
    #fluentform_1 input[type="email"],
    #fluentform_1 input[type="tel"],
    #fluentform_1 input[type="number"],
    #fluentform_1 input[type="url"],
    #fluentform_1 input[type="password"],
    #fluentform_1 select,
    #fluentform_1 textarea {

        min-height: 47px !important;

        padding: 11px 12px !important;

        border-radius: 8px !important;

        font-size: 13px !important;
    }


    #fluentform_1 textarea {

        min-height: 80px !important;
    }


    #fluentform_1 .ff-btn-submit {

        min-height: 50px !important;

        margin-top: 3px !important;

        border-radius: 8px !important;

        font-size: 12px !important;
    }


    .ayan-form-security {

        margin-top: 13px;

        font-size: 9px;
    }
}


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

@media (max-width: 480px) {

    .ayan-form-card {

        margin-top: 30px !important;

        padding: 20px 14px !important;
    }


    .ayan-form-card::before {

        top: -12px;

        left: 8%;

        width: 84%;
    }


    .ayan-form-card::after {

        top: -14px;

        left: 20%;
    }


    .ayan-form-card h2 {

        font-size: 23px !important;
    }


    .ayan-form-card p {

        font-size: 11px !important;

        line-height: 1.6 !important;
    }


    #fluentform_1 input[type="text"],
    #fluentform_1 input[type="email"],
    #fluentform_1 input[type="tel"],
    #fluentform_1 input[type="number"],
    #fluentform_1 input[type="url"],
    #fluentform_1 input[type="password"],
    #fluentform_1 select,
    #fluentform_1 textarea {

        min-height: 45px !important;

        font-size: 12px !important;
    }


    #fluentform_1 .ff-btn-submit {

        min-height: 48px !important;

        font-size: 12px !important;
    }
}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 360px) {

    .ayan-form-card {

        padding: 18px 12px !important;
    }


    .ayan-form-card h2 {

        font-size: 21px !important;
    }


    .ayan-form-badge {

        font-size: 8px;
    }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-cfd2aec *//* =========================================================
   AYAN DIGITAL MARKETING
   HERO SECTION — COMPLETE CSS
   Fluent Form CSS kept SEPARATE
   ========================================================= */


/* =========================================================
   HERO MAIN
   ========================================================= */

.ayan-hero {
    position: relative;
    width: 100%;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 7% 48%,
            rgba(255, 157, 0, 0.12),
            transparent 30%
        ),
        radial-gradient(
            circle at 93% 52%,
            rgba(25, 184, 166, 0.11),
            transparent 32%
        ),
        #050509;

    color: #ffffff;
}


/* =========================================================
   HERO INNER
   ========================================================= */

.ayan-hero-inner {
    position: relative;

    width: 100%;
    min-height: 620px;

    display: flex;
    align-items: center;

    padding-top: 100px;
    padding-bottom: 70px;
}


/* =========================================================
   HERO BACKGROUND GLOW
   ========================================================= */

.ayan-hero-glow {
    position: absolute;

    width: 430px;
    height: 430px;

    border-radius: 50%;

    filter: blur(110px);

    pointer-events: none;

    opacity: 0.16;
}


.ayan-glow-orange {
    left: -230px;
    top: 15%;

    background: #ff9d00;
}


.ayan-glow-teal {
    right: -230px;
    bottom: 0;

    background: #19b8a6;
}


/* =========================================================
   NETWORK BACKGROUND
   ========================================================= */

.ayan-network {
    position: absolute;

    inset: 0;

    overflow: hidden;

    pointer-events: none;

    opacity: 0.55;
}


/* NETWORK NODES */

.ayan-node {
    position: absolute;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    box-shadow:
        0 0 14px currentColor;

    animation:
        ayanNodePulse 3s ease-in-out infinite;
}


.node-1 {
    right: 13%;
    top: 22%;

    color: #19b8a6;
}


.node-2 {
    right: 22%;
    top: 48%;

    color: #ff9d00;

    animation-delay: .8s;
}


.node-3 {
    right: 8%;
    top: 65%;

    color: #19b8a6;

    animation-delay: 1.2s;
}


.node-4 {
    left: 43%;
    top: 16%;

    color: #ff9d00;

    animation-delay: 1.6s;
}


.node-5 {
    left: 52%;
    bottom: 15%;

    color: #19b8a6;

    animation-delay: 2s;
}


@keyframes ayanNodePulse {

    0%,
    100% {
        transform: scale(.8);
        opacity: .4;
    }

    50% {
        transform: scale(1.5);
        opacity: 1;
    }
}


/* =========================================================
   NETWORK LINES
   ========================================================= */

.ayan-line {
    position: absolute;

    height: 1px;

    transform-origin: left center;

    opacity: .18;

    background:
        linear-gradient(
            90deg,
            transparent,
            #19b8a6,
            #ff9d00,
            transparent
        );
}


.line-1 {
    width: 420px;

    right: 5%;
    top: 25%;

    transform: rotate(18deg);
}


.line-2 {
    width: 360px;

    right: 8%;
    top: 52%;

    transform: rotate(-12deg);
}


.line-3 {
    width: 300px;

    right: 20%;
    top: 68%;

    transform: rotate(20deg);
}


.line-4 {
    width: 280px;

    left: 35%;
    top: 18%;

    transform: rotate(-12deg);
}


/* =========================================================
   HERO COPY
   ========================================================= */

.ayan-hero-copy {
    position: relative;

    z-index: 3;

    width: 100%;

    max-width: 720px;
}


/* =========================================================
   EYEBROW
   ========================================================= */

.ayan-hero-eyebrow {
    display: inline-flex;

    align-items: center;
    gap: 9px;

    margin-bottom: 22px;

    padding: 8px 13px;

    border: 1px solid rgba(25, 184, 166, .35);

    border-radius: 999px;

    background:
        rgba(25, 184, 166, .055);

    color: #d9fff9;

    font-family: "Inter", sans-serif;

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

    letter-spacing: .06em;

    line-height: 1.3;

    text-transform: uppercase;
}


/* EYEBROW DOT */

.ayan-live-dot {
    width: 7px;
    height: 7px;

    flex: 0 0 7px;

    border-radius: 50%;

    background: #19b8a6;

    box-shadow:
        0 0 12px rgba(25, 184, 166, .9);

    animation:
        ayanLivePulse 2s ease-in-out infinite;
}


@keyframes ayanLivePulse {

    0%,
    100% {
        opacity: .5;
        transform: scale(.9);
    }

    50% {
        opacity: 1;
        transform: scale(1.15);
    }
}


/* =========================================================
   HERO TITLE
   ========================================================= */

.ayan-hero-title {
    max-width: 760px;

    margin: 0;

    color: #ffffff;

    font-family: "Manrope", sans-serif;

    font-size:
        clamp(
            44px,
            5vw,
            68px
        );

    font-weight: 700;

    line-height: 1.04;

    letter-spacing: -.045em;
}


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

.ayan-gradient-text {
    display: inline;

    background:
        linear-gradient(
            100deg,
            #ff9d00 5%,
            #ffb51b 42%,
            #19b8a6 95%
        );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
}


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

.ayan-hero-description {
    max-width: 680px;

    margin: 24px 0 0;

    color: #b8bec7;

    font-family: "Inter", sans-serif;

    font-size: 17px;

    font-weight: 400;

    line-height: 1.75;
}


/* =========================================================
   HERO HIGHLIGHTS
   ========================================================= */

.ayan-hero-highlights {

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 20px;

    margin-top: 30px;
}


.ayan-highlight {

    display: flex;

    align-items: center;

    gap: 10px;

    min-width: 0;
}


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

.ayan-highlight-icon {

    display: inline-flex;

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

    width: 35px;
    height: 35px;

    flex: 0 0 35px;

    border: 1px solid
        rgba(255, 157, 0, .35);

    border-radius: 9px;

    background:
        rgba(255, 157, 0, .07);

    color: #ff9d00;

    font-family: "Manrope", sans-serif;

    font-size: 12px;

    font-weight: 700;
}


.ayan-highlight-icon svg {

    width: 18px;
    height: 18px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;

    stroke-linejoin: round;
}


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

.ayan-highlight strong,
.ayan-highlight small {

    display: block;
}


.ayan-highlight strong {

    color: #ffffff;

    font-family: "Inter", sans-serif;

    font-size: 12px;

    font-weight: 600;

    line-height: 1.3;
}


.ayan-highlight small {

    margin-top: 3px;

    color: #858d99;

    font-family: "Inter", sans-serif;

    font-size: 10px;

    line-height: 1.4;
}


/* =========================================================
   HERO ACTIONS
   ========================================================= */

.ayan-hero-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 13px;

    margin-top: 32px;
}


/* =========================================================
   GENERAL BUTTON
   ========================================================= */

.ayan-btn {

    display: inline-flex;

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

    gap: 10px;

    min-height: 48px;

    padding:
        0 22px;

    border-radius: 8px;

    font-family: "Inter", sans-serif;

    font-size: 14px;

    font-weight: 600;

    line-height: 1;

    text-decoration: none !important;

    cursor: pointer;

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


/* =========================================================
   PRIMARY BUTTON
   ========================================================= */

.ayan-btn-primary {

    border:
        1px solid #ff9d00;

    background:
        #ff9d00;

    color:
        #050509 !important;

    box-shadow:
        0 10px 30px
        rgba(255, 157, 0, .16);
}


.ayan-btn-primary:hover {

    transform:
        translateY(-2px);

    border-color:
        #ffb51b;

    background:
        #ffb51b;

    color:
        #050509 !important;

    box-shadow:
        0 14px 35px
        rgba(255, 157, 0, .24);
}


/* =========================================================
   SECONDARY BUTTON
   ========================================================= */

.ayan-btn-secondary {

    border:
        1px solid
        rgba(25, 184, 166, .60);

    background:
        rgba(25, 184, 166, .035);

    color:
        #ffffff !important;
}


.ayan-btn-secondary:hover {

    transform:
        translateY(-2px);

    border-color:
        #19b8a6;

    background:
        rgba(25, 184, 166, .09);

    color:
        #ffffff !important;

    box-shadow:
        0 10px 25px
        rgba(25, 184, 166, .08);
}


/* =========================================================
   HERO NOTE
   ========================================================= */

.ayan-hero-note {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 7px;

    margin-top: 18px;

    color: #7f8792;

    font-family: "Inter", sans-serif;

    font-size: 11px;

    line-height: 1.5;
}


.ayan-check {

    color: #19b8a6;

    font-weight: 700;
}


.ayan-divider {

    width: 1px;

    height: 13px;

    margin:
        0 3px;

    background:
        #2b3038;
}


/* =========================================================
   FORM CARD OUTER STRUCTURE
   ---------------------------------------------------------
   This is only the HERO card.
   Actual Fluent Form styling is kept separately.
   ========================================================= */

.ayan-form-card {

    position: relative;

    z-index: 5;

    width: 100%;

    padding: 28px;

    border:
        1px solid
        rgba(255, 157, 0, .42);

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            rgba(18, 21, 28, .97),
            rgba(8, 10, 15, .97)
        );

    box-shadow:
        0 25px 80px
        rgba(0, 0, 0, .42),

        0 0 45px
        rgba(255, 157, 0, .06);

    backdrop-filter:
        blur(12px);
}


/* =========================================================
   FORM CARD HEADER
   ========================================================= */

.ayan-form-top {

    position: relative;

    z-index: 2;

    margin-bottom: 22px;
}


.ayan-form-badge {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    margin-bottom: 10px;

    color: #ff9d00;

    font-family: "Inter", sans-serif;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: .12em;

    line-height: 1.3;

    text-transform: uppercase;
}


/* =========================================================
   FORM BADGE DOT
   ========================================================= */

.ayan-form-badge::before {

    content: "";

    width: 5px;
    height: 5px;

    flex: 0 0 5px;

    border-radius: 50%;

    background:
        #19b8a6;

    box-shadow:
        0 0 9px
        rgba(25, 184, 166, .8);
}


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

.ayan-form-card h2 {

    margin: 0;

    color: #ffffff;

    font-family: "Manrope", sans-serif;

    font-size: 28px;

    font-weight: 700;

    line-height: 1.2;

    letter-spacing: -.025em;
}


.ayan-form-card h2 span {

    background:
        linear-gradient(
            100deg,
            #19b8a6,
            #27c6b4
        );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color:
        transparent;
}


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

.ayan-form-card p {

    max-width: 560px;

    margin: 10px 0 0;

    color: #8f97a3;

    font-family: "Inter", sans-serif;

    font-size: 13px;

    font-weight: 400;

    line-height: 1.6;
}


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

.ayan-form-security {

    position: relative;

    z-index: 2;

    margin-top: 14px;

    color: #707985;

    font-family: "Inter", sans-serif;

    font-size: 10px;

    line-height: 1.5;

    text-align: center;
}


/* =========================================================
   OLD PLACEHOLDER
   ========================================================= */

.ayan-form-placeholder {

    display: none !important;
}


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

@media (max-width: 1100px) {

    .ayan-hero-inner {

        min-height: auto;

        padding-top: 80px;
        padding-bottom: 80px;
    }


    .ayan-hero-title {

        font-size:
            clamp(
                42px,
                5.2vw,
                56px
            );
    }


    .ayan-hero-description {

        font-size: 15px;
    }


    .ayan-hero-highlights {

        gap: 16px;
    }


    .ayan-highlight strong {

        font-size: 11px;
    }


    .ayan-highlight small {

        font-size: 9px;
    }


    .ayan-form-card {

        padding: 24px;
    }


    .ayan-form-card h2 {

        font-size: 25px;
    }
}


/* =========================================================
   TABLET / SMALL LAPTOP
   ========================================================= */

@media (max-width: 900px) {

    .ayan-hero-inner {

        display: block;

        padding-top: 65px;
        padding-bottom: 55px;
    }


    .ayan-hero-copy {

        max-width: 100%;

        margin-bottom: 40px;
    }


    .ayan-hero-description {

        max-width: 700px;
    }


    .ayan-hero-highlights {

        max-width: 760px;
    }


    .ayan-form-card {

        max-width: 680px;

        margin:
            0 auto;
    }
}


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

@media (max-width: 767px) {

    .ayan-hero {

        background:
            radial-gradient(
                circle at 10% 25%,
                rgba(255, 157, 0, .10),
                transparent 45%
            ),

            radial-gradient(
                circle at 90% 75%,
                rgba(25, 184, 166, .08),
                transparent 45%
            ),

            #050509;
    }


    .ayan-hero-inner {

        display: block;

        min-height: auto;

        padding-top: 55px;

        padding-bottom: 45px;
    }


    .ayan-hero-copy {

        width: 100%;

        max-width: 100%;

        margin-bottom: 35px;
    }


    /* EYEBROW */

    .ayan-hero-eyebrow {

        margin-bottom: 18px;

        padding:
            7px 10px;

        font-size: 9px;

        letter-spacing: .055em;
    }


    .ayan-live-dot {

        width: 6px;
        height: 6px;

        flex-basis: 6px;
    }


    /* TITLE */

    .ayan-hero-title {

        max-width: 100%;

        font-size:
            clamp(
                35px,
                10vw,
                46px
            );

        line-height: 1.07;

        letter-spacing: -.038em;
    }


    /* DESCRIPTION */

    .ayan-hero-description {

        max-width: 100%;

        margin-top: 17px;

        color: #aeb5bf;

        font-size: 14px;

        line-height: 1.7;
    }


    /* HIGHLIGHTS */

    .ayan-hero-highlights {

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

        gap:
            17px 10px;

        margin-top: 25px;
    }


    .ayan-highlight {

        gap: 8px;
    }


    .ayan-highlight-icon {

        width: 32px;
        height: 32px;

        flex-basis: 32px;

        border-radius: 8px;
    }


    .ayan-highlight-icon svg {

        width: 16px;
        height: 16px;
    }


    .ayan-highlight strong {

        font-size: 11px;
    }


    .ayan-highlight small {

        margin-top: 2px;

        font-size: 9px;
    }


    /* ACTIONS */

    .ayan-hero-actions {

        flex-direction: column;

        width: 100%;

        gap: 10px;

        margin-top: 27px;
    }


    .ayan-btn {

        width: 100%;

        min-height: 49px;
    }


    /* NOTE */

    .ayan-hero-note {

        justify-content: flex-start;

        gap: 6px;

        margin-top: 17px;

        font-size: 9px;
    }


    .ayan-divider {

        display: none;
    }


    /* FORM CARD */

    .ayan-form-card {

        width: 100%;

        max-width: 100%;

        margin-top: 0;

        padding: 21px 17px;

        border-radius: 15px;
    }


    .ayan-form-top {

        margin-bottom: 20px;
    }


    .ayan-form-badge {

        margin-bottom: 9px;

        font-size: 9px;

        letter-spacing: .10em;
    }


    .ayan-form-card h2 {

        font-size: 24px;

        line-height: 1.18;
    }


    .ayan-form-card p {

        margin-top: 8px;

        font-size: 12px;

        line-height: 1.6;
    }


    .ayan-form-security {

        margin-top: 12px;

        font-size: 9px;
    }


    /* BACKGROUND NETWORK */

    .ayan-network {

        opacity: .22;
    }


    .ayan-line {

        opacity: .08;
    }


    .ayan-hero-glow {

        width: 300px;
        height: 300px;

        filter: blur(90px);

        opacity: .10;
    }
}


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

@media (max-width: 380px) {

    .ayan-hero-inner {

        padding-top: 45px;

        padding-bottom: 35px;
    }


    .ayan-hero-title {

        font-size: 34px;

        line-height: 1.06;
    }


    .ayan-hero-description {

        font-size: 13px;
    }


    .ayan-hero-highlights {

        gap: 14px 8px;
    }


    .ayan-highlight-icon {

        width: 30px;
        height: 30px;

        flex-basis: 30px;
    }


    .ayan-highlight strong {

        font-size: 10px;
    }


    .ayan-highlight small {

        font-size: 8px;
    }


    .ayan-form-card {

        padding:
            19px 14px;

        border-radius: 14px;
    }


    .ayan-form-card h2 {

        font-size: 22px;
    }


    .ayan-form-card p {

        font-size: 11px;
    }
}


/* =========================================================
   VERY SMALL DEVICES
   ========================================================= */

@media (max-width: 340px) {

    .ayan-hero-title {

        font-size: 31px;
    }


    .ayan-hero-description {

        font-size: 12px;
    }


    .ayan-highlight strong {

        font-size: 9px;
    }


    .ayan-highlight small {

        font-size: 7px;
    }
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .ayan-node,
    .ayan-live-dot {

        animation: none !important;
    }


    .ayan-btn {

        transition: none !important;
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-0f72163 *//* =========================================================
   AYAN DIGITAL MARKETING
   SECTION 2 — COURSE SNAPSHOT / TRUST STRIP
   Complete CSS
   ========================================================= */

/* Main section */
.ayan-course-snapshot {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #0d0f14;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* Subtle brand line at the top */
.ayan-course-snapshot::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 58%;
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 157, 0, 0.65) 35%,
        rgba(25, 184, 166, 0.65) 65%,
        transparent 100%
    );
    pointer-events: none;
}

/* =========================================================
   INNER WRAPPER
   ========================================================= */

.ayan-snapshot-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 26px 0 20px;
}

/* =========================================================
   FOUR MAIN HIGHLIGHTS
   ========================================================= */

.ayan-snapshot-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Individual item */
.ayan-snapshot-item {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 66px;
    padding: 7px 30px;
    border-right: 1px solid rgba(255, 255, 255, 0.07);
    box-sizing: border-box;
}

/* First item */
.ayan-snapshot-item:first-child {
    padding-left: 0;
}

/* Last item */
.ayan-snapshot-item:last-child {
    border-right: 0;
}

/* =========================================================
   ICONS
   ========================================================= */

.ayan-snapshot-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    min-width: 45px;
    flex: 0 0 45px;
    border-radius: 11px;
    font-family: "Manrope", sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    box-sizing: border-box;
}

/* Orange icon */
.ayan-icon-orange {
    border: 1px solid rgba(255, 157, 0, 0.38);
    background: rgba(255, 157, 0, 0.07);
    color: #ff9d00;
}

/* Teal icon */
.ayan-icon-teal {
    border: 1px solid rgba(25, 184, 166, 0.38);
    background: rgba(25, 184, 166, 0.07);
    color: #19b8a6;
}

/* SVG icons */
.ayan-snapshot-icon svg {
    display: block;
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

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

.ayan-snapshot-content {
    min-width: 0;
}

.ayan-snapshot-content strong,
.ayan-snapshot-content span {
    display: block;
    margin: 0;
    padding: 0;
}

.ayan-snapshot-content strong {
    color: #ffffff;
    font-family: "Manrope", sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
}

.ayan-snapshot-content span {
    margin-top: 4px;
    color: #7f8792;
    font-family: "Inter", sans-serif;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.4;
    white-space: nowrap;
}

/* =========================================================
   TOPIC STRIP
   ========================================================= */

.ayan-topic-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    box-sizing: border-box;
}

/* Topic names */
.ayan-topic-strip span {
    display: inline-block;
    margin: 0;
    padding: 0;
    color: #9299a4;
    font-family: "Inter", sans-serif;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition:
        color 0.25s ease,
        transform 0.25s ease;
}

/* Topic hover */
.ayan-topic-strip span:hover {
    color: #ffffff;
    transform: translateY(-1px);
}

/* Small separators */
.ayan-topic-strip i {
    display: block;
    width: 3px;
    height: 3px;
    flex: 0 0 3px;
    border-radius: 50%;
    background: #19b8a6;
    opacity: 0.75;
}

/* =========================================================
   TABLET — 1024px
   ========================================================= */

@media (max-width: 1024px) {

    .ayan-snapshot-inner {
        padding: 28px 24px 22px;
    }

    .ayan-snapshot-grid {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 18px;
    }

    .ayan-snapshot-item {
        padding: 8px 20px;
    }

    .ayan-snapshot-item:first-child {
        padding-left: 0;
    }

    .ayan-snapshot-item:nth-child(2) {
        border-right: 0;
    }

    .ayan-snapshot-item:nth-child(3) {
        padding-left: 0;
    }

    .ayan-snapshot-item:nth-child(4) {
        border-right: 0;
    }

    .ayan-topic-strip {
        margin-top: 20px;
        padding-top: 17px;
    }
}

/* =========================================================
   SMALL TABLET — 900px
   ========================================================= */

@media (max-width: 900px) {

    .ayan-snapshot-item {
        gap: 11px;
        padding-right: 15px;
    }

    .ayan-snapshot-content strong {
        font-size: 13px;
    }

    .ayan-snapshot-content span {
        font-size: 10px;
    }
}

/* =========================================================
   MOBILE — 767px
   ========================================================= */

@media (max-width: 767px) {

    .ayan-course-snapshot::before {
        width: 75%;
    }

    .ayan-snapshot-inner {
        padding: 25px 16px 20px;
    }

    /* 2 x 2 mobile grid */
    .ayan-snapshot-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 8px;
        row-gap: 14px;
    }

    .ayan-snapshot-item,
    .ayan-snapshot-item:first-child,
    .ayan-snapshot-item:nth-child(3) {
        min-height: 54px;
        padding: 6px 7px;
        border-right: 0;
    }

    .ayan-snapshot-item:nth-child(2),
    .ayan-snapshot-item:nth-child(4) {
        border-right: 0;
    }

    /* Mobile icon */
    .ayan-snapshot-icon {
        width: 38px;
        height: 38px;
        min-width: 38px;
        flex-basis: 38px;
        border-radius: 9px;
        font-size: 11px;
    }

    .ayan-snapshot-icon svg {
        width: 17px;
        height: 17px;
    }

    /* Mobile text */
    .ayan-snapshot-content strong {
        font-size: 11px;
        line-height: 1.3;
        white-space: normal;
    }

    .ayan-snapshot-content span {
        margin-top: 3px;
        font-size: 9px;
        line-height: 1.35;
        white-space: normal;
    }

    /* Topic strip */
    .ayan-topic-strip {
        gap: 6px;
        margin-top: 18px;
        padding-top: 16px;
    }

    .ayan-topic-strip span {
        font-size: 8px;
        letter-spacing: 0.025em;
    }

    .ayan-topic-strip i {
        width: 2px;
        height: 2px;
        flex-basis: 2px;
    }
}

/* =========================================================
   SMALL MOBILE — 480px
   ========================================================= */

@media (max-width: 480px) {

    .ayan-snapshot-inner {
        padding: 23px 13px 19px;
    }

    .ayan-snapshot-grid {
        column-gap: 4px;
        row-gap: 12px;
    }

    .ayan-snapshot-item,
    .ayan-snapshot-item:first-child,
    .ayan-snapshot-item:nth-child(3) {
        padding: 5px 4px;
    }

    .ayan-snapshot-icon {
        width: 34px;
        height: 34px;
        min-width: 34px;
        flex-basis: 34px;
        border-radius: 8px;
    }

    .ayan-snapshot-icon svg {
        width: 15px;
        height: 15px;
    }

    .ayan-snapshot-content strong {
        font-size: 10px;
    }

    .ayan-snapshot-content span {
        font-size: 8px;
    }

    .ayan-topic-strip {
        gap: 5px;
    }

    .ayan-topic-strip span {
        font-size: 7px;
    }
}

/* =========================================================
   ACCESSIBILITY — REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .ayan-topic-strip span {
        transition: none;
    }

}

/* =========================================================
   ELEMENTOR SAFETY
   Prevent Elementor default margins from changing layout
   ========================================================= */

.ayan-course-snapshot .ayan-snapshot-inner,
.ayan-course-snapshot .ayan-snapshot-grid,
.ayan-course-snapshot .ayan-snapshot-item,
.ayan-course-snapshot .ayan-snapshot-content,
.ayan-course-snapshot .ayan-topic-strip {
    box-sizing: border-box;
}

.ayan-course-snapshot .ayan-snapshot-content strong,
.ayan-course-snapshot .ayan-snapshot-content span,
.ayan-course-snapshot .ayan-topic-strip span {
    margin-block-start: 0;
    margin-block-end: 0;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-6707ea8 *//* =========================================================
   AYAN DIGITAL MARKETING
   SECTION 3 — STRUCTURED LEARNING PATH
   COMPLETE REPLACEMENT CSS
   ========================================================= */


/* =========================================================
   MAIN SECTION
   ========================================================= */

.ayan-learning-path {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #050509;
}

.ayan-path-section {
    position: relative;
    width: 100%;
    padding: 100px 0 70px;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 8% 45%,
            rgba(255, 157, 0, 0.07),
            transparent 30%
        ),
        radial-gradient(
            circle at 92% 50%,
            rgba(25, 184, 166, 0.07),
            transparent 30%
        ),
        #050509;
}


/* =========================================================
   DECORATIVE BACKGROUND
   ========================================================= */

.ayan-path-orb {
    position: absolute;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    filter: blur(120px);
    pointer-events: none;
    opacity: 0.10;
}

.ayan-path-orb-orange {
    top: 25%;
    left: -250px;
    background: #ff9d00;
}

.ayan-path-orb-teal {
    right: -250px;
    bottom: 10%;
    background: #19b8a6;
}


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

.ayan-path-container {
    position: relative;
    z-index: 2;

    width: calc(100% - 40px);
    max-width: 1240px;

    margin: 0 auto;
}


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

.ayan-path-heading {
    max-width: 760px;
    margin: 0 auto 60px;
    text-align: center;
}


/* Eyebrow */

.ayan-section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    margin-bottom: 20px;
    padding: 8px 13px;

    border: 1px solid rgba(25, 184, 166, 0.32);
    border-radius: 999px;

    background: rgba(25, 184, 166, 0.05);

    color: #bdf8f0;

    font-family: "Inter", sans-serif;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.10em;
}


/* Eyebrow dot */

.ayan-eyebrow-dot {
    width: 6px;
    height: 6px;

    flex: 0 0 6px;

    border-radius: 50%;

    background: #19b8a6;

    box-shadow:
        0 0 12px rgba(25, 184, 166, 0.8);
}


/* H2 */

.ayan-path-heading h2 {
    margin: 0;

    color: #ffffff;

    font-family: "Manrope", sans-serif;
    font-size: clamp(40px, 5vw, 60px);
    font-weight: 700;

    line-height: 1.08;
    letter-spacing: -0.045em;
}


/* Gradient part of heading */

.ayan-path-heading h2 span {
    display: inline;

    background:
        linear-gradient(
            100deg,
            #ff9d00 0%,
            #ffb51b 45%,
            #19b8a6 100%
        );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
}


/* Heading description */

.ayan-path-heading p {
    max-width: 680px;

    margin: 22px auto 0;

    color: #9299a4;

    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-weight: 400;

    line-height: 1.75;
}


/* =========================================================
   MAIN TWO-COLUMN LAYOUT
   ========================================================= */

.ayan-path-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    gap: 32px;

    align-items: stretch;
}


/* =========================================================
   LEFT SIDE — PROBLEM CARDS
   ========================================================= */

.ayan-problems {
    display: flex;
    flex-direction: column;
    gap: 14px;
}


/* Problem card */

.ayan-problem-card {
    position: relative;

    display: flex;
    align-items: flex-start;

    gap: 18px;

    min-height: 150px;

    padding: 24px;

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;

    background:
        rgba(13, 15, 20, 0.72);

    box-sizing: border-box;

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


/* Orange side accent */

.ayan-problem-card::before {
    content: "";

    position: absolute;

    top: 18px;
    bottom: 18px;
    left: 0;

    width: 2px;

    border-radius: 2px;

    background:
        linear-gradient(
            180deg,
            #ff9d00,
            rgba(255, 157, 0, 0.05)
        );

    opacity: 0.45;
}


/* Hover */

.ayan-problem-card:hover,
.ayan-problem-card.is-active {
    transform: translateX(5px);

    border-color:
        rgba(255, 157, 0, 0.35);

    background:
        rgba(255, 157, 0, 0.045);

    box-shadow:
        0 15px 45px rgba(0, 0, 0, 0.20);
}


/* =========================================================
   PROBLEM NUMBER
   ========================================================= */

.ayan-problem-number {
    display: flex;

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

    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    border: 1px solid rgba(255, 157, 0, 0.35);
    border-radius: 10px;

    background:
        rgba(255, 157, 0, 0.06);

    color: #ff9d00;

    font-family: "Manrope", sans-serif;
    font-size: 12px;
    font-weight: 700;

    box-sizing: border-box;
}


/* =========================================================
   PROBLEM CONTENT
   ========================================================= */

.ayan-problem-content {
    min-width: 0;
    padding-right: 20px;
}


/* Label */

.ayan-problem-label {
    display: block;

    margin: 0 0 7px;

    color: #68717d;

    font-family: "Inter", sans-serif;
    font-size: 9px;
    font-weight: 700;

    line-height: 1;

    letter-spacing: 0.11em;
}


/* H3 */

.ayan-problem-card h3 {
    margin: 0;

    color: #ffffff;

    font-family: "Manrope", sans-serif;
    font-size: 20px;
    font-weight: 700;

    line-height: 1.25;
}


/* Description */

.ayan-problem-card p {
    margin: 9px 0 0;

    color: #858d98;

    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight: 400;

    line-height: 1.65;
}


/* Arrow */

.ayan-problem-arrow {
    position: absolute;

    top: 25px;
    right: 23px;

    color: #525a65;

    font-family: "Inter", sans-serif;
    font-size: 17px;

    transition:
        color 0.25s ease,
        transform 0.25s ease;
}


.ayan-problem-card:hover .ayan-problem-arrow,
.ayan-problem-card.is-active .ayan-problem-arrow {
    color: #ff9d00;

    transform:
        translateX(3px);
}


/* =========================================================
   RIGHT SIDE — SOLUTION CARD
   ========================================================= */

.ayan-path-solution {
    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 100%;

    padding: 35px;

    overflow: hidden;

    border: 1px solid rgba(25, 184, 166, 0.26);
    border-radius: 18px;

    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(25, 184, 166, 0.10),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            rgba(16, 21, 24, 0.96),
            rgba(9, 11, 15, 0.98)
        );

    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.025);

    box-sizing: border-box;
}


/* Solution glow */

.ayan-solution-glow {
    position: absolute;

    top: -130px;
    right: -130px;

    width: 280px;
    height: 280px;

    border-radius: 50%;

    background: #19b8a6;

    filter: blur(120px);

    opacity: 0.08;

    pointer-events: none;
}


/* =========================================================
   SOLUTION HEADER
   ========================================================= */

.ayan-solution-top {
    position: relative;
    z-index: 2;
}


/* Badge */

.ayan-solution-badge {
    display: inline-block;

    margin-bottom: 13px;

    color: #19b8a6;

    font-family: "Inter", sans-serif;
    font-size: 9px;
    font-weight: 700;

    line-height: 1;

    letter-spacing: 0.12em;
}


/* Solution H3 */

.ayan-solution-top h3 {
    max-width: 440px;

    margin: 0;

    color: #ffffff;

    font-family: "Manrope", sans-serif;
    font-size: 34px;
    font-weight: 700;

    line-height: 1.13;
    letter-spacing: -0.025em;
}


/* Teal heading text */

.ayan-solution-top h3 span {
    color: #19b8a6;
}


/* Description */

.ayan-solution-top p {
    max-width: 450px;

    margin: 13px 0 0;

    color: #858e99;

    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight: 400;

    line-height: 1.7;
}


/* =========================================================
   LEARNING FLOW
   ========================================================= */

.ayan-learning-flow {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;

    margin-top: 28px;
}


/* Individual flow item */

.ayan-flow-item {
    display: flex;

    align-items: center;

    gap: 13px;

    width: fit-content;

    transition:
        transform 0.25s ease,
        opacity 0.25s ease;
}


/* Flow number */

.ayan-flow-number {
    display: flex;

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

    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    border: 1px solid rgba(25, 184, 166, 0.28);
    border-radius: 9px;

    background:
        rgba(25, 184, 166, 0.05);

    color: #19b8a6;

    font-family: "Manrope", sans-serif;
    font-size: 9px;
    font-weight: 700;
}


/* Flow text */

.ayan-flow-item strong,
.ayan-flow-item small {
    display: block;
}


.ayan-flow-item strong {
    color: #ffffff;

    font-family: "Manrope", sans-serif;
    font-size: 12px;
    font-weight: 700;

    line-height: 1.2;
}


.ayan-flow-item small {
    margin-top: 3px;

    color: #707984;

    font-family: "Inter", sans-serif;
    font-size: 9px;
    font-weight: 400;

    line-height: 1.3;
}


/* Flow hover state */

.ayan-flow-item.is-highlighted {
    transform:
        translateX(5px);
}


.ayan-flow-item.is-highlighted .ayan-flow-number {
    border-color:
        rgba(255, 157, 0, 0.55);

    background:
        rgba(255, 157, 0, 0.08);

    color: #ff9d00;
}


/* Connecting line */

.ayan-flow-line {
    width: 1px;
    height: 18px;

    margin-left: 17px;

    background:
        linear-gradient(
            180deg,
            rgba(25, 184, 166, 0.40),
            rgba(25, 184, 166, 0.04)
        );
}


/* =========================================================
   SOLUTION CTA
   ========================================================= */

.ayan-path-cta {
    position: relative;
    z-index: 2;

    display: inline-flex;

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

    gap: 11px;

    width: fit-content;

    min-height: 45px;

    margin-top: 29px;

    padding: 0 19px;

    border: 1px solid #19b8a6;
    border-radius: 8px;

    background:
        rgba(25, 184, 166, 0.08);

    color: #ffffff !important;

    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight: 600;

    line-height: 1;

    text-decoration: none !important;

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


.ayan-path-cta span {
    color: #19b8a6;

    font-size: 15px;

    transition:
        color 0.25s ease;
}


.ayan-path-cta:hover {
    transform:
        translateY(-2px);

    background:
        #19b8a6;

    color: #050509 !important;

    box-shadow:
        0 10px 30px rgba(25, 184, 166, 0.18);
}


.ayan-path-cta:hover span {
    color: #050509;
}


/* =========================================================
   BOTTOM CONNECTION
   ========================================================= */

.ayan-path-bottom {
    display: flex;

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

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 52px;

    padding-top: 20px;

    border-top:
        1px solid rgba(255, 255, 255, 0.06);

    text-align: center;
}


.ayan-path-bottom span,
.ayan-path-bottom strong {
    font-family: "Inter", sans-serif;

    font-size: 9px;

    line-height: 1.4;

    letter-spacing: 0.08em;
}


.ayan-path-bottom span {
    color: #626b77;
}


.ayan-path-bottom strong {
    color: #a7afb9;

    font-weight: 700;
}


.ayan-path-bottom i {
    width: 3px;
    height: 3px;

    flex: 0 0 3px;

    border-radius: 50%;

    background: #ff9d00;
}


/* =========================================================
   TABLET — 1024px
   ========================================================= */

@media (max-width: 1024px) {

    .ayan-path-section {
        padding: 80px 0 60px;
    }

    .ayan-path-container {
        width: calc(100% - 40px);
    }

    .ayan-path-heading {
        margin-bottom: 45px;
    }

    .ayan-path-layout {
        gap: 20px;
    }

    .ayan-problem-card {
        min-height: 145px;

        padding: 21px;
    }

    .ayan-path-solution {
        padding: 27px;
    }

    .ayan-solution-top h3 {
        font-size: 29px;
    }

}


/* =========================================================
   MOBILE — 767px
   ========================================================= */

@media (max-width: 767px) {

    .ayan-path-section {
        padding: 70px 0 48px;
    }

    .ayan-path-container {
        width: calc(100% - 32px);
    }


    /* Heading */

    .ayan-path-heading {
        margin-bottom: 35px;
    }

    .ayan-section-eyebrow {
        margin-bottom: 17px;

        padding: 7px 10px;

        font-size: 8px;
    }

    .ayan-path-heading h2 {
        font-size: 38px;

        line-height: 1.08;

        letter-spacing: -0.035em;
    }

    .ayan-path-heading p {
        max-width: 600px;

        margin-top: 17px;

        color: #9299a4;

        font-size: 14px;

        line-height: 1.75;
    }


    /* Main layout */

    .ayan-path-layout {
        grid-template-columns: 1fr;

        gap: 18px;
    }


    /* Problem cards */

    .ayan-problems {
        gap: 11px;
    }

    .ayan-problem-card {
        min-height: auto;

        padding: 20px 18px;
    }

    .ayan-problem-card:hover,
    .ayan-problem-card.is-active {
        transform: none;
    }


    /* Problem number */

    .ayan-problem-number {
        width: 38px;
        height: 38px;

        flex: 0 0 38px;
    }


    /* Problem label */

    .ayan-problem-label {
        margin-bottom: 7px;

        font-size: 9px;
    }


    /* Problem heading */

    .ayan-problem-card h3 {
        font-size: 18px;

        line-height: 1.25;
    }


    /* Problem description */

    .ayan-problem-card p {
        margin-top: 9px;

        font-size: 11.5px;

        line-height: 1.65;
    }


    /* Problem arrow */

    .ayan-problem-arrow {
        top: 21px;
        right: 18px;

        font-size: 15px;
    }


    /* Solution card */

    .ayan-path-solution {
        min-height: auto;

        padding: 25px 20px;

        border-radius: 15px;
    }


    /* Solution heading */

    .ayan-solution-badge {
        margin-bottom: 12px;

        font-size: 8px;
    }

    .ayan-solution-top h3 {
        font-size: 28px;

        line-height: 1.12;

        letter-spacing: -0.025em;
    }


    /* Solution description */

    .ayan-solution-top p {
        max-width: 100%;

        margin-top: 13px;

        font-size: 12px;

        line-height: 1.7;
    }


    /* Learning flow */

    .ayan-learning-flow {
        margin-top: 24px;
    }

    .ayan-flow-item {
        gap: 12px;
    }

    .ayan-flow-number {
        width: 34px;
        height: 34px;

        flex: 0 0 34px;
    }

    .ayan-flow-item strong {
        font-size: 12px;

        line-height: 1.25;
    }

    .ayan-flow-item small {
        margin-top: 3px;

        font-size: 9.5px;

        line-height: 1.4;
    }


    /* Flow line */

    .ayan-flow-line {
        height: 17px;

        margin-left: 17px;
    }


    /* CTA */

    .ayan-path-cta {
        width: 100%;

        min-height: 46px;

        margin-top: 26px;

        padding: 0 18px;

        font-size: 12px;

        box-sizing: border-box;
    }


    /* Bottom line */

    .ayan-path-bottom {
        margin-top: 36px;

        gap: 7px;

        padding-top: 17px;
    }

    .ayan-path-bottom span,
    .ayan-path-bottom strong {
        font-size: 7px;

        line-height: 1.5;
    }

}


/* =========================================================
   SMALL MOBILE — 480px
   ========================================================= */

@media (max-width: 480px) {

    .ayan-path-section {
        padding: 60px 0 42px;
    }

    .ayan-path-container {
        width: calc(100% - 26px);
    }


    /* Heading */

    .ayan-path-heading h2 {
        font-size: 33px;

        line-height: 1.09;
    }

    .ayan-path-heading p {
        font-size: 13px;

        line-height: 1.75;
    }


    /* Problem cards */

    .ayan-problem-card {
        gap: 12px;

        padding: 18px 15px;
    }


    /* Problem number */

    .ayan-problem-number {
        width: 34px;
        height: 34px;

        flex: 0 0 34px;

        font-size: 10px;
    }


    /* Problem content */

    .ayan-problem-content {
        padding-right: 16px;
    }

    .ayan-problem-card h3 {
        font-size: 16px;
    }

    .ayan-problem-card p {
        font-size: 10.5px;

        line-height: 1.65;
    }


    /* Arrow */

    .ayan-problem-arrow {
        top: 20px;
        right: 16px;

        font-size: 14px;
    }


    /* Solution */

    .ayan-path-solution {
        padding: 23px 16px;
    }

    .ayan-solution-top h3 {
        font-size: 26px;
    }

    .ayan-solution-top p {
        font-size: 11px;
    }


    /* Flow */

    .ayan-flow-item {
        gap: 10px;
    }

    .ayan-flow-number {
        width: 32px;
        height: 32px;

        flex: 0 0 32px;
    }

    .ayan-flow-item strong {
        font-size: 11px;
    }

    .ayan-flow-item small {
        font-size: 9px;
    }

    .ayan-flow-line {
        margin-left: 16px;
    }


    /* CTA */

    .ayan-path-cta {
        min-height: 44px;

        font-size: 11px;
    }


    /* Bottom */

    .ayan-path-bottom {
        gap: 5px;
    }

    .ayan-path-bottom span,
    .ayan-path-bottom strong {
        font-size: 6.5px;
    }

}


/* =========================================================
   VERY SMALL MOBILE — 360px
   ========================================================= */

@media (max-width: 360px) {

    .ayan-path-container {
        width: calc(100% - 22px);
    }

    .ayan-path-heading h2 {
        font-size: 30px;
    }

    .ayan-section-eyebrow {
        font-size: 7px;
    }

    .ayan-problem-card {
        padding: 16px 13px;
    }

    .ayan-problem-card h3 {
        font-size: 15px;
    }

    .ayan-problem-card p {
        font-size: 10px;
    }

    .ayan-path-solution {
        padding: 21px 14px;
    }

    .ayan-solution-top h3 {
        font-size: 24px;
    }

}


/* =========================================================
   ACCESSIBILITY — REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .ayan-problem-card,
    .ayan-problem-arrow,
    .ayan-flow-item,
    .ayan-path-cta {
        transition: none;
    }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-acdef72 *//* =========================================================
   AYAN DIGITAL MARKETING
   SECTION 4 — WHO IS THIS COURSE FOR?
   COMPLETE CSS
   ========================================================= */


/* =========================================================
   MAIN SECTION
   ========================================================= */

.ayan-audience-section,
.ayan-audience {
    position: relative;
    width: 100%;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 8% 35%,
            rgba(255, 157, 0, 0.055),
            transparent 30%
        ),
        radial-gradient(
            circle at 92% 65%,
            rgba(25, 184, 166, 0.065),
            transparent 32%
        ),
        #090a0f;
}


/* =========================================================
   SECTION WRAPPER
   ========================================================= */

.ayan-audience {
    padding: 105px 0 75px;
}


.ayan-audience-container {
    position: relative;
    z-index: 2;

    width: calc(100% - 40px);
    max-width: 1240px;

    margin: 0 auto;
}


/* =========================================================
   BACKGROUND GLOW
   ========================================================= */

.ayan-audience-glow {
    position: absolute;

    width: 360px;
    height: 360px;

    border-radius: 50%;

    filter: blur(120px);

    pointer-events: none;

    opacity: 0.08;
}


.ayan-audience-glow-orange {
    top: 15%;
    left: -240px;

    background: #ff9d00;
}


.ayan-audience-glow-teal {
    right: -240px;
    bottom: 5%;

    background: #19b8a6;
}


/* =========================================================
   HEADER
   ========================================================= */

.ayan-audience-header {
    max-width: 760px;

    margin: 0 auto 58px;

    text-align: center;
}


.ayan-audience-eyebrow {
    display: inline-flex;

    align-items: center;
    gap: 8px;

    margin-bottom: 20px;
    padding: 8px 13px;

    border:
        1px solid rgba(255, 157, 0, 0.30);

    border-radius: 999px;

    background:
        rgba(255, 157, 0, 0.045);

    color: #ffd58a;

    font-family: "Inter", sans-serif;

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

    line-height: 1;

    letter-spacing: 0.10em;
}


.ayan-audience-eyebrow span {
    width: 6px;
    height: 6px;

    flex: 0 0 6px;

    border-radius: 50%;

    background: #ff9d00;

    box-shadow:
        0 0 12px rgba(255, 157, 0, 0.75);
}


.ayan-audience-header h2 {
    margin: 0;

    color: #ffffff;

    font-family: "Manrope", sans-serif;

    font-size: clamp(40px, 5vw, 58px);

    font-weight: 700;

    line-height: 1.08;

    letter-spacing: -0.045em;
}


.ayan-audience-header h2 span {
    background:
        linear-gradient(
            100deg,
            #ff9d00,
            #ffb51b 45%,
            #19b8a6
        );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
}


.ayan-audience-header p {
    max-width: 680px;

    margin: 20px auto 0;

    color: #9299a4;

    font-family: "Inter", sans-serif;

    font-size: 15px;

    line-height: 1.75;
}


/* =========================================================
   MAIN LAYOUT
   ========================================================= */

.ayan-audience-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(0, 1.1fr);

    gap: 24px;

    align-items: stretch;
}


/* =========================================================
   AUDIENCE OPTIONS
   ========================================================= */

.ayan-audience-options {
    display: flex;

    flex-direction: column;

    gap: 10px;
}


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

.ayan-audience-card {
    position: relative;

    display: flex;

    align-items: center;

    width: 100%;

    min-height: 91px;

    padding: 16px 18px;

    gap: 14px;

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

    border-radius: 13px;

    background:
        rgba(13, 15, 20, 0.72);

    color: #ffffff;

    font-family: inherit;

    text-align: left;

    cursor: pointer;

    box-sizing: border-box;

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


.ayan-audience-card:hover,
.ayan-audience-card.active {
    transform: translateX(4px);

    border-color:
        rgba(25, 184, 166, 0.36);

    background:
        linear-gradient(
            100deg,
            rgba(25, 184, 166, 0.07),
            rgba(255, 157, 0, 0.025)
        );

    box-shadow:
        0 14px 38px rgba(0, 0, 0, 0.18);
}


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

.ayan-audience-icon {
    display: flex;

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

    width: 44px;
    height: 44px;

    flex: 0 0 44px;

    border:
        1px solid rgba(255, 157, 0, 0.30);

    border-radius: 11px;

    background:
        rgba(255, 157, 0, 0.055);

    font-size: 18px;

    filter: grayscale(0.15);
}


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

.ayan-audience-card-content {
    display: flex;

    flex-direction: column;

    min-width: 0;
}


.ayan-audience-card-content small {
    margin-bottom: 5px;

    color: #65707c;

    font-family: "Inter", sans-serif;

    font-size: 8px;

    font-weight: 700;

    line-height: 1;

    letter-spacing: 0.11em;
}


.ayan-audience-card-content strong {
    color: #ffffff;

    font-family: "Manrope", sans-serif;

    font-size: 16px;

    font-weight: 700;

    line-height: 1.2;
}


.ayan-audience-card-content em {
    margin-top: 4px;

    color: #747e8a;

    font-family: "Inter", sans-serif;

    font-size: 10px;

    font-style: normal;

    line-height: 1.3;
}


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

.ayan-audience-arrow {
    position: absolute;

    right: 19px;

    color: #58616c;

    font-size: 16px;

    transition:
        color 0.25s ease,
        transform 0.25s ease;
}


.ayan-audience-card:hover .ayan-audience-arrow,
.ayan-audience-card.active .ayan-audience-arrow {
    color: #19b8a6;

    transform:
        translateX(3px);
}


/* =========================================================
   RIGHT INFORMATION PANEL
   ========================================================= */

.ayan-audience-panel {
    position: relative;

    display: flex;

    flex-direction: column;

    min-height: 100%;

    padding: 40px;

    overflow: hidden;

    border:
        1px solid rgba(25, 184, 166, 0.25);

    border-radius: 18px;

    background:
        radial-gradient(
            circle at 90% 0%,
            rgba(25, 184, 166, 0.10),
            transparent 35%
        ),
        radial-gradient(
            circle at 0% 100%,
            rgba(255, 157, 0, 0.06),
            transparent 35%
        ),
        #0c1014;

    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.22);
}


/* Top subtle line */

.ayan-audience-panel::before {
    content: "";

    position: absolute;

    top: 0;
    left: 40px;
    right: 40px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(25, 184, 166, 0.55),
            transparent
        );

    opacity: 0.6;
}


/* =========================================================
   CONTENT PANEL
   ========================================================= */

.ayan-audience-content {
    display: none;

    animation:
        ayanAudienceFade 0.35s ease both;
}


.ayan-audience-content.active {
    display: block;
}


@keyframes ayanAudienceFade {

    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* =========================================================
   CONTENT LABEL
   ========================================================= */

.ayan-content-label {
    display: inline-block;

    margin-bottom: 15px;

    color: #19b8a6;

    font-family: "Inter", sans-serif;

    font-size: 9px;

    font-weight: 700;

    line-height: 1;

    letter-spacing: 0.13em;
}


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

.ayan-audience-content h3 {
    max-width: 560px;

    margin: 0;

    color: #ffffff;

    font-family: "Manrope", sans-serif;

    font-size: 34px;

    font-weight: 700;

    line-height: 1.16;

    letter-spacing: -0.03em;
}


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

.ayan-audience-content > p {
    max-width: 550px;

    margin: 16px 0 0;

    color: #8b949f;

    font-family: "Inter", sans-serif;

    font-size: 13px;

    line-height: 1.75;
}


/* =========================================================
   CONTENT POINTS
   ========================================================= */

.ayan-content-points {
    display: flex;

    flex-direction: column;

    gap: 11px;

    margin-top: 27px;
}


.ayan-content-points span {
    display: flex;

    align-items: center;

    gap: 11px;

    color: #aab2bc;

    font-family: "Inter", sans-serif;

    font-size: 11px;

    line-height: 1.5;
}


.ayan-content-points b {
    display: flex;

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

    width: 27px;
    height: 27px;

    flex: 0 0 27px;

    border:
        1px solid rgba(255, 157, 0, 0.32);

    border-radius: 7px;

    background:
        rgba(255, 157, 0, 0.055);

    color: #ff9d00;

    font-family: "Manrope", sans-serif;

    font-size: 8px;

    font-weight: 700;
}


/* =========================================================
   PANEL CTA
   ========================================================= */

.ayan-audience-cta {
    display: inline-flex;

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

    gap: 10px;

    width: fit-content;

    min-height: 45px;

    margin-top: auto;
    padding: 0 19px;

    border:
        1px solid #ff9d00;

    border-radius: 8px;

    background:
        rgba(255, 157, 0, 0.08);

    color: #ffffff !important;

    font-family: "Inter", sans-serif;

    font-size: 11px;

    font-weight: 600;

    text-decoration: none !important;

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


.ayan-audience-cta span {
    color: #ff9d00;

    font-size: 15px;
}


.ayan-audience-cta:hover {
    transform:
        translateY(-2px);

    background:
        #ff9d00;

    color: #050509 !important;

    box-shadow:
        0 10px 30px rgba(255, 157, 0, 0.16);
}


.ayan-audience-cta:hover span {
    color: #050509;
}


/* =========================================================
   BOTTOM STATEMENT
   ========================================================= */

.ayan-audience-bottom {
    display: flex;

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

    gap: 18px;

    margin-top: 48px;
}


.ayan-bottom-line {
    width: 80px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,0.12)
        );
}


.ayan-bottom-line:last-child {
    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,0.12),
            transparent
        );
}


.ayan-audience-bottom p {
    margin: 0;

    color: #68717d;

    font-family: "Inter", sans-serif;

    font-size: 9px;

    line-height: 1.5;

    letter-spacing: 0.08em;

    text-align: center;
}


.ayan-audience-bottom strong {
    color: #aeb6c0;

    font-weight: 700;
}


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

@media (max-width: 1024px) {

    .ayan-audience {
        padding: 85px 0 65px;
    }

    .ayan-audience-container {
        width: calc(100% - 40px);
    }

    .ayan-audience-layout {
        gap: 18px;
    }

    .ayan-audience-panel {
        padding: 30px;
    }

    .ayan-audience-content h3 {
        font-size: 29px;
    }

    .ayan-audience-card {
        min-height: 84px;
    }

    .ayan-audience-icon {
        width: 40px;
        height: 40px;

        flex-basis: 40px;
    }

}


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

@media (max-width: 767px) {

    .ayan-audience {
        padding: 70px 0 50px;
    }

    .ayan-audience-container {
        width: calc(100% - 32px);
    }


    /* Header */

    .ayan-audience-header {
        margin-bottom: 35px;
    }

    .ayan-audience-eyebrow {
        margin-bottom: 17px;

        padding: 7px 10px;

        font-size: 8px;
    }

    .ayan-audience-header h2 {
        font-size: 38px;

        line-height: 1.08;
    }

    .ayan-audience-header p {
        margin-top: 17px;

        font-size: 14px;

        line-height: 1.75;
    }


    /* Main layout */

    .ayan-audience-layout {
        grid-template-columns: 1fr;

        gap: 14px;
    }


    /* Audience cards */

    .ayan-audience-options {
        gap: 8px;
    }

    .ayan-audience-card {
        min-height: 78px;

        padding: 14px 15px;

        gap: 12px;
    }


    .ayan-audience-card:hover,
    .ayan-audience-card.active {
        transform: none;
    }


    /* Icon */

    .ayan-audience-icon {
        width: 39px;
        height: 39px;

        flex: 0 0 39px;

        font-size: 16px;
    }


    /* Card text */

    .ayan-audience-card-content small {
        font-size: 7px;
    }

    .ayan-audience-card-content strong {
        font-size: 15px;
    }

    .ayan-audience-card-content em {
        font-size: 9px;
    }


    /* Arrow */

    .ayan-audience-arrow {
        right: 15px;

        font-size: 14px;
    }


    /* Panel */

    .ayan-audience-panel {
        min-height: auto;

        padding: 27px 21px;

        border-radius: 15px;
    }


    .ayan-audience-panel::before {
        left: 21px;
        right: 21px;
    }


    /* Content */

    .ayan-content-label {
        margin-bottom: 12px;

        font-size: 8px;
    }

    .ayan-audience-content h3 {
        font-size: 27px;

        line-height: 1.14;
    }

    .ayan-audience-content > p {
        margin-top: 13px;

        font-size: 12px;

        line-height: 1.7;
    }


    /* Points */

    .ayan-content-points {
        gap: 9px;

        margin-top: 22px;
    }

    .ayan-content-points span {
        gap: 9px;

        font-size: 10.5px;
    }

    .ayan-content-points b {
        width: 25px;
        height: 25px;

        flex-basis: 25px;
    }


    /* CTA */

    .ayan-audience-cta {
        width: 100%;

        min-height: 45px;

        margin-top: 27px;

        box-sizing: border-box;
    }


    /* Bottom */

    .ayan-audience-bottom {
        gap: 10px;

        margin-top: 35px;
    }

    .ayan-bottom-line {
        width: 30px;
    }

    .ayan-audience-bottom p {
        max-width: 260px;

        font-size: 7px;

        line-height: 1.6;
    }

}


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

@media (max-width: 480px) {

    .ayan-audience {
        padding: 60px 0 42px;
    }

    .ayan-audience-container {
        width: calc(100% - 26px);
    }


    /* Header */

    .ayan-audience-header h2 {
        font-size: 33px;
    }

    .ayan-audience-header p {
        font-size: 13px;
    }


    /* Cards */

    .ayan-audience-card {
        min-height: 73px;

        padding: 12px 13px;
    }

    .ayan-audience-icon {
        width: 36px;
        height: 36px;

        flex-basis: 36px;

        font-size: 15px;
    }

    .ayan-audience-card-content strong {
        font-size: 14px;
    }

    .ayan-audience-card-content em {
        font-size: 8.5px;
    }


    /* Panel */

    .ayan-audience-panel {
        padding: 23px 16px;
    }

    .ayan-audience-content h3 {
        font-size: 25px;
    }

    .ayan-audience-content > p {
        font-size: 11px;
    }


    /* Points */

    .ayan-content-points span {
        font-size: 10px;
    }

    .ayan-content-points b {
        width: 24px;
        height: 24px;

        flex-basis: 24px;
    }


    /* CTA */

    .ayan-audience-cta {
        min-height: 44px;

        font-size: 10px;
    }


    /* Bottom */

    .ayan-audience-bottom {
        gap: 6px;
    }

    .ayan-bottom-line {
        width: 20px;
    }

    .ayan-audience-bottom p {
        font-size: 6.5px;
    }

}


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

@media (max-width: 360px) {

    .ayan-audience-container {
        width: calc(100% - 22px);
    }

    .ayan-audience-header h2 {
        font-size: 30px;
    }

    .ayan-audience-card-content strong {
        font-size: 13px;
    }

    .ayan-audience-card-content em {
        font-size: 8px;
    }

    .ayan-audience-panel {
        padding: 21px 14px;
    }

    .ayan-audience-content h3 {
        font-size: 23px;
    }

}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

.ayan-audience-card:focus-visible,
.ayan-audience-cta:focus-visible {
    outline: 2px solid #19b8a6;

    outline-offset: 3px;
}


@media (prefers-reduced-motion: reduce) {

    .ayan-audience-card,
    .ayan-audience-arrow,
    .ayan-audience-content,
    .ayan-audience-cta {
        transition: none;
        animation: none;
    }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-0892a5d *//* =========================================================
   AYAN DIGITAL MARKETING
   CURRICULUM CTA SECTION
   Complete CSS — Desktop / Tablet / Mobile
   ========================================================= */

.ayan-curriculum-cta {
  --ayan-bg: #0d1015;
  --ayan-surface: #11151b;
  --ayan-border: #252b34;

  --ayan-orange: #ff9d00;
  --ayan-orange-hover: #ffad1f;

  --ayan-teal: #16b8aa;
  --ayan-white: #f7f8fa;
  --ayan-muted: #8e98a8;

  position: relative;
  width: 100%;
  padding: 26px 0;

  background: transparent;

  overflow: hidden;
}


/* =========================================================
   IMPORTANT:
   No orange/teal glow outside the CTA card
   ========================================================= */

.ayan-curriculum-cta::before,
.ayan-curriculum-cta::after {
  display: none !important;
}


/* =========================================================
   MAIN CTA CARD
   ========================================================= */

.ayan-cta-inner {
  position: relative;
  z-index: 2;

  width: min(1200px, calc(100% - 40px));

  margin: 0 auto;

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

  gap: 40px;

  padding: 30px 34px;

  background:
    linear-gradient(
      135deg,
      rgba(17, 21, 27, 0.99),
      rgba(13, 16, 21, 0.99)
    );

  border: 1px solid var(--ayan-border);

  border-radius: 18px;

  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.22);

  overflow: hidden;
}


/* =========================================================
   BRAND ACCENT LINE
   ========================================================= */

.ayan-cta-inner::before {
  content: "";

  position: absolute;

  left: 0;
  top: 0;
  bottom: 0;

  width: 3px;

  background:
    linear-gradient(
      180deg,
      var(--ayan-orange) 0%,
      #d8b12f 45%,
      var(--ayan-teal) 100%
    );

  z-index: 3;
}


/* =========================================================
   VERY SUBTLE INTERNAL TEAL GLOW
   Stays INSIDE card only
   ========================================================= */

.ayan-cta-inner::after {
  content: "";

  position: absolute;

  width: 320px;
  height: 180px;

  right: -100px;
  bottom: -120px;

  background:
    radial-gradient(
      circle,
      rgba(22, 184, 170, 0.045) 0%,
      rgba(22, 184, 170, 0) 70%
    );

  pointer-events: none;

  z-index: 0;
}


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

.ayan-cta-content {
  position: relative;
  z-index: 2;

  min-width: 0;

  max-width: 650px;
}


/* =========================================================
   EYEBROW
   ========================================================= */

.ayan-cta-eyebrow {
  display: inline-flex;

  align-items: center;

  gap: 8px;

  margin-bottom: 9px;

  font-family: "Manrope", sans-serif;

  font-size: 9px;

  font-weight: 700;

  letter-spacing: 1.4px;

  line-height: 1.2;

  color: var(--ayan-teal);
}


/* Eyebrow dot */

.ayan-cta-dot {
  width: 6px;
  height: 6px;

  flex: 0 0 6px;

  border-radius: 50%;

  background: var(--ayan-teal);

  box-shadow:
    0 0 0 4px rgba(22, 184, 170, 0.08);
}


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

.ayan-cta-content h2 {
  margin: 0;

  font-family: "Manrope", sans-serif;

  font-size: clamp(25px, 3vw, 38px);

  font-weight: 700;

  line-height: 1.12;

  letter-spacing: -1px;

  color: var(--ayan-white);
}


/* Gradient heading highlight */

.ayan-cta-content h2 span {
  background:
    linear-gradient(
      90deg,
      var(--ayan-orange) 0%,
      #e8c13c 42%,
      var(--ayan-teal) 100%
    );

  -webkit-background-clip: text;
  background-clip: text;

  -webkit-text-fill-color: transparent;
}


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

.ayan-cta-content p {
  max-width: 610px;

  margin: 10px 0 0;

  font-family: "Inter", sans-serif;

  font-size: 13px;

  font-weight: 400;

  line-height: 1.65;

  color: var(--ayan-muted);
}


/* =========================================================
   ACTION BUTTONS
   ========================================================= */

.ayan-cta-actions {
  position: relative;
  z-index: 2;

  flex: 0 0 auto;

  display: flex;

  align-items: center;

  gap: 12px;
}


/* =========================================================
   COMMON BUTTON
   ========================================================= */

.ayan-cta-btn {
  position: relative;

  min-height: 48px;

  padding: 0 21px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 9px;

  border-radius: 9px;

  font-family: "Manrope", sans-serif;

  font-size: 11px;

  font-weight: 800;

  letter-spacing: 0.5px;

  line-height: 1;

  text-decoration: none;

  white-space: nowrap;

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


/* =========================================================
   REMOVE DEFAULT LINK EFFECTS
   ========================================================= */

.ayan-cta-btn:focus,
.ayan-cta-btn:active,
.ayan-cta-btn:visited {
  text-decoration: none;
}


/* =========================================================
   PRIMARY — ENQUIRE NOW
   ========================================================= */

.ayan-cta-primary {
  color: #080a0d;

  background: var(--ayan-orange);

  border: 1px solid var(--ayan-orange);

  box-shadow:
    0 8px 22px rgba(255, 157, 0, 0.10);
}


/* Primary hover */

.ayan-cta-primary:hover {
  color: #080a0d;

  background: var(--ayan-orange-hover);

  border-color: var(--ayan-orange-hover);

  transform: translateY(-2px);

  box-shadow:
    0 12px 28px rgba(255, 157, 0, 0.18);
}


/* =========================================================
   WHATSAPP BUTTON
   ========================================================= */

.ayan-cta-whatsapp {
  color: var(--ayan-teal);

  background: rgba(22, 184, 170, 0.035);

  border: 1px solid rgba(22, 184, 170, 0.55);
}


/* WhatsApp hover */

.ayan-cta-whatsapp:hover {
  color: var(--ayan-teal);

  background: rgba(22, 184, 170, 0.08);

  border-color: var(--ayan-teal);

  transform: translateY(-2px);

  box-shadow:
    0 10px 26px rgba(22, 184, 170, 0.10);
}


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

.ayan-whatsapp-icon {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 15px;
  height: 15px;

  font-size: 8px;

  color: var(--ayan-teal);

  border: 1px solid rgba(22, 184, 170, 0.65);

  border-radius: 50%;
}


/* =========================================================
   ARROW ANIMATION
   ========================================================= */

.ayan-cta-btn > span:last-child {
  font-size: 15px;

  line-height: 1;

  transition:
    transform 0.2s ease;
}


.ayan-cta-btn:hover > span:last-child {
  transform: translateX(3px);
}


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

@media (max-width: 1100px) {

  .ayan-cta-inner {
    width: min(1000px, calc(100% - 32px));

    gap: 28px;

    padding: 28px;
  }


  .ayan-cta-content {
    max-width: 560px;
  }


  .ayan-cta-content h2 {
    font-size: 30px;
  }


  .ayan-cta-content p {
    font-size: 12px;
  }


  .ayan-cta-actions {
    gap: 9px;
  }


  .ayan-cta-btn {
    min-height: 46px;

    padding: 0 17px;

    font-size: 10px;
  }
}


/* =========================================================
   TABLET / SMALL LAPTOP
   ========================================================= */

@media (max-width: 900px) {

  .ayan-cta-inner {
    align-items: flex-start;

    gap: 24px;
  }


  .ayan-cta-content {
    max-width: 500px;
  }


  .ayan-cta-content h2 {
    font-size: 27px;
  }


  .ayan-cta-content p {
    font-size: 11.5px;
  }


  .ayan-cta-actions {
    flex-direction: column;

    align-items: stretch;

    min-width: 150px;
  }


  .ayan-cta-btn {
    width: 100%;
  }
}


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

@media (max-width: 767px) {

  .ayan-curriculum-cta {
    padding: 18px 0;
  }


  /* CTA card */

  .ayan-cta-inner {
    width: calc(100% - 28px);

    margin: 0 auto;

    flex-direction: column;

    align-items: stretch;

    gap: 22px;

    padding: 24px 20px;

    border-radius: 15px;
  }


  /* Mobile accent becomes horizontal */

  .ayan-cta-inner::before {
    width: 100%;

    height: 2px;

    left: 0;
    right: 0;

    top: 0;
    bottom: auto;

    background:
      linear-gradient(
        90deg,
        var(--ayan-orange),
        #d8b12f,
        var(--ayan-teal)
      );
  }


  /* Content */

  .ayan-cta-content {
    max-width: none;
  }


  /* Eyebrow */

  .ayan-cta-eyebrow {
    font-size: 8px;

    letter-spacing: 1.1px;

    margin-bottom: 8px;
  }


  .ayan-cta-dot {
    width: 5px;
    height: 5px;

    flex-basis: 5px;
  }


  /* Heading */

  .ayan-cta-content h2 {
    font-size: 25px;

    line-height: 1.15;

    letter-spacing: -0.6px;
  }


  /* Description */

  .ayan-cta-content p {
    margin-top: 9px;

    font-size: 11px;

    line-height: 1.6;
  }


  /* Buttons */

  .ayan-cta-actions {
    width: 100%;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 9px;

    min-width: 0;
  }


  .ayan-cta-btn {
    width: 100%;

    min-height: 45px;

    padding: 0 10px;

    font-size: 9px;

    letter-spacing: 0.35px;
  }


  .ayan-cta-btn > span:last-child {
    font-size: 13px;
  }


  .ayan-whatsapp-icon {
    width: 14px;
    height: 14px;

    font-size: 7px;
  }
}


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

@media (max-width: 480px) {

  .ayan-curriculum-cta {
    padding: 16px 0;
  }


  .ayan-cta-inner {
    width: calc(100% - 20px);

    padding: 22px 16px;

    gap: 20px;
  }


  .ayan-cta-content h2 {
    font-size: 22px;

    line-height: 1.16;
  }


  .ayan-cta-content p {
    font-size: 10.5px;

    line-height: 1.6;
  }


  .ayan-cta-actions {
    grid-template-columns: 1fr;

    gap: 8px;
  }


  .ayan-cta-btn {
    min-height: 44px;

    font-size: 9.5px;
  }
}


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

@media (max-width: 360px) {

  .ayan-cta-inner {
    width: calc(100% - 16px);

    padding: 20px 14px;
  }


  .ayan-cta-content h2 {
    font-size: 20px;
  }


  .ayan-cta-content p {
    font-size: 10px;
  }


  .ayan-cta-eyebrow {
    font-size: 7px;

    letter-spacing: 0.9px;
  }
}


/* =========================================================
   ACCESSIBILITY — REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .ayan-cta-btn,
  .ayan-cta-btn > span:last-child {
    transition: none;
  }

  .ayan-cta-btn:hover {
    transform: none;
  }

  .ayan-cta-btn:hover > span:last-child {
    transform: none;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-051a6ed *//* =========================================================
   AYAN DIGITAL MARKETING
   LEARN → PRACTICE → BUILD → MEASURE
   COMPLETE SECTION CSS
   ========================================================= */

.ayan-learning-path {

  --ayan-orange: #ff9d00;
  --ayan-orange-soft: rgba(255,157,0,.12);

  --ayan-teal: #16b8aa;
  --ayan-teal-soft: rgba(22,184,170,.10);

  --ayan-bg: #0d1015;
  --ayan-card: #11151b;
  --ayan-card-hover: #141920;

  --ayan-border: #252b34;
  --ayan-border-soft: rgba(255,255,255,.08);

  --ayan-white: #f7f8fa;
  --ayan-muted: #8e98a8;

  position: relative;

  width: 100%;

  padding: 120px 20px;

  background:
    radial-gradient(
      circle at 10% 50%,
      rgba(255,157,0,.055),
      transparent 28%
    ),
    radial-gradient(
      circle at 90% 50%,
      rgba(22,184,170,.045),
      transparent 30%
    ),
    var(--ayan-bg);

  overflow: hidden;
}


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

.ayan-learning-container {

  width: min(1180px, 100%);

  margin: 0 auto;
}


/* =========================================================
   HEADER
   ========================================================= */

.ayan-learning-header {

  max-width: 780px;

  margin: 0 auto 75px;

  text-align: center;
}


.ayan-section-label {

  display: inline-flex;

  align-items: center;

  gap: 9px;

  padding: 8px 14px;

  margin-bottom: 22px;

  border: 1px solid rgba(22,184,170,.45);

  border-radius: 999px;

  color: var(--ayan-teal);

  font-family: "Manrope", sans-serif;

  font-size: 10px;

  font-weight: 800;

  letter-spacing: 1.5px;
}


.ayan-label-dot {

  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: var(--ayan-teal);

  box-shadow:
    0 0 0 5px rgba(22,184,170,.07);
}


.ayan-learning-header h2 {

  margin: 0;

  color: var(--ayan-white);

  font-family: "Manrope", sans-serif;

  font-size: clamp(42px, 5vw, 68px);

  line-height: 1.02;

  letter-spacing: -2.8px;

  font-weight: 700;
}


.ayan-learning-header h2 span {

  background:
    linear-gradient(
      90deg,
      var(--ayan-orange),
      #d8bd37 45%,
      var(--ayan-teal)
    );

  -webkit-background-clip: text;

  background-clip: text;

  -webkit-text-fill-color: transparent;
}


.ayan-learning-header p {

  max-width: 680px;

  margin: 25px auto 0;

  color: var(--ayan-muted);

  font-family: "Inter", sans-serif;

  font-size: 14px;

  line-height: 1.8;
}


/* =========================================================
   PATH WRAPPER
   ========================================================= */

.ayan-learning-path-wrap {

  position: relative;

  max-width: 980px;

  margin: 0 auto;

  padding: 5px 0;
}


/* =========================================================
   CONNECTING LINE
   ========================================================= */

.ayan-path-line {

  position: absolute;

  top: 35px;
  bottom: 35px;

  left: 30px;

  width: 1px;

  background:
    linear-gradient(
      180deg,
      rgba(255,157,0,.65),
      rgba(255,157,0,.20),
      rgba(22,184,170,.20),
      rgba(22,184,170,.65)
    );

  overflow: hidden;
}


.ayan-path-progress {

  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 0%;

  background:
    linear-gradient(
      180deg,
      var(--ayan-orange),
      var(--ayan-teal)
    );

  box-shadow:
    0 0 10px rgba(22,184,170,.35);

  transition:
    height .8s cubic-bezier(.2,.8,.2,1);
}


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

.ayan-learning-step {

  position: relative;

  display: grid;

  grid-template-columns: 62px 1fr;

  gap: 24px;

  margin-bottom: 22px;

  outline: none;

  opacity: 0;

  transform: translateY(28px);

  transition:
    opacity .7s ease,
    transform .7s ease;
}


.ayan-learning-step.is-visible {

  opacity: 1;

  transform: translateY(0);
}


/* =========================================================
   MARKER
   ========================================================= */

.ayan-step-marker {

  position: relative;

  z-index: 3;

  width: 62px;
  height: 62px;

  display: flex;

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

  border-radius: 16px;

  background: var(--ayan-card);

  border: 1px solid rgba(255,157,0,.45);

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


.ayan-step-marker span {

  color: var(--ayan-orange);

  font-family: "Manrope", sans-serif;

  font-size: 12px;

  font-weight: 800;

  letter-spacing: .5px;
}


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

.ayan-step-card {

  position: relative;

  padding: 27px 30px;

  background:
    linear-gradient(
      145deg,
      rgba(17,21,27,.98),
      rgba(13,16,21,.98)
    );

  border: 1px solid var(--ayan-border);

  border-radius: 17px;

  overflow: hidden;

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


/* =========================================================
   TOP
   ========================================================= */

.ayan-step-top {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;
}


.ayan-step-kicker {

  display: block;

  margin-bottom: 7px;

  color: var(--ayan-teal);

  font-family: "Manrope", sans-serif;

  font-size: 8px;

  font-weight: 800;

  letter-spacing: 1.3px;
}


.ayan-step-card h3 {

  margin: 0;

  color: var(--ayan-white);

  font-family: "Manrope", sans-serif;

  font-size: 22px;

  line-height: 1.2;

  font-weight: 700;

  letter-spacing: -.5px;
}


.ayan-step-summary {

  max-width: 700px;

  margin: 9px 0 0;

  color: var(--ayan-muted);

  font-family: "Inter", sans-serif;

  font-size: 12px;

  line-height: 1.65;
}


/* =========================================================
   TOGGLE
   ========================================================= */

.ayan-step-toggle {

  flex: 0 0 38px;

  width: 38px;
  height: 38px;

  display: flex;

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

  border: 1px solid #303640;

  border-radius: 50%;

  background: transparent;

  color: #9aa3b1;

  font-family: "Inter", sans-serif;

  font-size: 19px;

  line-height: 1;

  cursor: pointer;

  transition:
    color .25s ease,
    border-color .25s ease,
    background .25s ease,
    transform .3s ease;
}


.ayan-step-toggle:hover {

  color: var(--ayan-orange);

  border-color: rgba(255,157,0,.65);

  background: rgba(255,157,0,.05);
}


/* =========================================================
   DETAILS
   ========================================================= */

.ayan-step-details {

  display: grid;

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

  gap: 10px;

  max-height: 0;

  opacity: 0;

  overflow: hidden;

  margin-top: 0;

  transform: translateY(-8px);

  transition:
    max-height .45s ease,
    opacity .3s ease,
    margin-top .45s ease,
    transform .45s ease;
}


.ayan-learning-step.is-active .ayan-step-details {

  max-height: 160px;

  opacity: 1;

  margin-top: 22px;

  transform: translateY(0);
}


.ayan-detail-item {

  padding: 12px 13px;

  border: 1px solid rgba(255,255,255,.06);

  border-radius: 9px;

  background: rgba(255,255,255,.018);

  color: #9ba4b2;

  font-family: "Inter", sans-serif;

  font-size: 10px;

  line-height: 1.45;
}


.ayan-detail-item span {

  margin-right: 6px;

  color: var(--ayan-teal);

  font-weight: 700;
}


/* =========================================================
   ACTIVE STEP
   ========================================================= */

.ayan-learning-step.is-active .ayan-step-card {

  border-color: rgba(22,184,170,.45);

  background:
    linear-gradient(
      145deg,
      rgba(17,30,32,.98),
      rgba(13,16,21,.98)
    );

  box-shadow:
    0 16px 45px rgba(0,0,0,.20);
}


.ayan-learning-step.is-active .ayan-step-marker {

  border-color: var(--ayan-orange);

  background:
    linear-gradient(
      145deg,
      rgba(255,157,0,.12),
      rgba(17,21,27,1)
    );

  box-shadow:
    0 0 0 5px rgba(255,157,0,.035);
}


.ayan-learning-step.is-active .ayan-step-toggle {

  color: var(--ayan-teal);

  border-color: rgba(22,184,170,.55);

  transform: rotate(45deg);
}


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

@media (hover: hover) and (pointer: fine) {

  .ayan-learning-step:not(.is-active) .ayan-step-card:hover {

    border-color: rgba(255,157,0,.28);

    background: var(--ayan-card-hover);

    transform: translateX(5px);

    box-shadow:
      0 15px 35px rgba(0,0,0,.18);
  }


  .ayan-learning-step:not(.is-active):hover .ayan-step-marker {

    border-color: rgba(255,157,0,.75);

    transform: scale(1.03);
  }

}


/* =========================================================
   BOTTOM FLOW
   ========================================================= */

.ayan-learning-bottom {

  max-width: 800px;

  margin: 65px auto 0;

  text-align: center;
}


.ayan-bottom-line {

  width: 100%;

  height: 1px;

  margin-bottom: 24px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,157,0,.35),
      rgba(22,184,170,.35),
      transparent
    );
}


.ayan-learning-bottom p {

  margin: 0;

  color: var(--ayan-white);

  font-family: "Manrope", sans-serif;

  font-size: 11px;

  font-weight: 700;

  letter-spacing: .8px;
}


.ayan-learning-bottom p span {

  margin: 0 12px;

  color: var(--ayan-teal);
}


.ayan-learning-bottom small {

  display: block;

  max-width: 620px;

  margin: 12px auto 0;

  color: #667181;

  font-family: "Inter", sans-serif;

  font-size: 10px;

  line-height: 1.6;
}


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

@media (max-width: 900px) {

  .ayan-learning-path {

    padding: 90px 18px;
  }


  .ayan-learning-header {

    margin-bottom: 55px;
  }


  .ayan-learning-header h2 {

    font-size: clamp(38px, 6vw, 55px);
  }


  .ayan-step-card {

    padding: 24px;
  }


  .ayan-step-card h3 {

    font-size: 19px;
  }


  .ayan-step-details {

    grid-template-columns: 1fr;
  }
}


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

@media (max-width: 767px) {

  .ayan-learning-path {

    padding: 75px 14px;
  }


  .ayan-learning-header {

    margin-bottom: 45px;
  }


  .ayan-section-label {

    font-size: 8px;

    padding: 7px 11px;

    letter-spacing: 1.1px;
  }


  .ayan-learning-header h2 {

    font-size: 34px;

    line-height: 1.06;

    letter-spacing: -1.5px;
  }


  .ayan-learning-header p {

    margin-top: 18px;

    font-size: 11px;

    line-height: 1.7;
  }


  /* Mobile timeline */

  .ayan-learning-path-wrap {

    padding-left: 0;
  }


  .ayan-path-line {

    left: 23px;

    top: 28px;
    bottom: 28px;
  }


  .ayan-learning-step {

    grid-template-columns: 46px 1fr;

    gap: 12px;

    margin-bottom: 15px;
  }


  .ayan-step-marker {

    width: 46px;
    height: 46px;

    border-radius: 12px;
  }


  .ayan-step-marker span {

    font-size: 9px;
  }


  .ayan-step-card {

    padding: 19px 16px;

    border-radius: 13px;
  }


  .ayan-step-kicker {

    font-size: 6.5px;

    margin-bottom: 5px;

    letter-spacing: 1px;
  }


  .ayan-step-card h3 {

    font-size: 15px;

    letter-spacing: -.25px;
  }


  .ayan-step-summary {

    margin-top: 7px;

    font-size: 9.5px;

    line-height: 1.55;
  }


  .ayan-step-toggle {

    width: 32px;
    height: 32px;

    flex-basis: 32px;

    font-size: 16px;
  }


  .ayan-step-details {

    grid-template-columns: 1fr;

    gap: 7px;
  }


  .ayan-learning-step.is-active .ayan-step-details {

    margin-top: 15px;
  }


  .ayan-detail-item {

    padding: 9px 10px;

    font-size: 8.5px;
  }


  .ayan-learning-bottom {

    margin-top: 45px;
  }


  .ayan-learning-bottom p {

    font-size: 8px;

    letter-spacing: .5px;
  }


  .ayan-learning-bottom p span {

    margin: 0 6px;
  }


  .ayan-learning-bottom small {

    font-size: 8px;

    line-height: 1.6;
  }
}


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

@media (max-width: 420px) {

  .ayan-learning-header h2 {

    font-size: 30px;
  }


  .ayan-learning-step {

    grid-template-columns: 40px 1fr;

    gap: 10px;
  }


  .ayan-step-marker {

    width: 40px;
    height: 40px;
  }


  .ayan-path-line {

    left: 20px;
  }


  .ayan-step-card {

    padding: 16px 13px;
  }


  .ayan-step-card h3 {

    font-size: 14px;
  }


  .ayan-step-summary {

    font-size: 9px;
  }
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

.ayan-learning-step:focus-visible .ayan-step-card {

  outline: 2px solid var(--ayan-teal);

  outline-offset: 3px;
}


.ayan-step-toggle:focus-visible {

  outline: 2px solid var(--ayan-orange);

  outline-offset: 3px;
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .ayan-learning-step,
  .ayan-step-card,
  .ayan-step-marker,
  .ayan-step-toggle,
  .ayan-step-details,
  .ayan-path-progress {

    transition: none !important;
  }

  .ayan-learning-step {

    opacity: 1;

    transform: none;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-79e4a46 *//* =========================================================
   AYAN DIGITAL MARKETING
   PRACTICAL EXPERIENCE / PROJECTS
   COMPLETE REPLACEMENT CSS
   ========================================================= */


/* =========================================================
   ROOT
   ========================================================= */

.ayan-projects {

    --ayan-orange: #ff9d00;
    --ayan-orange-soft: rgba(255,157,0,.18);

    --ayan-teal: #16b8aa;
    --ayan-teal-soft: rgba(22,184,170,.16);

    --ayan-white: #f7f8fa;

    --ayan-text: #e9edf2;

    --ayan-muted: #8f99a8;

    --ayan-muted-2: #687384;

    --ayan-card: #0d1117;

    --ayan-card-2: #10151b;

    --ayan-border: #252c35;

    --ayan-border-soft: rgba(255,255,255,.07);

    width: 100%;

    position: relative;

    padding: 105px 20px;

    background: transparent;

    overflow: hidden;

    box-sizing: border-box;

    isolation: isolate;
}


.ayan-projects *,
.ayan-projects *::before,
.ayan-projects *::after {

    box-sizing: border-box;
}


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

.ayan-projects-container {

    width: min(1180px, 100%);

    margin: 0 auto;

    position: relative;

    z-index: 2;
}


/* =========================================================
   HEADER
   ========================================================= */

.ayan-projects-header {

    width: min(800px, 100%);

    margin: 0 auto 62px;

    text-align: center;
}


.ayan-projects-label {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    margin-bottom: 22px;

    padding: 8px 14px;

    border: 1px solid rgba(22,184,170,.45);

    border-radius: 999px;

    color: var(--ayan-teal);

    font-family: "Manrope", sans-serif;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.4px;

    line-height: 1;

    text-transform: uppercase;
}


.ayan-projects-label-dot {

    width: 6px;

    height: 6px;

    flex: 0 0 6px;

    border-radius: 50%;

    background: var(--ayan-teal);

    box-shadow:
        0 0 0 4px rgba(22,184,170,.07),
        0 0 12px rgba(22,184,170,.35);

    animation:
        ayanProjectsDot 2.5s ease-in-out infinite;
}


@keyframes ayanProjectsDot {

    0%,
    100% {

        opacity: .55;

        transform: scale(.9);

    }

    50% {

        opacity: 1;

        transform: scale(1.15);

    }

}


.ayan-projects-header h2 {

    margin: 0;

    color: var(--ayan-white);

    font-family: "Manrope", sans-serif;

    font-size: clamp(38px, 5vw, 64px);

    font-weight: 700;

    line-height: 1.04;

    letter-spacing: -2.7px;
}


.ayan-projects-header h2 span {

    display: block;

    margin-top: 2px;

    background:
        linear-gradient(
            90deg,
            var(--ayan-orange) 0%,
            #d8bd3b 45%,
            var(--ayan-teal) 100%
        );

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent;

    color: transparent;
}


.ayan-projects-header p {

    width: min(700px, 100%);

    margin: 22px auto 0;

    color: var(--ayan-muted);

    font-family: "Inter", sans-serif;

    font-size: 14px;

    font-weight: 400;

    line-height: 1.75;
}


/* =========================================================
   WORKSPACE
   ========================================================= */

.ayan-project-workspace {

    display: grid;

    grid-template-columns: 34% minmax(0, 66%);

    width: 100%;

    min-height: 525px;

    border: 1px solid var(--ayan-border);

    border-radius: 20px;

    background:
        linear-gradient(
            135deg,
            rgba(17,21,27,.82),
            rgba(9,12,17,.92)
        );

    overflow: hidden;

    position: relative;

    box-shadow:
        0 30px 80px rgba(0,0,0,.20);
}


/* =========================================================
   SUBTLE WORKSPACE LIGHT
   ========================================================= */

.ayan-project-workspace::before {

    content: "";

    position: absolute;

    width: 500px;

    height: 500px;

    right: -250px;

    top: -300px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(22,184,170,.055),
            transparent 68%
        );

    pointer-events: none;
}


/* =========================================================
   PROJECT NAVIGATION
   ========================================================= */

.ayan-project-nav {

    position: relative;

    z-index: 3;

    display: flex;

    flex-direction: column;

    gap: 5px;

    padding: 13px;

    border-right: 1px solid var(--ayan-border);

    background:
        rgba(7,10,14,.38);

    min-width: 0;
}


/* =========================================================
   TAB
   ========================================================= */

.ayan-project-tab {

    position: relative;

    width: 100%;

    min-height: 76px;

    display: grid;

    grid-template-columns: 38px minmax(0,1fr) 24px;

    align-items: center;

    gap: 10px;

    padding: 12px 13px;

    margin: 0;

    border: 1px solid transparent;

    border-radius: 12px;

    outline: none;

    background: transparent;

    color: var(--ayan-muted);

    text-align: left;

    cursor: pointer;

    font-family: inherit;

    -webkit-tap-highlight-color: transparent;

    transition:
        color .22s ease,
        border-color .22s ease,
        transform .22s ease;
}


/* =========================================================
   TAB HOVER
   IMPORTANT:
   NO LARGE BACKGROUND COLOR
   ========================================================= */

.ayan-project-tab:hover {

    color: var(--ayan-text);

    border-color:
        rgba(255,255,255,.10);

    background: transparent;

    transform: translateX(2px);
}


/* =========================================================
   ACTIVE TAB
   BORDER ONLY
   ========================================================= */

.ayan-project-tab.is-active {

    color: var(--ayan-white);

    border-color:
        rgba(255,157,0,.42);

    background: transparent;

    box-shadow:
        inset 0 0 0 1px
        rgba(255,157,0,.025);
}


/* =========================================================
   ACTIVE INDICATOR
   ========================================================= */

.ayan-project-tab::before {

    content: "";

    position: absolute;

    left: -1px;

    top: 15px;

    bottom: 15px;

    width: 2px;

    border-radius: 0 4px 4px 0;

    background: transparent;

    opacity: 0;

    transition:
        opacity .25s ease;
}


.ayan-project-tab.is-active::before {

    opacity: 1;

    background:
        linear-gradient(
            180deg,
            var(--ayan-orange),
            var(--ayan-teal)
        );
}


/* =========================================================
   TAB NUMBER
   ========================================================= */

.ayan-project-number {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 34px;

    height: 34px;

    border: 1px solid
        rgba(255,157,0,.35);

    border-radius: 9px;

    color: var(--ayan-muted-2);

    font-family: "Manrope", sans-serif;

    font-size: 10px;

    font-weight: 800;

    transition:
        color .22s ease,
        border-color .22s ease;
}


.ayan-project-tab.is-active
.ayan-project-number {

    color: var(--ayan-orange);

    border-color:
        rgba(255,157,0,.65);
}


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

.ayan-project-tab-text {

    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 5px;
}


.ayan-project-tab-text strong {

    display: block;

    color: inherit;

    font-family: "Manrope", sans-serif;

    font-size: 12px;

    font-weight: 700;

    line-height: 1.2;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


.ayan-project-tab-text small {

    display: block;

    color: var(--ayan-muted-2);

    font-family: "Inter", sans-serif;

    font-size: 8px;

    font-weight: 400;

    line-height: 1.25;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


.ayan-project-tab.is-active
.ayan-project-tab-text small {

    color: #8b96a5;
}


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

.ayan-project-arrow {

    color: #4e5968;

    font-size: 15px;

    line-height: 1;

    transition:
        color .22s ease,
        transform .22s ease;
}


.ayan-project-tab:hover
.ayan-project-arrow {

    color: var(--ayan-orange);

    transform: translateX(2px);
}


.ayan-project-tab.is-active
.ayan-project-arrow {

    color: var(--ayan-teal);

    transform: translateX(3px);
}


/* =========================================================
   KEYBOARD FOCUS
   ========================================================= */

.ayan-project-tab:focus-visible {

    outline: 2px solid
        rgba(22,184,170,.75);

    outline-offset: 2px;
}


/* =========================================================
   DISPLAY AREA
   ========================================================= */

.ayan-project-display {

    position: relative;

    min-width: 0;

    min-height: 525px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(22,184,170,.055),
            transparent 32%
        );
}


/* =========================================================
   PROJECT PANEL
   ========================================================= */

.ayan-project-panel {

    position: relative;

    min-height: 525px;

    padding: 52px 60px 35px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    animation:
        ayanProjectPanelIn
        .35s
        ease
        both;
}


.ayan-project-panel[hidden] {

    display: none !important;
}


@keyframes ayanProjectPanelIn {

    from {

        opacity: 0;

        transform:
            translateX(18px);

    }

    to {

        opacity: 1;

        transform:
            translateX(0);

    }

}


/* =========================================================
   PANEL TOP
   ========================================================= */

.ayan-project-panel-top {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 20px;
}


/* =========================================================
   BIG NUMBER
   ========================================================= */

.ayan-project-big-number {

    color:
        rgba(255,157,0,.09);

    font-family: "Manrope", sans-serif;

    font-size:
        clamp(58px, 7vw, 100px);

    font-weight: 800;

    line-height: .8;

    letter-spacing: -5px;

    user-select: none;
}


/* =========================================================
   CATEGORY
   ========================================================= */

.ayan-project-category {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 7px 11px;

    border: 1px solid
        rgba(22,184,170,.34);

    border-radius: 6px;

    color: var(--ayan-teal);

    font-family: "Manrope", sans-serif;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 1.2px;

    white-space: nowrap;
}


/* =========================================================
   MAIN CONTENT
   ========================================================= */

.ayan-project-main {

    margin-top: 30px;
}


/* =========================================================
   PROJECT COUNTER
   ========================================================= */

.ayan-project-step {

    color: var(--ayan-teal);

    font-family: "Manrope", sans-serif;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 1.2px;
}


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

.ayan-project-panel h3 {

    max-width: 650px;

    margin: 15px 0 0;

    color: var(--ayan-white);

    font-family: "Manrope", sans-serif;

    font-size:
        clamp(27px, 3vw, 40px);

    font-weight: 700;

    line-height: 1.12;

    letter-spacing: -1.1px;
}


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

.ayan-project-description {

    max-width: 650px;

    margin: 14px 0 0;

    color: var(--ayan-muted);

    font-family: "Inter", sans-serif;

    font-size: 13px;

    font-weight: 400;

    line-height: 1.75;
}


/* =========================================================
   PRACTICE
   ========================================================= */

.ayan-project-practice {

    margin-top: 31px;
}


.ayan-project-practice > span {

    display: block;

    margin-bottom: 11px;

    color: #697484;

    font-family: "Manrope", sans-serif;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 1.2px;
}


/* =========================================================
   TAGS
   ========================================================= */

.ayan-project-tags {

    display: flex;

    flex-wrap: wrap;

    gap: 7px;
}


.ayan-project-tags span {

    display: inline-flex;

    align-items: center;

    min-height: 31px;

    padding: 7px 11px;

    border: 1px solid
        #292f38;

    border-radius: 7px;

    color: #9aa4b2;

    background:
        rgba(255,255,255,.012);

    font-family: "Inter", sans-serif;

    font-size: 9px;

    line-height: 1.2;

    transition:
        color .2s ease,
        border-color .2s ease,
        transform .2s ease;
}


.ayan-project-tags span:hover {

    color: var(--ayan-white);

    border-color:
        rgba(255,157,0,.42);

    background:
        transparent;

    transform:
        translateY(-1px);
}


/* =========================================================
   PANEL FOOTER
   ========================================================= */

.ayan-project-footer {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-top: 30px;

    color: #5e6978;

    font-family: "Manrope", sans-serif;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 1.2px;
}


.ayan-project-footer strong {

    color: #8994a3;

    font-size: 8px;
}


.ayan-project-footer-line {

    width: 80px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            var(--ayan-orange),
            var(--ayan-teal)
        );

    opacity: .55;
}


/* =========================================================
   BOTTOM MESSAGE
   ========================================================= */

.ayan-projects-bottom {

    width: min(800px, 100%);

    margin: 52px auto 0;

    text-align: center;
}


.ayan-projects-bottom-line {

    width: 100%;

    height: 1px;

    margin-bottom: 22px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,157,0,.28),
            rgba(22,184,170,.28),
            transparent
        );
}


.ayan-projects-flow {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 7px;

    color: var(--ayan-white);

    font-family: "Manrope", sans-serif;

    font-size: 10px;

    letter-spacing: .8px;
}


.ayan-projects-flow span {

    color: var(--ayan-teal);

    margin: 0 7px;
}


.ayan-projects-bottom p {

    max-width: 600px;

    margin: 13px auto 0;

    color: var(--ayan-muted-2);

    font-family: "Inter", sans-serif;

    font-size: 11px;

    line-height: 1.65;
}


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

@media (max-width: 1000px) {

    .ayan-projects {

        padding: 85px 18px;
    }


    .ayan-project-workspace {

        grid-template-columns:
            37% minmax(0, 63%);
    }


    .ayan-project-nav {

        padding: 10px;
    }


    .ayan-project-tab {

        min-height: 70px;

        grid-template-columns:
            32px minmax(0,1fr) 18px;

        padding: 10px;
    }


    .ayan-project-number {

        width: 30px;

        height: 30px;

        font-size: 9px;
    }


    .ayan-project-tab-text strong {

        font-size: 10px;
    }


    .ayan-project-tab-text small {

        font-size: 7px;
    }


    .ayan-project-arrow {

        font-size: 13px;
    }


    .ayan-project-panel {

        padding: 45px 38px 30px;
    }


    .ayan-project-panel h3 {

        font-size: 29px;
    }


    .ayan-project-description {

        font-size: 12px;
    }

}


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

@media (max-width: 767px) {

    .ayan-projects {

        padding:
            72px
            14px
            70px;

        overflow:
            hidden;
    }


    .ayan-projects-container {

        width: 100%;
    }


    /* -----------------------------------------------------
       HEADER
       ----------------------------------------------------- */

    .ayan-projects-header {

        margin-bottom: 38px;
    }


    .ayan-projects-label {

        margin-bottom: 18px;

        padding: 7px 10px;

        font-size: 7px;

        letter-spacing: 1px;
    }


    .ayan-projects-header h2 {

        font-size:
            clamp(30px, 8.5vw, 38px);

        line-height: 1.08;

        letter-spacing: -1.5px;
    }


    .ayan-projects-header h2 span {

        margin-top: 3px;
    }


    .ayan-projects-header p {

        margin-top: 17px;

        font-size: 12px;

        line-height: 1.7;
    }


    /* -----------------------------------------------------
       WORKSPACE
       ----------------------------------------------------- */

    .ayan-project-workspace {

        display: block;

        min-height: 0;

        border-radius: 16px;

        overflow: hidden;
    }


    /* -----------------------------------------------------
       MOBILE NAVIGATION
       ----------------------------------------------------- */

    .ayan-project-nav {

        display: flex;

        flex-direction: row;

        align-items: stretch;

        gap: 8px;

        width: 100%;

        padding: 10px;

        border-right: 0;

        border-bottom:
            1px solid
            var(--ayan-border);

        overflow-x: auto;

        overflow-y: hidden;

        scrollbar-width: none;

        -webkit-overflow-scrolling: touch;

        overscroll-behavior-x: contain;

        overscroll-behavior-y: none;

        scroll-behavior: smooth;

        touch-action: pan-x;
    }


    .ayan-project-nav::-webkit-scrollbar {

        display: none;
    }


    /* -----------------------------------------------------
       MOBILE TAB
       ----------------------------------------------------- */

    .ayan-project-tab {

        flex:
            0 0 126px;

        width: 126px;

        min-height: 72px;

        display: flex;

        flex-direction: column;

        align-items: flex-start;

        justify-content: center;

        gap: 4px;

        padding:
            10px
            11px;

        border-radius: 10px;

        transform: none !important;

        background: transparent;
    }


    .ayan-project-tab:hover {

        background: transparent;

        transform: none !important;
    }


    .ayan-project-tab.is-active {

        border-color:
            rgba(255,157,0,.48);

        background: transparent;
    }


    .ayan-project-tab::before {

        left: 10px;

        right: 10px;

        top: auto;

        bottom: -1px;

        width: auto;

        height: 2px;

        border-radius: 3px 3px 0 0;
    }


    .ayan-project-number {

        width: 24px;

        height: 24px;

        border-radius: 7px;

        font-size: 8px;
    }


    .ayan-project-tab-text {

        width: 100%;

        gap: 2px;
    }


    .ayan-project-tab-text strong {

        font-size: 10px;

        line-height: 1.2;
    }


    .ayan-project-tab-text small {

        font-size: 7px;

        line-height: 1.25;
    }


    .ayan-project-arrow {

        display: none;
    }


    /* -----------------------------------------------------
       DISPLAY
       ----------------------------------------------------- */

    .ayan-project-display {

        min-height: 0;

        background:
            radial-gradient(
                circle at 90% 5%,
                rgba(22,184,170,.045),
                transparent 38%
            );
    }


    /* -----------------------------------------------------
       MOBILE PANEL
       ----------------------------------------------------- */

    .ayan-project-panel {

        min-height: 0;

        padding:
            31px
            20px
            25px;

        display: flex;

        flex-direction: column;

        justify-content: flex-start;
    }


    .ayan-project-panel-top {

        align-items:
            flex-start;
    }


    .ayan-project-big-number {

        font-size: 62px;

        letter-spacing: -3px;

        line-height: .82;
    }


    .ayan-project-category {

        padding:
            6px
            8px;

        font-size: 6.5px;

        letter-spacing: .9px;
    }


    /* -----------------------------------------------------
       MAIN CONTENT
       ----------------------------------------------------- */

    .ayan-project-main {

        margin-top: 27px;
    }


    .ayan-project-step {

        font-size: 7px;

        letter-spacing: 1px;
    }


    .ayan-project-panel h3 {

        margin-top: 12px;

        font-size:
            clamp(22px, 6.2vw, 28px);

        line-height: 1.12;

        letter-spacing: -.6px;
    }


    .ayan-project-description {

        margin-top: 11px;

        font-size: 11px;

        line-height: 1.7;
    }


    /* -----------------------------------------------------
       PRACTICE
       ----------------------------------------------------- */

    .ayan-project-practice {

        margin-top: 25px;
    }


    .ayan-project-practice > span {

        margin-bottom: 9px;

        font-size: 7px;

        letter-spacing: 1px;
    }


    .ayan-project-tags {

        gap: 6px;
    }


    .ayan-project-tags span {

        min-height: 29px;

        padding:
            7px
            9px;

        font-size: 8px;

        border-radius: 6px;
    }


    /* -----------------------------------------------------
       FOOTER
       ----------------------------------------------------- */

    .ayan-project-footer {

        margin-top: 29px;

        gap: 8px;

        font-size: 7px;
    }


    .ayan-project-footer strong {

        font-size: 7px;
    }


    .ayan-project-footer-line {

        width: 45px;
    }


    /* -----------------------------------------------------
       BOTTOM
       ----------------------------------------------------- */

    .ayan-projects-bottom {

        margin-top: 40px;
    }


    .ayan-projects-bottom-line {

        margin-bottom: 18px;
    }


    .ayan-projects-flow {

        font-size: 8px;

        gap: 3px;
    }


    .ayan-projects-flow span {

        margin:
            0
            4px;
    }


    .ayan-projects-bottom p {

        margin-top: 11px;

        font-size: 9px;

        line-height: 1.65;
    }

}


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

@media (max-width: 420px) {

    .ayan-projects {

        padding:
            60px
            10px
            60px;
    }


    .ayan-projects-header {

        margin-bottom: 32px;
    }


    .ayan-projects-header h2 {

        font-size: 29px;

        letter-spacing: -1.35px;
    }


    .ayan-projects-header p {

        font-size: 11px;
    }


    .ayan-project-workspace {

        border-radius: 14px;
    }


    .ayan-project-nav {

        padding: 8px;

        gap: 7px;
    }


    .ayan-project-tab {

        flex-basis: 118px;

        width: 118px;

        min-height: 68px;

        padding:
            9px
            10px;
    }


    .ayan-project-tab-text strong {

        font-size: 9px;
    }


    .ayan-project-tab-text small {

        font-size: 6.5px;
    }


    .ayan-project-panel {

        padding:
            28px
            17px
            23px;
    }


    .ayan-project-big-number {

        font-size: 55px;
    }


    .ayan-project-panel h3 {

        font-size: 21px;
    }


    .ayan-project-description {

        font-size: 10px;
    }


    .ayan-project-tags span {

        font-size: 7.5px;

        padding:
            6px
            8px;
    }

}


/* =========================================================
   VERY SMALL DEVICES
   ========================================================= */

@media (max-width: 350px) {

    .ayan-project-tab {

        flex-basis: 108px;

        width: 108px;
    }


    .ayan-project-tab-text strong {

        font-size: 8.5px;
    }


    .ayan-project-tab-text small {

        font-size: 6px;
    }


    .ayan-project-panel h3 {

        font-size: 20px;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .ayan-projects-label-dot {

        animation: none !important;
    }


    .ayan-project-panel {

        animation: none !important;
    }


    .ayan-project-nav {

        scroll-behavior: auto !important;
    }


    .ayan-project-tab,
    .ayan-project-arrow,
    .ayan-project-number,
    .ayan-project-tags span {

        transition: none !important;
    }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-6e3ab91 *//* =========================================================
   AYAN — WHY LEARN WITH AYAN
   Interactive Instructor + Marketing Ecosystem
   ========================================================= */

.ayan-why-section {

  --ayan-orange: #ff9d00;
  --ayan-orange-light: #ffad1f;

  --ayan-teal: #16b8aa;

  --ayan-white: #f7f8fa;
  --ayan-muted: #8e98a8;
  --ayan-dark-muted: #667181;

  --ayan-card: #11151b;
  --ayan-border: #252b34;

  position: relative;

  width: 100%;

  padding: 105px 20px;

  background: transparent;

  overflow: hidden;
}


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

.ayan-why-container {

  width: min(1180px, 100%);

  margin: 0 auto;
}


/* =========================================================
   HEADER
   ========================================================= */

.ayan-why-header {

  max-width: 780px;

  margin: 0 auto 70px;

  text-align: center;
}


.ayan-why-label {

  display: inline-flex;

  align-items: center;

  gap: 9px;

  padding: 7px 13px;

  margin-bottom: 20px;

  border: 1px solid rgba(22,184,170,.42);

  border-radius: 999px;

  color: var(--ayan-teal);

  font-family: "Manrope", sans-serif;

  font-size: 9px;

  font-weight: 800;

  letter-spacing: 1.4px;
}


.ayan-why-label span {

  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: var(--ayan-teal);

  box-shadow:
    0 0 0 4px rgba(22,184,170,.07);
}


.ayan-why-header h2 {

  margin: 0;

  color: var(--ayan-white);

  font-family: "Manrope", sans-serif;

  font-size: clamp(38px, 5vw, 63px);

  line-height: 1.04;

  font-weight: 700;

  letter-spacing: -2.5px;
}


.ayan-why-header h2 span {

  display: block;

  background:
    linear-gradient(
      90deg,
      var(--ayan-orange),
      #d9bd38 45%,
      var(--ayan-teal)
    );

  -webkit-background-clip: text;

  background-clip: text;

  -webkit-text-fill-color: transparent;
}


.ayan-why-header p {

  max-width: 690px;

  margin: 22px auto 0;

  color: var(--ayan-muted);

  font-family: "Inter", sans-serif;

  font-size: 13px;

  line-height: 1.75;
}


/* =========================================================
   MAIN EXPERIENCE
   ========================================================= */

.ayan-why-experience {

  display: grid;

  grid-template-columns: 43% 57%;

  align-items: center;

  gap: 20px;

  min-height: 620px;
}


/* =========================================================
   LEFT CONTENT
   ========================================================= */

.ayan-why-content {

  padding: 20px 15px 20px 0;
}


.ayan-why-content-label {

  margin-bottom: 16px;

  color: var(--ayan-teal);

  font-family: "Manrope", sans-serif;

  font-size: 8px;

  font-weight: 800;

  letter-spacing: 1.4px;
}


.ayan-why-content h3 {

  max-width: 490px;

  margin: 0;

  color: var(--ayan-white);

  font-family: "Manrope", sans-serif;

  font-size: clamp(30px, 4vw, 48px);

  line-height: 1.08;

  letter-spacing: -1.8px;

  font-weight: 700;
}


.ayan-why-content h3 strong {

  background:
    linear-gradient(
      90deg,
      var(--ayan-orange),
      var(--ayan-teal)
    );

  -webkit-background-clip: text;

  background-clip: text;

  -webkit-text-fill-color: transparent;
}


.ayan-why-description {

  max-width: 470px;

  margin: 20px 0 30px;

  color: var(--ayan-muted);

  font-family: "Inter", sans-serif;

  font-size: 12px;

  line-height: 1.75;
}


/* =========================================================
   BENEFITS
   ========================================================= */

.ayan-why-benefits {

  max-width: 500px;

  display: flex;

  flex-direction: column;

  gap: 7px;
}


.ayan-why-benefit {

  position: relative;

  width: 100%;

  min-height: 62px;

  display: grid;

  grid-template-columns: 35px 1fr 25px;

  align-items: center;

  gap: 11px;

  padding: 10px 12px;

  border: 1px solid transparent;

  border-radius: 10px;

  background: transparent;

  color: var(--ayan-muted);

  text-align: left;

  cursor: pointer;

  font-family: inherit;

  transition:
    background .25s ease,
    border-color .25s ease,
    transform .25s ease,
    color .25s ease;
}


.ayan-why-benefit:hover {

  color: var(--ayan-white);

  border-color: rgba(255,255,255,.07);

  background: rgba(255,255,255,.025);

  transform: translateX(3px);
}


.ayan-why-benefit.is-active {

  color: var(--ayan-white);

  border-color: rgba(22,184,170,.38);

  background:
    linear-gradient(
      100deg,
      rgba(22,184,170,.075),
      rgba(255,157,0,.025)
    );
}


.ayan-why-benefit::before {

  content: "";

  position: absolute;

  left: -1px;

  top: 15px;
  bottom: 15px;

  width: 2px;

  border-radius: 2px;

  background: transparent;
}


.ayan-why-benefit.is-active::before {

  background:
    linear-gradient(
      180deg,
      var(--ayan-orange),
      var(--ayan-teal)
    );
}


/* Number */

.ayan-benefit-icon {

  color: #657080;

  font-family: "Manrope", sans-serif;

  font-size: 9px;

  font-weight: 800;
}


.ayan-why-benefit.is-active .ayan-benefit-icon {

  color: var(--ayan-orange);
}


/* Text */

.ayan-why-benefit > span:nth-child(2) {

  display: flex;

  flex-direction: column;

  gap: 4px;
}


.ayan-why-benefit strong {

  color: inherit;

  font-family: "Manrope", sans-serif;

  font-size: 11px;

  font-weight: 700;
}


.ayan-why-benefit small {

  color: #687384;

  font-family: "Inter", sans-serif;

  font-size: 8px;
}


.ayan-why-benefit i {

  color: #566170;

  font-size: 14px;

  font-style: normal;

  transition:
    transform .25s ease,
    color .25s ease;
}


.ayan-why-benefit.is-active i {

  color: var(--ayan-teal);

  transform: translateX(3px);
}


/* =========================================================
   VISUAL AREA
   ========================================================= */

.ayan-why-visual {

  position: relative;

  width: min(590px, 100%);

  aspect-ratio: 1 / 1;

  margin: 0 auto;

  display: flex;

  align-items: center;

  justify-content: center;
}


/* =========================================================
   ORBIT GLOW
   ========================================================= */

.ayan-orbit-glow {

  position: absolute;

  width: 55%;

  height: 55%;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(22,184,170,.10),
      rgba(255,157,0,.035) 40%,
      transparent 72%
    );

  filter: blur(12px);

  animation:
    ayanCenterGlow 5s ease-in-out infinite;
}


@keyframes ayanCenterGlow {

  0%,
  100% {
    transform: scale(.95);
    opacity: .65;
  }

  50% {
    transform: scale(1.05);
    opacity: 1;
  }
}


/* =========================================================
   ORBIT RINGS
   ========================================================= */

.ayan-orbit-ring {

  position: absolute;

  border-radius: 50%;

  pointer-events: none;
}


.ayan-ring-one {

  width: 61%;

  aspect-ratio: 1;

  border: 1px solid rgba(255,157,0,.15);

  transform: rotate(-12deg);
}


.ayan-ring-two {

  width: 79%;

  aspect-ratio: 1;

  border: 1px dashed rgba(22,184,170,.16);

  transform: rotate(22deg);
}


/* =========================================================
   SVG CONNECTIONS
   ========================================================= */

.ayan-orbit-lines {

  position: absolute;

  width: 100%;

  height: 100%;

  inset: 0;

  pointer-events: none;

  opacity: .55;
}


.ayan-orbit-lines circle {

  fill: none;

  stroke: rgba(255,255,255,.07);

  stroke-width: 1;

  stroke-dasharray: 3 9;
}


/* =========================================================
   PERSON
   ========================================================= */

.ayan-person-wrap {

  position: relative;

  z-index: 5;

  width: 43%;

  aspect-ratio: 1;

  display: flex;

  align-items: center;

  justify-content: center;
}


.ayan-person-glow {

  position: absolute;

  inset: -10px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(255,157,0,.14),
      rgba(22,184,170,.08) 45%,
      transparent 70%
    );

  filter: blur(14px);

  animation:
    ayanPersonGlow 4s ease-in-out infinite;
}


@keyframes ayanPersonGlow {

  0%,
  100% {
    transform: scale(.96);
  }

  50% {
    transform: scale(1.05);
  }
}


.ayan-person-image {

  position: relative;

  width: 100%;

  height: 100%;

  overflow: hidden;

  border-radius: 50%;

  border: 2px solid rgba(255,255,255,.13);

  background: #161b22;

  box-shadow:
    0 20px 60px rgba(0,0,0,.4);
}


.ayan-person-image::before {

  content: "";

  position: absolute;

  inset: 0;

  z-index: 2;

  border-radius: 50%;

  background:
    linear-gradient(
      145deg,
      rgba(255,157,0,.08),
      transparent 42%,
      rgba(22,184,170,.08)
    );

  pointer-events: none;
}


.ayan-person-image img {

  width: 100%;

  height: 100%;

  display: block;

  object-fit: cover;
}


/* Person badge */

.ayan-person-badge {

  position: absolute;

  z-index: 7;

  bottom: -10px;

  left: 50%;

  transform: translateX(-50%);

  display: flex;

  align-items: center;

  gap: 6px;

  padding: 7px 10px;

  border: 1px solid rgba(22,184,170,.35);

  border-radius: 999px;

  background: #11151b;

  color: var(--ayan-teal);

  font-family: "Manrope", sans-serif;

  font-size: 6px;

  font-weight: 800;

  letter-spacing: 1px;

  white-space: nowrap;
}


.ayan-person-badge span {

  width: 5px;
  height: 5px;

  border-radius: 50%;

  background: var(--ayan-teal);

  box-shadow:
    0 0 0 3px rgba(22,184,170,.07);
}


/* =========================================================
   TOOL BADGES
   ========================================================= */

.ayan-tool {

  position: absolute;

  z-index: 10;

  min-width: 82px;

  min-height: 44px;

  display: flex;

  align-items: center;

  gap: 7px;

  padding: 7px 10px;

  border: 1px solid #2b323d;

  border-radius: 9px;

  background: rgba(17,21,27,.94);

  color: #8f99a8;

  cursor: pointer;

  font-family: "Manrope", sans-serif;

  text-align: left;

  box-shadow:
    0 10px 30px rgba(0,0,0,.18);

  backdrop-filter: blur(8px);

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


/* Tool positions */

.ayan-tool-1 {

  top: 9%;

  left: 47%;

  animation:
    ayanFloatOne 5s ease-in-out infinite;
}


.ayan-tool-2 {

  top: 30%;

  right: 2%;

  animation:
    ayanFloatTwo 5.7s ease-in-out infinite;
}


.ayan-tool-3 {

  bottom: 10%;

  right: 9%;

  animation:
    ayanFloatThree 5.3s ease-in-out infinite;
}


.ayan-tool-4 {

  bottom: 6%;

  left: 23%;

  animation:
    ayanFloatFour 6s ease-in-out infinite;
}


.ayan-tool-5 {

  top: 45%;

  left: 0%;

  animation:
    ayanFloatFive 5.5s ease-in-out infinite;
}


.ayan-tool-6 {

  top: 14%;

  left: 8%;

  animation:
    ayanFloatSix 6.2s ease-in-out infinite;
}


/* Float animations */

@keyframes ayanFloatOne {

  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}


@keyframes ayanFloatTwo {

  0%,100% { transform: translate(0,0); }
  50% { transform: translate(6px,-7px); }
}


@keyframes ayanFloatThree {

  0%,100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}


@keyframes ayanFloatFour {

  0%,100% { transform: translate(0,0); }
  50% { transform: translate(-5px,7px); }
}


@keyframes ayanFloatFive {

  0%,100% { transform: translate(0,0); }
  50% { transform: translate(-7px,-5px); }
}


@keyframes ayanFloatSix {

  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}


/* Tool symbol */

.ayan-tool-symbol {

  width: 25px;
  height: 25px;

  flex: 0 0 25px;

  display: flex;

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

  border: 1px solid rgba(255,255,255,.09);

  border-radius: 6px;

  background: rgba(255,255,255,.025);

  color: var(--ayan-orange);

  font-size: 7px;

  font-weight: 800;

  letter-spacing: -.2px;
}


.ayan-tool-name {

  font-size: 8px;

  font-weight: 700;

  white-space: nowrap;
}


/* Active / hover */

.ayan-tool:hover,
.ayan-tool.is-active {

  color: var(--ayan-white);

  border-color: rgba(22,184,170,.6);

  background:
    linear-gradient(
      135deg,
      rgba(22,184,170,.09),
      rgba(255,157,0,.035)
    );

  box-shadow:
    0 12px 35px rgba(22,184,170,.10);

  transform: translateY(-3px) scale(1.03);
}


.ayan-tool.is-active .ayan-tool-symbol {

  color: var(--ayan-teal);

  border-color: rgba(22,184,170,.4);

  background: rgba(22,184,170,.07);
}


/* =========================================================
   TOOL INFORMATION
   ========================================================= */

.ayan-tool-info {

  position: absolute;

  z-index: 6;

  right: 7%;

  bottom: 19%;

  width: 185px;

  padding: 13px 14px;

  border-left: 2px solid var(--ayan-orange);

  background: rgba(13,16,21,.88);

  backdrop-filter: blur(10px);

  box-shadow:
    0 15px 35px rgba(0,0,0,.18);
}


.ayan-tool-info-label {

  display: block;

  margin-bottom: 5px;

  color: var(--ayan-teal);

  font-family: "Manrope", sans-serif;

  font-size: 6px;

  font-weight: 800;

  letter-spacing: 1px;
}


.ayan-tool-info-title {

  display: block;

  color: var(--ayan-white);

  font-family: "Manrope", sans-serif;

  font-size: 12px;

  font-weight: 700;
}


.ayan-tool-info-text {

  margin: 5px 0 0;

  color: #748091;

  font-family: "Inter", sans-serif;

  font-size: 7.5px;

  line-height: 1.5;
}


/* =========================================================
   BOTTOM
   ========================================================= */

.ayan-why-bottom {

  max-width: 850px;

  margin: 70px auto 0;

  text-align: center;
}


.ayan-why-bottom-line {

  width: 100%;

  height: 1px;

  margin-bottom: 24px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,157,0,.35),
      rgba(22,184,170,.35),
      transparent
    );
}


.ayan-why-bottom-content {

  display: flex;

  justify-content: center;

  align-items: center;

  flex-wrap: wrap;

  gap: 7px;

  color: var(--ayan-white);

  font-family: "Manrope", sans-serif;

  font-size: 9px;

  font-weight: 800;

  letter-spacing: 1px;
}


.ayan-why-bottom-content b {

  color: var(--ayan-teal);

  font-weight: 700;

  margin: 0 7px;
}


.ayan-why-bottom p {

  max-width: 620px;

  margin: 11px auto 0;

  color: #687384;

  font-family: "Inter", sans-serif;

  font-size: 9px;

  line-height: 1.6;
}


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

@media (max-width: 1000px) {

  .ayan-why-experience {

    grid-template-columns: 46% 54%;
  }


  .ayan-tool {

    min-width: 75px;

    min-height: 40px;

    padding: 6px 8px;
  }


  .ayan-tool-symbol {

    width: 22px;
    height: 22px;

    flex-basis: 22px;
  }


  .ayan-tool-name {

    font-size: 7px;
  }


  .ayan-tool-info {

    right: 3%;

    bottom: 14%;

    width: 160px;
  }
}


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

@media (max-width: 767px) {

  .ayan-why-section {

    padding: 75px 14px;
  }


  .ayan-why-header {

    margin-bottom: 45px;
  }


  .ayan-why-label {

    padding: 6px 10px;

    font-size: 7px;

    letter-spacing: 1px;
  }


  .ayan-why-header h2 {

    font-size: 32px;

    line-height: 1.07;

    letter-spacing: -1.5px;
  }


  .ayan-why-header p {

    margin-top: 17px;

    font-size: 10.5px;

    line-height: 1.7;
  }


  /* Stack content */

  .ayan-why-experience {

    display: flex;

    flex-direction: column;

    gap: 45px;

    min-height: 0;
  }


  .ayan-why-content {

    width: 100%;

    padding: 0;
  }


  .ayan-why-content-label {

    font-size: 7px;

    margin-bottom: 12px;
  }


  .ayan-why-content h3 {

    max-width: none;

    font-size: 28px;

    line-height: 1.1;

    letter-spacing: -1px;
  }


  .ayan-why-description {

    max-width: none;

    margin: 16px 0 23px;

    font-size: 10px;

    line-height: 1.65;
  }


  .ayan-why-benefits {

    max-width: none;

    gap: 6px;
  }


  .ayan-why-benefit {

    min-height: 57px;

    grid-template-columns: 31px 1fr 20px;

    gap: 8px;

    padding: 9px 10px;

    border-radius: 9px;
  }


  .ayan-why-benefit strong {

    font-size: 9px;
  }


  .ayan-why-benefit small {

    font-size: 7px;
  }


  .ayan-benefit-icon {

    font-size: 8px;
  }


  /* Visual */

  .ayan-why-visual {

    width: min(100%, 430px);

    aspect-ratio: 1 / 1;

    margin: 0 auto;
  }


  .ayan-ring-one {

    width: 68%;
  }


  .ayan-ring-two {

    width: 88%;
  }


  .ayan-person-wrap {

    width: 39%;
  }


  .ayan-person-badge {

    bottom: -8px;

    padding: 6px 8px;

    font-size: 5px;
  }


  /* Tools */

  .ayan-tool {

    min-width: 72px;

    min-height: 42px;

    padding: 7px 8px;

    border-radius: 8px;
  }


  .ayan-tool-symbol {

    width: 22px;
    height: 22px;

    flex-basis: 22px;

    font-size: 6px;
  }


  .ayan-tool-name {

    font-size: 6.5px;
  }


  .ayan-tool-1 {

    top: 1%;

    left: 39%;
  }


  .ayan-tool-2 {

    top: 26%;

    right: -1%;
  }


  .ayan-tool-3 {

    bottom: 7%;

    right: 2%;
  }


  .ayan-tool-4 {

    bottom: 2%;

    left: 20%;
  }


  .ayan-tool-5 {

    top: 48%;

    left: -1%;
  }


  .ayan-tool-6 {

    top: 15%;

    left: 3%;
  }


  /* Tool info */

  .ayan-tool-info {

    right: 50%;

    bottom: 19%;

    transform: translateX(50%);

    width: 150px;

    padding: 10px 11px;

    text-align: center;

    border-left: 0;

    border-top: 2px solid var(--ayan-orange);
  }


  .ayan-tool-info-label {

    font-size: 5.5px;
  }


  .ayan-tool-info-title {

    font-size: 10px;
  }


  .ayan-tool-info-text {

    font-size: 6.5px;

    line-height: 1.45;
  }


  /* Bottom */

  .ayan-why-bottom {

    margin-top: 55px;
  }


  .ayan-why-bottom-content {

    font-size: 7px;
  }


  .ayan-why-bottom-content b {

    margin: 0 3px;
  }


  .ayan-why-bottom p {

    font-size: 7.5px;
  }
}


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

@media (max-width: 420px) {

  .ayan-why-section {

    padding: 60px 10px;
  }


  .ayan-why-header h2 {

    font-size: 28px;
  }


  .ayan-why-header p {

    font-size: 10px;
  }


  .ayan-why-content h3 {

    font-size: 25px;
  }


  .ayan-why-description {

    font-size: 9px;
  }


  .ayan-why-visual {

    width: 100%;

    max-width: 350px;
  }


  .ayan-tool {

    min-width: 65px;

    min-height: 39px;

    padding: 6px;
  }


  .ayan-tool-symbol {

    width: 20px;
    height: 20px;

    flex-basis: 20px;
  }


  .ayan-tool-name {

    font-size: 6px;
  }


  .ayan-tool-info {

    width: 135px;

    bottom: 18%;
  }
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

.ayan-why-benefit:focus-visible,
.ayan-tool:focus-visible {

  outline: 2px solid var(--ayan-teal);

  outline-offset: 3px;
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .ayan-orbit-glow,
  .ayan-person-glow,
  .ayan-tool {

    animation: none !important;
  }


  .ayan-tool,
  .ayan-why-benefit {

    transition: none !important;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-e1d29f8 *//* =========================================================
   AYAN — LEARNING FORMAT SECTION
   3 MONTH REGULAR / 6 MONTH WEEKEND
   ========================================================= */

.ayan-format-section {

  --ayan-orange: #ff9d00;
  --ayan-orange-light: #ffad1f;

  --ayan-teal: #16b8aa;

  --ayan-white: #f7f8fa;
  --ayan-muted: #8e98a8;
  --ayan-dark-muted: #687384;

  --ayan-card: #11151b;
  --ayan-card-soft: #0f1319;

  --ayan-border: #252b34;

  width: 100%;

  padding: 105px 20px;

  background: transparent;

  overflow: hidden;
}


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

.ayan-format-container {

  width: min(1120px, 100%);

  margin: 0 auto;
}


/* =========================================================
   HEADER
   ========================================================= */

.ayan-format-header {

  max-width: 780px;

  margin: 0 auto 55px;

  text-align: center;
}


.ayan-format-label {

  display: inline-flex;

  align-items: center;

  gap: 9px;

  padding: 7px 13px;

  margin-bottom: 20px;

  border: 1px solid rgba(22,184,170,.42);

  border-radius: 999px;

  color: var(--ayan-teal);

  font-family: "Manrope", sans-serif;

  font-size: 9px;

  font-weight: 800;

  letter-spacing: 1.4px;
}


.ayan-format-label span {

  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: var(--ayan-teal);

  box-shadow:
    0 0 0 4px rgba(22,184,170,.07);
}


.ayan-format-header h2 {

  margin: 0;

  color: var(--ayan-white);

  font-family: "Manrope", sans-serif;

  font-size: clamp(38px, 5vw, 62px);

  line-height: 1.04;

  font-weight: 700;

  letter-spacing: -2.5px;
}


.ayan-format-header h2 span {

  display: block;

  background:
    linear-gradient(
      90deg,
      var(--ayan-orange),
      #d9bd38 45%,
      var(--ayan-teal)
    );

  -webkit-background-clip: text;

  background-clip: text;

  -webkit-text-fill-color: transparent;
}


.ayan-format-header p {

  max-width: 690px;

  margin: 20px auto 0;

  color: var(--ayan-muted);

  font-family: "Inter", sans-serif;

  font-size: 12px;

  line-height: 1.75;
}


/* =========================================================
   PROGRAM SWITCH
   ========================================================= */

.ayan-format-switch-wrap {

  display: flex;

  justify-content: center;

  margin-bottom: 25px;
}


.ayan-format-switch {

  position: relative;

  width: min(580px, 100%);

  display: grid;

  grid-template-columns: 1fr 1fr;

  padding: 5px;

  border: 1px solid var(--ayan-border);

  border-radius: 13px;

  background: #0c1015;

  box-shadow:
    0 15px 45px rgba(0,0,0,.12);
}


.ayan-format-switch-btn {

  position: relative;

  z-index: 3;

  min-height: 67px;

  display: flex;

  align-items: center;

  gap: 11px;

  padding: 9px 16px;

  border: 1px solid transparent;

  border-radius: 9px;

  background: transparent;

  color: #6f7a89;

  cursor: pointer;

  text-align: left;

  font-family: inherit;

  transition:
    color .3s ease,
    border-color .3s ease;
}


.ayan-format-switch-btn:hover {

  color: var(--ayan-white);
}


.ayan-format-switch-btn.is-active {

  color: var(--ayan-white);

  border-color: rgba(255,255,255,.07);
}


.ayan-format-switch-number {

  color: #586373;

  font-family: "Manrope", sans-serif;

  font-size: 8px;

  font-weight: 800;
}


.ayan-format-switch-btn.is-active
.ayan-format-switch-number {

  color: var(--ayan-orange);
}


.ayan-format-switch-content {

  display: flex;

  flex-direction: column;

  gap: 4px;
}


.ayan-format-switch-content strong {

  font-family: "Manrope", sans-serif;

  font-size: 11px;

  font-weight: 800;
}


.ayan-format-switch-content small {

  color: #697484;

  font-family: "Inter", sans-serif;

  font-size: 7px;

  letter-spacing: .4px;
}


.ayan-format-slider {

  position: absolute;

  z-index: 1;

  top: 5px;

  left: 5px;

  width: calc(50% - 5px);

  height: calc(100% - 10px);

  border-radius: 9px;

  background:
    linear-gradient(
      100deg,
      rgba(255,157,0,.08),
      rgba(22,184,170,.055)
    );

  border: 1px solid rgba(255,157,0,.25);

  transition:
    transform .4s cubic-bezier(.22,.61,.36,1);
}


.ayan-format-switch.weekend-active
.ayan-format-slider {

  transform: translateX(100%);
}


/* =========================================================
   MAIN DISPLAY
   ========================================================= */

.ayan-format-display {

  display: grid;

  grid-template-columns: 47% 53%;

  min-height: 440px;

  border: 1px solid var(--ayan-border);

  border-radius: 18px;

  background:
    linear-gradient(
      120deg,
      rgba(17,21,27,.82),
      rgba(15,19,25,.55)
    );

  overflow: hidden;
}


/* =========================================================
   MAIN PROGRAM PANEL
   ========================================================= */

.ayan-format-main {

  position: relative;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  padding: 45px 45px 38px;

  border-right: 1px solid var(--ayan-border);

  background:
    radial-gradient(
      circle at 10% 90%,
      rgba(255,157,0,.055),
      transparent 38%
    );

  transition:
    opacity .25s ease,
    transform .25s ease;
}


.ayan-format-main.is-changing {

  opacity: .2;

  transform: translateY(7px);
}


.ayan-format-main-top {

  display: flex;

  align-items: flex-start;

  justify-content: space-between;
}


.ayan-format-status {

  display: inline-flex;

  padding: 6px 9px;

  border: 1px solid rgba(22,184,170,.32);

  border-radius: 5px;

  color: var(--ayan-teal);

  font-family: "Manrope", sans-serif;

  font-size: 7px;

  font-weight: 800;

  letter-spacing: 1px;
}


.ayan-format-duration {

  display: flex;

  align-items: baseline;

  gap: 8px;

  margin-top: 24px;
}


.ayan-format-duration strong {

  color: var(--ayan-white);

  font-family: "Manrope", sans-serif;

  font-size: 76px;

  line-height: .85;

  font-weight: 800;

  letter-spacing: -5px;
}


.ayan-format-duration span {

  color: var(--ayan-orange);

  font-family: "Manrope", sans-serif;

  font-size: 9px;

  font-weight: 800;

  letter-spacing: 1px;
}


.ayan-format-index {

  display: flex;

  align-items: baseline;

  gap: 3px;

  color: #586373;

  font-family: "Manrope", sans-serif;

  font-size: 8px;

  font-weight: 800;
}


.ayan-format-index span {

  color: var(--ayan-teal);

  font-size: 12px;
}


.ayan-format-main-content {

  margin-top: 30px;
}


.ayan-format-main-content h3 {

  margin: 0;

  color: var(--ayan-white);

  font-family: "Manrope", sans-serif;

  font-size: clamp(25px, 3vw, 37px);

  font-weight: 700;

  line-height: 1.1;

  letter-spacing: -1.2px;
}


.ayan-format-main-content p {

  max-width: 460px;

  margin: 13px 0 0;

  color: var(--ayan-muted);

  font-family: "Inter", sans-serif;

  font-size: 10.5px;

  line-height: 1.7;
}


/* =========================================================
   ACTIONS
   ========================================================= */

.ayan-format-actions {

  display: flex;

  align-items: center;

  gap: 8px;

  margin-top: 30px;
}


.ayan-format-enroll,
.ayan-format-whatsapp {

  min-height: 43px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 9px;

  padding: 0 15px;

  border-radius: 7px;

  font-family: "Manrope", sans-serif;

  font-size: 8px;

  font-weight: 800;

  letter-spacing: .5px;

  text-decoration: none;

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


.ayan-format-enroll {

  color: #080a0d;

  background: var(--ayan-orange);

  border: 1px solid var(--ayan-orange);
}


.ayan-format-enroll:hover {

  color: #080a0d;

  background: var(--ayan-orange-light);

  border-color: var(--ayan-orange-light);

  transform: translateY(-2px);

  box-shadow:
    0 10px 24px rgba(255,157,0,.16);
}


.ayan-format-whatsapp {

  color: var(--ayan-teal);

  background: rgba(22,184,170,.025);

  border: 1px solid rgba(22,184,170,.42);
}


.ayan-format-whatsapp:hover {

  color: var(--ayan-teal);

  background: rgba(22,184,170,.07);

  border-color: var(--ayan-teal);

  transform: translateY(-2px);

  box-shadow:
    0 10px 24px rgba(22,184,170,.09);
}


.ayan-format-actions b {

  font-size: 13px;

  font-weight: 500;

  transition:
    transform .2s ease;
}


.ayan-format-actions a:hover b {

  transform: translateX(3px);
}


/* =========================================================
   DETAILS
   ========================================================= */

.ayan-format-details {

  padding: 45px 45px 38px;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  background:
    radial-gradient(
      circle at 90% 5%,
      rgba(22,184,170,.045),
      transparent 38%
    );
}


.ayan-format-details-heading {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 15px;

  padding-bottom: 17px;

  border-bottom: 1px solid var(--ayan-border);
}


.ayan-format-details-heading > span {

  color: var(--ayan-white);

  font-family: "Manrope", sans-serif;

  font-size: 8px;

  font-weight: 800;

  letter-spacing: 1.2px;
}


.ayan-format-details-heading small {

  color: #687384;

  font-family: "Inter", sans-serif;

  font-size: 7px;

  letter-spacing: .5px;
}


/* =========================================================
   FEATURES
   ========================================================= */

.ayan-format-features {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 9px;

  margin: 25px 0;
}


.ayan-format-feature {

  min-height: 105px;

  display: flex;

  align-items: flex-start;

  gap: 11px;

  padding: 16px 13px;

  border: 1px solid #252c35;

  border-radius: 10px;

  background: rgba(255,255,255,.012);

  transition:
    border-color .22s ease,
    background .22s ease,
    transform .22s ease;
}


.ayan-format-feature:hover {

  border-color: rgba(22,184,170,.3);

  background: rgba(22,184,170,.025);

  transform: translateY(-2px);
}


.ayan-feature-check {

  width: 21px;
  height: 21px;

  flex: 0 0 21px;

  display: flex;

  align-items: center;

  justify-content: center;

  border: 1px solid rgba(255,157,0,.32);

  border-radius: 50%;

  color: var(--ayan-orange);

  font-size: 8px;

  font-weight: 800;
}


.ayan-format-feature > div {

  display: flex;

  flex-direction: column;

  gap: 6px;
}


.ayan-format-feature strong {

  color: var(--ayan-white);

  font-family: "Manrope", sans-serif;

  font-size: 9px;

  font-weight: 700;
}


.ayan-format-feature small {

  color: #6f7b8a;

  font-family: "Inter", sans-serif;

  font-size: 7.5px;

  line-height: 1.5;
}


/* =========================================================
   SCHEDULE
   ========================================================= */

.ayan-format-schedule {

  display: flex;

  align-items: center;

  gap: 14px;
}


.ayan-schedule-line {

  width: 55px;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      var(--ayan-orange),
      var(--ayan-teal)
    );
}


.ayan-schedule-copy {

  display: flex;

  flex-direction: column;

  gap: 4px;
}


.ayan-schedule-copy span {

  color: #5f6a79;

  font-family: "Manrope", sans-serif;

  font-size: 6px;

  font-weight: 800;

  letter-spacing: 1px;
}


.ayan-schedule-copy strong {

  color: var(--ayan-teal);

  font-family: "Manrope", sans-serif;

  font-size: 8px;

  font-weight: 800;

  letter-spacing: .5px;
}


/* =========================================================
   BOTTOM
   ========================================================= */

.ayan-format-bottom {

  margin-top: 30px;

  text-align: center;
}


.ayan-format-bottom-line {

  display: block;

  width: 100%;

  height: 1px;

  margin-bottom: 18px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,157,0,.3),
      rgba(22,184,170,.3),
      transparent
    );
}


.ayan-format-bottom p {

  margin: 0;

  color: #687384;

  font-family: "Inter", sans-serif;

  font-size: 9px;
}


.ayan-format-bottom a {

  color: var(--ayan-teal);

  text-decoration: none;

  font-weight: 700;

  transition: color .2s ease;
}


.ayan-format-bottom a:hover {

  color: var(--ayan-white);
}


/* =========================================================
   FOCUS
   ========================================================= */

.ayan-format-switch-btn:focus-visible,
.ayan-format-actions a:focus-visible,
.ayan-format-bottom a:focus-visible {

  outline: 2px solid var(--ayan-teal);

  outline-offset: 3px;
}


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

@media (max-width: 900px) {

  .ayan-format-display {

    grid-template-columns: 1fr 1fr;
  }


  .ayan-format-main,
  .ayan-format-details {

    padding: 35px 28px;
  }


  .ayan-format-duration strong {

    font-size: 65px;
  }


  .ayan-format-features {

    grid-template-columns: 1fr;
  }


  .ayan-format-feature {

    min-height: auto;
  }
}


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

@media (max-width: 767px) {

  .ayan-format-section {

    padding: 75px 14px;
  }


  .ayan-format-header {

    margin-bottom: 40px;
  }


  .ayan-format-label {

    padding: 6px 10px;

    font-size: 7px;

    letter-spacing: 1px;
  }


  .ayan-format-header h2 {

    font-size: 32px;

    line-height: 1.07;

    letter-spacing: -1.5px;
  }


  .ayan-format-header p {

    margin-top: 17px;

    font-size: 10px;

    line-height: 1.7;
  }


  /* Switch */

  .ayan-format-switch {

    width: 100%;

    padding: 4px;

    border-radius: 11px;
  }


  .ayan-format-switch-btn {

    min-height: 61px;

    padding: 8px 9px;

    gap: 7px;

    border-radius: 7px;
  }


  .ayan-format-switch-number {

    font-size: 7px;
  }


  .ayan-format-switch-content {

    gap: 3px;
  }


  .ayan-format-switch-content strong {

    font-size: 9px;
  }


  .ayan-format-switch-content small {

    font-size: 6px;
  }


  .ayan-format-slider {

    top: 4px;

    left: 4px;

    width: calc(50% - 4px);

    height: calc(100% - 8px);

    border-radius: 7px;
  }


  /* Main display */

  .ayan-format-display {

    display: block;

    min-height: 0;

    border-radius: 14px;
  }


  .ayan-format-main {

    min-height: 370px;

    padding: 28px 20px 24px;

    border-right: 0;

    border-bottom: 1px solid var(--ayan-border);
  }


  .ayan-format-status {

    padding: 5px 7px;

    font-size: 6px;
  }


  .ayan-format-duration {

    margin-top: 22px;

    gap: 6px;
  }


  .ayan-format-duration strong {

    font-size: 60px;

    letter-spacing: -4px;
  }


  .ayan-format-duration span {

    font-size: 7px;
  }


  .ayan-format-index {

    font-size: 7px;
  }


  .ayan-format-index span {

    font-size: 10px;
  }


  .ayan-format-main-content {

    margin-top: 25px;
  }


  .ayan-format-main-content h3 {

    font-size: 25px;

    letter-spacing: -1px;
  }


  .ayan-format-main-content p {

    margin-top: 10px;

    font-size: 9px;

    line-height: 1.65;
  }


  /* Actions */

  .ayan-format-actions {

    width: 100%;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 7px;

    margin-top: 22px;
  }


  .ayan-format-enroll,
  .ayan-format-whatsapp {

    min-height: 42px;

    width: 100%;

    padding: 0 7px;

    font-size: 7px;
  }


  /* Details */

  .ayan-format-details {

    min-height: 360px;

    padding: 27px 20px 25px;
  }


  .ayan-format-details-heading {

    padding-bottom: 13px;
  }


  .ayan-format-details-heading > span {

    font-size: 7px;
  }


  .ayan-format-details-heading small {

    font-size: 5.5px;
  }


  .ayan-format-features {

    gap: 7px;

    margin: 20px 0;
  }


  .ayan-format-feature {

    min-height: 68px;

    padding: 11px;

    gap: 9px;
  }


  .ayan-feature-check {

    width: 19px;
    height: 19px;

    flex-basis: 19px;

    font-size: 7px;
  }


  .ayan-format-feature strong {

    font-size: 8px;
  }


  .ayan-format-feature small {

    font-size: 6.5px;

    line-height: 1.45;
  }


  .ayan-format-schedule {

    gap: 10px;
  }


  .ayan-schedule-line {

    width: 40px;
  }


  .ayan-schedule-copy span {

    font-size: 5px;
  }


  .ayan-schedule-copy strong {

    font-size: 6.5px;
  }


  /* Bottom */

  .ayan-format-bottom {

    margin-top: 24px;
  }


  .ayan-format-bottom p {

    font-size: 7.5px;

    line-height: 1.5;
  }

}


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

@media (max-width: 380px) {

  .ayan-format-section {

    padding: 60px 10px;
  }


  .ayan-format-header h2 {

    font-size: 28px;
  }


  .ayan-format-switch-content strong {

    font-size: 8px;
  }


  .ayan-format-switch-content small {

    font-size: 5.5px;
  }


  .ayan-format-main {

    min-height: 365px;

    padding-left: 16px;

    padding-right: 16px;
  }


  .ayan-format-details {

    padding-left: 16px;

    padding-right: 16px;
  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .ayan-format-switch-slider,
  .ayan-format-slider,
  .ayan-format-main,
  .ayan-format-enroll,
  .ayan-format-whatsapp,
  .ayan-format-feature {

    transition: none !important;
  }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-a5260eb *//* =========================================================
   AYAN DIGITAL MARKETING
   SECTION 9 — PRACTICAL LEARNING JOURNEY
   COMPLETE CSS
   ========================================================= */

.ayan-practical-section {

  --ayan-orange: #ff9d00;
  --ayan-orange-soft: #ffb42b;
  --ayan-teal: #16b8aa;

  --ayan-white: #f6f7f9;
  --ayan-text: #a2adbc;
  --ayan-muted: #687384;

  --ayan-card: #10141a;
  --ayan-card-2: #0d1116;

  --ayan-border: #252c35;

  width: 100%;
  padding: 110px 20px;

  background: transparent;

  overflow: hidden;
}


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

.ayan-practical-container {

  width: min(1120px, 100%);

  margin: 0 auto;
}


/* =========================================================
   HEADER
   ========================================================= */

.ayan-practical-header {

  width: 100%;
  max-width: 800px;

  margin: 0 auto 58px;

  text-align: center;
}


.ayan-practical-eyebrow {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  padding: 7px 13px;

  margin-bottom: 20px;

  border: 1px solid rgba(22,184,170,.4);

  border-radius: 999px;

  color: var(--ayan-teal);

  font-family: "Manrope", sans-serif;

  font-size: 8px;

  font-weight: 800;

  letter-spacing: 1.2px;

  line-height: 1;
}


.ayan-practical-eyebrow span {

  width: 6px;
  height: 6px;

  flex: 0 0 6px;

  border-radius: 50%;

  background: var(--ayan-teal);

  box-shadow:
    0 0 0 4px rgba(22,184,170,.07);
}


.ayan-practical-header h2 {

  width: 100%;

  margin: 0;

  color: var(--ayan-white);

  font-family: "Manrope", sans-serif;

  font-size: clamp(40px, 5vw, 64px);

  line-height: 1.03;

  font-weight: 700;

  letter-spacing: -2.7px;
}


.ayan-practical-header h2 span {

  display: block;

  background:
    linear-gradient(
      90deg,
      var(--ayan-orange),
      #d4c23b 45%,
      var(--ayan-teal)
    );

  -webkit-background-clip: text;

  background-clip: text;

  -webkit-text-fill-color: transparent;
}


.ayan-practical-header p {

  width: 100%;
  max-width: 690px;

  margin: 21px auto 0;

  color: var(--ayan-text);

  font-family: "Inter", sans-serif;

  font-size: 11px;

  line-height: 1.75;
}


/* =========================================================
   MAIN JOURNEY CARD
   ========================================================= */

.ayan-practical-journey {

  width: 100%;

  display: grid;

  grid-template-columns: 42% 58%;

  min-height: 500px;

  border: 1px solid var(--ayan-border);

  border-radius: 18px;

  background:
    linear-gradient(
      125deg,
      rgba(16,20,26,.82),
      rgba(11,15,20,.62)
    );

  overflow: hidden;
}


/* =========================================================
   LEFT STEP NAVIGATION
   ========================================================= */

.ayan-practical-steps {

  display: flex;

  flex-direction: column;

  justify-content: center;

  gap: 7px;

  padding: 32px;

  border-right: 1px solid var(--ayan-border);

  background:
    radial-gradient(
      circle at 0% 50%,
      rgba(255,157,0,.035),
      transparent 55%
    );
}


.ayan-practical-step {

  position: relative;

  width: 100%;

  min-height: 72px;

  display: grid;

  grid-template-columns: 38px minmax(0,1fr) 18px;

  align-items: center;

  gap: 12px;

  padding: 10px 13px;

  border: 1px solid transparent;

  border-radius: 10px;

  background: transparent;

  color: var(--ayan-text);

  cursor: pointer;

  text-align: left;

  font-family: inherit;

  appearance: none;

  transition:
    background .25s ease,
    border-color .25s ease,
    transform .25s ease,
    color .25s ease;
}


.ayan-practical-step:hover {

  border-color: #242b34;

  background: rgba(255,255,255,.018);

  transform: translateX(3px);
}


.ayan-practical-step.is-active {

  border-color: rgba(255,157,0,.35);

  background:
    linear-gradient(
      100deg,
      rgba(255,157,0,.065),
      rgba(22,184,170,.025)
    );
}


.ayan-step-number {

  width: 32px;
  height: 32px;

  display: flex;

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

  border: 1px solid #343b45;

  border-radius: 7px;

  color: #657181;

  font-family: "Manrope", sans-serif;

  font-size: 8px;

  font-weight: 800;

  line-height: 1;
}


.ayan-practical-step.is-active
.ayan-step-number {

  color: var(--ayan-orange);

  border-color: rgba(255,157,0,.55);

  background: rgba(255,157,0,.035);
}


.ayan-step-copy {

  min-width: 0;

  display: flex;

  flex-direction: column;

  gap: 5px;
}


.ayan-step-copy strong {

  color: var(--ayan-white);

  font-family: "Manrope", sans-serif;

  font-size: 11px;

  font-weight: 700;

  line-height: 1.2;
}


.ayan-step-copy small {

  color: var(--ayan-muted);

  font-family: "Inter", sans-serif;

  font-size: 7.5px;

  line-height: 1.4;
}


.ayan-step-arrow {

  color: #566170;

  font-size: 12px;

  line-height: 1;

  transition:
    color .25s ease,
    transform .25s ease;
}


.ayan-practical-step.is-active
.ayan-step-arrow {

  color: var(--ayan-teal);

  transform: translateX(2px);
}


/* =========================================================
   RIGHT RESULT PANEL
   ========================================================= */

.ayan-practical-result {

  position: relative;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  min-width: 0;

  padding: 40px 43px;

  background:
    radial-gradient(
      circle at 85% 15%,
      rgba(22,184,170,.055),
      transparent 35%
    );

  overflow: hidden;

  transition:
    opacity .18s ease,
    transform .18s ease;
}


.ayan-result-glow {

  position: absolute;

  width: 260px;
  height: 260px;

  right: -110px;
  top: -120px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(22,184,170,.08),
      transparent 65%
    );

  pointer-events: none;
}


/* =========================================================
   RESULT TOP
   ========================================================= */

.ayan-result-top {

  position: relative;

  width: 100%;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 15px;

  padding-bottom: 17px;

  border-bottom: 1px solid var(--ayan-border);
}


.ayan-result-label {

  color: var(--ayan-white);

  font-family: "Manrope", sans-serif;

  font-size: 8px;

  font-weight: 800;

  letter-spacing: 1.2px;

  line-height: 1.2;
}


.ayan-result-count {

  color: #596574;

  font-family: "Manrope", sans-serif;

  font-size: 7px;

  white-space: nowrap;
}


.ayan-result-count b {

  color: var(--ayan-teal);

  font-size: 12px;
}


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

.ayan-result-icon {

  width: 62px;
  height: 62px;

  display: flex;

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

  margin-top: 32px;

  border: 1px solid rgba(255,157,0,.35);

  border-radius: 14px;

  color: var(--ayan-orange);

  font-size: 22px;

  line-height: 1;

  background:
    linear-gradient(
      145deg,
      rgba(255,157,0,.07),
      rgba(22,184,170,.035)
    );

  box-shadow:
    0 0 35px rgba(255,157,0,.04);

  transition:
    transform .35s ease,
    border-color .35s ease;
}


.ayan-practical-result:hover
.ayan-result-icon {

  transform: rotate(8deg) scale(1.04);

  border-color: rgba(22,184,170,.45);
}


/* =========================================================
   RESULT CONTENT
   ========================================================= */

.ayan-result-content {

  width: 100%;

  margin-top: 25px;
}


.ayan-result-kicker {

  color: var(--ayan-teal);

  font-family: "Manrope", sans-serif;

  font-size: 7px;

  font-weight: 800;

  letter-spacing: 1.1px;

  line-height: 1.2;
}


.ayan-result-content h3 {

  margin: 9px 0 0;

  color: var(--ayan-white);

  font-family: "Manrope", sans-serif;

  font-size: clamp(25px, 3vw, 36px);

  line-height: 1.1;

  font-weight: 700;

  letter-spacing: -1.3px;
}


.ayan-result-content p {

  width: 100%;

  max-width: 530px;

  margin: 12px 0 0;

  color: var(--ayan-text);

  font-family: "Inter", sans-serif;

  font-size: 10px;

  line-height: 1.7;
}


/* =========================================================
   RESULT ITEMS
   ========================================================= */

.ayan-result-items {

  width: 100%;

  display: grid;

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

  gap: 8px;

  margin-top: 28px;
}


.ayan-result-item {

  min-width: 0;

  min-height: 60px;

  display: flex;

  align-items: flex-start;

  gap: 8px;

  padding: 12px;

  border: 1px solid #252c35;

  border-radius: 8px;

  background: rgba(255,255,255,.012);

  transition:
    border-color .22s ease,
    background .22s ease,
    transform .22s ease;
}


.ayan-result-item:hover {

  border-color: rgba(22,184,170,.28);

  background: rgba(22,184,170,.018);

  transform: translateY(-2px);
}


.ayan-result-item span {

  flex: 0 0 auto;

  color: var(--ayan-orange);

  font-size: 9px;

  font-weight: 800;

  line-height: 1.2;
}


.ayan-result-item strong {

  min-width: 0;

  color: #aab4c1;

  font-family: "Manrope", sans-serif;

  font-size: 7.5px;

  line-height: 1.45;

  font-weight: 700;
}


/* =========================================================
   RESULT BOTTOM
   ========================================================= */

.ayan-result-bottom {

  width: 100%;

  display: flex;

  align-items: center;

  gap: 13px;

  margin-top: 32px;
}


.ayan-result-progress {

  position: relative;

  width: 100px;
  height: 2px;

  flex: 0 0 100px;

  background: #28303a;

  overflow: hidden;
}


.ayan-result-progress i {

  display: block;

  width: 20%;

  height: 100%;

  background:
    linear-gradient(
      90deg,
      var(--ayan-orange),
      var(--ayan-teal)
    );

  transition:
    width .45s ease;
}


.ayan-result-bottom > span:last-child {

  color: #657181;

  font-family: "Manrope", sans-serif;

  font-size: 6.5px;

  font-weight: 800;

  letter-spacing: .8px;

  line-height: 1.3;
}


/* =========================================================
   TOOL STRIP
   ========================================================= */

.ayan-practical-tools {

  width: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-wrap: wrap;

  gap: 18px;

  margin-top: 28px;

  padding-top: 23px;

  border-top: 1px solid rgba(255,255,255,.06);
}


.ayan-practical-tools > span {

  color: #566170;

  font-family: "Manrope", sans-serif;

  font-size: 6px;

  font-weight: 800;

  letter-spacing: 1px;
}


.ayan-tools-list {

  display: flex;

  align-items: center;

  justify-content: center;

  flex-wrap: wrap;

  gap: 9px;
}


.ayan-tools-list span {

  color: #748092;

  font-family: "Manrope", sans-serif;

  font-size: 7px;

  font-weight: 800;

  letter-spacing: .4px;
}


.ayan-tools-list i {

  color: var(--ayan-teal);

  font-style: normal;

  font-size: 7px;
}


/* =========================================================
   FOCUS / ACCESSIBILITY
   ========================================================= */

.ayan-practical-step:focus-visible {

  outline: 2px solid var(--ayan-teal);

  outline-offset: 3px;
}


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

@media (max-width: 1000px) {

  .ayan-practical-journey {

    grid-template-columns: 1fr;
  }


  .ayan-practical-steps {

    display: grid;

    grid-template-columns:
      repeat(5, minmax(0,1fr));

    gap: 6px;

    padding: 15px;

    border-right: 0;

    border-bottom: 1px solid var(--ayan-border);
  }


  .ayan-practical-step {

    min-height: 82px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: 6px;

    text-align: center;
  }


  .ayan-step-copy {

    align-items: center;

    text-align: center;
  }


  .ayan-step-arrow {

    display: none;
  }


  .ayan-practical-result {

    min-height: 430px;
  }

}


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

@media (max-width: 767px) {

  .ayan-practical-section {

    width: 100%;

    padding: 75px 14px;

    overflow: hidden;
  }


  .ayan-practical-container {

    width: 100%;

    max-width: 100%;
  }


  /* -------------------------------------------------------
     HEADER
     ------------------------------------------------------- */

  .ayan-practical-header {

    width: 100%;

    margin: 0 auto 38px;

    text-align: center;
  }


  .ayan-practical-eyebrow {

    display: inline-flex;

    max-width: 100%;

    padding: 6px 10px;

    margin-bottom: 17px;

    font-size: 6.5px;

    letter-spacing: .9px;

    white-space: nowrap;
  }


  .ayan-practical-header h2 {

    width: 100%;

    margin: 0;

    font-size: 32px;

    line-height: 1.06;

    letter-spacing: -1.5px;
  }


  .ayan-practical-header h2 span {

    display: block;
  }


  .ayan-practical-header p {

    width: 100%;

    max-width: 330px;

    margin: 16px auto 0;

    font-size: 9px;

    line-height: 1.7;
  }


  /* -------------------------------------------------------
     JOURNEY CARD
     ------------------------------------------------------- */

  .ayan-practical-journey {

    width: 100%;

    display: flex;

    flex-direction: column;

    min-height: 0;

    border-radius: 14px;

    overflow: hidden;
  }


  /* -------------------------------------------------------
     MOBILE STEP GRID

     01 02 03
     04    05

     NO HORIZONTAL SCROLL
     ------------------------------------------------------- */

  .ayan-practical-steps {

    width: 100%;

    display: grid;

    grid-template-columns:
      repeat(6, minmax(0,1fr));

    gap: 5px;

    padding: 8px;

    border-right: 0;

    border-bottom: 1px solid var(--ayan-border);

    overflow: visible;

    background:
      linear-gradient(
        180deg,
        rgba(255,255,255,.012),
        rgba(255,255,255,0)
      );
  }


  /* -------------------------------------------------------
     FIRST THREE ITEMS
     ------------------------------------------------------- */

  .ayan-practical-step:nth-child(1),
  .ayan-practical-step:nth-child(2),
  .ayan-practical-step:nth-child(3) {

    grid-column: span 2;
  }


  /* -------------------------------------------------------
     LAST TWO ITEMS
     ------------------------------------------------------- */

  .ayan-practical-step:nth-child(4),
  .ayan-practical-step:nth-child(5) {

    grid-column: span 3;
  }


  .ayan-practical-step {

    width: 100%;

    min-width: 0;

    min-height: 76px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 5px;

    padding: 8px 4px;

    border: 1px solid transparent;

    border-radius: 8px;

    text-align: center;

    transform: none !important;

    overflow: hidden;
  }


  .ayan-practical-step:hover {

    transform: none !important;

    border-color: transparent;

    background: transparent;
  }


  .ayan-practical-step.is-active {

    border-color:
      rgba(255,157,0,.48);

    background:
      linear-gradient(
        145deg,
        rgba(255,157,0,.075),
        rgba(22,184,170,.025)
      );

    box-shadow:
      inset 0 0 0 1px
      rgba(255,157,0,.025);
  }


  /* -------------------------------------------------------
     NUMBER
     ------------------------------------------------------- */

  .ayan-step-number {

    width: 25px;

    height: 25px;

    min-width: 25px;

    flex: 0 0 25px;

    border-radius: 6px;

    font-size: 6.5px;

    line-height: 1;
  }


  .ayan-practical-step.is-active
  .ayan-step-number {

    color: var(--ayan-orange);

    border-color:
      rgba(255,157,0,.65);

    background:
      rgba(255,157,0,.035);
  }


  /* -------------------------------------------------------
     STEP TEXT
     ------------------------------------------------------- */

  .ayan-step-copy {

    width: 100%;

    min-width: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 3px;

    text-align: center;

    overflow: hidden;
  }


  .ayan-step-copy strong {

    display: block;

    width: 100%;

    color: var(--ayan-white);

    font-size: 8px;

    line-height: 1.15;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
  }


  .ayan-step-copy small {

    display: block;

    width: 100%;

    color: var(--ayan-muted);

    font-size: 5.5px;

    line-height: 1.25;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
  }


  /* -------------------------------------------------------
     ARROW
     ------------------------------------------------------- */

  .ayan-step-arrow {

    display: none;
  }


  /* -------------------------------------------------------
     RESULT PANEL
     ------------------------------------------------------- */

  .ayan-practical-result {

    width: 100%;

    min-width: 0;

    min-height: 420px;

    padding: 25px 19px;

    border: 0;

    background:
      radial-gradient(
        circle at 85% 10%,
        rgba(22,184,170,.045),
        transparent 38%
      );

    transform: translateY(0);
  }


  /* -------------------------------------------------------
     RESULT TOP
     ------------------------------------------------------- */

  .ayan-result-top {

    width: 100%;

    padding-bottom: 13px;
  }


  .ayan-result-label {

    font-size: 6.5px;

    letter-spacing: .8px;
  }


  .ayan-result-count {

    font-size: 6px;
  }


  .ayan-result-count b {

    font-size: 10px;
  }


  /* -------------------------------------------------------
     ICON
     ------------------------------------------------------- */

  .ayan-result-icon {

    width: 48px;

    height: 48px;

    margin-top: 25px;

    border-radius: 11px;

    font-size: 18px;
  }


  /* -------------------------------------------------------
     RESULT CONTENT
     ------------------------------------------------------- */

  .ayan-result-content {

    width: 100%;

    margin-top: 20px;
  }


  .ayan-result-kicker {

    font-size: 6px;

    letter-spacing: .8px;
  }


  .ayan-result-content h3 {

    width: 100%;

    margin-top: 7px;

    font-size: 25px;

    line-height: 1.1;

    letter-spacing: -1px;
  }


  .ayan-result-content p {

    width: 100%;

    max-width: 100%;

    margin-top: 9px;

    font-size: 8px;

    line-height: 1.65;
  }


  /* -------------------------------------------------------
     RESULT ITEMS
     ------------------------------------------------------- */

  .ayan-result-items {

    width: 100%;

    display: grid;

    grid-template-columns: 1fr;

    gap: 6px;

    margin-top: 20px;
  }


  .ayan-result-item {

    width: 100%;

    min-width: 0;

    min-height: 48px;

    display: flex;

    align-items: center;

    padding: 9px;

    border-radius: 7px;
  }


  .ayan-result-item:hover {

    transform: none;
  }


  .ayan-result-item span {

    flex: 0 0 auto;

    font-size: 8px;
  }


  .ayan-result-item strong {

    min-width: 0;

    font-size: 6.5px;

    line-height: 1.4;
  }


  /* -------------------------------------------------------
     RESULT BOTTOM
     ------------------------------------------------------- */

  .ayan-result-bottom {

    width: 100%;

    display: flex;

    align-items: center;

    gap: 9px;

    margin-top: 20px;
  }


  .ayan-result-progress {

    width: 65px;

    flex: 0 0 65px;

    height: 2px;
  }


  .ayan-result-bottom > span:last-child {

    min-width: 0;

    font-size: 5.5px;

    line-height: 1.3;

    white-space: nowrap;
  }


  /* -------------------------------------------------------
     TOOL STRIP
     ------------------------------------------------------- */

  .ayan-practical-tools {

    width: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 9px;

    margin-top: 22px;

    padding-top: 18px;
  }


  .ayan-practical-tools > span {

    text-align: center;

    font-size: 5.5px;

    letter-spacing: .8px;
  }


  .ayan-tools-list {

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 6px;
  }


  .ayan-tools-list span {

    font-size: 6px;
  }


  .ayan-tools-list i {

    font-size: 5px;
  }


  /* -------------------------------------------------------
     ACCESSIBILITY
     ------------------------------------------------------- */

  .ayan-practical-step:focus-visible {

    outline: 2px solid var(--ayan-teal);

    outline-offset: 2px;
  }

}


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

@media (max-width: 380px) {

  .ayan-practical-section {

    padding: 60px 10px;
  }


  .ayan-practical-header {

    margin-bottom: 32px;
  }


  .ayan-practical-header h2 {

    font-size: 28px;

    letter-spacing: -1.2px;
  }


  .ayan-practical-header p {

    max-width: 300px;

    font-size: 8px;
  }


  .ayan-practical-steps {

    gap: 4px;

    padding: 7px;
  }


  .ayan-practical-step {

    min-height: 72px;

    padding: 7px 3px;
  }


  .ayan-step-number {

    width: 23px;

    height: 23px;

    min-width: 23px;

    flex-basis: 23px;

    font-size: 6px;
  }


  .ayan-step-copy strong {

    font-size: 7px;
  }


  .ayan-step-copy small {

    font-size: 5px;
  }


  .ayan-practical-result {

    min-height: 400px;

    padding: 23px 16px;
  }


  .ayan-result-icon {

    width: 44px;

    height: 44px;

    font-size: 16px;
  }


  .ayan-result-content h3 {

    font-size: 23px;
  }


  .ayan-result-content p {

    font-size: 7.5px;
  }


  .ayan-result-item {

    min-height: 45px;

    padding: 8px;
  }


  .ayan-result-item strong {

    font-size: 6px;
  }


  .ayan-result-bottom {

    gap: 7px;
  }


  .ayan-result-progress {

    width: 55px;

    flex-basis: 55px;
  }


  .ayan-result-bottom > span:last-child {

    font-size: 5px;
  }


  .ayan-tools-list {

    gap: 5px;
  }


  .ayan-tools-list span {

    font-size: 5.5px;
  }

}


/* =========================================================
   VERY SMALL DEVICES
   ========================================================= */

@media (max-width: 330px) {

  .ayan-practical-section {

    padding-left: 8px;

    padding-right: 8px;
  }


  .ayan-practical-header h2 {

    font-size: 26px;
  }


  .ayan-practical-step {

    min-height: 68px;
  }


  .ayan-step-copy strong {

    font-size: 6.5px;
  }


  .ayan-step-copy small {

    font-size: 4.7px;
  }


  .ayan-result-content h3 {

    font-size: 21px;
  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .ayan-practical-step,
  .ayan-step-arrow,
  .ayan-result-icon,
  .ayan-result-progress i,
  .ayan-practical-result,
  .ayan-result-item {

    transition: none !important;
  }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-586bd67 *//* =========================================
   AYAN DIGITAL MARKETING
   UPCOMING BATCH SECTION
   ========================================= */

.ayan-batch-section {
  position: relative;
  width: 100%;
  padding: 95px 20px;
  background:
    radial-gradient(
      circle at 12% 45%,
      rgba(255, 166, 0, 0.08),
      transparent 32%
    ),
    radial-gradient(
      circle at 88% 55%,
      rgba(0, 210, 190, 0.07),
      transparent 32%
    ),
    #05070a;
  overflow: hidden;
}


/* Subtle background line */
.ayan-batch-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 70%;
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 174, 0, 0.35),
    rgba(0, 210, 190, 0.35),
    transparent
  );
}


/* Container */
.ayan-batch-container {
  position: relative;
  z-index: 2;
  max-width: 1080px;
  margin: 0 auto;
}


/* =========================================
   HEADER
   ========================================= */

.ayan-batch-header {
  max-width: 720px;
  margin: 0 auto 48px;
  text-align: center;
}


.ayan-batch-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 7px 13px;

  border: 1px solid rgba(0, 210, 190, 0.28);
  border-radius: 999px;

  background: rgba(0, 210, 190, 0.05);

  color: #35d9cb;

  font-family: Inter, Manrope, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.7px;
  line-height: 1;
}


.ayan-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22d3a6;

  box-shadow:
    0 0 0 4px rgba(34, 211, 166, 0.08);

  animation: ayanLivePulse 1.8s infinite;
}


@keyframes ayanLivePulse {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.45;
    transform: scale(0.72);
  }
}


.ayan-batch-header h2 {
  margin: 20px 0 14px;

  color: #ffffff;

  font-family: Inter, Manrope, sans-serif;
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -1.5px;
}


.ayan-batch-header h2 span {
  display: block;

  background: linear-gradient(
    90deg,
    #ffb000 0%,
    #ffd34d 35%,
    #25d9c9 100%
  );

  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}


.ayan-batch-header p {
  max-width: 650px;
  margin: 0 auto;

  color: #929aa6;

  font-family: Inter, Manrope, sans-serif;
  font-size: 14px;
  line-height: 1.75;
}


/* =========================================
   BATCH GRID
   ========================================= */

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


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

.ayan-batch-card {
  position: relative;

  padding: 28px;

  background:
    linear-gradient(
      145deg,
      rgba(17, 22, 28, 0.96),
      rgba(8, 12, 16, 0.96)
    );

  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;

  box-shadow:
    0 18px 45px rgba(0, 0, 0, 0.25);

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


.ayan-batch-card:hover {
  transform: translateY(-4px);

  border-color: rgba(0, 210, 190, 0.28);

  box-shadow:
    0 22px 55px rgba(0, 0, 0, 0.35);
}


/* Featured card */
.ayan-batch-featured {
  border-color: rgba(255, 174, 0, 0.26);
}


.ayan-batch-featured:hover {
  border-color: rgba(255, 174, 0, 0.48);
}


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

.ayan-batch-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  margin-bottom: 24px;
}


.ayan-program-label {
  display: block;

  margin-bottom: 8px;

  color: #35d9cb;

  font-family: Inter, Manrope, sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
}


.ayan-batch-featured .ayan-program-label {
  color: #ffb000;
}


.ayan-batch-card h3 {
  margin: 0;

  color: #ffffff;

  font-family: Inter, Manrope, sans-serif;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.1;
}


.ayan-program-subtitle {
  margin: 7px 0 0;

  color: #7f8995;

  font-family: Inter, Manrope, sans-serif;
  font-size: 12px;
  line-height: 1.5;
}


.ayan-batch-number {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 38px;
  height: 38px;

  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;

  color: #737c87;

  font-family: Inter, Manrope, sans-serif;
  font-size: 11px;
  font-weight: 700;
}


/* =========================================
   DATE BOX
   ========================================= */

.ayan-date-box {
  position: relative;

  margin-bottom: 24px;
  padding: 18px 19px;

  background:
    linear-gradient(
      135deg,
      rgba(255, 174, 0, 0.07),
      rgba(0, 210, 190, 0.04)
    );

  border: 1px solid rgba(255, 174, 0, 0.22);
  border-radius: 12px;
}


.ayan-batch-card:not(.ayan-batch-featured)
  .ayan-date-box {
  border-color: rgba(0, 210, 190, 0.20);
}


.ayan-date-label {
  display: block;

  margin-bottom: 7px;

  color: #858e9a;

  font-family: Inter, Manrope, sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
}


.ayan-batch-date {
  display: block;

  color: #ffb000;

  font-family: Inter, Manrope, sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;

  /*
   * FLASHING BATCH DATE
   */
  animation: ayanDateFlash 2.2s ease-in-out infinite;
}


.ayan-batch-card:not(.ayan-batch-featured)
  .ayan-batch-date {
  color: #35d9cb;
}


@keyframes ayanDateFlash {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.52;
  }

}


.ayan-date-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  margin-top: 9px;

  color: #8f9aa5;

  font-family: Inter, Manrope, sans-serif;
  font-size: 10px;
  font-weight: 600;
}


.ayan-status-dot {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: #27d39a;

  box-shadow:
    0 0 0 4px rgba(39, 211, 154, 0.08);
}


/* =========================================
   FEATURES
   ========================================= */

.ayan-batch-features {
  display: grid;
  gap: 11px;

  margin: 0;
  padding: 0;

  list-style: none;
}


.ayan-batch-features li {
  display: flex;
  align-items: center;
  gap: 10px;

  color: #b6bec8;

  font-family: Inter, Manrope, sans-serif;
  font-size: 12px;
  line-height: 1.45;
}


.ayan-batch-features li span {
  display: flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 auto;

  width: 18px;
  height: 18px;

  border-radius: 50%;

  background: rgba(35, 210, 170, 0.09);

  color: #35d9cb;

  font-size: 10px;
  font-weight: 700;
}


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

.ayan-batch-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;

  margin-top: 26px;
  padding-top: 20px;

  border-top: 1px solid rgba(255, 255, 255, 0.07);
}


.ayan-limited {
  display: flex;
  align-items: center;
  gap: 7px;

  color: #858e99;

  font-family: Inter, Manrope, sans-serif;
  font-size: 10px;
  font-weight: 600;
}


.ayan-pulse {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: #ffb000;

  animation: ayanSeatPulse 1.6s infinite;
}


@keyframes ayanSeatPulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.3;
  }

}


.ayan-batch-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  min-height: 42px;
  padding: 0 17px;

  border-radius: 8px;

  background: #ffad00;

  color: #090b0d !important;

  font-family: Inter, Manrope, sans-serif;
  font-size: 11px;
  font-weight: 700;

  text-decoration: none !important;

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


.ayan-batch-btn:hover {
  transform: translateY(-2px);

  background: #ffc33b;

  box-shadow:
    0 8px 25px rgba(255, 173, 0, 0.18);
}


.ayan-batch-btn span {
  font-size: 16px;
  line-height: 1;
}


/* =========================================
   BOTTOM NOTE
   ========================================= */

.ayan-batch-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  max-width: 620px;

  margin: 25px auto 0;
  padding: 14px 18px;

  background: rgba(255, 255, 255, 0.025);

  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
}


.ayan-note-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 auto;

  width: 25px;
  height: 25px;

  border-radius: 50%;

  background: rgba(255, 174, 0, 0.10);

  color: #ffb000;

  font-size: 12px;
  font-weight: 700;
}


.ayan-batch-note div:last-child {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}


.ayan-batch-note strong {
  color: #dce1e6;

  font-family: Inter, Manrope, sans-serif;
  font-size: 11px;
}


.ayan-batch-note span {
  color: #7f8995;

  font-family: Inter, Manrope, sans-serif;
  font-size: 10px;
}


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

@media (max-width: 800px) {

  .ayan-batch-section {
    padding: 75px 18px;
  }

  .ayan-batch-header {
    margin-bottom: 35px;
  }

  .ayan-batch-grid {
    gap: 15px;
  }

  .ayan-batch-card {
    padding: 22px;
  }

  .ayan-batch-card h3 {
    font-size: 26px;
  }

  .ayan-batch-date {
    font-size: 19px;
  }

}


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

@media (max-width: 600px) {

  .ayan-batch-section {
    padding: 65px 14px;
  }


  .ayan-batch-container {
    width: 100%;
  }


  .ayan-batch-header {
    margin-bottom: 30px;
  }


  .ayan-batch-eyebrow {
    font-size: 9px;
    letter-spacing: 1.35px;
    padding: 7px 11px;
  }


  .ayan-batch-header h2 {
    margin-top: 17px;
    font-size: 30px;
    line-height: 1.12;
    letter-spacing: -0.8px;
  }


  .ayan-batch-header h2 span {
    display: inline;
  }


  .ayan-batch-header p {
    padding: 0 7px;

    font-size: 13px;
    line-height: 1.65;
  }


  /*
   * ONE COLUMN ON MOBILE
   */
  .ayan-batch-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }


  .ayan-batch-card {
    padding: 20px;

    border-radius: 14px;
  }


  .ayan-batch-card:hover {
    transform: none;
  }


  .ayan-batch-card-top {
    margin-bottom: 19px;
  }


  .ayan-program-label {
    font-size: 8px;
    letter-spacing: 1.25px;
  }


  .ayan-batch-card h3 {
    font-size: 25px;
  }


  .ayan-program-subtitle {
    font-size: 11px;
  }


  .ayan-batch-number {
    width: 34px;
    height: 34px;
    font-size: 10px;
  }


  .ayan-date-box {
    margin-bottom: 20px;
    padding: 15px 16px;
  }


  .ayan-date-label {
    font-size: 8px;
  }


  .ayan-batch-date {
    font-size: 19px;
  }


  .ayan-date-status {
    font-size: 9px;
  }


  .ayan-batch-features {
    gap: 9px;
  }


  .ayan-batch-features li {
    font-size: 11px;
  }


  .ayan-batch-features li span {
    width: 17px;
    height: 17px;
    font-size: 9px;
  }


  .ayan-batch-bottom {
    align-items: center;
    margin-top: 20px;
    padding-top: 17px;
  }


  .ayan-limited {
    font-size: 9px;
  }


  .ayan-batch-btn {
    min-height: 40px;
    padding: 0 13px;

    font-size: 10px;
  }


  .ayan-batch-note {
    align-items: flex-start;

    margin-top: 16px;
    padding: 13px;

    text-align: left;
  }


  .ayan-batch-note div:last-child {
    display: block;
  }


  .ayan-batch-note strong {
    display: block;
    margin-bottom: 3px;
    font-size: 10px;
  }


  .ayan-batch-note span {
    font-size: 9px;
    line-height: 1.5;
  }

}


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

@media (max-width: 380px) {

  .ayan-batch-section {
    padding-left: 11px;
    padding-right: 11px;
  }


  .ayan-batch-card {
    padding: 17px;
  }


  .ayan-batch-header h2 {
    font-size: 27px;
  }


  .ayan-batch-bottom {
    flex-direction: column;
    align-items: stretch;
  }


  .ayan-limited {
    justify-content: center;
  }


  .ayan-batch-btn {
    width: 100%;
  }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-bdfe3a4 *//* =========================================================
   AYAN DIGITAL MARKETING
   FAQ — FINAL FIXED VERSION
========================================================= */

.ayan-faq-section {
  position: relative;
  width: 100%;
  overflow: hidden;

  padding: 90px 20px 70px;

  background:
    radial-gradient(
      circle at 0% 35%,
      rgba(255, 174, 0, 0.045),
      transparent 28%
    ),
    radial-gradient(
      circle at 100% 40%,
      rgba(49, 216, 202, 0.04),
      transparent 28%
    ),
    #05070a;

  color: #fff;

  font-family:
    "Inter",
    "Manrope",
    Arial,
    sans-serif;

  box-sizing: border-box;
}


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

.ayan-faq-container {
  width: 100%;
  max-width: 1180px;

  margin: 0 auto;

  box-sizing: border-box;
}


/* =========================================================
   HEADER
========================================================= */

.ayan-faq-header {
  width: 100%;
  max-width: 850px;

  margin: 0 auto 55px;

  text-align: center;
}


.ayan-faq-label {
  display: inline-flex;

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

  gap: 8px;

  margin-bottom: 15px;
  padding: 6px 13px;

  border: 1px solid
    rgba(49, 216, 202, 0.38);

  border-radius: 50px;

  background: rgba(49, 216, 202, 0.025);

  color: #31d8ca;

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

  letter-spacing: 1.8px;
  text-transform: uppercase;
}


.ayan-faq-label span {
  width: 17px;
  height: 17px;

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

  border: 1px solid
    rgba(255, 174, 0, 0.65);

  border-radius: 50%;

  color: #ffae00;

  font-size: 10px;
}


.ayan-faq-header h2 {
  margin: 0;

  color: #fff !important;

  font-size:
    clamp(35px, 5vw, 58px);

  line-height: 1.08;

  font-weight: 750;

  letter-spacing: -2px;
}


.ayan-faq-header h2 span {
  background:
    linear-gradient(
      90deg,
      #ffae00 0%,
      #ffd34d 42%,
      #31d8ca 100%
    );

  -webkit-background-clip: text;
  background-clip: text;

  -webkit-text-fill-color: transparent;
}


.ayan-faq-header p {
  max-width: 680px;

  margin: 17px auto 0;

  color: #8d98a7 !important;

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


.ayan-faq-heading-line {
  width: 70px;
  height: 2px;

  margin: 19px auto 0;

  overflow: hidden;
}


.ayan-faq-heading-line span {
  display: block;

  width: 100%;
  height: 100%;

  background:
    linear-gradient(
      90deg,
      #ffae00,
      #31d8ca
    );
}


/* =========================================================
   FAQ GRID
========================================================= */

.ayan-faq-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr);

  column-gap: 22px;
  row-gap: 14px;

  align-items: start !important;

  width: 100%;
}


/* =========================================================
   FAQ ITEM
========================================================= */

.ayan-faq-item {
  position: relative;

  display: block !important;

  width: 100%;
  height: fit-content !important;

  align-self: start !important;

  margin: 0 !important;

  padding: 0 !important;

  border: 1px solid #1d252d !important;

  border-radius: 14px !important;

  background:
    linear-gradient(
      145deg,
      #0b1015,
      #080c10
    ) !important;

  overflow: hidden !important;

  box-sizing: border-box;

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


/* =========================================================
   REMOVE ANY ELEMENTOR/THEME COLOR OVERRIDES
========================================================= */

.ayan-faq-item:hover,
.ayan-faq-item:focus-within,
.ayan-faq-item.ayan-faq-open {
  background:
    linear-gradient(
      145deg,
      #0b1015,
      #080c10
    ) !important;
}


/* =========================================================
   TOP BRAND LINE
========================================================= */

.ayan-faq-item::before {
  content: "";

  position: absolute;

  top: 0;
  left: 35px;
  right: 35px;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(49, 216, 202, 0.45),
      rgba(255, 174, 0, 0.45),
      transparent
    );

  opacity: 0;

  transition: opacity 0.22s ease;

  pointer-events: none;
}


.ayan-faq-item:hover::before,
.ayan-faq-item.ayan-faq-open::before {
  opacity: 1;
}


/* =========================================================
   NORMAL HOVER
   VERY SUBTLE — NO TURQUOISE FILL
========================================================= */

.ayan-faq-item:hover {
  border-color:
    rgba(49, 216, 202, 0.38) !important;

  box-shadow:
    0 8px 25px
    rgba(0, 0, 0, 0.18) !important;
}


/* =========================================================
   OPEN STATE
========================================================= */

.ayan-faq-item.ayan-faq-open {
  border-color:
    rgba(255, 174, 0, 0.52) !important;

  box-shadow:
    0 10px 30px
    rgba(0, 0, 0, 0.22) !important;
}


/* =========================================================
   QUESTION BUTTON
========================================================= */

.ayan-faq-question,
.ayan-faq-question:hover,
.ayan-faq-question:focus,
.ayan-faq-question:active {
  position: relative;

  width: 100% !important;

  min-height: 92px;

  display: grid !important;

  grid-template-columns:
    47px
    minmax(0, 1fr)
    25px;

  align-items: center;

  gap: 18px;

  margin: 0 !important;

  padding: 17px 20px !important;

  border: 0 !important;
  border-radius: 0 !important;
  outline: none !important;

  background: transparent !important;

  background-color: transparent !important;

  color: #f3f6f8 !important;

  box-shadow: none !important;

  text-align: left;

  font-family:
    "Inter",
    "Manrope",
    Arial,
    sans-serif !important;

  font-size: 14px !important;
  line-height: 1.45 !important;

  font-weight: 650 !important;

  text-transform: none !important;

  cursor: pointer;

  box-sizing: border-box;
}


/* VERY IMPORTANT:
   Prevent Elementor button pseudo backgrounds */

.ayan-faq-question::before,
.ayan-faq-question::after {
  display: none !important;
}


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

.ayan-faq-question-text {
  display: block;

  color: #edf1f4 !important;

  background: transparent !important;

  transition: color 0.2s ease;
}


.ayan-faq-question:hover
.ayan-faq-question-text,
.ayan-faq-item.ayan-faq-open
.ayan-faq-question-text {
  color: #ffffff !important;
}


/* =========================================================
   NUMBER
========================================================= */

.ayan-faq-number {
  width: 45px !important;
  height: 45px !important;

  min-width: 45px;

  display: flex !important;

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

  border-radius: 50% !important;

  background:
    rgba(255, 255, 255, 0.008)
    !important;

  font-size: 12px !important;

  font-weight: 700 !important;

  line-height: 1 !important;

  box-sizing: border-box;
}


/* TEAL */

.ayan-faq-number.ayan-faq-teal {
  border: 1px solid
    rgba(49, 216, 202, 0.38)
    !important;

  color: #31d8ca !important;
}


/* ORANGE */

.ayan-faq-number.ayan-faq-orange {
  border: 1px solid
    rgba(255, 174, 0, 0.38)
    !important;

  color: #ffae00 !important;
}


/* =========================================================
   NUMBER HOVER
========================================================= */

.ayan-faq-item:hover
.ayan-faq-number.ayan-faq-teal {
  border-color:
    rgba(49, 216, 202, 0.7)
    !important;
}


.ayan-faq-item:hover
.ayan-faq-number.ayan-faq-orange {
  border-color:
    rgba(255, 174, 0, 0.7)
    !important;
}


/* =========================================================
   PLUS / MINUS
========================================================= */

.ayan-faq-toggle {
  width: 25px !important;
  height: 25px !important;

  display: flex !important;

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

  background: transparent !important;

  color: #aab5c1 !important;

  font-size: 20px !important;

  font-weight: 300 !important;

  line-height: 1 !important;

  transition:
    color 0.2s ease,
    transform 0.25s ease;

  box-sizing: border-box;
}


.ayan-faq-item:hover
.ayan-faq-toggle {
  color: #31d8ca !important;
}


.ayan-faq-item.ayan-faq-open
.ayan-faq-toggle {
  color: #ffae00 !important;

  transform: rotate(180deg);
}


/* =========================================================
   ANSWER
========================================================= */

.ayan-faq-answer {
  display: block !important;

  width: 100%;

  max-height: 0;

  overflow: hidden;

  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;

  transition:
    max-height 0.32s
    cubic-bezier(.4, 0, .2, 1);

  box-sizing: border-box;
}


.ayan-faq-answer-inner {
  width: 100%;

  margin: 0 !important;

  padding: 0 !important;

  box-sizing: border-box;
}


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

.ayan-faq-answer-inner p {
  margin: 0 !important;

  padding:
    0
    20px
    22px
    85px !important;

  color: #929daa !important;

  background: transparent !important;

  font-size: 13px !important;

  line-height: 1.75 !important;

  font-weight: 400 !important;
}


/* =========================================================
   DIVIDER ABOVE ANSWER
========================================================= */

.ayan-faq-item.ayan-faq-open
.ayan-faq-answer-inner::before {
  content: "";

  display: block;

  height: 1px;

  margin:
    0
    20px
    16px
    85px;

  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.08),
      transparent
    );
}


/* =========================================================
   CTA
========================================================= */

.ayan-faq-cta {
  position: relative;

  display: flex;

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

  gap: 30px;

  margin-top: 44px;

  padding: 27px 30px;

  border: 1px solid
    rgba(49, 216, 202, 0.3)
    !important;

  border-radius: 15px !important;

  background:
    linear-gradient(
      105deg,
      rgba(10, 23, 27, 0.96),
      rgba(9, 14, 18, 0.98),
      rgba(28, 20, 8, 0.85)
    ) !important;

  box-sizing: border-box;
}


.ayan-faq-cta::before {
  content: "";

  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      #31d8ca,
      transparent 48%,
      #ffae00
    );
}


/* =========================================================
   CTA LEFT
========================================================= */

.ayan-faq-cta-left {
  display: flex;

  align-items: center;

  gap: 24px;
}


.ayan-faq-cta-icon {
  flex: 0 0 68px;

  width: 68px;
  height: 68px;

  display: flex;

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

  border: 1px solid
    rgba(49, 216, 202, 0.4);

  border-radius: 50%;

  color: #31d8ca;

  font-size: 27px;
}


.ayan-faq-cta-text h3 {
  margin: 0 0 6px !important;

  color: #fff !important;

  font-size: 24px !important;

  line-height: 1.2 !important;

  font-weight: 700 !important;
}


.ayan-faq-cta-text h3 span {
  color: #ffae00 !important;
}


.ayan-faq-cta-text p {
  margin: 0 !important;

  color: #8793a1 !important;

  font-size: 13px !important;

  line-height: 1.5 !important;
}


/* =========================================================
   WHATSAPP CTA
========================================================= */

.ayan-faq-whatsapp,
.ayan-faq-whatsapp:hover,
.ayan-faq-whatsapp:focus {
  min-height: 50px;

  display: inline-flex !important;

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

  gap: 20px;

  padding: 0 24px !important;

  border: 1px solid
    rgba(255, 174, 0, 0.25)
    !important;

  border-radius: 9px !important;

  background:
    linear-gradient(
      135deg,
      #ffae00,
      #ffbc20
    ) !important;

  color: #080a0d !important;

  text-decoration: none !important;

  font-size: 13px !important;

  font-weight: 700 !important;

  box-shadow:
    0 7px 24px
    rgba(255, 174, 0, 0.1);

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease !important;

  box-sizing: border-box;
}


.ayan-faq-whatsapp:hover {
  transform: translateY(-2px);

  color: #080a0d !important;

  box-shadow:
    0 10px 28px
    rgba(255, 174, 0, 0.18);
}


.ayan-faq-whatsapp strong {
  font-size: 18px;

  font-weight: 500;
}


/* =========================================================
   TRUST
========================================================= */

.ayan-faq-trust {
  display: flex;

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

  gap: 60px;

  margin-top: 30px;
}


.ayan-faq-trust-item {
  display: flex;

  align-items: center;

  gap: 8px;

  color: #7f8b98;

  font-size: 12px;
}


.ayan-faq-trust-icon {
  color: #ffae00;

  font-size: 15px;
}


/* =========================================================
   BRAND LINE
========================================================= */

.ayan-faq-brand-line {
  display: flex;

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

  gap: 14px;

  margin-top: 27px;
}


.ayan-faq-brand-line span {
  width: 34px;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      #31d8ca
    );
}


.ayan-faq-brand-line span:last-child {
  background:
    linear-gradient(
      90deg,
      #ffae00,
      transparent
    );
}


.ayan-faq-brand-line strong {
  color: #68737f;

  font-size: 9px;

  font-weight: 600;

  letter-spacing: 3px;
}


/* =========================================================
   FLOATING WHATSAPP
========================================================= */

.ayan-faq-floating-whatsapp {
  position: fixed;

  right: 22px;
  bottom: 22px;

  z-index: 9999;

  width: 56px;
  height: 56px;

  display: flex !important;

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

  border: 3px solid
    rgba(255, 255, 255, 0.9);

  border-radius: 50%;

  background: #20d66b !important;

  color: #fff !important;

  text-decoration: none !important;

  box-shadow:
    0 7px 25px
    rgba(0, 0, 0, 0.35);

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


.ayan-faq-floating-whatsapp:hover {
  transform: scale(1.05);

  color: #fff !important;

  background: #20d66b !important;
}


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

@media (max-width: 900px) {

  .ayan-faq-section {
    padding: 75px 18px 60px;
  }


  .ayan-faq-grid {
    column-gap: 14px;
    row-gap: 12px;
  }


  .ayan-faq-question,
  .ayan-faq-question:hover,
  .ayan-faq-question:focus {
    grid-template-columns:
      43px
      minmax(0, 1fr)
      24px;

    min-height: 84px;

    gap: 14px;

    padding: 15px 17px !important;

    font-size: 13px !important;
  }


  .ayan-faq-number {
    width: 42px !important;
    height: 42px !important;

    min-width: 42px;
  }


  .ayan-faq-answer-inner p {
    padding:
      0
      17px
      20px
      73px !important;
  }


  .ayan-faq-item.ayan-faq-open
  .ayan-faq-answer-inner::before {
    margin-left: 73px;
    margin-right: 17px;
  }

}


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

@media (max-width: 680px) {

  .ayan-faq-section {
    padding: 65px 14px 50px;
  }


  /* HEADER */

  .ayan-faq-header {
    margin-bottom: 37px;
  }


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

    letter-spacing: -1px;
  }


  .ayan-faq-header p {
    margin-top: 13px;

    font-size: 13px;

    line-height: 1.65;
  }


  /* ONE COLUMN */

  .ayan-faq-grid {
    grid-template-columns: 1fr !important;

    gap: 10px;

    align-items: start !important;
  }


  /* CARD */

  .ayan-faq-item {
    width: 100% !important;

    align-self: start !important;

    border-radius: 12px !important;
  }


  /* QUESTION */

  .ayan-faq-question,
  .ayan-faq-question:hover,
  .ayan-faq-question:focus,
  .ayan-faq-question:active {

    grid-template-columns:
      39px
      minmax(0, 1fr)
      22px;

    min-height: 75px;

    gap: 12px;

    padding:
      12px
      14px !important;

    font-size: 13px !important;
  }


  /* NUMBER */

  .ayan-faq-number {
    width: 38px !important;
    height: 38px !important;

    min-width: 38px;

    font-size: 10px !important;
  }


  /* TOGGLE */

  .ayan-faq-toggle {
    width: 22px !important;
    height: 22px !important;

    font-size: 18px !important;
  }


  /* ANSWER */

  .ayan-faq-answer-inner p {
    padding:
      0
      14px
      18px
      64px !important;

    font-size: 12.5px !important;

    line-height: 1.7 !important;
  }


  .ayan-faq-item.ayan-faq-open
  .ayan-faq-answer-inner::before {

    margin:
      0
      14px
      14px
      64px;
  }


  /* CTA */

  .ayan-faq-cta {

    flex-direction: column;

    align-items: stretch;

    gap: 20px;

    margin-top: 30px;

    padding: 21px 17px;

    border-radius: 13px !important;
  }


  .ayan-faq-cta-left {
    gap: 16px;
  }


  .ayan-faq-cta-icon {
    flex: 0 0 52px;

    width: 52px;
    height: 52px;

    font-size: 22px;
  }


  .ayan-faq-cta-text h3 {
    font-size: 20px !important;
  }


  .ayan-faq-cta-text p {
    font-size: 12px !important;
  }


  .ayan-faq-whatsapp,
  .ayan-faq-whatsapp:hover {
    width: 100%;

    min-height: 48px;
  }


  /* TRUST */

  .ayan-faq-trust {
    flex-direction: column;

    gap: 11px;

    margin-top: 25px;
  }


  .ayan-faq-trust-item {
    font-size: 11px;
  }


  /* BRAND */

  .ayan-faq-brand-line {
    margin-top: 24px;
  }


  .ayan-faq-brand-line strong {
    font-size: 8px;

    letter-spacing: 2px;
  }


  /* FLOATING WHATSAPP */

  .ayan-faq-floating-whatsapp {
    right: 14px;
    bottom: 14px;

    width: 50px;
    height: 50px;
  }

}


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

@media (max-width: 380px) {

  .ayan-faq-section {
    padding-left: 11px;
    padding-right: 11px;
  }


  .ayan-faq-header h2 {
    font-size: 29px;
  }


  .ayan-faq-question,
  .ayan-faq-question:hover,
  .ayan-faq-question:focus {

    grid-template-columns:
      35px
      minmax(0, 1fr)
      20px;

    gap: 10px;

    padding:
      11px
      12px !important;

    font-size: 12.5px !important;
  }


  .ayan-faq-number {
    width: 35px !important;
    height: 35px !important;

    min-width: 35px;
  }


  .ayan-faq-answer-inner p {
    padding:
      0
      12px
      17px
      57px !important;
  }


  .ayan-faq-item.ayan-faq-open
  .ayan-faq-answer-inner::before {

    margin-left: 57px;
    margin-right: 12px;
  }


  .ayan-faq-cta {
    padding: 19px 14px;
  }

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

.ayan-faq-question:focus-visible {
  outline:
    2px solid
    rgba(49, 216, 202, 0.65) !important;

  outline-offset: -2px !important;
}/* End custom CSS */