/* ==========================================================
   VISIONARY SOLUTIONS
   STYLE.CSS
   PHASE 5A
   ----------------------------------------------------------
   Foundation
   Typography
   Layout
   Navbar
   Hero Carousel
   Buttons
   Section Framework
========================================================== */

/* ==========================================================
   ROOT VARIABLES
========================================================== */

:root {

    --vs-navy: #0D1B2A;
    --vs-navy-light: #15273c;

    --vs-royal: #1D4ED8;
    --vs-royal-light: #3B82F6;

    --vs-light: #60A5FA;

    --vs-white: #FFFFFF;

    --vs-grey: #E5E7EB;
    --vs-grey-light: #F3F4F6;

    --vs-dark-grey: #1F2937;

    --vs-success: #10B981;

    --vs-transition:
        all .35s ease;

    --vs-shadow:
        0 10px 30px rgba(0,0,0,.25);

    --vs-shadow-lg:
        0 20px 60px rgba(0,0,0,.40);

    --vs-border-radius:
        16px;

    --navbar-height:
        90px;
}

/* ==========================================================
   RESET
========================================================== */

* {
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html {
    scroll-behavior:smooth;
}

body {

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

    background:
        var(--vs-navy);

    color:
        var(--vs-white);

    overflow-x:hidden;

    line-height:1.7;
}

img {

    max-width:100%;
    height:auto;
    display:block;

}

a {

    text-decoration:none;

}

ul {

    list-style:none;

}

/* ==========================================================
   TYPOGRAPHY
========================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {

    font-weight:700;
    line-height:1.2;

}

.section-title {

    font-size:3rem;

    margin-bottom:1rem;

}

.section-subtitle {

    max-width:800px;

    margin:0 auto;

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

}

.section-tag {

    display:inline-block;

    color:
        var(--vs-light);

    font-size:.85rem;

    font-weight:700;

    letter-spacing:2px;

    margin-bottom:15px;

}

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

.container {

    position:relative;
    z-index:2;

}

.section-padding {

    padding:
        120px 0;

}

.bg-dark-section {

    background:
        linear-gradient(
            180deg,
            #0F1E30,
            #08111D
        );

}

/* ==========================================================
   NAVBAR
========================================================== */

#mainNavbar {

    height:
        var(--navbar-height);

    transition:
        var(--vs-transition);

    background:
        transparent;

    z-index:9999;

}

#mainNavbar.scrolled {

    background:
        rgba(13,27,42,.95);

    backdrop-filter:
        blur(12px);

    box-shadow:
        0 5px 20px rgba(0,0,0,.35);

}

.navbar-logo {

    width:60px;
    height:auto;

}

.brand-text {

    display:flex;

    flex-direction:column;

    margin-left:12px;

}

.brand-title {

    font-weight:800;

    color:
        var(--vs-white);

}

.brand-subtitle {

    font-size:.75rem;

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

}

.navbar-nav {

    align-items:center;

}

.nav-link {

    color:
        rgba(255,255,255,.85) !important;

    margin:
        0 12px;

    font-weight:500;

    transition:
        var(--vs-transition);

    position:relative;

}

.nav-link:hover {

    color:
        var(--vs-light) !important;

}

.nav-link::after {

    content:"";

    position:absolute;

    left:0;
    bottom:-6px;

    width:0;

    height:2px;

    background:
        var(--vs-light);

    transition:
        var(--vs-transition);

}

.nav-link:hover::after {

    width:100%;

}

/* ==========================================================
   DROPDOWN
========================================================== */

.dropdown-menu {

    background:
        rgba(13,27,42,.98);

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

    border-radius:
        12px;

    padding:
        12px;

    min-width:
        260px;

}

.dropdown-item {

    color:
        var(--vs-grey);

    padding:
        10px 15px;

    border-radius:
        8px;

    transition:
        var(--vs-transition);

}

.dropdown-item:hover {

    background:
        rgba(96,165,250,.12);

    color:
        var(--vs-light);

}

/* ==========================================================
   NAV CTA
========================================================== */

.nav-cta {

    margin-left:25px;

}

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

.btn {

    border-radius:
        12px;

    transition:
        var(--vs-transition);

    padding:
        14px 28px;

    font-weight:600;

}

.btn-primary {

    background:
        var(--vs-royal);

    border:
        1px solid var(--vs-royal);

}

.btn-primary:hover {

    background:
        var(--vs-light);

    border-color:
        var(--vs-light);

    transform:
        translateY(-3px);

    box-shadow:
        0 15px 35px rgba(96,165,250,.35);

}

.btn-outline-light:hover {

    transform:
        translateY(-3px);

}

/* ==========================================================
   HERO SECTION
========================================================== */

#hero {

    position:relative;

}

.hero-slide {

    min-height:100vh;

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    position:relative;

}

.hero-slide-1{
    background-image:url('../images/cityscape.webp');
}

.hero-slide-2{
    background-image:url('../images/servers.webp');
}

.hero-slide-3{
    background-image:url('../images/director2.webp');
}

.hero-slide-4{
    background-image:url('../images/morne coastline.webp');
}

.hero-overlay {

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(5,10,20,.85),
            rgba(5,10,20,.55),
            rgba(5,10,20,.40)
        );

}

.hero-content {

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    z-index:2;

}

.hero-badge {

    display:inline-block;

    padding:
        10px 18px;

    border-radius:
        30px;

    background:
        rgba(96,165,250,.12);

    border:
        1px solid rgba(96,165,250,.25);

    color:
        var(--vs-light);

    margin-bottom:25px;

}

.hero-title {

    font-size:
        clamp(
            3rem,
            6vw,
            4rem
        );

    font-weight:800;

    margin-bottom:25px;

    line-height:1.1;

}

.hero-title-contrast {

       color: var(--vs-light) !important;
       
}

.hero-description {

    font-size:1.2rem;

    max-width:700px;

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

    margin-bottom:35px;

}

.hero-buttons {

    display:flex;

    gap:20px;

    flex-wrap:wrap;

}

/* ==========================================================
   CAROUSEL
========================================================== */

.carousel-indicators {

    bottom:40px;

}

.carousel-indicators button {

    width:14px !important;
    height:14px !important;

    border-radius:50%;

}

.carousel-control-prev,
.carousel-control-next {

    width:6%;

}

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

.section-header {

    margin-bottom:60px;

}

.section-header .section-title {

    margin-bottom:20px;

}

/* ==========================================================
   UTILITY CLASSES
========================================================== */

.text-gradient {

    background:
        linear-gradient(
            90deg,
            var(--vs-light),
            var(--vs-royal-light)
        );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

.shadow-glow {

    box-shadow:
        0 0 30px rgba(96,165,250,.25);

}

.nav-link.active {

    color:
        var(--vs-light) !important;

}

/* ==========================================================
   PHASE 5B
   ----------------------------------------------------------
   Cards
   Who We Help
   Services
   Why Us
   Profile
   Expertise
   Portfolio
========================================================== */

/* ==========================================================
   GLOBAL CARD SYSTEM
========================================================== */

.vs-card {

    position:relative;

    height:100%;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.04),
            rgba(255,255,255,.02)
        );

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

    border-radius:
        var(--vs-border-radius);

    padding:35px;

    transition:
        var(--vs-transition);

    overflow:hidden;

    backdrop-filter:
        blur(10px);

}

.vs-card::before {

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:3px;

    background:
        linear-gradient(
            90deg,
            var(--vs-light),
            var(--vs-royal)
        );

    transform:
        scaleX(0);

    transform-origin:left;

    transition:
        var(--vs-transition);

}

.vs-card:hover::before {

    transform:
        scaleX(1);

}

.vs-card:hover {

    border-color:
        rgba(96,165,250,.25);

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

}

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

.hover-lift:hover {

    transform:
        translateY(-10px);

}

.hover-glow:hover {

    box-shadow:
        0 0 40px rgba(96,165,250,.25);

}

/* ==========================================================
   WHO WE HELP
========================================================== */

.audience-card {

    text-align:center;

}

.card-icon {

    width:90px;
    height:90px;

    margin:0 auto 25px;

    border-radius:50%;

    display:flex;

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

    background:
        rgba(96,165,250,.08);

    border:
        1px solid rgba(96,165,250,.15);

}

.card-icon i {

    font-size:2rem;

    color:
        var(--vs-light);

}

.audience-card h3 {

    margin-bottom:15px;

}

.audience-card p {

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

}

/* ==========================================================
   SERVICES
========================================================== */

.service-card {

    text-align:center;

}

.service-icon {

    width:90px;
    height:90px;

    margin:0 auto 25px;

    border-radius:20px;

    display:flex;

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

    background:
        linear-gradient(
            135deg,
            rgba(29,78,216,.18),
            rgba(96,165,250,.12)
        );

}

.service-icon i {

    font-size:2rem;

    color:
        var(--vs-light);

}

.service-card h3 {

    margin-bottom:15px;

}

.service-card p {

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

}

/* ==========================================================
   WHY US
========================================================== */

.value-card {

    text-align:center;

}

.value-icon {

    font-size:2.5rem;

    margin-bottom:20px;

    color:
        var(--vs-light);

}

.value-card h3 {

    margin-bottom:15px;

}

.value-card p {

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

}

/* ==========================================================
   PROFILE SECTION
========================================================== */

.profile-image-container {

    position:relative;

}

.profile-image {

    width:100%;

    border-radius:24px;

    border:
        2px solid rgba(96,165,250,.15);

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

}

.profile-image-container::after {

    content:"";

    position:absolute;

    inset:-15px;

    border-radius:30px;

    border:
        1px solid rgba(96,165,250,.10);

    z-index:-1;

}

.profile-subtitle {

    color:
        var(--vs-light);

    margin-bottom:25px;

}

.profile-highlights {

    margin-top:35px;

}

.highlight-item {

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:15px;

    font-weight:500;

}

.highlight-item i {

    color:
        var(--vs-success);

}

/* ==========================================================
   EXPERTISE SECTION
========================================================== */

.expertise-grid {

    display:grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(180px,1fr)
        );

    gap:20px;

}

.expertise-card {

    display:flex;

    flex-direction:column;

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

    text-align:center;

    min-height:160px;

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

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

    border-radius:
        16px;

    transition:
        var(--vs-transition);

    cursor:pointer;

}

.expertise-card:hover {

    transform:
        translateY(-8px);

    border-color:
        rgba(96,165,250,.25);

    background:
        rgba(96,165,250,.06);

}

.expertise-card i {

    font-size:2rem;

    color:
        var(--vs-light);

    margin-bottom:15px;

}

.expertise-card span {

    font-weight:600;

}

/* ==========================================================
   PORTFOLIO SECTION
========================================================== */

.portfolio-card {

    text-align:left;

}

.portfolio-icon {

    width:70px;
    height:70px;

    display:flex;

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

    border-radius:18px;

    margin-bottom:25px;

    background:
        linear-gradient(
            135deg,
            rgba(29,78,216,.15),
            rgba(96,165,250,.08)
        );

}

.portfolio-icon i {

    font-size:1.7rem;

    color:
        var(--vs-light);

}

.portfolio-card h3 {

    margin-bottom:15px;

}

.portfolio-card p {

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

}

/* ==========================================================
   CARD MICRO-ANIMATIONS
========================================================== */

.service-card:hover .service-icon,
.portfolio-card:hover .portfolio-icon,
.audience-card:hover .card-icon {

    transform:
        scale(1.08);

}

.service-icon,
.portfolio-icon,
.card-icon {

    transition:
        var(--vs-transition);

}

/* ==========================================================
   SECTION CONTRAST HOVER
========================================================== */

#who-we-help:hover,
#services:hover,
#why-us:hover,
#profile:hover,
#expertise:hover,
#portfolio:hover {

    filter:
        contrast(105%);

}

/* ==========================================================
   SECTION SPACING REFINEMENTS
========================================================== */

#services .row,
#portfolio .row {

    row-gap:30px;

}

#expertise {

    position:relative;

    overflow:hidden;

}

#portfolio {

    position:relative;

}

#profile {

    position:relative;

}

/* ==========================================================
   PHASE 5C
   ----------------------------------------------------------
   Counters
   CTA
   Contact
   Footer
   WhatsApp
   Responsive Layout
========================================================== */

/* ==========================================================
   COUNTERS
========================================================== */

#counters {

    position:relative;

    padding:120px 0;

    background:
        linear-gradient(
            135deg,
            #08111D,
            #10243D
        );

    overflow:hidden;

}

.counter-overlay {

    position:absolute;

    inset:0;

    background:
        radial-gradient(
            circle at center,
            rgba(96,165,250,.08),
            transparent 70%
        );

}

.counter-box {

    position:relative;

    z-index:2;

    padding:20px;

}

.counter {

    font-size:4rem;

    font-weight:800;

    color:
        var(--vs-light);

    line-height:1;

}

.counter-symbol {

    font-size:2rem;

    font-weight:700;

    color:
        var(--vs-white);

}

.counter-box h4 {

    margin-top:20px;

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

    font-size:1.1rem;

}

/* ==========================================================
   CTA SECTION
========================================================== */

#cta {

    background:
        linear-gradient(
            135deg,
            rgba(29,78,216,.15),
            rgba(96,165,250,.08)
        );

}

.cta-container {

    padding:70px;

    border-radius:24px;

    border:
        1px solid rgba(96,165,250,.15);

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

    backdrop-filter:
        blur(12px);

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

}

.cta-title {

    font-size:2.7rem;

    margin-bottom:20px;

}

.cta-description {

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

    font-size:1.1rem;

}

.cta-button {

    min-width:240px;

}

/* ==========================================================
   CONTACT SECTION
========================================================== */

.contact-info-card,
.contact-form-card {

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

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

    border-radius:
        20px;

    padding:40px;

    height:100%;

    transition:
        var(--vs-transition);

}

.contact-info-card:hover,
.contact-form-card:hover {

    border-color:
        rgba(96,165,250,.25);

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

}

.contact-intro {

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

    margin-bottom:30px;

}

.contact-item {

    display:flex;

    gap:20px;

    margin-bottom:30px;

    align-items:flex-start;

}

.contact-icon {

    width:55px;
    height:55px;

    min-width:55px;

    display:flex;

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

    border-radius:14px;

    background:
        rgba(96,165,250,.08);

}

.contact-icon i {

    color:
        var(--vs-light);

    font-size:1.2rem;

}

.contact-item h5 {

    margin-bottom:6px;

}

.contact-item a {

    color:
        var(--vs-light);

}

.contact-item a:hover {

    color:
        var(--vs-white);

}

.form-label {

    margin-bottom:10px;

    font-weight:600;

}

.form-control,
.form-select {

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

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

    color:
        var(--vs-white);

    padding:14px 16px;

    border-radius:12px;

}

.form-control:focus,
.form-select:focus {

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

    color:
        var(--vs-white);

    border-color:
        var(--vs-light);

    box-shadow:
        0 0 0 .25rem rgba(96,165,250,.15);

}

textarea.form-control {

    resize:none;

}

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

#whatsappButton {

    position:fixed;

    right:30px;
    bottom:30px;

    width:70px;
    height:70px;

    display:flex;

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

    border-radius:50%;

    background:
        #25D366;

    color:white;

    font-size:2rem;

    z-index:99999;

    box-shadow:
        0 10px 30px rgba(0,0,0,.35);

    transition:
        var(--vs-transition);

}

#whatsappButton:hover {

    transform:
        scale(1.12);

    color:white;

}

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

#footer {

    position:relative;

    background:
        #050A12;

    padding:
        100px 0 30px;

    overflow:hidden;

}

.footer-network {

    position:absolute;

    inset:0;

    opacity:.05;

    background:
        radial-gradient(
            circle,
            rgba(96,165,250,.4),
            transparent 70%
        );

}

.footer-logo {

    width:120px;

    margin-bottom:20px;

}

.footer-brand p {

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

}

.footer-links {

    padding-left:0;

}

.footer-links li {

    margin-bottom:12px;

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

}

.footer-links a {

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

    transition:
        var(--vs-transition);

}

.footer-links a:hover {

    color:
        var(--vs-light);

}

.footer-divider {

    margin:
        50px 0 25px;

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

}

.footer-bottom {

    text-align:center;

}

.footer-bottom p {

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

    margin-bottom:0;

}

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

/* XL */

@media (max-width:1400px) {

    .hero-title {

        font-size:4.8rem;

    }

}

/* LG */

@media (max-width:1200px) {

    .section-title {

        font-size:2.6rem;

    }

    .hero-title {

        font-size:4rem;

    }

}

/* MD */

@media (max-width:992px) {

    .section-padding {

        padding:90px 0;

    }

    .navbar-collapse {

        background:
            rgba(13,27,42,.97);

        margin-top:20px;

        padding:20px;

        border-radius:16px;

    }

    .nav-cta {

        margin-left:0;
        margin-top:20px;

    }

    .hero-content {

        text-align:center;

    }

    .hero-description {

        margin-left:auto;
        margin-right:auto;

    }

    .hero-buttons {

        justify-content:center;

    }

    .cta-container {

        padding:45px;

    }

    .cta-title {

        font-size:2.2rem;

    }

}

/* SM */

@media (max-width:768px) {

    .hero-title {

        font-size:3rem;

    }

    .section-title {

        font-size:2.2rem;

    }

    .counter {

        font-size:3rem;

    }

    .cta-title {

        font-size:1.9rem;

    }

    .cta-container {

        text-align:center;

    }

    .contact-info-card,
    .contact-form-card {

        padding:30px;

    }

}

/* XS */

@media (max-width:576px) {

    .hero-title {

        font-size:2.3rem;

    }

    .hero-description {

        font-size:1rem;

    }

    .section-title {

        font-size:1.8rem;

    }

    .counter {

        font-size:2.4rem;

    }

    .cta-container {

        padding:30px;

    }

    .btn-lg {

        width:100%;

    }

    #whatsappButton {

        width:60px;
        height:60px;

        font-size:1.6rem;

        right:20px;
        bottom:20px;

    }

}

.section-active {

    filter:
        contrast(105%);

}

.form-select{
    background:#152238;
    color:#fff;
    border:1px solid rgba(255,255,255,.15);
    height:58px;
    border-radius:12px;
}

.form-select:focus{
    border-color:#2d7ff9;
    box-shadow:0 0 0 .25rem rgba(45,127,249,.25);
}

.form-select {
    background-color: #152238;
    color: #ffffff;
    border: 1px solid rgba(255,255,255,.15);
}

.form-select option {
    background: #152238;
    color: #ffffff;
}





.hero-panel{
    max-width:800px;
    width:100%;

    background:
        rgba(0,0,0,.25);

    backdrop-filter:
        blur(8px);

    padding:40px;

    border-radius:20px;

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

}

.hero-panel-right{

    margin-left:auto;

}

.hero-slide-3 .hero-panel{
    max-width:900px;
}

.hero-label{

    display:inline-block;

    color:#60A5FA;

    font-weight:700;

    letter-spacing:2px;

    margin-bottom:15px;

}

.hero-line{

    width:120px;
    height:4px;

    background:#60A5FA;

    margin:25px 0;

}

.hero-ribbon{

    position:absolute;

    bottom:0;

    width:100%;

    display:flex;

    justify-content:center;

    gap:40px;

    padding:18px;

    background:
        rgba(0,0,0,.45);

    backdrop-filter:
        blur(12px);

    z-index:5;

}

.hero-ribbon span{

    color:white;

    font-size:.9rem;

    font-weight:600;

}