@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');



:root{

    --black : #101010;

    --white : #fff;

    --blue :#0085FE;

    --sky : #F1F8FF;

    --golden : #60D497;

    --green : #175B71;

    --grey : #F5F5F5;

    --red : #d61313

}



*{

    font-family: 'Poppins', sans-serif;

    border: none;  outline: none;

    list-style: none;

    text-decoration: none;

    text-transform: capitalize;

    box-sizing:  border-box;

}



*::selection{

  background-color: var(--green);

  color: var(--white);

}



*:focus {

    outline: none;

}



body , html{

    overflow-x: hidden;

    scroll-behavior: smooth;

}



body::-webkit-scrollbar , .box-mobile::-webkit-scrollbar {

    width: 8px;

}



body::-webkit-scrollbar-track  , .box-mobile::-webkit-scrollbar-track{

    box-shadow: inset 0 0 6px #fff;

}



body::-webkit-scrollbar-thumb , .box-mobile::-webkit-scrollbar-thumb  {

    background-color:  var(--golden);

    outline: 1px solid var(--golden);

}

.relative{

    position: relative;

}

.absolute{

    position: absolute;

}



a , a:hover{

    text-decoration: none;

}

ul{

  padding: 0;

  margin: 0;

}

h1,h2,h3,h4,h5,h6,p,ul,span{

    margin-bottom: 0;

}

img{

    max-width: 100%;

    height: auto;

}



span,a,li,p {

    font-size: 16px;

    margin-bottom: 0;

}



.container{

    max-width: 1170px

}



section{

    padding: 80px 0;

}

.bilink{



    animation: red-hover 500ms infinite alternate;

}

@keyframes red-hover{

    0%{  color: var(--black); background-color: var(--golden);}

    100%{ color: var(--white);};

}

.img-bilibk{

    animation: blinker 1s linear 0s infinite normal none running;

}

@keyframes blinker {

    0% {

        opacity: 1;

    }



    49% {

        opacity: 1;

    }



    60% {

        opacity: 0;

    }



    99% {

        opacity: 0;

    }



    100% {

        opacity: 1;

    }



}

.f-17{

    font-size: 17px;

}



.f-30{

    font-size: 30px;

}

.f-70{

    font-size: 70px;

}

.f-25{

    font-size: 25px;

}

.f-22{

    font-size: 22px;

}

.f-20{

    font-size: 20px;

}

.f-60{

    font-size: 60px;

}

.f-40{

    font-size: 40px;

}

.f-36{

    font-size: 36px;

}

.fw-100{

    font-weight: 100;

}

.fw-200{

    font-weight: 200;

}

.fw-300{

    font-weight: 300;

}



.fw-400{

    font-weight: 400;

}

.fw-500{

    font-weight: 500;

}

.fw-600{

    font-weight: 600;

}

.fw-700{

    font-weight: 700;

}

.fw-800{

    font-weight: 800;

}

.fw-900{

    font-weight: 900;

}

.text-white{

    color: var(--white);

}

.bg-blue{

    background-color: var(--golden);

}

.bg-sky{

    background-color: var(--sky);

}

.bg-black{

    background-color: var(--black);

}

.text-blue{

    color: var(--golden);

}

.text-golden{

    color: var(--golden);

}
.lowercase{
    text-transform: lowercase;
}

.text-green{

    color: var(--green);

}   

.header {

    position: absolute;

    left: 0;

    right: 0;

    top: 3%;

    padding-top: 0;

}

.header ul li:nth-child(2) {

    margin-left: auto;

}

.secondary-btn-wrap {

    font-size: 16px;

    font-weight: 500;

    background-color: var(--black);

    color: var(--white);

    padding: 10px 20px;

    border-radius: 3px;

    border: 1px solid transparent;

    display: block;

}

.secondary-btn-wrap:hover {

    color: var(--golden);

    background: transparent;

    border: 1px solid var(--golden);

}



.primary-btn-wrap {

    font-size: 16px;

    font-weight: 500;

    background-color: var(--golden);

    color: var(--white);

    padding: 10px 25px;

    border-radius: 3px;

    border: 1px solid transparent;

    display: block;

}

.banner-wrap h3,
.banner-wrap ul,
.banner-wrap h1,
.banner-wrap span,
.banner-wrap p{
    color: white;
}

.primary-btn-wrap:hover {

    background-color: transparent;

    color: var(--golden);

    border: 1px solid var(--golden)

}

.banner-wrap{
    background: url(../../assets/images/banner-bg.webp) center center / cover  no-repeat;

    padding-top: 160px;

    padding-bottom: 230px;
    background-position: top;
}

.banner-wrap h1 span {

    font-size: 70px;

    font-weight: 700;

    line-height: 75px;

    display: block;

}

.banner-wrap .list {

    display: grid;

    grid-template-columns: auto auto;

    width: max-content;

    row-gap: 7px;

    column-gap: 30px;

    font-size: 22px;

    margin: 18px 0;

}



.banner-wrap .list li {

    font-size: 22px;

    font-weight: 500;

}

.counter ul {

    display: flex;

    gap: 50px;

    background-color: var(--golden);

    padding: 15px 40px;

    border-radius: 20px;

    max-width: max-content;



}



.counter ul li span {

    font-size: 60px;

    font-weight: 700;

    color: var(--white);

    line-height: 1;

}

.counter p {

    font-size: 17px;

    color: var(--white);

    text-align: left;

}

.counter ul li span:nth-child(2) {

    padding-left: 10px;

}

section.banner-lead-form .container {

    background-color: #2D2D2D;

    border-radius: 10px;

    padding: 45px 60px;

}

.banner-lead-form a {

    color: var(--white);

    padding: 5px 0 10px 0;

    display: block;

}



.banner-lead-form a:hover {

    color: var(--golden);

}

.banner-lead-form input {

    width: 500px;

    height: 48px;

    color: #000;

    padding-left: 15px;

    font-size: 16px;

    margin-bottom: 10px;

    border-radius: 3px;

}

.banner-lead-form textarea {

    width: 500px;

    height: 107px;

    border-radius: 3px;

    background-color: var(--white);

    padding: 20px;

    font-size: 16px;

    color: #000;

}

.banner-lead-form button {

    font-size: 20px;

    font-weight: 600;

    color: var(--white);

    background-color: var(--golden);

    width: 500px;

    height: 48px;

    border-radius: 3px;

}



.banner-lead-form button:hover {

    background-color: var(--white);

    color: var(--golden);

}

.banner-lead-form {

    margin-top: -200px;

}

.banner-wrap .banner-img {

    position: relative;

    top: 30px;

    max-width: 700px;

    width: auto;

}

.banner-wrap .after-circle-img {

    position: absolute;

    top: 23%;

    left: -1%;

    max-width: 543px;

    animation: filter-animate 1s infinite alternate;

    width: 570px;

    height: 570px;

    background-color: var(--golden);

    clip-path: circle();

}

.header-after-info .list {

    display: grid;

    grid-template-columns: auto auto;

    margin-left: 16px;

    margin-top: 10px;

}



.header-after-info .list li {

    list-style: disc;

    line-height: 28px;

    font-weight: 500;

}

.header-after-info .btn-wrap li a {display: block;margin-top: 20px;margin-bottom: 30px;}

.header-after-info img:nth-child(1) {

    position: absolute;

    left: 0;

}
.header-after-info{
    background: url(../../assets/images/header-after-bg.webp) center center / cover  no-repeat;
}

.header-after-info img:nth-child(2) {

    position: absolute;

    right: 10%;

}

.platforms{

    background: url(../../assets/images/platform-bg.webp) center center / cover  no-repeat;

}

.header-after-info .btn-wrap li:nth-child(1) a {

    padding: 10px 18px;

    background-color: var(--black);

    display: block;

}

.header-after-info .btn-wrap li:nth-child(1) a:hover , .portfolio-tabs .secondary-btn-wrap:hover{

    background-color: var(--golden);

    color: var(--white);

    border: 1px solid transparent;

}

.header-after-info .btn-wrap li:nth-child(2) a {

    padding: 10px 35px;

}
.bg-grey{
    background-color: #E7E7E7;
}
.after-portfolio-info{
    background: url(../../assets/images/after-portfolio-bg.webp) center right / contain no-repeat;
}

.cta-wrap{

    background: url(../../assets/images/cta-bg.webp) center center / cover  no-repeat;
    background-position: left;
    padding: 70px 0;

}

.portfolio-content img {

    max-width: 370px;

    height: auto;

}

section.cta-wrap img {

    position: absolute;

    top: 0;

}

.cta-wrap .secondary-btn-wrap {

    background-color: var(--black);

    color: var(--white);

}



.cta-wrap .secondary-btn-wrap:hover {

    background-color: transparent;

    color: var(--white);

    border-color: var(--white);

}



.cta-wrap .primary-btn-wrap {

    background-color: var(--white);

    color: var(--black);

}



.cta-wrap .primary-btn-wrap:hover {

    border-color: var(--white);

    color: var(--golden);

}

.cta-wrap .cta-after-img  {

    position: absolute;

    right: 10%;

    top: -7%;

}

.portfolio-content {

    display: grid;

    grid-template-columns: auto auto auto;

    max-width: max-content;

    margin: auto;

    column-gap: 30px;

    row-gap: 30px;

}

.portfolio-tabs .nav {

    justify-content: center;

    background-color: var(--golden);

    max-width: 1170px;

    margin: auto;

    height: 50px;

    border-radius: 5px;

    margin-bottom: 45px;

    margin-top: 25px;

}



.portfolio-tabs .nav button {

    font-size: 16px;

    font-weight: 600;

    color: var(--white);

    padding: 0px 33.9px;

}

.portfolio-tabs .nav button:hover{

    border-color: var(--golden)

}

.portfolio-tabs .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {

    background-color: var(--black);

    border-color: var(--golden);

    border-radius: 0;

    padding: 0px 33.9px;

    color: var(--white);

    border-radius: 5px;

}

.portfolio-tabs .secondary-btn-wrap {

    background-color: var(--black);

    padding: 10px 60px;

}



.portfolio-tabs .primary-btn-wrap {

    padding: 10px 70px;

}

.box-content {

    width: 270px;

    height: 195px;

    background-color: #F5F5F5;

    color: var(--white);

    padding: 20px 20px;

    margin-bottom: 10px;

    border-radius: 20px;

    color: var(--black);

}

.box-content p {

    font-weight: 300;
    line-height: 20px;
    margin-top: 10px;
    height: 104px;
    overflow-y: scroll;
    padding-right: 10px;
    font-size: 14px;

}

.box-content:hover {

    color: var(--white);

    background-color: var(--golden);

}

.box-content p::-webkit-scrollbar , 

.testimonial-slider p::-webkit-scrollbar {

    width: 1px;

}



.box-content p::-webkit-scrollbar-track  , 

.testimonial-slider p::-webkit-scrollbar-track{

box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);

}



.box-content p::-webkit-scrollbar-thumb , 

.testimonial-slider p::-webkit-scrollbar-thumb {

background-color: var(--white);

outline: 1px solid var(--white);;

}

.portfolio-img {

    position: absolute;

    bottom: 0;

}

.portfolio-before-shape {

position: absolute;

    left: 5%;

    top: 30%;  

    animation: image-animate 1s infinite alternate;

 

}

.testimonial input::placeholder

{

    color: white!important;

}

@keyframes image-animate{

    0%{transform: translateY(-40px)};

    100%{transform: translateY(0)};

}

.testimonial .row .col-lg-6:nth-child(1) {

    background: url(../../assets/images/form-bg.webp) center center / cover  no-repeat;
    padding: 55px 30px;

}

.testimonial  h4 {

    text-transform: none;

    padding-right: 10px;

}



.testimonial  input {

    display: block;

    width: 100%;

    height: 40px;

    background-color: transparent;

    color: var(--white);

    border-bottom: 1px solid var(--white);

    margin-bottom: 35px;

    font-size: 15px;

}

.testimonial label {

    font-size: 14px;

    color: var(--white);

}



.testimonial  form {

    margin-top: 30px;

}

.testimonial button {

    padding: 10px 25px;

    border-radius: 5px;
    background-color: var(--golden);

}

.testimonial button:hover {

    background-color: var(--black);

    color: var(--white);

}

.testimonial .slide {

    max-width: 570px;

    height: 200px;

    background-color: var(--grey);

    padding: 40px 25px 50px 25px;

    position: relative;

    margin-top: 30px;

}

.testimonial .slide svg {

    position: absolute;

    top: -20px;

    font-size: 40px;

    color: var(--golden);

}

.testimonial .p-55 {

    padding: 55px 45px;

}

.testimonial{

    background: url(../../assets/images/testi-bg.webp) center right / contain  no-repeat;

}

.footer{

    background: url(../../assets/images/platforms-bg.webp) center right / cover  no-repeat;

}

.footer ul li:nth-child(1) a {

    font-size: 18px;

    font-weight: 600;

    padding: 10px 30px;

    display: block;

    width: max-content;

    color: var(--black);

    border-radius: 5px;
    background-color: var(--white);

}



.footer ul li:nth-child(1) a:hover , .footer ul li:nth-child(2) a:hover {

    background-color: var(--black);

    color: var(--white);

}

.footer ul li:nth-child(2) a {

    font-size: 18px;

    font-weight: 600;

    color: var(--white);
    background-color: var(--black);

    padding: 10px 15px;

    border-radius: 5px;

    margin-top: 25px;

    display: block;

    width: max-content;

}

.banner-lead-form img:nth-child(1) {

    position: absolute;

    right: 12%;

    top: 0;

}

@keyframes filter-animate{

    0% {

        transform: matrix(1.1, 0, 0, 1.1, 0, 0);

    }

    100% {

        transform: matrix(1, 0, 0, 1, 0, 0);

    }

}



.slick-dots li button {

    width: 10px;

    height: 10px;

    background-color: var(--golden);

}

li.slick-active button {

    background-color: var(--black);

}

.slick-dots li button:before {

    display: none;

}

.testimonial  .slick-dots li{

    display: block;

}

.testimonial li.slick-active button {

    background-color: var(--black);

    border-radius: 0;

    width: 15px;

    height: 15px;

}

.testimonial .slick-dots li button {

    border-radius: 0;

    width: 15px;

    height: 15px;

}

.testimonial .slick-dots {

    display: inline-flex;

    flex-direction: column;

    gap: 15px;  

    display: inline-flex;

    flex-direction: column;

    gap: 15px;

    bottom: 169px;

    margin-left: 600px;

}
.sec-footer {
    margin-bottom: 55px;
}
.sec-footer a {
    color: white;
    padding: 0 10px;
}

.sticky-slider a{display:block;width:100%;position:fixed;bottom:0;text-transform:uppercase;text-align:center;font-weight:600!important;border:0;cursor:pointer;color:#fff!important;padding:15px 0;font-size:20px;margin:auto;border-radius:0;-webkit-transition:.1s linear;-moz-transition:.1s linear;-o-transition:.1s linear;-ms-transition:.1s linear;transition:.1s linear;background:#0c267a;float:none;left:0;right:0;animation:1.2s infinite blinkingText;z-index:1000}@keyframes blinkingText{0%{background:#da0d0b;color:#fff}100%,49%{background:#092338;color:#fff}60%{background:#da0c0a;color:#fff}99%{background:#092338}}