/*----------------------------------------*/
/*  . BLOG CSS START
/*----------------------------------------*/

.blog {
   &__item {
      &-inner {
         margin-bottom: 80px;

         @media #{$sm} {
            margin-bottom: 30px;
         }
      }
   }

   &__thumb {
      &-inner {
         overflow: hidden;
            border-radius: 20px;
            margin-bottom: 10px;

         img {
            transition: 1s;
            width: 100%;   

            &:hover {
               transform: scale(1.1);
            }
         }
      }

   }

   &__meta {
      &-inner {
         display: flex;
         gap: 50px;
         padding-top: 10px;
         padding-bottom: 20px;

         @media #{$sm} {
            flex-wrap: wrap;
            gap: 10px;
            padding-bottom: 10px;
         }

         li {
            a {
               font-weight: 500;
               font-size: 16px;
               line-height: 2;
               color: var(--black-4);
            }
         }
      }
   }

   &__title {
      &-inner {
         font-weight: 600;
         font-size: 48px;
         line-height: 1;
         letter-spacing: 0.16px;
         text-transform: capitalize;
         color: #0E1E2A;
         padding-bottom: 15px;
         transition: .3s;

         &:hover {
            color: var(--main-color-one);
         }

         @media #{$xl} {
            font-size: 35px;
         }

         @media #{$sm} {
            font-size: 25px;
         }
      }
   }

   &__dis {
      &-inner {
         font-weight: 500;
         font-size: 16px;
         line-height: 2;
         color: #67687A;
         padding-bottom: 40px;

         @media #{$sm} {
            line-height: 1.5;

            br {
               display: none;
            }
         }
      }
   }

   &__btn {
      &-inner {
         display: inline-block;
         padding: 15px 30px;
         font-weight: 600;
         font-size: 14px;
         line-height: 1.5;
         letter-spacing: 1.6px;
         text-transform: uppercase;
         color: #FFFFFF;
         background: var(--main-color-one);

         &::before {
            border-radius: 40px;
         }

         &.btn-rollover {
            border-radius: 40px;
         }

         &:hover {
            color: #FFFFFF;
         }

         i {
            padding-left: 5px;
         }
      }
   }

   &__search {
      form {
         position: relative;

         input {
            width: 100%;
            background: #F4F5FA;
            border: 1px solid #E3E3E3;
            border-radius: 50px;
            height: 61px;
            padding: 30px;
            padding-right: 40px;

            &:focus {
               outline: 0;
            }

            &::placeholder {
               font-weight: 500;
               font-size: 16px;
               line-height: 1;
               color: #67687A;
            }
         }

         button {
            position: absolute;
            right: 20px;
            top: 50%;
            transform: translateY(-50%);
            font-weight: 900;
            font-size: 16px;
            line-height: 1;
            color: var(--main-color-one);
            border: 0;
            background: transparent;
         }
      }
   }

   &__widget {
      margin-bottom: 60px;

      &-title {
         font-weight: 600;
         font-size: 20px;
         line-height: 1.2;
         color: #0E1E2A;
         border-bottom: 1px solid #E3E3E3;
         display: block;
         padding-bottom: 30px;
      }
   }

   &__category {
      li {
         display: flex;
         justify-content: space-between;
         align-items: center;
         padding-bottom: 20px;

         &:last-child {
            padding-bottom: 0;
         }

         span {
            font-weight: 600;
         }

         a {
            font-weight: 500;
            font-size: 16px;
            line-height: 1;
            color: #0E1E2A;
            font-weight: 600;

            &:hover {
               color: var(--main-color-one);
            }
         }
      }
   }

   &__ritem {
      display: grid;
      grid-template-columns: auto 80px;
      gap: 75px;
      margin-bottom: 30px;
      a {
         img {
            border-radius: 10px;
         }
      }
      &:last-child {
         margin-bottom: 0;
      }
   }

   &__recenttitle {
      font-weight: 600;
      font-size: 20px;
      line-height: 1.2;
      color: #0E1E2A;
      padding-bottom: 10px;
   }

   &__tags {
      display: flex;
      gap: 20px;
      flex-wrap: wrap;

      a {
         font-weight: 500;
         font-size: 16px;
         line-height: 1;
         color: #67687A;
         display: inline-block;
         padding: 10px 16px;
         background: #F4F5FA;
         border-radius: 20px;
         transition: .3s;

         &:hover {
            background: var(--main-color-one);
            color: #fff;
         }
      }
   }

   &__notification {
      background: #F4F5FA;
      padding: 70px;
      border: 1px solid #E3E3E3;
      border-radius: 5px;
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;

      p {
         text-align: center;
         padding-top: 10px;
         padding-bottom: 20px;
      }
   }

   &__pagination {
      &-wrap {

         @media #{$md} {
            padding-left: 0;
         }
      }

      &-list {
         display: flex;
         gap: 10px;

         li {
            a {
               font-weight: 600;
               font-size: 16px;
               line-height: 1.2;
               text-align: center;
               color: #0E1E2A;
               display: inline-block;
               background: #F4F5FA;
               border-radius: 50%;
               height: 45px;
               width: 45px;
               line-height: 45px;

               &:hover {
                  background: var(--main-color-one);
                  color: #ffff;
               }
            }
         }
      }
   }

   &__details {
      p {
         font-weight: 500;
         font-size: 16px;
         line-height: 2;
         color: #67687A;
         padding-bottom: 20px;
      }

      h4 {
         font-weight: 600;
         font-size: 20px;
         line-height: 1.2;
         color: #0E1E2A;
         padding-bottom: 20px;
         transition: .3s;

         &:hover {
            color: var(--main-color-one);
         }
      }
   }

   &__quote {
      padding: 40px;
      background: #F4F5FA;
      border-radius: 5px;

      @media #{$sm} {
         padding: 15px;
      }
   }

   &__thumb2 {
      padding-top: 50px;
      padding-bottom: 20px;
   }

   &__detaillist {
      display: flex;
      gap: 30px;

      span {
         font-weight: 600;
         font-size: 20px;
         line-height: 1.2;
         color: #0E1E2A;
      }
   }

   &__detailtag {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-top: 1px solid #E3E3E3;
      padding-top: 15px;
      margin-top: 60px;

      @media #{$sm} {
         flex-wrap: wrap;
         gap: 20px;
         margin-top: 30px;
      }
   }

   &__detailleft {
      display: flex;
      gap: 30px;
      align-items: center;
   }

   &__social {
      display: flex;
      gap: 10px;
      align-items: center;

      li {
         a {
            font-weight: 400;
            font-size: 16px;
            line-height: 1;
            color: var(--main-color-one);
            padding: 10px 10px;
            background: #F4F5FA;
            border-radius: 5px;
            display: inline-block;
         }
      }
   }

   &__submitbtn {
      display: inline-block;
      padding: 20px 30px;
      background: var(--main-color-one);
      border-radius: 50px;
      font-size: 14px;
      line-height: 1.5;
      letter-spacing: 1.6px;
      text-transform:  capitalize;
      color: #FFFFFF;
      border: 0;
      &:before {
         border-radius: 50px;
      }
   }

   &__form {
      padding-top: 90px;

      @media #{$sm} {
         padding-top: 30px;
      }

      form {
         padding-top: 30px;
      }

      &-title {
         font-weight: 600;
         font-size: 20px;
         line-height: 1.4;
         color: #0E1E2A;
         display: block;
      }

      input {
         width: 100%;
         padding: 20px;
         border: 1px solid #E3E3E3;
         border-radius: 50px;
         height: 51px;
         margin-bottom: 20px;

         &:focus {
            outline: 0;
         }
      }

      textarea {
         height: 180px;
         width: 100%;
         padding: 20px;
         border: 1px solid #E3E3E3;
         border-radius: 30px;
         margin-bottom: 20px;

         &:focus {
            outline: 0;
         }
      }
   }

   &__submitwrap {

      @media #{$md} {
         margin-bottom: 30px;
      }
   }
}

/*----------------------------------------*/
/*  . PROJECT DETAILS CSS START
/*----------------------------------------*/
.projectd {
   &__details {
      &-inner {
         h2 {
            font-size: 48px;
            font-weight: 600;
            line-height: 1;
            letter-spacing: 0.16px;
            text-transform: uppercase;
            padding-bottom: 20px;

            @media #{$md} {
               font-size: 35px;
            }
         }

         h3 {
            font-size: 20px;
            font-weight: 600;
            line-height: 1.5;
            padding-bottom: 15px;
            padding-top: 10px;
         }

         p {
            font-size: 16px;
            font-weight: 500;
            line-height: 2;
            padding-bottom: 20px;
            color: var(--black-4);
         }
      }
   }

   &__item {
      &-inner {
         display: grid;
         grid-template-columns: 40px auto;
         max-width: 185px;
         gap: 23px;
         align-items: center;
      }
   }

   &__mcontent {
      &-inner {
         .title {
            font-size: 16px;
            font-weight: 500;
            line-height: 1;
            padding-bottom: 15px;
         }
      }
   }

   &__meta {
      &-inner {
         display: flex;
         gap: 160px;
         padding: 45px 40px;
         background: #F4F5FA;
         margin-bottom: 70px;
         border-radius: 0 0 20px 20px;

         @media #{$lg} {
            gap: 50px;
         }

         @media #{$md} {
            gap: 30px;
            margin-bottom: 50px;
            flex-wrap: wrap;
         }

         @media #{$sm} {
            flex-wrap: wrap;
            gap: 20px;
            justify-content: center;
            margin-bottom: 20px;
         }
      }
   }

   &__checkboxwrapper {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 30px;
      margin-bottom: 40px;
      margin-top: 10px;

      @media #{$md} {
         gap: 0;
      }

      @media #{$sm} {
         grid-template-columns: 1fr;
      }
   }

   &__checkbox {
      label {
         padding-left: 15px;
         display: inline-block;
         font-weight: 600;
      }
   }

   &__detailsthumb {
      gap: 30px;
      padding-top: 20px;
      padding-bottom: 50px;
      display: grid;
      grid-template-columns: 1fr 1fr;

      img {
         width: 100%;
      }
   }
}

/*----------------------------------------*/
/*  . CONTACT CSS START
/*----------------------------------------*/

.contact {
   &__item {
      display: flex;
      align-items: center;
      text-align: center;
      flex-direction: column;
      background: #F4F5FA;
      border-radius: 25px;
      padding: 45px;
      margin-bottom: 40px;
      i {
         font-size: 40px;
         color: var(--main-color-one);
      }
      .title {
         font-weight: 600;
         font-size: 20px;
         line-height: 1.2;
         text-align: center;
         color: #333F4D;
         padding-top: 20px;
         padding-bottom: 15px;
      }

      p {
         font-weight: 500;
         font-size: 16px;
         line-height: 2;
         color: #67687A;
      }

      a {
         font-weight: 500;
         font-size: 16px;
         line-height: 2;
         color: #67687A;
      }
   }

   &__submit {
      display: inline-block;
      padding: 20px 50px;
      font-weight: 600;
      font-size: 14px;
      line-height: 1.5;
      letter-spacing: 1.6px;
      text-transform: uppercase;
      color: #FFFFFF;
      border: 0;
      background: var(--main-color-one);
      border-radius: 50px;
      &:before {
         border-radius: 50px;
      }
   }
}

.pt-30 {
   padding-top: 30px;
}



.color-base {
  color: var(--main-color-one) !important;
}
.color-heading {
  color: var(--black-3) !important;
}
.bg-base {
  background: var(--main-color-one) !important;
   &:before {
      background: var(--black-3);
      border-radius: 25px;
   }
}
.border-radius-20 {
   border-radius: 20px;
   &:before {
      border-radius: 20px;
   }
}
.border-radius-25 {
   border-radius: 25px;
   &:before {
      border-radius: 25px;
   }
}
.border-radius-50 {
   border-radius: 50px !important;
   &:before {
      border-radius: 50px;
   }
}
.bg-light1 {
   background: #ECE8E0;
}
.service-inner {
   margin-top: -220px;
}
.bg-white {
   background: #fff;
}
.border-bottom-1-black {
   border-bottom: 1px solid var(--black-3);
}
.box-shadow {
   box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.07);
}




.projectd__thumb img {
   width: 100%;
   border-radius: 20px 20px 0 0;
}
.service__item .icon img {
   transition: 0.4s;
}
.service__item:hover .icon img {
   transform: rotateY(180deg);
}
.team__member:hover p,
.team__member:hover .team__title {
    color: #fff;
}
.newsletter__left img {
   border-radius: 20px 20px 0 0;
}

@media all and (max-width: 1500px){
   .textslider_1 h2 {
      font-size: 55px;
   }
   .textslider_2 h2 {
      font-size: 55px;
   }
   .hero__area_1_inner {
      .main-thumb {
         .main-img {
            width: 950px;
         }
      }
   }
   .hero__title {
      font-size: 40px;
   }
   .footer_two_area .footer__address {
      padding-left: 0;
   }
   .footer_top h2 {
      font-size: 80px;
   }
   .service__text p br {
      display: none;
   }
   .header__area-4.plr-100 {
      padding-left: 50px;
      padding-right: 50px;
   }
   .projectd__meta-inner {
    gap: 100px;
   }
}
@media all and (max-width: 1200px){
   .hero__area_1 {
      padding: 190px 45px 100px;
   }
   .hero__area_1_inner .main-thumb .main-img {
      width: 750px;
   }
   .hero__title {
      font-size: 55px;
   }
   .hero__area_1 .video_area a img {
      width: 100px;
   }
   .hero__area_1 .hero_1_content h1 {
      margin-bottom: 65px;
   }
   .service__text br {
      display: none;
   }
   .textslider_1 h2 {
      font-size: 35px;
   }
   .textslider_2 h2 {
      font-size: 35px;
   }
}

@media all and (max-width: 991px){
   .exp-area,
   .who__area_inner {
      background-image: none !important;
   }
   .service-inner {
      margin-top: -140px;
   }
}

@media (max-width: 575px) {
   .service-inner {
      margin-top: -75px;
   }
   .hero__title {
      font-size: 30px;
      line-height: 1.2;
   }
   .hero__area_1 .video_area a img {
      width: 60px;
   }
   .hero__area_1 .hero_1_content h1 img {
      margin-top: -11px;
      width: 40px;
      margin-left: 10px;
   }
   .hero__area_1 {
      padding: 257px 15px 66px;
      margin-bottom: 60px;
   }
   .hero__area_1 .hero_1_content h1 {
      margin-bottom: 15px;
      margin-top: -110px;
   }
   .service__item.style2 .service__content .icon-box {
      margin-bottom: 35px;
   }
   .service__item.style2 .service__content {
       padding: 50px 30px 40px;
   }
   .newsletter__right .submit {
      right: auto;
      width: 100%;
      margin-top: 5px;
   }
   .projectd__meta-inner {
    gap: 30px;
    padding: 30px;
   }
}