:root {
   /* Colors: */
   --color-ef7f1a: #ef7f1a;
   --color-000000: #000000;
   --color-5f5d5f: #5f5d5f;
   --color-282728: #282728;



   --color-f3f3f3: #f3f3f3;
   --color-ffffff: #ffffff;
   --font-family-plusjakarta: "Plus Jakarta Sans", sans-serif;
   --font-style-normal: normal;
   --font-size-12: 12px;

   --font-size-14: 14px;
   --font-size-15: 15px;
   --font-size-16: 16px;
   --font-size-18: 18px;
   --font-size-20: 20px;
   --font-size-22: 22px;
   --font-size-25: 25px;
   --font-size-28: 28px;

   --font-size-30: 30px;

   --font-size-40: 40px;
   --font-size-65: 65px;
   --font-size-85: 85px;

   --character-spacing-0: 0px;
   --line-height-inherit: inherit;
   --font-weight-Thin: 100;
   --font-weight-ExtraLight: 200;
   --font-weight-Light: 300;
   --font-weight-Regular: 400;
   --font-weight-Medium: 500;
   --font-weight-SemiBold: 600;
   --font-weight-Bold: 700;
   --font-weight-ExtraBold: 800;
   --font-weight-Black: 900;
   --font-weight-normal: normal;
 }



 /* responsive css */
 @media (max-width: 1680px) {
   .container {
     width: 100%;
     padding-left: 6rem;
     padding-right: 6rem;

   }

   .banner img {
     height: 700px;
   }

   :root {
     --font-size-85: 65px;

     --font-size-70: 50px;
     --font-size-40: 35px;
   }

   .small-heading {

     left: -40px;
   }
 }

 @media (max-width: 1560px) {
   .client-heading .head::before {
     width: 39%;
   }

   .client-heading .head::after {
     width: 39%;
   }

   .navbar-right .nav-item {
     margin-left: 2rem;
   }

   .navbar-left .nav-item {
     margin-right: 2rem;
   }

   .brand img {
     width: 250px;
   }

   .banner img {
     height: 600px;
   }

   .counter-right img {

     width: 471px;
   }

   .counter-section {

     margin-bottom: 4rem;
   }

   .navbar-brand img {
     width: 300px;
   }
 }

 @media (max-width: 1480px) {
   :root {
     --font-size-65: 50px;

   }

   .client-heading .head::before {
     width: 37%;
   }

   .client-heading .head::after {
     width: 37%;
   }

   .counter-right img {
     width: 399px;
   }

   .small-heading {

     left: -35px;

     top: 66px;

   }

   .navbar-brand img {
     width: 250px;
   }



   .inner-banner-content {

     height: 400px;

   }
 }

 @media (max-width: 1366px) {
   :root {
     --font-size-85: 65px;
     --font-size-65: 55px;
     --font-size-20: 18px;
     --font-size-30: 25px;
   }

   .navbar-right .nav-item {
     margin-left: 1.5rem;
   }

   .navbar-left .nav-item {
     margin-right: 1.5rem;
   }

   .navbar-brand img {
     width: 220px;
   }

   .navbar-brand {
     padding: 0;
     margin: 0;
   }


   .client-heading .head::before {
     width: 38%;

   }

   .client-heading .head::after {
     width: 38%;

   }

   .section-space {
     padding-top: 3rem;
     padding-bottom: 3rem;
   }


 }

 @media (max-width: 1280px) {
   .section-space {
     padding-top: 3rem;
     padding-bottom: 3rem;

   }
 }

 @media (max-width: 1199.98px) {
   :root {
     --font-size-85: 55px;
     --font-size-65: 50px;
     --font-size-20: 16px;

   }

   .client-heading .head::before {

     top: 24%;
   }

   .client-heading .head::after {

     top: 24%;
   }

   .carousel-caption {

     width: 45%;
   }

   .feature-box {

     margin-bottom: 1.5rem;
   }

   .feature-box:nth-child(03) {

     margin-bottom: 0;
   }

   .feature-box:nth-child(04) {

     margin-bottom: 0;
   }

   .navbar-right .nav-item {
     margin-left: 0.5rem;
   }

   .small-heading {
     left: -30px;
     top: 66px;
   }

   .small-heading::after {

     top: -8px;
   }

   .container {
     width: 100%;
     padding-left: 4rem;
     padding-right: 4rem;
   }

   .story-box {
     font-size: 30px !important;
   }

   .pen-img {

     right: 0%;
     bottom: 10%;
   }

   .counter-right img {
     width: 360px;
     top: -134px;
     right: 0;
   }

   .banner img {
     height: 500px;
   }

   .pt-5 {
     padding-top: 1rem !important;
   }

   .mb-5 {
     margin-bottom: 1rem !important;
   }

   .mt-5 {
     margin-top: 1rem !important;
   }

   .pb-5 {
     padding-bottom: 1rem !important;
   }


   .count-area-content .d-flex {
     display: flex !important;
     justify-content: center;
   }



 }

 @media (max-width:1024px) {
   .about-left {
     position: relative;
     padding-right: 0;
     margin-bottom: 1.5rem;
   }

   .star-box {
     margin-right: 1rem;
   }

   .banner img {
     height: 450px;
   }

   .project-left {
     padding: 2rem;
   }
 }

 @media (max-width: 991.98px) {
   :root {

     --font-size-30: 25px;

   }
.container {
        width: 100%;
        padding-left: 2rem;
        padding-right: 2rem;
    }
   .director-img {
     position: relative;
     left: 0;
     margin: auto;
   }

   .story-box {
     padding: 2rem;
     width: 100%;
     margin: auto;

   }



   .top-header .container {
     width: 100%;
     padding-left: 1rem;
     padding-right: 1rem;
   }

   .navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover {
     color: var(--color-ef7f1a);
     border-bottom: none;
   }

.navbar-dark .navbar-nav .nav-link {
        font-size: 14px;
        padding-right: 0;
        color: aliceblue;
        margin: 1rem 0;
        padding: 0 !important;
    }

   .banner .container {
     width: 100%;
     padding-left: 0;
     padding-right: 0;
   }

   .inner-banner {

     height: 400px;
   }

   .navbar-brand img {
     width: 225px;
     margin: 1rem 0;
   }

   .counter-right img {
     position: relative;
     right: 0;
     top: 0;
     z-index: 9;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: auto;
   }

   .carousel-caption {

     width: 52%;

     left: 4%;
   }

   .banner img {
     height: 450px;
   }

   .navbar {
     flex-direction: row-reverse;
   }

   .feature-box {

     margin-bottom: 1.6rem;
   }

   .navbar-expand-lg .navbar-nav {
     top: 2rem;
     padding: 2rem;
     /* text-align: center; */
   }

   .navbar-toggler-icon {
     background-size: 73%;
     background-color: var(--color-282728);
     padding: 1.3rem;
     border-radius: 0.3rem;
   }

   .small-heading {
     transform: rotate(0deg);
     position: relative;
     left: 0;
     margin-bottom: 0;
     top: 0;
     overflow: hidden;
     padding-left: 1rem;
   }

   .small-heading::after {
     position: relative;
     margin-bottom: 3rem;
     display: block;
     left: -22px;
     bottom: 0;
     top: 24px;
   }

   .small-heading::before {
     width: 4px;
     content: '';
     height: 4px;
     border-radius: 100%;
     background-color: var(--color-ef7f1a);
     font-size: 1rem;
     position: absolute;
     left: 0;
     top: 10px;
   }

   .cloud-section .small-heading {
     margin-left: 0;
     position: relative;
   }

   .service-section .small-heading {
     position: relative;
     top: 0;
     /* height: 100%; */
     /* width: 100%; */
   }



   .card-img-wrapper {
     position: relative;
     overflow: hidden;
   }

   .navbar .social-links a {
     margin-left: 0;
   }
   .about-right-page {
    padding: 0rem;
}
 }

 @media (max-width: 767px) {
   :root {

     --font-size-65: 50px;


   }
.service-page-box {

    padding: 1.5rem;
   
}
   .achieve-list .content {
     display: flex;
     flex-direction: column;
     /* margin-bottom: 2rem; */
   }



   .achieve-list li {
     margin-bottom: 2rem;
   }

   .testimonial-right {
     margin-left: 0;
     margin-top: 1rem;
   }

   .carousel-caption {
     width: 73%;
     left: 6%;
     left: 5%;
   }

   .service-page .service-content {
padding-left: 0;
     margin-top: 1rem;
   }

   .contact-page-left .social-links {
     margin-bottom: 3rem;
   }

   .contact-page-form {
     padding: 3rem 0;

   }

   .map-section {
     padding-right: 0;
   }

   .testimonial-items {
     margin-top: 0;
     width: 100%;
   }

   .testimonial-wrapper {
     width: 100%;

   }

   .client-heading .head::before {
     width: 27%;
   }

   .client-heading .head::after {
     width: 27%;
   }

   .project-box1 {
     display: flex;
     flex-direction: column-reverse;
   }

   .project-box img {

     margin-bottom: 0;
   }

   .project-box {

     margin-bottom: 2rem;
   }

   .count-area-content .d-flex {
     margin: auto;
     margin-bottom: 1rem;
   }

   .count-area-content p {
     margin: auto;
     margin-bottom: 2rem;

   }

   .quality-circle {
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: auto;
     top: 0;
   }
.service-page-box .row {

  align-items:normal;

}

 }

 @media (max-width: 575px) {
   :root {
     --font-size-85: 45px;
     --font-size-65: 40px;
     --font-size-16: 16px !important;

     --font-size-40: 30px;
     --font-size-22: 18px;

   }

 .service-section .small-heading{
  text-align: left;
 }
.service-section .swiper-container {
   
    margin-top: 1.5rem;
}
   .mb-3 {
     margin-bottom: 0rem !important;
   }

   .vision-mission-section .col-12 {
     margin-bottom: 0.5rem;
   }

.story-box {
        padding: 1rem;
     
    }

   .pen-img {
     width: 213px;
     right: -14%;
     bottom: 35px;
   }
.project-left .sub-heading {
    font-size: 1.2rem;
    padding: 0.5rem 0;
}
.project-section .section-heading {
        text-align: left;
        margin-bottom: 1.5rem;
        margin-top: 1.5rem;
    }
    .process-section .small-heading::before{
display: none;
    }
    .cloud-section .small-heading {
        margin-left: 0;
        text-align: center;
        padding-left: 0;
    }
      .cloud-section .small-heading::before{
        display: none;
      }
   .project-section .section-heading{
    text-align: left;
   }
   .process-section {
     text-align: center;
   }
.process-section .small-heading {
    
        padding-left: 0;
      
    }
   .navbar {
     flex-direction: row-reverse;
     padding: 0.5rem 0;
   }

   .inner-banner {
     height: 300px;
   }



   .marquee {

     padding: 2rem 0;
   }

   .navbar-brand img {
     width: 225px;
     margin: 0;
   }

   .marquee__seperator::after {

     top: 15px;
     left: -20px;

     width: 5px;
     height: 5px;
     background-color: #ffffff;
   }

   .banner img {
     height: 350px;
   }

   .top-header {
     padding: 0.2rem;

   }

   .container {
     width: 100%;
     padding-left: 1rem;
     padding-right: 1rem;
   }

   .about-right-page {
     padding: 1rem 0;
     padding-bottom: 0;
   }

   .contact-box .sub-heading-two {

     margin-bottom: 0.1rem;
   }

   .achieve-img {
     width: 20%;
     display: flex;
     justify-content: left;
     align-items: center;
     /* margin: auto; */
     margin-bottom: 0;
   }

   .achieve-list .content {
     display: flex;
     flex-direction: column;
     margin-bottom: 2rem !important;
   }

   .what-about-section .row {
     display: flex;
     align-items: center;
     flex-direction: column-reverse;
   }

   .achieve-list .text {
     width: 100%;
   }
.process-section .section-heading{
  text-align: center;
}
   .service-page .service-content {
     margin-top: 0.5rem;
     padding-left: 0;
   }

   .service-content p {
     color: var(--color-000000);
     margin-bottom: 0;
   }

   .contact-page-form {
     padding: 1rem 0;
   }

   .review-box {
     display: flex;
     width: 100%;
     justify-content: space-between;
   }

   .contact-section.pb-0 {
     padding-bottom: 1.5rem;
   }

   .section-space {
     padding-top: 1.8rem;
     padding-bottom: 1.8rem;
   }

   .project-img img {
     height: 300px;
   }

   .testimonial-person-details {
     display: flex;
     align-items: center;
     flex-direction: column;
     text-align: center;
   }

   .testimonial-img img {
     width: 60px;
     height: 60px;
     border-radius: 100%;
     margin-right: 0;
     margin-bottom: 1rem;
   }

   .client-heading .head::after {
     display: none;
   }

   .client-heading .head::before {
     display: none;
   }



   .feature-box {

     margin-bottom: 2rem;
   }

   .feature-box p {
     text-align: left;
   }

   .carousel-caption {
     left: 0;
     padding: 2rem;
     top: 0;
     position: relative;
     background-color: #282728;
     width: 100%;
   }

   .counter-right img {
     top: 0;
     right: 0;

   }

   .counter-section {
     margin-bottom: 3rem;
     overflow: hidden;
   }

   .carousel-caption {

     position: relative;

   }

   .banner .swiper-slide {
     display: flex;
     flex-direction: column-reverse;
   }


   .top-header-right {
     text-align: center;
     margin-top: 0.5rem;
   }

   .top-header-left {
     text-align: center;
     margin-bottom: 0.0;
   }
.mb-5 {
        margin-bottom: 1.5rem !important;
    }
   .top-header-left ul {
     text-align: center;
     margin: auto;
     display: flex;
     align-items: center;
     justify-content: center;
   }

   .about-img.about-img-one {
     margin-right: 1rem;
     width: 100%;
     height: 300px;
     margin-bottom: 1.5rem;
   }
.project-box1 .project-left {
        padding-left: 1rem !important;
        padding-right: 1rem;
    }
 .project-box .project-left {
        padding: 1rem;
        width: 100%;
        padding-left: 1.8rem;
        padding-right: 1rem;
    }

 

   .about-img.about-img-two {
     margin-right: 0;
     width: 100%;
     height: 300px;
     margin-bottom: 1rem;
   }

   .about-right .d-flex {
     display: flex;
     flex-direction: column;
   }

   .about-img.about-img-one {
     margin-right: 1rem;
     width: 100%;
     height: 400px;
   }

   .top-header-left li {
     margin-right: 1rem;
     margin-left: 1rem;
   }

   .testimonial-right p {
     margin-top: 1rem;
   }

   .achieve-list img {
     padding: 0.5rem;
     width: 4rem;

   }
 }

 @media (max-width: 480px) {
   :root {
         --font-size-85: 35px;

     --font-size-65: 35px;
     --font-size-40: 25px;

   }

   .card-content {

     text-align: center;
   }

   .card-content p {

     text-align: center;
   }

   .story-box {

     padding: 1rem;

   }

   .director-img {
     width: 100%;
     padding: 0;
   }

   .navbar-brand img {
     width: 200px;
   }

   .carousel-caption {
     text-align: center;
   }




   .section-heading {
     text-align: center;
   }

   p {

     text-align: justify;
   }

   .testimonial-left img {
     height: 300px;

   }

   .banner img {
     height: 300px;
     object-fit: cover;
   }

   .project-img img {
     height: 250px;
   }

   .service-section .service-img {
     height: 400px;
   }

   .common-btn {
     justify-content: center;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: auto;
   }

   .project-left {

     padding-left: 1.2rem;
     padding-right: 1.2rem;
   }

 }

 @media (max-width: 375px) {
   .contact-box {
     margin-bottom: 1rem;
   }

   .project-img img {
     height: 200px;
   }

   .inner-banner {
     height: 300px;
   }
 }

 /* responsive css */