@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');


html {
    -webkit-font-smoothing: antialiased;
    scroll-behavior: smooth;
}
*{
    box-sizing:border-box;
    outline:none;
}
/* font-family: "Montserrat", sans-serif;*/
body {
    padding: 0;
    font-style: normal;
    font-size: 1.125em /*18px*/;
    font-family:  var(--cmnfont);
    line-height: 1.1;
    font-weight: 400;
    color: var(--color);
    margin: 0;

}
/*
section{
    position: relative;
    z-index: 1
}
*/
.container {
    width: 100%;
    max-width: 1300px;
    padding: 0 15px;
    margin: 0 auto;
}

h1,
h2{
    line-height: 1;
    font-size: 2.500em;/* 45*/
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family:  var(--cmnfont);
    color: var(--color1);
    margin: 0;
    padding: 0;
}

p {
    margin: 0;
    line-height: 1.5
}
.pdgTop-20{
    padding-top: 20px
}
.pdgTop-30{
    padding-top: 30px
} 
.pdgTop-40{
    padding-top: 40px
} 
.pdgTop-50{
    padding-top: 50px
} 
.pdgTop-60{
    padding-top: 60px
} 
.pdgTop-70{
    padding-top: 70px
} 
.pdgTop-80{
    padding-top: 80px
} 
.pdgTop-90{
    padding-top: 90px
} 
.pdgTop-100{
    padding-top: 100px
} 
.pdgTop-200{
    padding-top: 200px
} 
.pdgBtm-100{
   padding-bottom: 100px 
}
.textCenter{
    text-align: center
}
.textLeft{
    text-align: left
}
.textRight{
    text-align: left
}
button{
   font-family:  var(--cmnfont); 
    font-size: 1.125em;/*18px*/
}

:root {
    --color: #4C4D56;
    --color1: #000000;
    --color2: #ffffff;
    --color3: #03c4eb;
    --color4: #7141B1;
    --cmnfont: "Montserrat", sans-serif;

}



:root {
    --gap-4: 4px;
    --gap-5: 5px;
    --gap-8: 8px;
    --gap-9: 9px;
    --gap-10: 10px;
    --gap-15: 15px;
    --gap-16: 16px;
    --gap-18: 18px;
    --gap-20: 20px;
    --gap-22: 22px;
    --gap-23: 23px;
    --gap-24: 24px;
    --gap-26: 26px;
    --gap-26_666: 26.666px;
    --gap-28: 28px;
    --gap-30: 30px;
    --gap-31: 31px;
    --gap-32: 32px;
    --gap-33: 33px;
    --gap-35: 35px;
    --gap-37: 37px;
    --gap-38: 38px;
    --gap-40: 40px;
    --gap-42: 42px;
    --gap-44: 44px;
    --gap-45: 45px;
    --gap-46: 46px;
    --gap-48: 48px;
    --gap-50: 50px;
    --gap-52: 52px;
    --gap-53: 53px;
    --gap-60: 60px;
    --gap-65: 65px;
    --gap-67: 67px;
    --gap-68: 67px;
    --gap-70: 70px;
    --gap-72: 72px;
    --gap-80: 80px;
    --gap-84: 84px;
    --gap-100: 100px;
    --gap-110: 110px;
    --gap-120: 120px;
    --gap-116: 116px;
    --gap-130: 130px;
    --gap-210: 210px;
}



@media screen and (max-width:1280px) {
    :root {
        --gap-4: 0.29282576866764276vw;
        /* 4 / 1366 */
        --gap-5: 0.36603221083455345vw;
        /* 5 / 1366 */
        --gap-8: 0.5856515373352855vw;
        /* 8 / 1366 */
        --gap-9: 0.6588579795021962vw;
        /* 9 / 1366 */
        --gap-10: 0.7320644216691069vw;
        /* 10 / 1366 */
        --gap-15: 1.0980966325036604vw;
        /* 15 / 1366 */
        --gap-16: 1.171303074670571vw;
        /* 16 / 1366 */
        --gap-20: 1.4641288433382138vw;
        /* 20 / 1366 */
        --gap-22: 1.6105417276720352vw;
        /* 22 / 1366 */
        --gap-23: 1.683748169838946vw;
        /* 23 / 1366 */
        --gap-24: 1.7569546120058566vw;
        /* 24 / 1366 */
        --gap-26: 1.903367496339678vw;
        /* 26 / 1366 */
        --gap-26_666: 1.9521229868228403vw;
        /* 26.666 / 1366 */
        --gap-28: 2.0497803806734993vw;
        /* 28 / 1366 */
        --gap-30: 2.1961932650073207vw;
        /* 30 / 1366 */
        --gap-31: 2.2693997071742314vw;
        /* 31 / 1366 */
        --gap-32: 2.342606149341142vw;
        /* 32 / 1366 */
        --gap-33: 2.4158125915080528vw;
        /* 33 / 1366 */
        --gap-35: 2.562225475841874vw;
        /* 35 / 1366 */
        --gap-37: 2.7086383601756955vw;
        /* 37 / 1366 */
        --gap-38: 2.7818448023426062vw;
        /* 38 / 1366 */
        --gap-40: 2.9282576866764276vw;
        /* 40 / 1366 */
        --gap-42: 3.074670571010249vw;
        /* 42 / 1366 */
        --gap-44: 3.2210834553440704vw;
        /* 44 / 1366 */
        --gap-45: 3.294289897510981vw;
        /* 45 / 1366 */
        --gap-46: 3.367496339677892vw;
        /* 46 / 1366 */
        --gap-48: 3.513909224011713vw;
        /* 48 / 1366 */
        --gap-50: 3.6603221083455345vw;
        /* 50 / 1366 */
        --gap-52: 3.806734992679356vw;
        /* 52 / 1366 */
        --gap-53: 3.8799414348462666vw;
        /* 53 / 1366 */
        --gap-60: 4.3923865300146414vw;
        /* 60 / 1366 */
        --gap-65: 4.758418740849195vw;
        /* 65 / 1366 */
        --gap-67: 4.904831625183016vw;
        /* 67 / 1366 */
        --gap-68: 4.978038067349927vw;
        /* 68 / 1366 */
        --gap-70: 5.124450951683748vw;
        /* 70 / 1366 */
        --gap-72: 5.27086383601757vw;
        /* 72 / 1366 */
        --gap-80: 5.856515373352855vw;
        /* 80 / 1366 */
        --gap-84: 6.149341142020498vw;
        /* 84 / 1366 */
        --gap-100: 7.320644216691069vw;
        /* 100 / 1366 */
        --gap-110: 8.052708638360176vw;
        /* 110 / 1366 */
        --gap-116: 8.49194729136164vw;
        /* 116 / 1366 */
        --gap-120: 8.784773060029283vw;
        /* 120 / 1366 */
        --gap-130: 9.51683748169839vw;
        /* 130 / 1366 */
        --gap-210: 15.373352855051245vw;
        /* 210 / 1366 */
    }
}

@media screen and (max-width:767px) {
    :root {
        --gap-4: 4px;
        --gap-5: 5px;
        --gap-8: 8px;
        --gap-9: 9px;
        --gap-10: 10px;
        --gap-15: 15px;
        --gap-16: 15px;
        --gap-20: 15px;
        --gap-22: 15px;
        --gap-23: 15px;
        --gap-24: 15px;
        --gap-26: 15px;
        --gap-28: 15px;
        --gap-30: 15px;
        --gap-31: 15px;
        --gap-32: 15px;
        --gap-33: 15px;
        --gap-35: 15px;
        --gap-37: 15px;
        --gap-38: 15px;
        --gap-40: 15px;
    }
}


.bgImg {
    width: 100%;
    height: 100%;
    max-width: 1920px;
    position: absolute;
    margin: auto;
    z-index: -1;
    right: 0;
    left: 0;
    top: 0;
}

.bgImg img {
    width: 100%;
    height: 100% !important;
    object-position: center;
    object-fit: cover;
}



.section3,.section6 {
    position: relative;
    z-index: 2
}
.section6 {
    background-color: #F8F8F8;
}
.section4 {
    position: relative;
    margin-top: -100px;
    background-color: #F8F8F8;
    z-index: 1
}




/********************************/
/*******      HEADER      *******/
/********************************/
.headerArea {
    top: 0;
    z-index: 999;
    position: fixed;
    transition: all .3s ease;
    padding: 30px 0;
    width: 100%;
    
}
.sticky .headerArea {
    background: #fff;
    box-shadow: 0px 6px 5px 0px rgba(0,0,0,0.1);
}
.headerArea .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.menu {
    gap: 30px;
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
}
.menu a {
    color: var(--color2);
    text-decoration: none;
    transition: all .3s ease;
    font-weight: 500;
}
.sticky .menu a {color: var(--color)}
.menu a:hover {color: var(--color3)}
.menuSocial {
    display: flex;
    align-items: center;
    gap: 30px;
}
.socialIcon {
    margin:0;
    padding: 0;
    list-style: none;
    align-items: center;
    display: flex;
    gap: 16px;
}
.socialIcon a {
    display: block;
    line-height: 0
}
.socialIcon a img {
    width: 26px;
    border-radius: 4px;
    transition: all .3s ease
}
.socialIcon a:hover img {
    opacity: .8
}
.menuBtn {
    width: 20px;
    height: 23px;
    font-size: 0;
    line-height: 0;
    font-family: var(--cmnfont);
    background-color: transparent !important;
    background: url(../images/menuOpen.svg) no-repeat center center;
    background-size: 100% auto;
    position: relative;
    cursor: pointer;
    z-index: 1000;
    display: none;
    border: none;
    padding: 0;
    margin: 0;
}

.show .menuBtn {
    background: url(../images/menuClose.svg) no-repeat center center;
    background-size: 100% auto;
}
.menuBtn:focus {outline: none}

@media screen and (max-width: 1023px) {
    .headerArea {padding: 20px 0}
    .logo {width: 150px}
    .logo img {width: 100%}
    .menuSocial {display: none}
    
    .show .menuSocial {
        right: 0;
        top: 80px;
        display: flex;
        position: absolute;
        flex-direction: column;
        transition: all .5s ease;
        background: #ededed;
        padding: 30px;
        width: 100%;
    }
    
    .show .menu {
        gap: 20px;
        flex-direction: column;
        padding: 30px;
        width: 100%;
    }
    .menuBtn {display: block}
}

/********************************/
/*******      CommonBtn      *******/
/********************************/

.commonBtn {
    cursor: pointer;
    overflow: hidden;
    position: relative;
    color:var(--color2);
    display: inline-block;
    font-size: 1.125em;/*18px*/
    text-decoration: none;
    background-color: transparent;
    background-image: linear-gradient(195deg, var(--color3) 0%, var(--color4) 100%);
    transition: all 0.5s ease 0s;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    border-color: transparent;
    border-style: solid;
    padding: var(--gap-20) var(--gap-50);
    border-radius:5px;
    box-shadow: none;
    font-weight:600;
    line-height:1;
    z-index: 1;
    border: 0;
}

.commonBtn:before {
    right: auto;
    left: 0;
    top: 0;
}

.commonBtn:after {
    left: auto;
    bottom: 0;
    right: 0;
}

.commonBtn::before,
.commonBtn::after  {
    width: 0;
    height: 50%;
    background: var(--color);
    transition: 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    position: absolute;
    content: "";
    z-index:-1;
}
.commonBtn:hover::before {
    width: 100%;
    left: auto;
    right: 0;
}
.commonBtn:hover::after {
    width: 100%;
    right: auto;
    left: 0;
}



/********************************/
/*******      Banner Section      *******/
/********************************/

.bannerSection .container {
    max-width: 100%;
    padding: 0;
}

.slideritem {
    position: relative
}

.sliderContent {
    height: 100vh;
    margin: 0 auto;
    max-width: 1023px;
    text-align: center;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    display: flex;
    gap: var(--gap-30);
}

.sliderContent h1,
.sliderContent p {
    color: #fff
}

.sliderContent h1 {
    font-size: 3.889em; /* 70*/
    text-transform: capitalize;
    font-weight: 800;

}
.sliderContent p {font-size: 1.222em; /* 22*/}

.group {
    display: flex;
    gap: var(--gap-30);
}

.slick-arrow {
    width: 30px;
    height: auto;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    position: absolute;
    cursor: pointer;
    line-height: 0;
    border: none;
    z-index: 5;
    top: 50%;
}

.slick-arrow .stroke {stroke: var(--color2);}

.slick-prev {left: 30px}
.slick-next {right: 30px}




@media screen and (max-height: 620px) {
.sliderContent {
    height: 700px;
    gap: 20px;
}
}


/********************************/
/*******      section 1      *******/
/********************************/

.section1 .serviceBoxs {
        margin-top: -206px;
}
.section1{
    background: #040F30;
}
.serviceBoxs {
    gap: var(--gap-30);
    display: flex;
    position: relative;
}
.serviceBox {
    width: 50%;
    position: relative;
    border-radius: 10px;
    padding: var(--gap-30) var(--gap-45) var(--gap-35);
    background: var(--color2);
    transition: all 0.3s linear;
    transform: translate3d(0, 0, 0);
    transition: all .5s ease;
    align-items: flex-start;
    flex-direction:column;
    position: relative;
    display: flex;
    gap: var(--gap-20);
}

.serviceBox:hover {
    transform: translateY(-5px) translate3d(0, -5px, 0);
}
.serviceBox h2 {font-size: 1.222em} /*22*/

.serviceBox span {
    width: 40px;
    height: 40px;
    display: flex;
    background: #ededed;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}

.serviceBox a {
    gap: 15px;
    display: flex;
    align-items: center;
    transition: all .3s ease;
    text-decoration: none;
    color: var(--color);
    font-weight: 500;
}
.serviceBox a:hover {color: var(--color3)}

.serviceBox span img {
    width: 20px;
    transition: all .5s ease;
}
.serviceBox:hover span img {transform: rotate(90deg)}

@media screen and (max-width: 1365px) {
.section1 .serviceBox {
    padding: 30px 15px;
}
}
@media screen and (max-width: 1023px) {
.serviceBox {
    padding: 30px 15px;
}
.section1 .serviceBox {
    width: calc(50% - 15px); 
}
    .section1 .serviceBoxs {
    flex-wrap: wrap;
}
}
@media screen and (max-width: 767px) {
.section1 .serviceBox {
    width: 100%; 
}

}










/********************************/
/*******      section 2      *******/
/********************************/
.weAre {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 100px;
}

.weAreLft {width: 50%}
.weAreLft h2 {
    margin-bottom: var(--gap-30);
    line-height: 1.3;
}
.subHead {
    color: var(--color3);
    /* font-size: 1.222em; */
    margin-bottom: var(--gap-15);
    display: inline-block;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 1px;
}
.signature {
    gap: var(--gap-50);
    display: flex;
    align-items: center;
    border-top: 1px dotted var(--color);
    padding-top: var(--gap-30);
    margin-top:var(--gap-30);
}
.singLft,singRit{width: 40%}
.singLft {border-right: 1px dotted var(--color);}
.singLft img {
    margin-bottom: var(--gap-10);
    display: block;  
}
.singLft strong {
    display: block;
    color: var(--color1);
}

.singRit a {
    font-weight: 700;
    font-size: 1.444em;/*24*/  
    text-decoration: none;
    display: inline-block;
    color: var(--color3);
    margin-top: var(--gap-10);
}
.weAreRit {
    width: 50%;
    display: flex;
}

.weArebtn {
    width: 33%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.weArebtn a{
    width: 80px;
    height: 80px;
    font-size: 15px;
    border-radius:50%;
    align-items: center;
    justify-content: center;
    background: linear-gradient(240deg, var(--color3) 0%, var(--color4) 100%);
    transition: all 0.3s linear;
    display: inline-flex;
    position: relative;
    text-align:center;
    margin-top: 48px;
    color: #ffffff;
}
.weArebtn a span img{line-height: 0}
.weArebtn a::before {
    top: 50%;
    left: 50%;
    z-index: 0;
    position: absolute;
    border:2px solid var(--color4);
    transform: translate(-50%, -50%);
    -webkit-animation: zoombig 3.25s linear infinite;
    animation: zoombig 3.25s linear infinite;
    -webkit-animation-delay: .8s;
    animation-delay: .8s;
    border-radius: 50%;
    display: block;
    height: 170px;
    width: 170px;
    content: "";
}
.weArebtn a::after {
    top: 50%;
    left: 50%;
    content: "";
    display: block;
    position: absolute;
    border: 2px solid var(--color4);
    transform: translate(-50%, -50%);
    -webkit-animation: zoombig 3.25s linear infinite;
    animation: zoombig 3.25s linear infinite;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    border-radius: 50%;
    height: 170px;
    width: 170px;
    z-index: 0;
}

@-webkit-keyframes zoombig {
    0% {
        transform: translate(-50%, -50%) scale(0.5);
        opacity: 1;
        border-width: 3px;
    }
    40% {
        opacity: .5;
        border-width: 3px;
    }
    65% {
        border-width: 2px;
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0;
        border-width: 2px;
    }
}


.weAreimg1 {
    left: 0;
    position: absolute;
    bottom: 30px;
}
.weAreimg1 img{
   border-style: solid;
    border-width: 10px 10px 10px 10px;
    border-color: #FFFFFF;
    border-radius: 10px;
}
.weAreimg2 {width: 67%}
.weAreimg2 img{width: 100%}

@media screen and (max-width: 1200px) {
.weAreimg1 img {
    max-width: 240px;
}
}
@media screen and (max-width: 1023px) {
.weAre,.weAreRit {
    gap: 50px;
    flex-wrap: wrap;
}
    .weAreRit ,.weAreLft,.weArebtn,.weAreimg2,.weAreimg1,.weAreimg1 img{
    width: 100%;
}

    .weAreimg1 {
    position: relative;
    bottom: 0;
}
        .weAreimg1 img {
        max-width: 100%;
    }
.weArebtn a {
    margin-top: 30px;
    margin-bottom: 50px;
}
}



/********************************/
/*******      section 3      *******/
/********************************/

.counterItems {
    display: flex;
    justify-content: space-between;
    border: 1px solid #EBEBEB;
    
}

.counterItem {
    gap: var(--gap-15);
    text-align:center;
    align-items: center;
    border-right: 1px solid #EBEBEB;
    padding: var(--gap-50) var(--gap-30);
    background: #FDFDFD;
    display: flex;
    width: 25%;
}
.counterItem:last-child {border-right: 0px solid #EBEBEB}
.counterImg {
    width: var(--gap-90);
    height: var(--gap-90);
    display: flex;
    align-items:center;
    border-radius: var(--gap-10);
    justify-content: center;
    background: var(--color2);
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1)
}

.counter-value {
    font-weight: 600;
    position: relative;
    font-size: 2.222em;/*40*/
    color: var(--color3);
    margin-bottom: 5px;
    line-height: 1;
}
.counterTxt {
    font-size: 0.833em;/*15*/
    font-weight: 500;
}
/*
 .counterItem .counter-value::after {
    content: "+";
    display: inline-block;
  }
*/
.counterItem:nth-child(2) .counter-value::after {
    content: "%";
    display: inline-block;
  }
.counterItem:nth-child(4) .counter-value::after {
    content: "$";
    display: inline-block;
  }
@media screen and (max-width: 1023px) {
    .counterItems {
    flex-wrap: wrap;
}
.counterItem {
    width: 50%;
}
}
@media screen and (max-width: 767px) {
.counterItem {
    width: 100%;
}
}
/********************************/
/*******      section 4      *******/
/********************************/


.solutions {
    display: flex;
    justify-content: space-between;
    margin-top: 130px;
    gap: var(--gap-30);
}

.solution {
    width: 50%;
    overflow: hidden;
    position: relative;
    transition: all .5s ease;
    border-radius: var(--gap-15);
    z-index: 9;
}
.solution::after {
    left: 0;
    z-index: 1;
    content: "";
    background: #000;
    position: absolute;
    transition: all .5s ease;
    height: 100%;
    width: 100%;
    opacity: 0;
    top: 0;
}
.solution:hover::after {opacity: .9}
.solution:nth-child(2){transform: translateY(-30px) translate3d(0, -30px, 0)}
.solutionText {
    bottom: 0;
    padding: var(--gap-60);
    margin-bottom: -200px;
    transition: all .5s ease;
    position: absolute;
    text-align: left;
    z-index: 2
}
.solution:hover .solutionText{margin-bottom: 0}

.solutionImg {line-height: 0}

.solutionText h3 {color: #fff}

.solutionText p {color: #fff}
.solutionImg img {width: 100%}
.solutionText h3 {
    position: relative;
    padding: 0 0 0 var(--gap-15);
    transition: all .5s ease;
    margin-bottom: var(--gap-50);
    font-size: 1.389em;/* 25*/

}
.solution:hover .solutionText h3 {margin-bottom: 25px}
.solutionText h3::after {
    left: 0;
    top: 50%;
    content: "";
    position: absolute;
    background: linear-gradient(-160deg, #43baff 0%, #7141b1 100%);
    transform: translateY(-50%);
    height: 46px;
    width: 3px;
}

.learnMore {
    bottom: var(--gap-30);
    position: relative;
    transform: translate(-50%);
    left: 50%;
}

.learnMore a {
    color: var(--color);
    text-decoration: none;
    transition: all .5s ease;
    position: relative;
    cursor: pointer;

}
.learnMore a strong {
    position: relative;
    color: var(--color3);
    transition: all .3s ease;
    padding-right: var(--gap-20);
}
.learnMore a strong::after {
    top:50%;
    right: 0;
    content: "";
    position: absolute;
    background: url(../images/arrow-right.png);
    transform: translateY(-50%);
    transition: all .3s ease;
    z-index: 999;    
    height: 9px;
    width:15px;
}
.learnMore a:hover strong::after {right: -5px}

@media screen and (max-width: 1023px) {
.solutions {
    margin-top: 50px;
    flex-wrap: wrap;
}
    .solution {
    width: 100%;
}
    .solution:nth-child(2) {
    transform: inherit;
}
  .solutionText {
    bottom: 0;
    padding: 40px;
    margin-bottom: 0;
}  
}














.testmonials {
    margin-top: var(--gap-40);
}
.testmonial {
    position:relative;
    background: #ffffff;
    border-radius: 10px;
    margin: var(--gap-20) var(--gap-40);
    box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.09);
    display: flex !important;
    align-items: center;
    text-align: left;
}

.testmonialimg {
    left: -7%;
    top: -20px;
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    z-index: 3;
}
.testmonialimg  img {
    border-radius: 10px;
}
.testmonialimg::before {
    top: 0;
    width:100%;
    content: "";
    position: absolute;
    background: var(--color3);
    transform: translate(5px, 5px);
    border-radius: 10px;
    height: 100%;
    z-index:-1;
    left: 0;
}

.testmonialTxt {
    padding: var(--gap-40) 0px;
    padding-right: var(--gap-40);
}

.quote-icon {
    display: inline-block;
}
.quote-icon svg {
    fill:var(--color3);
}
.testmonialTxt p{
    margin-bottom: 15px;
}
.testmonialTxt span {
    font-size: 16px;
    line-height: 20px;
    color:var(--color);
    
}





.slick-dots button {
display: none
}


.slick-dots{
	width:100%;
	list-style:none;
	justify-content:center;
    gap: 16px;
	align-items:center;
	display:flex;
	padding:0;
	margin:20px 0 0;
}
.slick-dots li{
    background-color: #e8e8e8;
    width: 6px;
    height: 6px;
	border-radius:50%;
	cursor:pointer;
	line-height:0;
	font-size:0;
	border:none;
    position: relative
}


.slick-dots li::after {
    content: "";
    position: absolute;
    left: -8px;
    top: -8px;
    border: 1px solid #57585a;
    transform: scale(0);
    width: calc(100% + 14px);
    height: calc(100% + 14px);
    border-radius: 50%;
    transition: all 0.3s linear;
}
.slick-dots li.slick-active::after {
    transform: scale(1);
}
.slick-dots li.slick-active {
    background-color: var(--color3);
    position: relative
}




.section6 .serviceBoxs {
    flex-wrap: wrap;
    margin-top: var(--gap-60)
    

}
.section6 .serviceBox {
    width: calc(50% - 15px);
    align-items: center;
    justify-content: center

}
.section6 .serviceBox img{
     transition: all .3s ease;
}
.section6 .serviceBox:hover img{
    transform: scale(1.1);
}



.section7 {
background: #010F31
}
.section7 h2,.section7 p {
color: var(--color2);
}
.section7 .container{
    max-width: 100%;
    padding: 0;
    width: 100%
}
.fulHead {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 15px
}
.skill {
    box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.09);
    padding: 20px;
    margin: 10px;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}
.skill img{
border-radius: 10px;
    transition: all .3s ease;
}
.skill:hover img{
    transform: scale(1.1);
}





/**/


.boxBig {
    position: relative;
    background-image: linear-gradient(90deg, #03c4eb 0%, #7141B1 100%);
    border-radius: 10px;
    padding: var(--gap-50) var(--gap-60);
    z-index: 2;
    margin-top: -100px;
}
.join {
    display: flex;
    gap: var(--gap-50);
    justify-content: space-between;
    align-items: center;
}

.headPhon {
    width: 120px;
    height: 120px;
    background: #010F31;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    position: relative;
    margin-top: -110px;
}

.joinHed {
    width: 33%;
}
.joinHed h2{
    color: var(--color2);
    font-size: 2.222em;/*40*/

}

.joinForm {
    width: 45%;
}
.inputBoxs {
    display: flex;
}
.joinForm .commonBtn {
    border-radius: 0 5px 5px 0;
    cursor: pointer;
    text-align: center;
    justify-content: center;
    display: flex;
}
input,textarea {
    border-radius: 5px;
    border: 1px solid #ebebeb;
    background-color: #ffffff;
    font-family:  var(--cmnfont);
    transition: all 0.3s linear;
    font-size: 16px;
    padding: var(--gap-20) var(--gap-25);
    color: #415674;
    max-width: 100%;
    width: 100%;
}
.joinForm input {
    border-radius: 5px 0 0 5px;
}











.contactSection {
    position: relative;
    z-index: 2;
    background: #F8F8F8;
    padding: 100px 0 230px;
}
.contact {
    display: flex;
    justify-content: space-between;
    margin-top: 100px;
    gap: 150px;
}



.address,
.contactForm {
    width: 50%;
}

.address {
    text-align: left;
}

.address p {
    margin-top: var(--gap-30);;
}




.contact h3 {
    font-size: 2.000em;/*36*/
    color: var(--color1);

}

.address-box {
    margin-top: var(--gap-50);;
}

.address-contact {
    display: flex;
    gap: 18px;
    margin-top: var(--gap-30);;
    align-items: center;
}

.address-contact p {
    margin: 0;
}

.addImg {
    width: 50px;
    height: 50px;
    background-image: linear-gradient(195deg, var(--color3) 0%, var(--color4) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.addImg img {
    width: 22px;
}

.address-content a {
    color: var(--color);
    text-decoration: none;
    line-height: 1.5;
}


.contactForm {
    padding: var(--gap-50);;
    text-align: left;
    box-shadow: 0px 2px 15px 0px rgba(0, 0, 0, 0.09);
    border-radius: 15px;
    background: #fff;
}
.contactForm input{
   margin-bottom: var(--gap-20);
}
.contactForm .commonBtn {
    width: 100%;
    margin-top: var(--gap-20);;
}

.footerArea{
    background: #111;
    text-align: center;
    padding: 180px 0 50px;
    position: relative;
    margin-top: -100px;
}
.footerArea .socialIcon {
    justify-content: center;
    padding: 20px 0 80px;
    position: relative;
}
.footerArea .socialIcon::after {
    left: 0;
    content: "";
    position: absolute;
    background: linear-gradient(-160deg, #43baff 0%, #7141b1 100%);
    height: 1px;
    width: 100%;
    bottom: 0;
}
.footerArea .socialIcon a img {
    width: 40px;
}
.footerArea p {
    color: var(--color2);
    margin-top: 30px;
}
.footerArea h3 {
     color:var(--color2); 
    font-size: 30px;
}

@media screen and (max-width:1280px) {
    .contact {
    gap: 50px;
}
}
@media screen and (max-width: 1023px) {
    .contact {
    gap: 30px;
}
}
@media screen and (max-width: 767px) {
.contact {
    margin-top: 50px;
    gap: 50px;
    flex-wrap: wrap;
}
    .address, .contactForm {
    width: 100%;
}
}