/* ========================= */
/* :: 1.0 WEB FONTS  */
/* ========================= */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&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=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

/* ================================== */
/* :: 2.0 GLOBAL Variable Define CSS  */
/* ================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
:root {
    /* Font */
    --poppins: 'Poppins', sans-serif;
    --roboto: 'Roboto', sans-serif;
    --inter: 'Inter', sans-serif;

    /* Color Palette */
    --white: #fff;
    --black: #000;
    --primary: #021f5c;
    --secondary: #00a1e1;
    --secondary-2: #00a0e3;
    --dark-grey: #4b4b4b;
}

/* ========================= */
/* :: 3.0 Reset CSS */
/* ========================= */
html,
body {
    height: 100%;
    scroll-behavior: smooth;
}
body {
    color: var(--dark-grey);
    font-size: 16px;
    font-family: var(--poppins);
    font-weight: 400;
    line-height: 1.6;
    background-color: var(--white);
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}
p,
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    padding: 0;
}
section,
.section {
    position: relative;
}
.container {
    width: 100%;
    margin: 0 auto;
    padding: 0 16px;
}
a,
button {
    outline: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    text-decoration: none;
    -webkit-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}
button {
    padding: 0;
    border: none;
    background: unset;
}
ol,
ul {
    margin: 0;
    padding: 0;
}
ol li,
ul li {
    list-style: none;
}
img {
    height: auto;
    max-width: 100%;
    object-fit: cover;
}
input,
input:focus,
input:focus-visible,
input:active,
select,
.form-select,
.form-select:focus,
textarea {
    outline: none;
    box-shadow: none;
}
* + address,
* + dl,
* + fieldset,
* + figure,
* + ol,
* + p,
* + pre,
* + ul {
    margin: 0;
    padding: 0;
}

::selection {
    background: var(--secondary);
    color: var(--white);
    text-shadow: none;
}

/* =============================== */
/* :: 4.0 Common CSS */
/* =============================== */

/* ===== Typography CSS Start ===== */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--roboto);
}
.fs-1 {
    font-size: 32px !important;
    line-height: 1.12;
}
.fs-2 {
    font-size: 28px !important;
    line-height: 1.12;
}
.fs-3 {
    font-size: 24px !important;
    line-height: 1.3;
}
/* ===== Typography CSS End ===== */

/* ===== Color CSS Start ===== */
.text-primary {
    color: var(--primary) !important;
}
.text-secondary {
    color: var(--secondary) !important;
}
.text-secondary-2 {
    color: var(--secondary-2) !important;
}

.bg-primary {
    background-color: var(--primary) !important;
}
.bg-secondary {
    background-color: var(--secondary) !important;
}

.ff-inter {
    font-family: var(--inter);
}
/* ===== Color CSS End ===== */

/* ===== Button CSS Start ===== */
.btn {
    padding: 0;
    border: none;
    border-radius: 0;
    position: relative;
    z-index: 1;
}

.btn__content {
    padding: 13px 28px;
    color: var(--white);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid transparent;
    border-radius: 0;
    background-color: var(--secondary);
    transition: all 0.3s ease-in-out;
}
.btn:hover .btn__content {
    color: var(--secondary);
    border-color: var(--secondary);
    background-color: transparent;
}

.btn--obj .btn__content::after {
    content: '';
    width: 95%;
    height: 100%;
    position: absolute;
    left: 5px;
    bottom: -8px;
    background-color: var(--primary);
    z-index: -1;
    transition: all 0.3s ease-in-out;
}
.btn--obj:hover .btn__content::after {
    width: 100%;
    left: 0;
    bottom: 0;
    background-color: transparent !important;
}

.btn--trans .btn__content {
    padding: 0 !important;
    color: var(--black);
    border: none;
    background-color: transparent;
}
.btn--trans:hover .btn__content {
    color: var(--secondary);
}

.btn--trans .btn__icon svg {
    width: 100%;
    height: 100%;
}

.btn__icon {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
}

/* Button Animation */
.btn:hover .shakeAnim {
    animation: shakeAnim 1s infinite ease-in-out;
}
@keyframes shakeAnim {
    0% {
        transform: rotate(0deg);
    }
    20% {
        transform: rotate(-8deg);
    }
    40% {
        transform: rotate(8deg);
    }
    60% {
        transform: rotate(-6deg);
    }
    80% {
        transform: rotate(6deg);
    }
    100% {
        transform: rotate(0deg);
    }
}
/* ===== Button CSS End ===== */

/* ===== CSS for Random Componetns/Classes Start ===== */
.transition-common {
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.section__head__para {
    font-size: 16px;
    line-height: 1.7;
}
.pretitle-badge {
    color: #1e1e1f;
    font-size: 14px;
    letter-spacing: -0.3px;
    gap: 6px;
    padding: 7px 24px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 40px;
}
.pretitle-badge .ellipse {
    width: 8px;
    height: 8px;
}
/* ===== CSS for Random Componetns/Classes End ===== */

/* =============================== */
/* :: 5.0 Header Area CSS Start */
/* =============================== */
.header__top__bar {
    padding: 6px 0;
}
.header__wrapper {
    padding: 20px 0;
}
.logo--header,
.logo--mobileMenu {
    max-width: 266px;
}
.mobile-menu-open,
.mobile-menu-close {
    width: 32px;
    height: 32px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--secondary);
    color: var(--secondary);
    font-size: 16px;
}
.mobile-menu .offcanvas {
    background-color: rgba(2, 31, 92, 0.75);
    backdrop-filter: blur(8px);
}
.mobile-menu .offcanvas-header {
    padding: 20px;
}
.mobile-menu .offcanvas-body {
    padding: 20px;
}
.mobile-menu__nav__item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}
.mobile-menu__nav__link {
    padding: 14px 0;
    color: var(--white);
}
.mobile-menu__nav__item:has(.mobile-menu__nav__link[aria-expanded='true']) {
    background-color: rgba(255, 255, 255, 0.05);
}
.mobile-menu__nav__item:hover .mobile-menu__nav__link,
.mobile-menu__nav__link.active,
.mobile-menu__nav__link[aria-expanded='true'] {
    padding: 14px 20px;
    color: var(--secondary);
    background-color: rgba(255, 255, 255, 0.05);
}
.mobile-menu__nav__link.active {
    padding: 14px 0;
    font-weight: 700;
    background-color: transparent;
}
.collapse__item {
    border-top: 1px solid rgba(255, 255, 255, 0.25);
}
.collapse__link {
    padding: 12px 20px;
    color: var(--white);
    font-size: 15px;
}
.collapse__link:hover {
    color: var(--secondary);
    background-color: rgba(255, 255, 255, 0.05);
}
.mobile-menu__contact .title {
    font-size: 24px;
    text-decoration: underline;
    text-underline-offset: 8px;
}
.contact__item {
    gap: 10px;
    color: var(--white);
    position: relative;
}
.contact__link {
    color: var(--white);
}
.contact__link:hover {
    color: var(--secondary);
}
.contact__item .icon {
    width: 16px;
}
.social__link {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--white);
    color: var(--black);
}
.social__link:hover {
    background-color: var(--secondary);
    color: var(--white);
}
.social__link svg {
    height: 50%;
    width: auto;
}

/* ----- Header CSS For Desktop Start */
.nav--header {
    gap: 56px;
}
.nav__wrap {
    gap: 36px;
}
.nav__link {
    font-size: 16px;
    color: var(--black);
}
ul.nav__wrap li:first-child {
    display: none;
}
.nav__item:hover .nav__link,
.nav__link.active {
    color: var(--secondary);
}
.nav__link.active {
    font-weight: 700;
}
.btn--header {
    padding: 10px 22px !important;
    font-size: 16px !important;
    border-width: 2px !important;
}
.contact--header {
    gap: 24px;
}
.contact--header .contact__item::after {
    content: '';
    position: absolute;
    width: 1px;
    height: 70%;
    right: -12px;
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--white);
    opacity: 0.3;
}
.contact--header .contact__item:last-child::after {
    display: none;
}
.contact--header .contact__text {
    font-size: 13px;
}
.header .social__link {
    width: 24px;
    height: 24px;
}
/* ----- Header CSS For Desktop End */

/* =============================== */
/* :: 5.0 Header Area CSS End */
/* =============================== */

/* =============================== */
/* :: 6.0 Hero Section CSS Start */
/* =============================== */
.hero--section {
    background: url('../imgs/bgs-thumbs/hero-bg-thumb.jpg') no-repeat center /
        cover;
}
.hero--section::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url('../imgs/icons-objs/dot-patteren-obj.png') repeat,
        rgba(2, 31, 92, 0.9);
    z-index: -1;
}
.hero__wrapper {
    padding: 80px 0 48px;
    max-width: 1920px;
}
.hero__para {
    line-height: 1.75;
}
.hero__button .btn--obj .btn__content::after {
    background-color: var(--white);
}
.statistics {
    gap: 32px;
}
.statistics__item {
    gap: 6px;
}
.statistics__item::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -16px;
    width: 100%;
    height: 1px;
    background-color: var(--white);
    opacity: 0.2;
}
.statistics__item:last-child::after {
    display: none;
}
.statistics__title {
    font-size: 24px;
}

.hero__mask__thumb {
    position: absolute;
    right: -10px;
    bottom: -8px;
    width: 50%;
    height: 90.5%;
}
.mask-thumb {
    width: 100%;
    height: 100%;
    background: url('../imgs/icons-objs/mask-bg.png') center/cover no-repeat;

    mask-image: url('../imgs/icons-objs/mask-img.png');
    mask-size: cover;
    mask-repeat: no-repeat;
    mask-position: left;

    -webkit-mask-image: url('../imgs/icons-objs/mask-img.png');
    -webkit-mask-size: cover;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: left;
}
.mask-thumb__bg {
    width: calc(100% - 10px);
    height: calc(100% - 8px);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: url('../imgs/bgs-thumbs/hero-bg-thumb.jpg') center/cover
        no-repeat;

    mask-image: url('../imgs/icons-objs/mask-img.png');
    mask-size: cover;
    mask-repeat: no-repeat;
    mask-position: left;

    -webkit-mask-image: url('../imgs/icons-objs/mask-img.png');
    -webkit-mask-size: cover;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: left;
}
/* =============================== */
/* :: 6.0 Hero Section CSS End */
/* =============================== */

/* =============================== */
/* :: 7.0 Service Section CSS Start */
/* =============================== */
.service--section {
    padding: 48px 0;
}
.service--section::after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: url('../imgs/icons-objs/noice-bg-object.png') no-repeat center /
        cover;
    z-index: -1;
}

/* Common CSS for Card Start */
.card {
    height: 100%;
    border: none;
    border-radius: 0;
    background-color: var(--white);
}
.card__title {
    font-size: 20px;
    color: var(--black);
}
.card__para {
    font-size: 15px;
    line-height: 1.6;
}
.card__content {
    padding: 20px 16px;
}
.card__thumb {
    width: 100%;
    height: 200px;
}
/* Common CSS for Card End */
.card--service {
    padding: 4px;
    border: 1px solid rgba(0, 0, 0, 0.15);
}
.card--service:hover {
    background-color: var(--secondary);
}
.card--service .btn__icon {
    color: var(--secondary);
}
.card--service:hover .card__title,
.card--service:hover .card__para,
.card--service:hover .btn__content,
.card--service:hover .btn__icon {
    color: var(--white);
}
.card--service .btn--trans:hover .btn__content,
.card--service .btn--trans:hover .btn__icon {
    color: var(--black);
}
/* =============================== */
/* :: 7.0 Service Section CSS End */
/* =============================== */

/* =============================== */
/* :: 8.0 Reliable Section CSS Start */
/* =============================== */
.reliable--section {
    padding: 48px 0;
    background: #f3f3f3;
}
.reliable__wrapper {
    max-width: 1920px;
}
.reliable__thumb__item {
    width: 100%;
    height: 400px;
}
.reliable__thumb__object {
    width: 40%;
    position: absolute;
    right: -7%;
    top: -9%;
    z-index: -1;
}
/* =============================== */
/* :: 8.0 Reliable Section CSS End */
/* =============================== */

/* =============================== */
/* :: 9.0 
 Section CSS Start */
/* =============================== */
.project--section {
    padding: 48px 0;
}
.card--project {
    height: 420px;
}
.project__slider__obejct {
    position: absolute;
    right: -1px;
    bottom: 8px;
    color: var(--white);
}
.project__slider .swiper-button-next::after,
.project__slider .swiper-button-prev::after {
    display: none;
}
.project__slider .swiper-button-next,
.project__slider .swiper-button-prev {
    margin-top: 0;
    transform: translateY(-50%);
}
.project__slide__btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--white);
    background-color: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(4px);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    color: var(--white);
    transition: all .3s ease-in-out;
}
.project__slide__btn svg {
    height: 50%;
}
/* =============================== */
/* :: 9.0 Project Section CSS End */
/* =============================== */

/* =============================== */
/* :: 10.0 Contact Section CSS Start */
/* =============================== */
.contact--section {
    margin-top: 50px;
}

.contact__wrapper {
    padding: 48px 16px 16px;
}
.contact--section .section__para {
    font-size: 15px;
}
.form__input {
    padding: 16px 0;
    font-size: 15px;
    color: var(--white);
    border: none;
    border-radius: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    background-color: transparent;
    transition: all 0.3s ease-in-out;
}
.form__input--textarea {
    height: 80px;
    resize: none;
}
.form__input:focus,
.form__input:not(:placeholder-shown) {
    border-color: var(--white);
}
.form__input::placeholder {
    color: var(--white);
    font-size: 15px;
    opacity: 1;
}
.contact__thumb {
    height: 400px;
}
/* =============================== */
/* :: 10.0 Contact Section CSS End */
/* =============================== */

/* =============================== */
/* :: 11.0 Footer Area CSS Start */
/* =============================== */
.footer--area {
    background: linear-gradient(to bottom, #f5f5f5 0%, #e8e8e8 100%);
    margin-top: -76px;
}
.footer__content {
    padding: 124px 0 48px;
}
.footer__wrapper {
    gap: 40px;
}
.logo--footer {
    max-width: 200px;
}
.widget .title {
    font-size: 18px;
    font-weight: 800;
}
.footer__nav__wrap {
    gap: 10px;
}
.footer__nav__link,
.contact--footer .contact__link {
    color: var(--black);
}
.footer__nav__link:hover,
.contact--footer .contact__link:hover {
    color: var(--secondary);
}
.social--footer .social__link {
    color: var(--white);
    background-color: var(--black);
}
.social--footer .social__link:hover {
    background-color: var(--secondary);
}
.copyright-text {
    font-size: 15px;
}

/* =============================== */
/* :: 11.0 Footer Area CSS End */
/* =============================== */