/*=====================================================
 RM SERVICES PREMIUM MEGA MENU
 Part 1 - Layout
======================================================*/

.site-menu-main > li.has-megamenu{
    position:static;
}

/*----------------------------------
 MEGA CONTAINER
-----------------------------------*/

.site-menu-main > li > .sub-menu.megamenu{

    position:absolute;

    left:50%;

    top:100%;

    transform:translateX(-50%) translateY(18px);

    width:1280px;

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

    padding:40px;

    background:#0d152e;

    border-radius:24px;

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

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

    backdrop-filter:blur(18px);

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transition:.35s ease;

    z-index:9999;
}

/*----------------------------------
 SHOW
-----------------------------------*/

@media(min-width:992px){

.site-menu-main > li.has-megamenu:hover > .sub-menu.megamenu{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

    transform:translateX(-50%) translateY(0);
}

}

/*----------------------------------
 CONTAINER
-----------------------------------*/

/* .sub-menu.megamenu .container{

    max-width:100%;

    padding:0;
} */
@media (max-width:991px){

.sub-menu.megamenu .container{

    width:100% !important;

    max-width:100% !important;

    padding:0 !important;

    margin:0 !important;
}

}
/*----------------------------------
 ROW
-----------------------------------*/

.sub-menu.megamenu .row{

    --bs-gutter-x:45px;

    --bs-gutter-y:30px;
}

/*----------------------------------
 COLUMN
-----------------------------------*/

.sub-menu.megamenu .col-lg-4{

    /* position:relative; */
}

/* Divider */

.sub-menu.megamenu .col-lg-4:not(:last-child)::after{

    content:"";

    position:absolute;

    right:-22px;

    top:0;

    width:1px;

    height:100%;

    background:rgba(255,255,255,.06);
}

/*----------------------------------
 HEADING
-----------------------------------*/

.mega-heading{

    position:relative;

    margin-bottom:32px;

    padding-bottom:14px;

    font-size:24px;

    font-weight:700;

    color:#fff;

    letter-spacing:.2px;
}

.mega-heading:after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:55px;

    height:3px;

    border-radius:30px;

    background:linear-gradient(
        90deg,
        #ff003c,
        #ff008c,
        #7b00ff,
        #0048ff
    );
}

/*----------------------------------
 MENU ITEM
-----------------------------------*/

.mega-link{

    display:flex;

    align-items:flex-start;

    gap:18px;

    /* padding:16px; */

    margin-bottom:12px;

    border-radius:16px;

    text-decoration:none;

    transition:.35s;

    position:relative;

    overflow:hidden;
}

.mega-link:last-child{

    margin-bottom:0;
}

/*----------------------------------
 HOVER
-----------------------------------*/

.mega-link:hover{

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

    transform:translateX(8px);
}

/*----------------------------------
 ICON
-----------------------------------*/

.mega-link i{

    width:54px;

    height:54px;

    min-width:54px;

    border-radius:16px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:20px;

    color:#fff;

    background:linear-gradient(
        135deg,
        #ff003c,
        #ff008c,
        #7b00ff,
        #0048ff
    );

    box-shadow:
        0 10px 25px rgba(255,0,140,.18);

    transition:.35s;
}

.mega-link:hover i{

    transform:rotate(-8deg) scale(1.05);
}

/*----------------------------------
 TITLE
-----------------------------------*/

.mega-link strong{

    display:block;

    font-size:17px;

    font-weight:700;

    color:#fff;

    margin-bottom:6px;

    transition:.35s;
}

/*----------------------------------
 DESCRIPTION
-----------------------------------*/

.mega-link span{

    display:block;

    font-size:14px;

    color:#a8b1c3;

    line-height:1.7;
}

/*----------------------------------
 TITLE HOVER
-----------------------------------*/

.mega-link:hover strong{

    background:linear-gradient(
        90deg,
        #ff003c,
        #ff008c,
        #7b00ff,
        #0048ff
    );

    -webkit-background-clip:text;

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

/*----------------------------------
 SUBTLE GLOW
-----------------------------------*/

.mega-link::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:16px;

    border:1px solid transparent;

    transition:.35s;
}

.mega-link:hover::before{

    border-color:rgba(255,255,255,.08);
}

/*=====================================================
 RM SERVICES PREMIUM MEGA MENU
 Part 2 - Banner & CTA
======================================================*/

/*---------------------------------------------------
 RIGHT BANNER
----------------------------------------------------*/

.mega-banner{

    position:relative;

    height:100%;
    min-height:520px;

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

    padding:40px;

    overflow:hidden;

    border-radius:24px;

    background:linear-gradient(
        145deg,
        rgba(255,0,60,.15),
        rgba(255,0,140,.12),
        rgba(123,0,255,.12),
        rgba(0,72,255,.12)
    );

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

    backdrop-filter:blur(18px);

    transition:.4s;
}

/*---------------------------------------------------
 TOP GRADIENT LINE
----------------------------------------------------*/

.mega-banner::before{

    content:"";

    position:absolute;

    left:0;
    top:0;

    width:100%;
    height:4px;

    background:linear-gradient(
        90deg,
        #ff003c,
        #ff008c,
        #7b00ff,
        #0048ff
    );
}

/*---------------------------------------------------
 GLOW
----------------------------------------------------*/

.mega-banner::after{

    content:"";

    position:absolute;

    width:220px;
    height:220px;

    right:-60px;
    top:-60px;

    border-radius:50%;

    background:rgba(255,0,140,.12);

    filter:blur(70px);

    pointer-events:none;
}

/*---------------------------------------------------
 HOVER
----------------------------------------------------*/

.mega-banner:hover{

    transform:translateY(-6px);

    box-shadow:
        0 25px 60px rgba(255,0,140,.12),
        0 10px 30px rgba(0,0,0,.30);
}

/*---------------------------------------------------
 KEEP CONTENT ABOVE GLOW
----------------------------------------------------*/

.mega-banner *{

    position:relative;
    z-index:2;
}

/*---------------------------------------------------
 BADGE
----------------------------------------------------*/

.mega-banner .badge{

    display:inline-flex;

    align-items:center;

    padding:9px 18px;

    margin-bottom:22px;

    border-radius:60px;

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

    color:#fff;

    font-size:12px;

    letter-spacing:1px;

    font-weight:700;

    text-transform:uppercase;
}

/*---------------------------------------------------
 TITLE
----------------------------------------------------*/

.mega-banner h3{

    font-size:34px;

    font-weight:700;

    line-height:1.2;

    color:#fff;

    margin-bottom:18px;
}

/*---------------------------------------------------
 PARAGRAPH
----------------------------------------------------*/

.mega-banner p{

    color:#b9c2d5;

    font-size:15px;

    line-height:1.9;

    margin-bottom:30px;
}

/*---------------------------------------------------
 FEATURE LIST
----------------------------------------------------*/

.mega-feature-list{

    list-style:none;

    padding:0;

    margin:0 0 35px;
}

.mega-feature-list li{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:16px;

    color:#fff;

    font-size:15px;
}

.mega-feature-list li:last-child{

    margin-bottom:0;
}

/*---------------------------------------------------
 CHECK ICON
----------------------------------------------------*/

.mega-feature-list i{

    width:22px;
    height:22px;

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

    border-radius:50%;

    font-size:11px;

    background:linear-gradient(
        135deg,
        #00d084,
        #00ff95
    );

    color:#fff;
}

/*---------------------------------------------------
 CTA BUTTON
----------------------------------------------------*/

.mega-banner .rmservices-default-btn{

    width:100%;

    height:56px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50px;

    font-size:16px;

    font-weight:700;

    transition:.35s;
}

/*---------------------------------------------------
 BUTTON HOVER
----------------------------------------------------*/

.mega-banner .rmservices-default-btn:hover{

    transform:translateY(-3px);
}

/*---------------------------------------------------
 SMALL LABEL
----------------------------------------------------*/

.mega-small-text{

    margin-top:18px;

    text-align:center;

    color:#98a5bf;

    font-size:13px;
}

/*---------------------------------------------------
 DECORATION CIRCLE
----------------------------------------------------*/

.mega-circle{

    position:absolute;

    right:-80px;
    bottom:-80px;

    width:220px;
    height:220px;

    border-radius:50%;

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

/*---------------------------------------------------
 SECOND CIRCLE
----------------------------------------------------*/

.mega-circle::before{

    content:"";

    position:absolute;

    left:35px;
    top:35px;

    width:150px;
    height:150px;

    border-radius:50%;

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

/*---------------------------------------------------
 SHINE EFFECT
----------------------------------------------------*/

.mega-banner:hover::before{

    animation:megaBorder 2s linear infinite;
}

@keyframes megaBorder{

    0%{

        background-position:0%;
    }

    100%{

        background-position:100%;
    }
}


/*=====================================================
 RM SERVICES PREMIUM MEGA MENU
 Part 3 - Responsive & Final Polish
======================================================*/

/*------------------------------------
 DESKTOP POLISH
-------------------------------------*/

@media (min-width:992px){

    .site-menu-main > li.has-megamenu{
        position:static;
    }

    .site-menu-main > li.has-megamenu > a{
        position:relative;
    }

    .site-menu-main > li.has-megamenu > a::after{

        content:"";

        position:absolute;

        left:50%;
        bottom:-14px;

        width:12px;
        height:12px;

        transform:
            translateX(-50%)
            rotate(45deg);

        background:#0d152e;

        border-left:1px solid rgba(255,255,255,.08);
        border-top:1px solid rgba(255,255,255,.08);

        opacity:0;

        transition:.3s;
    }

    .site-menu-main > li.has-megamenu:hover > a::after{

        opacity:1;
    }

}

/*------------------------------------
 COLUMN SPACING
-------------------------------------*/

.sub-menu.megamenu .col-lg-4{

    display:flex;

    flex-direction:column;
}

.sub-menu.megamenu .mega-link:last-child{

    margin-bottom:0;
}

/*------------------------------------
 VERTICAL ALIGN
-------------------------------------*/

.mega-link{

    min-height:88px;
}

.mega-link div{

    flex:1;
}

/*------------------------------------
 SMOOTH ICON
-------------------------------------*/

.mega-link i{

    transition:
        transform .35s,
        box-shadow .35s;
}

.mega-link:hover i{

    transform:
        rotate(-8deg)
        scale(1.08);

    box-shadow:
        0 12px 28px rgba(255,0,140,.30);
}

/*------------------------------------
 BANNER ANIMATION
-------------------------------------*/

.mega-banner{

    transition:
        transform .35s,
        box-shadow .35s,
        border-color .35s;
}

.mega-banner:hover{

    border-color:rgba(255,255,255,.16);

    box-shadow:
        0 25px 80px rgba(0,0,0,.40),
        0 0 40px rgba(255,0,140,.18);
}

/*------------------------------------
 SCROLLBAR
-------------------------------------*/

.sub-menu.megamenu::-webkit-scrollbar{

    width:8px;
}

.sub-menu.megamenu::-webkit-scrollbar-thumb{

    background:#374151;

    border-radius:30px;
}

/*------------------------------------
 LARGE DESKTOP
-------------------------------------*/

@media(min-width:1600px){

.site-menu-main>.sub-menu.megamenu{

    width:1350px;
}

}

/*------------------------------------
 LAPTOP
-------------------------------------*/

@media(max-width:1399px){

.site-menu-main>.sub-menu.megamenu{

    width:1140px;
}

}

/*------------------------------------
 TABLET
-------------------------------------*/

@media(max-width:1199px){

.site-menu-main>.sub-menu.megamenu{

    width:960px;

    padding:30px;
}

.mega-heading{

    font-size:20px;
}

.mega-banner{

    padding:28px;
}

.mega-banner h3{

    font-size:26px;
}

}

/*------------------------------------
 MOBILE MENU
-------------------------------------*/

@media(max-width:991px){

.site-menu-main .sub-menu.megamenu{

    position:relative;

    left:0;

    top:0;

    width:100%;

    max-width:100%;

    transform:none;

    opacity:1;

    visibility:visible;

    pointer-events:auto;

    display:none;

    border-radius:0;

    border:none;

    background:#0d152e;

    box-shadow:none;

    padding:20px;
}

/* .site-menu-main>.sub-menu.megamenu.active{

    display:block;
} */

.site-menu-main .sub-menu.megamenu.active{
    display:block !important;
}

.sub-menu.megamenu .row{

    display:block;
}

.sub-menu.megamenu .col-lg-4{

    width:100%;

    max-width:100%;

    margin-bottom:35px;
}

.sub-menu.megamenu .col-lg-4::after{

    display:none;
}

.mega-heading{

    font-size:22px;

    margin-bottom:22px;
}

.mega-link{

    padding:12px 0;

    min-height:auto;
}

.mega-link:hover{

    transform:none;
}

.mega-banner{

    min-height:auto;

    padding:30px;
}

.mega-banner h3{

    font-size:24px;
}

}

/*------------------------------------
 SMALL MOBILE
-------------------------------------*/

@media(max-width:576px){

.site-menu-main>.sub-menu.megamenu{

    padding:18px;
}

.mega-heading{

    font-size:20px;
}

.mega-link{

    gap:14px;
}

.mega-link i{

    width:46px;
    height:46px;

    min-width:46px;

    font-size:16px;
}

.mega-link strong{

    font-size:16px;
}

.mega-link span{

    font-size:13px;
}

.mega-banner{

    padding:24px;
}

.mega-banner h3{

    font-size:22px;
}

}

/*------------------------------------
 REDUCE MOTION
-------------------------------------*/

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

*{

    animation:none!important;

    transition:none!important;
}

}

@media(max-width:991px){

.sub-menu.megamenu .container,
.sub-menu.megamenu .row,
.sub-menu.megamenu .col-lg-4{

    display:block!important;

    width:100%!important;

    max-width:100%!important;
}

.mega-link{

    display:flex!important;

    width:100%!important;

    padding:14px 0;

    text-decoration:none;

    pointer-events:auto;
}

}

@media(max-width:991px){

.sub-menu.megamenu{

    z-index:999;

    overflow-y:auto;

    height:100%;
}

}


@media (max-width:991px){

    .site-menu-main .sub-menu.megamenu{
        display:none;
        opacity:1 !important;
        visibility:visible !important;
        pointer-events:auto !important;
        transform:none !important;
        position:absolute;
        left:0;
        top:0;
        width:100%;
        height:100%;
        overflow-y:auto;
        z-index:9999;
    }

    .site-menu-main .sub-menu.megamenu.active{
        display:block !important;
    }

}

.sub-menu.megamenu .mega-wrapper{
    list-style:none;
    padding:0;
    margin:0;
}

.sub-menu.megamenu .mega-wrapper:hover{
    background:transparent;
}

@media (max-width:991px){

    .menu-block .sub-menu.megamenu{

        position:absolute !important;

        top:0 !important;
        left:0 !important;
        right:0 !important;
        bottom:0 !important;

        width:100% !important;
        height:100% !important;

        margin:0 !important;

        transform:none !important;

        opacity:1 !important;
        visibility:visible !important;

        display:none;

        overflow-y:auto;

        background:#0d152e;

        z-index:99999;
    }

    .menu-block .sub-menu.megamenu.active{

        display:block !important;
    }

}

@media (max-width:991px){

.sub-menu.megamenu{

    width:100% !important;

    min-width:100% !important;

    max-width:100% !important;

    left:0 !important;

    right:0 !important;

    padding:0 !important;

    border-radius:0;

    overflow-x:hidden;
}

}

@media(max-width:991px){

.sub-menu.megamenu .row{

    margin:0 !important;

    width:100%;
}

}

@media(max-width:991px){

.sub-menu.megamenu .row{

    --bs-gutter-x:0;

    --bs-gutter-y:0;
}

}

@media (max-width:991px){

    .sub-menu.megamenu{

        padding:24px !important;
        box-sizing:border-box;
    }

    .sub-menu.megamenu .container{

        padding:0 !important;
        margin:0 !important;
    }

    .sub-menu.megamenu .row{

        margin:0 !important;
    }

    .sub-menu.megamenu .col-lg-4{

        padding:0 !important;
    }

}

.site-menu-main > li.has-megamenu > a::after{
    display:none !important;
}
.site-menu-main > li.has-megamenu{
    position:static;
    /* padding-bottom:12px; */
}

.site-menu-main > li > .sub-menu.megamenu{
    top:100%;
    margin-top:0;
    transform:translateX(-50%);
}
/* Mobile header cross button and back button styles for mega menu */
.mega-back-link{
    margin-bottom:20px;
}

.mega-back-btn{
    display:flex;
    align-items:center;
    gap:10px;
    color:#fff;
    font-size:16px;
    font-weight:600;
    text-decoration:none;
    padding:12px 0;
}

.mega-back-btn:hover{
    color:#ff4d6d;
}

@media (min-width:992px){
    .mega-back-link{
        display:none;
    }
}

@media (max-width:991px){

.mega-mobile-nav{

    position:sticky;
    top:0;

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

    height:60px;

    margin:-24px -24px 25px;
    padding:0 18px;

    background:#111318;

    border-bottom:1px solid rgba(255,255,255,.08);

    z-index:100;
}

.mega-back-btn,
.mega-close-btn{

    width:42px;
    height:42px;

    border:none;
    outline:none;

    border-radius:12px;

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

    color:#fff;

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

    cursor:pointer;

    transition:.3s;
}

.mega-back-btn{

    width:auto;
    padding:0 16px;
    gap:10px;
}

.mega-back-btn:hover,
.mega-close-btn:hover{

    background:linear-gradient(135deg,#ff006a,#6b3df5);

    color:#fff;
}

.mega-back-btn span{

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

.mega-nav-title{

    color:#fff;

    font-size:17px;
    font-weight:700;
}

}

/* Menu Back button functionality for mobile menu update */

@media (max-width:991px){

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

.mega-mobile-header{

    position:sticky;
    top:0;
    left:0;

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

    width:calc(100% + 40px);

    margin:-20px -20px 25px;

    padding:14px 20px;

    background:#131722;

    border-bottom:1px solid rgba(255,255,255,.08);

    z-index:1000;
}

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

.mega-title{

    position:absolute;

    left:50%;

    transform:translateX(-50%);

    margin:0;

    color:#fff;

    font-size:20px;

    font-weight:700;

    letter-spacing:.3px;
}

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

.mega-back-btn,
.mega-close-btn{

    width:46px;
    height:46px;

    border:none;

    border-radius:14px;

    background:#1d2231;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    transition:.35s ease;

    position:relative;

    overflow:hidden;
}

/* Gradient Border */

.mega-back-btn::before,
.mega-close-btn::before{

    content:"";

    position:absolute;

    inset:0;

    padding:1px;

    border-radius:14px;

    background:linear-gradient(
        135deg,
        #ff006e,
        #8b3dff,
        #2962ff
    );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

            mask-composite:exclude;

    pointer-events:none;
}

/* Hover */

.mega-back-btn:hover,
.mega-close-btn:hover{

    background:linear-gradient(
        135deg,
        #ff006e,
        #7b2cff,
        #2962ff
    );

    transform:translateY(-2px);
}

/* Icons */

.mega-back-btn i,
.mega-close-btn i{

    font-size:18px;

    position:relative;

    z-index:2;
}

/* ==========================
   REMOVE GAP
========================== */

.sub-menu.megamenu{

    padding-top:0 !important;
}

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

.sub-menu.megamenu>.container{

    padding-top:20px;
}

}