@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Syncopate:wght@400;700&display=swap');

:root {

    /*        Colors          */
    /**************************/
    
    --deep-current: rgba(0, 27, 72, 1);
    --blue-trench: rgba(0, 68, 129, 1);
    --tide-break: rgba(1, 138, 190, 1);
    --costal-mist: rgba(151, 202, 219, 1);
    --sea-foam-sky: rgba(222, 232, 241, 1);
    --sea-foam-sky100: rgba(222, 232, 241, .95);
    --off-white: rgb(248, 248, 248);

    /*         tints            */

    --deep-current-800: rgba(0, 27, 72, 0.8);
    --blue-trench-500: rgba(0, 68, 129, 0.5);


    
    /*        Gradients          */
    /*****************************/
    
    --blue-fade: linear-gradient(90deg, rgb(1,138,190) 35%, rgba(1, 136, 190, 0.5));
    --bluetrench-fade: linear-gradient(90deg, rgba(0, 68, 129, 1), rgba(0, 68, 129, 0));
    --deepcurrent-fade: linear-gradient(90deg, rgba(0, 27, 72, 1) 30%, rgba(0, 27, 72, 0.5));
    --deepcurrent-fade-500: linear-gradient(90deg, rgba(0, 27, 72, 0.5) 30%, rgba(0, 27, 72, 0.5));
    
    /*           Shadows          */
    /******************************/

    --shadow: 0 0 25px 0 rgba(0, 0, 0, .5);
    
    /*        Typography          */
    /******************************/

    --ff-wide: 'Syncopate', sans-serif;
    --ff-main: 'Poppins', sans-serif;
    
    /*          font size           */
    
    --body-copy: 1rem;
    --card-heading: 1.125rem;
    --hero-title: 2.75rem;
    --title: 2.25rem;
    --subheading: 1.5rem;
    --section-title: 2rem;
    --page-title: 3rem;
    --small-text: .85rem;
    --xs-text: .75rem;

    /*      font weight             */

    --fw-100: 100;
    --fw-200: 200;
    --fw-300: 300;
    --fw-400: 400;
    --fw-500: 500;
    --fw-600: 600;
    --fw-700: 700;
    --fw-800: 800;
    --fw-900: 900;

    /*      Lineheight             */

    --line-h1: 1.6;
    --line-h2: 1.8;
    --line-h3: 2.0;



}


/*******************************************************/
/*                        Reset                        */
/*******************************************************/

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

li {
    text-decoration: none;
    list-style: none;
}

a {
    text-decoration: none;
    color: var(--blue-trench);
}

img {
    height: 100%;
}

.container {
    max-width: 1200px;
    width: 95%;
    margin-inline: auto;
}

span.bold {
    font-weight: var(--fw-700);
}

.section-title {
    font-size: var(--section-title);
    color: var(--deep-current);
    padding-bottom: 50px;
}
.card-heading {
    font-size: var(--card-heading);
}

.card-copy {
    font-size: var(--small-text);
}

.subheading {
    font-size: var(--subheading);
    color: var(--deep-current);
    padding-bottom: 34px;
}

.cta {
    padding: 16px 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    border-radius: 10px;
    transition: all 250ms ease-in-out;
    font-weight: var(--fw-500);
    cursor: pointer;
    font-size: var(--small-text);
}

.cta-primary {
    background-color: var(--sea-foam-sky);
}

.cta-primary:hover {
    background-color: var(--sea-foam-sky100);
}

.cta-secondary {
    border: 2px solid var(--tide-break);
    color: var(--sea-foam-sky);
}

.cta-secondary:hover {
    border: 2px solid var(--costal-mist);
    color: var(--costal-mist);
}

.cta-primary-inverse {
    background-color: var(--blue-trench);
    color: var(--sea-foam-sky);
}

.cta-primary-inverse:hover {
    background-color: var(--tide-break);
}


/* .section-title {
    font-family: 'Syncopate';
} */

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--ff-main);
    font-size: var(--body-copy);
    overflow-x: clip;
}


/*******************************************************/
/*                    email header                     */
/*******************************************************/

.email-header {
    background: var(--deep-current);
    padding: 6px 0;
    text-align: center;
}

.email-contact {
    color: var(--sea-foam-sky);
    font-size: 1rem;
    transition: all 250ms ease-in-out;
}

.email-contact:hover {
    color: var(--tide-break);
}

/*******************************************************/
/*                       Navbar                        */
/*******************************************************/

.navbar {
    height: 70px;
    width: 100%;
    background-color: var(--sea-foam-sky);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
    overflow-x: clip;

}

.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    height: 70px;
    display: flex;

}

.logo img {
    height: 60px;
    align-self: center;
}

.nav-menu {
    display: flex;
    flex: 0 0 auto;
    width: 450px;
    justify-content: space-between;
}


.menu-toggle {
    display: none;
    font-size: 2rem;
    background: none;
    border: none;
    cursor: pointer;
}

.link-item {
    text-transform: uppercase;
    font-weight: var(--fw-500);
    padding: 10px 0;
    transition: all 250ms ease-in-out;
}

.link-item:hover {
    color: var(--tide-break);
}


/* Base */
.menu-toggle {
    display: none;
    width: 30px;
    height: 24px;
    position: relative;
    border: none;
    background: none;
    cursor: pointer;
}

.menu-toggle span {
    position: absolute;
    width: 100%;
    height: 3px;
    background: var(--blue-trench);
    left: 0;
    transition: all 0.3s ease;
}

.menu-toggle span:nth-child(1) {
    top: 0;
}
.menu-toggle span:nth-child(2) {
    top: 10px;
}
.menu-toggle span:nth-child(3) {
    top: 20px;
}

/* When active - turn into "X" */
.menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg);
    top: 10px;
}
.menu-toggle.active span:nth-child(2) {
    opacity: 0;
}
.menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg);
    top: 10px;
}

/* Mobile only */
@media (max-width: 768px) {
    .nav-menu {
        position: absolute;
        top: 70px;
        right: 0;
        background: var(--sea-foam-sky);
        flex-direction: column;
        gap: 1.5rem;
        padding: 1.5rem;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        transform: translateX(100%);
        transition: transform 0.3s ease-in-out;
        width: 200px;
    }

    .nav-menu.active {
        transform: translateX(0);
    }

    .menu-toggle {
        display: block;
    }
}




/*******************************************************/
/*                     Hero Section                    */
/*******************************************************/

.hero-section {
    background:
    var(--deepcurrent-fade),
    url('../../media/images/gears_3.webp') no-repeat center center / cover;
    /* height: 65vh; */
    padding: 50px 0;
}

.hero-section .content {
    display: flex;
    flex-direction: column;
    max-width: 700px;
}

.hero-title {
    font-size: var(--hero-title);
    color: var(--sea-foam-sky);
}

.hero-section .body-copy {
    color: var(--sea-foam-sky);
    padding-top: 16px;
}

.cta-container {
    padding-top: 40px;
}


@media (max-width: 768px){
    .hero-section .content {
        margin-inline: auto;
        /* text-align: center; */
    }
    
    .hero-title {
        font-size: 2.125rem;
    }
    
    .hero-section .body-copy {
        font-size: 1.125rem;
    }
    
    .hero-section .cta {
        font-size: 1.125rem;
    }
}

@media (max-width: 401px) {

    .hero-title{
        font-size: 1.75rem;
    }
    
    .hero-section .body-copy {
        font-size: 1rem;
    }

    .hero-section .cta-container {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        padding-top: 30px;
    }
    
    .hero-section .cta {
        font-size: 1rem;
        flex: 1 1 100%;
        text-align: center;
    }

}

/* @media (max-height: 600px) */
/*******************************************************/
/*                  About Us Section                   */
/*******************************************************/

.about-us {
    padding-bottom: 50px;
}

.about-us .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

.about-us .content {
    flex: 1 1 50%;
    max-width: 50%;
    padding: 120px 50px 120px 0;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}

.about-us .body-copy {
    color: var(--deep-current);
    padding-bottom: 34px;
}

/* .about-us .image {
    flex: 1 1 50%;
    max-width: 50%;
    min-height: 300px;
    background-image: url('../../media/images/tools-reversed.webp') no-repeat center center / cover;
    display: flex;
    justify-content: center;
    align-items: center;
    max-height: 500px; /* desktop max-height
 } */

 .about-us .image {
    flex: 1 1 50%;
    max-width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.about-us .image img {
    width: 100%;
    height: auto;
    max-height: 500px; /* desktop cap */
    object-fit: contain;
}

/* Tablet: smaller image, still right side */
@media (max-width: 992px) {
    .about-us .content {
        padding: 80px 30px;
    }

    .about-us .image {
        max-height: 350px; /* shrink on tablet */
    }
    
    .about-us .image img {
        padding-top: 10rem;
    }
}

/* Mobile: stack, image below text */
@media (max-width: 768px) {
    .about-us .container {
        flex-direction: column;
    }

    .about-us .content,
    .about-us .image {
        max-width: 100%;
        flex: 1 1 100%;
        padding: 20px;
    }

    .about-us .image {
        order: 2;        /* image below text */
        height: 250px;   /* smaller height */
        max-height: 250px;
    }

    .about-us .content {
        order: 1;
    }
}

/*******************************************************/
/*                  Services Section                   */
/*******************************************************/

.our-services {
    position: relative;
    background-color: var(--sea-foam-sky);
    padding: 100px 0;
    /* z-index: -2; */
    overflow-x: hidden;
}

.our-services .section-information {
    margin-inline: auto;
    max-width: 450px;
    padding-bottom: 7rem;
}

.row-content {
    
    display: flex;
    /* align-items: center; */
    gap: 2rem;
    margin-bottom: 5rem;


}

.row {
    position: relative;
    z-index: 0;
}

.row::after,
.row::before {
    content: "";
    position: absolute;
    top: -2.5rem;
    left: -10rem;
    bottom: -2.5rem;
    right: -10rem;

    
}

.row:nth-child(odd)::after {
    border-radius: 300px 0 0 300px;
    background-color: var(--tide-break);
    right: -25rem;
    z-index: -1;
}

.row:nth-child(even)::before {

    background-color: var(--tide-break);
    right: -25rem;
    z-index: -2;
}

.row:nth-child(even)::after {
    border-radius: 0 300px 300px 0;
    background-color: var(--sea-foam-sky);
    left: -25rem;
    z-index: -1;
}

.text-block {
    flex: 1;
    padding-top: 4rem;
}

.text-block .subheading {
    margin-bottom: 1rem;
}

.services-list {
    padding-left: 7rem;
}

@media (max-width: 924px) {
    .services-list {
        padding-left: 3.5rem;
    }
}

.services-list li {
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    position: relative;
    padding-left: 2rem;
    z-index: 0;
}

.services-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 1.5rem;
    width: 1.5rem;
    mask: url('../../media/icons/check-circle.svg') no-repeat center;
    mask-size: contain;
}

/* Odd rows = light text/icons */
.row:nth-child(odd) .row-content .text-block,
.row:nth-child(odd) .row-content .text-block .subheading,
.row:nth-child(odd) .row-content .services-list li {
  color: var(--sea-foam-sky);
}

.row-content:nth-child(odd) .services-list li::before {
  background-color: var(--sea-foam-sky); /* light icons */
}

/* Even rows = dark text/icons */
.row:nth-child(even) .row-content .text-block,
.row:nth-child(even) .row-content .text-block .subheading,
.row:nth-child(even) .row-content .services-list li {
  color: var(--deep-current); /* dark gray or black */
}

.row:nth-child(even) .row-content .services-list li::before {
  background-color: var(--deep-current); /* dark icons */
}

.image-container {
    flex: 1;
}

.image-container img {
    max-width: 100%;
    border-radius: 10px;
    object-fit: cover;
}

.image-left {
    flex-direction: row-reverse;
}

.services-cta {
    padding-top: 6rem;
    text-align: center;
    /* gap: 1rem; */
    position: relative;
    z-index: 0;
}

.services-cta::after,
.services-cta::before {
    content: "";
    position: absolute;
    top: -2.5rem;
    left: -10rem;
    bottom: -6.25rem;
    right: -10rem;
}

.services-cta::after {
    z-index: -1;
    background: var(--sea-foam-sky);
    border-top-right-radius: 300px;
}

.services-cta::before {
    z-index: -2;
    background: var(--tide-break);
    right: -25rem;
}

.services-cta p {
    padding-bottom: 1rem;
}


@media (max-width: 768px) {
  .row-content {
    flex-direction: column;
    text-align: center;
  }

  .image-left,
  .image-right {
    flex-direction: column;
  }

  .services-list {
    text-align: left;
    margin-top: 1rem;
    padding-left: 1rem;
  }

  .text-block {
    padding-top: 2rem;
  }

  .services-cta {
    padding-top: 2rem;
  }
}


/*******************************************************/
/*                  Contact Us                         */
/*******************************************************/


.contact-us {
    padding: 100px 0;
}

.contact-us .section-title {
    text-align: center;
    padding-bottom: 7rem;
}

form {
    margin-inline: auto;
    padding: 2rem;
    border-radius: 10px;
    max-width: 600px;
    display: flex;
    flex-direction: column;
    background: rgba(99, 99, 99, 0.1);
    box-shadow: 0 0 10px 0 rgba(0, 27, 72, 0.25);
}

.form-control {
    display: flex;
    flex-direction: column;
    padding-bottom: 1rem;
}

.form-control label {
    padding-bottom: 1rem;
    font-size: var(--body-copy);
}

.form-control input {
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: 10px;
    border: none;
    font-size: var(--small-text);
}

.form-control input:focus {
    outline: 1px solid var(--blue-trench);
}

.form-control textarea {
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: 10px;
    border: none;
    font-size: var(--small-text);
    font-family: 'Poppins', sans-serif;
}

.form-control button {
    border: none;
    font-size: var(--body-copy);
    font-family: 'Poppins', sans-serif;
}




/******************************************/
/*                 footer                 */
/******************************************/


footer {
    background-color: rgb(44, 44, 44);
    padding-top: 50px;
}

.footer-heading {
    position: relative;
    font-size: var(--body-copy);
    color: var(--sea-foam-sky);
    margin-bottom: 15px;
}

.devider {
    height: 2px;
    width: 100%;
    background-color: rgb(58, 58, 58);
}

.footer-heading::after {
    position: absolute;
    content: "";
    height: 2px;
    width: 48px;
    background-color: var(--sea-foam-sky);
    bottom: 0;
    left: 0;
}

.footer-content-top {
    display: flex;
    flex-direction: column;
    gap: 48px;
    align-items: center;
}

.footer-logo img {
    width: 120px;
}

.footer-quick-links, .footer-services, .footer-contact {
    margin-bottom: 34px;
    color: var(--sea-foam-sky);
}

footer ul li {
    font-size: var(--body-copy);
    line-height: 2.3;
}

footer ul li a {
    color: var(--sea-foam-sky);
}


.footer-content-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 0;
    text-align: center;
    gap: 25px;
}

.footer-content-bottom p {
    color: var(--sea-foam-sky);
    font-size: var(--small-text);
}

.footer-content-bottom p span {
    color: var(--tide-break);
}

@media (min-width: 786px) {
    footer {
        padding-top: 5rem;
    }

    .footer-content-top {
        flex-direction: row;
        justify-content: space-between;
        align-items: start;
        padding-bottom: 5rem;
    }

    .footer-logo img {
        width: 250px;
    }

    .first-dv {
        height: 70px;
        width: 2px;
        align-self: center;
    }

    .footer-content .right-content {
        display: flex;
        gap: 5rem;
    }

    .footer-content-bottom {
        flex-direction: row;
        justify-content: space-between;
    }
}


/********************************************/
/*          About Us Page                   */
/********************************************/


/************ Page Title ********************/

.page-title-section  {
    padding: 5rem;
    background:
    var(--deepcurrent-fade-500),
    url('../../media/images/gears_4.webp')
    no-repeat center center / cover;
    text-align: center;
    color: var(--sea-foam-sky);
}

.page-title-section .section-title {
    color: var(--sea-foam-sky);
    font-size: var(--page-title);
}


/************************************************/
/*             Who Are We Section               */
/************************************************/


.who-are-we {
    padding: 5rem 0;
    color: var(--deep-current);
}

.who-are-we .section-title {
    font-size: var(--section-title);
    text-align: center;
}

.who-are-we .image-container {
    position: relative;
    display: inline-block;
}

.who-are-we img {
    display: block;
}

.who-are-we .image-container::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--blue-trench-500);
    mix-blend-mode: multiply; 
    border-radius: 10px;
}


/*********      How we work     **************/
.how-we-work .body-copy {
    padding: 4rem 0;
}

.horizontal-cards {
    padding-bottom: 4rem;
}

.horizontal-card {
    background: var(--sea-foam-sky);
    padding: 35px 55px;
    border-radius: 10px;
    margin-bottom: 1rem;
    display: flex;
    position: relative;
    align-items: center;
    gap: 5rem;
    overflow: clip;

}

.horizontal-card:nth-child(n)::before {
    font-size: 11rem;
    position: absolute;
    font-family: var(--ff-main);
    font-weight: 800;
    left: -5px;
    color: var(--blue-trench);
}

.horizontal-card:nth-child(2)::before {
        content: "1";
}

.horizontal-card:nth-child(3)::before {
        content: "2";
}

.horizontal-card:nth-child(4)::before {
        content: "3";
}

.horizontal-card .left-number {
    /* background-color: var(--sea-foam-sky); */
    display: flex;
    height: 2rem;
    width: 2rem;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    /* vertical-align: middle; */
}

.horizontal-card .left-number h3 {
    margin-bottom: -30px;

}


/************************************************/
/*             What Do We Do Section            */
/************************************************/

.what-do-we-do {
    padding: 4rem 0;
    background: var(--sea-foam-sky);
}

.what-do-we-do .row-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.what-do-we-do .text-block {
    max-width: 550px;
}

.what-do-we-do .text-block p {
    margin-bottom: 50px;
    color: var(--deep-current);
}

.vertical-cards {
    display: flex;
    margin-inline: auto;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 50px;
}

.vertical-card {
    flex: 1 1 350px;
    background: var(--off-white);
    box-shadow: 0 0 10px 0 var(--shadow);
    border-radius: 10px;
    padding: 3rem;
    /* max-height: 360px; */
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 3rem;
    color: var(--deep-current);

    
}

.vertical-card svg {
    fill: var(--deep-current);
    height: 5rem;
    width: 5rem;
}

.about-page-cta {
    max-width: 768px;
    margin-inline: auto;
    text-align: center;
    padding-bottom: 3rem;
}

.about-page-cta p {
    margin-bottom: 2rem;
}


/************************************************/
/*             Ho can We Help Section           */
/************************************************/

.how-can-we-help {
    padding: 5rem 0;
    background: 
    var(--blue-fade),
    url('../../media/images/gears_2.webp') no-repeat center center / cover;
    text-align: center;
}

.how-can-we-help .section-title {
    color: var(--sea-foam-sky);
    padding: 0;
}

/************************************************/
/*                 Blue cards Section           */
/************************************************/

.blue-cards {
    padding: 5rem 0;
}

.blue-cards .container {
    max-width: 768px;
}

.blue-cards p {
    /* text-align: center; */
    color: var(--deep-current);
}

.blue-cards p:nth-child(1) {
    margin-bottom: 5rem;
}


.blue-cards .cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 25px;
    margin: 5rem 0;
}

.blue-cards .card {
    background: var(--tide-break);
    color: var(--off-white);
    flex: 1 1 350px;
    max-width: 100%;
    padding: 3rem;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.card .card-copy {
        color: var(--off-white);
}

/************************************************/
/*         Mission and Vision Section           */
/************************************************/

.mission-vision {
    padding: 5rem 0;
    /* display: flex; */
    background-color: var(--sea-foam-sky);
    min-height: 600px;
}

.content-wrapper {
    display: flex;
    align-items: stretch;
    gap: 0;
    min-height: 500px
}

.text-content {
    flex: 1;
    padding-right: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 559px;
}

.mission-block,
.vision-block {
    margin-bottom: 50px;
}

.image-container {
    flex: 1;
    position: relative;
    overflow: hidden;
    min-height: 500px;
}

.image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

@media (max-width: 768px) {
    .content-wrapper {
        flex-direction: column;
    }

    .image-container {
        min-height: 400px;
    }

    .text-content {
        padding-right: 0;
        flex-direction: row;
        gap: 3rem;
        max-width: 100%;
    }
}

@media (max-width: 620px) {
    .text-content {
        flex-direction: column;
        gap: 1rem;
    }

    .text-content .section-title {
        padding-bottom: 2rem;
    }
}

/************************************************/
/*          Our Value Cores Section             */
/************************************************/

.value-cores {
    padding: 5rem 0;
    color: var(--deep-current);
}

.value-cores .horizontal-card:nth-child(1)::before {
        content: "1";
}
.value-cores .horizontal-card:nth-child(2)::before {
        content: "2";
}
.value-cores .horizontal-card:nth-child(3)::before {
        content: "3";
}
.value-cores .horizontal-card:nth-child(4)::before {
        content: "4";
}
.value-cores .horizontal-card:nth-child(5)::before {
        content: "5";
}