:root {
    --clr-blue: #163764;
    --clr-lightblue: #4892BB;
    --clr-white: #ffffff;
    --clr-text: #414141;
    --ff-1: 'Open Sans', sans-serif;
    --ff-2: 'Oswald', sans-serif;
    --thm-base: #163764;
}

body {
    font-family: var(--ff-1);
    font-size: 1.125rem;
    color: var(--clr-text);
}

h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 {
    font-family: var(--ff-2);
    font-weight: 700;
}


.form-control {
    border-color: var(--thm-base) !important;
}

.btn-primary {
    color: #fff;
    background-color: var(--clr-lightblue) !important;
    border-color: var(--clr-lightblue) !important;
    border-radius: .5rem !important;
}

.btn-custom {
    background: var(--clr-lightblue);
    color: white;
    border-radius: 0;
    border: unset;
}

a {
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
}

.py-10 {
    padding-top: 6rem;
    padding-bottom: 6rem;
}

.my-10 {
    margin-top: 6rem;
    margin-bottom: 6rem;
}

.py-12 {
    padding-top: 10rem;
    padding-bottom: 10rem;
}

.my-12 {
    margin-top: 10rem;
    margin-bottom: 10rem;
}

.bullet-item::before {
    content: '\f111';
    font-family: 'FontAwesome';
    font-size: 4px;
    padding-right: 10px;
}

/*** custom tags for our history*/

.solutions .comp-row .custom-tags {
    margin: 25px 0;
}

.solutions .comp-row .col-sm-6:nth-child(even) {
    margin-top: 50px;
}

.comp-row {
    display: flex;
    flex-wrap: wrap;
}

.custom-tags {
    border: 1px solid #fff;
    border-radius: 5px;
    background: #008AFC24;
}

    .custom-tags:hover {
        background: var(--clr-blue);
        transition: ease .5s;
        color: #ffffff;
    }

        .custom-tags:hover h3 {
            transition: ease .5s;
            color: #ffffff;
        }

.custom-tags {
    border: 1px solid #fff;
    border-radius: 5px;
    background: #F2F2F2;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 20px;
    border-bottom: 2px solid #4892BB66 !important;
}

    .custom-tags .card-body {
        border: unset !important;
    }

    .custom-tags h3 {
        color: #000000;
    }

.card.custom-tags {
    height: auto !important;
}

/* Footer*/

.footer-phone {
    text-align: right;
}

.w-70 {
    max-width: 70%;
}

.border-top {
    border-top: 1px solid #FFFFFF33;
}

.no-list-type {
    list-style: none;
    padding: 0;
}

.subdecoration::after {
    content: '';
    display: block;
    width: 60%;
    height: 1px;
    background: #FFFFFF33;
    margin-top: 10px;
}

.rounded-icon {
    width: 30px;
    height: 30px;
    display: flex;
    align-content: center;
    justify-content: center;
    border-radius: 50%;
    background: #008AFC61;
    align-items: center;
    color: #fff;
}

.rounded-icon a {
    color: #fff;
}

.nav-footer li {
    margin-bottom: .5rem;
}

.underlined::after {
    content: '';
    width: 10%;
    display: block;
    height: 4px;
    border-radius: 0;
    background: var(--clr-blue);
    text-align: center;
    margin: auto;
    margin-top: 20px;
}

.nav-header {
    /*
    position: sticky;
    top: 0;
    background-color: var(--clr-blue);
    z-index:100;
    */
}

/* Menu Styling */
.menu {
    list-style: none;
    display: flex;
    justify-content: center;
    place-items: center;
    padding: 0 2rem;
    margin-bottom: 0;
}

.menu-item {
    position: relative;
    padding: 10px 10px;
}

.menu-link {
    color: var(--clr-white);
    text-decoration: none;
    padding: 10px 15px;
    display: block;
}

/* Mega Menu Hidden by Default */
.mega-menu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 800px;
    background-color: var(--clr-blue);
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
    padding: 20px;
    display: flex;
    gap: 20px;
    padding: 20px;
    border-radius: 5px;
    /* Initially hidden */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, visibility 0.3s;
}

/* Show Mega Menu on Hover */
.menu-item:hover .mega-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Menu Columns */
.menu-column {
    width: 33%;
}

.menu-column ul {
    list-style: none;
    margin: 0;
    padding: 0;

    &:not(:last-child) {
        margin-bottom: 13px;
    }
}

/* Sub Menu Headers */
.sub-menu-header {
    font-weight: bold;
    text-transform: uppercase;
    border-bottom: 1px solid var(--clr-lightblue);
    margin-bottom: .25rem;

    a {
        color: var(--clr-lightblue) !important;
        font-size: 12px !important;

        &:hover {
            color: lightgray !important;
        }
    }
}

/* Links inside Mega Menu */
.mega-menu a {
    text-decoration: none;
    color: var(--clr-white);
    font-size: 16px;
    display: block;
}

    .mega-menu a:hover {
        color: lightgray;
    }

/* Logo */
.header-logo {
    height: auto;
    vertical-align: middle;
}

.logo-container {
    place-self: center;
    /*padding: 1rem;*/
}


.underlined.under-white::after {
    background: var(--clr-white);
}



.underlined.border-left::after {
    text-align: left;
    margin: 0;
}

.solutions-row .custom-card:hover {
    background: #008AFC;
}

/*
* Iconbox component
*/
.iconbox .fa {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}

.iconbox .fa i {
    width: 40px;
    height: 40px;
    display: flex;
    background: var(--clr-blue);
    align-content: center;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    margin-right: 1.5rem;
    color: #ffffff;
}

/*
* Card component
*/
.card-body {
    border-bottom: 3px solid var(--clr-lightblue);
    height: 100%;
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
}

.card-link {
    height: 100%;
}

.card {
    height: 100%;
}

/* 
* Card icon
*/

.gap-2-percent {
    gap: 2%;
}

.custom-card {
    border: 1px solid var(--clr-white);
    border-radius: 5px;
    background: #008AFC24;
}

    .custom-card:hover {
        background: var(--clr-blue);
        transition: ease .5s;
    }

/*
* Testimonial carousel
*/

.testimonial .carousel-indicators button {
    background-color: #000;
    opacity: 1;
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.testimonial .carousel-item {
    height: auto;
    min-height: auto;
    width: 100%;
}

/*
* banner component
*/
.banner {
    border-radius: 5px;
}

.banner-body {
    position: relative;
    z-index: 3;
    border-radius: 5px;
    border: 1px solid var(--clr-white);
}

.banner-overlay {
    background: var(--clr-blue);
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 1;
    z-index: 2;
    border-radius: 5px;
    border: 1px solid var(--clr-white);
}

.banner:hover .banner-overlay {
    opacity: .7;
    transition: opacity 0.3sease-in-out;
    background: #000;
}

.banner-body {
    padding: 30px;
}

    .banner-body h3,
    .banner-body p {
        color: var(--clr-white);
    }

    .banner-body h3 {
        margin-bottom: 1rem;
    }

    .banner-body p {
        color: var(--clr-white);
        font-size: 16px;
    }

.gap-2-percent .col-sm-6 {
    max-width: 49%;
}

.engineering-services .card-body {
    border-bottom: unset;
    height: 100%;
    display: flex;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    flex-wrap: wrap;
    text-align: left;
}

.dashed-items {
    padding: 15px 0px;
    border-bottom: 2px dashed;
}


.solid-items {
    padding: 15px 0px;
    border-bottom: 2px solid;
}

/* Buttons
*/
.border-bottom-7{
    border-bottom: 7px solid #163764;
}

.border-unset {
    border: unset !important;
}

/*Products*/
.product-title-row {
    padding-top: 150px !important;
}

/*Header*/
.mobile-nav {
    background-color: var(--clr-blue) !important;
}

.mobile-nav .navbar-toggler {
    background-color: #ffffff;
}

.mobile-nav .navbar-toggler:focus {
    box-shadow: 0;
}

.mobile-nav #offcanvasNavbar {
    background: var(--clr-blue);
}

.mobile-nav #offcanvasNavbar .btn-close{
    background: unset !important;
}

.mobile-nav #offcanvasNavbar .btn-close .fa-xmark{
    color: #fff;
}

.mobile-nav {
    .dropdown-menu {
        padding: 0 1rem 1rem;

        a {
            display: inline-flex;
            padding: .25rem 0;
    
            sup {
                top: .5em;
            }
        }
    }
    .sub-menu-header {
        margin: 1rem 0 0;
    }
}

a.menu-link.menu-button {
    background: var(--clr-lightblue);
    padding: 10px 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    max-width: 150px;
    border-radius: .25rem;
}

a.menu-link.menu-button:hover {
    background: var(--clr-blue);
    border: 1px solid #fff;
    transition: .5s ease;
    text-decoration: none;
}

#mainHeader.sticky {
    position: fixed;
    background-color: var(--clr-blue);
    z-index: 999 !important;
}

#mainHeader{
    position:absolute;
    background-color: var(--clr-blue);
    z-index: 99;
}

/*Footer*/
footer{
    background-color: #121212;
}

.nav-footer li a {
    color: #ffffff;
}

.nav-footer li a:hover {
    color: var(--clr-lightblue);
}

footer a:hover{
    color: var(--clr-lightblue);
}

#main-footer {
    font-size: .875rem;

    > .container {
        max-width: 72rem;
    }
}


/*Newsletter*/
#news-subs-form button.btn.news-subs-submit.btn-sub {
    background: #4892BB;
    color: #fff;
    font-weight: bold;
    border-radius: .5rem;
    min-height: unset;
    padding: 0.5rem;
}

#news-subs-form button.btn.news-subs-submit.btn-sub:hover {
    background: var(--clr-lightblue) !important;
    transition: .5s ease;
}

#news-subs-form .form-control {
    background: #00000000;
    color: #fff !important;
    border: 1px solid #ffffff24 !important;
    border-radius: .5rem;
    padding: .5rem 1.25rem;

    &::placeholder {
        color: var(--clr-white);
    }
}

#news-subs-form p, #news-subs-form h5 {
    display: none;
}

/*Contact us form*/
.form-col form .card-body.card-b-int {
    border: unset;
    width: 100%;
    display: block;
    padding: 0;
}

.form-col form .card {
    border: unset;
    background: #ffffff00;
}

.form-col form{
    border: 2px solid #e1e1e1;
    border-radius: 20px;
}

.form-col form h2 {
    display: none;
}

.form-col form #form-save-button {
    margin: 0;
    width: 100%;
    padding: 14px;
    border-radius: 10px;
    min-width: 50px;
}

.form-col .form-control {
    border-color: #e1e1e1;
    border: 2px solid #e1e1e1;
    border-radius: 10px;
    padding: .7rem;
}

.form-col form.answers{
    width: 100%;
}

.form-col form .col-md-11.form-group{
    margin: 0!important;
}

.form-col form .answers.col-md-12 {
    width: 100%;
}

.form-col form .card-content{
    padding: 2rem 3rem;
}

.form-col .form-control {
    border-color: #e1e1e1 !important;
}

.form-col .form-control:focus {
    box-shadow: unset !important;
    border-color: var(--clr-blue) !important;
}

.form-col form .col-md-11.form-group {
    margin: 0 !important;
    width: 100%;
    padding: 0;
}

.form-col form .form-group.row {
    margin: 0;
}

.form-col form .col-md-6 .form-group.row {
    max-width: 90%;
    margin: auto;
    margin-bottom: 0 !important;
}

.form-col form .col-md-12 {
    width: 95%;
    margin: auto;
}

.form-col form .form-group.row {
    width: 95%;
    margin: auto;
}

/*carousel home*/
#public-articles-carousel > .carousel-control-prev, #public-articles-carousel > .carousel-control-next {
    width: 0;
    display: none;
}

#public-articles-carousel .pp-ul {
    padding: 0;
}

#public-articles-carousel .pp-footer {
    text-align: start;
}

#public-articles-carousel .pp-footer .btn {
    background: #4892BB !important;
    border: unset;
    border-radius: .5rem;
    padding: 10px 20px;
}

#public-articles-carousel .pp-footer .btn:hover {
    background: var(--clr-blue) !important;
}

#public-articles-carousel.pp-li {
    border: unset;
    border-radius: 10px;
    margin: 1rem;
    background: #f5f5f5;
    border-bottom: 4px solid #008AFC61;
    box-shadow: 0px 0px 4px 0px #00000040;
    border-top: 1px solid #87868636;
    border-left: 1px solid #87868636;
    border-right: 1px solid #87868636;
}

#public-articles-carousel .carousel-indicators [data-bs-target] {
    width: 10px;
    height: 10px;
    background-color: var(--clr-lightblue);
    border-radius: 50%;
    filter: unset !important;
}

/*Testimonial*/
.testimonial-carousel .carousel-inner {
    padding: 23px 5%;
}

.testimonial-carousel .carousel-indicators [data-bs-target] {
    background-color: var(--clr-lightblue);
    height: 10px;
    width: 10px;
    border-radius: 50%;
}

.testimonial-carousel .carousel-indicators {
    bottom: -30px;
}

.testimonial-carousel .carousel-item {
    height: auto;
    min-height: 0px !important;
}

.testimonial-carousel .carousel-item .comp-row {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    min-height: 420px;
}

.testimonial-carousel .carousel-item .comp-row > div {
    background: #a9a9a91c;
    border-bottom: 3px solid var(--clr-lightblue);
    border-radius: 10px;
    padding: 1rem;
    width: 80%;
    box-shadow: 0px 0px 4px 0px #00000040;
    transition: .5s ease;

    @media (width >= 991px) {
        width: 30%;
    }

    i, .fa {
        width: 3rem;
        height: 3rem;
        font-size: 1.5rem;
        display: flex;
        justify-content: center;
        align-content: center;
        flex-wrap: wrap;
        border-radius: 50%;
        background: var(--clr-lightblue);
        color: #fff;
        margin-bottom: 1rem;
    }

    h3 {
        color: var(--clr-blue);
    }

    &:hover {
        transform: translateY(-20px);
        border-bottom-color: var(--clr-blue);

        i, .fa {
            background: var(--clr-blue);
        }
    }
}

/* Mobile*/
@media screen and (min-width: 767px) {
    .over-image {
        position: absolute;
        top: -140px;
    }
    .desktop-nav {

    }
}

@media screen and (max-width: 992px) {
    .desktop-nav {
        display: none !important;
    }

    .mobile-nav .mega-menu {
        width: auto;
        background-color: var(--clr-blue);
        box-shadow: 0;
        flex-direction: column;
    }

    .footer-phone {
        text-align: left;
    }

    form:not(#news-subs-form) {
        border: unset;
        padding: 0;
        border-radius: 20px;
    }

    .form-col form .form-group.row,
    .form-col form .col-md-6 .form-group.row,
    .form-col form  select.form-control {
        width: 100%;
        margin: 0;
    }

    .form-col form #form-save-button {
        width: 100%;
        max-width: 100%;
    }

    .post-content {
        padding: 0 !important;
    }

    .post-content {
        margin-top: 100px;
    }

    .btn-sub {
        color: #fff;
        background-color: var(--thm-base) !important;
        border-color: var(--thm-base) !important;
    }

    a.menu-link.dropdown-toggle {
        position: absolute;
        top: 0;
        left: 30%;
    }

    .product-li {
        width: 50% !important;
    }

    .products-cont {
        padding: 1rem 15px !important;
    }

    #news-subs-form{
        text-align:left;
    }

    #news-subs-form > h5 {
        color: #fff;
    }
}


/*pacific 2.0*/
.icon-description {
    display: none;
}

.iconbox-custom:hover .h4 {
    color: #4892bb !important;
}

.menu-link:hover {
    text-decoration: underline;
}


/* custom solutions*/
.float-effect:hover {
    transition: .5s ease;
    transform: translateY(-10px);
}

/*POsts*/
#post-header {
    height: 99px;
    background: var(--clr-blue);
}

.post-content {
    padding: 2rem 10rem;
}

.post-content .carousel-item img {
    width: auto !important;
}

.post-content .carousel-control-next-icon, .carousel-control-prev-icon {
    display: inline-block;
    width: 3rem;
    height: 3rem;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 100% 100%;
    background-color: var(--clr-blue);
    border-radius: 50%;
    background-size: 2rem;
    background-repeat: no-repeat;
    background-position: center;
}

/* Forms*/

.custom-radio-buttons {
    margin: 0 0 1.5rem 0 !important;
    padding: 0 0 1.5rem 0 !important;
}

custom-checkbox-buttons {
    padding: 1.5rem 0 !important;
}

.custom-select {
    margin-bottom: 1.5rem !important;
}

.custom-select .col-md-11 .form-control {
    margin: 0 0 1.5rem 0 !important;
    width: 100%;
    max-width: 100% !important;

}
.custom-radio-buttons .pr-3,
.custom-checkbox-buttons .pr-3 {
    background: #a5a5a5;
    padding: 10px;
    border-radius: 10px;
    color: #fff;
}

.custom-radio-buttons .pr-3.item-check, 
.custom-checkbox-buttons .pr-3.item-check {
    background: var(--clr-blue);
}

.custom-radio-buttons .form-check-input:checked,
.custom-checkbox-buttons .form-check-input:checked {
    background: none !important;
    border: none;
    margin: 0 !important;
}

.custom-radio-buttons .form-check-input:checked:before,
.custom-checkbox-buttons .form-check-input:checked:before {
    content: "\f00c";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin: 0 !important;
    color: #fff;
}

.custom-radio-buttons .form-check-input:focus,
.custom-checkbox-buttons .form-check-input:focus {
    border-color: unset;
    box-shadow: none;
}

.custom-select select.form-control {
    border-color: #e1e1e1 !important;
    border: 2px solid #e1e1e1;
    border-radius: 10px;
    padding: .7rem;
    margin: 0;
    width: 100%;
    max-width: 100%;
}

form .card-body {
    display: block;
}

    form .card-body.col-md-11.form-group {
        margin-left: 0 !important;
    }

.form .form-control {
    border: 2px solid #e1e1e1 !important;
    border-radius: 10px;
    padding: 1rem;
}

form #form-save-button {
    width: 100%;
    padding: 1.5rem;
    border-radius: 10px;
    font-weight: bold;
    font-size: 20px;
    background-color: var(--clr-blue) !important;
    max-width: 95%;
    display: flex;
    margin: auto !important;
    justify-content: center;
}

form select.form-control {
    max-width: 95%;
    margin: auto;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: white;
    padding-right: 30px;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

form #form-save-button:hover {
    width: 100%;
    border-radius: 10px;
    font-weight: bold;
    font-size: 20px;
    background-color: var(--clr-lightblue) !important;
}

form .col-md-11.form-group {
    margin-left: 0 !important;
    width: 100%;
}

form:not(#news-subs-form) .form-row .col-md-6 {
    width: 49%;
}

form:not(#news-subs-form) .form-row  {
    gap: 2%;
}

form .answers.col-md-12 {
    width: 100%;
}

form .card-body.card-b-int {
    border: unset !important;
    padding: 0;
    margin: 0;
}

form .card.card-b-int {
    border: unset;
}

form .card-body {
    display: block;
    padding: 0;
    border: unset !important;
}

form .card {
    border: unset;
}

form:not(#news-subs-form) {
    border: 2px solid #e1e1e1;
    padding: 3rem;
    border-radius: 20px;
    margin-bottom: 1.5rem;
}

form .form-control {
    border-color: #e1e1e1 !important;
    border: 2px solid #e1e1e1;
    border-radius: 10px;
    padding: .7rem;
}

@media screen and (max-width: 767px) {
    form .form-row {
        display: flex;
        flex-direction: column;
    }

    form .form-row .col-md-6 {
        width: 100%;
    }

    form:not(#news-subs-form) .form-row .col-md-6 {
        width: 100%;
    }

    .form-col form .col-md-6 .form-group.row {
        max-width: 100%;
        width: 100%;
    }

    form select.form-control {
        max-width: 100%;
        width: 100%;
    }

    .form-col form:not(#news-subs-form) {
        border: unset !important;
        padding: 0 !important;
        border-radius: 20px !important;
    }
}

.externals-form-header {
    padding: 200px 0 178px 0;
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: scroll;
    background-size: cover;
    background-image: url(/img/uploads/originals/638733425989139842-984070ede868d7a3a53724c7ff284c0b.jpeg);
}