/*               *\
  C O N T E N T S
\*               */
/*
    RESPONSIVE CONVENTIONS    
    GLOBAL
    FONTS
    HERO CONTAINER
    CONTAINERS
    CARDS
    BORDERS
    BUTTONS
    LISTS
    LINKS
    HEADER
    NEWSLETTER
    FOOTER
*/
/*                                          *\
  R E S P O N S I V E  C O N V E N T I O N S 
\*                                          */
/*
    @media only screen and (max-width: 550px) {} <--- MOBILE BREAKPOINT
    @media only screen and (min-width: 551px) and (max-width: 1058px) {} <--- TABLET BREAKPOINT
    @media only screen and (min-width: 1059px) {} <--- DESKTOP BREAKPOINT
*/
/*           *\
  G L O B A L
\*           */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px;
}
body {
    width: 100%;
}
:root {
    --soft-white: rgb(249, 249, 249);
    --yellow: rgb(255, 193, 7);
    --light-blue: rgb(103, 163, 254);
    --med-blue: rgb(36, 111, 223);
    --dark-blue: rgb(8, 13, 37);
    --dark-blue-opacity: rgba(8, 13, 37, 0.5);
    --light-grey: rgb(207, 207, 207);
    --med-grey: rgb(126, 126, 126);
    --blue-gradient: linear-gradient(135deg, rgba(8,13,37,1) 0%, rgba(16,55,95,1) 100%);
    --light-blue-gradient: linear-gradient(180deg, rgba(16,55,95,1) 0%, rgba(26,110,170,1) 10%, rgba(26,110,170,0) 50%);
}
/*         *\
  F O N T S 
\*         */
p, h1, h2, h3, h4, li, a {
    color: var(--dark-blue);
}
.white-text {
    color: var(--soft-white);
}
.yellow-text {
    color: var(--yellow);
}
@media only screen and (max-width: 550px) {
    .p-head {
        font-size: 1rem;
        font-weight: 600;
    }
    p { font-size: 0.8rem; }
    span { font-size: inherit; }
    h1 {  
        text-transform: uppercase;
        font-weight: 800;
        font-size: 3rem;
        letter-spacing: 0.1rem;
        line-height: 3.5rem;
    }
    h2 { font-size: 1.2rem; }
    h3 { font-size: 1rem; }
}
@media only screen and (min-width: 551px) and (max-width: 1058px) {
    .p-head {
        font-size: 1.2rem;
        font-weight: 600;
    }
    p { 
        font-size: 1rem;
        &:not(:last-child) {
            margin-bottom: 1rem;
        } 
    }
    span { font-size: inherit; }
    h1 {  
        text-transform: uppercase;
        font-weight: 800;
        font-size: 3.5rem;
        letter-spacing: 0.2rem;
        line-height: 4rem;
    }
    h2 { font-size: 2rem; }
    h3 { font-size: 1.1rem; }
}
@media only screen and (min-width: 1059px) {
    .p-head {
        font-size: 1.5rem;
        font-weight: 600;
    }
    p { 
        font-size: 1rem;
        &:not(:last-child) {
            margin-bottom: 1.25rem;
        } 
    }
    span { font-size: inherit; }
    h1 {  
        text-transform: uppercase;
        font-weight: 800;
        font-size: 4rem;
        letter-spacing: 0.25rem;
        line-height: 4.5rem;
    }
    h2 { font-size: 2.5rem; }
    h3 { font-size: 1.3rem; }
}
/*                          *\
  H E R O  C O N T A I N E R 
\*                          */
.top-hero {
    display: flex;
    position: relative;
    color: var(--dark-blue);
}
.top-hero:before {
    content: "";
    background-image: url("../images/bg-elements/network-vector.svg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    opacity: 0.25;
}
.top-hero h1 {
    color: var(--yellow);
    margin-bottom: 25px;
}
.top-hero ul {
    margin-top: 10px;
    list-style: none;
    line-height: 2rem;
    font-weight: 500;
}
.top-hero .inner-container {
    justify-content: center;
}
/*                   *\
  C O N T A I N E R S
\*                   */
.outer-container {
    display: flex;
    justify-content: center;
    margin: auto;
    width: 100%;
    max-width: 1600px;
    padding: 25px;
}
.container {
    display: flex;
    width: 100%;
}
.inner-container {
    display: flex;
    flex-basis: 48%;
    min-width: 350px;
    gap: 15px;
}
.image-container {
    width: 100%;
    display: flex;
}
.image-container img {
    object-fit: contain;
    width: 100%;
}
.justify-content-center {
    justify-content: center;
}
.align-items-center {
    align-items: center;
}
.flex-column {
    flex-direction: column;
}
.flex-wrap {
    flex-wrap: wrap;
}
.margin-auto {
    margin: auto;
}
.text-center {
    text-align: center;
}
.divider {
    border-bottom: 1px solid var(--light-grey);
    padding-bottom: 25px;
    margin-bottom: 25px;
}
@media only screen and (max-width: 550px) {
    .section {
        padding: 15px;
    }
    .outer-container {
        gap: 15px;
    }
}
@media only screen and (min-width: 551px) and (max-width: 1058px) {
    .section {
        padding: 25px;
    }
    .outer-container {
        gap: 25px;
    }
}
@media only screen and (min-width: 1059px) {
    .section {
        padding: 50px;
    }
    .outer-container {
        gap: 40px;
    }
}
/*         *\
  C A R D S
\*         */
.card {
    display: flex;
    flex-direction: column;
    flex-basis: 30%;
    min-width: 300px;
    max-width: 450px;
    margin: 1.5%;
    padding: 20px;
    gap: 20px;
    border-radius: 10px;
    color: var(--dark-blue);
}
.card:hover {
    box-shadow: 1px 2px 8px var(--dark-blue-opacity);
    transition: 0.3s ease-in;
}
.card:hover .card-heading {
    padding-left: 15px;
    color: var(--light-blue);
    transition: 0.3s ease-in;
}
.card:active {
    box-shadow: none;
}
.card:active .card-heading {
    padding-left: 0;
}
.card-heading {
    display: flex;
    align-items: center;
    column-gap: 10px;
    text-transform: uppercase;
}
.card-heading svg {
    height: 25px;
    width: auto;
}
/*             *\
  B O R D E R S
\*             */
.blue-border {
    border: 5px solid var(--light-blue);
    border-radius: 10px;
}
/*             *\
  B U T T O N S
\*             */
.blue-button {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1rem;
    color: var(--soft-white);
    background-color: var(--light-blue);
    border: none;
    
}
.blue-button:hover {
    box-shadow: 1px 3px 10px var(--dark-blue-opacity);
    background-color: var(--soft-white);
    color: var(--light-blue);
    transition: 0.3s;
}
.blue-button:active {
    background-color: var(--dark-blue);
    color: var(--soft-white);
    transition: 0.3s;
}
@media only screen and (max-width: 550px) {
    .blue-button {
        min-width: 175px;
        max-width: 200px;
        height: 40px;
        font-size: 0.9rem;
        border-radius: 6px;
    }
}
@media only screen and (min-width: 551px) and (max-width: 1058px) {
    .blue-button {
        min-width: 200px;
        max-width: 225px;
        height: 45px;
        font-size: 1.1rem;
        border-radius: 6px;
    }
}
@media only screen and (min-width: 1059px) {
    .blue-button {
        min-width: 225px;
        max-width: 300px;
        height: 50px;
        font-size: 1.2rem;
        border-radius: 10px;
    }
}
/*         *\
  L I S T S
\*         */
.list-indent {
    padding-left: 50px;
}
.list-indent li {
    padding-left: 10px;
}
/*         *\
  L I N K S
\*         */
a {
    text-decoration: none;
}
.p-link {
    color: var(--light-blue);
    font-weight: 700;
}
/*           *\
  H E A D E R
\*           */
nav {
    background: var(--blue-gradient);
    display: flex;
    width: 100%;
}
#left-nav,
#right-nav,
#center-nav {
    display: flex;
    align-items: center;
}
#burger-nav {
    color: var(--soft-white);
    background: none;
    border: none;
    cursor: pointer;
}
#burger-popout {
    display: none;
    flex-direction: column;
    align-items: flex-end;
    background-color: var(--soft-white);
    color: var(--dark-blue);
    box-shadow: 2px 2px 4px var(--dark-blue-opacity);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease;
    position: absolute;
    z-index: 2;
}
.burger-link {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    &:not(:last-child) {
        border-bottom: 2px solid var(--light-grey);
        margin-bottom: 15px;
        padding-bottom: 15px;
    }
}
.burger-link a {
    color: var(--light-blue);
}
@media only screen and (max-width: 550px) {

    .nav-logo {
        all: revert;
        width: 250px;
        padding: 1rem 0;
    }

        .nav-logo img {
            all: revert;
            width: 100%;
            object-fit: cover;
        }

    .nav-links {
        all: revert;
        list-style: none;
        display: none;
    }
    
    
    nav {
        justify-content: space-between;
        align-items: center;
        padding: 0 25px;
        gap: 0;
        height: 10vh;
    }
    /*  #left-nav,
    #right-nav {
        display: none;
    }
    #center-nav,
    #burger-nav {
        justify-content: center;
    }
    :is(#center-nav) :is(.image-container) {
        height: 8vh;
    }*/
    #burger-nav svg {
        width: 90px;
        height: auto;
    }
    #burger-popout {
        margin: 0 15px;
        padding: 15px;
        right: 0px;
    }
    .burger-link a {
        font-size: 1.75rem;
        font-weight: 700;
        display:block;
    }
}
@media only screen and (min-width: 551px) and (max-width: 1300px) {

    .nav-logo {
        all: revert;
        width: 250px;
        padding: 1rem 0;
    }

        .nav-logo img {
            all: revert;
            width: 100%;
            object-fit: cover;
        }

    .nav-links {
        all: revert;
        list-style: none;
        display:none;
    }



     nav {
        justify-content: space-between;
        align-items: center;
        padding: 0 25px;
        gap: 0;
        height: 10vh;
    }
 /*   #left-nav,
    #right-nav {
        display: none;
    }
    #center-nav {
        justify-content: flex-start;
    }
    :is(#center-nav) :is(.image-container) {
        height: 8vh;
    }*/
    #burger-nav {
        display: flex;
        justify-content: flex-end;
        width: 25%;
    }
    #burger-nav svg {
        width: 90px;
        height: auto;
    }
    #burger-popout {
        right: 30px;
        padding: 25px 35px;
    }
    .burger-link a {
        font-size: 2rem;
        font-weight: 700;
    }
}
@media only screen and (min-width: 1300px) {
    nav {
        all: revert;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 10vh;
        padding: 0 3rem;
        background: var(--blue-gradient);
    }

    .nav-logo {
        all: revert;
        width:250px;
        padding: 1rem 0;
    }

    .nav-logo img {
            all: revert;
            width: 100%;
            object-fit: cover;
     }



    .nav-links-container {
        all: revert;
        padding: 16px 0;   
    }


    .nav-links {
        all: revert;
        list-style: none;


    }

        .nav-links .nav-link-item {
            display: inline-block;
            margin: 0 24px;
            position: relative;
        }


    .nav-links-container ul li a {
        text-decoration: none;
        display: flex;
        padding: 16px 0;
        font-weight: 500;
        align-items: center;
        transition: 0.3s ease;
        color: red;
        font-size: 1.3rem;
        color: var(--soft-white);
    }

        .nav-links-container ul li a:hover {
            color: var(--yellow);
            transition: 0.3s;
        }


   
            .fa-chevron-down {
                display: inline-block;
                height: 16px;
                width: 16px;
                margin-left: 8px;
                transition: 0.3s ease;
                pointer-events: none;
              
            }

    .nav-links a:hover .fa-chevron-down {
        transform: rotate(180deg);
        transition: transform 0.3s ease; /* Optional: smooth transition */
    }

    .dropdown-menu {
        width: 210px;
        background-color: white;
        position: absolute;
        top: 80%;
        left: -16px;
        border-radius: 10px;
        overflow: hidden;
        opacity: 0;
        box-shadow: rgba(100,100,111, 0.2) 0px 7px 29px 0px;
        background: var(--blue-gradient);
        padding-left: 5px;
        padding-right: 5px;
        z-index:999;
    }

     .nav-link-item:hover .dropdown-menu {
        transform: translateY(8px);
        visibility: visible;
        opacity: 1;
    }
        /*
    nav a {
        color: var(--soft-white);
    }
    .nav-link {
        font-size: 1.3rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.1rem;
        border-left: 3px solid transparent;
        border-right: 3px solid transparent;
        padding: 0 2%;
    }

        .nav-link:hover {
            color: var(--yellow);
            border-left: 3px solid var(--yellow);
            border-right: 3px solid var(--yellow);
            transition: 0.3s;
        }
    
    #right-nav,
    #center-nav {
        display: flex;
        justify-content: space-evenly;
    }
    */
        #burger-nav {
            display: none;
        }
    #burger-popout {
        display: none;

    }
    .burger-link{
        display:none;
    }
    :is(#center-nav) :is(.image-container) {
        height: 8vh;
    }


}

    /*                   *\
  N E W S L E T T E R
\*                   */
    #newsletter {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        row-gap: 2vh;
        padding: 3% 5%;
        position: relative;
        color: var(--dark-blue);
    }

        #newsletter::before {
            content: "";
            background-image: url(../images/bg-elements/grey-triangles.svg);
            background-repeat: no-repeat;
            background-size: cover;
            background-position: bottom center;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: -1;
            opacity: 0.5;
        }

        #newsletter a,
        #newsletter a:active {
            color: var(--light-blue);
            font-weight: 700;
        }

    form {
        width: 50%;
        min-width: 350px;
        max-width: 600px;
        display: flex;
        flex-direction: column;
        row-gap: 2vh;
        align-items: center;
    }

    fieldset {
        border: none;
        width: 100%;
        display: flex;
        justify-content: space-between;
        flex-flow: row wrap;
        row-gap: 2vh;
    }

    input[type=text],
    input[type=email] {
        width: 48%;
    }
    /* input[type=email] {
    width: 100%;
} */
    input[type=text],
    input[type=email],
    input[type=number],
    textarea {
        height: 45px;
        border: 3px solid var(--light-grey);
        padding-left: 10px;
        border-radius: 5px;
        outline: none;
    }

        input[type=text]:focus,
        input[type=email]:focus {
            border: 3px solid var(--light-blue);
            background-color: rgba(168, 202, 254, 0.1);
            box-shadow: 3px 3px 6px #cfcfcf75;
            transition: 0.3s;
        }

    input::placeholder {
        font-size: 1rem;
    }

    @media only screen and (max-width: 550px) {
        #newsletter div,
        #newsletter a {
            font-size: 0.8rem;
        }
    }

    @media only screen and (min-width: 551px) and (max-width: 1058px) {
        #newsletter div,
        #newsletter a {
            font-size: 1rem;
        }
    }

    @media only screen and (min-width: 1059px) {
        #newsletter div,
        #newsletter a {
            font-size: 1rem;
        }
    }


    /*                       *\
  C A S E   S T U D I E S
\*                       */
    .flex-case-studies {
        justify-content: space-between;
    }



    /*           *\
  F O O T E R
\*           */
    footer {
        width: 100%;
    }

    #footer {
        background: var(--blue-gradient);
        color: var(--soft-white);
        width: 100%;
        padding: 1% 5%;
    }

    .footer-contact {
        display: flex;
        flex-direction: column;
        gap: 30px;
    }

    .contact-info {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

        .contact-info div {
            display: flex;
            align-items: center;
            column-gap: 10px;
        }

    .footer-contact svg,
    .footer-menu h2 {
        color: var(--yellow);
    }

    .footer-menu ul {
        list-style: none;
        line-height: 2rem;
    }

    .footer-menu a {
        color: var(--soft-white);
    }

        .footer-menu a:hover {
            text-decoration: underline;
        }

    .social-icons {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        column-gap: 10%;
    }

        .social-icons svg {
            color: var(--light-blue);
        }

    .copyright {
        text-align: center;
    }

    @media only screen and (max-width: 550px) {
        #footer-top,
        #footer-bottom {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
        }

        #footer-top {
            flex-direction: column;
        }

        .footer-contact {
            margin-bottom: 20px;
        }

        #footer-bottom {
            flex-direction: row;
            justify-content: space-between;
            width: 100%;
            margin-top: 15px;
        }

        .social-icons {
            justify-content: space-evenly;
            width: 58%;
        }

            .social-icons svg {
                width: 35px;
                height: auto;
                display: flex;
                align-items: center;
            }

        .copyright {
            order: 3;
            width: 100%;
        }

        :is(#footer-bottom) :is(.image-container) {
            border-radius: 5px;
            overflow: hidden;
            width: 35%
        }
    }

    @media only screen and (min-width: 551px) and (max-width: 1058px) {
        #footer-top,
        #footer-bottom {
            display: flex;
            flex-flow: row wrap;
            justify-content: space-between;
            width: 100%;
        }

        .footer-contact {
            width: 100%;
            flex-direction: row;
            justify-content: space-between;
            margin: 15px 0 50px 0;
        }

        :is(.footer-contact) :is(.image-container) {
            width: 55%;
        }

        .contact-info {
            width: 30%;
        }

        .footer-menu {
            width: 30%;
        }

        #footer-bottom {
            width: 100%;
            margin-top: 15px;
        }

        .social-icons {
            justify-content: space-evenly;
            width: 30%;
        }

            .social-icons svg {
                width: 40px;
                height: auto;
                display: flex;
                align-items: center;
            }

        .copyright {
            order: 3;
            width: 100%;
            margin-top: 10px;
        }

        :is(#footer-bottom) :is(.image-container) {
            border-radius: 5px;
            overflow: hidden;
            width: 25%
        }
    }

    @media only screen and (min-width: 1059px) {
        #footer-top,
        #footer-bottom {
            display: flex;
            flex-flow: row wrap;
            justify-content: space-between;
            width: 90%;
            margin: auto;
        }

        #footer-bottom {
            align-items: flex-end;
        }

        .footer-menu h2 {
            margin: 30px 0 10px 0;
        }

        .footer-menu {
            width: 250px;
        }

        .social-icons svg {
            width: 40px;
            height: auto;
        }

        :is(#footer-bottom) :is(.image-container) {
            border-radius: 10px;
            overflow: hidden;
            max-width: 200px;
        }
    }




    /*             *\
  V I D E O
\*             */
    #video {
        padding: 3% 5%;
        color: var(--dark-blue);
    }


        #video h2 {
            text-align: center;
        }

    .video-wrapper {
        margin: 0 60px 35px;
        padding: 20px 10px;
        overflow: hidden;
    }

        .video-wrapper .swiper-pagination-bullet {
            height: 13px;
            width: 13px;
            opacity: 0.5;
        }

            .video-wrapper .swiper-pagination-bullet:hover {
                opacity: 1;
            }

        .video-wrapper .swiper-slide-button {
            color: rgba(16,55,95,1);
            margin-top: -35px;
        }

    .video-list .video-item {
        list-style: none;
    }

        .video-list .video-item .video-link {
            user-select: none;
            display: block;
            text-decoration: none;
            border-radius: 10px;
        }

            .video-list .video-item .video-link:active {
                cursor: grabbing;
            }

    .video-list .video-link .learning-video-carousel {
        width: 100%;
        aspect-ratio: 16/9;
        object-fit: cover;
        border-radius: 10px;
    }

    @media only screen and (max-width: 764px) {

        .video-wrapper {
            margin: 0 10px 25px;
        }

            .video-wrapper .swiper-slide-button {
                display: none;
            }
    }