/* =====================================================
   THellas Modern Theme v6
   Enterprise Supply Chain Technology
   Based on Agency behaviour
   ===================================================== */
/* =====================================================
   Variables
   ===================================================== */
:root {
    --thellas-navy:#071B33;
    --thellas-blue:#1565C0;
    --thellas-blue-light:#5C6BC0;
    --thellas-teal:#00897B;
    --thellas-grey:#65727E;
    --thellas-light:#F5F8FC;
}
/* =====================================================
   Global
   ===================================================== */
body {
    font-family:'Inter','Segoe UI',Arial,sans-serif;
    color:#333;
}
p {
    line-height:1.8;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family:'Inter','Segoe UI',Arial,sans-serif;
    font-weight:600;
}
/* =====================================================
   Navbar
   Original Agency behaviour preserved
   ===================================================== */
#mainNav {
    padding-top:18px;
    padding-bottom:18px;
    transition:all .3s ease;
    background-color:transparent;
}
#mainNav .navbar-brand {
    font-family:'Inter',sans-serif;
    font-size:1.45rem;
    font-weight:400;
    letter-spacing:-0.5px;
    color:white;
    transition:all .3s ease;
}
#mainNav .nav-link {
    font-family:'Inter',sans-serif;
    font-size:12px;
    font-weight:500;
    letter-spacing:1.2px;
    color:white;
    transition:all .3s ease;
}
#mainNav .nav-link:hover {
   /* color:var(--thellas-blue); */
    color:white;
}
/* After scrolling */
#mainNav.navbar-shrink {
    background-color:#C5CAE9;
    padding-top:0;
    padding-bottom:0;
    box-shadow:0 4px 20px rgba(0,0,0,.12);
}
#mainNav.navbar-shrink .navbar-brand {
    color:var(--thellas-blue);
}
#mainNav.navbar-shrink .nav-link {
    color:var(--thellas-blue);
}
#mainNav.navbar-shrink .nav-link.active,
#mainNav.navbar-shrink .nav-link:hover {
    /* color:var(--thellas-navy); */
    color:#5C6BC0;
}
#mainNav .navbar-toggler {
    font-size:12px;
    padding:13px;
    color:white;
    border:0;
    background-color:var(--thellas-blue);
}
/* =====================================================
   Hero
   ===================================================== */
header.masthead {
    background-image:
    linear-gradient(
        90deg,
        rgba(7,27,51,.85),
        rgba(7,27,51,.35)
    ),
    url("../img/header-bg.jpg");
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
}
header.masthead .container {
    min-height:700px;
    display:flex;
    align-items:center;
    justify-content:center;
}
header.masthead .intro-text {
    width:100%;
    padding-top:120px;
    padding-bottom:100px;
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
}
header.masthead img {
    max-width:190px;
    margin-bottom:40px;
}
header.masthead .intro-lead-in {
    width:100%;
    max-width:1100px;
    margin-left:auto;
    margin-right:auto;
    font-family:'Inter',sans-serif;
    font-size:clamp(26px,3vw,42px);
    font-weight:400;
    line-height:1.25;
    text-transform:none;
    color:white;
    text-align:center;
}
.hero-subtitle {
    width:100%;
    max-width:900px;
    margin-left:auto;
    margin-right:auto;
    margin-top:25px;
    font-size:20px;
    font-weight:300;
    line-height:1.5;
    color:rgba(255,255,255,.85);
    text-align:center;
}
header.masthead .btn {
    margin-top:45px;
}
/* =====================================================
   Sections
   ===================================================== */
section {
    padding:90px 0;
}
section h2.section-heading {
    color:var(--thellas-navy);
    font-weight:700;
    font-size:38px;
}
section h3.section-subheading {
    font-size:17px;
    color:var(--thellas-grey);
    font-style:normal;
}
/* =====================================================
   Buttons
   ===================================================== */
.btn-primary {
    background:var(--thellas-blue);
    border-color:var(--thellas-blue);
    border-radius:40px;
    padding:15px 40px;
    font-weight:600;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background:var(--thellas-blue-light) !important;
    border-color:var(--thellas-blue-light) !important;
}
/* =====================================================
   Portfolio
   ===================================================== */
#portfolio {
    background:var(--thellas-light);
}
.portfolio-item {
    border-radius:16px;
    overflow:hidden;
}
#portfolio .portfolio-link {
    position:relative;
}
#portfolio .portfolio-hover {
    background:rgba(21,101,192,.90);
}
#portfolio .portfolio-hover-content {
    color:white;
}
#portfolio .portfolio-caption {
    background:white;
    padding:25px;
}
#portfolio .portfolio-caption h4 {
    color:var(--thellas-navy);
    font-size:18px;
    font-weight:600;
}
#portfolio .portfolio-caption p {
    color:var(--thellas-grey);
    font-style:normal;
    font-size:15px;
}
/* =====================================================
   Portfolio Modal
   ===================================================== */
.portfolio-modal {
    padding-right:0 !important;
}
.portfolio-modal .modal-dialog {
    margin:1rem;
    max-width:100vw;
}
.portfolio-modal .modal-content {
    padding:100px 0;
    text-align:center;
}
.portfolio-modal .modal-content h2 {
    color:var(--thellas-navy);
    font-size:3em;
    margin-bottom:20px;
}
.portfolio-modal .modal-content p {
    line-height:1.8;
}
.portfolio-modal .modal-body {
    text-align:center;
}
.portfolio-modal .modal-body h2 {
    text-align:center;
}
/* Modal close X */
.portfolio-modal .close-modal {
    position:absolute;
    top:20px;
    right:20px;
    width:45px;
    height:45px;
    cursor:pointer;
}
.portfolio-modal .close-modal:hover {
    opacity:.35;
}
.portfolio-modal .close-modal .lr,
.portfolio-modal .close-modal .rl {
    width:1px;
    height:45px;
    background-color:var(--thellas-navy);
}
.portfolio-modal .close-modal .lr {
    margin-left:22px;
    transform:rotate(45deg);
}
.portfolio-modal .close-modal .rl {
    transform:rotate(90deg);
}
/* =====================================================
   Partners
   ===================================================== */
#partners {
    background:white;
}
/* =====================================================
   Contact
   ===================================================== */
section#contact {
    background:#04101F;
}
section#contact .section-heading {
    color:white;
}
/* =====================================================
   Footer
   ===================================================== */
footer {
    background:#04101F;
    padding:30px 0;
}
footer span.copyright {
    color:white;
}
/* =====================================================
   Mobile adjustments
   ===================================================== */
@media(max-width:768px) {
    #mainNav {
        background:#071B33;
    }
    #mainNav .navbar-brand {
        color:white;
    }
    #mainNav .nav-link {
        color:white;
    }
    #mainNav.navbar-shrink {
        background:#C5CAE9;
    }
    header.masthead .container {
        min-height:600px;
    }
    header.masthead .intro-text {
        padding-top:100px;
    }
    header.masthead .intro-lead-in {
        font-size:32px;
    }
    .hero-subtitle {
        font-size:18px;
    }
}
/* =====================================================
   Utility
   ===================================================== */
.text-primary {
    color:var(--thellas-blue) !important;
}