/*=========================================================
    AS Tech Vision
    Components CSS
    Part 1
    Header & Navigation
=========================================================*/


/*=========================================================
    Header
=========================================================*/

#siteHeader{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:9999;

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

    backdrop-filter:blur(16px);

    -webkit-backdrop-filter:blur(16px);

    border-bottom:1px solid transparent;

    transition:all .35s ease;

}

#siteHeader.is-scrolled{

    background:#FFFFFF;

    border-color:var(--ast-border);

    box-shadow:0 10px 35px rgba(15,23,42,.08);

}


/*=========================================================
    Navbar
=========================================================*/

.navbar{

    min-height:90px;

    padding:0;

}

.navbar>.container{

    display:flex;

    align-items:center;

    justify-content:space-between;

}


/*=========================================================
    Logo
=========================================================*/

.navbar-brand{

    display:flex;

    align-items:center;

    gap:14px;

    margin:0;

    padding:0;

    text-decoration:none;

}

.brand-logo{

    width:auto;

    height:68px;

}

.brand-name{

    color:var(--ast-dark);

    font-size:28px;

    font-weight:800;

    line-height:1.1;

}

.brand-tagline{

    display:block;

    color:var(--ast-muted);

    font-size:13px;

    font-weight:500;

    margin-top:3px;

}


/*=========================================================
    Navbar Menu
=========================================================*/

.navbar-nav{

    align-items:center;

    gap:6px;

}

.navbar-nav .nav-item{

    position:relative;

}

.navbar-nav .nav-link{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:6px;

    height:48px;

    padding:0 18px !important;

    border-radius:12px;

    color:var(--ast-dark);

    font-size:15px;

    font-weight:600;

    transition:.30s;

}

.navbar-nav .nav-link:hover{

    color:var(--ast-primary);

    background:#EEF5FF;

}

.navbar-nav .nav-link.active{

    color:#FFFFFF;

    background:var(--ast-primary);

}


/*=========================================================
    Dropdown Arrow
=========================================================*/

.dropdown-toggle::after{

    margin-left:7px;

    vertical-align:2px;

}


/*=========================================================
    Navbar Right
=========================================================*/

.navbar-actions{

    display:flex;

    align-items:center;

    gap:14px;

}


/*=========================================================
    Search Button
=========================================================*/

.header-search{

    width:46px;

    height:46px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#F4F7FB;

    color:var(--ast-dark);

    transition:.30s;

}

.header-search:hover{

    background:var(--ast-primary);

    color:#FFFFFF;

}


/*=========================================================
    Header CTA
=========================================================*/

.header-btn{

    height:48px;

    padding:0 28px;

}


/*=========================================================
    Navbar Toggler
=========================================================*/

.navbar-toggler{

    width:52px;

    height:52px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:none;

    border-radius:14px;

    background:#F4F7FB;

    box-shadow:none!important;

}

.navbar-toggler i{

    font-size:22px;

    color:var(--ast-dark);

}

.navbar-toggler:hover{

    background:var(--ast-primary);

}

.navbar-toggler:hover i{

    color:#FFFFFF;

}


/*=========================================================
    Sticky Space
=========================================================*/

body{

    padding-top:90px;

}
/*=========================================================
    AS Tech Vision
    Components CSS
    Part 2
    Mega Menu & Dropdown
=========================================================*/


/*=========================================================
    Bootstrap Dropdown
=========================================================*/

.dropdown{

    position:relative;

}

.dropdown-menu{

    min-width:260px;

    margin-top:18px;

    padding:18px;

    border:none;

    border-radius:22px;

    background:#FFFFFF;

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

    opacity:0;

    visibility:hidden;

    display:block;

    transform:translateY(15px);

    transition:all .30s ease;

}

.dropdown:hover>.dropdown-menu{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.dropdown-item{

    display:flex;

    align-items:center;

    gap:12px;

    padding:12px 16px;

    border-radius:12px;

    color:var(--ast-dark);

    font-size:15px;

    font-weight:500;

    transition:.30s;

}

.dropdown-item:hover{

    background:#EEF5FF;

    color:var(--ast-primary);

}

.dropdown-item i{

    width:18px;

    color:var(--ast-primary);

}


/*=========================================================
    Mega Menu
=========================================================*/

.mega-menu{

    left:50%!important;

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

    width:1120px;

    max-width:95vw;

    padding:35px;

    border:none;

    border-radius:24px;

    background:#FFFFFF;

    box-shadow:0 25px 70px rgba(15,23,42,.12);

}

.dropdown:hover>.mega-menu{

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

}


/*=========================================================
    Mega Grid
=========================================================*/

.mega-grid{

    display:grid;

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

    gap:30px;

}


/*=========================================================
    Mega Column
=========================================================*/

.mega-column h6{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:20px;

    color:var(--ast-primary);

    font-size:15px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.5px;

}

.mega-column h6 i{

    font-size:18px;

}


/*=========================================================
    Mega Links
=========================================================*/

.mega-column ul{

    margin:0;

    padding:0;

}

.mega-column li{

    margin-bottom:10px;

}

.mega-column a{

    display:flex;

    align-items:flex-start;

    gap:12px;

    padding:12px 14px;

    border-radius:14px;

    color:var(--ast-dark);

    transition:.30s;

}

.mega-column a:hover{

    background:#F8FBFF;

    color:var(--ast-primary);

    transform:translateX(6px);

}

.mega-column a i{

    margin-top:3px;

    color:var(--ast-primary);

    font-size:18px;

}


/*=========================================================
    Mega Link Content
=========================================================*/

.mega-link-content{

    display:flex;

    flex-direction:column;

}

.mega-link-title{

    font-size:15px;

    font-weight:700;

    color:var(--ast-dark);

}

.mega-link-desc{

    margin-top:3px;

    color:var(--ast-muted);

    font-size:13px;

    line-height:1.5;

}


/*=========================================================
    Featured Card
=========================================================*/

.mega-feature{

    height:100%;

    padding:28px;

    border-radius:20px;

    background:linear-gradient(
        135deg,
        var(--ast-primary),
        #3A8BFF
    );

    color:#FFFFFF;

}

.mega-feature h5{

    color:#FFFFFF;

    margin-bottom:15px;

}

.mega-feature p{

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

    font-size:14px;

    line-height:1.7;

}

.mega-feature .btn{

    margin-top:18px;

}


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

@keyframes megaFade{

    from{

        opacity:0;

        transform:translateY(18px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.dropdown:hover>.dropdown-menu{

    animation:megaFade .30s ease;

}


/*=========================================================
    Active Link
=========================================================*/

.dropdown-item.active{

    background:#EEF5FF;

    color:var(--ast-primary);

}


/*=========================================================
    Divider
=========================================================*/

.mega-divider{

    margin:18px 0;

    border-top:1px solid var(--ast-border);

}


/*=========================================================
    Mobile Fix
=========================================================*/

@media (max-width:991.98px){

    .dropdown-menu{

        display:none;

        opacity:1;

        visibility:visible;

        transform:none;

        width:100%;

        margin-top:10px;

        padding:12px;

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

        box-shadow:none;

        border-radius:16px;

    }

    .dropdown.show>.dropdown-menu{

        display:block;

    }

    .mega-menu{

        width:100%;

        max-width:100%;

        left:0!important;

        transform:none!important;

        padding:18px;

    }

    .mega-grid{

        grid-template-columns:1fr;

        gap:20px;

    }

    .mega-feature{

        margin-top:10px;

    }

}
/*=========================================================
    AS Tech Vision
    Components CSS
    Part 3
    Buttons • Cards • Forms • Badges
=========================================================*/


/*=========================================================
    Buttons
=========================================================*/

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    min-height:52px;

    padding:0 28px;

    border-radius:14px;

    border:none;

    font-size:15px;

    font-weight:600;

    cursor:pointer;

    transition:all .30s ease;

}

.btn i{

    font-size:16px;

}

.btn-primary{

    background:var(--ast-primary);

    color:#FFFFFF;

}

.btn-primary:hover{

    background:#0D5AB5;

    color:#FFFFFF;

    transform:translateY(-3px);

    box-shadow:0 15px 35px rgba(21,101,192,.25);

}

.btn-outline-primary{

    background:#FFFFFF;

    border:2px solid var(--ast-primary);

    color:var(--ast-primary);

}

.btn-outline-primary:hover{

    background:var(--ast-primary);

    color:#FFFFFF;

}

.btn-secondary{

    background:var(--ast-secondary);

    color:#FFFFFF;

}

.btn-secondary:hover{

    background:#EA580C;

    color:#FFFFFF;

}

.btn-light{

    background:#FFFFFF;

    color:var(--ast-primary);

}

.btn-light:hover{

    background:#F8FAFC;

    transform:translateY(-3px);

}

.btn-sm{

    min-height:42px;

    padding:0 18px;

    font-size:14px;

}

.btn-lg{

    min-height:60px;

    padding:0 36px;

    font-size:16px;

}


/*=========================================================
    Cards
=========================================================*/

.ast-card{

    background:#FFFFFF;

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

    border-radius:22px;

    overflow:hidden;

    box-shadow:var(--shadow-sm);

    transition:.35s;

}

.ast-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow-lg);

}

.ast-card-header{

    padding:24px 30px;

    border-bottom:1px solid var(--ast-border);

}

.ast-card-body{

    padding:30px;

}

.ast-card-footer{

    padding:22px 30px;

    border-top:1px solid var(--ast-border);

}


/*=========================================================
    Feature Card
=========================================================*/

.feature-card{

    background:#FFFFFF;

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

    border-radius:22px;

    padding:40px 30px;

    text-align:center;

    transition:.35s;

}

.feature-card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow-lg);

}

.feature-icon{

    width:84px;

    height:84px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:0 auto 25px;

    border-radius:20px;

    background:#EEF5FF;

    color:var(--ast-primary);

    font-size:34px;

    transition:.35s;

}

.feature-card:hover .feature-icon{

    background:var(--ast-primary);

    color:#FFFFFF;

}


/*=========================================================
    Forms
=========================================================*/

.form-group{

    margin-bottom:22px;

}

.form-label{

    display:block;

    margin-bottom:8px;

    color:var(--ast-dark);

    font-size:15px;

    font-weight:600;

}

.form-control{

    width:100%;

    height:54px;

    padding:0 18px;

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

    border-radius:14px;

    background:#FFFFFF;

    transition:.30s;

}

textarea.form-control{

    height:140px;

    padding:16px 18px;

    resize:vertical;

}

.form-control:focus{

    border-color:var(--ast-primary);

    box-shadow:0 0 0 .2rem rgba(21,101,192,.12);

}

.form-select{

    height:54px;

    border-radius:14px;

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

}

.form-select:focus{

    border-color:var(--ast-primary);

    box-shadow:0 0 0 .2rem rgba(21,101,192,.12);

}


/*=========================================================
    Input Group
=========================================================*/

.input-group{

    display:flex;

    align-items:center;

}

.input-group .form-control{

    border-radius:14px 0 0 14px;

}

.input-group .btn{

    border-radius:0 14px 14px 0;

}


/*=========================================================
    Badges
=========================================================*/

.badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:8px 16px;

    border-radius:999px;

    font-size:13px;

    font-weight:700;

}

.badge-primary{

    background:#EAF3FF;

    color:var(--ast-primary);

}

.badge-success{

    background:#EAFBF0;

    color:var(--ast-success);

}

.badge-warning{

    background:#FFF5E8;

    color:var(--ast-secondary);

}

.badge-danger{

    background:#FEECEC;

    color:#DC2626;

}


/*=========================================================
    Alert
=========================================================*/

.alert{

    padding:18px 22px;

    border-radius:14px;

    border:1px solid transparent;

    margin-bottom:20px;

}

.alert-success{

    background:#ECFDF5;

    border-color:#BBF7D0;

    color:#15803D;

}

.alert-danger{

    background:#FEF2F2;

    border-color:#FECACA;

    color:#B91C1C;

}

.alert-warning{

    background:#FFF7ED;

    border-color:#FED7AA;

    color:#C2410C;

}

.alert-info{

    background:#EFF6FF;

    border-color:#BFDBFE;

    color:#1D4ED8;

}
/*=========================================================
    AS Tech Vision
    Components CSS
    Part 4
    Footer
=========================================================*/


/*=========================================================
    Footer
=========================================================*/

.footer{

    position:relative;

    overflow:hidden;

    background:#071C38;

    color:#D9E8FB;

    padding:70px 0 18px;

}

.footer::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        radial-gradient(circle at top left,
        rgba(249,115,22,.08),
        transparent 35%),

        radial-gradient(circle at bottom right,
        rgba(21,101,192,.08),
        transparent 40%);

    pointer-events:none;

}

.footer>.container{

    position:relative;

    z-index:2;

}


/*=========================================================
    Footer Heading
=========================================================*/

.footer h5{

    color:#FFFFFF;

    font-size:20px;

    font-weight:700;

    margin-bottom:22px;

}


/*=========================================================
    Footer Links
=========================================================*/

.footer-links{

    margin:0;

    padding:0;

    list-style:none;

}

.footer-links li{

    margin-bottom:12px;

}

.footer-links a{

    color:#D5E3F5;

    transition:.30s;

}

.footer-links a:hover{

    color:#FFFFFF;

    padding-left:8px;

}


/*=========================================================
    Footer Divider
=========================================================*/

.footer hr{

    margin:40px 0 22px;

    border:none;

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

}


/*=========================================================
    Footer Bottom
=========================================================*/

.footer-bottom{

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    text-align:center;

    gap:10px;

}


/*=========================================================
    Copyright
=========================================================*/

.footer-copy{

    color:#AFC6E5;

    font-size:14px;

    line-height:1.8;

}

.footer-copy a{

    color:#FFFFFF;

    font-weight:600;

}

.footer-copy a:hover{

    color:var(--ast-secondary);

}

.footer-separator{

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

    margin:0 6px;

}


/*=========================================================
    Social Icons
=========================================================*/

.footer-social{

    display:flex;

    gap:12px;

    margin-top:28px;

}

.footer-social a{

    width:46px;

    height:46px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

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

    color:#FFFFFF;

    transition:.30s;

}

.footer-social a:hover{

    background:var(--ast-primary);

    transform:translateY(-4px);

}


/*=========================================================
    Footer Contact
=========================================================*/

.footer-contact{

    display:flex;

    flex-direction:column;

    gap:12px;

}

.footer-contact div{

    display:flex;

    gap:12px;

    align-items:flex-start;

    color:#D9E8FB;

}

.footer-contact i{

    margin-top:4px;

    color:var(--ast-secondary);

}


/*=========================================================
    Footer Logo
=========================================================*/

.footer-logo{

    max-height:68px;

    width:auto;

    margin-bottom:18px;

}


/*=========================================================
    Back To Top
=========================================================*/

#backToTop{

    position:fixed;

    right:25px;

    bottom:25px;

    width:52px;

    height:52px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:none;

    border-radius:50%;

    background:var(--ast-primary);

    color:#FFFFFF;

    cursor:pointer;

    opacity:0;

    visibility:hidden;

    z-index:9999;

    transition:.30s;

}

#backToTop.show{

    opacity:1;

    visibility:visible;

}

#backToTop:hover{

    background:var(--ast-secondary);

    transform:translateY(-5px);

}


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

@media(max-width:991px){

.footer{

    padding:60px 0 15px;

}

.footer h5{

    margin-top:15px;

}

.footer-links{

    margin-bottom:20px;

}

}

@media(max-width:767px){

.footer{

    text-align:center;

}

.footer-social{

    justify-content:center;

}

.footer-contact div{

    justify-content:center;

}

.footer-links a:hover{

    padding-left:0;

}

.footer-bottom{

    flex-direction:column;

    gap:5px;

}

.footer-separator{

    display:none;

}

}

@media(max-width:575px){

.footer{

    padding:50px 0 12px;

}

.footer-copy{

    font-size:13px;

}

#backToTop{

    width:46px;

    height:46px;

    right:18px;

    bottom:18px;

}

}
/*=========================================================
    AS Tech Vision
    Components CSS
    Part 5
    Reusable Components
=========================================================*/


/*=========================================================
    Pricing Card
=========================================================*/

.pricing-card{

    position:relative;

    background:#FFFFFF;

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

    border-radius:24px;

    overflow:hidden;

    transition:.35s;

    box-shadow:var(--shadow-sm);

}

.pricing-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow-lg);

}

.pricing-card.featured{

    border:2px solid var(--ast-primary);

}

.pricing-badge{

    position:absolute;

    top:20px;

    right:20px;

    padding:7px 18px;

    border-radius:999px;

    background:var(--ast-primary);

    color:#FFFFFF;

    font-size:12px;

    font-weight:700;

}

.pricing-header{

    padding:35px;

    text-align:center;

}

.pricing-price{

    margin:20px 0;

    color:var(--ast-primary);

    font-size:54px;

    font-weight:800;

}

.pricing-price small{

    font-size:16px;

    color:var(--ast-muted);

}

.pricing-features{

    padding:0 35px 35px;

    list-style:none;

}

.pricing-features li{

    display:flex;

    align-items:center;

    gap:12px;

    padding:12px 0;

    border-bottom:1px solid var(--ast-border);

}

.pricing-features li:last-child{

    border-bottom:none;

}

.pricing-features i{

    color:var(--ast-success);

}


/*=========================================================
    Feature Box
=========================================================*/

.feature-box{

    display:flex;

    gap:20px;

    align-items:flex-start;

}

.feature-box-icon{

    width:70px;

    height:70px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:18px;

    background:#EEF5FF;

    color:var(--ast-primary);

    font-size:30px;

    flex-shrink:0;

}

.feature-box-content h4{

    margin-bottom:12px;

}


/*=========================================================
    Testimonial
=========================================================*/

.testimonial{

    background:#FFFFFF;

    border-radius:22px;

    padding:35px;

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

    box-shadow:var(--shadow-sm);

}

.testimonial-text{

    font-style:italic;

    margin-bottom:25px;

}

.testimonial-user{

    display:flex;

    align-items:center;

    gap:15px;

}

.testimonial-user img{

    width:65px;

    height:65px;

    border-radius:50%;

    object-fit:cover;

}

.testimonial-user h6{

    margin-bottom:2px;

}

.testimonial-user span{

    font-size:14px;

    color:var(--ast-muted);

}


/*=========================================================
    FAQ
=========================================================*/

.faq-item{

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

    border-radius:18px;

    overflow:hidden;

    margin-bottom:18px;

}

.faq-question{

    padding:20px 24px;

    cursor:pointer;

    background:#FFFFFF;

    font-weight:700;

}

.faq-answer{

    padding:20px 24px;

    border-top:1px solid var(--ast-border);

    background:#FAFCFF;

}


/*=========================================================
    Breadcrumb
=========================================================*/

.breadcrumb-area{

    padding:90px 0 70px;

    background:#F8FAFC;

    text-align:center;

}

.breadcrumb{

    display:flex;

    justify-content:center;

    gap:10px;

    flex-wrap:wrap;

    margin:0;

    padding:0;

    list-style:none;

}

.breadcrumb a{

    color:var(--ast-primary);

}

.breadcrumb li{

    color:var(--ast-muted);

}


/*=========================================================
    Pagination
=========================================================*/

.pagination{

    display:flex;

    justify-content:center;

    gap:10px;

}

.pagination a{

    width:44px;

    height:44px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:12px;

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

    background:#FFFFFF;

    color:var(--ast-dark);

}

.pagination a:hover,

.pagination .active{

    background:var(--ast-primary);

    border-color:var(--ast-primary);

    color:#FFFFFF;

}


/*=========================================================
    Loading Spinner
=========================================================*/

.spinner{

    width:44px;

    height:44px;

    border:4px solid rgba(21,101,192,.15);

    border-top-color:var(--ast-primary);

    border-radius:50%;

    animation:spin .8s linear infinite;

}

@keyframes spin{

    to{

        transform:rotate(360deg);

    }

}


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

.fade-up{

    animation:fadeUp .7s ease both;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


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

.zoom-in{

    animation:zoomIn .6s ease both;

}

@keyframes zoomIn{

    from{

        opacity:0;

        transform:scale(.9);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}


/*=========================================================
    Hover Lift
=========================================================*/

.hover-lift{

    transition:.30s;

}

.hover-lift:hover{

    transform:translateY(-8px);

}


/*=========================================================
    Glass Card
=========================================================*/

.glass{

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

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

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

}


/*=========================================================
    End Components
=========================================================*/