@import url('https://fonts.googleapis.com/css2?family=Barlow: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=REM: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');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.4/font/bootstrap-icons.css");
@import url("bootstrap.min.css");
@import url("aos.css");
/* @import url("animate.min.css"); */
@import url("nivo-slider.css");
@import url("lightcase.css");
@import url("animate.min.css");
@import url("stellarnav.css");
@import url("slick.css");

:root {
    --font-family-Barlow: 'Barlow', sans-serif;
    --font-family-REM: 'REM', sans-serif;
    --font-60: calc(30px + (60 - 30) * (100vw - 320px) / (1920 - 320));
    --font-40: calc(20px + (40 - 22) * (100vw - 320px) / (1920 - 320));
    --font-30: calc(20px + (30 - 20) * (100vw - 320px) / (1920 - 320));
    --font-25: calc(18px + (25 - 18) * (100vw - 320px) / (1920 - 320));
    --font-22: calc(17px + (22 - 17) * (100vw - 320px) / (1920 - 320));
    --font-20: calc(16px + (20 - 16) * (100vw - 320px) / (1920 - 320));
    --font-18: calc(15px + (18 - 15) * (100vw - 320px) / (1920 - 320));
    --font-16: calc(15px + (16 - 15) * (100vw - 320px) / (1920 - 320));
    --font-15: calc(14px + (15 - 14) * (100vw - 320px) / (1920 - 320));
    --font-14: calc(13px + (14 - 13) * (100vw - 320px) / (1920 - 320));
    --color-1: #04213F;
    --color-2: #EF0548;
    --color-3: #F2EBFF;
    --color-4: #04151F;
    --color-5: #7885a8;
}

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    font-family: var(--font-family-Barlow);
}

audio,
canvas,
embed,
iframe,
img,
object,
svg,
video {
    display: block;
    max-width: 100%;
    width: 100%;
}

summary {
    display: list-item;
}

body,
html {
    height: 100%;
    scroll-behavior: smooth;
}

html {
    font-size: 100%;
}

body {
    line-height: 1.4;
}

p {
    font-family: var(--font-family-Barlow);
    color: var(--bs-dark);
    font-size: var(--font-15);
    line-height: 1.7;
    margin-bottom: 1rem;
    font-weight: 500;
}

p:empty {
    display: none !important;
}

a,
a:hover,
a:focus {
    text-decoration: none;
    outline: none !important;
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-family-REM);
    color: var(--bs-dark);
}

h1,
.h1 {
    font-size: var(--font-60);
}

h2,
.h2 {
    font-size: var(--font-40);
}

h3,
.h3 {
    font-size: var(--font-30);
}

h4,
.h4 {
    font-size: var(--font-20);
}

h5,
.h5 {
    font-size: var(--font-18);
}

h6,
.h6 {
    font-size: var(--font-16);
}

@-webkit-keyframes rotation {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}

@keyframes rotation {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}

.sec_padding {
    padding-top: calc(30px + (80 - 30) * (100vw - 320px) / (1920 - 320));
    padding-bottom: calc(30px + (80 - 30) * (100vw - 320px) / (1920 - 320));
}

.sub_title {
    display: inline-block;
    color: var(--bs-dark);
    font-weight: 600;
    padding-left: 35px;
    text-transform: uppercase;
    background: url(../images/home/line.svg);
    background-repeat: no-repeat;
    background-position: left center;
}

.main_title {
    position: relative;
    color: var(--bs-dark);
    font-weight: 700;
    text-transform: uppercase;
    font-size: calc(22px + (40 - 22) * ((100vw - 320px) / (1920 - 320)));
    margin: 0;
    z-index: 1;
}

.main_title span {
    font-family: var(--font-family-REM);
    color: var(--color-2)
}

.btn_thm_1 {
    position: relative;
    display: inline-block;
    background-color: var(--color-1);
    border-radius: 0;
    text-transform: uppercase;
    color: var(--bs-white);
    font-size: calc(14px + (16 - 14) * ((100vw - 320px) / (1920 - 320)));
    font-weight: 500;
    padding: calc(10px + (13 - 10) * ((100vw - 320px) / (1920 - 320)));
    padding-left: calc(20px + (30 - 20) * ((100vw - 320px) / (1920 - 320)));
    padding-right: calc(55px + (55 - 55) * ((100vw - 320px) / (1920 - 320)));
    transition: all .5s ease;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
}

.btn_thm_1::before,
.btn_thm_1::after {
    content: '\F285';
    font-family: bootstrap-icons !important;
    position: absolute;
    right: 25px;
    font-weight: 800;
    color: #a7a7a7;
    transition: all .5s ease;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
}

.btn_thm_1::after {
    right: 18px;
    color: var(--color-2);
}

.btn_thm_1:is(:hover, :focus) {
    color: var(--bs-white);
    background-color: var(--color-2);
}

.btn_thm_1:hover::before,
.btn_thm_1:hover::after {
    color: var(--bs-white);
}

.btn_thm_1:hover::before {
    right: 18px;
}

.btn_thm_2 {
    position: relative;
    display: inline-block;
    background-color: var(--color-2);
    border-radius: 0;
    text-transform: uppercase;
    color: var(--bs-white);
    font-size: calc(14px + (16 - 14) * ((100vw - 320px) / (1920 - 320)));
    font-weight: 500;
    padding: calc(10px + (13 - 10) * ((100vw - 320px) / (1920 - 320)));
    padding-left: calc(20px + (30 - 20) * ((100vw - 320px) / (1920 - 320)));
    padding-right: calc(55px + (55 - 55) * ((100vw - 320px) / (1920 - 320)));
    transition: all .5s ease;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
}

.btn_thm_2::before,
.btn_thm_2::after {
    content: '\F285';
    font-family: bootstrap-icons !important;
    position: absolute;
    right: 25px;
    font-weight: 800;
    color: #e6e6e6;
    transition: all .5s ease;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
}

.btn_thm_2::after {
    right: 18px;
    color: var(--color-1);
}

.btn_thm_2:is(:hover, :focus) {
    color: var(--bs-white);
    background-color: var(--color-1);
}

.btn_thm_2:hover::before,
.btn_thm_2:hover::after {
    color: var(--bs-white);
}

.btn_thm_2:hover::before {
    right: 18px;
}

/* ---Main Header Start--- */

.main_header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    transition: all .5s ease;
    z-index: 111;
    background-color: rgb(255, 255, 255);
}

.main_header>.container-fluid {
    padding-left: 20px;
    padding-right: 20px;
}

.main_header.sticky {
    top: 0px;
    position: fixed;
    background-color: rgb(255 255 255 / 92%);
    box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 22%);
    -webkit-animation: fadeInDown 1s;
    animation: fadeInDown 1s;
}

.main_header .header_fixed {
    display: flex;
    flex-wrap: inherit;
    align-items: center;
    justify-content: space-between;
    transition: all .5s ease;
    position: relative;
}

.header_fixed .navbar-brand {
    position: relative;
    margin: 0;
    width: 200px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    transition: all .5s ease;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
}

.header_fixed .navbar-brand>img {
    transition: all .5s ease;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
}

.main_menu {
    -webkit-box-flex: inherit;
    -ms-flex-positive: inherit;
    flex-grow: inherit;
    display: flex;
    flex-wrap: inherit;
    align-items: center;
    justify-content: space-between;
    transition: all .5s ease;
    width: 100%;
    margin-left: 30px;
}

.contactBtn_top {
    position: relative;
    margin-left: calc(15px + (30 - 15) * ((100vw - 320px) / (1920 - 320)));
    -webkit-box-flex: inherit;
    -ms-flex-positive: inherit;
    flex-grow: inherit;
}

.contactBtn_top>a {
    position: relative;
    display: block;
    font-weight: 600;
    color: var(--bs-dark);
    font-size: var(--font-18);
    padding-left: calc(40px + (60 - 40) * ((100vw - 320px) / (1920 - 320)));
}

.contactBtn_top>a span {
    display: block;
    font-weight: 400;
    font-size: var(--font-14);
}

.contactBtn_top>a>img {
    position: absolute;
    left: 0;
    top: calc(5px + (0 - 5) * ((100vw - 320px) / (1920 - 320)));
    display: inline-block;
    font-size: var(--font-18);
    font-weight: 600;
    color: var(--bs-white);
    text-align: center;
    border-radius: 100%;
    width: calc(30px + (45 - 30) * ((100vw - 320px) / (1920 - 320)));
    height: calc(30px + (45 - 30) * ((100vw - 320px) / (1920 - 320)));
    line-height: calc(30px + (45 - 30) * ((100vw - 320px) / (1920 - 320)));
}

.contactBtn_top>.btn_theme::before {
    color: var(--bs-white);
    background-color: var(--color-1);
}

/* ---Main Slider Area--- */
.main_slider_area {
    position: relative;
    overflow: hidden;
}

.slider_shape1 {
    position: absolute;
    right: 23%;
    top: -70%;
    bottom: -5%;
    left: 65%;
    z-index: 11;
    transform: skewX(-33deg);
    -webkit-transform: skewX(-33deg);
    -moz-transform: skewX(-33deg);
    -ms-transform: skewX(-33deg);
    -o-transform: skewX(-33deg);
    background: rgb(218 36 28 / 28%);
    animation: fadeIn 500ms;
    -webkit-animation: fadeIn 500ms;
}

.slider_shape2 {
    background: rgb(31 33 35 / 29%);
    position: absolute;
    right: 19%;
    top: -70%;
    bottom: -5%;
    left: 77%;
    z-index: 11;
    transform: skewX(-33deg);
    -webkit-transform: skewX(-33deg);
    -moz-transform: skewX(-33deg);
    -ms-transform: skewX(-33deg);
    -o-transform: skewX(-33deg);
    animation: fadeIn 700ms;
    -webkit-animation: fadeIn 700ms;
}

.slider_shape3 {
    background: rgb(255 255 255 / 17%);
    position: absolute;
    right: 6%;
    top: -47%;
    bottom: -5%;
    left: 81%;
    z-index: 11;
    transform: skewX(-33deg);
    -webkit-transform: skewX(-33deg);
    -moz-transform: skewX(-33deg);
    -ms-transform: skewX(-33deg);
    -o-transform: skewX(-33deg);
    animation: fadeIn 900ms;
    -webkit-animation: fadeIn 900ms;
}

.slider_shape4 {
    background: rgb(0 19 95 / 30%);
    position: absolute;
    right: -19%;
    top: -60%;
    bottom: -95%;
    left: 87%;
    z-index: 11;
    transform: skewX(-33deg);
    -webkit-transform: skewX(-33deg);
    -moz-transform: skewX(-33deg);
    -ms-transform: skewX(-33deg);
    -o-transform: skewX(-33deg);
    animation: fadeIn 1100ms;
    -webkit-animation: fadeIn 1100ms;
}

.main_slider .nivo-controlNav .nivo-control {
    font-size: 0;
    height: 10px;
    width: 10px;
    font-weight: 600;
    background-color: #767676;
    display: block;
    border-radius: 50%;
    margin-bottom: 20px;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    position: relative;
}

.main_slider .nivo-controlNav .nivo-control:after {
    content: "";
    height: 26px;
    width: 26px;
    background-color: var(--white-color);
    position: absolute;
    top: -8px;
    left: -8px;
    border-radius: 50%;
    z-index: -1;
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s ease-in-out;
}

.main_slider .nivo-controlNav .nivo-control:last-child {
    margin-bottom: 0;
}

.main_slider .nivo-controlNav .nivo-control.active {
    background-color: #812425;
}

.main_slider .nivo-controlNav .nivo-control.active:after {
    visibility: visible;
    opacity: 1;
}

.sliderCaptionWrap {
    position: relative;
    padding-right: 20px;
    z-index: 11;
}

.slider-content {
    position: relative;
    z-index: 999999;
}

.slider-content .caption_title {
    display: block;
    font-family: var(--font-family-Barlow);
    line-height: calc(30px + 22 * ((100vw - 320px) / 1600));
    font-size: calc(18px + 22 * ((100vw - 320px) / 1600));
    font-weight: 500;
    margin-bottom: calc(8px + 12 * ((100vw - 320px) / 1600));
    color: var(--bs-white);
    animation: 500ms ease-out 0s 1 normal none running slideInUp;
}

.slider-content .caption_title>span {
    font-weight: 700;
    font-family: var(--font-family-REM);
    color: var(--color-2);
}

.slider-content .sub_caption {
    font-size: calc(15px + (18 - 15) * ((100vw - 320px) / (1920 - 320)));
    font-weight: 500;
    margin-bottom: calc(8px + (20 - 8) * ((100vw - 320px) / (1920 - 320)));
    color: var(--bs-white);
    -webkit-animation: fadeInUp 500ms ease-out;
    animation: fadeInUp 500ms ease-out;
}

.slider-content .btn.btn_theme {
    color: var(--bs-white);
    background: var(--color-2);
    animation: bounceInLeft 500ms ease-out;
    -webkit-animation: bounceInLeft 500ms ease-out;
}

.slider-content .btn.btn_theme:is(:hover, :focus) {
    color: var(--bs-dark);
}

.slider-content .btn.btn_theme::before {
    color: var(--bs-dark);
    background: var(--color-1);
}

.slide-2 .caption_title {
    -webkit-animation: fadeInLeft 500ms ease-out;
    animation: fadeInLeft 500ms ease-out;
}

.slide-2 .sub_caption {
    -webkit-animation: fadeInLeft 500ms ease-out;
    animation: fadeInLeft 500ms ease-out;
}

.slider-layout1 .nivo-caption {
    top: -45px;
}

/* --About Us Area Start-- */

.about_sec {
    position: relative;
    overflow: hidden;
    background: url(../images/bg/bg_1.png);
    background-position: bottom left;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 1;
}

.about_right p {
    text-align: justify;
}

.mission_title>img {
    width: 32px;
    display: inline-block;
}

.mission_title>h5 {
    display: inline-block;
    margin-left: 15px;
    color: var(--color-1);
    margin-bottom: 0;
}

.welcome-one__call {
    display: flex;
    align-items: center;
    padding-top: var(--font-15);
    padding-bottom: var(--font-15);
}

.welcome-one__call-icon {
    height: calc(40px + (68 - 40) * (100vw - 320px) / (1920 - 320));
    width: calc(40px + (68 - 40) * (100vw - 320px) / (1920 - 320));
    background-color: #ebf1ff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-30);
    color: var(--color-1);
    transition: all 500ms ease;
}

.welcome-one__call-icon:hover {
    background-color: var(--color-2);
    color: var(--bs-white);
}

.welcome-one__call-text {
    margin-left: calc(10px + (30 - 10) * (100vw - 320px) / (1920 - 320));
}

.welcome-one__call-text p {
    font-size: var(--font-20);
    margin: 0;
    font-weight: 500;
    color: #656565;
}

.welcome-one__call-text a {
    font-size: var(--font-18);
    color: var(--bs-dark);
    font-weight: 500;
    transition: all 500ms ease;
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
}

.about_left {
    position: relative;
    padding-right: calc(15px + (80 - 15) * (100vw - 320px) / (1920 - 320));
    padding-bottom: calc(15px + (80 - 15) * (100vw - 320px) / (1920 - 320));
}

.about_left::before {
    content: '';
    position: absolute;
    width: 150px;
    height: 150px;
    top: -50px;
    left: -50px;
    background: url(../images/home/shape-1.png);
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: -1;
    filter: brightness(0) invert(.7);
    -webkit-filter: brightness(0) invert(.7);
    -webkit-animation: rotating 8s linear infinite;
    -moz-animation: rotating 8s linear infinite;
    -ms-animation: rotating 8s linear infinite;
    -o-animation: rotating 8s linear infinite;
    animation: rotating 8s linear infinite;
}

@-webkit-keyframes rotating

/* Safari and Chrome */
    {
    from {
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes rotating {
    from {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    to {
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.aboutfigure2 {
    background-color: var(--bs-dark);
    border-top: 20px solid var(--bs-white);
    border-left: 20px solid var(--bs-white);
    position: absolute;
    width: 50%;
    height: 50%;
    bottom: 0;
    right: 0;
}

/* ---Services Style--- */

.services_sec {
    position: relative;
    background: url(../images/bg/bg_2.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

.services_sec .sec_title {
    position: relative;
    background-position: center top;
}

.service_wraper {
    position: relative;
    padding: 20px;
    height: 100%;
    background: -o-linear-gradient(2deg, rgb(255 255 255), rgb(255 255 255 / 80%)), url(../images/bg/f-shape1.png);
    background: linear-gradient(88deg, rgb(255 255 255), rgb(255 255 255 / 80%)), url(../images/bg/f-shape1.png);
    background-size: cover;
    background-position: right;
    -webkit-box-shadow: 0px 10px 20px rgba(4, 33, 63, 0.05);
    box-shadow: 0px 10px 20px rgba(4, 33, 63, 0.05);
    z-index: 1;
}

.service_wraper::before {
    content: "";
    position: absolute;
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    top: calc(2px/-1);
    left: calc(2px/-1);
    background: linear-gradient(to right, var(--color-2) 0%, var(--color-2) 100%), linear-gradient(to top, var(--color-2) 50%, transparent 50%), linear-gradient(to top, var(--color-2) 50%, transparent 50%), linear-gradient(to right, var(--color-2) 0%, var(--color-2) 100%), linear-gradient(to left, var(--color-2) 0%, var(--color-2) 100%);
    background-size: 100% 2px, 2px 200%, 2px 200%, 0% 2px, 0% 2px;
    background-position: 50% 100%, 0% 0%, 100% 0%, 100% 0%, 0% 0%;
    background-repeat: no-repeat, no-repeat;
    transition: transform 0.3s ease-in-out, background-position 0.3s ease-in-out, background-size 0.3s ease-in-out;
    transform: scaleX(0) rotate(0deg);
    transition-delay: 0.6s, 0.3s, 0s;
    -webkit-transition: transform 0.3s ease-in-out, background-position 0.3s ease-in-out, background-size 0.3s ease-in-out;
    -moz-transition: transform 0.3s ease-in-out, background-position 0.3s ease-in-out, background-size 0.3s ease-in-out;
    -ms-transition: transform 0.3s ease-in-out, background-position 0.3s ease-in-out, background-size 0.3s ease-in-out;
    -o-transition: transform 0.3s ease-in-out, background-position 0.3s ease-in-out, background-size 0.3s ease-in-out;
    z-index: -1;
}

.service_wraper:hover:before {
    background-size: 200% 2px, 2px 400%, 2px 400%, 55% 2px, 55% 2px;
    background-position: 50% 100%, 0% 100%, 100% 100%, 100% 0%, 0% 0%;
    transform: scaleX(1) rotate(0deg);
    transition-delay: 0s, 0.3s, 0.6s;
}

.service_icon {
    position: relative;
    width: calc(43px + (60 - 43) * (100vw - 320px) / (1920 - 320));
    height: calc(43px + (60 - 43) * (100vw - 320px) / (1920 - 320));
    margin-bottom: 20px;
    z-index: 1;
}

.service_icon::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 15px;
    left: 20px;
    border-radius: 5px;
    background-color: rgb(238 238 238 / 63%);
    z-index: -1;
    transition: all .5s ease-in;
    -webkit-transition: all .5s ease-in;
    -moz-transition: all .5s ease-in;
    -ms-transition: all .5s ease-in;
    -o-transition: all .5s ease-in;
}

.service_wraper:hover .service_icon::before {
    top: 0px;
    left: 0px;
    background-color: var(--color-2);
}

.service_icon>img {
    transition: all .5s ease-in;
    -webkit-transition: all .5s ease-in;
    -moz-transition: all .5s ease-in;
    -ms-transition: all .5s ease-in;
    -o-transition: all .5s ease-in;
}

.service_wraper:hover .service_icon>img {
    transform: scale(.8);
    filter: brightness(0) invert(1);
    -webkit-filter: brightness(0) invert(1);
    -webkit-transform: scale(.8);
    -moz-transform: scale(.8);
    -ms-transform: scale(.8);
    -o-transform: scale(.8);
}

.service_caption>h5 {
    color: var(--color-1);
    font-weight: 600;
}

.service_caption>a {
    font-weight: 600;
    font-size: var(--font-16);
    color: var(--color-2);
}

.approach_figure {
    -webkit-box-shadow: 0px 10px 20px rgb(4 33 63 / 17%);
        box-shadow: 0px 10px 20px rgb(4 33 63 / 17%);
}

.approach_figure, .approach_figure>img{
    height: 100%;
}

/* ---Work Area Style--- */

.work_sec {
    position: relative;
    z-index: 1;
}

.work_sec::before {
    position: absolute;
    left: -8%;
    bottom: 0;
    content: '';
    width: 40%;
    height: 100%;
    background: url(../images/bg/f-shape2.png);
    background-repeat: no-repeat;
    background-position: bottom left;
    opacity: .2;
    z-index: -1;
}

.work_sec .sec_title {
    position: sticky;
    top: calc(0px + (100 - 0) * (100vw - 320px) / (1920 - 320));
    margin-left: auto;
    display: inline-block;
    padding-left: 0;
    padding-right: calc(0px + (30 - 0) * (100vw - 320px) / (1920 - 320));
    height: 30%;
}

.work_sec .sec_title::before {
    position: absolute;
    left: 0;
    top: 0;
    content: '';
    width: 100%;
    height: 100%;
    background: url(../images/home/settings_10061123.png);
    background-repeat: no-repeat;
    background-position: -70% 23%;
    opacity: .1;
    z-index: -1;
}

.work_area {
    background: url(../images/bg/bg_3.png);
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    position: relative;
}

.work_wraper {
    border-left: 1px dashed #eee;
    background-color: rgb(255 255 255 / 7%);
    backdrop-filter: blur(5px);
    padding: calc(15px + (25 - 15) * (100vw - 320px) / (1920 - 320)) 0;
    padding-right: calc(15px + (50 - 15) * (100vw - 320px) / (1920 - 320));
}

.work_wraper:nth-child(1) {
    padding-top: 50px;
}

.work_wraper:nth-child(2) {
    margin: 1px 0;
}

.work_title {
    position: relative;
    padding-left: calc(15px + (50 - 15) * (100vw - 320px) / (1920 - 320));
    padding-top: calc(15px + (10 - 15) * (100vw - 320px) / (1920 - 320));
    display: block;
    margin-bottom: 30px;
}

.work_title>img {
    top: 0;
    width: 60px;
    height: 60px;
    position: absolute;
    left: -35px;
    padding: calc(5px + (10 - 5) * (100vw - 320px) / (1920 - 320));
    border-radius: 4px;
    background-color: var(--color-2);
    box-shadow: 0px 0px 0px 7px rgb(255 255 255 / 30%);
}

.work_title>h3 {
    font-weight: 600;
    text-transform: uppercase;
    color: var(--bs-white);
}

.work_word {
    padding-left: calc(15px + (50 - 15) * (100vw - 320px) / (1920 - 320));
}

.work_word>h4 {
    display: block;
    color: #ffffff;
    font-weight: 400;
    font-family: var(--font-family-Barlow);
}

.work_word>p {
    text-align: justify;
    color: #c7d7e8;
}

.work_word>ul {
    padding: 0;
    margin: 0;
}

.work_word>ul>li {
    margin-bottom: 10px;
    color: var(--bs-white);
    font-size: var(--font-15);
    line-height: 1.7;
    list-style-type: none;
    margin-bottom: 1rem;
    font-weight: 500;
    padding-left: 35px;
    background: url(../images/home/line.svg) left center no-repeat;
}

/* ---Our Client Style--- */

.client_sec {
    position: relative;
    background: url(../images/bg/bg_2.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

.slick-slider {
    margin: 0 -15px;
    padding-bottom: calc(20px + (50 - 20) * (100vw - 320px) / (1920 - 320));
}

.slick-slide {
    margin-right: 15px;
    margin-left: 15px;
}

.client_carousel.slick-slider {
    padding-bottom: calc(0px + (50 - 0) * (100vw - 320px) / (1920 - 320));
}

.client_item {
    position: relative;
    border: 1px solid #eee;
    background-color: #fff;
}

.client_item>img {
    height: calc(80px + (150 - 80) * (100vw - 320px) / (1920 - 320));
    -o-object-fit: contain;
    object-fit: contain;
    padding: 10px;
}

.client_item::before {
    content: "";
    position: absolute;
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    top: calc(2px/-1);
    left: calc(2px/-1);
    background: linear-gradient(to right, var(--color-2) 0%, var(--color-2) 100%), linear-gradient(to top, var(--color-2) 50%, transparent 50%), linear-gradient(to top, var(--color-2) 50%, transparent 50%), linear-gradient(to right, var(--color-2) 0%, var(--color-2) 100%), linear-gradient(to left, var(--color-2) 0%, var(--color-2) 100%);
    background-size: 100% 2px, 2px 200%, 2px 200%, 0% 2px, 0% 2px;
    background-position: 50% 100%, 0% 0%, 100% 0%, 100% 0%, 0% 0%;
    background-repeat: no-repeat, no-repeat;
    transition: transform 0.3s ease-in-out, background-position 0.3s ease-in-out, background-size 0.3s ease-in-out;
    transform: scaleX(0) rotate(0deg);
    transition-delay: 0.6s, 0.3s, 0s;
}

.client_item:hover:before {
    background-size: 200% 2px, 2px 400%, 2px 400%, 55% 2px, 55% 2px;
    background-position: 50% 100%, 0% 100%, 100% 100%, 100% 0%, 0% 0%;
    transform: scaleX(1) rotate(0deg);
    transition-delay: 0s, 0.3s, 0.6s;
}

.section-dots {
    text-align: center;
    position: absolute;
    bottom: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(100% - 20px);
    margin: 0;
}

.section-dots li {
    margin: 0 5px;
    display: inline-block;
    list-style: none;
}

.section-dots li .dot {
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 10px;
    background-color: var(--color-5);
    text-decoration: none;
    cursor: pointer;
    transition: all ease 0.3s;
}

.section-dots li .dot .string {
    position: absolute;
    line-height: 0;
    opacity: 0;
}

.section-dots li.slick-active .dot {
    background-color: var(--color-1);
}

.team_sec {
    position: relative;
    overflow: hidden;
    background: url(../images/bg/bg_4.png) #fff;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.team_item {
    padding: 30px;
    margin-top: 30px;
    margin-bottom: 30px;
    border-radius: 10px;
    background-color: #f8f8f8;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

.team_item.slick-center {
    background-color: #04213f;
    transition: all .5s ease-in;
    -webkit-transition: all .5s ease-in;
    -moz-transition: all .5s ease-in;
    -ms-transition: all .5s ease-in;
    -o-transition: all .5s ease-in;
    box-shadow: 0px 0px 17px 0px rgb(0 0 0 / 27%);
}

.team_figure {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto 20px;
    z-index: 1;
}

.team_figure::before,
.team_figure::after {
    content: "";
    position: absolute;
    left: -10%;
    top: 85%;
    width: 20px;
    height: 20px;
    background-color: var(--color-1);
    border-radius: 50px;
    z-index: -1;
    animation: 8s linear 0s infinite normal none running rotating;
    -webkit-animation: 8s linear 0s infinite normal none running rotating;
    -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.team_figure::after {
    right: -30%;
    left: auto;
    top: 20%;
    background-color: #cccccc;
    -webkit-clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.team_figure>img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    -webkit-object-fit: cover;
    border-radius: 10px;
    border: 2px solid #fff;
}

.team_caption {
    text-align: center;
}

.team_caption>h4 {
    color: var(--color-2);
    text-transform: uppercase;
}

.team_item.slick-center .team_caption>* {
    color: var(--bs-white);
    transition: all .5s ease-in;
    -webkit-transition: all .5s ease-in;
    -moz-transition: all .5s ease-in;
    -ms-transition: all .5s ease-in;
    -o-transition: all .5s ease-in;
}

.team_item.slick-center .team_figure::before {
    background-color: var(--color-2);
}

/* ---Breadcrumb Area--- */
.breadcrumb_area {
    position: relative;
    height: calc(200px + (400 - 200) * (100vw - 320px) / (1920 - 320));
    padding-top: calc(0px + (50 - 0) * (100vw - 320px) / (1920 - 320));
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    z-index:1;
}

.breadcrumb_area::after {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 100%;
    content: '';
    z-index: -1;
    background: url(../images/bg/breadcrumb_shape.png);
    background-position: bottom center;
    background-repeat: no-repeat;
    background-size: cover;
}

.breadcrumb_title {
    font-size: calc(18px + (35 - 18) * ((100vw - 320px) / (1920 - 320)));
    color: var(--bs-white);
    font-weight: 600;
    text-transform: uppercase;
}

.breadcrumb_area .breadcrumb-item,
.breadcrumb_area .breadcrumb-item>a {
    color: var(--bs-white);
    font-weight: 700;
    font-size: var(--font-15);
}

.breadcrumb_area .breadcrumb-item.active {
    color: var(--color-2);
    font-weight: 700;
}

.Innerpage_sec {
    position: relative;
    z-index: 1;
    overflow: hidden;
    background: url(../images/bg/bg_6.png);
    background-position: center center;
    background-size: contain;
}

/* ---Contact Us Section--- */

.contact_left {
    height: 332px;

    border: 5px solid var(--color-2);
    padding: 5px;
}

.contact_left iframe{}

.contact_right{
    background-color: #f1f6fc;
    padding: calc(15px + (30 - 15) * (100vw - 320px) / (1920 - 320));
}

.contact_right .form-control {
    padding: calc(15px + 4 * ((100vw - 320px) / 1920));
    font-weight: 400;
    background-color: var(--bs-white);
    border: 1px solid rgb(197 197 197);
    border-radius: 0;
    color: var(--bs-dark);
    font-size: var(--font-15);
}

.contact_right .form-control::placeholder {
    color: var(--color-1);
}

.contact_right .btn {
    border-radius: 0;
    padding: calc(15px + 4 * ((100vw - 320px) / 1920));
    font-size: calc(14px + 4 * ((100vw - 320px) / 1920));
    color: var(--bs-white);
    /* background-color: var(--color-1); */
    background-color: rgb(191 105 42);

    font-weight: 500;
    text-transform: uppercase;
}

.contact_right .btn:hover {
    background-color: var(--color-2);
    color: var(--bs-white);
}

.contact_info {
    background: #f1f6fc;
    padding: calc(10px + (30 - 10) * (100vw - 320px) / (1920 - 320));
    text-align: center;
    height: 100%;
}

.contact_info .icon-part{
    position: relative;
    width: calc(30px + (60 - 30) * (100vw - 320px) / (1920 - 320));
    height: calc(30px + (60 - 30) * (100vw - 320px) / (1920 - 320));
    line-height: calc(30px + (60 - 30) * (100vw - 320px) / (1920 - 320));
    border-radius: 100%;
    margin: 0 auto 20px;
    text-align: center;
    background-color: #cde5ff;
}

.contact_info .icon-part i {
    font-size: calc(30px + (60 - 30) * (100vw - 320px) / (1920 - 320));
    color: #003e7f;
    line-height: 1;
    margin-top: -5px;
    position: relative;
    z-index: 1;
}

.contact_info .content-part .title{
    color: var(--color-1);
    font-weight: 500;
    text-transform: uppercase;
}

.contact_info .content-part a{
    font-size: var(--font-16);
    color: var(--color-2);
    font-weight: 600;
}

.contact_info .content-part p {
   margin: 0;
}

/* ---Footer Area Start--- */
.main_footer {
    padding-top: 50px;
    position: relative;
    background-image: url(../images/bg/footer_bg.png);
    background-color: #001326;
}

.footer_subscribe {
    background: var(--color-2);
    border-radius: 5px;
    padding: calc(10px + (30 - 10) * (100vw - 320px) / (1920 - 320)) calc(10px + (70 - 10) * (100vw - 320px) / (1920 - 320));
    margin-bottom: calc(30px + (60 - 30) * (100vw - 320px) / (1920 - 320));
}

.subscribe_title {
    position: relative;
    padding-left: calc(35px + (80 - 35) * (100vw - 320px) / (1920 - 320));
}

.subscribe_title::before {
    content: "\f32f";
    position: absolute;
    top: 0;
    left: 0;
    line-height: normal;
    font-weight: 400;
    font-family: bootstrap-icons !important;
    color: var(--bs-white);
    font-size: var(--font-60);
    z-index: 1
}

.subscribe_title>h3>span {
    display: block;
    font-weight: 500;
    font-size: var(--font-18);
}

.subscribe_title>h3 {
    text-transform: uppercase;
    color: var(--bs-white);
    font-weight: 700;
}

.subscribe_form {}

.subscribe_form form {
    position: relative;
}

.subscribe_form form .form-control {
    height: 65px;
    border-radius: 4px;
    border: 1px solid #fff;
    font-size: var(--font-18);
    font-weight: 500;
    color: #313131;
    font-family: var(--font-family-Barlow);
}

.subscribe_form form .form-control::placeholder {
    font-weight: 500;
    font-family: var(--font-family-REM);
    color: #b4b4b4;
}

.subscribe_form form .btn {
    position: absolute;
    right: 7px;
    top: 50%;
    padding: 13px 20px;
    text-transform: uppercase;
    border-radius: 4px;
    background-color: var(--color-1) !important;
    color: var(--bs-white) !important;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}

.subscribe_form form .btn:hover {
    background-color: var(--color-2) !important;
    color: var(--bs-white) !important;
}

.footer_wraper p {
    font-weight: 300;
}

.footer-brand {
    position: relative;
    margin: 0;
    display: block;
    margin-bottom: 10px;
    width:200px;
}

.footer_title {
    position: relative;
    color: var(--bs-white);
    margin-bottom: calc(10px + (15 - 10) * ((100vw - 320px) / (1920 - 320)));
    font-weight: 500;
    text-transform: uppercase;
}

.footer_contact {
    padding: 0;
    margin: 0;
}

.footer_contact>li {
    list-style: none;
    color: #e1e1e1;
    font-size: var(--font-15);
    position: relative;
    margin-bottom: 15px;
    padding-left: 30px;
}

.footer_contact>li>i {
    position: absolute;
    color: var(--bs-white);
    left: 0;
    top: 0;
    font-size: var(--font-18);
}

.footer_contact>li>a {
    position: relative;
    display: block;
    color: var(--bs-white);
    font-size: var(--font-15);
    font-weight: 300;
}

.social_info {}

.social_info>a {
    display: inline-block;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    border-radius: 4px;
    margin-right: 5px;
    border: 1px solid var(--color-1);
    font-size: var(--font-16);
    color: var(--bs-white);
    background-color: var(--color-1);
    transition: all .5s ease;
}

.social_info>a:hover {
    color: #fff;
}

.social_info>a:nth-child(1):hover {
    background-color: #4267B2;
}

.social_info>a:nth-child(2):hover {
    background-color: #1DA1F2;
}

.social_info>a:nth-child(3):hover {
    background-color: #FF0000;
}

/* .social_info>a:nth-child(4):hover {
    background-color: #0A66C2;
} */

.social_info>a:nth-child(4):hover {
    background: -ms-linear-gradient(261deg, #405DE6, #5B51D8, #833AB4, #C13584, #E1306C, #FD1D1D, #F56040, #F77737, #FCAF45, #FFDC80);
    background: -moz-linear-gradient(261deg, #405DE6, #5B51D8, #833AB4, #C13584, #E1306C, #FD1D1D, #F56040, #F77737, #FCAF45, #FFDC80);
    background: -o-linear-gradient(261deg, #405DE6, #5B51D8, #833AB4, #C13584, #E1306C, #FD1D1D, #F56040, #F77737, #FCAF45, #FFDC80);
    background: -webkit-linear-gradient(261deg, #405DE6, #5B51D8, #833AB4, #C13584, #E1306C, #FD1D1D, #F56040, #F77737, #FCAF45, #FFDC80);
    background: linear-gradient(189deg, #405DE6, #5B51D8, #833AB4, #C13584, #E1306C, #FD1D1D, #F56040, #F77737, #FCAF45, #FFDC80);
}

.footer_links {
    padding: 0;
    margin: 0;
}

.footer_links>li {
    list-style: none;
    margin-bottom: 6px;
}

.footer_links>li>a {
    position: relative;
    display: block;
    padding-bottom: 5px;
    color: var(--bs-white);
    font-size: var(--font-15);
    font-weight: 400;
}

.footer_links>li>a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 1px;
    transition: all .5s ease;
    background-color: var(--color-2);
}

.footer_links>li>a:hover::after {
    width: 20%;
    transition: all .5s ease;
}

.footer_links>li>a:hover {
    color: var(--color-2);
    transition: all .5s ease;
}

.footer_links>li:first-child>a {
    padding-top: 0;
}

.footer_links>li:last-child>a {
    border-bottom: none;
}

.footer_bottom {
    margin-top: 50px;
    padding: 10px 0;
    border-top: 1px solid #112836;
    background-color: #001c38;
}

.footer_bottom p {
    color: var(--bs-white);
    font-weight: 400;
}

.footer_bottom p>a {
    color: var(--bs-white);
}

/*---Scroll To Top---*/
.progress-wrap {
    position: fixed;
    right: 4px;
    bottom: 20px;
    height: 46px;
    width: 46px;
    background-color: var(--bs-white);
    cursor: pointer;
    display: block;
    border-radius: 50px;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    -webkit-transform: translateY(15px);
    -moz-transform: translateY(15px);
    -ms-transform: translateY(15px);
    -o-transform: translateY(15px);
    transition: all 200ms linear;
    -moz-transition: all 200ms linear;
    -ms-transition: all 200ms linear;
    -o-transition: all 200ms linear;
}

.progress-wrap.active-progress {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
}

.progress-wrap::after {
    position: absolute;
    font-family: bootstrap-icons !important;
    content: "\f145";
    text-align: center;
    line-height: 46px;
    font-size: var(--font-22);
    color: var(--color-1);
    left: 0;
    top: 0;
    height: 46px;
    width: 46px;
    cursor: pointer;
    display: block;
    z-index: 1;
    transition: all 200ms linear;
    -webkit-transition: all 200ms linear;
    -moz-transition: all 200ms linear;
    -ms-transition: all 200ms linear;
    -o-transition: all 200ms linear;
}

.progress-wrap:hover::after {
    opacity: 1;
}

.progress-wrap::before {
    position: absolute;
    font-family: bootstrap-icons !important;
    content: "\f145";
    text-align: center;
    line-height: 46px;
    font-size: var(--font-22);
    opacity: 0;
    background-image: var(--theme-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    left: 0;
    top: 0;
    height: 46px;
    width: 46px;
    cursor: pointer;
    display: block;
    z-index: 2;
    transition: all 200ms linear;
    -webkit-transition: all 200ms linear;
    -moz-transition: all 200ms linear;
    -ms-transition: all 200ms linear;
    -o-transition: all 200ms linear;
}

.progress-wrap:hover::before {
    opacity: 1;
}

.progress-wrap svg path {
    fill: none;
}

.progress-wrap svg.progress-circle path {
    stroke: var(--color-1);
    stroke-width: 4;
    box-sizing: border-box;
    -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}