.contact-us-main {
     padding-top: 100px;
}

.nav-bg {
     height: 458px;
     width: 100vw;
     flex-shrink: 0;
     background: #c0e9fb;
     position: relative;
     z-index: 1;
}

.nav-bg .nav-text {
     padding: 240px 0px 0 270px;
     display: inline-flex;
     align-items: flex-start;
}

.nav-bg .nav-text h2 {
     text-transform: uppercase;
}

.nav-bg .nav-text .header-theme {
     width: 300px;
     position: absolute;
     bottom: -44px;
     left: 100px;
     z-index: -1;
     opacity: 0.4;
}

.nav-bg .header-design {
     position: absolute;
     right: 230px;
     bottom: 0;
     width: 276px;
     height: 276.123px;
     flex-shrink: 0;
     background: url(../images/services/apple.webp);
     background-size: cover;
     background-repeat: no-repeat;
}

/* About us */

.about-us {
     position: relative;
     z-index: 1;
     background: white;
     padding-bottom: 20px;
}

.about-main .service-description p {
     font-size: 1.125rem;
     font-weight: 500;
     line-height: 30px;
     margin-bottom: 16px;
}

.about-main .service-description p span {
     font-size: 1.25rem;
     color: #2376bc;
     font-weight: bold;
}

/* we provide */

.ser-plate {
     align-items: center;
     display: flex;
     flex-grow: 1;
     height: 100%;
     min-height: 196px;
     justify-content: center;
     position: relative
}

.custom-gap-20 {
     gap: 60px 0;
     padding: 50px 0;
}

@media screen and (max-width: 576px) {
     .ser-plate {
          margin-bottom: 25px
     }
     .ser-plate .ser-title i {
          padding-bottom: 20px;
     }
}

.ser-plate .ser-title i {
     font-size: 3rem;
     padding-bottom: 20px;
}

.ser-plate .digits {
     align-items: center;
     display: flex;
     font-size: 3.25rem;
     font-weight: bold;
     -webkit-text-stroke: 2px #2376bc;
     color: transparent;
     justify-content: center;
     left: 15px;
     margin: 0 auto;
     position: absolute;
     top: -35px;
     transition-delay: .2s;
     transition: all .5;
     z-index: 1000
}

@media (max-width: 991px) {
     .ser-plate .ser-title i {
          padding-bottom: 20px;
     }
}

.ser-plate h3.ser-title,
.ser-plate h4.ser-title {
     margin-bottom: 0;
     padding: 40px 10px;
     transition: all .5;
     z-index: 9
}

.ser-plate .ser-title,
.ser-plate h3.ser-title,
.ser-plate h4.ser-title {
     border-radius: 10px;
     color: #000;
     font-size: 1rem;
     font-weight: 600;
     line-height: 1.5;
     position: relative;
     text-align: center
}

.ser-plate .ser-title {
     align-items: center;
     background: #D6F2FE;
     border-radius: 10px;
     display: flex;
     flex-direction: column;
     height: 100%;
     justify-content: center;
     min-height: 120px;
     overflow: hidden;
     padding: 5px 10px;
     width: calc(100% - 30px);
     width: 100%;
     z-index: 1
}

/* .ser-plate .ser-title:after {
     background: #2376bc;
     bottom: 0;
     content: "";
     height: 4px;
     position: absolute;
     transition: all .4s ease;
     width: 100%;
     z-index: -1
} */

/* Faqs */

.accordion {
     padding: 30px 0 40px 0;
}

.accordion-button {
     color: #202020;
     font-size: 1.125rem;
     font-weight: 600;
}

.accordion-button:focus {
     box-shadow: none;
}

.accordion-button:not(.collapsed) {
     color: #000;
}


/* Look at our work */

.quick-look .portfolio-btn {
     display: flex;
     justify-content: end;
     padding-bottom: 30px;
 }
 
 .portfolio-cards {
   position: relative;
   z-index: 1;
   background: #fff;
 }
 
 .card-container {
   perspective: 1000px;
   display: inline-block;
   margin: 3%;
   transition: all 0.5s ease-in-out;
 }
 
 .card-container:hover .flipper {
   transform: rotateY(180deg);
 }
 
 .card-container,
 .front,
 .back {
   width: 326px;
   height: 326px;
 }
 
 .flipper {
   transition: 0.6s;
   transform-style: preserve-3d;
   position: relative;
 }
 
 .front,
 .back {
   backface-visibility: hidden;
   position: absolute;
   top: 0;
   left: 0;
   width: 326px;
   height: 326px;
 }
 
 .front {
   z-index: 2;
 }
 
 .back {
   transform: rotateY(180deg);
   background: #E6F7FF;
   border-radius: 16px;
   box-shadow: 4px 11px 49px 0px rgba(145, 182, 212, 0.6);
   transform-style: preserve-3d;
   transition: all 0.5s ease-in-out;
 }
 
 .back a {
   text-decoration: none;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   height: 100%;
   transition: all 0.5s ease-in-out;
   transform: translate3d(0px, 0px, 150px) scale(0.8);
 }
 
 
 .portfolio-main .portfolio-card .portfolio-image {
   /* width: 344px; */
   position: relative;
 }
 
 .portfolio-main .portfolio-card .portfolio-image img {
   /* width: 344px; */
   height: 326px;
   flex-shrink: 0;
   box-shadow: 4px 11px 49px 0px rgba(145, 182, 212, 0.6);
   border-radius: 5%;
   opacity: 1;
   transition: 0.5s ease;
   backface-visibility: hidden;
 }
 
 /* .portfolio-main .portfolio-card .portfolio-detail {
   padding: 40px 0 30px 0;
 } */
 
 .portfolio-main .portfolio-card .portfolio-detail span {
   display: inline-flex;
   padding: 3px 20px;
   justify-content: center;
   align-items: center;
   gap: 10px;
   border-radius: 5px;
   border: 1px solid #757575;
   color: #2376bc;
   font-size: 1rem;
   font-weight: 600;
 }
 
 .portfolio-main .portfolio-card .portfolio-detail h4 {
   padding: 15px 0;
   color: #000;
   font-size: 1.75rem;
   font-weight: 600;
 }
 
 .portfolio-detail .abt {
   display: inline-flex;
   gap: 20px;
 }
 
 .portfolio-detail .port-link {
   background: #2376BC;
   position: absolute;
   bottom: -10%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 89px;
   height: 45px;
   border-radius: 150px 150px 0 0;
   text-decoration: none;
   display: flex;
   justify-content: center;
   align-items: center;
 }
 
 .portfolio-detail .port-link i {
   color: #fff;
   font-size: 2rem;
 }
 
 .portfolio-detail .web {
   padding: 3px 15px;
   gap: 10px;
   border-radius: 5px;
   background: #6AD4CE80;
   color: #000 !important;
   font-size: 1rem;
   font-weight: 500;
   border: none !important;
 }
 
 .portfolio-detail .mobile {
   padding: 3px 15px;
   gap: 10px;
   border-radius: 5px;
   background: #968BFF80;
   color: #000 !important;
   font-size: 1rem;
   font-weight: 500;
   border: none !important;
 }
 
 .portfolio-detail .ui-ux {
   padding: 3px 15px;
   gap: 10px;
   border-radius: 5px;
   background: #F9708080;
   color: #000 !important;
   font-size: 1rem;
   font-weight: 500;
   border: none !important;
 }
 
 
 @media (max-width: 1200px) {
     .card-container,
     .front,
     .back {
       width: 284px;
       height: 286px;
     }

     .portfolio-main .portfolio-card .portfolio-image img {
          /* width: 294px; */
          height: 286px;
        }
   }
 
 @media (max-width: 1024px) {
   /* .portfolio-main .portfolio-card .portfolio-image {
     width: 344px;
   } */
   
 
   
 }

/* Newsletter */

.newsletter {
     padding: 130px 0 0 0;
}

.newsletter-bg {
     width: auto;
     height: 250px;
     flex-shrink: 0;
     border-radius: 30px;
     background: linear-gradient(288deg, #85e1ff 0.23%, #237bff 99.44%);
     display: flex;
     justify-content: space-between;
     align-items: center;
}

.newsletter-bg .news {
     padding-left: 50px;
}

.newsletter-bg .news h2 {
     color: #fff;
     text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
     font-size: 1.75rem;
     font-weight: bold;
     padding-bottom: 12px;
}

.newsletter-bg .news h4 {
     color: #fff;
     text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
     font-size: 1.325rem;
     font-weight: 500;
}

.newsletter-bg .btn-wrap {
     padding-right: 50px;
}

.newsletter-bg .btn-wrap a {
     text-decoration: none;
     color: #000;
     font-size: 1.125rem;
     font-weight: 600;
     transition: 0.6s ease-in-out;
}

.newsletter-bg .btn-wrap .news-btn {
     display: inline-flex;
     padding: 10px 20px;
     align-items: center;
     gap: 30px;
     border-radius: 10px;
     background-color: #000000;
     background-image: #000000;
     background-image: -moz-linear-gradient(top, #fff 0%, #ffffff 100%);
     background-image: -webkit-linear-gradient(top, #fff 0%, #ffffff 100%);
     background-image: linear-gradient(to bottom, #fff 0%, #ffffff 100%);
     background-size: 300px;
     background-repeat: no-repeat;
     background-position: 0%;
     -webkit-transition: 0.6s ease-in-out;
     transition: 0.6s ease-in-out;
     box-shadow: 0px 4px 7px 0px rgba(0, 0, 0, 0.14);
}

.newsletter-bg .btn-wrap .news-btn:hover {
     color: #fff;
     background-position: -1700%;
     transition: 0.6s ease-in-out;
}

@media (max-width: 992px) {
     .newsletter {
          padding: 100px 0 0 0;
     }

     .newsletter-bg .btn-wrap a {
          font-size: 0.75rem;
     }

     .newsletter-bg .btn-wrap .news-btn img {
          height: 20px;
          width: 20px;
     }

     .newsletter-bg .btn-wrap .news-btn {
          width: 200px;
          gap: 10px;
     }
}

@media (max-width: 768px) {
     .newsletter-bg .news h2 {
          padding-top: 15px;
          font-size: 1.325rem;
     }

     .newsletter-bg .news h4 {
          font-size: 1rem;
     }

     .newsletter-bg .btn-wrap {
          padding: 15px 0 15px 0;
     }

     .newsletter-bg .btn-wrap .news-btn {
          width: 140px;
     }

     .newsletter-bg {
          width: auto;
          height: auto;
          display: flex;
          flex-direction: column;
          align-items: center;
     }
}