@charset "utf-8";

/* ==external fonts links== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
    --white    : #ffffff;
    --off-white: #F0F0F0;
    --black    : #000000;
    --blue     : #1b75bc;
    --gray     : #979797;
    --bg-color : #161c2d;
    --gray1    : #8f9297;
}

*,
*::before,
*::after {
    margin            : 0;
    padding           : 0;
    outline           : none;
    box-sizing        : border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing   : border-box;
}

html {
    text-size-adjust        : 100%;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust   : 100%;
    scroll-behavior         : smooth;
    font-size               : 62.5%;
    font-family             : 'Inter', sans-serif;
    letter-spacing          : 0.02em;
}

body {
    position      : relative;
    overflow-x    : hidden;
    font-family   : 'Inter', sans-serif;
    font-size     : 1.6rem;
    font-weight   : normal;
    letter-spacing: 0.02em;
    color         : var(--black);
}

ul {
    list-style   : none;
    margin-bottom: 0;
    padding-left : 0;
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
    margin : 0;
    padding: 0;
}

p {
    margin : 0;
    padding: 0;
}

a,
a:hover {
    text-decoration: none;
}

a:hover,
a:focus,
a:active,
a:focus-visible {
    outline: none;
}

span {
    display: inline-block;
}

/* ==input and button type focus & outline style== */
input:focus,
input:focus-visible,
textarea:focus,
textarea:focus-visible,
select:focus-visible {
    outline           : none;
    box-shadow        : none;
    -webkit-box-shadow: none;
}

button {
    background-color: transparent;
    border          : 0;
}

.btn.focus,
.btn:focus,
button:focus,
button:focus-visible {
    outline   : 0;
    box-shadow: none;
}

.owl-nav button.owl-prev.disabled>i,
.owl-nav button.owl-next.disabled>i {
    color: var(--gray);
}

.bg-black {
    background-color: var(--bg-color);
}

/* section padding  */
.section_padding {
    padding: 15rem 0;
}

/* section heading under line */
.section_header_wrapper {
    max-width    : 1092px;
    width        : 100%;
    margin       : 0 auto;
    text-align   : center;
    margin-bottom: 4.8rem;
}

.section_header_wrapper .title {
    display       : inline-block;
    font-size     : 5rem;
    line-height   : 5.8rem;
    font-weight   : 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color         : var(--white);
    position      : relative;

    padding-bottom: 1.2rem;
    margin-bottom : 2.4rem;
}

.section_header_wrapper .title::before {
    content         : '';
    position        : absolute;
    bottom          : 0;
    left            : 50%;
    transform       : translateX(-50%);
    width           : 100px;
    height          : 3px;
    background-color: var(--blue);
}

.section_header_wrapper p {
    font-size  : 2.2rem;
    line-height: 3.2rem;
    font-weight: 300;
    color      : var(--white);
    position   : relative;
}


/* --navbar-- */
.navbar {
    position  : fixed;
    width     : 100%;
    top       : 0;
    left      : 0;
    transition: all .5s ease-in-out;
    z-index   : 1070;
}

.navbar .navbar-brand {
    flex      : 0 0 30rem;
    padding   : 0;
    transition: flex .5s ease-in-out;
}

.navbar.bg-black .navbar-brand {
    flex   : 0 0 25rem;
    padding: 0;
}

.navbar .navbar-brand img {
    width: 100%;
}

.navbar-nav .nav-item:not(:last-of-type) {
    margin-right: 3.2rem;
}

.navbar-nav .nav-item .nav-link {
    font-size     : 2rem;
    line-height   : 2.8rem;
    text-transform: capitalize;
    color         : var(--white);
    position      : relative;

    padding   : 0;
    transition: color .3s ease-in-out;
}

.navbar-nav .nav-item .nav-link::before {
    content         : '';
    position        : absolute;
    bottom          : -4px;
    left            : 0;
    width           : 0;
    height          : 2px;
    background-color: var(--blue);
    transition      : width .3s ease-in-out;
}

.navbar-nav .nav-item .nav-link.active::before,
.navbar-nav .nav-item .nav-link:hover::before {
    width: 100%;
}

.navbar-nav .nav-item .nav-link:focus,
.navbar-nav .nav-item .nav-link:hover,
.navbar-nav .nav-item .nav-link.active {
    color: var(--gray);
}

.navbar-expand-lg .navbar-collapse {
    justify-content: flex-end;
}

/* ==hero sectoin== */
.hero_section {
    width   : 100%;
    height  : 80vh;
    overflow: hidden;
    position: relative;
}

.hero_section video {
    width          : 100%;
    height         : 100%;
    object-fit     : cover;
    object-position: bottom;
}

.video_overlay {
    position        : absolute;
    top             : 0;
    left            : 0;
    width           : 100%;
    height          : 100%;
    background-color: rgba(0, 0, 0, .7);
}

.hero_section .content_wrapper {
    position  : absolute;
    top       : 60%;
    left      : 50%;
    transform : translate(-50%, -60%);
    text-align: center;
    max-width : 75rem;
}

.hero_section h1 {
    font-weight   : 700;
    font-size     : 5rem;
    line-height   : 5.8rem;
    color         : var(--white);
    text-transform: uppercase;
    margin-bottom : 2.4rem;
    letter-spacing: 0.03em;
}

.hero_section h1 span {
    color: var(--blue);
}

.hero_section p {
    font-size  : 2.2rem;
    line-height: 2.8rem;
    font-weight: 300;
    color      : var(--white);
}


/* about us section */
.about_us {
    background-color: var(--bg-color);
}

.mivi_content {
    height             : 100%;
    background-image   : url(../images/bg-about.png);
    background-repeat  : no-repeat;
    background-size    : cover;
    background-position: center;
    border-radius      : 1.6rem;
    text-align         : center;
    overflow           : hidden;
    position           : relative;
    padding            : 4rem 2.4rem;
    min-height         : 45rem;
}

.mivi_content::before {
    content         : '';
    position        : absolute;
    top             : 0;
    left            : 0;
    width           : 100%;
    height          : 100%;
    background-color: rgba(27, 117, 188, .8);
    background-color: rgba(0, 0, 0, .75);
}

.mivi_content .icon {
    position       : relative;
    width          : 7.5rem;
    height         : 7.5rem;
    margin         : 0 auto;
    border-radius  : 50%;
    border         : 4px solid var(--gray);
    background     : var(--blue);
    font-size      : 3.6rem;
    color          : var(--white);
    display        : flex;
    align-items    : center;
    justify-content: center;
    transition     : all 0.3s ease-in-out;
}

.mivi_content h2 {
    font-size     : 2.4rem;
    line-height   : 3.2rem;
    color         : var(--white);
    font-weight   : 600;
    text-transform: uppercase;
    position      : relative;
    margin-top    : 1.6rem;
    margin-bottom : 2.4rem;
}

.mivi_content p {
    font-size  : 2.2rem;
    line-height: 3.2rem;
    font-weight: 300;
    color      : var(--white);
    position   : relative;
}

/* service section */
.service_section {
    background-image     : url(../images/service-bg.jpg);
    background-repeat    : no-repeat;
    background-size      : cover;
    background-position  : center;
    background-attachment: fixed;

    position: relative;
}

.service_section::before {
    content         : '';
    position        : absolute;
    top             : 0;
    left            : 0;
    width           : 100%;
    height          : 100%;
    background-color: rgba(22, 28, 45, .8);
}

.service_section .row {
    margin-top: -16px;
}

.service_section .row>* {
    padding-top: 16px;
}

.service_section .content_wrapper {
    /* height          : 100%; */
    color           : var(--white);
    background-color: var(--bg-color);
    border          : 2px solid var(--gray);
    border-radius   : 12px;
    overflow        : hidden;
    position        : relative;
    padding         : 3.2rem 3.2rem 6.2rem;
}

.service_section .icon_wrapper img {
    width     : 82px;
    height    : 82px;
    transition: all 1s ease;
}

.service_section .content_wrapper:hover .icon_wrapper img {
    -webkit-transform: rotateY(360deg);
    transform        : rotateY(360deg);
}

.service_section .content_wrapper h2 {
    font-weight  : 700;
    font-size    : 2.4rem;
    line-height  : 3.2rem;
    color        : inherit;
    margin-top   : .8rem;
    margin-bottom: 1.2rem;
}

.service_section .content_wrapper p {
    font-weight: 300;
    font-size  : 1.8rem;
    line-height: 2.6rem;
    color      : inherit;
}

.service_section .content_wrapper button {
    font-size       : 1.6rem;
    line-height     : 2.4rem;
    font-weight     : 500;
    text-transform  : capitalize;
    color           : var(--white);
    background-color: var(--blue);
    border          : 2px solid var(--blue);
    position        : absolute;
    bottom          : -2px;
    right           : -2px;
    padding         : .8rem;
    border-radius   : 1.6rem 0 0 0;
    transition      : all .5s ease-in-out;
}

.service_section .content_wrapper:hover button {
    background-color: var(--bg-color);
    border          : 2px solid var(--blue);
}


/* our clients section */
.clients_section {
    background-color: var(--bg-color);
}

.slider-two.slide-rtl {
    padding: 6.4rem 0;
}

.clients-logo {
    margin: 0 8px;
}

.clients-logo a img {
    /* filter: grayscale(1); */
    width: 100%;
}

.clients-logo a:hover img {
    /* filter: grayscale(0); */
    filter: grayscale(1);
}

/* blog section start */
.blog_section {
    background-image     : url(../images/bg-2.jpg);
    background-repeat    : no-repeat;
    background-size      : cover;
    background-position  : center;
    background-attachment: fixed;

    position: relative;
}

.blog_section::before {
    content         : '';
    position        : absolute;
    top             : 0;
    left            : 0;
    width           : 100%;
    height          : 100%;
    background-color: rgba(22, 28, 45, .8);
}

.blog_section .container {
    background-color: var(--bg-color);
    border-radius   : 1.6rem;
    padding         : 3.2rem 2.4rem;
}

.blog-inner .info-box-wrapper {
    padding-bottom: 2.4rem;
}

.blog-inner .info-box-wrapper .info-thumb {
    overflow: hidden;
}

.blog-inner .info-box-wrapper .info-thumb a img {
    transition                 : transform 1s ease-out, opacity .35s;
    -webkit-backface-visibility: hidden;
    backface-visibility        : hidden;
}

.blog-inner .info-box-wrapper .info-thumb:hover>a img {
    transform : scale(1.2);
    transition: transform 2s ease-out;
}

.blog-inner .info-box-wrapper .info-meta {
    position: absolute;
    top     : 1.6rem;
    right   : 1.6rem;
}

.blog-inner .info-box-wrapper .info-meta a {
    display         : flex;
    flex-flow       : column;
    align-items     : center;
    color           : #111;
    background-color: #fff;
    padding         : .4rem .4rem;
    text-decoration : none;
}

.blog-inner .info-box-wrapper .info-meta a .meta-month,
.blog-inner .info-box-wrapper .info-meta a .meta-date {
    position     : relative;
    padding      : .2rem 0;
    margin-bottom: .2rem;
}

.blog-inner .info-box-wrapper .info-meta a .meta-month:after,
.blog-inner .info-box-wrapper .info-meta a .meta-date:after {
    content         : '';
    position        : absolute;
    width           : 12px;
    height          : 2px;
    left            : 50%;
    bottom          : -2px;
    background-color: var(--blue);
    transform       : translateX(-50%);
}

.blog-inner .info-box-wrapper .subtitle {
    font-weight   : 400;
    font-size     : 2.2rem;
    line-height   : 2.8rem;
    color         : var(--white);
    padding-top   : 1.6rem;
    padding-bottom: 2.4rem;
}

.blog-inner .info-box-wrapper .text {
    font-weight  : 300;
    font-size    : 1.8rem;
    line-height  : 2.4rem;
    color        : var(--white);
    margin-bottom: 2.6rem;

    min-height: 9rem;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}

.blog-inner .info-box-wrapper .info-btn .btn {
    font-size       : 1.8rem;
    line-height     : 2.6rem;
    color           : #fff;
    background-color: var(--blue);
    padding         : .4rem 1.5rem;
    border          : 0;
}



/* blog slide >> nav design start */
.blog-slide .owl-nav {
    position: absolute;
    left    : 0;
    bottom  : -32px;
}

.blog-slide .owl-nav button.owl-next,
.blog-slide .owl-nav button.owl-prev {
    width        : 2.8rem;
    height       : 2.8rem;
    line-height  : 2.5rem;
    border       : 2px solid var(--blue);
    border-radius: 50%;
    margin-right : .8rem;
}

.blog-slide .owl-nav button>i {
    color: var(--white);
}

/* blog slide >> dots design start */
.blog-slide .owl-dots {
    position: absolute;
    left    : 50%;
    bottom  : -26px;
}

.blog-slide .owl-dots button:focus {
    outline: none;
}

.blog-slide .owl-dots .owl-dot {
    width           : 1.2rem;
    height          : 1.2rem;
    background-color: var(--gray);
    border-radius   : 50%;
    margin-right    : .5rem;
    transition      : all .3s ease-in-out;
}

.blog-slide .owl-dots .owl-dot.active {
    background-color: var(--blue);
}

.all-blog-btn-area .btn {
    font-size  : 1.8rem;
    line-height: 2.6rem;
    color      : var(--white);
    border     : 2px solid var(--blue);
    padding    : .4rem 1.2rem;
    position   : relative;
}


/* map section */
.map_section {
    background-color: var(--bg-color);
}

.map_wrapper {
    width     : 100%;
    min-height: 550px;
}

.map_wrapper iframe {
    width : 100%;
    height: 550px;
}

/* footer start */
.footer {
    background-color: var(--bg-color);
    border-top      : 1px solid #6b6565;
    padding         : 16px 0;
}

.footer_content {
    display        : flex;
    align-items    : center;
    justify-content: space-between;
}

.footer_logo img {
    width: 15rem;
}

.contact_info_wrapper ul,
.contact_info_wrapper li {
    display    : flex;
    align-items: center;
}

.contact_info_wrapper li:not(:last-child) {
    margin-right: 41px;
}

.contact_info_wrapper img {
    max-width   : 13px;
    height      : auto;
    margin-right: 11px;
}

.contact_info_wrapper p {
    font-size  : 16px;
    line-height: 24px;
    color      : #949494;
}

.social_Icons_wrapper {
    display    : flex;
    align-items: center;
}

.social_Icons_wrapper a {
    display      : inline-block;
    max-width    : 42px;
    max-height   : 42px;
    border-radius: 50%;
    overflow     : hidden;
}

.social_Icons_wrapper a:not(:last-child) {
    margin-right: 16px;
}

.social_Icons_wrapper a img {
    width: 100%;
}

/* single blog page design start */
#singleBlog .navbar {
    background-color: var(--bg-color);
}
.single_blog {
    min-height: calc(100vh - 7rem);
    background-color: var(--bg-color);
    padding: 15rem 0 8rem;
}

.single_blog h1 {
    font-weight            : 700;
    font-size              : 3rem;
    line-height            : 4rem;
    color: var(--white);
    margin-bottom: 3.2rem;
}

.single_blog p {
    font-size              : 2.2rem;
    line-height            : 3.2rem;
    color: var(--white);
}

.single_content img {
    float: right;
    margin-left: 6rem;
    max-width: 72rem;
    width: 100%
}



/* breakpoints */
@media (min-width: 577px) {
    .hero_section br {
        display: none;
    }
}

@media (min-width: 1200px) {
    .container {
        max-width: 1180px;
    }
}

@media (min-width: 1600px) {
    .container {
        max-width: 1520px;
    }

    .col-xxxl-1 {
        flex : 0 0 auto;
        width: 8.33333333%;
    }

    .col-xxxl-2 {
        flex : 0 0 auto;
        width: 16.66666667%;
    }

    .col-xxxl-3 {
        flex : 0 0 auto;
        width: 25%;
    }

    .col-xxxl-4 {
        flex : 0 0 auto;
        width: 33.33333333%;
    }

    .col-xxxl-5 {
        flex : 0 0 auto;
        width: 41.66666667%;
    }

    .col-xxxl-6 {
        flex : 0 0 auto;
        width: 50%;
    }

    .col-xxxl-7 {
        flex : 0 0 auto;
        width: 58.33333333%;
    }

    .col-xxxl-8 {
        flex : 0 0 auto;
        width: 66.66666667%;
    }

    .col-xxxl-9 {
        flex : 0 0 auto;
        width: 75%;
    }

    .col-xxxl-10 {
        flex : 0 0 auto;
        width: 83.33333333%;
    }

    .col-xxxl-11 {
        flex : 0 0 auto;
        width: 91.66666667%;
    }

    .col-xxxl-12 {
        flex : 0 0 auto;
        width: 100%;
    }
}

@media (min-width: 1800px) {
    .container {
        max-width: 1620px;
    }
}