@font-face {
    font-family: 'FontAwesome';
    src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
    src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
    font-weight: normal;
    font-style: normal
}
@font-face {
    font-family: 'JaneAusU';
    src: url('../fonts/JaneAusU.eot');
    src: url('../fonts/JaneAusU.eot') format('embedded-opentype'), url('../fonts/JaneAusU.woff2') format('woff2'), url('../fonts/JaneAusU.woff') format('woff'), url('../fonts/JaneAusU.ttf') format('truetype'), url('../fonts/JaneAusU.svg#JaneAusU') format('svg')
}

* { margin: 0; padding: 0;box-sizing:border-box}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block }
ol, ul { list-style: none }

table { border-collapse: collapse; border-spacing: 0 }
a { color: #000; text-decoration: none; outline: none; transition: all 300ms ease; -moz-transition: all 300ms ease; -webkit-transition: all 300ms ease; }
/*Reset CSS end*/
input[type="text"]:focus,input[type="password"]:focus,input[type="email"]:focus,input[type="number"]:focus,input[type="date"]:focus,select:focus,textarea:focus{outline:none}
::-webkit-input-placeholder {opacity: 1; color:#fff;font-size:14px;letter-spacing: 1px;font-weight: 400;font-family: "Poppins", sans-serif;}
:-moz-placeholder { /* Firefox 18- */opacity: 1; color:#fff;font-size:14px;letter-spacing: 1px;font-weight: 400;font-family: "Poppins", sans-serif;}
::-moz-placeholder {  /* Firefox 19+ */opacity: 1; color:#fff;font-size:14px;letter-spacing: 1px;font-weight: 400;font-family: "Poppins", sans-serif;}
select{appearance: none;-moz-appearance: none;-webkit-appearance: none;}
:-ms-input-placeholder {opacity: 1;color:#565459;font-size:13px;letter-spacing: 1px}
input:focus::-webkit-input-placeholder{color:transparent;}
input:focus:-moz-placeholder{color:transparent;}
input:focus::-moz-placeholder{color:transparent;}
input:focus:-ms-input-placeholder{color:transparent;}
textarea:focus::-webkit-input-placeholder{color:transparent;}
textarea:focus:-moz-placeholder{color:transparent;}
textarea:focus::-moz-placeholder{color:transparent;}
textarea:focus:-ms-input-placeholder{color:transparent;}
/* global classes */
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -ms-word-break: keep-all; word-break: keep-all; -webkit-word-break: keep-all; -moz-word-break: keep-all; word-wrap: break-word; }
input[type="button"],input[type="submit"]{border:none;cursor:pointer;outline:none;}


.shake-horizontal {
    -webkit-animation: shake-horizontal 5s cubic-bezier(0.455, 0.030, 0.515, 0.955) 2s infinite both;
 animation: shake-horizontal 5s cubic-bezier(0.455, 0.030, 0.515, 0.955) 2s infinite both;
}
/* ----------------------------------------------
 * Generated by Animista on 2021-7-15 12:4:13
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation shake-horizontal
 * ----------------------------------------
 */
 @-webkit-keyframes shake-horizontal {
  0%,
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  10%,
  30%,
  50%,
  70% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px);
  }
  20%,
  40%,
  60% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
  }
  80% {
    -webkit-transform: translateX(8px);
    transform: translateX(8px);
  }
  90% {
    -webkit-transform: translateX(-8px);
    transform: translateX(-8px);
  }
}
@keyframes shake-horizontal {
  0%,
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  10%,
  30%,
  50%,
  70% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px);
  }
  20%,
  40%,
  60% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
  }
  80% {
    -webkit-transform: translateX(8px);
    transform: translateX(8px);
  }
  90% {
    -webkit-transform: translateX(-8px);
    transform: translateX(-8px);
  }
}

body{margin: 0px;padding: 0;   font-family: "Manrope", sans-serif; background: #fff;overflow-x:hidden;color: #151515;letter-spacing: 0.5px;font-optical-sizing: auto;}
.fl {float: left}
.fr {float: right}
.text-center{text-align: center}
.text-left{text-align: left}
.text-right{text-align: right}
.clear{clear: both;}
.container {width:96%;margin: 0 auto; max-width: 1350px}
.sprite{background: url(../../images/sprite.png) no-repeat 0 0}
.blackoverlay{position: fixed;top: 0;left: 0;height: 100%;width: 100%;z-index: 999;background: rgba(0, 0, 0, 0.6);display: none}
.ibvm{display:inline-block;vertical-align:middle}
.ibvt{display:inline-block;vertical-align:top}
.ibvb{display:inline-block;vertical-align:bottom}
.dflex{display: flex}
.clear{clear:both;}
.clearfix:after{content:"";display:block;clear:both;}
.lnheight {line-height: 0}
.sectionblk {position: relative}
.sectioncircleblk {position: absolute}
.sectioncircleblk img {width: 100%}
.uppercase {text-transform: uppercase}
.flex-between {display: flex;justify-content: space-between; align-items: flex-start;flex-wrap: wrap;}
.flex-start {display: flex;justify-content: flex-start;align-items: flex-start;flex-wrap: wrap;}
.flex-between-center {display: flex;justify-content: space-between; align-items: center;flex-wrap: wrap;}
figure img {width: 100%}
.flex {display: flex;flex-wrap: wrap;}
.flex-end {display: flex;justify-content: space-between;align-items: flex-end;}
.img-responsive {width: 100%}
.common_padding {padding: 70px 0}
.hederflex{display: flex; align-items: center; justify-content: space-between; padding: 15px 0}
.header-left{width: 50%}
.header-right{width: 400px;display: flex;justify-content: space-between;align-items: center;}
.logo{width: 250px; display: block;}
.img-fluid{width: 100%}
.img-fluid2{max-width: 100% !important;width: auto !important;height: auto !important}
.social-icon{width: 45px;height: 45px;display: flex;align-items: center;justify-content: center;border-radius: 50px;border: 1px solid #c4c7c8;color: #565656;font-size: 17px;}
.enquirebtn{padding: 15px 35px 15px 35px;background: #00baff;border-radius:30px;color: #fff;text-transform: uppercase;display: inline-block;font-size: 16px;font-weight: 700;letter-spacing: 1px;}
.read-arw{margin-left: 10px}
.banner-flex{display: flex; justify-content: space-between; position: relative;}
.bannertext{font-size: 40px;color:#ffffff;margin-bottom: 40px;line-height: 1.2;font-weight: 300;}
.banner-left{width: 37%;padding-top: 55px;}
.client-logo{width: 200px;position: relative;padding-bottom: 20px;margin-bottom: 14px;text-transform: none;}
.banner-slider{margin-left: 0;position: relative;padding-top: 40px;padding-bottom: 70px;}
.client-logo:before{position: absolute;border-bottom: 1px solid #00baff;width: 142%;content: '';bottom: 0px;opacity: 0.3;}
.client-logo:after{position: absolute;width: 5px;height: 5px;background: #00b6f9;right: -42%;content: '';bottom: -2px;border-radius: 5px;opacity: 0.3;}
.client-logo.riffslogo {
    width: 350px !important;
}
.client-logo.riffslogo:before{width: 108%}
.client-logo.riffslogo:after{right: -8%}
.sitename{font-size: 18px;font-weight: 600;color:#ffffff;line-height: 1.5;text-transform: uppercase;}
.banner-right{border-radius: 50px 0 0 50px;overflow: hidden;width: 46%;border: 10px solid #e8e8e8;border-right: 0;position: relative;z-index: 1;}

.bannerpointer {
    position: absolute;
    top: 15%;
    left: 32%;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    width: 32%;
    gap: 50px;
    justify-content: flex-end;
}
.increaseblk{display: flex;padding: 12px 16px;border-radius: 10px;box-shadow: 0 0 7px 0 #d9d9d9;height: 77px;align-items: center;background:#0b132b; z-index: 5;justify-content: space-between;width: 284px;}
.boximg{width: 50px;}
.boxtxt {
    width: calc(100% - 62px);
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.boxnumber {
    font-size: 26px;
    font-weight: 400;
    width: auto;
    margin-right: 10px;
    white-space: nowrap;
}
.belowtxt{ font-size: 15px; font-weight: 500;}
.organic-keywords{top: 40%;width: 385px;left: 32%;}
.organic-keywords .boxtxt{display: flex;}
/*.organic-keywords .boximg{width: 50px}*/
.organic-keywords.organic-traffic{top: 70%;width: 351px;left: 35%;padding: 12px 25px;}
.organic-keywords.organic-traffic .boxnumber{width: 100px}
.banner-slider .slick-dots li button:before {
  content: "00" counter(slick-counter);
}
.banner-slider .slick-list {
    overflow: visible;
}

.banner-slider .banner-right {
    right: -50px;
}
/* Counter start */
/* Counter reset */
.banner-slider .slick-dots {
  counter-reset: slick-counter;
}

.banner-slider .slick-dots li {
  counter-increment: slick-counter;
  width: 30px;
    transition: 0.5s ease all;
}
.banner-slider .slick-dots li button{width: 30px}
/* Default dot hide + number show */
.banner-slider .slick-dots li button:before {
  content: "0" counter(slick-counter);
  font-size: 16px;
  color: #000;
  opacity: 1;   /* important */
  width: 30px
}

/* Active number style */
.banner-slider .slick-dots li.slick-active button:before {
  color: #00baff;
   
}

.banner-slider .slick-dots li.slick-active button{background: transparent; opacity: 1;}
.arrowblk{width: 80px; position: absolute; left: 20%; bottom: 12%}

.slick-current.slick-active .increaseblk {
    -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}
.banner-slider .slick-dots li.slick-active button:after {
    content: "";
    background: #00baff;
    width: 40px;
    height: 1px;
    display: inline-block;
    top:10px;
    position: absolute;
    margin: 0 0 0 8px;
}

.banner-slider .slick-dots li.slick-active {
    width: 60px;
}


.animated3s{
    -webkit-animation-duration: 3s !important;
    animation-duration: 3s !important;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.animated4s{
    -webkit-animation-duration: 4s !important;
    animation-duration: 4s !important;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
.form-heading, .heading{font-size: 35px;margin-bottom: 10px;font-weight: 300; color:#ffffff}
.form-heading{font-weight: 400}
p{font-size: 18px; margin-bottom: 20px;line-height: 1.5}
.whitetxt{color: #fff !important}
.formblk{background: #02b3f4;padding: 50px;border-radius: 30px;}
.formblk p{font-weight: 500;font-size: 18px;}
.enqfrmblk{display: flex; justify-content: space-between; flex-wrap: wrap;}
.enqfrm_item{width: 32%;}
.enq_field{width: 100%}
.enqfield {font-size: 15px;line-height: 18px;color: #ffffff;background: none;border: 1px solid #b2e6f9;width: 100%;padding: 13px 15px;margin-bottom: 24px;border-radius: 5px;font-weight: 600;height: 47px;font-family: "Manrope", sans-serif;}
.enqfrm_item:last-child {width: 16%;}
.enqfrm_item_message{width: 48%;}
textarea{ height: 50px;}
.submitbut {
    background: #fff;
    width: 100%;
    display: block;
    height: 47px;
    border: 0;
    font-size: 16px;
    color: #02b3f4;
    border-radius: 5px;
    font-weight: 800;
    font-family: "Manrope", sans-serif;
    text-transform: uppercase;
    cursor: pointer;
    border: 1px solid;
    transition: 0.5s ease all;
}
.submitbut:hover {background: #02b3f4;color: #fff;}
.banner-slider .slick-dots {bottom:70px}
.banner{position: relative;overflow: hidden; background:#0b132b;}
#formsec {
    position: relative;
}
.arrow-down {
    position: absolute;
    width: 110px;
    left: 0;
    right: 0;
    top: -39px;
    margin: 0 auto;
}
.heading span{color: #02b3f4}
.overview{position: relative;}
.overviewtextwrap {
    display: flex;
    justify-content: space-between;
}
.d-video{width: 250px;}
.era_counterblk{
    display: flex;
    justify-content: space-between;
    padding: 70px 0;
}
.no-infoblk{
    width: 23.5%;
}
.no{
    font-size: 40px;
    line-height: 1.5;
    margin-bottom: 20px;
    border-bottom: 1px solid #02b3f4;
    padding-bottom: 20px;
    font-weight: 500;
}
.no-info{
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 13px;
}
.no-des{
    font-size: 17px;
    line-height: 1.5;
}

.marquee,
.marqueeblk {
  overflow: hidden;
  background: #ffffff;
  padding: 1px 0;
}

.marquee-track {
  display: flex;
  width: max-content;
}
/*.marqueeblk  .marquee-content {-webkit-text-stroke: 1px #3333331f;}*/
.marquee-content {
  font-size: 55px;
  font-weight: 700;
  color: transparent;
  -webkit-text-stroke: 1px #484848;
   /* fallback */
  white-space: nowrap;
  padding-right: 50px;
  font-family: "Poppins", sans-serif;
    
}

/* 🔵 First Marquee → Left to Right */
.marquee .marquee-track {
  animation: scroll-left 70s linear infinite;
}
.logo-marquee .marquee .marquee-track  {animation: scroll-left 25s linear infinite;}
@keyframes scroll-left {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

/* 🔴 Second Marquee → Right to Left */
.marqueeblk .marquee-track {
  animation: scroll-right 70s linear infinite;
}

@keyframes scroll-right {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.twoblockwrapper{display: flex; justify-content: space-between;}
.leftblock{width: 35%}
.rightblock{width: 60%}
.sectiontitle{font-size: 24px; text-transform: uppercase; margin-bottom: 15px;color:#ffffff;font-weight:bold; font-family: var(--font-head);}



.clientblk{background:#0b132b}

.logo-marquee {
    background: #fff;
    overflow: hidden;
    position: relative;
}
.marquee-track {
    display: flex;
    width: max-content;
    animation: scroll 25s linear infinite;
}
.logo-box {
    margin: 15px 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    width: 200px;
}

.marquee.reverse .marquee-track {
  animation-direction: reverse;
}
.logo-marquee, .logo-marquee .marquee{background: #0000} 
.twoblockwrapper .heading{margin-bottom:30px;}
.twoblockwrapper p{margin-bottom: 40px}
.clientblk{position: relative;}
.clientblk .arrowblk{left: 30%;top: 40%}
.services-img{overflow: hidden;border-radius: 40px;line-height: 0;height: 440px}
.services-img video{width: 100%;height: 100%;object-fit: cover}
.services-img img{width: 100%;height: 100%;object-fit: cover;}
.ser-width{width: 31.5%;margin-top: 40px;border-radius: 40px;border: 1px solid #fff;transition: 0.5s ease all;position: relative}
.services-img img{transition: transform 0.5s ease;}
.ser-width:hover .services-img img {transform: scale(1.1);}
.sertxt{margin: 20px 5px;transition: 0.3s ease all}
.sertxt p{font-size: 16px;margin-bottom: 10px;}
.services-heading{font-size: 20px;margin-bottom: 8px;font-weight: 700;color: #02b3f4}
.width65{width: 66%;}
.ser-width:hover{border: 1px solid #ccc;background: #00baff}
.ser-width:hover .sertxt{margin: 20px 30px;color: #fff}
.ser-width:hover .services-heading{color: #fff}
.ser-width:last-child:hover, .ser-width:last-child{background: #fff;border: none}
.ser-width:last-child:hover .sellit {
    background: #fff;
    border: 1px solid #00baff;
    color: #00bbff;
}
.accordion_in {
    border-top: 1px solid #cfddea;
    border-bottom: 1px solid transparent;
}

.accordion_in:last-child{
    border-bottom: 1px solid #cfddea;
}

.accordion_in.acc_active, .accordion_in:hover {
    border-color: transparent;
}
.accordion_in.acc_active{border-bottom:  1px solid #cfddea}
.accordion_in:hover + .accordion_in {
    border-top-color: transparent;
}

.txtimg {
    font-family: 'JaneAusU';
    font-size: 21px;
}
.services-flex{display: flex;justify-content: space-between;flex-wrap: wrap;}
.sellit{background: #00bbff;padding:40px;border-radius: 30px;font-size: 35px;line-height: 1.5;color: #fff;transition: 0.5s ease all;}
.sellittxt{padding: 45px 50px 45px 0;font-weight: 200;}
.our-services{background:#0b132b; position: relative;}
.service-flex{display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap;margin-top: 50px;}
.service-width{width: 48%;display: flex;justify-content: space-between;align-items: center;padding: 40px 20px;cursor: pointer;transition: 0.3s ease all;border-radius: 20px;}
.servicetxt{width: calc(100% - 50px);font-size: 18px;font-weight: 500;color: #000}
.serviceicon{width: 25px;line-height: 0;}
.service-width:hover{background: #00bbff;}
.service-width:hover .servicetxt{color:#fff}
.iconbbk-white{display: none;}
.service-width .serviceicon .iconbbk{display: block;}
.service-width:hover .serviceicon .iconbbk-white{display: block;}
.service-width:hover .serviceicon .iconbbk{display: none;}
.service-flex .service-width:nth-child(7), .service-flex .service-width:last-child{ border-bottom: 1px solid #ccc;}
.whyflex{display: flex; align-items: center; justify-content: space-between;}
.why-left{width: 45%}
.why-right{width: 45%;}
.borderblk{border-top: 1px solid #000; }
.serveblk{display: flex; flex-wrap: wrap; margin-top: 50px}
.serveblkwidht{width: 23%;margin: 1%;border: 1px solid #d2dee3;min-height: 200px;border-radius: 20px;padding: 26px; padding-bottom: 15px}
.serveblkwidht.bluecolor{
    background: #00baff;
    border: 1px solid #00baff;
}
.serveblkwidht p {
    font-size: 16px;
    font-weight: 500;
}
.real-esate{width: 32px;margin-bottom: 50px;}
.real-esate-txt{font-size: 20px; font-weight: 600; margin-bottom: 10px}
footer{background: #171717}
footer p{font-weight: 200}
.d-design-footer{width: 90%; margin: 0 auto}
.testi{background:#0b132b}
.footerflex{display: flex;justify-content: space-between;flex-wrap: wrap;padding-bottom: 50px;border-bottom: 1px solid #fff;}
.footerleft{width: 75%}
.footerright{padding-top: 20px}
.copyright{font-size: 14px; padding-top: 50px; text-align: center; color: #fff }
.testiflex{display: flex; justify-content: space-between;}
.testileft{width: 35%}

.testimonial-slider {
    position: relative;
}

.testimonial-box {
  background: #fff;
  padding: 30px;
  margin: 15px;
  border-radius: 20px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    width: 90%;
}
.testimonial-slider:after {
        position: absolute;
    content: "";
    background: url(../../images/clientrightblock2.webp) no-repeat right center;
    background-size: cover;
    right: 0;
    top: 0;
    width: 250px;
    height: 100%;
    z-index: 1;
}

.testimonial-text {
  font-size: 15px;
  line-height: 1.7;
  color: #555;
  margin-bottom: 20px;
}

.testimonial-box h4 {
  margin-bottom:10px;
  font-size: 16px;
  font-weight: 600
}
html{scroll-behavior: smooth}

.testimonial-box .digi {
  font-size: 14px;
  color: #171717;
}
.testiright {
    width: 70%;
    margin-right: -10%;
}

.testimonial-slider .slick-dots li.slick-active button {
    background: #f69322;
    width: 20px;
    border-radius: 8px;
}
.testimonial-slider .slick-dots li button{background: #ccc}
.testimonial-slider .slick-track {left: -11%}

.testimonial-slider .slick-dots li {margin: 0 12px}
.testimonial-slider .slick-dots {bottom: -20px}
.testi .arrowblk{
    left: 30%;
    bottom: 30%;
}
.testi{position: relative;}
.arrowblk-down {position: absolute;left: 66%;top: 17%;width: 100px;}
.mobtet{display: none}

.custom-select {
  width: 100%;
  padding: 12px;
  background-color: #02b3f4;   /* Closed select background */
  color: #ffffff;              /* Text color */
  border: 1px solid #b2e6f9;
  border-radius: 6px;
  font-size: 16px;
  outline: none;
}

/* Dropdown options */
.custom-select option {
  background-color: #1da1d2;   /* Dropdown background */
  color: #ffffff;             /* Option text color */
}

/* Hover effect (works in some browsers) */
.custom-select option:hover {
  background-color:#02b3f4;
}

select {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: auto;
}


.acc_content {
    padding: 10px 35px;
}

.accordion_example, .accordion_example2 {
    display: inline-block;
    width: 46%;
    vertical-align: top;
    margin-right: 3%;
        margin-top: 50px;
}


.acc_head.service-width {
    width: 100%;
}
.bulletlist{margin-bottom: 20px}
.bulletlist li {
    list-style: disc;
    margin: 10px 20px;
}
.accordion_in.acc_active .acc_head {
    background:#00bbff;
    border-radius: 20px;
   
}
.accordion_in.acc_active .acc_head.service-width .servicetxt{
     color:#ffffff;
}
.accordion_in.acc_active .acc_head.service-width .serviceicon .iconbbk-white{display: block; }
.accordion_in.acc_active .acc_head.service-width .serviceicon .iconbbk{display: none;}

.muted-button {
    position: absolute;
    width: 40px;
    height: 40px;
    background: white;
    z-index: 10;
    bottom: 160px;
    right: 20px;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    line-height: 2;
    padding-top: 0;
    cursor: pointer;
}
.muted-button::before {
    content:  '🔈';
}

.muted-button.muted::before {
    
    content:  '🔇';
}
.video-wrap {
    height: 100%;
}
.pipe{display: inline-block;margin: 0 10px}
.mobdis{display: none}

.approachlistwrap {
    margin: 20px 0;
}

.approachlistblock {
    display: flex;
    gap: 20px;
    padding: 20px 0;
    border-bottom: 1px solid #ddd;
    font-size: 15px;
    color: #ffffff;
}
.approachlistblock:last-child{border: none}
.approchtitle {
    font-weight: 700;
    margin: 0 0 10px;
    font-size: 16px;
    color: #ffffff;
}
.approachlistnumber{color: #02b3f4;font-weight: 600}

@media screen and (min-width:1450px) {
    .bannertext{font-size: 50px}
   
   
}
