/* =========================================================
   CONTACT PAGE - FORCE CONTENT VISIBLE
========================================================= */

.contact-hero {
    display: block;
    width: 100%;
    padding: 90px 0 70px;
    background: #f4f7fb;
}

.contact-container {
    width: min(1180px, calc(100% - 48px));
    margin: 0 auto;
}

.contact-hero .section-label {
    margin-bottom: 18px;
    color: #c89d16;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.contact-hero h1 {
    margin: 0 0 18px;
    color: #07152f;
    font-size: clamp(42px, 5vw, 68px);
    line-height: 1.05;
    font-weight: 800;
}

.contact-hero p {
    max-width: 700px;
    margin: 0;
    color: #52657d;
    font-size: 18px;
    line-height: 1.7;
}


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

#contact {
    display: block !important;
    visibility: visible !important;
    min-height: auto !important;
    padding: 80px 0 100px;
    background: #ffffff;
}


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

#contact .section-head {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;

    margin-bottom: 45px;
}

#contact .section-tag {
    color: #c89d16;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}

#contact .section-head h2 {
    margin: 10px 0 15px;
    color: #07152f;
    font-size: 42px;
    line-height: 1.1;
}

#contact .section-head p {
    max-width: 720px;
    color: #52657d;
    font-size: 17px;
    line-height: 1.7;
}


/* =========================================================
   CONTACT WRAPPER
========================================================= */

.contact-wrapper {
    display: grid !important;

    grid-template-columns:
        minmax(280px, 0.8fr)
        minmax(400px, 1.2fr);

    gap: 50px;

    align-items: start;
}


/* =========================================================
   CONTACT INFO
========================================================= */

.contact-info {
    display: grid;
    gap: 18px;
}

.contact-card {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;

    padding: 28px;

    border:
        1px solid #e1e7ef;

    border-radius: 18px;

    background: #f8fafc;

    box-shadow:
        0 10px 30px rgba(7, 21, 47, 0.06);
}

.contact-icon {
    display: flex;

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

    width: 48px;
    height: 48px;

    margin-bottom: 18px;

    border-radius: 12px;

    background: #fff4c7;

    font-size: 22px;
}

.contact-card h3 {
    margin: 0 0 8px;

    color: #07152f;

    font-size: 19px;
    font-weight: 800;
}

.contact-card p,
.contact-card a {
    margin: 0;

    color: #52657d;

    font-size: 15px;
    line-height: 1.6;

    text-decoration: none;
}

.contact-card a:hover {
    color: #c89d16;
}


/* =========================================================
   FORM
========================================================= */

.lead-form {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;

    padding: 35px;

    border:
        1px solid #e1e7ef;

    border-radius: 20px;

    background: #ffffff;

    box-shadow:
        0 15px 45px rgba(7, 21, 47, 0.08);
}

#leadForm {
    display: block;
    width: 100%;
}

.form-row {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 20px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;

    margin-bottom: 8px;

    color: #07152f;

    font-size: 14px;
    font-weight: 700;
}

.form-group input,
.form-group textarea {
    display: block;

    width: 100%;

    box-sizing: border-box;

    padding: 13px 15px;

    border:
        1px solid #d9e0e8;

    border-radius: 10px;

    background: #ffffff;

    color: #07152f;

    font-family: inherit;

    font-size: 15px;

    outline: none;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}

.form-group input {
    min-height: 48px;
}

.form-group textarea {
    min-height: 140px;

    resize: vertical;
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: #d8ae27;

    box-shadow:
        0 0 0 3px
        rgba(216, 174, 39, .12);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #9aa7b7;
}


/* =========================================================
   SUBMIT
========================================================= */

#leadSubmitButton {
    display: inline-flex;

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

    min-height: 48px;

    padding: 0 25px;

    border: 0;

    border-radius: 10px;

    background: #d8ae27;

    color: #07152f;

    font-size: 14px;
    font-weight: 800;

    cursor: pointer;

    transition:
        transform .2s ease,
        background .2s ease;
}

#leadSubmitButton:hover {
    background: #e5bf3b;

    transform:
        translateY(-1px);
}

#leadSubmitButton:disabled {
    opacity: .65;

    cursor: not-allowed;

    transform: none;
}


/* =========================================================
   REVEAL FIX
   THIS IS THE IMPORTANT PART
========================================================= */

#contact .reveal {
    opacity: 1 !important;

    visibility: visible !important;

    transform: none !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 800px) {

    .contact-hero {
        padding: 65px 0 50px;
    }

    .contact-container {
        width: calc(100% - 32px);
    }

    .contact-hero h1 {
        font-size: 42px;
    }

    .contact-wrapper {
        grid-template-columns: 1fr;

        gap: 30px;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .lead-form {
        padding: 25px;
    }

}

@media (max-width: 500px) {

    .contact-container {
        width: calc(100% - 24px);
    }

    .contact-hero h1 {
        font-size: 35px;
    }

    #contact .section-head h2 {
        font-size: 34px;
    }

    .lead-form {
        padding: 20px;
    }

}

/* =========================================================
   OCEANBRIDGE GLOBAL
   PAGES FOLDER — FULL WIDTH
   Applies to:
   /pages/projects.html
   /pages/products.html
   /pages/blog.html
   /pages/blog-details.html
   /pages/careers.html
   /pages/contact.html
   ========================================================= */


/* =========================================================
   GLOBAL
   ========================================================= */

html,
body {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;

    overflow-x: hidden;
}

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


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

#siteHeader,
.site-header {
    width: 100%;
    max-width: none;

    margin: 0;
    padding: 0;
}


/* Navbar background = entire screen */

.site-header {
    position: relative;
    width: 100%;
}


/* Navbar inner row */

.site-header-container {
    width: 100%;
    max-width: none;

    margin: 0;
    padding-left: 40px;
    padding-right: 40px;
}


/* =========================================================
   PAGE BODY
   ========================================================= */

body {
    min-width: 320px;
}


/* Remove old centered page wrappers */

.page-container,
.page-wrapper,
.content-wrapper,
.main-container,
.container,
.blog-container,
.products-container,
.projects-container,
.contact-container,
.careers-container {
    width: 100%;
    max-width: none;

    margin-left: 0;
    margin-right: 0;
}


/* =========================================================
   MAIN
   ========================================================= */

main {
    width: 100%;
    max-width: none;

    margin: 0;
    padding: 0;
}


/* =========================================================
   HERO / PAGE HEADER
   ========================================================= */

.page-hero,
.page-header,
.blog-hero,
.products-hero,
.projects-hero,
.careers-hero,
.contact-hero,
.blog-detail-hero,
.article-hero {
    width: 100%;
    max-width: none;

    margin: 0;
}


/* =========================================================
   SECTIONS
   ========================================================= */

section {
    max-width: none;
}


/* =========================================================
   BLOG / INSIGHTS GRID
   ========================================================= */

.blog-grid,
.blog-list,
.insights-grid,
.articles-grid {
    width: 100%;
    max-width: none;

    margin: 0;

    padding-left: 5%;
    padding-right: 5%;
}


/* =========================================================
   BLOG CARDS
   ========================================================= */

.blog-card,
.article-card,
.insight-card {
    width: 100%;
    max-width: none;

    min-width: 0;
}


/* =========================================================
   BLOG CARD IMAGES
   ========================================================= */

.blog-card-image,
.article-card-image,
.insight-card-image {
    width: 100%;
    height: 300px;

    overflow: hidden;
}

.blog-card-image img,
.article-card-image img,
.insight-card-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;
}


/* =========================================================
   BLOG DETAIL
   ========================================================= */

.blog-detail,
.blog-detail-page,
.blog-details-page {
    width: 100%;
    max-width: none;

    margin: 0;
    padding: 0;
}


/* =========================================================
   BLOG DETAIL HERO CONTENT
   ========================================================= */

.blog-detail-hero-content,
.blog-hero-content,
.article-hero-content {
    width: 100%;
    max-width: none;

    margin: 0;
}


/* =========================================================
   BLOG FEATURE IMAGE
   ========================================================= */

.blog-feature-section,
.feature-image-section,
.blog-detail-image-section {
    width: 100%;
    max-width: none;

    margin: 0;
    padding: 0;

    overflow: hidden;
}


.feature-image-wrapper,
.blog-feature-image,
.blog-detail-feature-image {
    width: 100%;
    max-width: none;

    margin: 0;
    padding: 0;

    display: flex;

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

    overflow: hidden;
}


.feature-image-wrapper img,
.blog-feature-image img,
.blog-detail-feature-image img {
    display: block;

    width: 100%;
    max-width: 100%;

    height: auto;

    margin: 0;

    object-fit: contain;
    object-position: center;
}


/* =========================================================
   ARTICLE CONTENT
   ========================================================= */

.blog-detail-content,
.blog-content,
.article-content,
.blog-body,
.article-body {
    width: 100%;
    max-width: none;

    margin: 0;

    padding-left: 8%;
    padding-right: 8%;
    padding-top: 70px;
    padding-bottom: 70px;
}


/* =========================================================
   ARTICLE TEXT
   ========================================================= */

.blog-detail-content p,
.blog-content p,
.article-content p,
.blog-body p,
.article-body p {
    max-width: none;
    width: 100%;

    line-height: 1.8;

    margin-top: 0;
    margin-bottom: 28px;
}


/* =========================================================
   PRODUCTS
   ========================================================= */

.products-page,
.products-section,
.products-grid {
    width: 100%;
    max-width: none;
}


/* =========================================================
   PROJECTS
   ========================================================= */

.projects-page,
.projects-section,
.projects-grid {
    width: 100%;
    max-width: none;
}


/* =========================================================
   CAREERS
   ========================================================= */

.careers-page,
.careers-section,
.careers-grid {
    width: 100%;
    max-width: none;
}


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

.contact-page,
.contact-section,
.contact-grid {
    width: 100%;
    max-width: none;
}


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

footer,
.site-footer {
    width: 100%;
    max-width: none;

    margin: 0;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .site-header-container {
        width: 100%;

        padding-left: 25px;
        padding-right: 25px;
    }

    .blog-detail-content,
    .blog-content,
    .article-content,
    .blog-body,
    .article-body {
        padding-left: 5%;
        padding-right: 5%;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .site-header-container {
        width: 100%;

        padding-left: 20px;
        padding-right: 20px;
    }


    .blog-grid,
    .blog-list,
    .insights-grid,
    .articles-grid {
        width: 100%;

        padding-left: 20px;
        padding-right: 20px;
    }


    .blog-detail-content,
    .blog-content,
    .article-content,
    .blog-body,
    .article-body {
        width: 100%;

        padding: 40px 20px;
    }


    .feature-image-wrapper img,
    .blog-feature-image img,
    .blog-detail-feature-image img {
        width: 100%;
        height: auto;

        object-fit: contain;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .site-header-container {
        padding-left: 15px;
        padding-right: 15px;
    }


    .blog-grid,
    .blog-list,
    .insights-grid,
    .articles-grid {
        padding-left: 15px;
        padding-right: 15px;
    }


    .blog-detail-content,
    .blog-content,
    .article-content,
    .blog-body,
    .article-body {
        padding-left: 15px;
        padding-right: 15px;
    }

}