.elementor-5 .elementor-element.elementor-element-649b706{--display:flex;--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:flex-start;--align-items:stretch;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-5 .elementor-element.elementor-element-15cc2e1{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}/* Start custom CSS for html, class: .elementor-element-15cc2e1 */@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;600;700;800&display=swap');

.framera-coming {
    --fc-bg: #080808;
    --fc-bg-soft: #10100f;

    --fc-bronze: #926639;
    --fc-bronze-light: #c08b55;

    --fc-olive: #656c40;

    --fc-ivory: #f3efe8;

    --fc-text-secondary: rgba(243, 239, 232, 0.68);
    --fc-text-muted: rgba(243, 239, 232, 0.42);

    --fc-border: rgba(243, 239, 232, 0.11);

    position: relative;

    width: 100%;

    min-height: 100vh;
    min-height: 100svh;

    background:
        radial-gradient(
            circle at 80% 25%,
            rgba(146, 102, 57, 0.14),
            transparent 34%
        ),
        radial-gradient(
            circle at 12% 85%,
            rgba(101, 108, 64, 0.08),
            transparent 32%
        ),
        var(--fc-bg);

    color: var(--fc-ivory);

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

    direction: rtl;

    overflow: hidden;

    isolation: isolate;
}


/* ======================================
   WORDPRESS / ELEMENTOR FIXES
====================================== */

.framera-coming,
.framera-coming * {
    box-sizing: border-box;
}

.framera-coming a {
    text-decoration: none;
}

.framera-coming img {
    max-width: 100%;
}


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

.framera-coming__container {
    position: relative;

    width: min(calc(100% - 64px), 1240px);

    min-height: 100vh;
    min-height: 100svh;

    margin-inline: auto;

    padding:
        45px
        0
        30px;

    display: flex;
    flex-direction: column;

    z-index: 5;
}


/* ======================================
   LOGO
====================================== */

.framera-coming__logo {
    width: fit-content;
}

.framera-coming__logo img {
    display: block;

    width: clamp(145px, 13vw, 190px);

    height: auto;
}


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

.framera-coming__content {
    width: min(100%, 760px);

    margin-top: auto;
    margin-bottom: auto;

    padding:
        65px
        0;
}


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

.framera-coming__eyebrow {
    width: fit-content;

    display: flex;
    align-items: center;

    gap: 13px;

    margin-bottom: 25px;

    color: var(--fc-bronze-light);

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

    letter-spacing: .22em;

    direction: ltr;
}

.framera-coming__line {
    width: 34px;
    height: 1px;

    display: block;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--fc-bronze)
        );
}


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

.framera-coming__title {
    margin: 0;

    color: var(--fc-ivory);

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

    font-size: clamp(58px, 7vw, 94px);

    font-weight: 500;

    line-height: 1;

    letter-spacing: -3px;
}

.framera-coming__title span {
    display: block;

    margin-top: 12px;

    color: var(--fc-bronze-light);

    font-weight: 400;
}


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

.framera-coming__description {
    max-width: 620px;

    margin:
        30px
        0
        0;

    color: var(--fc-text-secondary);

    font-size: 18px;

    line-height: 2;
}

.framera-coming__description strong {
    color: var(--fc-ivory);

    font-weight: 500;
}


/* ======================================
   STATUS
====================================== */

.framera-coming__status {
    display: flex;
    align-items: center;

    gap: 11px;

    margin-top: 28px;

    color:
        rgba(243, 239, 232, .82);

    font-size: 14px;
}

.framera-coming__status-dot {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background:
        var(--fc-bronze-light);

    box-shadow:
        0 0 0 6px rgba(146, 102, 57, .08),
        0 0 18px rgba(192, 139, 85, .36);

    animation:
        frameraPulse 2.8s ease-in-out infinite;
}

@keyframes frameraPulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: .55;
        transform: scale(.8);
    }

}


/* ======================================
   CATEGORIES
====================================== */

.framera-coming__categories {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 12px;

    margin-top: 23px;

    color: var(--fc-text-muted);

    font-size: 13px;
}

.framera-coming__categories i {
    display: block;

    width: 4px;
    height: 4px;

    border-radius: 50%;

    background:
        var(--fc-bronze);
}


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

.framera-coming__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 12px;

    margin-top: 36px;
}

.framera-coming__btn {
    min-height: 52px;

    padding:
        0
        24px;

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

    gap: 10px;

    border-radius: 8px;

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

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

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

.framera-coming__btn svg {
    width: 20px;
    height: 20px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.5;

    stroke-linecap: round;
    stroke-linejoin: round;
}

.framera-svg-fill {
    fill: currentColor !important;
    stroke: none !important;
}


/* Primary */

.framera-coming__btn--primary {
    color: #fff;

    background:
        var(--fc-bronze);

    border:
        1px solid
        var(--fc-bronze);
}

.framera-coming__btn--primary:hover {
    color: #fff;

    background:
        var(--fc-bronze-light);

    border-color:
        var(--fc-bronze-light);

    transform:
        translateY(-2px);
}


/* Outline */

.framera-coming__btn--outline {
    color: var(--fc-ivory);

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

    border:
        1px solid
        rgba(243, 239, 232, .17);

    backdrop-filter:
        blur(8px);
}

.framera-coming__btn--outline:hover {
    color:
        var(--fc-bronze-light);

    border-color:
        rgba(192, 139, 85, .5);

    transform:
        translateY(-2px);
}


/* ======================================
   SOCIAL
====================================== */

.framera-coming__social {
    width: fit-content;

    margin-top: 44px;

    padding-top: 23px;

    display: flex;
    align-items: center;

    gap: 17px;

    border-top:
        1px solid
        rgba(255, 255, 255, .07);
}

.framera-coming__social-title {
    color:
        var(--fc-text-muted);

    font-size: 12px;
}

.framera-coming__social-links {
    display: flex;
    align-items: center;

    gap: 8px;
}

.framera-coming__social-links a {
    width: 38px;
    height: 38px;

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

    color:
        rgba(243, 239, 232, .72);

    border:
        1px solid
        rgba(243, 239, 232, .11);

    border-radius: 50%;

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

.framera-coming__social-links a:hover {
    color:
        var(--fc-bronze-light);

    border-color:
        rgba(192, 139, 85, .4);

    background:
        rgba(146, 102, 57, .08);

    transform:
        translateY(-2px);
}

.framera-coming__social-links svg {
    width: 18px;
    height: 18px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.5;
}


/* ======================================
   FOOTER
====================================== */

.framera-coming__footer {
    margin-top: auto;

    padding-top: 20px;

    display: flex;
    align-items: center;

    gap: 14px;

    color:
        rgba(243, 239, 232, .27);

    font-size: 10px;

    letter-spacing: .05em;

    direction: ltr;
}

.framera-coming__footer i {
    display: block;

    width: 28px;
    height: 1px;

    background:
        rgba(243, 239, 232, .14);
}


/* ======================================
   AMBIENT LIGHT
====================================== */

.framera-coming__ambient {
    position: absolute;

    width: 600px;
    height: 600px;

    border-radius: 50%;

    filter:
        blur(140px);

    pointer-events: none;

    z-index: 0;
}

.framera-coming__ambient--bronze {
    top: -280px;
    right: -170px;

    background:
        rgba(146, 102, 57, .17);
}

.framera-coming__ambient--olive {
    bottom: -360px;
    left: -220px;

    background:
        rgba(101, 108, 64, .09);
}


/* ======================================
   NOISE
====================================== */

.framera-coming__noise {
    position: absolute;
    inset: 0;

    opacity: .035;

    pointer-events: none;

    z-index: 1;

    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.55'/%3E%3C/svg%3E");
}


/* ======================================
   BRAND PATTERN
====================================== */

.framera-coming__pattern {
    position: absolute;

    width: 400px;
    height: 400px;

    opacity: .055;

    pointer-events: none;

    z-index: 1;

    background-image:

        linear-gradient(
            45deg,
            transparent 47%,
            var(--fc-bronze) 48%,
            var(--fc-bronze) 52%,
            transparent 53%
        ),

        linear-gradient(
            -45deg,
            transparent 47%,
            var(--fc-bronze) 48%,
            var(--fc-bronze) 52%,
            transparent 53%
        );

    background-size:
        44px 44px;
}

.framera-coming__pattern--top {
    top: -160px;
    left: -140px;

    transform:
        rotate(12deg);
}

.framera-coming__pattern--bottom {
    bottom: -190px;
    right: -140px;

    transform:
        rotate(-10deg);
}


/* ======================================
   REVEAL
====================================== */

.framera-reveal {
    opacity: 0;

    transform:
        translateY(22px);

    transition:
        opacity .9s cubic-bezier(.22,1,.36,1),
        transform .9s cubic-bezier(.22,1,.36,1);
}

.framera-loaded .framera-reveal {
    opacity: 1;

    transform:
        translateY(0);
}

.framera-loaded .framera-delay-1 {
    transition-delay:
        .08s;
}

.framera-loaded .framera-delay-2 {
    transition-delay:
        .16s;
}

.framera-loaded .framera-delay-3 {
    transition-delay:
        .24s;
}

.framera-loaded .framera-delay-4 {
    transition-delay:
        .32s;
}


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

@media (max-width: 900px) {

    .framera-coming__container {
        width:
            calc(100% - 40px);

        padding-top:
            32px;
    }

    .framera-coming__content {
        padding:
            70px
            0
            45px;
    }

}


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

@media (max-width: 600px) {

    .framera-coming__container {
        width:
            calc(100% - 32px);

        padding:
            26px
            0
            22px;
    }

    .framera-coming__logo img {
        width:
            142px;
    }

    .framera-coming__content {
        padding:
            60px
            0
            40px;
    }

    .framera-coming__eyebrow {
        gap:
            9px;

        margin-bottom:
            21px;

        font-size:
            9px;

        letter-spacing:
            .16em;
    }

    .framera-coming__line {
        width:
            23px;
    }

    .framera-coming__title {
        font-size:
            clamp(48px, 15vw, 64px);

        line-height:
            1.05;

        letter-spacing:
            -2px;
    }

    .framera-coming__title span {
        margin-top:
            8px;
    }

    .framera-coming__description {
        margin-top:
            23px;

        font-size:
            15px;

        line-height:
            1.95;
    }

    .framera-coming__status {
        margin-top:
            25px;

        font-size:
            13px;
    }

    .framera-coming__categories {
        gap:
            9px;

        margin-top:
            20px;

        font-size:
            11px;
    }

    .framera-coming__actions {
        display:
            grid;

        grid-template-columns:
            1fr;

        width:
            100%;

        margin-top:
            30px;
    }

    .framera-coming__btn {
        width:
            100%;

        min-height:
            52px;
    }

    .framera-coming__social {
        width:
            100%;

        justify-content:
            space-between;

        margin-top:
            35px;
    }

    .framera-coming__footer {
        justify-content:
            center;

        flex-wrap:
            wrap;

        text-align:
            center;

        line-height:
            1.5;
    }

}


/* ======================================
   REDUCED MOTION
====================================== */

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

    .framera-coming *,
    .framera-coming *::before,
    .framera-coming *::after {
        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;
    }

}/* End custom CSS */