@import url(https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&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&display=swap);
:root {
    --primary-color: #044B56;
    --primary-dark-color: #389faf;
    --green-color: #bbd5d1;
    --coral-color: #EC9490;
    --coral-dark-color: #c97875;
    --rose-color: #8f80ee;
    --text-color: #3b3b3b
}

body {
    font-family: "Poppins", sans-serif;
    font-size: 1.2rem;
    color: #393939
}

* {
    margin: 0;
    padding: 0
}

img {
    max-width: 100%
}

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

a:hover {
    text-decoration: underline
}

h1 {
    font-size: 45px
}

h2 {
    font-size: 30px
}

h3 {
    font-size: 24px
}

h4 {
    font-size: 18px
}

h5 {
    font-size: 1.1rem
}

p {
    line-height: 1.6em;
    color: #393939
}

p,
ul li {
    font-size: 16px
}

.p-italic {
    font-style: italic;
    text-align: center
}

.header {
    position: sticky;
    width: 100%;
    top: 0;
    z-index: 1000;
    background-color: #fff;
    padding: 7px 0;
    transition: all 0.4s ease-in-out
}

.header a {
    color: var(--primary-color);
    text-decoration: none
}

.header .navbar-nav a:hover {
    text-decoration: none;
    background-color: #eee;
    border-radius: 5px
}

.header.sticky {
    background-color: #fff;
    box-shadow: 0 4px 12px rgb(0 0 0 / .1);
    padding: 0;
    transition: all 0.4s ease-in-out
}

.header .header-top {
    border-bottom: 1px solid #eee;
    max-height: 100px;
    transition: all 0.4s ease-in-out;
    overflow: hidden;
    font-size: 1rem
}

.header.sticky .header-top {
    max-height: 0;
    transition: max-height 0.4s ease-in-out;
    overflow: hidden
}

.header .socials a.social-ic {
    border-radius: 3px;
    width: 30px;
    height: 30px
}

.header-ic,
.header-ic>a {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: #044B56;
    font-size: 14px
}

.header-ic i {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between
}

.header-ic i svg {
    width: 16px;
    height: 16px;
    fill: #044B56
}

.header .btn-primary {
    font-size: 16px;
    padding: 6px 20px;
    font-weight: 400
}

.socials {
    display: flex;
    flex-direction: row;
    gap: 8px
}

.socials a.social-ic {
    border-radius: 50%;
    text-decoration: none;
    width: 38px;
    height: 38px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.socials a.social-ic svg {
    width: 16px;
    height: 16px
}

a.navbar-brand {
    margin-right: 40px
}

a.navbar-brand svg {
    width: 180px;
    height: auto
}

.navbar {
    padding: 15px;
    font-family: "Poppins", sans-serif;
    font-size: 1.2rem
}

.navbar-nav .nav-item {
    padding: 0 14px;
    font-size: 15px
}

.navbar-nav .nav-link.active,
.navbar-nav .nav-link.show {
    color: var(--coral-color)
}

.dropdown:hover a.nav-link.dropdown-toggle+ul.dropdown-menu {
    display: block
}

.dropdown-item.has-arrow {
    position: relative
}

.dropdown-item.has-arrow::after {
    content: "";
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Cpath fill='%23000000' d='M37.6,25l-2.1-2.5l-17.2-20l-5.8,5L27.6,25L12.5,42.6l5.8,5l17.2-20L37.6,25L37.6,25z'/%3E%3C/svg%3E%0A") no-repeat center;
    background-size: contain
}

.card-title {
    font-size: 22px;
    color: var(--primary-color);
    margin-top: 10px
}

.card-text {
    font-size: 16px
}

@media all and (min-width:992px) {
    a.navbar-brand {
        margin-right: 30px
    }
    .dropdown-menu li {
        position: relative
    }
    .nav-item .submenu {
        display: none;
        position: absolute;
        left: 100%;
        top: -7px
    }
    .nav-item .submenu-left {
        right: 100%;
        left: auto
    }
    .dropdown-menu>li:hover {
        background-color: #f1f1f1
    }
    .dropdown-menu>li:hover>.submenu {
        display: block
    }
}

@media (max-width:991px) {
    .dropdown-menu .dropdown-menu {
        margin-left: .7rem;
        margin-right: .7rem;
        margin-bottom: .5rem
    }
}

.dropdown-menu {
    border-radius: 0;
    box-shadow: 2px 2px 8px rgb(0 0 0 / .1);
    padding: 0;
    min-width: 180px
}

.dropdown-menu li a {
    font-size: 13px;
    padding: 10px 17px;
    border-bottom: 1px solid #eee
}

.dropdown-menu li:last-child a {
    display: inline-block;
    border-bottom: none
}

.hero-banner {
    width: 100%;
    height: 600px;
    position: relative
}

.hero-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.hero-banner>#myVideo {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.hero-banner .hero-caption {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-color: #fff0;
    background-image: linear-gradient(90deg, rgb(4 75 86) 0%, rgb(255 255 255 / .24) 100%)
}

.hero-banner .hero-caption h1 {
    font-size: 45px;
    color: #fff;
    font-weight: 400
}

.hero-banner .hero-caption h3 {
    color: #fff;
    margin-top: 24px;
    font-weight: 400
}

.home-highlights h3 {
    font-family: "Poppins", sans-serif;
    font-weight: 300
}

.home-highlights p {
    font-size: 18px;
    color: #fff
}

p.home-highlights2 {
    font-size: 22px
}

.h-full {
    height: 100%
}

.flex-2 {
    flex: 2
}

.p-sec {
    padding: 70px 0
}

.b-sec {
    padding: 0 0 10px 0
}

.section-shadow {
    position: relative;
    box-shadow: 0 0 25px rgb(0 0 0 / .1)
}

.section-shadow-top {
    position: relative;
    box-shadow: 0 -15px 15px rgb(0 0 0 / .05)
}

.custom-blocks {
    flex: 2;
    background-color: #fff;
    border-top: 3px solid #379baf;
    padding: 40px 50px;
    box-shadow: 0 0 25px rgb(0 0 0 / .1);
    text-align: center
}

.custom-blocks i img {
    width: 120px
}

.custom-blocks h3 {
    font-size: 22px;
    text-align: center;
    margin-top: 20px
}

.custom-blocks a {
    color: var(--bs-heading-color)
}

.custom-blocks a:hover {
    text-decoration: none;
    color: var(--primary-color)
}

.btn {
    min-width: 120px;
    border-radius: 0;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600
}

.btn:hover {
    text-decoration: none
}

.btn-primary {
    color: #fff !important;
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--coral-color);
    --bs-btn-border-color: var(--coral-color);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--coral-dark-color);
    --bs-btn-hover-border-color: var(--coral-dark-color);
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--coral-dark-color);
    --bs-btn-active-border-color: var(--coral-dark-color);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--coral-color);
    --bs-btn-disabled-border-color: #0d6efd
}

.btn-secondary {
    color: #fff !important;
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--primary-color);
    --bs-btn-border-color: var(--primary-color);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--primary-dark-color);
    --bs-btn-hover-border-color: var(--primary-dark-color);
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--primary-dark-color);
    --bs-btn-active-border-color: var(--primary-dark-color);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--primary-color);
    --bs-btn-disabled-border-color: #0d6efd
}

.btn-btn-link {
    color: var(--primary-color)
}

.btn-btn-link:hover {
    background-color: #393939;
    color: #fff
}

.btn.btn-primary:hover {
    background-color: #393939;
    border-color: #393939
}

.btn.btn-btn-link.has-arrow:hover::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Cpath fill='%23FFFFFF' d='M37.6,25l-2.1-2.5l-17.2-20l-5.8,5L27.6,25L12.5,42.6l5.8,5l17.2-20L37.6,25L37.6,25z'/%3E%3C/svg%3E%0A")
}

.btn.has-arrow {
    position: relative;
    padding-right: 30px
}

.btn.has-arrow::after {
    content: "";
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Cpath fill='%23044b56' d='M37.6,25l-2.1-2.5l-17.2-20l-5.8,5L27.6,25L12.5,42.6l5.8,5l17.2-20L37.6,25L37.6,25z'/%3E%3C/svg%3E%0A") no-repeat center;
    background-size: contain
}

.form-control,
.form-select {
    border-radius: 20px;
    border-width: 2px
}

.sec-gradient {
    background: #349baa;
    background: linear-gradient(90deg, rgb(56 159 175) 0%, rgb(4 75 86) 100%);
    color: #fff
}

.bg-coral {
    background-color: var(--coral-color)
}

.bg-primary {
    background-color: #044b56 !important;
    color: #fff
}

.card {
    border: none
}

.card .card-body {
    padding: 0
}

.card .card-body h5 {
    margin: 17px 0;
    color: var(--primary-color);
    font-weight: 600
}

footer,
footer p {
    font-size: 13px;
    padding-top: 3px
}

footer h3 {
    font-size: 14px;
    font-weight: 700
}

footer ul {
    list-style: none;
    padding: 0
}

footer ul li {
    padding-bottom: 0
}

footer ul li a {
    font-size: 13px;
    color: var(--text-color);
    text-decoration: none;
    transition: all ease 0.2s
}

footer ul li a::before {
    position: relative;
    display: inline-block
}

footer ul li a:hover {
    padding-left: 7px;
    text-decoration: none;
    transition: all ease 0.2s
}

footer ul li a:hover::before {
    content: "";
    left: -5px;
    width: 12px;
    height: 12px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Cpath fill='%23000000' d='M37.6,25l-2.1-2.5l-17.2-20l-5.8,5L27.6,25L12.5,42.6l5.8,5l17.2-20L37.6,25L37.6,25z'/%3E%3C/svg%3E%0A") no-repeat center;
    background-size: contain
}

footer .footer-copyright {
    padding: 30px 30px;
    border-top: 1px solid #eee;
    text-align: center;
    font-size: 13px;
    margin-top: 30px
}

a.social-ic {
    text-decoration: none
}

a.social-ic svg {
    width: 24px;
    height: 24px
}

.inner-container .breadcrumbs {
    background-color: var(--primary-color);
    color: #fff;
    padding: 33px 0
}

ol.breadcrumb li.breadcrumb-item a {
    color: var(--coral-color)
}

.breadcrumb-item.active {
    color: rgb(255 255 255 / .7)
}

.content-area.img-left div.img,
.content-area.img-right>div.img {
    max-width: 45%;
    margin-bottom: 10px;
    position: relative
}

.content-area.img-left div.img::before,
.content-area.img-right>div.img::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 10px;
    right: 10px;
    bottom: 10px;
    border: 1px solid rgb(255 255 255 / .5);
    border-radius: 24px 0 24px 0
}

.content-area.img-left img,
.content-area.img-right img {
    width: 100%;
    height: auto;
    border-radius: 24px 0 24px 0
}

.content-area.img-left div.img {
    float: left;
    margin-right: 20px
}

.content-area.img-right div.img {
    float: right;
    margin-left: 20px
}

ul.list-styles {
    padding: 0
}

ul.list-styles li {
    position: relative;
    list-style: none;
    padding: 5px 0 5px 28px
}

ul.list-styles li::before {
    content: "";
    width: 20px;
    height: 20px;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 6px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpolygon fill='%23ffffff' fill-rule='evenodd' points='9.707 14.293 19 5 20.414 6.414 9.707 17.121 4 11.414 5.414 10'/%3E%3C/svg%3E%0A") no-repeat center var(--primary-color);
    background-size: 16px
}

.carousel-control-prev,
.carousel-control-next {
    background-color: var(--primary-color);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    top: 30%;
    transform: translateY(-25%)
}

.text-primary {
    color: #044b56 !important
}

.inner-banner {
    width: 100%;
    height: 600px;
    position: relative
}

.inner-banner>img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.inner-banner .banner-caption {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: #044b56;
    background: linear-gradient(90deg, rgb(4 75 86) 0%, #fff0 100%)
}

.inner-banner .banner-caption h5 {
    color: #fff
}

.inner-banner .banner-caption h1 {
    font-size: 3rem;
    color: #fff;
    font-weight: 400;
    max-width: 470px
}

.inner-banner .banner-caption h3 {
    color: #fff;
    font-size: 20px;
    margin-top: 20px;
    font-weight: 400
}

.custom-icon-blocks div.d-flex>i {
    background: var(--primary-color);
    width: 60px;
    height: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.custom-icon-blocks div.d-flex>i+h3 {
    flex: 2;
    margin-left: 15px;
    font-size: 21px
}

.custom-icon-blocks div.d-flex+p {
    margin-top: 50px
}

.spacing-content {
    line-height: 32px
}

.white-card {
    background-color: #fff;
    border-radius: 14px;
    padding: 15px;
    display: flex;
    gap: 15px
}

.white-card+.white-card {
    margin-top: 20px
}

.white-card>.icon+.card-content {
    flex: 2
}

.white-card>.icon+.card-content h3 {
    font-size: 1.125rem;
    margin: 12px 0;
    color: var(--primary-color)
}

.white-card>.icon+.card-content p {
    color: var(--text-color);
    font-size: 16px;
    line-height: 20px
}

.sectors-blocks>div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 20px 0
}

.sectors-blocks>div>i {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    margin-bottom: 20px
}

.sectors-blocks>div>h3 {
    font-size: 22px
}

.gray-bg {
    background-color: #fafafa
}

#toTop {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px
}

#toTop a {
    width: 52px;
    height: 52px;
    background: var(--coral-color);
    border-radius: 50%;
    box-shadow: 5px 5px 10px rgb(0 0 0 / .2);
    z-index: 999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: #fff
}

#toTop a:hover {
    text-decoration: none;
    background-color: var(--coral-dark-color)
}

@media only screen and (max-width:1200px) {
    .navbar {
        font-size: 1rem
    }
}

@media only screen and (max-width:1024px) {
    .hero-banner .hero-caption h1 {
        font-size: 2rem
    }
    h3 {
        font-size: 1.5rem
    }
    .custom-blocks {
        padding: 10px 20px
    }
    .custom-blocks h3 {
        font-size: 18px;
        margin-top: 10px
    }
    h1 {
        font-size: 3rem
    }
    h2 {
        font-size: 2rem
    }
    h3 {
        font-size: 1.5rem
    }
    h4 {
        font-size: 1rem
    }
    h5 {
        font-size: 1rem
    }
    p {
        font-size: .8rem
    }
}

@media only screen and (max-width:575px) {
    h1 {
        font-size: 2.5rem
    }
    h2 {
        font-size: 1.5rem
    }
    h3 {
        font-size: 1rem
    }
    h4 {
        font-size: .95rem
    }
    h5 {
        font-size: .9rem
    }
    a.navbar-brand {
        margin-right: 0
    }
    .container {
        width: 90%
    }
    .hero-banner {
        height: 400px
    }
    .hero-banner .hero-caption h1 {
        font-size: 1.7rem;
        padding: 0 !important
    }
    .hero-banner .hero-caption h3 {
        font-size: 1.2rem;
        padding: 0 !important
    }
}

@media (max-width:767px) {
    .carousel-inner .carousel-item>div {
        display: none
    }
    .carousel-inner .carousel-item>div:first-child {
        display: block
    }
}

.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
    display: flex
}

@media (min-width:768px) {
    .carousel-inner .carousel-item-end.active,
    .carousel-inner .carousel-item-next {
        transform: translateX(25%)
    }
    .carousel-inner .carousel-item-start.active,
    .carousel-inner .carousel-item-prev {
        transform: translateX(-25%)
    }
}

.carousel-inner .carousel-item-end,
.carousel-inner .carousel-item-start {
    transform: translateX(0)
}