*{
    padding:0;
     margin:0;
     box-sizing:border-box;
}
:root{
    --primary-color:#FBB03B;
}
img{
    max-width:100%;
}
body{
    font-size:16px;
    font-family: 'Poppins', sans-serif;
    overflow-x:hidden;
}
.content-wrapper p,
.content-wrapper h1,
.content-wrapper h2,
.content-wrapper h3,
.content-wrapper h4,
.content-wrapper h5,
.content-wrapper h6{
  color:#fff;
}
.logo {
  margin: 10px 13px;
  position: absolute;
  right: 0;
  bottom: 0;
  animation-delay:1s;
}
.logo img {
  height: 75px;
}
ul,li{
  list-style: none;
}
section {
  position: relative;
  z-index: -1;
}
/*menu styl here*/
.toggle, [id^=drop] {
   display: none;
  }
  nav {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    padding: 20px 0 0;
    animation-delay:2s;
  } 
  nav:after {
    content: "";
    display: table;
    clear: both;
  }  
  
  nav ul {
    float: left;
    padding: 0;
    margin: 0;
    list-style: none;
    position: relative;
  }
  
  nav ul li {
    margin: 0px;
    display: inline-block;
    float: left;
    position: relative;
  }
  
  nav a {
/*    display: block; */
    margin: 0 20px;
    color: rgb(0, 0, 0);
    font-size: 17px;
    /* line-height: 60px; */
    text-decoration: none;
    padding-bottom: 8px;
  }
  
  /* nav ul li ul li:hover { background: #000000; }
  
  nav a:hover { background-color: #000000; } */
  
  nav ul ul {
    display: none;
    position: absolute;
    top:100%;
    background:var(--primary-color);
    padding: 10px 0;
    z-index: 99;
  }
  
  nav ul li:hover > ul { display: inherit; }
  nav ul li:hover > a {
    color:var(--primary-color);
   }
  nav ul li:hover > ul li a {
      color:#000;      
  }
  nav ul ul li:hover a {
    text-decoration: underline;
  }
  nav ul ul li {
    /* width: 235px; */
    float: none;
    display: list-item;
    position: relative;
    text-align: center;
    margin-bottom: 10px;
    padding: 0 15px;
  }
  nav ul ul li a {
    margin: 0;
    font-size: 15px;
    padding-bottom: 0;
  }
  nav ul ul li::after{
    display: none;
  }
  nav ul ul ul li {
    position: relative;
    top: -60px;
    left: 170px;
  }
  
  /* li > a:after { content: ' +'; } */
  .menu li:after { 
    content: '';
    position: absolute;
    width: 2px;
    height: 27px;
    background: #000000;
    /* right: 0; */
    top:0px;
    /* bottom: auto; */
  }  
  .menu li:last-child:after {
    display:none;
  } 
  li > a:only-child:after { content: ''; }
/*menu end here*/
.boxSection {
    width: 100%;
    float: left;
    display: flex;
    justify-content: center;
    align-items: center;
    height:92vh;
}

.logoImg2 {
    /* width: 40%; */
    width: 180px;
    /* position: absolute; */
}  


.dot{
  position: absolute;
}
/* .dot1{   
    left: -12px;
} */
.dot::before,
.dot::after{
  content:'';
  position:absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.dot::before{
  background: #5E626D;
}
.dot::after{
  position: absolute;
  width: 40px;
  height: 40px;
  background: rgba(0, 0, 0, 0.3);
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  border-radius: 100%;
  left: -15px;
  top: -15px;
   -webkit-animation: waves 3s ease-in-out infinite;
  animation: waves 3s ease-in-out infinite;
}
/* .dot::after:nth-child(1){
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}

.dot::after:nth-child(2) {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}

.dot::after:nth-child(3) {
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
} */
@keyframes waves {
  0% {
    -webkit-transform: scale(0.2, 0.2);
    transform: scale(0.2, 0.2);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  }
  50% {
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
  }
  100% {
    -webkit-transform: scale(0.9, 0.9);
    transform: scale(0.9, 0.9);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  }
}

/*box1 style here*/
.box1 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 520px;
  height: 520px;
  border: 13px solid #FDF731;
  border-radius: 50%;
  position: absolute;
}
.dot1 {
  right: 178px;
  top: -1px;
}
.contentBox img {
  width: 100px;
}
.clientLogo {
  padding: 6px 0;
  display: flex;
  align-items: center;
}
.dot2 {
  right: 28px;
  bottom: 374px;
}
.dot3 {
  bottom: 88px;
  right: 58px;
}
.dot4 {
  bottom: -2px;
  right: 240px;
}
.dot5 {
  top: 302px;
  right: 498px;
}
.dot6 {
  top: 72px;
  right: 441px;
}
.dot7 {
  bottom: 83px;
  right: 442px;
}
.dot8 {
  right: 490px;
  bottom: 163px;
}
.dot9 {
  top: 169px;
  left: -2px;
}
.dot10 {
  top: 89px;
  left: 39px;  
}
.dot11 {
  top: 30px;
  left: 102px;
}




/*box1 style end here*/
/*box2 style here*/
.box2 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 460px;
  height: 460px;
  border: 13px solid #FAB237;
  border-radius: 50%;
  position: absolute;
}
.dot2-1 {
  top: 145px;
  right: 8px;
}
.dot2-2 {
  bottom: 55px;
  right: 74px;
}
.dot2-3 {
  bottom: 35px;
  right: 344px;
}
.dot2-4 {
  top: 192px;
  right: 444px;
}
.dot2-5 {
  top: 114px;
  right: 423px;
}
.dot2-6 {
  top: 48px;
  right: 373px;
}
/*box2 style end here*/

/*box3 style here*/
.box3 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 400px;
  height: 400px;
  border: 13px solid #EC3237;
  border-radius: 50%;
  position: absolute;
}

.dot3-1 {
  right: 37px;
  top: 65px;
}
.dot3-2 {
  left: 341px;
  bottom: 83px;
}
.dot3-3 {
  left: 208px;
  bottom: 0px;
}
.contentBox.contBoxSec {
  left: unset;
  right: 15px;
  text-align: right;
}
.contentBox.contBoxSec::before {
  border-top: 6px solid transparent;
  border-right: none;
  border-left: 22px solid white;
  border-bottom: 7px solid transparent;
  left: unset;
  right: -21px;
}
.contentBox.contBoxSec::after {
  content: '';
  position: absolute;
  left: unset;
  right: -22px;
  top: -1px;
  border-top: 8px solid transparent;
    border-right: none;
    border-left: 23px solid rgb(0 0 0 / 58%);
    border-bottom: 8px solid transparent;
  z-index: -1;
}
.dot3-4 {
  left: -8px;
  top: 215px;
}
.dot3-5{
  left: 28px;
  top: 65px;
}
.contentBox {
  position: absolute;
    /* min-width: 110px; */
    min-width: max-content;
    background: #fff;
    left: 26px;
    /* box-shadow: rgb(0 0 0 / 35%) 0px 5px 15px; */
    box-shadow: 0px 0px 4px 1px #000;
    font-size: 14px;
    font-weight: 500;
    z-index: 9;
    /* opacity:0;
    visibility: hidden; */
    -webkit-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
    display: none;
}
.contentBox a{
  padding: 3px 5px;
  color: #000;
  text-decoration: none;
  display:flex;
  align-items: center;
  font-size: 16px; 
}
.contentBox:hover a{
  color:var(--primary-color); 
}
.dot:hover .contentBox{
  /* opacity:1;
  visibility:visible; */
  display: block;
}

.contentBox::before {
  content: '';
  position: absolute;
  left: -21px;
  top: 0px;
  border-top: 7px solid transparent;
  border-right: 22px solid white;
  border-left: none;
  border-bottom: 6px solid transparent; 
}
.contentBox::after {
  content: '';
  position: absolute;
  left: -22px;
  top: -1px;
  border-top: 8px solid transparent;
  border-right: 23px solid rgb(0 0 0 / 58%);
  border-left: none;
  border-bottom: 8px solid transparent;
  z-index: -1;
}
/*box3 style end here*/



  

.dot .contentBox {
  transform-origin: top center;
  animation: translateX 300ms 60ms ease-in-out forwards;
  perspective: 1000px;
}
@-moz-keyframes translateX {
  0% {
    opacity: 0;
    transform: translateX(60px);
  }
  80% {
    transform: translateX(-5px);
  }
  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}
@-webkit-keyframes translateX {
  0% {
    opacity: 0;
    transform: translateX(60px);
  }
  80% {
    transform: translateX(-5px);
  }
  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}
@-o-keyframes translateX {
  0% {
    opacity: 0;
    transform: translateX(60px);
  }
  80% {
    transform: translateX(-5px);
  }
  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}
@keyframes translateX {
  0% {
    opacity: 0;
    transform: translateX(60px);
  }
  80% {
    transform: translateX(-5px);
  }
  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}



/*tabs style here*/
.tab-content {
  display: none;
  color: rgb(255, 255, 255);
  font-weight: 300;
  font-size: 15px;
  opacity: 0;
  transform: translateY(15px);
  animation: fadeIn 0.5s ease 1 forwards;
}

.tab-content.active {
  display: initial;
}

@keyframes fadeIn {
  100% {
    opacity: 1;
    transform: none;
  }
}
.content-wrapper {
  position: absolute;
    width: 823px;
    background: #000000bf;
    right: 47px;
    /* border-radius: 0 95px 95px 0; */
    min-height: 208px;
    /* opacity: 0.5; */
    padding: 15px 15px 15px 15px;
    /* border-radius: 0 20px 20px 0; */
    z-index: 0;
    top: 83px;
    /* border-right: 22px solid white;*/  
    animation-delay: 6s;  
    overflow-y: auto;
  }
 .sapBox{
  animation-delay: 6s;  
}
   
/* .content-wrapper::after {
  content: '';
  position: absolute;
  right:-60px;
  top: 0px;
  background: #000000bf;
  min-height: 195px;
  clip-path: ellipse(75% 54% at 25% 50%);
  clip-path: polygon(77% 14%, 69% 5%, 97% 37%, 96% 67%, 92% 71%, 71% 89%, 55% 98%, 0% 115%, 0% 0%, 52% 0%);
  clip-path: polygon(100% 8%, 100% 17%, 100% 23%, 100% 71%, 100% 79%, 100% 88%, 100% 100%, 0 100%, 0 0, 100% 0);
  width:60px;
  min-height: 208px;
  z-index: 1;
} */
.sapBox {
  position: absolute;
  right: -10px;
  /* right: -13px; */
  top: 83px;
  background: #000000bf;
  min-height: 195px;
  clip-path: ellipse(75% 54% at 25% 50%);
  /* clip-path: polygon(77% 14%, 69% 6%, 95% 33%, 102% 53%, 93% 70%, 72% 88%, 56% 97%, 0% 110%, 0% 0%, 52% 0%); */
  clip-path: polygon(77% 14%, 69% 6%, 95% 33%, 102% 53%, 93% 70%, 72% 87%, 56% 96%, 0% 115%, 0% 0%, 45% 0%);
  width: 57px;
  /* width: 60px; */
  min-height: 208px;
  /* min-height: 210px; */
  z-index: -1;
}
.right ul li {
  width: 90px;
  height: 82px;
  display: flex;
  justify-content: center;
  align-items: center;
  /* float: left; */
  display:inline-block;
  margin-right: 3px;
  overflow: hidden;
  position: relative;
  padding: 1px;
  background: #fff;
  text-align: center;
}
.innerContentWra {
  height: 170px;
  overflow-y: auto;
  display: flex;
  /* align-items: center; */
}
.mainBox {
  display: flex;
  justify-content: center;
  align-items: center;
}
ul.mainBox li {
  list-style: none;
  font-size: 17px;
  padding: 0 15px;
  color:#fff;
}
.leftBox {
  width: 50%;
  padding-left: 89px;
  padding-left: 20px;
  padding-right: 20px;
}
.leftBox p{
  color:#fff;
}
.right {
  width: 50%;
  /* padding-left: 45px; */
  text-align: left;
}
/*scroll style here*/
/* width */
.innerContentWra::-webkit-scrollbar {
  width: 10px;
}

/* Track */
.innerContentWra::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
 
/* Handle */
.innerContentWra::-webkit-scrollbar-thumb {
  background: #888; 
}

/* Handle on hover */
.innerContentWra::-webkit-scrollbar-thumb:hover {
  background: #555; 
}
/*scroll style end here*/
/*what-we page style*/
.what-we{
  position: relative;
}
.what-we .box2 .sapBox{
  top: 113px;
}
.what-we .box2 .content-wrapper {
  width: 852px;
}
/*what-we page end style*/
/*our-work page style*/
.our-work .box1 .sapBox {
  top: 143px;
}
.our-work .box1 .content-wrapper {
  width: 882px;
}

.boxSection.our-work .con{
  left: 155px;
}
.boxSection.our-work .content-wrapper{
  width: 882px;
}
.boxSection.our-work .box1{
  animation-delay: 4s;
}
.boxSection.our-work .box1 .dot{
  animation-delay: 5s;
}
.boxSection.our-work .con{
  animation-delay: 5s;
}
.boxSection.our-work .box1 .dot5 {
  top: 372px;
  right: 468px;
}



/*our-work page end style*/

/* animation style */
@-webkit-keyframes cricleBox {
  0% {
    opacity: 0;
    -webkit-transform: scale(.3);
    transform: scale(.3);
  }
  50% {
    opacity: 1;
  }
}
@keyframes cricleBox {
  0% {
    opacity: 0;
    -webkit-transform: scale(.3);
    -ms-transform: scale(.3);
    transform: scale(.3);
  }
  50% {
    opacity: 1;
  }
}
.box1{
  -webkit-animation-name: cricleBox;
  animation-name: cricleBox;  
  animation-delay: 6s;
  animation-timing-function: linear;
}
.box2{
  animation-delay: 5s;
  -webkit-animation-name: cricleBox;
  animation-name: cricleBox;  
  animation-timing-function: linear;
}
.box3{
  animation-delay: 4s;
}
.logoImg2{
  animation-delay:3s;
  -webkit-animation-name: cricleBox;
  animation-name: cricleBox;  
  animation-timing-function: linear;
}
.con {
  position: relative;
    top: -190px;
    left: 270px;
  /* animation-delay:8s; */
}
.inlogo{
  z-index:-1;
}
.aboutPage .dot{
  animation-delay:5s;
}
.aboutPage .dot3-4 {
  left: 30px;
  top: 301px;
}
.aboutPage .dot3-5 {
  left: 45px;
  top: 45px;
}
.innMain {
  padding-left: 15px;
  /* padding: 15px; */
}
.content-wrapper h5 {
  color: #fff;
  margin-top: 10px;
}
.dot{
  animation-delay:7s;
}
.aboutPage .logoImg2{
  z-index: -1;
}

.slideInLeftBox{
  animation-delay:3s;
}
h2 {
  font-size: 20px;
  color: #ffff;
  margin-bottom: 13px;
}
/* .innerContentWra > div h2 {
  padding-left: 15px;
} */


.content {
  transition: 0.8s all ease;
  transform: translateY(0);
  opacity: 0;
  text-align: center;
  background: #ffffffa6;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 81px;
  left: 0;
  display:flex;
  align-items:center;
}
.right ul li:hover .content {
  transform: translateY(-82px);
    opacity: 1;
}
h3 {
  color: #E25F27;
  line-height: 20px;
  font-size: 19px;
}
.right ul li .content h3 {
  color: #E25F27;
}
.content p {
  font-size: 9px;
  color: #E25F27;
}
/*tabs style end here*/



/*why360 style here*/
.boxSection.why360 .dot2-3 {
  bottom: -1px;
  right: 235px;
}
.boxSection.why360 .dot2-4 {
  bottom: 99px;
  right: 409px;
  top: auto;
}
.boxSection.why360 .dot2-5 {
  right: 398px;
  top: 73px;
}
.boxSection.why360 .dot2-6 {
  right: 315px;
  top: 9px;
}


.why360 .box2{
  animation-delay:4s;
}
.why360 .dot{
  animation-delay:5s;
}
.boxSection.why360 .con{
  left: 125px;
}
.boxSection.why360 .content-wrapper{
  width: 851px;
}
/* .why360 .box2 .dot2-4 {
  top: 74px;
  right: 398px;
} */
/*why360 style end here*/
/*contactPage style here*/
.contactPage .content-wrapper{
  width: 814px;
  z-index: 9;
  min-height: 238px;
  top: 77px;
  right: 54px;
}
.contactPage .sapBox{
  /* z-index: 5; */
  top: 77px;
  min-height: 238px;
}
.contactPage .box1{
  z-index: 0;
}
.contactPage .sapBox{
  right: -3px;
}
.boxSection.contactPage .con {
  left: 275px;
}
.boxSection.contactPage .con .content-wrapper,
.boxSection.contactPage .con .sapBox
{
  animation-delay:6s;
}
.contactPage .innerContentWra {
  height: 208px;
}
.contactPage .innMain li,
.contactPage .innMain li a {
  color: #fff;
  text-decoration: none;
}

.contactPage .dot7 {
  bottom: 21px;
  right: 357px;
}
.contactPage .dot8 {
  right: 421px;
  bottom: 63px;
}
.contactPage .dot9{
  top: 77px;
  left: 49px;
}
.contactPage .dot10{
  top: 39px;
  left: 90px;
}
.contactPage .dot11{
  top: 4px;
  left: 154px;
}
.contactPage .dot2-1{
  top: 45px;
  right: 72px;
}
.contactPage .dot2-2{
  bottom: 21px;
  right: 124px;
}
.contactPage .dot2-3 {
  bottom: 0px;
  right: 204px;
}
.contactPage .dot2-4 {
  top: 402px;
  right: 339px;
}
.contactPage .dot2-5 {
  top: 64px;
  right: 391px;
}
.contactPage .dot2-6 {
  top: 22px;
  right: 340px;
}
.contactPage .dot3-1 {
  right: 111px;
  top: 6px;
}
.contactPage .dot3-2 {
  left: 298px;
  bottom: 37px;
}
.contactPage .dot3-4 {
  left: 96px;
  top: 355px;
}
.contactPage .dot3-5 {
  left: 58px;
  top: 34px;
}
.lg-outer #lg-share,.lg-outer #lg-actual-size{
  display:none;
}


/*contactPage style end here*/
.innerContentWra.rightScroll{
  height: auto!important;
  overflow-y: unset;
  display: flex;
  align-items: center;
}
.innerContentWra.rightScroll .right{
  overflow-y: auto;
  height: 170px;
}
/*scroll style here*/
/* width */
.innerContentWra.rightScroll .right::-webkit-scrollbar {
  width: 10px;
}

/* Track */
.innerContentWra.rightScroll .right::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
 
/* Handle */
.innerContentWra.rightScroll .right::-webkit-scrollbar-thumb {
  background: #888; 
}

/* Handle on hover */
.innerContentWra.rightScroll .right::-webkit-scrollbar-thumb:hover {
  background: #555; 
}
/*scroll style end here*/

/*Client Page style here*/
.innerContentWra.clientBoxSlider{
  display: block;
  align-items: unset;
  height: unset;
  overflow-y: unset;
}
.clientsCarousel .owl-nav {
  position: absolute;
  bottom: -50px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0 auto;
  width: 100%;
  text-align: center;
}
.clientsCarousel .owl-nav .owl-prev,
.clientsCarousel .owl-nav .owl-next{
  font-size:0;
  display: inline-block;
  margin: 0 15px;
}
.clientsCarousel .owl-nav .owl-prev::before,
.clientsCarousel .owl-nav .owl-next::before{
  font-family:'FontAwesome';
  font-size:35px;
  color:#fff;
}
.clientsCarousel .owl-nav .owl-prev::before{
  content:'\f104';
 
}
.clientsCarousel .owl-nav .owl-next::before{
  content:'\f105';
}
/*Client Page style end  here*/
/* .teamPage .right {
  padding-left: 45px;
  text-align: end;
} */
.innMain ul {
  padding: 11px 0 11px 17px;
}
.innMain ul li {
  color: #fff;
  margin-top: 5px;
  list-style: disc;
}
.lg-sub-html{
  position: static;
}
.lg-outer.lg-pull-caption-up.lg-thumb-open .lg-sub-html{
  top:0;
}







  
  /* Media Queries
  --------------------------------------------- */  
  @media only screen and (max-width: 1200px) {
    .content-wrapper{
      width: 723px;
    }
  }
  @media only screen and (max-width: 1199px) {
    .mainConainer.p0 {
      padding-top: 47px;
    }
    .boxSection.our-work .content-wrapper {
      width: 786px;
    }
  }
  @media only screen and (max-width: 1140px) {
    /*about style here*/
   
    /* .con{
      left: 234px;
    } */
    .con {
      left: 270px;
    }
    /* .content-wrapper{
      width: 593px;
    } */
    .content-wrapper {
      width: 645px;
    }
    /* .aboutPage .dot3-4 {
      left: 60px;
      top: 278px;
    } */
    .aboutPage .dot3-4 {
      left: 47px;
      top: 318px;
    }
    /*about style end here*/
    
    .boxSection.our-work .content-wrapper {
      width: 705px;
    }
    .leftBox{
      padding-left: 0;
      padding-right:0;
    }
    .right{
      padding-left: 0;
    }
    .contactPage .content-wrapper {
      width: 634px;
    }
    .boxSection.why360 .content-wrapper {
      width: 662px;
    }
    .indBox {
      padding-top: 45px;
    }

  }
  @media only screen and (max-width:1025px) {
    .mainConainer.p0{
      padding-top:225px;
    }  
  }
  @media only screen and (max-width:1024px) {
    .con {
      left: 268px;
    }
    .aboutPage .dot3-4 {
      left: 46px;
      top: 318px;
    }
    .content-wrapper {
      width: 642px;
    }
    .innMain{
      padding-top: 40px;
    }
    .logo img {
      height: 45px;
    }
    .boxSection{
      height:auto;
    }
    .indBox{
      padding-top:225px;
    }
    
  }
  @media only screen and (max-width: 992px) {
    .mainConainer.p0 {
      padding-top:0px;
    }
    .box1{
      width: 450px;
      height: 450px;
    }
    /*box 1 dot style here*/
    .dot1 {
      right: 178px;
      top: -9px;
    }
    .dot2 {
      right: 65px;
    }
    .dot3 {
      bottom: 66px;
    }
    .dot5{
      right: 414px;
    }
    .dot6{
      right: 389px;
    }
    /*box 1 dot style end  here*/
    /*box 1 style end here*/
    
    
    /*box 2 style here*/  
    /*box 2 dot style here*/
    .box2{
      width: 390px;
      height: 390px;
    }
    .dot2-2 {
      bottom: 84px;
      right: 29px;
    }
    .dot2-3 {
      right: 298px;
    }
    .dot2-4 {
      right: 375px;
    }
    .dot2-5 {
      right: 365px;
    }
    /*box 2 dot style end here*/
    /*box 2 style end here*/
  
    /*box 3 style here*/  
    /*box 3 dot style here*/
    .box3{
      width: 330px;
      height: 330px;
    }
    .dot3-1 {
      right: 21px;
    }
    .dot3-2 {
      left: 287px;
    }
    .dot3-3 {
      left: 192px;
      bottom: 5px;
    }
    .dot3-4 {
      left: 5px;
    }
    /*box 3 style end here*/  
    /*box 3 dot style end  here*/
  
    /*about style here*/
    .aboutPage{
  
    }
    .mainConainer .dot{
      display:none;
    }
    .mainConainer.p0 .box3,
    .mainConainer.p0 .box2,
    .mainConainer.p0 .box1
    {
      width: 400px;
      height: 400px;
    }
    .mainConainer .con {
      left: 0!important;
      top: 0!important;
    }
    .mainConainer .content-wrapper {
      position: unset;
      width: 523px!important;
      right:0;
    }
    .logoImg2{
      position: absolute;
    }
    .innMain{
      padding:0px;
    }
    .mainConainer .innerContentWra {
      height: 318px;
      align-items: self-start;
    }
    .sapBox{
      display:none;
    }
    .aboutPage {
      overflow-x: clip;
    }
    /*about style end here*/
    .p0 {
      margin-top: 120px;
    }
    .boxSection{
      height: auto;
    }
    .indBox{
      padding-top: 265px;
    }
    .teamPage .mainBox .leftBox{
      padding-left: 0;
    }
    .clientsCarousel {
      margin-top: 55px;
    }
    .reTwoBox .mainBox {
      flex-direction: column;
    }
    .reTwoBox .mainBox .leftBox {
      width: 100%;
      padding-left: 0;
      text-align: center;
      margin-bottom: 19px;
    }
    .reTwoBox .mainBox .right{
      width: 100%;
    }
    .reTwoBox .mainBox .right {
      width: 100%;
      padding-left: 0;
      text-align: left;
    }
    
  }
  
  @media all and (max-width : 768px) {  
    #logo {
      display: block;
      padding: 0;
      width: 100%;
      text-align: center;
      float: none;
    }  
    nav { margin: 0; }  
    .toggle + a{display:none;} 
    .menu {
      position:fixed;
      left: 0;
      z-index: 999;
      -webkit-transition: all 0.7s ease 0s;
      -o-transition: all 0.7s ease 0s;
      transition: all 0.7s ease 0s;
      -webkit-transform: translateX(-100%);
      -ms-transform: translateX(-100%);
      transform: translateX(-100%); 
      /* display:none; */
    }   
    .barBox{
      background: var(--primary-color);
    } 
    .toggle {
      display: block;    
      padding: 0 20px;
      color: rgb(0, 0, 0);
      font-size: 17px;
      line-height: 60px;
      text-decoration: none;
      border: none;
    }  
    /* .toggle:hover { background-color: #000000; } */
    [id^=drop]:checked + ul { display: block; }
    #drop:checked + ul { 
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0);
      -webkit-transition: all 0.7s ease 0s;
      -o-transition: all 0.7s ease 0s;
      transition: all 0.7s ease 0s;
    }
    nav ul li {
      display: block;
      width: 100%;
      position: relative;
    }
    nav ul ul .toggle,
    nav ul ul a { padding: 0 40px; }
    nav ul ul ul a { padding: 0 80px; }
    nav a:hover,
    nav ul ul ul a { background-color: #000000; }
    nav ul li ul li .toggle,
    nav ul ul a { background-color: #212121; }
    nav ul ul {
      float: none;
      position: static;
      color: #ffffff;
    }
    nav ul ul li:hover > ul,
    nav ul li:hover > ul { display: none; }
    nav ul ul li {
      display: block;
      width: 100%;
    }
    nav ul ul ul li { 
      position: static;
    }
    nav{
      display:block;
      padding: 0;
    }
    .menuBox .toggle.barBox {
      float: right;
      font-size: 38px;
      width: 50px;
      height: 40px;
      padding: 0;
      text-align: center;
      position: relative;
      top: 20px;
      right: 10px;
    }
    .menu li:after{
      display:none;
    }
    .menu {
      background: #fbb03b;
      padding:0;
      width: 45%;
    }
    nav a{
      padding: 7px 20px;
      margin:0;
      display: block;
    }
    nav a:hover, nav ul ul ul a{
      background-color:transparent;
    }
    nav ul li:hover > a{
      color:#000;
    }
    nav ul li{
      float:unset;
      border-bottom: 1px solid #3d3d3d;
    }
    nav ul li:last-child{
      border-bottom:none;    
    }
    nav ul ul li {
      width: unset;
      display: block;
      text-align: left;
      margin-bottom:0;
    }
    nav ul ul a{
      background-color:transparent;
      padding: 7px 0 7px 20px!important;
    }
    .toggle{
      line-height: 40px;
    }
    /* [id^=drop1]:checked + .barIcon {
      display: none;
    }
    [id^=drop1]:checked + .closeIcon {
      display: block!important;;
    }
    .closeIcon{
      display:none;
    } */
    .logo img {
      height: 55px;
    }
    nav ul ul{
      padding:0;
    }
    .reBord{
      border-top: 1px solid #3d3d3d;
    }
    .logo {
      right: auto;
      bottom: auto;
      top: 0;
      left: 0;
      z-index: -1;
    }
    .indBox{
      padding-top: 280px;
    }
  
  
  }
  
  @media only screen and (max-width: 676px){
    /* .aboutPage .content-wrapper{
      height: 320px;
    } */
  }
  @media only screen and (max-width: 578px){
    /*About page style here*/
    /* .aboutPage .box3 {
      width: 350px;
      height: 350px;
    } */
    .aboutPage .box3 {
      width: 410px;
      height: 410px;
    }
    /* .aboutPage .con {
      left: 294px;
      top: -285px;
    } */
    
    .mainConainer .content-wrapper {
      /* width: 350px; */
      width: 412px!important;
      /* height: 350px; */
      height:320px;
    }
    .aboutPage .innerContentWra {
      height: 273px;
    }
    .innMain {
      padding-left: 0;
    }
    .indBox {
      padding-top: 300px;
    }
    /*About page style end here*/
    /*Team page style here*/
    .teamPage .mainBox{
      flex-direction: column;
    }
    .teamPage .mainBox .leftBox,
    .teamPage .mainBox .right{
        width:100%;
    }
    .teamPage .mainBox .right{
      text-align: center;
      margin-top: 35px;
      padding-left: 0;
    }
    /*Team page style end here*/
  
  }
  @media only screen and (max-width: 481px){
    .menu{
      width: 75%; 
    }
    .dot{
      display: none;
    }
    .logoImg2 {
      width: 90px
    }
    .box1 {
      width: 300px;
      height: 300px;
    }
    .box2 {
      width: 250px;
      height: 250px;
    }
    .box3 {
      width: 200px;
      height: 200px;
    }
    
  
    /* .aboutPage .box3 {
      width: 300px;
      height: 300px;
    } */
  
    .mainConainer .content-wrapper {
      width: 345px!important;
      height: 325px;
    }
    .mainConainer .innerContentWra {
      height: 175px;
    }
    .mainConainer .innerContentWra {
      height: 295px;
    }
    .innMain{
      padding-top: 0px;
    }
  
    .aboutPage.p0 .box3,
    .mainConainer.p0 .box2,
    .mainConainer.p0 .box1{
      width: 300px;
      height: 300px;
    }
    .indBox {
      padding-top: 240px;
    }
    .right ul li{
      width: 120px;
    }
    
  
  
  }
  @media only screen and (max-width: 360px){
    .mainConainer .content-wrapper {
      width: 305px!important;
    }
  }
  /* @media only screen and (max-width: 320px){
    .mainConainer .content-wrapper {
      width: 305px!important;
    }
  } */
  @media only screen and (max-width: 375px) and (orientation: landscape){
    .aboutPage {
      margin-top: 85px;
    }
    
  }
  @media all and (max-width : 330px) {
    nav ul li {
      display: block;
     }
  }