@import url('https://fonts.googleapis.com/css2?family=Spline+Sans:wght@300..700&display=swap');

html {
    -webkit-font-smoothing: antialiased;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
    font-family: "Spline Sans", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 400;
    padding: 0;
    color: #000;
}
.container {max-width: 1250px;}
*:focus {
    outline: none;
}
*::-moz-focus-inner {
    outline: none;
    border: 0
}
* {
    box-sizing: border-box;
    outline: none;
}
p,
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    padding: 0;
}
a {text-decoration: none;}
.bgImg {
    width: 100%;
    height: 100%;
    max-width: 1920px;
    position: absolute;
    margin: auto;
    z-index: 0;
    left: 0;
    top: 0;
}
img {
    max-width: 100%;
    display: inline-block;
}

/******************************************
	Header Styles.
*******************************************/
#header {
    width: 100%;
    display: block;
    position: relative;
    background: #fff;
    z-index: 9999;
    top: 0;
}
#header.sticky {
    top: 0;
    z-index: 999;
    position: sticky;
    box-shadow: 0px 15px 30px 0px rgba(0, 0, 0, 0.20);
}
.logo {
    width: 133px;
    padding: 12px 0;
}
#header .navbar.navbar-expand-lg {
    width: 100%;
    padding: 0;
}
#navbarSupportedContent {
    justify-content: flex-end;
}
.navbar-nav li {
    padding: 0 0 0 30px;
    position: relative;
    line-height: 18px;
    font-size: 16px;
}
.navbar-nav li a {
    text-decoration: none;
    display: block;
    color: #101010;
}
.navbar-nav li a:hover {color: #0D2EB3;}
.mobile {display: none;}
#header button.navbar-toggler {
    padding: 0;
    border: none;
    outline: none
}
#header button.navbar-toggler:focus {box-shadow: none;}
#header .navbar-toggler-icon {
    background: url(assets/images/menuOpen.png);
    background-repeat: no-repeat;
    width: 48px;
    height: 48px;
}
.socialHed {
    margin-top: 40px;
    display: block;
    font-size: 18px;
    color: #000;
}
.socialLink {
    margin: 0;
    display: flex;
    list-style: none;
    align-items: center;
    margin-top: 14px;
    padding: 0;
    gap: 16px;
}
.socialLink img:hover {opacity: .6}
.socialLink a {display: block;}
.mobile p {
    font-size: 18px;
    font-weight: 400;
    margin-bottom: 16px;
}


@media screen and (max-width:992px) {
    .logo {margin-left: 10px;}
    #header .navbar-toggler-icon {margin-right: 10px;}
    #header .navbar-collapse {
        top: 88px;
        width: 100%;
        position: absolute;
        background: #fff;
        transition: none;
        right: -12px;
    }
    #header.showMenu:after {
        top: 88px;
        width: 100%;
        position: absolute;
        background: #000;
        height: 100vh;
        opacity: .75;
        z-index: -1;
        content: "";
        left: 0;
    }
    .navbar-nav li {
        padding: 30px 0 0 26px;
        width: 100%;
    }
    .navbar-nav li a {
        line-height: 1.5;
        font-size: 28px;
        display: block;
    }
    .mobile {
        display: block;
        margin-left: 26px;
        margin-top: 100px;
    }
    #header .navbar-collapse {
        height: 100vh;
        padding-top: 50px;
        overflow-y: scroll
    }
}

@media screen and (max-height:400px) {
    #header .navbar-collapse {padding-top: 0;}
    .navbar-nav li {padding: 10px 0 0 26px;}
    .navbar-nav li a {font-size: 16px;}
    .mobile {margin-top: 15px;}
}

/* ---- Banner area Start ----- */
.bannerArea {
    height: 615px;
    display: flex;
    align-items: center;
}
.bannerText h1 {
    font-size: 60px;
    line-height: 1.2;
    font-weight: 400;
    padding-right: 10px;
}
.bannerText p {
    font-size: 18px;
    line-height: 1.5;
    max-width: 446px;
    font-weight: 400;
    margin-top: 14px
}
.bannerArea {
    background: #1242FF;
    position: relative;
    z-index: 2;
}
.bannerArea .container {position: static;}
.banner-img {
    right: 0;
    bottom: 0;
    position: absolute;
    display: block;
    width: 640px;
    height: auto;
}
.banner-img img {display: block;}
.bannerText {color: #fff;}
.banner-img {
    position: absolute;
    right: 0;
    bottom: 0;
}
.bannerShap {
    position: absolute;
    right: 0;
    bottom: 0;
}
.banner-img .bannerimg-sm {display: none}

@media screen and (max-width:1279px) {
    .bannerArea {height: auto;}
    .bannerText {
        color: #fff;
        max-width: 410px;
    }
    .bannerArea .row {align-items: center;}
    .bannerText h1 {
        font-size: 42px;
        padding-right: 0;
    }
    .bannerArea .banner-img {
        position: relative;
        width: auto;
        right: -11px;
    }

}

@media screen and (max-width:1023px) {
    .bannerText h1 {font-size: 37px;}
}

@media screen and (max-width:767px) {
    .banner-img .bannerimg-big {display: none}
    .banner-img .bannerimg-sm {
        display: block;
        border-radius: 0 0 0 140px;
        width: 100%;
    }
    .banner-img {margin-bottom: 13px}
    .bannerText {
        max-width: 100%;
        padding-bottom: 30px;
    }
    .bannerText h1 {font-size: 40px;}
}

@media screen and (max-width:400px) {
    .bannerText h1 {font-size: 36px;}
}

@media screen and (max-width:373px) {
    .bannerText h1 {font-size: 32px;}
}

/* ---- Banner area Start ----- */
/* ---- Union area Start ----- */
.unionArea {
    padding: 120px 0 10px;
    color: #101010
}
.unionArea .content {padding-right: 65px;}
.unionArea .col-md-6:first-child {padding-right: 30px}
.unionArea .col-md-6:first-child {padding-right: 55px}
.content h2 {
    line-height: 1.28;
    font-size: 36px;
    font-weight: 400
}
.content p {
    line-height: 1.5;
    margin-top: 16px;
    font-weight: 400;
}

@media screen and (max-width:1279px) {
    .unionArea .content {padding-right: 0;}
}

@media screen and (max-width:1023px) {
    .unionArea {padding: 70px 0 10px;}
    .content h2 {font-size: 28px;}
    .unionArea .content {padding-right: 0;}
    .unionArea .col-md-6:first-child {padding-right: 20px;}
}

@media screen and (max-width:1023px) {
    .unionArea img {width: 100%}
}

@media screen and (max-width:767px) {
    .unionArea .content {margin-top: 32px;}
    .content h2 {font-size: 32px;}
}

@media screen and (max-width:400px) {
    .content h2 {font-size: 26px;}
}

/* ---- Union area End ----- */
/* ---- Slider area End ----- */
.sliderArea {
    background: url(assets/images/slider-shap-big.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding: 150px 0 90px;
    margin-bottom: 40px;
}
.sliderArea .container {max-width: 972px;}
.sliderArea .carousel-inner {border-radius: 10px;}
.sliderBox {
    display: flex;
    justify-content: space-between;
}
.sliderimg {width: 50%;}
.sliderArea .content {
    width: 50%;
    background: #2753FF;
    padding: 60px 86px 60px 64px;
    color: #fff;
}
.sliderArea .content h2 {
    line-height: 1.295;
    font-size: 44px;
}
.sliderArea .carousel-indicators {
    margin-right: 0;
    margin-bottom: 50px;
    margin-left: 30%;
}
.sliderArea .carousel-indicators [data-bs-target] {
    border: 0;
    width: 10px;
    background-color: #D9D9D9;
    border-radius: 50%;
    margin-right: 5px;
    margin-left: 5px;
    height: 10px;
    opacity: 1;
}

.sliderArea .carousel-indicators .active {background-color: #383838}

@media screen and (max-width:1023px) {
    .sliderArea {padding: 70px 0;}
    .sliderArea .content {padding: 50px 50px;}
    .sliderArea .content h2 {font-size: 35px;}
}

@media screen and (max-width:767px) {
    .sliderArea {padding: 70px 0 8px;}
    .sliderBox {flex-wrap: wrap;}
    .sliderArea .content {
        padding: 50px 25px 80px;
        width: 100%;
    }
    .sliderimg {width: 100%;}
    .sliderimg img {width: 100%;}
    .sliderArea .carousel-indicators {
        margin-left: 0;
        margin-bottom: 30px;
    }
}

@media screen and (max-width:400px) {
    .sliderArea .content h2 {font-size: 32px;}
}

/* ---- Slider area End ----- */
/* ---- sunOp area Start ----- */
.sunopArea {
    color: #fff;
    padding-top: 120px;
    background: #1242FF
}
.sunopArea .row {padding-bottom: 120px;}
.sunopArea .row {padding-bottom: 120px;}
.tikBox {
    padding: 0;
    list-style: none;
    column-count: 2;
    margin: 24px 0 0;
    gap: 30px;
}
.tikBox li {
    padding: 8px 0 8px 34px;
    background: url(assets/images/tikBox.png);
    background-repeat: no-repeat;
    background-position: left top 10px;
}
.cmnBtn {
    font-size: 18px;
    line-height: 1.5;
    background: #fff;
    padding: 12px 32px;
    display: inline-block;
    border-radius: 8px;
    margin-top: 30px;
    color: #0D2EB3;
}
.cmnBtn:hover {
    background: #0D2EB3;
    color: #fff;
}

@media screen and (max-width:1279px) {
    .tikBox {column-count: 1;}
}

@media screen and (max-width:1023px) {
    .sunopArea {padding-top: 88px;}
    .sunopArea .row {padding-bottom: 88px;}
    .sunopArea .row.align-items-center {align-items: flex-start !important;}
}

@media screen and (max-width:767px) {
    .sunopArea .content {margin-top: 32px;}
    .sunopImg img {width: 100%;}
}

/* ---- sunOp area End ----- */
/* ---- Client area Start ----- */
.clientArea {padding: 120px 0}
.clientArea .content {
    margin: 0 auto;
    max-width: 442px;
    text-align: center;
    color: #000;
}
.clientLogos {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 48px;
    gap: 20px 40px;
}

@media screen and (max-width:1023px) {
    .clientArea {padding: 88px 0;}
}

@media screen and (max-width:767px) {
    .clientLogos {
        gap: 5px;
        flex-wrap: wrap;
    }
    .clientLogo {width: calc(33.333% - 5px);}
    .clientLogo:nth-child(1) {order: 4}
    .clientLogo:nth-child(2) {order: 3}
    .clientLogo:nth-child(3) {order: 1}
    .clientLogo:nth-child(4) {order: 6}
    .clientLogo:nth-child(5) {
        order: 2;
        padding: 0 20px
    }
    .clientLogo:nth-child(6) {order: 5}
}

/* ---- Client area End ----- */
/* ---- Protfolio area Start ----- */
.portfolioArea {padding-bottom: 120px}
.portfolioArea .row {
    background: #1242FF;
    border-radius: 40px;
    align-items: center;
}
.portfolioArea .content {
    color: #fff;
    padding-left: 108px;
}
.portfolioArea .content h2 {
    font-size: 48px;
    line-height: 1.2916;
}
.portfolioArea .content p {font-size: 18px;}
.portfolioArea img {width: 100%;}
.portfolioArea img {
    width: 100%;
    border-radius: 0 0 40px 0;
}
@media screen and (max-width:1279px) {
    .portfolioArea .content h2 {font-size: 32px;}
}

@media screen and (max-width:1023px) {
    .portfolioArea .content {padding-left: 40px;}
    .portfolioArea .content h2 {font-size: 28px;}
}
@media screen and (max-width:767px) {
    .portfolioArea .row {border-radius: 24px}
    .portfolioArea .content {padding: 32px;}
    .portfolioArea .content h2 {font-size: 26px;}
}

@media screen and (max-width:767px) {
    .portfolioArea .content h2 {font-size: 24px;}
}

/* ---- Protfolio area End ----- */
/* ---- Form area Start ----- */
.formArea {padding-bottom: 112px}
.inputBoxs {
    background: #F9F9F9;
    padding: 40px 32px;
    border-radius: 18px;
    max-width: 590px;
}
.inputBox .form-control {
    color: #909090;
    border-radius: 8px;
    border-color: #909090;
    padding: 12px 0 12px 44px;
    background-repeat: no-repeat;
    background-position: left 16px top 50%;
    line-height: 1.5;
    box-shadow:none;
}
.inputBox textarea.form-control {
    height: 160px;
    resize: none;
}
.inputBox {margin-bottom: 24px}
.inputBox .form-control.inputBg-1 {background-image: url(assets/images/form-1.png);}
.inputBox .form-control.inputBg-2 {
    background-image: url(assets/images/form-2.png);
    background-position: left 14px top 50%;
}
.inputBox .form-control.inputBg-3 {
    background-image: url(assets/images/form-3.png);
    background-position: left 12px top 50%;
}
.inputBox .form-control.inputBg-4 {
    background-image: url(assets/images/form-4.png);
    background-position: left 18px top 14px;
}
.inputBox .form-control:focus {border-color: #1242FF;}
.inputBox .form-label {
    font-size: 18px;
    line-height: 1.2916;
    display: block;
}
.inputBoxs .btn {
    color: #fff;
    font-size: 18px;
    background: #1242FF;
    align-items: center;
    padding: 12px 32px;
    display: flex;
    gap: 13px;
}
.inputBoxs .btn:hover {background: #0D2EB3;}
.inputBoxs .btn svg {fill: #fff}
.formArea .content {
    max-width: 495px;
    margin-top: 80px;
    margin-left: 116px;
}
.formArea .content p {padding-right: 52px;}

@media screen and (max-width:1279px) {
    .formArea .content {margin-left: 50px;}
}

@media screen and (max-width:1023px) {
    .portfolioArea {padding-bottom: 88px;}
}

@media screen and (max-width:1023px) {
    .portfolioArea {padding-bottom: 88px;}
    .formArea .content {margin: 0 0 32px 0;}
}

@media screen and (max-width:1023px) {
    .formArea {padding-bottom: 70px;}
}

@media screen and (max-width:767px) {
    .inputBoxs {
        background: #F9F9F9;
        padding: 40px 15px;
        border-radius: 18px;
        max-width: 100%;
    }
}

@media screen and (max-width:400px) {
    .inputBoxs {padding: 40px 15px;}
}

/* ---- Form area End ----- */
/* ---- Footer area Start ----- */

.footerArea {
    background: #1242FF;
    padding-top: 58px;
    color: #fff;
}
.footerArea .row {justify-content: space-between;}
.ftrlogo p {
    margin-top: 18px;
    font-size: 18px;
}
.ftrlogo p {
    margin-top: 18px;
    font-size: 18px;
}
.ftrmenu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.ftrmenu ul li {margin-bottom: 12px;}
.ftrmenu ul li a {
    color: #fff;
}

.footerArea strong {
    display: block;
    margin-bottom: 10px;
    font-weight: 400;
    font-size: 18px;
}
.ftrsocial ul {
    margin: 16px 0 26px;
    padding: 0;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 20px;
}
.ftrsocial ul li img:hover {opacity: .6}
.footerArea .cmnBtn {
    display: flex;
    font-size: 16px;
    padding: 12px 22px;
    align-items: center;
    margin-top: 10px;
    color: #0D2EB3;
    gap: 13px;
}
.footerArea .cmnBtn svg {fill: #0D2EB3}
.footerArea .cmnBtn:hover {
    background: #0D2EB3;
    color: #fff;
}
.footerArea .cmnBtn:hover svg {fill: #fff}
.ftrend {padding-left: 50px;}
.ftrsocial {padding-left: 80px;}
.copyRight {
    padding: 5px 0;
    background: #0000D4;
    margin-top: 64px;
}
.copyRight p {
    font-size: 18px;
    line-height: 1.5;
    font-weight: 300;
}

@media screen and (max-width:1279px) {
    .ftrsocial {padding-left: 18px;}
    .ftrend {padding-left: 0;}
    .footerArea .cmnBtn {
        padding: 12px 15px;
        width: 196px;
    }
}

@media screen and (max-width:767px) {
    .ftrmenu {margin-top: 35px;}
    .ftrlogo {max-width: 210px;}
    .ftrsocial,
    .ftrend {
        padding-left: 0;
        margin-top: 35px;
    }
    .footerArea {font-size: 14px;}
    .footerArea strong {font-size: 19px;}
    .copyRight {margin-top: 58px;}
    .copyRight p {font-size: 14px;}
}

/* ---- Footer area End ----- */