/*==================================================
 MB SKYTECH DIGITAL
 BOOTSTRAP HEADER CSS - PART 2A
==================================================*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

:root{

--primary:#0F6FEA;
--secondary:#1C87FF;
--dark:#081624;
--dark2:#0f2034;
--white:#fff;
--light:#f5f8fc;
--text:#6b7280;
--transition:.35s ease;

}

*{

margin:0;
padding:0;
box-sizing:border-box;

}

body{

font-family:'Poppins',sans-serif;
background:var(--light);
overflow-x:hidden;

}

a{

text-decoration:none;

}

img{

max-width:100%;
display:block;

}

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

.top-bar{

background:#07111d;
padding:10px 0;
border-bottom:1px solid rgba(255,255,255,.08);

}

.top-contact{

display:flex;
gap:25px;
align-items:center;

}

.top-contact a{

color:#d9dce2;
font-size:14px;
transition:.3s;

}

.top-contact i{

color:var(--primary);
margin-right:8px;

}

.top-contact a:hover{

color:var(--primary);

}

.top-social{

display:flex;
justify-content:flex-end;
gap:12px;

}

.top-social a{

width:36px;
height:36px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:rgba(255,255,255,.06);
color:#fff;
transition:.3s;

}

.top-social a:hover{

background:linear-gradient(135deg,var(--primary),var(--secondary));
transform:translateY(-3px);

}

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

.main-header{

position:sticky;
top:0;
z-index:9999;
background:var(--dark) !important;
box-shadow:0 10px 35px rgba(0,0,0,.15);
}

.navbar{

padding:3px 0;

}

.navbar-brand img{

height:62px;
transition:.4s;

}

.navbar-brand:hover img{

transform:scale(1.05);

}

/*==============================
NAVIGATION
==============================*/

.navbar-nav{

gap:12px;

}

.nav-link{

font-size:15px;
font-weight:600;
color:#fff !important;
padding:30px 14px !important;
position:relative;
transition:.3s;

}

.nav-link::after{

content:"";
position:absolute;
left:14px;
bottom:18px;
height:3px;
width:0;
border-radius:30px;
background:linear-gradient(90deg,var(--primary),var(--secondary));
transition:.35s;

}

.nav-link:hover{

color:#5fb0ff !important;

}

.nav-link:hover::after{

width:calc(100% - 28px);

}

.nav-link.active{

color:#5fb0ff !important;

}

.nav-link.active::after{

width:calc(100% - 28px);

}

.dropdown-toggle::after{

margin-left:8px;
vertical-align:middle;

}

/*==============================
SEARCH BUTTON
==============================*/

.search-btn{

width:48px;
height:48px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
border:1px solid rgba(255,255,255,.15);
color:#fff;
font-size:18px;
transition:.35s;

}

.search-btn:hover{

background:linear-gradient(135deg,var(--primary),var(--secondary));
border-color:transparent;
color:#fff;
transform:rotate(15deg);

}

/*==============================
CALL BUTTON
==============================*/

.call-btn{

display:flex;
align-items:center;
gap:12px;
color:#fff;
transition:.35s;

}

.call-btn i{

width:48px;
height:48px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:linear-gradient(135deg,var(--primary),var(--secondary));
font-size:18px;

}

.call-btn span{

display:flex;
flex-direction:column;
font-size:12px;
line-height:18px;
color:#cdd6e2;

}

.call-btn strong{

font-size:15px;
font-weight:600;
color:#fff;

}

.call-btn:hover{

transform:translateY(-3px);

}

/*==============================
QUOTE BUTTON
==============================*/

.quote-btn{

display:inline-flex;
align-items:center;
justify-content:center;
padding:15px 28px;
border-radius:60px;
background:linear-gradient(135deg,var(--primary),var(--secondary));
color:#fff;
font-weight:600;
transition:.35s;
box-shadow:0 15px 35px rgba(15,111,234,.35);

}

.quote-btn:hover{

transform:translateY(-4px);
color:#fff;
box-shadow:0 20px 40px rgba(15,111,234,.45);

}

/*==============================
TOGGLER
==============================*/

.navbar-toggler{

color:#fff;
font-size:28px;

}

.navbar-toggler:focus{

box-shadow:none;

}

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

.main-header.scrolled{

background:#07111d;
box-shadow:0 20px 50px rgba(0,0,0,.18);

}

.main-header.scrolled .navbar{

padding:10px 0;

}

.main-header.scrolled .navbar-brand img{

height:55px;

}

/*==============================
TRANSITIONS
==============================*/

.main-header,
.navbar,
.navbar-brand img{

transition:.35s;

}

/*====================================================
            BOOTSTRAP MEGA MENU
=====================================================*/

.mega-menu{
    position:static !important;
}

/* Mega Dropdown */

.mega-dropdown{

    width:100%;
    left:0;
    right:0;
    top:100%;

    margin-top:0;

    border:none;

    border-radius:0 0 20px 20px;

    padding:40px;

    background:#ffffff;

    box-shadow:0 20px 60px rgba(0,0,0,.15);

    display:block;

    opacity:0;

    visibility:hidden;

    transform:translateY(30px);

    transition:.35s ease;

}

/* Show Menu */

.mega-menu:hover .mega-dropdown{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

/* Columns */

.mega-dropdown .col-lg-3{

    position:relative;

}

/* Heading */

.mega-dropdown h5{

    font-size:20px;

    font-weight:700;

    color:#0B1624;

    margin-bottom:25px;

    position:relative;

    padding-bottom:12px;

}

.mega-dropdown h5::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:55px;

    height:4px;

    border-radius:30px;

    background:linear-gradient(90deg,#0F6FEA,#1C87FF);

}

/* Links */

.mega-dropdown a{

    display:block;

    color:#555;

    font-size:15px;

    font-weight:500;

    padding:12px 0;

    transition:.35s;

    position:relative;

    padding-left:20px;

}

/* Arrow */

.mega-dropdown a::before{

    content:"\F285";

    font-family:"bootstrap-icons";

    position:absolute;

    left:0;

    color:#0F6FEA;

    transition:.35s;

}

/* Hover */

.mega-dropdown a:hover{

    color:#0F6FEA;

    padding-left:28px;

}

.mega-dropdown a:hover::before{

    left:8px;

}

/*==========================
Banner Box
===========================*/

.menu-banner{

    background:linear-gradient(135deg,#0F6FEA,#1C87FF);

    border-radius:20px;

    padding:20px;

    text-align:center;

    color:#fff;

    overflow:hidden;

    height:100%;

    position:relative;

}

.menu-banner img{

    border-radius:15px;

    transition:.4s;

    margin-bottom:20px;

}

.menu-banner:hover img{

    transform:scale(1.05);

}

.menu-banner h4{

    font-size:24px;

    font-weight:700;

    margin-bottom:12px;

}

.menu-banner p{

    font-size:14px;

    line-height:28px;

    margin-bottom:20px;

}

.menu-banner .btn{

    border-radius:50px;

    padding:12px 28px;

    background:#fff;

    color:#0F6FEA;

    border:none;

    font-weight:600;

}

.menu-banner .btn:hover{

    background:#081624;

    color:#fff;

}

/*==========================
Animation
===========================*/

@keyframes megaFade{

    from{

        opacity:0;

        transform:translateY(25px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.mega-menu:hover .mega-dropdown{

    animation:megaFade .35s ease;

}

/*==========================
Dropdown Menu
===========================*/

.dropdown-menu{

    border:none;

    border-radius:15px;

    padding:12px 0;

    min-width:260px;

    box-shadow:0 15px 40px rgba(0,0,0,.12);

}

.dropdown-item{

    padding:12px 25px;

    font-size:15px;

    transition:.3s;

}

.dropdown-item:hover{

    background:#F5F8FC;

    color:#0F6FEA;

    padding-left:35px;

}

/*==========================
Desktop Hover
===========================*/

@media(min-width:1200px){

.navbar .dropdown:hover>.dropdown-menu{

display:block;

margin-top:0;

}

}

/*==========================
Responsive
===========================*/

@media(max-width:1199px){

.mega-dropdown{

position:relative;

width:100%;

padding:20px;

opacity:1;

visibility:visible;

transform:none;

box-shadow:none;

border-radius:15px;

display:none;

}

.mega-menu.show .mega-dropdown{

display:block;

}

.mega-dropdown .row{

row-gap:30px;

}

.menu-banner{

margin-top:20px;

}

}






/*====================================================
        MB SKYTECH DIGITAL
        FOOTER CSS PART 2A
======================================================*/

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

.footer-section{

    position:relative;

    background:#081624;

    padding:90px 0 60px;

    overflow:hidden;
    
}

/* Gradient Top Line */

.footer-section::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:5px;

    background:linear-gradient(90deg,
    #0F6FEA,
    #1C87FF,
    #0F6FEA);

}

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

.footer-section .container{

    position:relative;

    z-index:2;

}

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

.footer-widget{

    position:relative;

}

.footer-widget:not(:last-child){

    margin-bottom:30px;

}

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

.footer-logo{

    max-width:210px;

    margin-bottom:28px;

    transition:.4s;

}

.footer-logo:hover{

    transform:scale(1.04);

}

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

.footer-text{

    color:#c8d1dc;

    font-size:15px;

    line-height:30px;

    margin-bottom:30px;

}

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

.footer-widget h4{

    color:#ffffff;

    font-size:24px;

    font-weight:700;

    margin-bottom:30px;

    position:relative;

    padding-bottom:14px;

}

/* Blue Underline */

.footer-widget h4::before{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:65px;

    height:4px;

    border-radius:50px;

    background:linear-gradient(
    90deg,
    #0F6FEA,
    #1C87FF);

}

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

.newsletter-box h5{

    color:#ffffff;

    font-size:18px;

    font-weight:600;

    margin-bottom:18px;

}

/*=============================
        GRID SPACING
==============================*/

.footer-section .row{

    row-gap:40px;

}

/*=============================
        COLUMN SPACING
==============================*/

.footer-widget{

    padding-right:18px;

}

/*=============================
        PREMIUM DIVIDER
==============================*/

.footer-divider{

    width:100%;

    height:1px;

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

    margin:45px 0;

}

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

.footer-section::after{

    content:"";

    position:absolute;

    right:-120px;

    bottom:-120px;

    width:320px;

    height:320px;

    border-radius:50%;

    background:rgba(15,111,234,.08);

    filter:blur(30px);

}

/*=============================
        LEFT SHAPE
==============================*/

.footer-shape{

    position:absolute;

    left:-90px;

    top:-90px;

    width:220px;

    height:220px;

    border-radius:50%;

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

    filter:blur(40px);

}

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

.footer-section ::selection{

    background:#0F6FEA;

    color:#fff;

}

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

.footer-widget{

    transition:.35s;

}

.footer-widget:hover{

    transform:translateY(-4px);

}

/*=============================
        RESPONSIVE
==============================*/

@media(max-width:991px){

.footer-section{

padding:70px 0 40px;

}

.footer-widget{

padding-right:0;

}

.footer-widget h4{

font-size:22px;

}

}

@media(max-width:767px){

.footer-section{

text-align:left;

}

.footer-widget h4::before{

left:50%;

transform:translateX(-50%);

}

.footer-logo{

margin:auto auto 25px;

}

.footer-text{

font-size:14px;

line-height:28px;

}

}
/*==================================
        FOOTER MENU
===================================*/

.footer-widget ul{

    margin:0;
    padding:0;
    list-style:none;

}

.footer-widget ul li{

    margin-bottom:14px;

    position:relative;

}

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

.footer-widget ul li a{

    color:#cfd7e2;

    font-size:15px;

    font-weight:500;

    display:inline-flex;

    align-items:center;

    transition:.35s ease;

    position:relative;

    padding-left:18px;

}

/* Arrow */

.footer-widget ul li a::before{

    content:"\f105";

    font-family:"Font Awesome 6 Free";

    font-weight:900;

    position:absolute;

    left:0;

    color:#1C87FF;

    transition:.35s;

}

/* Hover */

.footer-widget ul li a:hover{

    color:#ffffff;

    padding-left:26px;

}

.footer-widget ul li a:hover::before{

    left:8px;

    color:#0F6FEA;

}

/*==================================
        CONTACT LIST
===================================*/

.footer-contact li{

    display:flex;

    align-items:flex-start;

    gap:15px;

    margin-bottom:22px;

    color:#d2dae5;

    line-height:28px;

}

/* Icon */

.footer-contact li i{

    width:45px;

    height:45px;

    border-radius:12px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(15,111,234,.12);

    color:#1C87FF;

    font-size:18px;

    flex-shrink:0;

    transition:.35s;

}

.footer-contact li:hover i{

    background:#0F6FEA;

    color:#fff;

    transform:translateY(-3px);

}

.footer-contact li a{

    color:#d2dae5;

    transition:.35s;

}

.footer-contact li a:hover{

    color:#1C87FF;

}

/*==================================
        NEWSLETTER
===================================*/

.newsletter-box{

    margin-top:25px;

}

.newsletter-box .input-group{

    overflow:hidden;

    border-radius:60px;

    background:#ffffff;

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

}

.newsletter-box .form-control{

    height:56px;

    border:none;

    box-shadow:none;

    padding-left:22px;

    font-size:15px;

}

.newsletter-box .form-control:focus{

    box-shadow:none;

}

.newsletter-box .btn{

    width:65px;

    border:none;

    background:linear-gradient(135deg,#0F6FEA,#1C87FF);

    color:#fff;

    transition:.35s;

}

.newsletter-box .btn:hover{

    background:#081624;

}

/*==================================
        LINK SEPARATOR
===================================*/

.footer-widget ul li:last-child{

    margin-bottom:0;

}

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

.footer-contact span{

    color:#d2dae5;

    font-size:15px;

}

/*==================================
        RESPONSIVE
===================================*/

@media(max-width:991px){

.footer-contact li{

align-items:center;

}

}

@media(max-width:767px){

.footer-widget ul li a{

justify-content:left;

}

.footer-contact li{

justify-content:left;

text-align:left;

}

.newsletter-box{

max-width:420px;

margin:30px auto 0;

}

}

/*====================================================
        MB SKYTECH DIGITAL
        FOOTER CSS PART 2C
======================================================*/

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

.footer-social{

    display:flex;
    align-items:center;
    gap:15px;
    margin-top:20px;
    flex-wrap:wrap;

}

.footer-social a{

    width:48px;
    height:48px;

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

    border-radius:50%;

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

    color:#ffffff;

    font-size:18px;

    transition:.4s ease;

    position:relative;

    overflow:hidden;

}

.footer-social a::before{

    content:"";

    position:absolute;

    width:0;
    height:100%;

    left:0;
    top:0;

    background:linear-gradient(135deg,#0F6FEA,#1C87FF);

    transition:.4s;

    z-index:0;

}

.footer-social a i{

    position:relative;

    z-index:2;

}

.footer-social a:hover::before{

    width:100%;

}

.footer-social a:hover{

    transform:translateY(-6px) rotate(360deg);

    box-shadow:0 15px 30px rgba(15,111,234,.35);

}

/*==================================
        COPYRIGHT
===================================*/

.copyright-area{

    background:#06111d;

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

    padding:22px 0;

}

.copyright-area p{

    margin:0;

    color:#c8d2de;

    font-size:15px;

}

.copyright-area a{

    color:#c8d2de;

    margin:0 8px;

    transition:.35s;

}

.copyright-area a:hover{

    color:#1C87FF;

}

.copyright-area span{

    color:rgba(255,255,255,.20);

}

/*==================================
        SCROLL TO TOP
===================================*/

.scroll-top{

    position:fixed;

    right:25px;

    bottom:25px;

    width:55px;

    height:55px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:linear-gradient(135deg,#0F6FEA,#1C87FF);

    color:#fff;

    font-size:20px;

    text-decoration:none;

    opacity:0;

    visibility:hidden;

    transition:.4s;

    z-index:9999;

    box-shadow:0 15px 35px rgba(15,111,234,.35);

}

.scroll-top.active{

    opacity:1;

    visibility:visible;

}

.scroll-top:hover{

    transform:translateY(-6px);

    color:#fff;

}

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

.footer-widget{

    animation:fadeUp .8s ease;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*==================================
        FLOATING SHAPES
===================================*/

.footer-circle-one{

    position:absolute;

    width:180px;

    height:180px;

    border-radius:50%;

    background:rgba(15,111,234,.06);

    left:-70px;

    bottom:80px;

    animation:floatOne 8s infinite ease-in-out;

}

.footer-circle-two{

    position:absolute;

    width:250px;

    height:250px;

    border-radius:50%;

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

    right:-90px;

    top:50px;

    animation:floatTwo 10s infinite ease-in-out;

}

@keyframes floatOne{

    50%{

        transform:translateY(-20px);

    }

}

@keyframes floatTwo{

    50%{

        transform:translateY(20px);

    }

}

/*==================================
        RESPONSIVE
===================================*/

@media(max-width:991px){

.footer-social{

justify-content:center;

}

.copyright-area{

text-align:center;

}

.copyright-area .text-lg-end{

margin-top:12px;

text-align:center !important;

}

}

@media(max-width:767px){

.footer-social{

gap:10px;

}

.footer-social a{

width:42px;

height:42px;

font-size:16px;

}

.copyright-area p{

font-size:14px;

}

.copyright-area a{

display:inline-block;

margin:5px 8px;

}

.scroll-top{

right:15px;

bottom:15px;

width:48px;

height:48px;

}

}