
/*========== XL-DESKTOP : BETWEEN 1200px TO 1500PX. ==========*/
@media (min-width: 1200px) and (max-width: 1500px) {
   /* GLOBAL */
   .container {
      max-width: 1000px;
   }
   h1 {font-size: 48px;}
   h2 {font-size: 35px;}
   h3 {font-size: 22px;}
   h4 {font-size: 18px;}
   h5 {font-size: 14px;}
   h6 {font-size: 12px;}
   body {
      font-size: 14px;
   }
   /* GLOBAL// */
   
   /* hero */
   .hero-gallary {
      padding: 0 2%;
   }   
   .hero-gallary .container {
      max-width: 1200px;
   }

   /* service */
   .service-area .el-absolute:nth-child(2) {
      width: 9em;
   }
   .feature-area .el-absolute:nth-child(1), .timeline-area .el-absolute:nth-child(1) {
      width: 7em;
   }
}

/*========== LG + MD : BETWEEN 768PX TO 1199PX. ==========*/
@media (min-width: 768px) and (max-width: 1199px) {
   /* GLOBAL */
   h1 {font-size: 45px;}
   h2 {font-size: 35px;}
   h3 {font-size: 22px;}
   h4 {font-size: 18px;}
   h5 {font-size: 14px;}
   h6 {font-size: 12px;}
   body {
      font-size: 14px;
   }
   /* GLOBAL// */

   /* hero */
   .hero-gallary {
      padding: 0 2%;
   }

   /* service */
   .service-area .el-absolute:nth-child(2) {
      width: 6.8em;
   }
   .feature-area .el-absolute:nth-child(1), .timeline-area .el-absolute:nth-child(1) {
      width: 4.7em;
   }
}

/*========== LG-DESKTOP : BETWEEN 992PX TO 1199px. ==========*/
@media (min-width: 992px) and (max-width: 1199px) {
   /* GLOBAL */
   .container {
      max-width: 950px;
   }
   /* GLOBAL// */
}

/*========== MD-TABLET : BETWEEN 768PX TO 991PX ==========*/
@media (min-width: 768px) and (max-width: 991px) {
   /* GLOBAL */
   .container {
      max-width: 750px;
   }
   /* GLOBAL// */

   /* hero */
   .hero-gallary .obj-1 {
      margin-bottom: -55%;
   }
   .hero-gallary .obj-2 {
      margin-bottom: -65%;
   }

   /* cta */
   .cta-content .section-content {
      padding: 2.5em;
   }
}

/*========== SMALL MOBILE : SMALLER THEN 767PX ==========*/
@media (max-width: 767px) {
   /* GLOBAL */
   h1 {font-size: 40px;}
   h2 {font-size: 26px;}
   h3 {font-size: 22px;}
   h4 {font-size: 20px;}
   h5 {font-size: 14px;}
   h6 {font-size: 12px;}
   body {
      font-size: 14px;
   }
   .container{
      padding-left: 20px;
      padding-right: 20px;
   }
   /* GLOBAL// */

   /* HEADER AREA */
   .logo img {
      max-width: 7em;
   }
   /* HEADER AREA// */

   /* HERO AREA */
   .title {
      justify-content: center;
   }
   .hero-gallary .obj-1 {
      margin-bottom: -55%;
   }
   .hero-gallary .obj-2 {
      margin-bottom: -65%;
   }
   /* HERO AREA// */


   /* SERVICE */
   .testimony-area .el-absolute:nth-child(1), 
   .timeline-area .el-absolute:nth-child(2), 
   .service-area .el-absolute:nth-child(1) {
      width: 3.5em;
   }
   .service-area .el-absolute:nth-child(2) {
      width: 5.8em;
   }
   .feature-area .el-absolute:nth-child(1), 
   .timeline-area .el-absolute:nth-child(1) {
      width: 4em;
   }

   /* TIMELINE */
   .round-bx {
      height: 9em;
   }
   .timeline > .row {
      flex-direction: column-reverse !important;
   }
   .timeline {
      padding-top: .1px;
      padding-left: 3.5em;
   }
   .timeline::after, .timeline::before {
      display: none;
   }   
   .timeline-wrap {
      padding-top: .1px;
      position: relative;
   }
   .timeline-wrap::before {
      content: '';
      position: absolute;
      left: calc(2.5em / 2);
      top: 0;
      bottom: 0;
      width: 1px;
      background: var(--theme-color);
      transform: translate(-50%);
   }
   .timeline-counter {
      left: 0;
      top: 0;
      transform: none;
   }
   .timeline-counter::after {
      content: '';
      position: absolute;
      left: -1em;
      right: -1em;
      bottom: -1em;
      top: -1em;
      background: #FFF3E5;
      z-index: -1;
   }

   /* cta */
   .cta-content .section-content {
      padding: 2.5em 2em;
      padding-bottom: 0;
   }
}

/*========== LARGE MOBILE : BETWEEN 480PX TO 767PX ==========*/
@media only screen and (min-width: 480px) and (max-width: 767px) {
   .container {
      max-width: 350px;
   }
}

