*{
    padding: 0px;
    margin: 0px;
}
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
@font-face {
  font-family: HelveticaNeue;
  src: url(../fonts/HelveticaNeue.ttf);
}
@font-face{
    font-family: HelveticaNeue-Medium;
    src: url(../fonts/HelveticaNeue\ Medium.ttf);
}
body{
    margin: 0px;
    padding: 0px;
    font-family: 'Roboto', sans-serif;
}
h1, h2, h3, h4, h5, h6{
    font-family: HelveticaNeue-Medium, HelveticaNeue;
    color: #000;
}
p{
    color: #000;
}
/* navbar  */
.hero-section{
    background-color: #000;
    height: auto;
}
.nav-logo{
    padding-left: 30px;
    padding-top: 18px;
}


/* hero section */
.hero-small-heading{
    color: #fff;
    font-size: 35px;
}
.hero-large-heading{
    color: #fff;
    font-size: 6em;
    line-height: 85px;
}
.hero-paragraph{
    color: #fff;
    font-size: 19px;
}
.hero-content-section{
    padding-top: 80px;
    padding-bottom: 100px;
}
.img-b{
    margin-left: -120px;
}
.hero-leftSide-text{
    position: absolute;
    color: #fff;
    font-size: 16px;
    transform: rotate(90deg);
    transform-origin: -8% -170%;
}
.hero-scroll{
    right: -50px;
    position: absolute;
}
.hero-rightSide-text{
    position: absolute;
    color: #fff;
    font-size: 19px;
    transform: rotate(90deg);
    transform-origin: 45% -100%;
    cursor: pointer;
}
.hero-rightSide-line{
    position: absolute;
    background-color: #fff;
    right: 5px;
    width: 2px;
    height: 135px;
    margin-top: 10px;
}


.cta {
  position: relative;
  margin: auto;
  padding: 19px 22px;
  transition: all 0.2s ease;
  text-decoration: none;
  top: 25px;
}
.cta:before {
  content: "";
  position: absolute;
  top: 5px;
  left: 0;
  display: block;
  border-radius: 28px;
  background: #fff;
  opacity: 0.1;
  width: 45px;
  height: 45px;
  transition: all 0.3s ease;
  text-decoration: none;
}
.cta span {
  position: relative;
  line-height: 18px;
  font-weight: 300;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  vertical-align: middle;
  color: #fff;
}
.cta svg {
  position: relative;
  top: 0;
  margin-left: 10px;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke: #fff;
  stroke-width: 2;
  transform: translateX(-5px);
  transition: all 0.3s ease;
}
.cta:hover:before {
  width: 100%;
  background: #fff;
  opacity: 0.1;
}
.cta:hover svg {
  transform: translateX(0);
}
.cta:hover{
    text-decoration: none;
}
.cta:active {
  transform: scale(0.96);
}


/* second section what we are */

.section-two{
    background-color: #fff;
}
.section-two-content{
    margin: 100px 0px;
}
.cta-second span{
    color: #000;
}
.cta-second svg{
    stroke: #000;
}
.cta-second:before{
    background: #000;
}
.cta-second:hover:before{
    width: 100%;
    background: #000;
    opacity: 0.1;
}
.section-two-heading{
    font-size: 75px;
}
.section-two-paragraph{
    font-size: 19px;
}

.img-l{
    margin-left: 117px;
}


/* section three */

.section-three{
    padding: 70px 0px;
}
.section-three-heading{
    font-size: 75px;
}
/* card  */
.collapsed h3{
    color: #000 !important;
}
.collapsed:hover{
    text-decoration: none !important;
}
.accordion-sign{
    font-size: 22px;
    float: right;
    font-weight: normal;
}
.card-header .mb-0 a:hover{
    text-decoration: none;
}
.card {
    -moz-box-direction: normal;
    -moz-box-orient: vertical;
    background-color: #fff;
    border-radius: 0.25rem;
    display: flex;
    flex-direction: column;
    position: relative;
    margin-bottom:1px;
    border:none;
}
.card-header:first-child {
    border-radius: 0;
}
.card-header {
    background-color: #fff;
    margin-bottom: 0;
    border:none;
    padding: 0.2rem 1.25rem;
}
.card-header a i{
    float:left;
    font-size:25px;
    padding:5px 0;
    margin:0 25px 0 0px;
    color: #000;
}
.card-header i{
    float:right;        
    font-size:30px;
    width:1%;
    margin-top:8px;
    margin-right:10px;
}
.card-header a{
    width:55%;
    float:left;
    color:#000;
}
.card-header p{
    margin:0;
    font-weight: bold;
    font-size: 19px;
}
.card-header h3{
    margin:0 0 0px;
    font-size:20px;
    color:#000;
    text-decoration: none;
}
.card-block {
    -moz-box-flex: 1;
    flex: 1 1 auto;
    padding: 20px;
    color:#232323;
    border-radius:0;
}

/* section four */

.section-four{
    background-color: #000;
    height: auto;
    padding: 100px 0px;
}
.section-four-heading{
    color: #fff;
    font-size: 75px;
}
.section-four-paragraph{
    color: #fff;
    font-size: 19px;
}

/* section five */
.section-five{
    padding-top: 120px;
}
.section-five-links{
    padding-top: 60px;
}
.img-a{
    margin-left: -120px;
    width: 50%;
}
.canvas-a{
    margin-left: -300px;
    margin-top: -150px;
}

.img-a-canvas{
    display: none;
}

.section-five:hover .img-a-section{
    display: none;
}
.section-five:hover .img-a-canvas{
    display: block;
}


.section-five-heading{
    color: #fff;
    font-size: 75px;
    padding-top: 110px;
}
.technical-list li{
    list-style: none;
    line-height: 30px;
    font-size: 19px;
}
.technical-list li a:hover{
    color: #fff;
    text-decoration: none;
    border-bottom: 2px solid #fff;
}
.tech-detail{
    color: #fff;
}

/* section six */
.section-six-content{
    padding-top: 100px;
}
.section-six-heading{
    font-size: 75px;
}
.img-n{
    margin-left: 297px;
    width: 60%;
}

/* carousel indicators */
.carousel-indicators .active{
    width: 50px;
}

/* slide one */
.slider-section{
    margin-top: 70px;
}
.bg-pink{
    height: 500px;
    background-color: #E0246B;
}
.bg-mango{
    height: 500px;
    background-color: #FDC861;
}
.bg-blue{
    height: 500px;
    background-color: #0EACDB;
}
.bg-purpel{
    height: 500px;
    background-color: #BE00CE;
}
.bg-green{
    height: 500px;
    background-color: #C8DE15;
}
.slide-one-g{
    position: absolute;
    width: 40%;
    top: -180px;
    left: -58px;
}
.half-circle{
    position: absolute;
    width: 50%;
    top: 95px;
    left: 170px;
}
.branding-info{
    margin-left: 30px;
}
.slide-one-laptop{
    position: absolute;
    width: 60%;
    top: 140px;
    left: 127px;
}
.slide-one-heading{
    font-size: 6em;
    margin-top: 130px;
    margin-left: -155px;
}
.light-text{
    color: #fff;
}
.slide-two-s{
    position: absolute;
    width: 28%;
    top: -180px;
    left: -53px;
}
.slide-two-mobile{
    position: absolute;
    width: 35%;
    top: 125px;
    left: 210px;
}
.second-half-circle{
    position: absolute;
    width: 43%;
    top: 130px;
    left: 155px;
}
.slide-three-d{
    position: absolute;
    width: 28%;
    top: -185px;
    left: -48px;
}
.slide-three-branding{
    position: absolute;
    width: 68%;
    top: 125px;
    left: 115px;
}
.slide-four-c{
    position: absolute;
    width: 28%;
    top: -202px;
    left: -45px;
}
.slide-four-mobile{
    position: absolute;
    width: 39%;
    top: 110px;
    left: 198px;
}
.slide-five-o{
        position: absolute;
    width: 28%;
    top: -207px;
    left: -42px;
}
.slide-five-ui{
    position: absolute;
    width: 70%;
    top: 85px;
    left: 100px;
}

/* business slider */
.img-k{
    width: 20%;
    margin-left: -15px;
}
.business-heading{
    position: absolute;
    font-size: 75px;
}
.business-slider{
    position: absolute;
    margin-top: 200px;
    margin-left: 100px;
}
.slider-left-arrow{
    position: relative;
    margin-top: 50px;
    margin-left: 910px;
    width: 11%;
}
.slider-right-arrow{
    position: relative;
    margin-top: 0px;
    margin-left: 945px;
    width: 11%;
}
.slide-one-detail{
    margin-left: 55px;
}
.business-one-content{
    font-size: 19px;
}
.business-one-content li{
    list-style: none;
}
.slide-img-one{
    width: 60%;
}
.slide-img-two{
    width: 39%;
}
.slide-business-one{
    position: relative;
    top: 360px;
    left: 10px;
    color: #fff;
}


/* client testimonials style */
.client-testimonials{
    padding-top: 350px;
}
.img-s{
    width: 50%;
    margin-left: 389px;
}
.client-slider{
    margin-top: -270px;
}
.client-message{
    font-size: 19px;
}
.client-name{
    font-size: 19px;
}
.client-job{
    font-size: 19px;
}
.slider-indicators{
    justify-content: start;
    margin-left: 8%;
}
.slider-indicators li .active{
    color: #000;
}
.slider-indicators li{
    background-color: #000;
}
.quote-size{
    width: 8%;
}
.team-section{
    background-color: #000;
    margin-top: 100px;
}
.small-l{
    width: 17%;
}
.team-heading{
    margin-top: -195px;
    color: #fff;
    font-size: 75px;
}
.team-list{
    padding: 50px 0px;
}
.team-name{
    color: #fff;
    margin-top: 20px;
}
.job-role{
    color: #fff;
    font-size: 19px;
}

/* Insight Section */
.small-a{
    width: 50%;
    margin-left: 389px;
}
.latest-insight-heading{
    font-size: 75px;
    padding-top: 170px;
}
.blog-row-one{
    margin-top: -120px;
}
.blog-img-container{
    overflow: hidden;
}
.blog-one-img{
    transition: transform 2s, filter 1.5s ease-in-out;
    transform-origin: center center;
}
.blog-one-img:hover{
    transform: scale(1.3);
}
.blog-link{
    color: #000;
}
.blog-link:hover{
    text-decoration: none;
    color: #000;
}
.blog-detail{
    margin-top: 20px;
}
.blog-detail p{
    font-size: 19px;
}

/* info section */

.info{
    background-color: #000;
    margin-top: 150px;
    padding: 100px 0px 150px 0px;
}
.img-t{
    position: absolute;
    width: 17%;
}
.white-quote{
        width: 10%;
    }
.info-section{
    margin-top: 90px;
}
.info-heading{
    color: #fff;
    font-size: 65px;
}

.business-inqury{
    margin-bottom: 0px;
    font-size: 19px;
}
.starting-date{
    font-size: 19px;
}

/* contact us */
.contact-us{
    padding: 100px 0px;
}
.contact-container{
    margin-top: 100px;
}
.contact-heading{
    font-size: 75px;
}
.contact-right-arrow{
    padding-left: 180px;
    padding-top: 35px;
}
.img-e{
    margin-left: 119px;
}
.contact-mail a{
    color: black;
    border-bottom: 3px solid #000;
}
.contact-mail a:hover{
    text-decoration: none;
    color: #000;
}

/* Footer Section */

.footer-section{
    background-color: #000000;
}
.footer-row{
    padding: 100px 0px;
}
.footer-heading{
    color: #fff;
}
.footer-paragraph{
    color: #fff;
    margin-top: 15px;
    font-size: 18px;
}
.footer-social-icon{
    padding-left: 20px;
}
.footer-small-heading{
    color: #fff;
    font-size: 21px;
}
.footer-quick-links li{
    text-decoration: none;
    list-style: none;
}
.footer-pages-links{
    padding-left: 60px;
}
.footer-quick-links{
    margin-top: 35px;
    font-size: 18px;
}
.footer-quick-links li a{
    color: #fff;
    line-height: 35px;
}
.footer-quick-links li a:hover{
    text-decoration: none;
    color: #fff;
}
.contact-detail{
    color: #fff;
    margin-top: 35px;
}
.footer-phone, .footer-mobile, .footer-mail, .office-address{
    color: #fff;
    font-size: 19px;
}
.footer-phone:hover, .footer-mobile:hover, .footer-mail:hover {
    color: #fff;
    text-decoration: none;
    border-bottom: 2px solid #fff;
}
.footer-copyright{
    color: #fff;
    font-size: 19px;
}
.scroll-up{
    right: 0px;
    float: right;
    border: none;
    border-radius: 100%;
    padding: 10px;
    position: absolute;
    bottom: 30px;
    outline: none;
    opacity: 0.4;
}
.scroll-up:focus{
    outline: none;
}
.scroll-up img{
    width: 40px;
}





/* blank slate branding for mobile */

.branding-mobile-view{
    display: none;
}






@media(min-width: 1440px){
    .img-b{
        margin-left: -140px;
    }
    .img-l{
        margin-left: 165px;
    }
    .img-a{
        margin-left: -165px;
    }
    .img-n{
        margin-left: 343px;
    }
    .img-s{
        margin-left: 435px;
    }
    .small-a{
        margin-left: 435px;
    }
    .img-e{
        margin-left: 165px;
    }
}

@media (min-width: 1440px){
.img-b {
    margin-left: -140px !important;
}}

@media(max-width: 1024px){
    .hero-large-heading{
        line-height: initial;
        font-size: 5em;
    }
    .hero-scroll{
        right: -10px;
        margin-top: -68px;
    }
    .client-testimonials{
        padding-top: 400px;
    }
    .img-b{
        margin-left: -52px;
    }
    .img-l{
        margin-left: 45px;
    }
    .hero-leftSide-text{
        transform-origin: -7% 60%;
    }
    .hero-rightSide-line{
        height: 158px;
    }
    .img-a{
        margin-left: -45px;
    }
    .img-n{
        margin-left: 195px;
    }
    .slider-left-arrow{
        margin-left: 765px;
    }
    .section-five-heading{
        padding-top: 50px;
    }
    .slider-right-arrow{
        margin-left: 800px;
    }
    .client-slider{
        margin-top: -200px;
    }
    
    .img-s{
        margin-left: 272px;
    }
    .business-slider{
        margin-top: 270px;
        margin-left: 40px;
    }
    .small-a{
        margin-left: 272px;
    }
    .latest-insight-heading{
        padding-top: 120px;
    }
    .info-section{
        margin-top: 50px;
    }
    .img-t{
        width: 20%;
    }
    .info-heading{
        font-size: 50px;
    }
    .img-e{
        margin-left: 47px;
    }
    .footer-mail{
        font-size: 17px;
    }
}
@media(max-width: 768px){
    .nav-logo{
        padding-left: 15px;
    }
    .hero-large-heading{
        font-size: 3em;
    }
    .hero-rightSide-line{
        height: 158px;
    }
    .section-two-content{
        margin: 80px 0px;
    }
    .section-two-heading, .section-three-heading, .section-four-heading{
        font-size: 55px;
    }
    .hero-small-heading{
        font-size: 25px;
    }
    .img-b{
        margin-left: -40px;
    }
    .hero-leftSide-text{
        display: none;
    }
    .section-five-heading{
        font-size: 55px;
    }
    .client-testimonials {
    padding-top: 490px;
    }
    .business-heading{
        font-size: 55px;
    }
    .card-header a{
        width: 100%;
    }
    .img-n{
        margin-left: 153px;
    }
    .img-k{
        width: 26%;
    }
    .scrollmagic-pin-spacer{
        height: auto !important;
    }
    .onScroll-slider-branding{
        height: auto !important;
    }
    .bg-pink, .bg-blue, .bg-green, .bg-mango, .bg-purpel{
        height: 300px;
    }
    
    .slide-one-heading{
        font-size: 4em;
        margin-top: 30px;
        margin-left: 0px;
    }
    .light-text{
        color: #000;
    }


    .slide-one-detail{
        padding-bottom: 45px;
    }
    .slide-img-two{
        width: 37%;
    }
    .slide-business-one{
        top: 220px;
        font-size: 30px;
    }
    .slider-left-arrow{
        margin-left: 600px;
    }
    .slider-right-arrow{
        margin-left: 600px;
    }
    .contact-mail{
        font-size: 30px;
    }
    .slide-one-g, .slide-two-s{
            top: -230px;
            left: -30px;
    }
    .slide-three-d{
            top: -236px;
            left: -25px;
    }
    .slide-four-c{
        top: -244px;
        left: -22px;
    }
    .slide-five-o{
            top: -247px;
            left: -20px;
    }
    .business-tab-section{
        margin-top: 50px;
    }
    .business-slider{
        margin-left: 0px;
    }
    .img-s{
        width: 35%;
        margin-left: 493px;
    }
    .client-slider{
        margin-top: -270px;
    }
    .team-heading{
        margin-top: -115px;
        margin-left: 20px;
        font-size: 50px;
    }
    .small-a{
        margin-left: 210px;
    }
    .latest-insight-heading{
        font-size: 48px;
        padding-top: 90px;
    }
    .blog-row-one{
        margin-top: -85px;
    }
    .img-t{
        width: 30%;
    }
    .contact-right-arrow{
    padding-left: 0px;
    padding-top: 45px;
    }
    .img-e{
        margin-left: 45px;
    }
    .footer-pages-links{
        padding-left: 15px;
    }
    .scroll-up{
        bottom: 70px;
    }
}
@media(max-width: 767px){
    .branding-full-view{
        display: none;
    }
    .branding-mobile-view{
        display: block;
    }
    .container{
        max-width: 100%;
    }
    .hide-img{
        display: none;
    }
    .section-five-heading{
        padding-top: 0px;
    }
    .section-six-content{
        padding-top: 75px;
    }
    .bg-pink, .bg-blue, .bg-green, .bg-mango, .bg-purpel{
        height: 500px;
    }
    .branding-info{
        padding-bottom: 50px;
    }
    .business-slider{
        position: static;
    }
    .slide-business-one{
        top: 480px;
        font-size: revert;
    }
    .client-testimonials{
        padding-top: 50px;
    }
    .client-slider{
        margin-top: 150px;
    }
    .team-heading{
        margin-top: 20px;
        margin-left: 0px;
    }
    .latest-insight-heading{
        padding-top: 50px;
    }
    .blog-row-one{
        margin-top: 20px;
    }
    .info{
        padding: 50px 0px;
    }
    .white-quote{
        width: 14%;
    }
    .info-section{
        margin-top: 0px;
    }
}
@media(max-width: 425px){
    .full-page-fixed{
        position: fixed;
    }
    .nav-logo{
        padding-left: 0px;
    }
    .hero-scroll{
        right: 5px;
    }
    .section-two-content{
        margin: 80px 0px;
    }
    .section-three{
        padding: 50px 0px;
    }
    .section-four{
        padding: 50px 0px;
    }
    .hero-content-section{
        padding-top: 50px;
    }
    .section-two-heading{
        font-size: 45px;
    }
    .section-three-heading{
        font-size: 45px;
    }
    .section-four-heading{
        font-size: 45px;
    }
    .section-five-heading{
        font-size: 45px;
    }
    .section-six-heading{
        font-size: 45px;
    }
    .business-slider{
        margin-top: 155px;
    }
    .bg-pink, .bg-blue, .bg-green, .bg-mango, .bg-purpel{
        height: auto;
    }
    .slide-one-heading{
        font-size: 3em;
    }
    .half-circle, .second-half-circle{
        display: none;
    }
    .slide-one-laptop, .slide-two-mobile, .slide-three-branding, .slide-four-mobile, .slide-five-ui{
        position: initial;
        width: 100%;
        top: auto;
        left: auto;
    }
    .slide-one-detail{
        margin-left: 0px;
    }
    .slider-left-arrow{
        margin-left: 220px;
        width: 23%;
    }
    .slider-right-arrow{
        margin-left: 220px;
        width: 23%;
    }
    .img-k{
        width: 48%;
    }
    .latest-insight-heading{
        font-size: 40px;
    }
    .business-heading{
        font-size: 45px;
    }
    .slide-business-one{
        top: 250px;
    }
    .team-heading{
        font-size: 40px;
    }
    .info{
        margin-top: 120px;
    }
    .info-heading{
        font-size: 40px;
    }
    .contact-us{
        padding: 50px 0px;
    }
    .contact-heading{
        font-size: 45px;
    }
    .contact-container{
        margin-top: 30px;
    }
    .contact-mail{
        font-size: 25px;
    }
    .footer-row{
        padding: 50px 0px;
    }
    .footer-pages-links{
        margin-top: 35px;
    }
    .scroll-up{
        bottom: 110px;
    }
}
@media(max-width: 375px){
    .hero-large-heading{
        font-size: 2.5em;
    }
    .slide-business-one{
        top: 210px;
        font-size: 20px;
    }
    .mobile-view{
        margin-top: 40px;
    }
    .info{
        padding: 20px 0px;
    }
    .info-heading{
        font-size: 30px;
    }
    .contact-mail{
        font-size: 22px;
    }
    .cta{
        font-size: 14px;
    }
}
@media(max-width: 320px){
    .lets-talk{
        margin-top: 10px;
    }
    .cta{
        padding: 19px 14px;
    }
    .business-heading{
        font-size: 40px;
    }
    .slider-left-arrow{
        margin-left: 160px;
        width: 35%;
    }
    .slider-right-arrow{
        margin-left: 160px;
        width: 35%;
    }
    .slide-business-one{
        top: 180px;
    }
    .cta-mobile{
    padding: 19px 2px;
    }
    .mobile-arrow{
        display: none;
    }
    .cta-mobile:before{
        left: -9px;
    }
    .contact-mail{
        font-size: 19px;
    }
}