@import url('https://fonts.googleapis.com/css2?family=Limelight&display=swap');
@font-face {font-family: "TrimPosterWebCondensed";
  src: url("../font/TrimPosterWebCondensed.woff2") format("woff2"), 
      url("../font/TrimPosterWebCondensed.woff") format("woff"); 
}

@font-face {font-family: "vagrounded-bold";
  src:url("../font/vagrounded-bold.woff") format("woff"); 
}
@font-face {font-family: "GothamRounded-Bold";
  src:url("../font/GothamRounded-Bold.woff") format("woff"); 
}
@font-face {font-family: "GothamRounded-BoldItalic";
  src:url("../font/GothamRounded-BoldItalic.woff") format("woff"); 
}
@font-face {font-family: "GothamRounded-Book";
  src:url("../font/GothamRounded-Book.woff") format("woff"); 
}
@font-face {font-family: "GothamRounded-BookItalic";
  src:url("../font/GothamRounded-BookItalic.woff") format("woff"); 
}
@font-face {font-family: "GothamRounded-Light";
  src:url("../font/GothamRounded-Light.woff") format("woff"); 
}
@font-face {font-family: "GothamRounded-LightItalic";
  src:url("../font/GothamRounded-LightItalic.woff") format("woff"); 
}
@font-face {font-family: "GothamRounded-Medium";
  src:url("../font/GothamRounded-Medium.woff") format("woff"); 
}
@font-face {font-family: "GEFlowBold";
  src:url("../font/GEFlowBold.woff") format("woff"); 
}
@font-face {font-family: "AvenirBlack";
  src:url("../font/AvenirBlack.woff") format("woff"); 
}
@font-face {font-family: "AvenirLight";
  src:url("../font/AvenirLight.woff") format("woff"); 
}
@font-face {font-family: "visbycf-bold";
  src:url("../font/visbycf-bold.woff") format("woff"); 
}
@font-face {font-family: "fibre-font";
  src:url("../font/fibre-font.woff") format("woff"); 
}
@font-face {font-family: "Plumpfull";
  src:url("../font/Plumpfull.woff") format("woff"); 
}
@font-face {font-family: "Sunmora-Bold-700";
  src:url("../font/Sunmora-Bold-700.woff") format("woff"); 
}
body{
    font-family: "GothamRounded-Book";
    padding: 0;
    margin: 0;
    color: #72706F;
    font-size: 16px;
    overflow-x: hidden;
    background: #fff;
    font-weight: 400;
}
*{
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
a,a:hover{
  text-decoration: none;
}
p{
  line-height: 30px;
}
/* .container{
  max-width: 1210px;
} */
button:focus{
  outline: none;
}

/* commen css start */


/* commen css end */

/* ---Contact us page css start---- */
.contact-page{
  background-image: url('../img/background.png');
  background-size: cover;
  padding: 200px 0px;
}
.lest-talk-text{
  color: #3BC5D2;
  font-family: "TrimPosterWebCondensed";
}
.lest-talk-text h2{
  font-size: 55px;
  position: relative;
}
/* .lest-talk-text h2:after{
  content: " ";
  position: absolute;
  display: block;
  width: 260px;
  height: 195px;
  background: transparent;
  top: 50px;
  left: 170px;
  border-top: 0px;
  border-right: 0px;
  border-bottom: 3px solid #3bc5d2;
  border-left: 3px solid #3bc5d2;
  border-radius: 0px 0px 0px 15px;
  z-index: -999;
} */
/* .lest-talk-text h2:before{
  content: " ";
    position: absolute;
    display: block;
    width: 0px;
    height: 100px;
    background: transparent;
    bottom: 30px;
    left: -60px;
    border-top: 0px;
    border-right: 0px;
    border-bottom: 3px solid #3bc5d2;
    border-left: 3px solid #3bc5d2;
    border-radius: 0px 0px 0px 15px;
    z-index: -999;
} */
.lets-talk{
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
}
.lest-talk-img{
  width: 50%;
}
.lest-talk-text{
  width: 50%;
  padding: 0px 10px;
}
.contact-form .container-fluid{
  padding-left: 0px;
}
.contact-form-inner ::-webkit-input-placeholder {
  color:#3B8083;
  font-size: 16px;
  font-family: GothamRounded-Light;
  text-transform: uppercase;
}
.contact-form-inner ::-moz-placeholder {
  color:#3B8083;
  font-size: 16px;
  font-family: GothamRounded-Light;
  text-transform: uppercase;
}
.contact-form-inner ::-ms-input-placeholder {
  color:#3B8083;
  font-size: 16px;
  font-family: GothamRounded-Light;
  text-transform: uppercase;
}
.contact-form-inner input[placeholder]{
  color:#3B8083;
  font-size: 16px;
  font-family: GothamRounded-Light;
  text-transform: uppercase;
}
.contact-form-inner .form-control{
  border-radius: 0px;
  border: 0px;
  background-color: transparent;
  border-bottom: 2px solid #D98040;
}
.contact-form-inner .form-control:focus{
  box-shadow: none;
  border-color: #39A5B2;
}
.contact-form-inner textarea.form-control{
  border-radius: 15px;
  border: 2px solid #D98040;
}
.contact-form-inner{
  max-width: 650px;
  padding: 0px 30px;
}
.new-btn{
  font-family: "TrimPosterWebCondensed";
  border: 3px solid transparent;
  outline: none;
  display: inline-block;
  color: #F38340;
  padding: 8px 40px;
  font-size: 20px;
  text-decoration: none;
  position: relative;
  z-index: 1;
  cursor: pointer;
  border-radius: 15px;
  margin-top: 15px;
}
.new-btn .form-btn{
  color: #F38340;
  letter-spacing: 0.5px;
}
.new-btn:before{
  content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: 0;
    right: 0;
    border-bottom: 3px solid #3BC5D2;
    border-right: 3px solid #3BC5D2;
    border-top: 3px solid #3BC5D2;
    transition: .5s ease-in-out;
    border-radius: 0px 15px 15px 15px;
}
.new-btn:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 50%;
    bottom: 0;
    left: 0;
    /* border-top: 3px solid #3BC5D2; */
    border-left: 3px solid #3BC5D2;
    transition: .5s ease-in-out;
    border-radius: 0px 0px 0px 15px;
}

.new-btn:hover::before, .new-btn:hover::after {
    content: "";
    width: 100%;
    height: 100%;
}

/* ---Contact us page css end---- */
/*------ footer css start--- */
.footer-body{
  max-width: 1210px;
  margin: 0 auto;
}
.main-footer{
  background-color: rgba(243, 131, 64, 1);
}
.main-footer-inner{
  background-image: url('../img/background.png');
  padding: 100px 0px 0px;
  background-size: cover;
}
.footer-title{
  margin-bottom: 0px;
  color: #fff;
  font-size: 30px;
  font-family: "TrimPosterWebCondensed";
  letter-spacing: 0.5px;
  padding: 5px 20px;
  border-bottom: 0.5px solid #fff;
}
.footer-title span{
  -webkit-text-stroke: 0.5px #fff;
  stroke: 0.5px #fff;
  color: transparent;
}
.footer-address{
  display: flex;
  flex-direction: row;
  padding: 20px 20px;
  color: #fff;
  border-bottom: 0.5px solid #fff;
}
.address-icon{
  padding: 0px 5px;
  color: #fff;
}
.footer-address-line a{
  color: #fff;
}
.address-icon i{
   border-radius: 50%;
  border: 0.5px solid #fff;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  font-size: 15px;
}
.footer-address-line{
  padding: 0px 5px;
}
.footer-form{
  background-color: rgba(255, 255, 255, 0.88);
  border-radius: 20px;
  padding: 30px 30px 15px 30px;
  box-shadow: 1px 5px 25px rgba(0,0,0,0.5);
  margin-top: 50px;
}
.footer-form h3{
  color: #F38340;
  font-size: 30px;
  letter-spacing: 0.5px;
  font-family: "TrimPosterWebCondensed";
  text-align: center;
}
.footer-form h3 span{
  color: #3EC6D2;
}
.footer-form input.form-control[placeholder]{
  text-align: center;
  color: #969696;
  text-transform: uppercase;
}
.footer-form .form-control{
  border-radius:8px;
  border: 1px solid #EB8040;
  outline: none;
  box-shadow: none;
}
.footer-btn{
  color: #fff;
  background-color: #EB8040;
  letter-spacing: 0.5px;
  font-family: "TrimPosterWebCondensed";
}
.footer-btn span{
  color: #5ACFD7;
}
.footer-btn:hover{
  background-color: #5ACFD7; 
  color: #fff;
}
.footer-btn:hover span{
  color:#EB8040 ;
}
.social-media-icon-inner a{
  color: #fff;
  text-align: center;
  border-radius: 50%;
    border: 0.5px solid #fff;
    width: 35px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    font-size: 20px;
    display: inline-block;
}
.social-media-icon-inner{
  text-align: right;
  margin-top: 15px;
}
.vertical-text{
  writing-mode: vertical-lr;
  transform: rotateZ(180deg);
  -webkit-transform: rotateZ(180deg);
  -moz-transform: rotateZ(180deg);
  -ms-transform: rotateZ(180deg);
  -o-transform: rotateZ(180deg);
  color: #fff;
  font-size: 16px;
  font-family: GothamRounded-Medium;
}
.vertical-text:hover{
  color: #5ACFD7;
}
.footer-link{
  text-align: right;
  border-top: 0px;
  border-right: 0.5px solid #fff;
  border-bottom: 0px;
  border-left: 0px;
  padding: 20px 0px;
  margin-right: 15px;
}
.copy-right{
  border-top: 0.5px solid #fff;
  padding: 30px 0px;
}
.copy-right-body{
  padding-right: 15px;
  color: #fff;
  font-size: 16px;
  font-family: GothamRounded-Medium;
  position: relative;
}
.copy-right-link{
  text-align: right;
}
.copy-right-link a{
  color: #fff;
  font-size: 16px;
  font-family: GothamRounded-Medium;
  display: inline-block;
  padding: 0px 15px;
}
.talk-girl-img{
  position: absolute;
  bottom: -30px;
  right: 75px;
}
.talk-girl-img img{
  width: 100%;
  max-width: 300px;
}
/* ----footer css end----- */
/* --header css start---- */
.main-header{
  position: fixed;
  right: 0;
  padding-top: 75px;
  z-index: 999;
}
.main-header nav.navbar{
  background-color: transparent;
}
.main-header .nav-item{
  margin-bottom: 15px;
}
.main-header .nav-link{
  background-color: #D98040;
  border-radius: 50%;
  text-transform: uppercase;
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  color: #fff !important;
  padding: 0px 5px;
  font-family: "TrimPosterWebCondensed";
  letter-spacing: 0.5px;
}
.main-header .nav-link:hover{
  background-color: #39A5B2;
  color: #fff;
}
.main-header .nav-link.active{
  background-color: #39A5B2;
}
.main-header .navbar-nav{
  flex-direction: column !important;
}
/* --header css end---- */

/* landing page css start--- */
.our-client-body{
  background-image: url('../img/background.png');
  background-size: cover;
  padding: 200px 0px;
  overflow: hidden;
}
.our-client-inner-body{
  border-radius: 50%;
  border: 10px solid #3CACB9;
  height: 124px;
  width: 124px;
  margin: auto;
  opacity: 0.3;
}
.our-client-inner-body img{
  width: 100%;
  border-radius: 50%;
}
.owl-item.active.center .our-client-inner-body{
  width: 175px;
  height: 175px;
  opacity: 1;
  box-shadow: 1px 5px 20px rgba(0,0,0,0.5);
}
.our-client-body .owl-stage{
  display: flex;
  align-items: center;
}
.our-client-carosel-outer{
  width: 600px;
  margin: 0 auto;
  position: relative;
}
.our-client-carosel-outer .owl-nav .owl-prev{
  position: absolute;
  top: 50%;
  left: -50px;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
}
.our-client-carosel-outer .owl-nav .owl-next{
  position: absolute;
  top: 50%;
  right: -50px;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
}
.our-client-carosel-outer .owl-nav i{
    color: #D98040;
    font-size: 40px;
}
.our-client-carosel-outer .owl-dot{
  display: none;
}
.our-client-sider-inner{
  padding: 20px 15px;
}
.our-client-title{
  font-size: 30px;
  color: #DF8043;
  text-align: center;
  font-family: "TrimPosterWebCondensed";
  letter-spacing: 0.5px;
}
.our-client-detail h3{
  margin-bottom: 0;
  color: #686462;
  font-size: 20px;
  font-family: "TrimPosterWebCondensed";
  letter-spacing: 0.5px;
  text-align: center;
}
.our-client-detail {
  visibility: hidden;
}
.owl-item.active.center .our-client-detail{
  visibility: visible;
}
/* -- */
.the-team-body{
  background-image: url('../img/background-2.png');
  background-size: cover;
  padding: 200px 0px;
}
.team-title{
  font-size: 60px;
  color: #fff;
  font-family: "TrimPosterWebCondensed";
  letter-spacing: 0.5px;
  text-align: center;
  margin-bottom: 30px;
}
.team-title span{
font-family: "GEFlowBold";
}
.the-team-row{
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  max-width: 1076px;
  margin: 0 auto;
}
.the-team-col{
  width: 25%;
  position: relative;
  padding: 15px;
  margin-bottom: 40px;
}
.the-team-col-inner{
  width: 100%;
  position: relative;
  max-height: 239px;
   -webkit-filter: drop-shadow(1px 5px 20px rgba(0,0,0,0.5));
  filter: drop-shadow(1px 5px 20px rgba(0,0,0,0.5));
}

.the-team-col-inner img{
  width: 100%;
  object-fit: cover;
}
.team-call-out{
  font-family: "TrimPosterWebCondensed";
  letter-spacing: 0.5px;
  text-align: center;
  color: #DF8043;
  position: relative;
  font-size: 15px;
  max-width: 150px;
}
.team-call-out span{
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.callout-position{
  position: absolute;
  bottom: -52px;
  left: 44px;
}
.team-call-out img{
  width: 100%;
}
.plus-link{
  position: absolute;
  right: 68px;
  bottom: 48px;
  z-index: 999;
}
.plus-link a{
  display: block;
  background-color: #DE8043;
  color: #fff;
  border: 2px solid #fff;
  border-radius: 50%;
  text-align: center;
  width: 30px;
  height: 30px;
  line-height: 30px;
  font-size: 15px;
}
/* -- */
/* -- */
.our-service{
  background-image: url('../img/background.png');
  background-size: cover;
  /* padding: 200px 0px; */
  position: relative;
  overflow: hidden;
}
.our-service-title{
    font-size: 60px;
    color: #F38340;
    font-family: "TrimPosterWebCondensed";
    letter-spacing: 0.5px;
    text-align: center;
    margin-bottom: 30px;
    position: relative;
}
.our-service-inner{
  /* max-width: 615px; */
  max-width: 1076px;
  margin: 0 auto;
  text-align: center;
  padding: 200px 0px;
  position: relative;
}
.our-service-row{
  display: flex;
  flex-direction: column;
  max-width: 615px;
    margin: 0 auto;
}
.our-service-col{
  margin-bottom: 20px;
}
.our-service-col-inner a{
  display: block;
  background-color: #3CACB9;
  opacity: 0.8;
  color: #fff;
  border-radius: 12px;
  padding: 10px;
  font-family: "TrimPosterWebCondensed";
  letter-spacing: 0.5px;
  font-size: 20px;
}
.our-service-col-inner a:hover{
  background-color: #D98040;
}
.service-btn{
  margin-top: 50px;
}
.talk-btn{
  background-color: #fff;
  width: 300px;
  color: #DA8040;
  border-radius: 12px;
  font-size: 20px;
   font-family: "TrimPosterWebCondensed";
   letter-spacing: 0.5px;
   box-shadow: 1px 5px 25px rgba(0,0,0,0.5);
}
.talk-btn:focus{
  box-shadow: 1px 5px 25px rgba(0,0,0,0.5);
}
.talk-btn:hover {
  color: #3CACB9;
  background-color: #fff;

}
/* .point-btn-body{
  position: relative;
} */
/* .point-img{
  position: absolute;
}
.point-img img{
  max-height: 150px;
} */
/* .our-service-title::before {
    content: " ";
    position: absolute;
    display: inline-block;
    width: 260px;
    height: 260px;
    background: transparent;
    bottom: 30px;
    left: -89px;
    border-top: 0px;
    border-right: 0px;
    border-bottom: 3px solid #F38340;
    border-left: 3px solid #F38340;
    border-radius: 0px 0px 0px 15px;
    z-index: -999;
} */
/* .our-service-title::after {
    content: " ";
    position: absolute;
    display: inline-block;
    width: 260px;
    height: 350px;
    background: transparent;
    top: 36px;
    right: -82px;
    border-top: 3px solid #F38340;
    border-right: 3px solid #F38340;
    border-bottom: 3px solid #F38340;
    border-left: 0px;
    border-radius: 0px 15px 15px 0px;
    z-index: -999;
} */
/* --- */

.main-banner-landing{
  background-image: url('../img/background.png');
  background-size: cover;
  padding: 100px 0px;
  overflow: hidden;
}
.main-banner-title-ar{
  font-family: "GEFlowBold";
  color: #43B0BD;
  font-size: 80px;
}
.main-banner-title-ar span{
  color: #5D5957;
}
.main-banner-title-en{
   font-family: "TrimPosterWebCondensed";
   letter-spacing: 0.5px;
   color: #39A5B2;
font-size: 60px;
}
.banner-btn{
  font-size: 30px;
  font-family: "TrimPosterWebCondensed";
  letter-spacing: 0.5px;
  color: #D98040;
  border: 3px solid #D98040;
  border-radius: 16px;
  padding: 5px 40px;
  background-color: #fff;
}
.banner-btn span{
  color: #39A5B2;
}
.banner-btn:hover{
   color: #39A5B2;
    border: 3px solid #39A5B2;
    background-color: #fff;
}
.banner-btn:hover span{
   color: #D98040;
}
/* .banner-btn-body{
  position: relative;
} */
/* .banner-btn-body::after{
  content: '';
  position: absolute;
  border-left:3px solid #39A5B2 ;
  height: 200px;
  left: 140px;
  z-index: -9;
} */
.banner-video-inner{
  position: relative;
  z-index: 0;
}
.video-box {
    position: absolute;
    z-index: 0;
    left: 47px;
    top: 178px;
    object-fit: cover;
}
.video-box video{
  width: 323px;
    height: 261px;
    object-fit: cover;
}
.tv-img-body{
  position: relative;
  z-index: 1;
  max-width: 400px;
}
.tv-img-body img{
  max-width: 100%;
}
.banner-video-inner{
  position: relative;
  z-index: 0;
}
.tv-img-transparant{
  position: absolute;
  top: 0;
  left: 0;
  /*opacity: 0;*/
  opacity: 1;
}
.tv-img-normal{
  /*opacity: 1;*/
  opacity: 0;
}
.tv-btn-container{
  position: absolute;
    z-index: 1;
    left: 47px;
    top: 178px;
    display: flex;
    align-items: center;
    height: 254px;
    width: 323px;
    justify-content: center;
}
.banner-video-inner.active .tv-img-normal{
  opacity: 0;
}
.banner-video-inner.active .tv-img-transparant{
  opacity: 1;
}
.play-btn{
  background: transparent;
    border: 0px;
    outline: none;
}
.play-btn:focus{
  outline: none;
}
.play-btn img{
  max-width: 80px;
}
.banner-video-inner.active .play-btn{
  opacity: 0;
}
.banner-video-inner.active .tv-btn-container:hover .play-btn{
  opacity: 1;
  transition: 1s ease-in-out;
  -webkit-transition: 1s ease-in-out;
  -moz-transition: 1s ease-in-out;
}
.banner-video{
  display: flex;
  justify-content: center;
}
/* ---main-help section start--- */

/* ---main help section end--- */
/* --landing page css end--- */

/* --portfolio page start--- */
.portfolio-main{
  padding: 200px 0px 0px 0px;
  background-image: url('../img/background.png');
  background-size: cover;
  text-align: center;
}
.portfolio-ar-title{
  text-align: center;
  font-family: "GEFlowBold";
    color: #43B0BD;
    font-size: 80px;
    position: relative;
    display: inline-block;
}
/* .portfolio-ar-title::before{
  content: " ";
    position: absolute;
    display: inline;
    width: 105px;
    border-top: 7px solid #43B0BD;
    left: -94px;
    bottom: 31px;
} */
.portfolio-subtitle{
  color: #D98040;
  font-size: 40px;
  font-family: "TrimPosterWebCondensed";
  letter-spacing: 0.5px;
  text-align: center;
}
.portfolio-maintitle{
  color: #43B0BD;
  font-size: 60px;
  font-family: "TrimPosterWebCondensed";
  letter-spacing: 0.5px;
  text-align: center;
  position: relative;
  display: inline-block;
}
/* .portfolio-maintitle::before{
    content: " ";
    position: absolute;
    display: inline;
    width: 105px;
    height: 131px;
    background: transparent;
    bottom: 43px;
    left: -100px;
    border-top: 7px solid #43B0BD;
    border-right: 0px;
    border-bottom: 7px solid #43B0BD;
    border-left: 7px solid #43B0BD;
    border-radius: 15px 0px 0px 15px;
    z-index: -999;
} */
/* .portfolio-maintitle::after {
    content: " ";
    position: absolute;
    display: inline-block;
    width: 219px;
    height: 48px;
    background: transparent;
    top: 36px;
    right: -206px;
    border-top: 7px solid #43B0BD;
    border-right: 7px solid #43B0BD;
    border-bottom: 7px solid #43B0BD;
    border-left: 0px;
    border-radius: 0px 15px 15px 0px;
    z-index: -999;
} */
.portfolio-img img{
  width: 100%;
}
.portfolio-text{
  font-family: "TrimPosterWebCondensed";
  letter-spacing: 0.5px;
  color: #fff;
  font-size: 20px;
  display: block;
  text-align: center;
}
.portfolio-text:hover{
  color: #D98040;
}
.portfolio-img{
  position: relative;
}
.portfolio-col-1 {
    position: absolute;
    top: 141px;
    width: 140px;
    left: 52px;
}
.portfolio-col-2 {
    position: absolute;
   top: 118px;
    width: 140px;
    left: 240px
}
.portfolio-col-3 {
    position: absolute;
   top: 103px;
    width: 140px;
    left: 404px;
}
.portfolio-col-4 {
    position: absolute;
    top: 105px;
    width: 140px;
    left: 575px;
}
.portfolio-col-5 {
    position: absolute;
    top: 80px;
    width: 140px;
    left: 745px;
}
.portfolio-col-6{
    position: absolute;
    top: 103px;
    width: 140px;
    left: 919px;
}
/* .portfolio-img::before{
  content: " ";
    position: absolute;
    display: inline;
    width: 945px;
    height: 140px;
    background: transparent;
    top: -3px;
    left: 0;
    border-top: 7px solid #43B0BD;
    border-right: 0px;
    border-bottom: 7px solid #43B0BD;
    border-left: 7px solid #43B0BD;
    border-radius: 15px 0px 0px 15px;
    z-index: -999;
} */
.portfolio-img-mob-row{
    display: flex;
    flex-wrap: wrap;
}
.portfolio-img-mob-col{
    width: 16.66%;
    padding: 0px 15px;
}
.blue-tv{
  position: relative;
}
.blue-tv img{
  width: 100%;
}
.tv-overlay{
  position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.tv-overlay a.portfolio-text{
  display: flex;
    height: 100%;
    width: 100%;
    align-items: center;
    justify-content: center;
}
.portfolio-img-mobile{
  display: none;
}
/* --portfolio page end--- */
.line-1{
  /* background-color: #39A5B2; */
  /* height: 300px; */
  width: 6px;
  position: absolute;
  left: 50%;
}
.line-1 svg{
  /* height: 300px; */
  width: 6px;
}
.line-1 line{
 fill: none;
 stroke-width: 12;
 stroke: #F38340;
 stroke-dasharray: 0;
 stroke-dashoffset: 0;
  /* animation: animation 2s linear infinite; */
  animation-delay: 2s;
}
.banner-btn-body {
    position: relative;
    display: inline-block;
}
@keyframes animation {
  0%{
   stroke-dashoffset: 300;
  }
  25%{
   stroke-dashoffset: 200;

  }
  50%{
    stroke-dashoffset: 100;
  }
  75%{
   stroke-dashoffset: 50;
  }
  100%{
    stroke-dashoffset:0;
  }
}

/* ---- */
/* .our-service-inner{
  position: relative;
} */
.line-2 {
    position: absolute;
    width: 100%;
   /*  max-width: 330px; */
   max-width: 300px;
   /*  top: -65px;
    left: 223px; */
    top: -31px;
    left: 95px;
    z-index: 1;
    opacity: 0;
}
.line-3{
  position: absolute;
    width: 100%;
    max-width: 330px;
    top: -65px;
    left: 223px;
    z-index: 0;
}
.service-animation-add-1.line-2{
  opacity: 1;
}
.service-animation-add-1.line-2 path{
  fill: none;
  stroke-width: 5;
 stroke: #f38340;
 stroke-miterlimit:10;
 stroke-dasharray: 515;
 stroke-dashoffset: 515;
  /* animation: animation-2 4s linear forwards; */
  animation-delay: 2s;
}
.line-3 path{
  fill: none;
  stroke-width: 5;
 stroke: #39A5B2;
 stroke-miterlimit:10;
}
@keyframes animation-2 {
  /* 0%{
   stroke-dashoffset: 515;
  }
  16.666%{
   stroke-dashoffset: 415;

  }
  33.332%{
    stroke-dashoffset: 315;
  }
  49.998%{
   stroke-dashoffset: 215;
  }
  66.664%{
    stroke-dashoffset:115;
  }
  83.33%{
    stroke-dashoffset:0;
  }
  100%{
    stroke-dashoffset:0;
  } */
  to {
      stroke-dashoffset: 0;
    }
}
.line-6 {
    position: absolute;
    width: 100%;
    /* max-width: 200px; */
    max-width: 583px;
    top: 230px;
    /* right: 329px; */
    right: 0;
    z-index: -1;
    opacity: 0;
}
.line-6 svg,
.line-7 svg{
  height: 365px;
}
.line-7{
  position: absolute;
    width: 100%;
    max-width: 200px;
    top: 230px;
    right: 329px;
    z-index: -2;
}
.service-animation-add-2.line-6{
  opacity: 1;
}
.service-animation-add-2.line-6 path{
  fill: none;
  stroke-width: 7;
 stroke: #f38340;
 stroke-miterlimit:10;
 stroke-dasharray: 900;
 stroke-dashoffset: 900;
  /* animation: animation-4 4s linear forwards; */
  animation-delay: 6s; 
}
.line-7 path{
  fill: none;
  stroke-width: 7;
 stroke: #39A5B2;
 stroke-miterlimit:10;
}
@keyframes animation-4 {
  /* 0%{
   stroke-dashoffset: 900;
  }
  16.666%{
   stroke-dashoffset: 750;

  }
  33.332%{
    stroke-dashoffset: 500;
  }
  49.998%{
   stroke-dashoffset: 350;
  }
  66.664%{
    stroke-dashoffset:200;
  }
  83.33%{
    stroke-dashoffset:50;
  }
  100%{
    stroke-dashoffset:0;
  } */
  to {
      stroke-dashoffset: 0;
    }
}
/* --how can we help section start css start--- */
.help-main{
  background-image: url('../img/background-3.jpg');
  background-size: cover;
  /* padding: 200px 0px; */
  position: relative;
  overflow: hidden;
}
.help-title{
    font-family: "TrimPosterWebCondensed";
    letter-spacing: 0.5px;
    font-size: 60px;
    -webkit-text-stroke: 1px #fff;
    stroke: 1px #fff;
    color: transparent;
    line-height: 60px;
    padding-left: 130px;
}
.help-title span{
  display: block;
  color: #fff;
}
.help-main-inner{
  max-width: 1076px;
  margin: 0 auto;
  padding: 200px 0px;
  position: relative;
}
.help-main-row{
  display: flex;
  flex-direction: row;
}
.help-main-col{
  width: 50%;
}
.like-img{
  max-width: 230px;
}
.like-img img{
  width: 100%;
  z-index: 1;
  position: relative;
}
.collout-inner p{
font-family: "AvenirLight";
font-size: 20px;
color: #1F7780;
text-align: justify;
}
.collout-inner p span{
  font-family: "AvenirBlack";
}
.color-orange{
  color: #D98040;
}
.collout-inner{
  background-color: #fff;
  border-radius: 16px;
  padding: 100px 30px 30px 30px;
  position: relative;
}
.collout-inner:after {
  content: "";
    position: absolute;
    width: 0;
    height: 0;
    left: -144px;
    border: 50px solid transparent;
    border-right: 100px solid #fff;
    border-top: 50px;
    z-index: 3;
    top: 50%;
}
.help-col-position{
  position: relative;
}
.callout-body{
  position: absolute;
  top: 200px;
  left: 0;
}
.hand-img{
  position: relative;
  z-index: 2;
}
.line-4{
  position: absolute;
    width: 100%;
    top: 0;
    left: 100px;
    /* left: 224px; */
    z-index: 1;
    max-width: 600px;
    opacity: 0;
}
.help-main-add .line-4{
  opacity: 1;
}
.help-main-add .line-4 path{
  fill: none;
  stroke-width: 12;
  stroke: #fff;
  stroke-miterlimit: 10;
 stroke-dasharray: 2400;
 stroke-dashoffset: 2400;
  /* animation: animation-3 12s linear forwards; */
  animation-delay: 2s;
}
.line-5{
  position: absolute;
    width: 100%;
    top: 0;
    left: 224px;
    z-index: 0;
    max-width: 600px;
}

.line-5 path{
  fill: none;
  stroke-width: 12;
  stroke: #D98040;
  stroke-miterlimit: 10;
}
@keyframes animation-3 {
  /* 0%{
   stroke-dashoffset: 2400;
  }
  16.666%{
   stroke-dashoffset: 2000 ;

  }
  33.332%{
    stroke-dashoffset: 1600;
  }
  49.998%{
   stroke-dashoffset: 1200;
  }
  66.664%{
    stroke-dashoffset:800;
  }
  83.33%{
    stroke-dashoffset:400;
  }
  100%{
    stroke-dashoffset:0;
  } */
  to {
      stroke-dashoffset: 0;
    }
}

/* --how can we help section start css end--- */

/* --bmc project page start--- */
.bmc-main{
  background-image: url('../img/background-bmc.png');
  background-size: cover;
}
.bmc-client-inner{
  text-align: center;
  padding: 70px 0px;
}
.bmc-client-title{
  font-size: 25px;
  color: #DC8040;
  font-family: "GothamRounded-Medium";
  text-transform: uppercase;
}
.bmc-client-logo-row{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}
.bmc-client-logo-col{
  width: 110px;
  height: 110px;
  background-color: #fff;
  border-radius: 50%;
  padding: 10px;
  box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
  margin: 15px;
}
.bmc-client-logo-col a{
  display: block;
}
.bmc-client-logo-col a img{
  display: block;
  width: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.bmc-banner-img-inner{
box-shadow: 0 0px 40px rgba(0,0,0,0.70);
border-radius: 41px;
object-fit: cover;
overflow: hidden;
}
.bmc-banner-img-inner img{
  width: 100%;
}
.bmc-banner-img{
  position: relative;
}
.banner-title{
  width: 100%;
  text-align: center;
  position: absolute;
  bottom: 30px;
}
.banner-title h2{
  color: #fff;
  font-size: 60px;
  font-family: "GothamRounded-Bold";
}
.banner-title h3{
  font-size: 30px;
  font-family: "GothamRounded-Medium";
  color: #80889B;
}
.banner-title-img-body{
  max-width: 600px;
  margin: 0 auto;
  padding: 50px 0px;
}
.banner-title-img{
  margin-bottom: 30px;
}
.banner-title-img img{
  width: 100%;
}
.dot-img{
  text-align: center;
}
.dot-img img{
  max-width: 200px;
  width: 100%;
}
.insta-grid-title{
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
.insta-grid-title img{
  max-width: 300px;
  display: inline-block;
  margin: 0 20px;
}
.insta-grid-title::before,
.insta-grid-title::after{
  content: '';
  display: inline-block;
  vertical-align: middle;
  height: 2px;
  background-color: #80889B;
  width: 100%;
}
.insta-grid-row{
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
}
.insta-grid-col{
  width: 33.333%;
  padding: 10px;
} 
.insta-grid-card{
  background-color: #fff;
  box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
  border-radius: 10px;
  padding: 10px;
}
.insta-grid-card-img{
  position: relative;
}
.insta-overlay{
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  vertical-align: center;
  align-items: center;
  height: 100%;
  width: 100%;
  justify-content: center;
  background-color: rgba(11, 93, 105, 0.4);
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  -webkit-transition: opacity 0.3s ease-in-out;
  -moz-transition: opacity 0.3s ease-in-out;
  -o-transition: opacity 0.3s ease-in-out;
}
.insta-overlay a{
  color: #FFF;
  font-size: 50px;
}
.insta-grid-card-img:hover .insta-overlay{
  opacity: 1;
}
.insta-story-title{
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 30px;
}
.insta-story-title h2{
  font-size: 40px;
  display: inline-block;
  margin: 0 20px;
  font-family: visbycf-bold;
  color: #0B5D69;
  text-transform: uppercase;
}
.insta-story-title:after,
.insta-story-title:before{
  content: '';
  display: inline-block;
  vertical-align: middle;
  height: 2px;
  background-color: #80889B;
  width: 100%;
}
.insta-story{
  padding: 100px 0px;
}
.insta-story-row{
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}
.insta-story-col{
  width:25%;
  padding: 10px;
}
.insta-story-body{
  background-color: #fff;
    box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
    border-radius: 10px;
    padding: 10px;
}
.insta-story-col:nth-of-type(even){
  margin-top: 50px;
}
.insta-reels{
  padding: 50px 0px 100px 0px;
}
.insta-reels-row{
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}
.insta-reels-col{
  width: 25%;
  padding: 10px;
}
.reel-section{
  background-color: #fff;
  box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
  border-radius: 10px;
  padding: 10px;
  position: relative;
}
.reels-button{
   position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
}
.play-button {
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 60px;
  opacity: 0.6;
}
.play-button:focus{
  outline: none !important;
}
.reel-section:hover .play-button{
  opacity: 1;
  cursor: pointer;
  transition: opacity .3s ease-in-out;
  -webkit-transition: opacity .3s ease-in-out;
  -moz-transition: opacity .3s ease-in-out;
  -o-transition: opacity .3s ease-in-out;
} 
.heart-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
 /*  background-color: rgba(11, 93, 105, 0.3); */
  border-radius: 10px;
  padding: 10px;
  border: 10px solid #fff;
}

.heart-image {
  position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    font-size: 60px;
    color: #fff;
}
.play-button.playing {
 display: none;
}
.reel-section:hover .play-button.playing {
 display: block;
}
/* --bmc project page end--- */
/* ----yoland project page start--- */
.yoland-insta-grid{
  position: relative;
}
.yoland-insta-bg{
  position: absolute;
  top: -250px;
  left: 0;
  width: 550px;
  z-index: -1;
}
.yoland-insta-bg img{
  width: 100%;
}
.yoland-banner-title .yoland-banner-title-en{
  font-size: 50px;
  color: #475727;
}
.yoland-banner-title .yoland-banner-title-ar{
  font-size: 50px;
  color: #475727;
  font-family: "GEFlowBold";
}
.yoland-insta-grid-title{
  text-align: center;
}
.yoland-insta-grid-title img{
    max-width: 300px;
    display: inline-block;
    margin: 0 20px;
}
.yonald-insta-overlay{
  background-color:  rgba(197, 145, 150, 0.4);
  position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    height: 100%;
    width: 100%;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    -webkit-transition: opacity 0.3s ease-in-out;
    -moz-transition: opacity 0.3s ease-in-out;
    -o-transition: opacity 0.3s ease-in-out;
}
.yonald-insta-overlay a {
    color: #FFF;
    font-size: 50px;
}
.insta-grid-card-img:hover .yonald-insta-overlay {
    opacity: 1;
}
.yoland-insta-story-title{
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 30px;
}
.yoland-insta-story-title h2 {
    font-size: 40px;
    display: inline-block;
    margin: 0 20px;
    font-family: visbycf-bold;
    color: #5D6637;
    text-transform: uppercase;
}
.yoland-insta-story .yoland-insta-story-title:after,
.yoland-insta-story .yoland-insta-story-title:before{
  width: 30%;
}
.yoland-insta-story-title:after, 
.yoland-insta-story-title:before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    height: 2px;
    background-color: #5D6637;
    width: 100%;
}
.bg-color-2{
  background-color:rgba(197, 145, 150, 0.3);
}
.bg-color-1{
  background-color:rgba(11, 93, 105, 0.3);
}
.yoland-main{
  background-image: url(../img/background-bmc.png);
    background-size: cover;
}
/* ----yoland project page end--- */
/* --wagamama page start---- */
.wagamama-main{
  background-image: url(../img/background-bmc.png);
    background-size: cover;
}
.wagamama-video-body{
  max-width: 700px;
  margin: 30px auto;
  position: relative;
  z-index: 1;
}
.wagama-video-tv img{
  width: 100%;
}
.wagamama-video{
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    border-radius: 27px;
    overflow: hidden;
}
.wagamama-video video{
    height: 520px;
    object-fit: cover;
    width: 100%;
}
.wagamama-video-button{
  text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}
.wagamama-play-button{
  background: transparent;
    border: 0;
    font-size: 60px;
    color: #fff;
    outline: none;
}
.wagamama-frame-title h2{
  color: #7A7A7A;
  font-family: visbycf-bold;
  text-transform: uppercase;
  font-size: 30px;
  text-align: center;
  position: relative;
}
.wagamama-frame-title h2 span{
  color: #EA8040;
}
.wagamama-frame-title h2:before{
    content: '';
    border-radius: 0px 0px 0px 30px;
    width: 35%;
    height: 795px;
    display: inline-block;
    position: absolute;
    bottom: 19px;
    z-index: -1;
    left: 0;
    border: 2px solid #7A7A7A;
    border: 0px 0px 2px solid;
    border-top: 0px;
    border-right: 0;
}
.wagamama-frame-title h2:after{
    content: '';
    border-radius: 0px 0px 30px 0px;
    width: 35%;
    height: 795px;
    display: inline-block;
    position: absolute;
    bottom: 19px;
    z-index: -1;
    right: 0;
    border: 2px solid #7A7A7A;
    border: 0px 0px 2px solid;
    border-top: 0px;
    border-left: 0;
}
.wagamama-reels-title h2{
  color: #7A7A7A;
  font-family: visbycf-bold;
  text-transform: uppercase;
  font-size: 30px;
  text-align: right;
  position: relative;
}
.wagamama-reels-title h2 span{
  color: #EA8040;
}
.wagamama-reels-title h2:before{
  content: '';
  height: 2px;
  width: calc(100% - 300px);
  display: inline-block;
  background-color: #7A7A7A;
  position: absolute;
  left: 0;
  top: 15px;
}
/* --wagamama page end---- */
/* --raionforest page start--- */
.rainforest-main{
  background-image: url(../img/background-bmc.png);
    background-size: cover;
}
.rainforest-banner-title img{
  max-width: 337px;
}
.rainforest-banner-title h3{
  font-family: "fibre-font";
  color: #8BA456;
  font-size: 40px;
}
.rainforest-banner{
  padding-top: 30px;
}
.forest-design-1{
  position: absolute;
  left: 0;
  top: -150px;
  z-index: -1;
}
.forest-design-1 img{
  max-width: 350px;
}
.forest-design-2{
  position: absolute;
  left: -60px;
  bottom: 0;
  z-index: 1;
}
.forest-design-2 img{
  max-height: 250px;
}
.rainforest-insta-grid{
  position: relative;
  padding-top: 100px;
}
.forest-grid-title{
  text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.forest-grid-title img {
    max-width: 300px;
    display: inline-block;
    margin: 0 20px;
}
.forest-grid-title::before, .forest-grid-title::after {
    content: '';
    display: inline-block;
    vertical-align: middle;
    height: 2px;
    background-color: #3B6832;
    width: 100%;
}
.forest-insta-overlay{
  background-color: rgba(59, 104, 50, 0.4);
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    height: 100%;
    width: 100%;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    -webkit-transition: opacity 0.3s ease-in-out;
    -moz-transition: opacity 0.3s ease-in-out;
    -o-transition: opacity 0.3s ease-in-out;
}
.forest-insta-overlay a {
    color: #FFF;
    font-size: 50px;
}
.insta-grid-card-img:hover .forest-insta-overlay{
    opacity: 1;
}
.forest-design-3{
  position: absolute;
  right: -40px;
  top: -70px;
  z-index: 1;
}
.forest-design-3 img,
.forest-design-4 img,
.forest-design-6 img,
.forest-design-7 img,
.forest-design-9 img{
  max-height: 250px;
}
.forest-design-4{
  position: absolute;
  left: -40px;
  top: 300px;
  z-index: 1;
}
.forest-design-5{
  position: absolute;
  top: 5px;
  left: -20px;
  z-index: 1;
}
.forest-design-5 img{
  max-width: 80px;
}
.forest-insta-story{
  position: relative;
}
.forest-design-6{
  position: absolute;
  left: -40px;
  bottom: 0;
  z-index: 1;
}
.forest-design-7{
  position: absolute;
  right: -40px;
  top: 0;
  z-index: 1;
}
.forest-insta-story-title {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 30px;
    position: relative;
}
.forest-insta-story-title h2 {
    font-size: 40px;
    display: inline-block;
    margin: 0 20px;
    font-family: fibre-font;
    color: #5F803D;
    text-transform: uppercase;
}
.forest-insta-story-title:after, 
.forest-insta-story-title:before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    height: 2px;
    background-color: #5F803D;
    width: 100%;
    margin-top: 10px;
}
.forest-design-8{
  position: absolute;
    top: 45px;
    right: 0px;
    z-index: 1;
}
.forest-design-8 img {
    max-width: 80px;
}
.forest-design-9{
  position: absolute;
  right: -40px;
  bottom: 0;
  z-index: 1;
}
.forest-reels{
  position: relative;
}
.forest-design-10{
  position: absolute;
    top: -18px;
    left: 0px;
    z-index: 1;
}
.forest-design-10 img {
    max-width: 100px;
}
/* --raionforest page end--- */
/* --cdp page start--- */
.cdp-banner-title h2{
  font-family: 'Limelight', cursive;
  text-transform: uppercase;
  position: relative;
}
.cdp-main{
   background-image: url(../img/background-bmc.png);
    background-size: cover;
}
.cdp-story-row{
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}
.cdp-story-col{
  width: 25%;
  padding: 5px;
}
.cdp-story-img img{
  width: 100%;
}
.cdp-story-title{
  font-family: 'Limelight', cursive;
  color: #3A3733;
  font-size: 25px;
  text-align: center;
  margin-bottom: 30px;
  text-transform: uppercase;
}
.cdp-story{
  padding-top: 30px;
}

.cdp-story-banner{
  margin-top: -60px;
}
.cdp-story-banner img{
  position: relative;
  z-index: 1;
  width: 96%;
  -webkit-filter: drop-shadow(0px 0px 30px rgba(0,0,0,0.70));
        filter: drop-shadow(0px 0px 30px rgba(0,0,0,0.70));
}
.cdp-web-video-body{
  max-width: 700px;
    margin: 30px auto;
    position: relative;
    z-index: 1;
}
.cdp-web-video-tv img {
    width: 100%;
}
.cdp-web-video {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    border-radius: 27px;
    overflow: hidden;
}
.cdp-web-video video {
    height: 520px;
    object-fit: cover;
    width: 100%;
}
.cdp-web-video-button {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}
.cdp-web-play-button {
    background: transparent;
    border: 0;
    font-size: 60px;
    color: #fff;
    outline: none;
}
.padding-r-50{
  padding-right: 50px;
}
.padding-l-50{
  padding-left: 50px;
}
.cadp-insta-reels{
  padding: 50px 0px 30px 0px;
}
.insta-animation{
  padding-bottom: 100px;
}
.cdp-banner-title h2::after{
  content: '';
    width: 380px;
    border-radius: 0px 15px 0px 0px;
    border: 1px solid #FF2800;
    height: 75px;
    position: absolute;
    top: 40%;
    border-bottom: 0px;
    border-left: 0px;
}
.cdp-story-title-design-1,
.cdp-story-title-design-2,
.cdp-story-title-design-3,
.cdp-story-title-design-4{
  position: relative;
}
  .cdp-story-title-design-4::after{
    content: '';
    width: 132px;
    border-radius: 0px 0px 15px 0px;
    border: 1px solid #FF2800;
    height: 65px;
    position: absolute;
    bottom: 15px;
    border-top: 0px;
    border-left: 0px;
}
  .cdp-story-title-design-4::before{
    content: '';
    width: 70px;
    height: 1px;
    bottom: 15px;
    position: absolute;
    background-color: #FF2800;
    left: 0;
  }
    .cdp-story-title-design-3::before{
    content: '';
    width: 60px;
    height: 1px;
    bottom: 15px;
    position: absolute;
    background-color: #FF2800;
    left: 0;
  }
      .cdp-story-title-design-3::after {
    content: '';
    width: 70px;
    height: 1px;
    bottom: 15px;
    position: absolute;
    background-color: #FF2800;
    right: -10px;
}
    .cdp-story-title-design-2::before{
    content: '';
    width: 42px;
    height: 1px;
    bottom: 15px;
    position: absolute;
    background-color: #FF2800;
    left: 0;
  }
      .cdp-story-title-design-2::after {
    content: '';
    width: 50px;
    height: 1px;
    bottom: 15px;
    position: absolute;
    background-color: #FF2800;
    right: -10px;
}
  .cdp-story-title-design-1::after {
    content: '';
    width: 50px;
    height: 1px;
    bottom: 15px;
    position: absolute;
    background-color: #FF2800;
    right: -10px;
}
  .cdp-story-title-design-1::before {
    content: '';
    width: 70px;
    border-radius: 15px 0px 0px 0px;
    border: 1px solid #FF2800;
    height: 663px;
    position: absolute;
    top: 15px;
    border-bottom: 0px;
    border-right: 0px;
    left: -32px;
}
.cdp-web-title h2{
    font-family: 'Limelight', cursive;
    color: #FF2800;
    font-size: 25px;
    text-transform: uppercase;
    writing-mode: vertical-lr;
    transform: rotateZ(180deg);
    -webkit-transform: rotateZ(180deg);
    -moz-transform: rotateZ(180deg);
    -ms-transform: rotateZ(180deg);
    -o-transform: rotateZ(180deg);
    position: relative;
}
.cdp-web-title h2::after {
    content: '';
    height: 400px;
    width: 1px;
    background-color: #FF2800;
    position: absolute;
    top: 202px;
    right: 13px;
    z-index: -1;
}
.cdp-web-title h2::before {
   content: '';
    width: 135px;
    border-radius: 15px 0px 0px 0px;
    border: 1px solid #FF2800;
    height: 170px;
    position: absolute;
    top: -170px;
    border-bottom: 0px;
    border-right: 0px;
    left: 13px;
}
.cdp-web-title{
  position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    left: 0px;
}
.cdp-web-design-row{
  max-width: 900px;
    margin: 0 auto;
    position: relative;
}
.cdp-reels-title h2{
  font-family: 'Limelight', cursive;
    color: #FF2800;
    font-size: 25px;
    text-transform: uppercase;
    position: relative;
    padding-left: 30px;
}
.cdp-reels-title h2::before{
   content: '';
    width: 52px;
    border-radius: 15px 0px 0px 15px;
    border: 1px solid #FF2800;
    height: 41px;
    position: absolute;
    bottom: 16px;
    border-right: 0px;
    left: -15px;
}
.cdp-reels-title h2::after{
   content: '';
    width: 1028px;
    border-radius: 0px 15px 0px 0px;
    border: 1px solid #FF2800;
    height: 502px;
    position: absolute;
    bottom: 16px;
    border-left: 0px;
    border-bottom: 0px;
    top: 11px;
  }
.cdp-animation-title h2{
  font-family: 'Limelight', cursive;
    color: #FF2800;
    font-size: 25px;
    text-transform: uppercase;
    writing-mode: vertical-lr;
    transform: rotateZ(0deg);
    -webkit-transform: rotateZ(0deg);
    -moz-transform: rotateZ(0deg);
    -ms-transform: rotateZ(00deg);
    -o-transform: rotateZ(0deg);
}
.insta-animation-body{
  position: relative;
}
.cdp-animation-title{
  position: absolute;
  right: -59px;
  top: 30px;
}
/* --cdp page end--- */
/* ---tlc peoject page start-- */
.tlc-dot-img{
  margin-bottom: 30px;
}
.tlc-insta-grid-body{
  padding: 30px;
  background-color: #fff;
  border-radius: 15px;
  box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
  margin-top: -100px;
  z-index: 1;
  position: relative;
}
.tlc-insta-grid-row{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.tlc-insta-grid-col{
  width: 33.333%;
  padding: 5px;
}
.tlc-insta-img{
border-radius: 10px;
overflow: hidden;
object-fit: cover;
max-height: 340px;
}
.tlc-insta-img img{
  width: 100%;
}
.tlc-insta-story-title{
  text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 30px;
}
.tlc-insta-story-title h2 {
    font-size: 40px;
    display: inline-block;
    margin: 0 20px;
    font-family: visbycf-bold;
    color: #686357;
    text-transform: uppercase;
}
.tlc-insta-story-title:after,
.tlc-insta-story-title:before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    height: 2px;
    background-color: #686357;
    width: 100%;
}
.tlc-main{
  background-image: url(../img/background-bmc.png);
    background-size: cover;
}
/* ---tlc peoject page end-- */
/* ---arcadia page start---- */
.arcadia-main{
    background-image: url(../img/background-bmc.png);
    background-size: cover;
    padding: 100px 0px 50px 0px;
}
.arcadia-body{
  border-radius: 30px;
  box-shadow: 0 0px 60px rgba(0,0,0,0.60);
  overflow: hidden;
  background-image: url('../img/arked-bg.png');
  background-position: top;
  background-size: cover;
  background-repeat: no-repeat;
}
.arcadia-banner{
  position: relative;
}
.arcadia-banner-img img{
  width: 100%;
}
.arcadia-banner-logo{
  text-align: center;
}
.arcadia-banner-logo img{
  display: inline-block;
  max-width: 115px;
}
.arcadia-banner-title{
  text-align: center;
}
.arcadia-banner-title h2{
  font-family: "Plumpfull";
  font-size: 50px;
  color: #fff;
  text-transform: uppercase;
}
.arcadia-banner-title h2 span{
  color: #C29029;
}
.arcadia-icons{
  display: flex;
  justify-content: center;
  flex-direction: row;
}
.arcadia-icons a{
  color: #fff;
  width: 40px;
  height: 40px;
  font-size: 25px;
  line-height: 40px;
  text-align: center;
  border-radius: 50%;
  border: 1px solid #fff;
  margin: 20px 5px;
}
.arcadia-banner-content{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  padding-top: 100px;
}
.arcadia-banner-logo{
  margin-bottom: 30px;
}
.plumbfull{
  position: relative;
}
.plumbfull-text{
  font-size: 20px;
  color: #13572C;
  text-align: center;
  font-weight: 600;
  margin-top: 15px;
}
.plumbfull-img{
  text-align: center;
  margin-bottom: 40px;
}
.plumbfull-img img{
  max-width: 500px;
}
.plumbfull-dot{
  text-align: center;
}
.plumbfull-dot img{
  max-width: 300px;
}
.plumbfull-element-2{
  text-align: right;
}
.plumbfull-element-body-2{
  background-color: #BA8C27;
  padding: 8px 15px 8px 60px;
  border-radius: 26px 0px 0px 26px;
  display: inline-block;
}
.plumbfull-element-body-1 h3,
.plumbfull-element-body-2 h3{
  color: #fff;
  margin-bottom: 0;
  font-family: "Plumpfull";
  font-size: 30px;
  text-transform: uppercase;
}
.plumbfull-element-1{
  text-align: left;
  position: absolute;
  top: 0;
  left: 0;
}
.plumbfull-element-body-1{
  padding: 8px 60px 8px 15px;
  border-radius: 0px 26px 26px 0px;
  display: inline-block;
  margin-bottom: 5px;
}
.plumbfull-bg-1{
  background-color: #BA8C27;
}
.plumbfull-bg-2{
  background-color: #13572C;
}
.plumbfull-design{
  text-align: center;
  margin-top: 15px;
  margin-bottom: 50px;
}
.plumbfull-design img{
  max-width: 400px;
  border: 1px solid #BA8C27;
}
.arcadia-insta-grid{
 /*  background-color: #13572C; */
  padding: 50px 0px 300px 0px;
  position: relative;
  z-index: 1;
}
.arcadia-insta-img{
  text-align: center;
  padding-bottom: 30px;
}
.arcadia-insta-img img{
  max-width: 400px;
}
.arcadia-insta-row{
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  margin-bottom: 50px;
  max-width: 1000px;
  margin: 0 auto;
  justify-content: center;
}
.arcadia-insta-col{
  width: 33.333%;
  padding: 10px;
}
.arcadia-insta-card{
    background-color: #fff;
    box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
    border-radius: 10px;
    padding: 10px;
}
.arcadia-insta-card-img {
    position: relative;
}
.arcadia-insta-overlay{
  position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    height: 100%;
    width: 100%;
    justify-content: center;
    background-color: rgba(19, 87, 44, 0.4);
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    -webkit-transition: opacity 0.3s ease-in-out;
    -moz-transition: opacity 0.3s ease-in-out;
    -o-transition: opacity 0.3s ease-in-out;
}
.arcadia-insta-overlay a {
    color: #FFF;
    font-size: 50px;
}
.arcadia-insta-card-img:hover .arcadia-insta-overlay {
    opacity: 1;
}
.arcadia-reels-title{
  color: #fff;
  font-size: 40px;
  font-family: "Plumpfull";
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 30px;
}
.arcadia-social-ads-row{
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
}
.arcadia-social-ads-col{
  width: 33.333%;
  padding: 10px;
}
.arcadia-social-img{
  border-radius: 10px;
  overflow: hidden;
  object-fit: cover;
}
.arcadia-social-img img{
  width: 100%;
}
.arcadia-reels{
  max-width: 1000px;
  margin: 0 auto;
  padding-top: 50px;
}
.arcadia-insta-grid::before{
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 100%;
  height: 100%;
  background: rgba(19, 87, 44, 0.8);
  border-radius: 50%;
  -webkit-transform-origin: top;
  -moz-transform-origin: top;
  -o-transform-origin: top;
  transform-origin: top;
  -webkit-transform: translateX(-50%) scale(3);
  -moz-transform: translateX(-50%) scale(3);
  -o-transform: translateX(-50%) scale(3);
  transform: translateX(-50%) scale(3);
  z-index: -1;
}
.arcadia-social-ads{
  position: relative;
  z-index: 1;
  margin-top: -250px;
}
/* ---arcadia page end---- */
/* --premium page start--- */
.premium-main {
    background-image: url(../img/background-bmc.png);
    background-size: cover;
    padding: 100px 0px 50px 0px;
}
.premium-body {
    border-radius: 30px;
    box-shadow: 0 0px 60px rgba(0,0,0,0.60);
    overflow: hidden;
    background-image: url(../img/arked-bg.png);
    background-position: top;
    background-size: cover;
    background-repeat: no-repeat;
}
.premium-banner {
    position: relative;
}
.premium-banner-img img {
    width: 100%;
}
.premium-banner-content {
    position: absolute;
    left: 50%;
    bottom: 30px;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}
.premium-banner-logo {
    margin-bottom: 30px;
}
.premium-brand-text {
    font-size: 20px;
    color: #13572C;
    text-align: center;
    font-weight: 600;
    margin-top: 15px;
    margin-bottom: 30px;
}
.premium-brand-design {
    padding: 50px 0px;
}
.premium-brand-dot{
  text-align: center;
}
.premium-brand-dot img {
    max-width: 300px;
}
.premium-insta-grid{
  padding: 50px 0px 50px 0px;
  position: relative;
  z-index: 1;
}
.premium-insta-grid::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    height: 100%;
    background: rgba(19, 87, 44, 0.8);
    border-radius: 50%;
    -webkit-transform-origin: top;
    -moz-transform-origin: top;
    -o-transform-origin: top;
    transform-origin: top;
    -webkit-transform: translateX(-50%) scale(3);
    -moz-transform: translateX(-50%) scale(3);
    -o-transform: translateX(-50%) scale(3);
    transform: translateX(-50%) scale(3);
    z-index: -1;
}
.premium-insta-img {
    text-align: center;
    padding-bottom: 30px;
}
.premium-insta-img img {
    max-width: 400px;
}
.premium-insta-row {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    max-width: 1000px;
    margin: 0 auto;
    justify-content: center;
    border-radius: 100px;
    overflow: hidden;
}
.premium-insta-col {
    width: 33.333%;
    padding: 1px;
}
.premium-insta-card {
    /* background-color: #fff;
    box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
    border-radius: 10px;
    padding: 10px; */
}
.premium-insta-card-img {
    position: relative;
}
.premium-insta-overlay {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    height: 100%;
    width: 100%;
    justify-content: center;
    background-color: rgba(19, 87, 44, 0.4);
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    -webkit-transition: opacity 0.3s ease-in-out;
    -moz-transition: opacity 0.3s ease-in-out;
    -o-transition: opacity 0.3s ease-in-out;
}
.premium-insta-overlay a {
    color: #FFF;
    font-size: 50px;
}
.premium-insta-card-img:hover .premium-insta-overlay {
    opacity: 1;
}
/* ----premium page end -----*/
/* ----instfluencer page start--- */
.instafluencer-main {
    background-image: url(../img/bg-back.jpg);
    background-size: cover;
    padding: 100px 0px 50px 0px;
}
.instfluencer-body{
  box-shadow: 0 0px 60px rgba(0,0,0,0.60);
  overflow: hidden;
}
.instfluencer-banner{
  position: relative;
  background-color: #fff;
}
.instfluencer-banner-img img {
    width: 100%;
}
.instfluencer-banner-content{
  position: absolute;
  text-align: center;
    left: 0;
    top: 150px;
    width: 100%;
}
.instfluencer-banner-content h2{
  color: #fff;
    font-size: 60px;
    font-family: "Sunmora-Bold-700";
}
.instfluencer-banner-content h2 span{
  color: #17CEFC;
}
.instfluencer-bell{
  position: absolute;
  right: 0px;
  top: 80px;
}
.instfluencer-bell img{
  max-width: 80px;
}
.instfluencer-design{
  position: absolute;
  left: 0;
  bottom: -160px;
  max-width: 250px;
  z-index: 1;
}
.instfluencer-design img{
  width: 100%;
  opacity: 0.8;
}
.instfluencer-design-text-1{
  position: absolute;
  left: 0px;
  bottom: 23px;
  width: 250px;
  text-align: center;
  z-index: 2;
}
.instfluencer-design-text-1 h3{
  color: #0970B0;
  font-size: 30px;
  font-family: "Sunmora-Bold-700";
  text-transform: uppercase;
}
.strangest{
  padding: 50px 0px;
  background-color: #fff;
  position: relative;
}
.strangest-dot{
  text-align: center;
}
.strangest-dot img {
    max-width: 400px;
}
.strangest-main{
  text-align: center;
  margin-bottom: 30px;
}
.strangest-main img{
  max-width: 800px;
}
.strangest-design-1{
  position: absolute;
  left: -64px;
  bottom: 0;
}
.strangest-design-1 img{
  max-width: 250px;
  -webkit-transform: scaleX(-1);
  -moz-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  transform: scaleX(-1);
}
.strangest-design-2{
  position: absolute;
  right: 0;
  top: 0;
  z-index: 2;
}
.strangest-design-2 img{
  max-width:300px;
}
.instfluencer-design-text-2{
  position: absolute;
  right: 15px;
  bottom: 160px;
  z-index: 3;
}
.instfluencer-design-text-2 h3{
   color: #0970B0;
  font-size: 30px;
  font-family: "Sunmora-Bold-700";
  text-transform: uppercase;
  text-align: center;
}
.instfluencer-design-text-2 h3 span{
  display: block;
  font-size: 24px;
}
.instafluencer-insta-grid{
  padding: 0px;
  position: relative;
  background-color: #fff;
  z-index: 1;
  /* background-image: url('../img/service-4.png');
  background-size: cover; */
}
.instafluencer-insta-grid::after{
  content:  '';
   display:block;
   right: 0px;
   position: absolute;
   top: -150px;
   width: 100%;
   height: calc(100% + 150px);
   background-image: url('../img/service-4.png');
   background-size: cover;
   background-repeat: no-repeat;
   z-index: -1;
}
.instafluencer-row{
  display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    max-width: 1000px;
    margin: 0 auto;
    justify-content: center;
    border-radius: 30px;
    overflow: hidden;
    margin-bottom: 30px;
}
.instafluencer-col{
  width: 33.333%;
}
.instafluencer-card-img {
    position: relative;
}
.instafluencer-overlay {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    height: 100%;
    width: 100%;
    justify-content: center;
    background-color: rgba(23,206,252, 0.4);
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    -webkit-transition: opacity 0.3s ease-in-out;
    -moz-transition: opacity 0.3s ease-in-out;
    -o-transition: opacity 0.3s ease-in-out;
}
.instafluencer-overlay a {
    color: #FFF;
    font-size: 50px;
}
.instafluencer-card-img:hover .instafluencer-overlay {
    opacity: 1;
}
.instafluencer-reels-title{
  color: #0970B0;
  font-size: 60px;
  font-family: "Sunmora-Bold-700";
  text-transform: uppercase;
  text-align: center;
  position: relative;
  display: inline-block;
}
.instafluencer-reels-title::after{
   content: '';
   display: inline-block;
   right: -85px;
   position: absolute;
   top: 33px;
   width: 250px;
   height: 250px;
   background-image: url('../img/border-design.png');
   background-size: contain;
   background-repeat: no-repeat;
}
.instafluencer-reels{
  text-align: center;
  padding-bottom: 200px;
}
/* ----instfluencer page end--- */

.portfolio-line-1{
  position: absolute;
    width: 100%;
    top: 59px;
    right: 272px;
    z-index: 1;
    max-width: 200px;
    opacity: 0;
}
.portfolio-main-add .portfolio-line-1{
  opacity: 1;
}

.portfolio-main-add .portfolio-line-1 path{
  fill: none;
  stroke-width: 6;
  stroke: #43B0BD;
  stroke-miterlimit: 10;
 stroke-dasharray: 400;
 stroke-dashoffset:400;
  /* animation: animation-3 12s linear forwards; */
  animation-delay: 2s;
}
.portfolio-design-1 {
    position: relative;
    max-width: 394px;
    margin: 0 auto;
}

.portfolio-design-2 {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
}
.portfolio-line-2 {
    position: absolute;
    width: 100%;
    top: 40px;
    left: -81px;
    z-index: 0;
    /* max-width: 800px; */
    opacity: 0;
}
.portfolio-main-add-2  .portfolio-line-2{
  opacity: 1;
}
.portfolio-main-add-2 .portfolio-line-2 path{
  fill: none;
  stroke-width: 8;
  stroke: #43B0BD;
  stroke-miterlimit: 10;
 stroke-dasharray: 2500;
 stroke-dashoffset: 2500;
  /* animation: animation-3 12s linear forwards; */
  animation-delay: 2s;
}
.portfolio-inner{
  overflow: hidden;
}
/* --- */

.contact-svg-2{
  position: absolute;
    width: 100%;
    top: 24px;
    right: -182px;
    z-index: -1;
    max-width: 225px;
    opacity: 0;
}
 .contact-main-add-2 .contact-svg-2{
  opacity: 1;
}
 .contact-main-add-2 .contact-svg-2 svg{
    height: 236px;
  }
 .contact-main-add-2 .contact-svg-2 path{
  fill: none;
  stroke-width: 6px;
  stroke: #3BC5D2;
  stroke-miterlimit: 10;
 /* stroke-dasharray: 440;
stroke-dashoffset: 440; */
}
.lest-talk-text {
    position: relative;
}
/* --- */
.contact-svg-1{
 position: absolute;
    width: auto;
    top: 3px;
    right: 46px;
    z-index: -1;
    height: 150px;
    opacity: 0;
    overflow: hidden;
}
 .contact-main-add-1 .contact-svg-1{
  opacity: 1;
}
  .contact-main-add-1 .contact-svg-1 svg{
    height: 150px;
  }
 .contact-main-add-1 .contact-svg-1 path{
  width: 6px;
  fill: none;
  stroke-width: 6px;
  stroke: #3BC5D2;
  stroke-miterlimit: 10;
 stroke-dasharray: 0;
stroke-dashoffset:0; 
}
.contact-design-1{
    position: relative;
}
.model-bg{
  background-color: #EB8040;
}
.model-bg .close{
  opacity: 1;
  color: #fff;
  text-shadow: none;
}
/* --- */
.circle{
  width: 239px;
  height: 239px;
  position: absolute;
  left: 6px;
  top: 11px;
  transform: rotate(293deg);
  
}
.text {
  /* position: absolute; */
  width: 100%;
  height: 100%;
  color: #fff;
  font-size: 17px;
}

.text span {
  position: absolute;
  left: 50%;
  font-size: 1.2em;
  transform-origin: 0 130px;
}