/* Fida Marwat (Sr. UXUI and Front End Developer) */

.rotate-90 {
  transform: rotate(90deg);
  right: -8%;
  top: 16%;
}

/* carousel */

#carouselprojects .carousel-inner {
  padding: 1em;
}

#carouselprojects .carousel-item{
  padding-left: 12px;
  padding-right: 12px;
}

#carouselprojects .carousel-control-prev,
#carouselprojects .carousel-control-next {
  width: 30px;
  background-color: #fff;
  border: 1px solid #000;
  height: 30px;
  border-radius: 50%;
}

@media (min-width: 768px) {
  #carouselprojects .carousel-item {
    margin-right: 0;
    flex: 0 0 41.66666667%;
    display: block;
  }
  #carouselprojects .carousel-inner {
    display: flex;
  }
}

/* blogs */

#carouselblogs .carousel-inner {
  padding: 1em;
}

#carouselblogs .carousel-item{
  padding-left: 12px;
  padding-right: 12px;
}

#carouselblogs .carousel-control-prev,
#carouselblogs .carousel-control-next {
  width: 30px;
  background-color: #fff;
  border: 1px solid #000;
  height: 30px;
  border-radius: 50%;
}

@media (min-width: 768px) {
  #carouselblogs .carousel-item {
    margin-right: 0;
    flex: 0 0 60%;
    display: block;
  }
  #carouselblogs .carousel-inner {
    display: flex;
  }
}


/* For modern browsers */
input::placeholder{
  color: #ccc !important; 
}

/* For older versions of Internet Explorer */
input:-ms-input-placeholder{
  color: #ccc !important;
}


p{
	line-height: 28px;
  color: #000;
}

ul{
  line-height: 28px;
}

h1 {
  font-size: 40px;
  line-height: 60px;
  color: #000;
  font-weight: 700;
  word-break: break-all !important;
}

h2{
  color: #000;
  line-height: 44px;
}

h3{
  color: #000;
  line-height: 38px;
}

h5{
  line-height: 36px;
}

.card-title{
  color: #000;
}

.text-primary{
  color: #00AEEF !important;
}

.text-grey{
  color: #E3E3E3 !important;
}

.carousel-indicators{
  margin-bottom: -1rem;
}

.carousel-indicators [data-bs-target]{
  background-color: #00AEEF;
  width: 8px;
  height: 8px;
}


.btn-primary{
	background-color: #00AEEF !important;
	border-color: #00AEEF !important;
  color: #fff;
  border-radius: 0px;
}

.btn-primary:hover{
  background-color: #03a2de !important;
  border-color: #03a2de !important;
}

.btn-outline-primary{
  border-color: #00AEEF !important;
  border-radius: 0px;
}

.btn-outline-primary:hover{
  background-color: #00AEEF !important;
}

.btn-link{
  color: #000;
  position: relative;
  z-index: 999;
  padding-left: 15px !important;
}

.btn-link:hover{
  color: #000;
}

.circle-btn::before {
  content: "";
  width: 36px;
  left: 0px;
  z-index: -1;
  top: -3px;
  position: absolute;
  height: 36px;
  background-color: #DEF6FF;
  transition: 2s;
  border-radius: 100px;
}

.circle-btn:hover::after {
  content: "";
  width: 36px;
  z-index: -1;
  left: 0px;
  top: -3px;
  position: absolute;
  height: 36px;
  background-color: #00AEEF;
  border-radius: 100px;
}

.navbar-nav{
  line-height: unset;
}

.navbar .nav-item{
  padding-left: 6px !important;
  padding-right: 6px !important;
}

.nav-link{
  color: #000;
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active{
  background-color: #2c9e4d;
  border-radius: 6px;
  color: #fff;
}

.card{
  border-radius: 0px;
  padding-top: 20px;
  padding-bottom: 20px;
}

.bg-primary{
  background-color: #2C9E4D !important;
}

.bg-success{
  background-color: #19284E !important;
}

.bg-grey{
  background-color: #F0EFF4 !important;
}

/* banner */

#banner,
#banner-img,
#about,
#unlock-business,
#partners,
#services,
#projects,
#testimonials,
#counts,
#products,
#blogs,
#footer,
#aim,
#mission,
#team,
#choose,
#process,
#touch,
#digital,
#p-detail-banner,
#b-detail-banner{
  margin-top: 60px;
}

#counts h1{
  font-size: 60px;
}

#blogs{
  padding: 50px 0px;
  background-color: #FAFAFA;
}

#footer img{
  filter: grayscale(100%);
}

#p-detail-banner{
  background-image: url('../images/p-detail-banner.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  height: 100vh;
}

#projects-2{
  padding-top: 60px;
  padding-bottom: 50px;
  margin-top: 60px;
  background-color: #f6f6f6;
}

#projects-2 .col-md-4{
  margin-bottom: 24px;
}