@import url('https://fonts.googleapis.com/css2?family=Teko:wght@300..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&family=Teko:wght@300..700&display=swap');
/* =========================================================================TOP NAVBAR SECTION START==================================================================== */

/* .mak{
  text-decoration: none !important;
} */

.fa-phone-alt{
  transform: rotate(93deg);
}
.top-navbar{
    color: white;
    list-style: none;
    display: flex;
    font-size: 14px;
    margin-left: 24%;
    padding-top: 1%;
}
.ul-top{
    color: white;
    list-style: none;
    display: flex;
    font-size: 14px;
    float: right;
    margin-right: 42%;
    margin-top: 1%;

}
.main-head{
background-color: #000000;
}
.li-top{
  margin-right: 10px;
}
/* =========================================================================TOP NAVBAR SECTION END==================================================================== */
/* =========================================================================MAIN NAVBAR SECTION START==================================================================== */

/* body {
  margin: 0;
  background-color: #f1f1f1;
  font-family: Arial, Helvetica, sans-serif;
} */

#navbar {
  background-color:#222429;
  position: fixed;
  top: 0px;
  width: 100%;
  display: block;
  transition: top 0.3s;
  font-family: "Teko", sans-serif;
  z-index: 9999 !important; 
}
#trans-navbar{
  background-color:transparent;
  position: fixed;
  top: 33px;
  width: 100%;
  display: block;
  transition: top 0.3s;
  font-family: "Teko", sans-serif;
  z-index: 9999 !important; 
}
/* #trans-navbar a{
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 15px;
  text-decoration: none;
  font-size: 17px;
} */

/* #navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 15px;
  text-decoration: none;
  font-size: 20px;
} */
/* #trans-navbar a:hover{
  border-bottom: 2px solid #ffaa17;

} */

/* #navbar a:hover {
  /* background-color: #ddd;
  color: black; */
  /* border-bottom: 2px solid #ffaa17; */
  .top-navbar{
   
    font-size: 11px;
    margin-left: 14%;
   
  }
  .nav-underline{
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 15px;
    text-decoration: none;
    font-size: 17px;
  
  }
  .nav-underline:hover{
    border-bottom: 2px solid #ffaa17;
    color: white;
  
  }
/* } */ */
.banner{
  padding:15px 15px -1px;
  font-size:30px
}
.banner-img{
  background-image: url('../images/creative-1-slider-1.webp');
  height: 500px;
  background-size: cover;
  width: 100%;
}
.navbar-top{
  margin-right: 17%;
}
.nav-logo{
  width: 23%;
  margin-top: 10px;
  margin-left: 17%;
}
.nav-logo2{
  margin-top: 10px;
  margin-left: 17%;
  width: 19%;
}


/* transperent navbar  */
/* .transp-navbar{
  background-color: transparent !important;
} */
/* 
#trans-navbar {
  transition: transform 0.3s ease;
}

#trans-navbar.hidden {
  transform: translateY(-100%);
} */

/* .nav-up {
  top: -10px;
} */
/* .hidden-navbar {
  display: none !important;
} */
/* Add this style to your CSS */
#navbar {
  background-color: #333;
  padding: 15px;
  color: white;
  position: fixed;
  width: 100%;
  transition: top 0.3s;
}


.navbar-collapse {
  flex-grow: unset !important;
}
.main-head{
  height: 37px;
}
/* .navbar-toggler2{
  display: none;
} */
/* =========================================================================MAIN NAVBAR SECTION END==================================================================== */



/* =========================================================================CAROUSEL SECTION START==================================================================== */

.carousel-caption{
  bottom: 25.25rem !important;
  left: 11% !important;
  text-align: left !important;
  font-family: "Teko", sans-serif;
}
.p-banner{
  font-size: 25px;
  letter-spacing: 0.05em;
}
/* .w3-animate-bottom{
  font-family: "Teko", sans-serif !important;
  position: relative;
    animation: animatebottom 0.2s;
} */
.h1-banner{
  font-size: 91px;
  line-height: 91px;
  letter-spacing: 0.05em;
  font-family: "Teko", sans-serif !important;
  
}

.discover-btn{
  font-size: 17px !important;
  line-height: 15px !important;
  letter-spacing: 0.1em !important;
  padding: 19px 50px 16px !important;
}

/* .carousel-inner:hover{
  transform: scale(1.15);
  transition: all 7000ms linear;
 }  */
/*   */
/* .carousel-control-prev-icon{
  background-color: white;
  width: 50px;
  height: 50px;
  border-radius: 50%;
} */







@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.h1-banner {
  animation: fadeInUp 2s ease-in-out;
}
.p-banner{
  animation: fadeInUp 1s ease-in-out;

}
.banner-btn{
  animation: fadeInUp 3s ease-in-out;

}




/* =========================================================================CAROUSEL SECTION END==================================================================== */


/* =========================================================================SERVICE SECTION START==================================================================== */

.service-img{
  background-image: url('../images/pattern-1.jpg');
  width: 100%;
  height: 816px;
  background-size: cover;
}
.service-h2{
  color: #ffffff;
  font-weight: 400;
  font-size: 70px;
    line-height: 0.9em;
    text-transform: uppercase;
  font-family: "Teko", sans-serif;
  margin-top: 13%;
}
.service-h2 span{
  color:#ffaa17;
}
.service-p{
  color: white;
  color: #999b9f;
  font-size: 16px;
  font-weight: 400;
  /* font-family: "Teko", sans-serif; */
  font-family: "Rubik", sans-serif;
  line-height: 34px;
}
.service-box{
background-color: #1c1e22;
margin-top: 20%;
border-radius: 6px;
width: 17rem;
}
.service-box:hover{
  background-color: #ffaa17;
  color: black !important;
  transition: 0.5s;
}
/* .service-box .li-icon:hover i {
  color: #000000; 
} */
/* .fa-laptop-code:hover{
  color: #000000;
 
} */
.service-box:hover .p-digital {
  color: #000000; /* Set your desired hover text color */
}
.service-box:hover .li-icon i {
  color: #000000; /* Set your desired hover icon color */
}
.servicebox-nbr{
  font-family: "Teko", sans-serif;
  font-size: 65px;
}
.ul-servicebox{
  display: flex;
  list-style: none;
  padding: 10% 10% 10% 10%;
}
.fa-laptop-code,.fa-cubes,.fa-user-cog,.fa-comments-dollar{
  color: #ffaa17;
  font-size: 54px;
  margin-top: 20px;
}
.p-digital{
  color: white;
  font-family: "Teko", sans-serif;
  font-size: 20px;
  font-weight: 400;
    letter-spacing: 1px;
    line-height: 1.1em;
    /* max-width: 110px; */
    padding-left: 10%;
    padding-bottom: 53px;
}
.li-icon{
  position: relative;
  left: 55%;
}
/* .bottom-curve{
  position: absolute;
  right: -70px;
  bottom: 0;
  width: 100px;
  height: 80%;
  background: var(--thm-black);
  opacity: 0.2;
  z-index: 0;
  transform: skewX(0deg) scaleX(0);
  transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transform: skewX(335deg) scaleX(1);
} */
/* .bottom-curve{
  position: absolute;
  right: -70px;
  bottom: 0;
  width: 100px;
  height: 80%;
  background: black;
  opacity: 0.2;
  z-index: 0;
  transform: skewX(0deg) scaleX(0);
  transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
} */



/* =========================================================================SERVICE SECTION END==================================================================== */
/* =========================================================================BRANDING COMPANY SECTION START========================================================= */

.h4-branding{
  color: #070707;
  font-family: "Teko", Sans-serif;
  font-size: 70px;
  font-weight: 400;
  padding-top: 10%;
}
.h6-branding{
  color: #FFAA17;
  font-family: "Teko", Sans-serif;
  font-weight: 500;
  font-size: 26px;
}
.p-branding{
  font-family: "Rubik", Sans-serif;
  width: 66%;
  color: #7a7a7a;
  line-height: 1.9;
}
.btn-knowmore{
  background-color: #FFAA17 !important;
  font-family: "Teko", Sans-serif !important;
  font-size: 19px !important;
  font-weight: 500 !important;
  fill: #070707 !important;
  color: #070707 !important;
  background-color: #FFAA17 !important;
  border-radius: 10px 10px 10px 10px !important;
  padding: 8px !important;
  margin-bottom: 10%;
  width: 15%;
  height: 42px;
}
.image-brand{
  padding: 10%;
}


/* =========================================================================BRANDING COMPANY SECTION END========================================================= */
/* =========================================================================PARALLAX  SECTION START============================================================== */
.parallax {
  /* The image used */
  background-image: url("../images/Banner-1-scaled.webp");

  /* Set a specific height */
  min-height: 646px;


  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}


.parallax-box{
  background-color: #FFAA17;
  border-radius: 7px 7px 0px 0px;
  /* line-height: 1.2em !important;
  text-transform: uppercase; */
  /* letter-spacing: 1px; */
  font-weight: 400;
  /* font-size: 40px; */
  padding: 75px 50px 20px;
  min-height: 240px;
  /* position: relative; */
  display: block;
  /* position: relative; */
  /* top: -33%; */
  height: 63%;
  margin-top: -41%;
  width: 89%;
  text-align: center;
  font-family: "Teko", sans-serif;
  padding-top: 11%;
}
.h2-parallax-box{
  font-size: 40px;
  letter-spacing: 1px;
  font-weight: 400;
  padding: 0px 50px 20px;
  line-height: 1.2em !important;
  text-transform: uppercase;
  font-family: "Teko", sans-serif;

}

/* .parallax-box::before{
  position: absolute;
    left: 0;
    bottom: -39px;
    width: 50px;
    height: 40px;
    background-image: url(../images/curve-down-left.png)
} */
.h2-happy-clients{
  /* position: relative; */
    display: block;
    font-size: 70px;
    line-height: 0.9em;
    text-transform: uppercase;
    color: #222429;
    font-weight: 400;
    margin-bottom: 0px;
    font-family: "Teko", sans-serif;
}
.wht-box{
  display: block;
  min-height: 260px;
  padding: 115px 0px 0px 110px;
  background: #ffffff;
  border-radius: 7px 0px 0px 0px;
  display: block;
  /* top: -34%;
  position: relative; */
  /* background-color: white;
  padding: 6%; */
  min-width: 939px;
  margin-top: -41%;
}
.p-happy-clients{
  font-size: 16px;
  line-height: 34px;
    font-weight: 400;
    padding: 30px 0px 0px;
    font-family: "Rubik", sans-serif;
    color: #686a6f;
    width: 71%;
}
.ul-list{
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 2.2em;
    margin-bottom: 12px;
    padding-left: 30px;
    font-family: "Rubik", sans-serif;
    color: #686a6f;
}
.fa-check{
  color: #FFAA17;
}
ul{
  list-style: none;
}
.image-ul{
  width: 100%;
  border-radius: 9px;
  -webkit-filter: grayscale(100%);
}
.round{
  width: 64px;
  height: 64px;
  background-color: #ffeed0;
  border-radius: 50%;
}
.round:hover{
  background-color: black;
 transition: 0.5s;
}
.count-round{
  font-size: 30px;
  padding-top: 15px;
  padding-left: 21px;

  padding-right: 10px;
  color: #FFAA17;
  font-family: "Teko", sans-serif;
}
.count-round:hover{
  color: white;
}
.h5-design{
  font-weight: 400;
  line-height: 1.15em;
  font-family: "Teko", sans-serif;
  font-size: 30px;
}
.p-design{
  font-weight: 400;
    font-size: 20px;
    letter-spacing: 0.1em;
    line-height: 1.25em;
    color: #686a6f;
  font-family: "Teko", sans-serif;

}
.section-design{
border-bottom: 1px solid #e9ebee;
margin-top: 8%;
/* position: relative;
top: -26%; */
}

/* COUNTER UP  */

/* @import url("https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap"); */

* {
  box-sizing: border-box;
}

.counter-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  margin: 124px 50px;
  font-family: "Teko", sans-serif;
  border-right: 1px solid #ffffff26;

}
/* .counter-container::after{
  position: absolute;
  content: "";
  right: -15px;
  top: 0;
  bottom: 7px;
  border-right: 1px solid rgba(255, 255, 255, 0.15);
} */

.counter {
  font-size: 80px !important;
  margin-top: 10px;
  color: white;
  font-weight: 400;
}
.counter-span{
  color: white;
  font-size: 20px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 400;
}
/* .counter:hover{
  border-top: 4px solid #ffaa17;
  transition: all 500ms ease;
  left: -15px;
  right: -15px;
  top: 0;
  min-width: 100%;
} */

@media (max-width: 580px) {
  body {
    flex-direction: column;
  }
}



/* .layout {
	margin: 0 auto;
	max-width: 1170px;
	width: 100%;
	padding: 0 15px;
}

.grid-3 {	width: 25%;	float: left;	min-height: 1px;	padding-left: 15px;	padding-right: 15px;
	position: relative;}
	

.counting {
  background: #34495e none repeat scroll 0 0;
  color: #fff;
  overflow: hidden;
  padding: 36px 0;
}

.counting span {
  font-size: 70px;
  font-weight: 700;
  position: relative;
text-align:center;
display:block;
}
.counting p {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 2px;
  padding-top: 30px;
  text-transform: uppercase;
text-align:center;
}

.counting span::before {
  background: #b7b7b7 none repeat scroll 0 0;
  bottom: -10px;
  content: " ";
  height: 4px;
  left: 32%;
  position: absolute;
  width: 36%;
}

@media (max-width:980px) {
	.layout {				width: 767px;	}
	.grid-3 {				width: 50%;	}
}
@media (max-width:640px) {
	.layout {		width: 300px;	}
	.grid-3 {		width: 100%;	}


	} */


/* =========================================================================PARALLAX  SECTION END============================================================== */




/* =========================================================================MIXED UP GALLARY SECTION START============================================================== */



.filterDiv {
  float: left;
  color: #ffffff;
  width: 100px;
  line-height: 100px;
  text-align: center;
  margin: 2px;
  display: none;
}

.show {
  display: block;
}
.gallary-sect{
  margin-top: 20px;
  overflow: hidden;
}

/* .container {
  margin-top: 20px;
  overflow: hidden;
} */

/* Style the buttons */
/* .showcase {
  border: none !important;
  outline: none !important;
  padding: 12px 16px !important;
  cursor: pointer !important;
  font-weight: 400 !important;
  padding-right: 20px !important;
  font-family: "Teko", sans-serif !important;
  font-size: 24px !important;

} */



.showcase {
  border: none !important;
  outline: none !important;
  padding: 12px 16px !important;
  cursor: pointer !important;
  font-weight: 400 !important;
  padding-right: 20px !important;
  font-family: "Teko", sans-serif !important;
  font-size: 24px !important;
  position: relative;
}




.showcase::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  border-bottom: 2px solid transparent;
  transform: scaleX(0);
  transform-origin: left;
  transition: all 300ms ease;
}

.showcase.active::before {
  border-bottom: 2px solid #fca32e;
  transform: scaleX(1);
}

/* .showcase::after{
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  border-bottom: 2px solid #ffaa17;
  transform-origin: left;
  transition: all 300ms ease;
  position: absolute;
} */

/* .showcase:hover {

  border-bottom: 5px solid rgb(0, 0, 0);

} */

/* .showcase.active {

} */
/* .showcase::before{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  border-bottom: 2px solid red;
  transform: scaleX(0);
  transform-origin: left;
  transition: all 300ms ease;
} */
/* .h1-workshowcase{
  font-weight: 400;
    margin-bottom: 50px;
    color: #222429;
    display: block;
    font-size: 70px;
    line-height: 0.9em;
    text-transform: uppercase;
  font-family: "Teko", sans-serif;

} */
.h1-workshowcase {
  font-weight: 400;
  margin-bottom: 50px;
  color: #222429;
  display: block;
  font-size: 70px;
  line-height: 0.9em;
  text-transform: uppercase;
  font-family: "Teko", sans-serif;
}
.showcase-img{
  border-radius: 3%;
  filter: grayscale(100%);
}
.showcase-img:hover{
  filter: grayscale(0%);
  transition: 0.5s;

}

/* .showcase.active{
  border-bottom: 2px solid #fca32e !important;
  border-radius: 0px;
  transform: scaleX(1);
  transform-origin: left;
    transition: all 300ms ease;
} */


/* .con-overlay {
  position: relative;
  width: 0;
} */



.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #000000;
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .5s ease;
  min-width: 371px;
  margin: 11%;
 
}

.con-overlay:hover .overlay {
  height: 31%;
  border-radius: 7px;
  background-color: #000000;
  opacity: 1;
  transform: translateY(0px) !important;
  transition: all 500ms ease !important;
padding-top: 10%;
}

.text {
  position: relative;
    display: inline-block;
    vertical-align: middle;
    padding-right: 39%;
    letter-spacing: 0.1em;
    font-family: "Teko", sans-serif;
    color: white;
    /* border-bottom: 2px solid #ffaa17; */

  /* color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center; */
}

.text::before{
  border-bottom: 2px solid #ffaa17;
}
.h5-kero{
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 400;
  margin: 0;
  font-family: "Teko", sans-serif;
  padding-right: 39%;
}
.work-gallary{
  display: flex;
}




/* ============================== */
/* .overlay {
  position: absolute; 
  bottom: 0; 
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.5); 
  color: #f1f1f1; 
  width: 100%;
  transition: .5s ease;
  opacity:0;
  color: white;
  font-size: 20px;
  padding: 20px;
  text-align: center;
} */
/* .cap-box{
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
  color: #ffffff;
  opacity: 0;
  transform: translateY(200px);
  transition: all 500ms ease;
}
.cap-inner{
  position: relative;
  display: block;
  padding: 25px 35px;
  background: var(--thm-black);
  border-radius: 7px;
  text-align: left;
}
.cat{
  position: relative;
  display: block;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 400;
}
.cat span:before {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: -1px;
  width: 38px;
  border-bottom: 2px solid #ffaa17;
}
.title{
  position: relative;
  display: block;
} */
/* ============================== */




/* =========================================================================MIXED UP GALLARY SECTION END============================================================== */
/* =========================================================================LETS GET YOUR PROJECT SECTION START======================================================= */

.letget-sect{
  background-color: #FFAA17;
  padding-top: 5%;
  padding-bottom: 5%;
  margin-top: 7%;
}
.h2-letget-banner{
  margin-bottom: 0;
  padding-top: 15px;
  font-size: 60px;
  font-weight: 500;
  margin: 0px 0px 25px;
  font-family: "Teko", sans-serif;
  margin-left: 16%;
}
.contact-btn{
  width: 12%;
  font-size: 22px;
  padding-top: 14px !important;
  padding-bottom: 8px !important;
  letter-spacing: 0.1em;
  float: right;
  margin-right: 23%;
  border: none !important;
  height: 50px;

}
.contact-btn:hover{
background-color: white !important;
color: black !important;
transition: 0.7s !important;
border: none !important;
}
/* =========================================================================LETS GET YOUR PROJECT SECTION END========================================================= */



/* =========================================================================LATEST NEWS & ARTICLES. SECTION START========================================================= */

.h2-card{
  font-size: 70px;
  font-weight: 400;
  text-transform: uppercase;
  font-family: "Teko", sans-serif;
  text-align: center;
  padding-top: 4%;
}
.h2-card span{
color: #FFAA17;
}
.card{
  border: none !important;
  width: 22rem;
}
.card-img-top{
  border-radius: 3% !important;
  -webkit-filter: grayscale(100%);
}
.card-img-top:hover{
  -webkit-filter: grayscale(0%);
  transition: 0.5s;

}
.card-title{
  text-transform: uppercase;
  font-size: 34px;
  font-family: "Teko", sans-serif;
  text-align: center;

}
.card-title:hover{
  color: #FFAA17;
  transition: 0.7s;
}
.card-text{
  text-align: center;
  color: #686a6f;
  font-weight: 400;
  font-size: 16px;
  line-height: 34px;
  font-family: "Rubik", sans-serif;
}
.fa-angle-right{
  width: 43px;
    height: 43px;
    background-color:#d3d3d4;
    border-radius: 50%;
    padding-top: 4%;
    color: white;
}
.fa-angle-right:hover{
  background-color: #FFAA17;
  color: black;
  transition: 0.5s;
}


/* =========================================================================LATEST NEWS & ARTICLES. SECTION END========================================================= */
/* =========================================================================FOLLOW US ON INSTAGRAM SECTION START========================================================= */

.h2-flw-insta{
  color: #0D0D0E;
  font-family: "Teko", Sans-serif;
  font-weight: normal;
  font-size: 70px;
  text-align: center;
padding-top: 5%;
}


/* =========================================================================FOLLOW US ON INSTAGRAM SECTION END========================================================= */


/* =========================================================================FOOTER SECTION START ====================================================================== */

.footer-bg{
  background-image: url(../images/we-do-section-bg-dark.jpg);
  height: 336px;
}
.footer-ul{
  display: flex;
}
.fa-facebook,.fa-instagram,.fa-pinterest,.fa-linkedin,.fa-square-behance{
  font-size: 14px;
}
.h6-footer{
  color: #CCD1D3;
    font-family: "Teko", Sans-serif;
    font-size: 27px;
    font-weight: 500;
    margin-top: -32%;
}
.h6-footer-connect{
  color: #CCD1D3;
  font-family: "Teko", Sans-serif;
  font-size: 27px;
  font-weight: 500;
  margin-top: -20%;

}
.footer-p{
  color: #999B9F;
  font-family: "Teko", Sans-serif;
  font-weight: 400;
  font-size: 20px;
}
.text-reset{
  font-family: "Teko", Sans-serif;
    font-weight: 400;
    color: #999B9F !important;
    font-size: 20px;
}
a{
  text-decoration: none !important;
}
.p-connect-footer{
  font-family: "Teko", Sans-serif;
  font-weight: 400;
  font-size: 20px;
}
.cpy-right{
  font-family: "Rubik", Sans-serif;
  font-size: 11px;
  font-weight: 400;
}
.footer-logo{
  width: 70%;
  margin-top: -31%;


}



/* =========================================================================FOOTER SECTION END ======================================================================== */




/* =========================================================================RESPONSIVE SECTION START  ================================================================= */


@media only screen and (max-width: 600px) {

  .nav-logo {
    margin-left: 0%;
  }
  .wht-box{
    min-width: 408px;
  }
  .service-img{
    height: auto;
    padding: 10%;
  }
  .service-box{
    margin-left: 16%;

  }
  .p-branding{
    width: 100%;
  }
  .parallax-box{
    width: 100%;
    margin-top: 5%;
  }
  .h2-parallax-box{
    padding: 0px 0px 0px;
    padding-top: 8%;
    height: 35%;
    font-size: 30px;
  }
  .parallax-box{
    height: 24% !important;
    padding-top: 8%;

  }
  .main-head{
    padding-top: 10%;
  }
  .top-navbar{
    font-size: 11px;
    margin-left: -7%;
    margin-top: -7%;
  }
  .ul-top{
display: none;
  }
  .wht-box{
    padding: 0px 0px 0px 1px;
  }
  .gallary-sect{
    margin-top: 51rem;
  }
  .p-happy-clients{
    width: 100%;
  }
  .ul-list{
    font-size: 14px;
    padding-left: 0px;

  }
  .work-gallary{
    display: block;
  }
  .showcase{
    font-size: 16px !important;
  }
  .image-mixedgall{
    text-align: center;
  }
  .h2-letget-banner{
    margin-left: 4%;
    font-size: 32px;
  }
  .contact-btn{
    margin-right: 36%;
    width: 34%;
    font-size: 11px !important;
    height: 35px;
    padding-top: 8px !important;
  }

  .letget-sect{
    padding-bottom: 11%;
  }
  .h2-card{
    font-size: 49px;
  }
  .footer-ul{
    margin-left: 21%;
  }
  .image-brand{
    width: 100%;
  }
  .card{
    margin-left: 6%;
  }
  .showcase-img{
    margin-left: 14%;
  }
  .nav-logo2{
    margin-left: 2%;
    width: 38%;
  }
 

  .nav-toggle2{
    margin-top: -23% !important;
    /* background-color: #fca32e !important; */
    border: none !important;
    margin-right: 5% !important;
  }
  .menu-ic{
    width: 1em !important;
    height: 1em !important;
    background-size: 84% !important;
  }
  .banner-carousel{
    height: 500px;
  }
  .h1-banner{
    position: absolute;
  }
  .show{
    display: block;
  }
  .navbar-top {
    margin-right: 73%;
}
.h1-workshowcase {
  font-size: 36px;
  margin-bottom: 16px;
  text-align: center;

}
.h2-card{
  font-size: 36px;
}
  /* .h1-banner{
    margin-bottom: -18.5rem !important;
  }
  .h1-banner{
position: absolute;
top: 127px;
  } */
  /* .navbar-toggler-icon {

    background-image: url(../images/menu.png);
    width: 100%;
    height: auto;
    background-size: cover;
  } */

  .navbar-toggler-icon {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    vertical-align: middle;
    background-image: url(../images/menu.png) !important;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
  }
.navbar-toggler{
  border: none !important;
}
.footer-bg {
  height: 933px;
}
.h6-footer{
  margin-top: 0%;
}
.h6-footer-connect {
  margin-top: 0;
}
.counter-container {
  margin: 37px 50px;
}
.service-h2{
  font-size: 36px;
  margin-top: 0%;

}
.p-digital{
  font-size: 19px;
}
.h4-branding {
  padding-top: 0%;
}
.btn-knowmore {
  width: 28%;
}
.counter{
  font-size: 64px !important;
}
.h5-design {
  font-size: 24px;
}

.round{
  width: 60px;
  height: 60px;
}
.h2-happy-clients {
  font-size: 36px;
}
.wht-box {
  margin-top: 9%;

}
.card-title{

  font-weight: 300;
}
.footer-logo {
  width: 86%;
  margin-top: -14%;
}
.h6-footer{
  font-size: 23px;
}
.footer-p{
  font-size: 16px;
}
.text-reset,.p-connect-footer{
  font-size: 15px;
}
.h1-banner {
  font-size: 40px;
  margin-top: 0%;
 
  line-height: 55px;

}
.carousel-caption {
  bottom: 7.25rem !important;
  margin-left: 6%;

}
.banner-btn{
  margin-top: 42%;
}
.discover-btn{
  font-size: 11px !important;
  padding: 7px 28px 8px !important;
}

}
/* Medium devices (landscape tablets, 768px and up) */
/* @media only screen and (min-width: 768px) { */
  @media screen and (min-width: 768px) and (max-width: 991px) {

  
  .h2-happy-clients{
    font-size: 41px;
  }
  .wht-box{
    min-width: 372px;
    padding: 16px 0px 0px 13px;
  }
  .h2-parallax-box{
    padding: 0px 0px 0px;
    font-size: 32px;
   
  }
  .parallax-box{
    height: 45%;
  }
  .p-happy-clients{
    width: 100%;
  }
  .round{
    width: 53px;
    height: 53px;
  }
  .count-round{
    padding-top: 10px;
    padding-left: 15px;
  }
  .service-img{
    height: 1480px;
  }
  .service-h2{

    font-size: 65px;
  }
  .image-brand{
    width: 100%;
  }
  .h4-branding{
    font-size: 45px;
  }
  .h6-branding{
    font-size: 14px;
  }
  .p-branding{
    width: 100%;
  }
  .showcase-img{
    width: 223px;
  }
  .work-gallary{
    margin-top: 10% !important;
    display: block;
  }
  .ul-list{
    font-size: 12px;
    padding-left: 0;
  }
  .h2-letget-banner{
    font-size: 55px;
  }
  .contact-btn{
    width: 24%;
    margin-right: 45%;
  }
  .card{
    width: 14rem;
  }
  .card-title{
    font-size: 29px;
  }
  .card-text{
    font-size: 14px;
  }
  .counter-container{
    margin: 122px -13px;
  }
  .footer-ul{
    display: ruby;
    margin-left: -28%;
  }
  .service-box{
    margin-top: 0%;
    margin-left: 20%;
  }
  .top-navbar{
    display: -webkit-inline-box;
    margin-left: 15%;
  }
  .ul-top{
    display: none;
  }
  
}


/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px)and (max-width:1199px) {

  .wht-box {
    min-width: 501px;
    padding: 28px 0px 0px 19px;
  }
  .service-h2{
    font-size: 60px;
  }
  .service-box {
    width: 29rem;
  }
  .fa-laptop-code, .fa-cubes, .fa-user-cog, .fa-comments-dollar{
    font-size: 46px;
  }
  .service-img {
    height: 1755px;
  }
  .p-branding{
    width: 100%;
  }
  .btn-knowmore{

    width: 21%;
  }
  .parallax-box{
    height: 41%;
    padding: 75px 36px 20px;
  }
  .h2-parallax-box {
    padding: 0px 0px 20px
  }
  .h2-happy-clients{
    font-size: 60px;
  }
  .showcase-img{
    width: 19rem;
  }
  .h2-letget-banner{
    font-size: 48px;
  }
  .contact-btn {
    width: 15%;
    margin-right: 21%;
}
.h2-card {
  font-size: 60px;
}
.card{
  width: 19rem;
} 
.carousel-caption {
  bottom: 6.25rem !important;
}
.h1-banner {
  font-size: 78px;

}
.top-navbar{
  margin-left: 0%;
}
.footer-bg {
  height: 416px;

}


}
@media only screen and (min-width: 1200px) {
  .wht-box{
    min-width: 662px;
  }
  .carousel-caption{
    bottom: 13.25rem !important;
  }
  .footer-bg {
    height: 381px;
  }
}

/* =========================================================================RESPONSIVE SECTION END  ================================================================= */




/* @media screen and (max-width: 600px) {
  .navbar-top a {
    float: none;
    display: block;
    text-align: left;
    width: 100%;
    box-sizing: border-box;
  }
} */

/* top header */

.hamburger {
  display: none;
  cursor: pointer;
}

/* Basic styles */
body {
  margin: 0;
  font-family: Arial, sans-serif;
}

header {
  background-color: transparent;
  position: fixed;
  width: 100%;
  
  left: 0;
  transition: background-color 0.3s ease;
  z-index: 1000;
}

.container23 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  width: 84%;
  padding-right: calc(var(--bs-gutter-x)* .5);
  padding-left: calc(var(--bs-gutter-x)* .5);
  margin-right: auto;
  margin-left: auto;
}

image.logo {
  width: 100%;
  /* Adjust as needed */
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
}

nav ul li {
  margin-right: 20px;
}

nav ul li:last-child {
  margin-right: 0;
}

nav ul li a {
  text-decoration: none;
  color: #fff;
  transition: color 0.3s ease;
}

/* Adjust the styles when scrolling */
.scrolled {
  top: 0;
  background-color: black;
}

/* Media query for mobile devices */
@media screen and (max-width: 768px) {
  .container23 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    width: 100%;
    padding-right: calc(var(--bs-gutter-x)* .5);
    padding-left: calc(var(--bs-gutter-x)* .5);
    margin-right: auto;
    margin-left: auto;
  }

  .hamburger {
      display: block;
      position: absolute;
      top: 20px; /* Adjust the top position as needed */
      right: 20%; /* Adjust the right position as needed */
  }

  nav {
      display: none;
      position: absolute;
      top: 60px;
      right: 20px;
      background-color: black;
      padding: 20px;
  }

  nav.active {
      display: block;
  }

  nav ul {
      flex-direction: column;
  }

  nav ul li {
      margin-bottom: 10px;
  }

  .logo {
      margin-bottom: 20px;
  }

  .hamburger div {
      background-color: #fff;
  }
}

.hamburger div {
  width: 25px;
  height: 3px;
  background-color: #333;
  margin: 5px 0;
  transition: transform 0.4s ease;
}

.hamburger.active div:nth-child(1) {
  transform: rotate(-45deg) translate(-5px, 6px);
}

.hamburger.active div:nth-child(2) {
  opacity: 0;
}

.hamburger.active div:nth-child(3) {
  transform: rotate(45deg) translate(-5px, -6px);
}
a.nav-log2 {
  margin-top: 10px;
  margin-left: 17%;
  width: 19%;
}
.scrolled {
  
  background-color: black;
}