/*
CTC Separate Stylesheet
Updated: 2026-02-12 08:27:46
Theme Name: eLearning Child
Theme URI: https://masteriyo.com/elearning-lms-theme/
Template: elearning
Author: Masteriyo
Author URI: https://masteriyo.com
Description: eLearning is a free WordPress LMS theme powered by Masteriyo LMS. Masteriyo is a revolutionary LMS plugin based on React JS making it not just super fast but also super easy to setup. Masteriyo plugin helps to create and sell online courses with ease. eLearning theme is Gutenberg, Elementor and any other page builder ready making it perfect choice to create a visually appealing professional looking LMS site. eLearning is light weight, SEO optimized, AMP ready, RTL ready, major browsers compatible, fully responsive, translation ready and backed up by our awesome support team. It has tons of customizer options related to header, menu, blog page, single post page, footer, layouts, typography, designs and many more. It comes with pre-built Elementor and Gutenberg demos that you can import with few clicks via the recommended demo importer plugin. Checkout the live demo at https://demo.masteriyo.com/elearning.
Tags: one-column,two-columns,left-sidebar,right-sidebar,custom-background,custom-colors,custom-logo,featured-images,footer-widgets,full-width-template,theme-options,threaded-comments,translation-ready,blog,news,education,rtl-language-support
Version: 2.1.6.1770884866
*/

.wp-block-button__link:hover { filter: brightness(70%); /* lower % = darker */  transition: filter 0.3s ease;}
.p_tb {  padding: 60px 0;}
body .tg-header-builder .tg-header-main-row { padding-top: 10px;  padding-right: 10px;  padding-bottom: 10px;  padding-left: 10px;}
.hero{display:flex;  align-items:center;  justify-content:center;  text-align:center;  background: radial-gradient(circle at top left, #ff910061, transparent 40%), radial-gradient(circle at bottom right, #ff91007d, transparent 40%), #cacaca2e;  position:relative;overflow:hidden;}
.hero-content{  max-width:970px;}
body .hero-content p { margin-bottom: 10px;}
.hero h1{  font-size:48px;  font-weight:700;  color:#111;  margin-bottom:20px;  line-height:1.2;}
.hero p{  font-size:18px;  color:#555;  margin-bottom:35px;}
.hero-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 32px;
    flex-wrap: wrap;
    margin-top: 20px;
}
.btn-primary {    padding: 12px 26px;    border-radius: 30px;    border: none;    background: linear-gradient(43deg, #ff9100a6, #ff9100f0);    color: white;    font-weight: 600;    cursor: pointer;    transition: 0.3s;}
.btn-primary:hover{  transform:translateY(-3px);  box-shadow:0 8px 20px rgba(123,92,255,0.4);}
.btn-secondary{  padding:12px 26px;  border-radius:30px;  border:1px solid #ddd;  background:white; color:#333;font-weight:500;cursor:pointer;  transition:0.3s;}
.btn-secondary:hover{  background:#f1f1f1;}
.tags{  display:flex;  flex-wrap:wrap;  justify-content:center;  gap:15px;  max-width:900px;  margin:auto;}
.tag {
    padding: 10px 15px;
    background: #dddddd;
    border-radius: 25px;
    font-size: 16px;
    color: #444;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: 0.3s;
    border: 1px dashed #adadad;
}
.tag:hover{  transform:translateY(-5px);  box-shadow:0 8px 20px rgba(0,0,0,0.08);}
.blog #primary , .single-post #primary{    width: 70%;    padding-right: 60px;}
.blog #secondary , .single-post #secondary{    width: 30%;}
.hero-buttons button.btn-secondary:hover {
    border: unset;
}
.pop_titl {
    text-align: center;
}
.pop_titl h3 {
    color: #ff9100;
    font-size: 30px;
    margin: 0;
    line-height: 1.5;
}
.pop_titl p {
    color: #fff;
}
.custom-model-wrap input, .custom-model-wrap select, .custom-model-wrap textarea {
    border-radius: 5px !important;
}
@media(max-width:768px){
	.hero h1 {
    font-size: 30px;
    margin-bottom: 5px;
}
	body .hero-content p {
    margin-bottom: 0px;
}
	.p_tb {
    padding: 30px 0;
}
	.why-wrapper {
    gap: 15px;
}
  .hero p{    font-size:16px;  }
}
body .tg-footer-builder .tg-footer-main-row {
    padding-top: 30px;
}
.stats-section { background: #10171f; /* Dark page background */  text-align: center;}
 .section-title {  font-size: 2.5rem;  margin-bottom: 50px;  font-weight: bold;  color: #ff9100;} 
.stats-grid { display: grid;  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));  gap: 0 40px;}
.stat-card { background: rgba(255, 255, 255, 0);  padding: 40px 20px;  border-radius: 20px;  border: 2px solid #ff9100;  box-shadow: 0 10px 25px rgba(0,0,0,0.2);  transition: transform 0.3s, background 0.3s, color 0.3s, border-color 0.3s;  cursor: pointer;  color: #ff9100;}
.stat-card:hover {  transform: translateY(-10px);  background: rgba(255, 145, 0, 0.1); /* subtle orange hover effect */  color: #fff;  border-color: #ff9100;}
.icon img {
    width: 50px;
}
.icon {  font-size: 3rem;  margin-bottom: 15px;  display: inline-block;  animation: bounce 2s infinite;  color: #ff9100; /* Orange icon */}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-15px); }
  60% { transform: translateY(-8px); }
}
.number {  font-size: 2.5rem;  font-weight: 700;  margin-bottom: 10px;  transition: color 0.3s;  color: #ff9100; /* Orange numbers */}
.stat-card p {  font-size: 1.1rem;  margin: 0;  font-weight: 500;  color: #ff9100; /* Orange text */}
/*  */
.services-section{
  background:#ffffff;
  text-align:center;
}

.services-title{
  font-size:42px;
  margin-bottom:15px;
  color:#10171f;
}

.services-subtitle{
  color:#666;
  margin-bottom:35px;
  font-size:18px;
}
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 25px;
    /* max-width: 1200px; */
    /* margin: auto; */
}
.service-card {
    background: #ffffff;
    padding: 40px 30px 20px;
    border-radius: 20px;
    border: 1px solid #c8c8c8;
    transition: all 0.4s ease;
/*     box-shadow: 0 5px 15px rgba(0,0,0,0.03); */
    display: flex;
    flex-direction: column;
    align-items: center;
	box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}
.service-card:hover{
  transform:translateY(-12px);
  border-color:#ff9100;
  box-shadow:0 20px 40px rgba(255,145,0,0.15);
}

.icon{
  font-size:40px;
  margin-bottom:20px;
  transition:0.4s;
}

.service-card:hover .icon{
  transform:scale(1.15);
}

.service-card h3{
  font-size:21px;
  margin-bottom:15px;
  color:#10171f;
}

.service-card p{
  color:#666;
  font-size:15px;
  line-height:1.6;
  margin-bottom:25px;
}

/* CTA BUTTON */
body .service-btn {
    padding: 10px 22px;
    border-radius: 30px;
    border: 1px solid #ff9100;
    color: #ff9100;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s ease;
    background-image: linear-gradient(190deg, #ffffff 0%, #ffffff 100%);
}

body .service-btn:hover{
  background:#ff9100;
  color:white;
  box-shadow:0 10px 25px rgba(255,145,0,0.25);
}

/* Scroll Reveal */
.reveal2{
  transform:translateY(40px);
  opacity:0;
  transition:all 0.8s ease;
}

.reveal2.active{
  transform:translateY(0);
  opacity:1;
}


/* case */
/* ===============================
   PROCESS SECTION
=================================*/
.process-section {
    padding: 60px 0;
    background: linear-gradient(to bottom, #f8f9fb, #ffffff);
    position: relative;
    overflow: hidden;
    border-top: 1px solid #e9e9e9;
	border-bottom: 1px solid #e9e9e9;
}
/* subtle animated background shapes */
.process-section::before {
  content: "";
  position: absolute;
  width: 300px;
  height: 300px;
  background: rgba(255, 145, 0, 0.08);
  border-radius: 50%;
  top: -80px;
  left: -80px;
  animation: float 6s ease-in-out infinite;
}

.process-section::after {
  content: "";
  position: absolute;
  width: 250px;
  height: 250px;
  background: rgba(16, 23, 31, 0.05);
  border-radius: 50%;
  bottom: -60px;
  right: -60px;
  animation: float 8s ease-in-out infinite;
}

@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(20px); }
  100% { transform: translateY(0px); }
}

.container {
  max-width: 1200px;
  margin: auto;
  position: relative;
  z-index: 2;
}

/* ===============================
   HEADER
=================================*/

.section-header {
  text-align: center;
  margin-bottom: 35px;
  animation: fadeUp 1s ease forwards;
}

body .heading {
    font-size: 42px;
    color: #10171f;
    margin-bottom: 15px;
    line-height: 1.1;
}
.section-header p {
  font-size: 18px;
  color: #666;
}
.p_btm{padding-bottom:60px;}
/* ===============================
   TIMELINE
=================================*/

.timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  position: relative;
}

.timeline::before {
  content: "";
  position: absolute;
  top: 50px;
  left: 5%;
  width: 90%;
  height: 3px;
  background: linear-gradient(to right, #ff9100, #10171f);
  z-index: 0;
}

/* ===============================
   STEP CARD
=================================*/

.step {
  background: #ffffff;
  border-radius: 20px;
  padding: 40px 25px 20px;
  text-align: center;
  transition: all 0.4s ease;
  border:1px solid #dbdbdb;
  position: relative;
  z-index: 1;
  opacity: 0;
  transform: translateY(40px);
  animation: fadeUp 1s ease forwards;
}

.step:nth-child(1) { animation-delay: 0.2s; }
.step:nth-child(2) { animation-delay: 0.4s; }
.step:nth-child(3) { animation-delay: 0.6s; }
.step:nth-child(4) { animation-delay: 0.8s; }

.step-number {
  font-size: 28px;
  font-weight: 700;
  color: #ff9100;
  margin-bottom: 15px;
  transition: 0.3s;
}

.step h3 {
  font-size: 20px;
  margin-bottom: 15px;
  color: #10171f;
}

.step p {
  font-size: 15px;
  color: #555;
  line-height: 1.6;
}

/* Hover Animation */

.step:hover {
  transform: translateY(-15px);
  box-shadow: 0 25px 50px rgba(0,0,0,0.08);
  border-color: #ff9100;
}

.step:hover .step-number {
  transform: scale(1.2);
}
body .tg-header-builder .tg-primary-nav ul li ul li a {
    font-weight: 500;
    font-size: 16px;
    line-height: 1.8;
    padding: 8px 15px;
}
body .tg-primary-menu > div ul li ul {
    top: 25px;
}
/* ===============================
   ANIMATIONS
=================================*/

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.wp-block-social-links .wp-block-social-link.wp-social-link .wp-block-social-link-anchor, .wp-block-social-links .wp-block-social-link.wp-social-link .wp-block-social-link-anchor svg, .wp-block-social-links .wp-block-social-link.wp-social-link .wp-block-social-link-anchor:active, .wp-block-social-links .wp-block-social-link.wp-social-link .wp-block-social-link-anchor:hover, .wp-block-social-links .wp-block-social-link.wp-social-link .wp-block-social-link-anchor:visited {
    color: rgb(255 145 0);
    fill: currentColor;
}
.tg-footer-main-row img {
    width: 40% !important;
}
body .tg-footer-builder .tg-footer-main-row {
    padding-top: 60px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
}

/* project section */
.project-gallery {
/*   padding: 80px 20px; */
  background: #ffffff;
}

.project-gallery .container {
  max-width: 1200px;
  margin: auto;
  text-align: center;
}

.project-gallery p {
  color: #6b7280;
  margin-bottom: 30px;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
}

.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 15px 40px rgba(0,0,0,0.08);
  transition: 0.4s ease;
  cursor: pointer;
  background: #f9fafb;
  height: 420px;   /* 👈 Makes images taller */
	    border: 1px solid #e9e9e9;
}


.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* Keeps website layout look */
  object-position: top; /* Shows website header */
  transition: 0.5s ease;
}

.gallery-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.12);
}

.gallery-item:hover img {
  transform: scale(1.08);
}

/* why us */
.why-choose-pro {
  background: #ffffff;
  position: relative;
}

.why-wrapper {
  max-width: 1200px;
  margin: auto;
  display: flex;
  align-items: center;
  gap:50px;
}

/* LEFT */
.why-content-pro {
  width: 50%;
}
.badge {
    display: inline-block;
    background: #000000;
    color: #ff9100;
    padding: 10px 16px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 0px;
}
.why-content-pro h2 {
    font-size: 42px;
    line-height: 1.2;
    color: #10171f;
    margin-bottom: 15px;
}
/* .why-content-pro p {
  font-size: 18px;
  color: #6b7280;
  margin-bottom: 35px;
}
 */
.why-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 40px;
  font-size: 16px;
  color: #374151;
}

.pro-btn {
  background: linear-gradient(135deg, #2563eb, #4f46e5);
  color: white;
  padding: 16px 40px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 600;
  box-shadow: 0 15px 40px rgba(37,99,235,0.3);
}

/* RIGHT */
.why-image-pro {
  width: 50%;
  position: relative;
}

.why-image-pro img {
  width: 100%;
  border-radius: 24px;
  position: relative;
  z-index: 2;
  box-shadow: 0 30px 80px rgba(0,0,0,0.15);
}

.img-bg {
  position: absolute;
  width: 90%;
  height: 90%;
  background: linear-gradient(135deg, #f0f0f0, #ff9100);
  border-radius: 30px;
  top: -30px;
  left: -30px;
  z-index: 1;
}

/* MOBILE */
@media(max-width: 900px){
  .why-wrapper{
    flex-direction: column;
  }
  .why-content-pro, .why-image-pro{
    width:100%;
  }
  .why-content-pro h2{
    font-size:32px;
  }
}


/*  us*/

/* 📱 Responsive */
@media (max-width: 900px) {
  .gallery-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px) {
  .gallery-grid {
    grid-template-columns: 1fr;
  }
.gallery-item {
    height: 320px;
  }
  .project-gallery h2 {
    font-size: 28px;
  }
}
.cta-section {
    background: linear-gradient(135deg, #0f172a, #020617);
    color: #ffffff;
/*     margin-top: 20px; */
}
.tg-scroll-to-top {
    background-color: #ff9100 !important;
}
.single-post h1 ,.single-post h2{
    font-size: 28px;
    line-height: 1.2;
}

.cta-container {
  max-width: 1100px;
  margin: auto;
  text-align: center;
  background: rgba(255,255,255,0.04);
  border-radius: 24px;
  padding: 50px 40px;
  backdrop-filter: blur(12px);
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
}
.cta-content h2 {
    font-size: 42px;
    margin-bottom: 20px;
    color: #fff;
}
.cta-content p {
  max-width: 720px;
  margin: auto;
  font-size: 18px;
  color: #cbd5f5;
  line-height: 1.7;
}

.cta-buttons {
  margin-top: 40px;
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.btn-primary {
    background: #ff9100;
    color: #000;
    padding: 16px 34px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: 0.3s ease;
    letter-spacing: 0.5px;
}
.btn-primary:hover {
  background: #000;
  transform: translateY(-2px);
}

.btn-secondary {
  border: 2px solid #ff9100;
  color: #ff9100;
  padding: 16px 34px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 600;
  transition: 0.3s ease;
	 letter-spacing: 0.5px;
}

.btn-secondary:hover {
  background: #000;
  color: #fff;
}

.cta-trust {
  margin-top: 35px;
  color: #94a3b8;
  font-size: 14px;
}
.site-content {
    padding-top: 50px;
    padding-bottom: 50px;
}
body .innr .service-card {
    padding: 40px 15px 20px;
}
.services-list {
  list-style: none;
  padding: 0;
  margin-bottom: 30px;
}

.services-list li {
  font-size: 16px;
  margin-bottom: 12px;
  padding-left: 28px;
  position: relative;
}

.services-list li::before {
  content: "✔";
  position: absolute;
  left: 0;
  top: 0;
  color: #ff9100;
  font-weight: bold;
}

.services-btn {
  display: inline-block;
  padding: 14px 30px;
  background: #ff9100;
  color: #fff;
  text-decoration: none;
  border-radius: 30px;
  font-weight: 600;
  transition: 0.3s;
}

.services-btn:hover {
  background: #e06900;
}
h3.secvice_sec_title {
    margin-top: 10px;
    font-style: italic;
    font-size: 42px;
    line-height: 1.2;
    color: #10171f;
    margin-bottom: 15px;
}
ul.services-list li {
    width: 50%;
    float: left;
}
.tg-mobile-navigation nav ul li.current_page_item > a, .tg-mobile-navigation nav ul li.current-menu-item > a, .tg-mobile-navigation nav ul li > a:hover {
    color: #ff9100 !important;
}
.center{text-align:center;}
.padng_btm {
    padding-bottom: 60px;
}
.Click-here {
  cursor: pointer;
  background-image: linear-gradient(190deg, #f83600 0%, #fee140 100%);
  color: #fff;
 width: auto;
  text-align: center;
  font-size:16px;
	    padding: 16px 34px;
/*   margin: 0 auto; */
  transition:background-image 3s ease-in-out;
}
.Click-here:hover{
  transition:background-image 3s ease-in-out;
  background-image: linear-gradient(90deg, #fee140 0%, #f83600 100%);
}
.custom-model-main {
  text-align: center;
  overflow: hidden;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0; /* z-index: 1050; */
  -webkit-overflow-scrolling: touch;
  outline: 0;
  opacity: 0;
  -webkit-transition: opacity 0.15s linear, z-index 0.15;
  -o-transition: opacity 0.15s linear, z-index 0.15;
  transition: opacity 0.15s linear, z-index 0.15;
  z-index: -1;
  overflow-x: hidden;
  overflow-y: auto;
}

.model-open {
  z-index: 99999;
  opacity: 1;
  overflow: hidden;
}
.custom-model-inner {
  -webkit-transform: translate(0, -25%);
  -ms-transform: translate(0, -25%);
  transform: translate(0, -25%);
  -webkit-transition: -webkit-transform 0.3s ease-out;
  -o-transition: -o-transform 0.3s ease-out;
  transition: -webkit-transform 0.3s ease-out;
  -o-transition: transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
  transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
  display: inline-block;
  vertical-align: middle;
  width: 600px;
  margin: 30px auto;
  max-width: 97%;
}
.custom-model-wrap {
  display: block;
  width: 100%;
  position: relative;
  background-color: #000;
  border: 1px solid #999;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
  background-clip: padding-box;
  outline: 0;
  text-align: left;
  padding: 20px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  max-height: calc(100vh - 70px);
	overflow-y: auto;
}
.model-open .custom-model-inner {
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
  position: relative;
  z-index: 999;
}
.model-open .bg-overlay {
  background: rgba(0, 0, 0, 0.6);
  z-index: 99;
}
input.wpcf7-form-control.wpcf7-submit.has-spinner {
    background: #ff9100;
    padding: 10px 20px;
}
.bg-overlay {
  background: rgba(0, 0, 0, 0);
  height: 100vh;
  width: 100%;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  -webkit-transition: background 0.15s linear;
  -o-transition: background 0.15s linear;
  transition: background 0.15s linear;
}
.close-btn {
  position: absolute;
  right: 0;
  top: -30px;
  cursor: pointer;
  z-index: 99;
  font-size: 30px;
  color: #fff;
}
.pop-up-content-wrap p {
    margin-bottom: 10px;
}
textarea.wpcf7-form-control.wpcf7-textarea {
    height: 100px;
}
.thanku { box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;width: 70%;margin: 0 auto;padding: 40px;text-align: center;background: #f5f5f5;border: 1px solid #ccc; border-radius: 10px;}
.thanku h1 { margin-bottom: 0;color: #ff9100; font-size: 45px; text-transform: uppercase;font-weight: 800 !important;}
.thanku h2 {  font-size: 30px;  margin-bottom: 10px;}
.thanku p {  font-size: 20px;}
body .ti-widget.ti-goog .ti-col-2 .ti-footer, body .ti-widget.ti-goog .ti-col-2 .ti-reviews-container {
    -ms-flex: 0 0 35%;
    flex: 0 0 35%;
    max-width: 67%;
}
.ti-rating-text span.nowrap {
    display: none !important;
}
.ti-profile-img{display:none;}
.hm_contct {
    background: #ff9100;
    padding: 30px 30px 15px;
    border-radius: 10px;
    border: 1px solid #e9e9e9;
}
.hm_contct h3 {
    color: #fff;
    font-size: 29px;
    margin-bottom: 26px;
}
.hm_contct p {
    margin-bottom: 10px;
}
.hm_contct input.wpcf7-form-control.wpcf7-submit.has-spinner {
    background: #0e1528;
}
@media screen and (min-width:800px){
	.custom-model-main:before {
	  content: "";
	  display: inline-block;
	  height: auto;
	  vertical-align: middle;
	  margin-right: -0px;
	  height: 100%;
	}
}
@media screen and (max-width:1200px){.step { padding: 25px 10px 10px;}.timeline {  gap: 30px; }}
/* @media (max-width:992px){.hero h1 { font-size: 37px;  margin-bottom: 15px;}} */
@media screen and (max-width:799px){
  .custom-model-inner{margin-top: 45px;}
}

/* .padng_btm{padding-bottom:60px;} */
/* 📱 Mobile Responsive */
@media (max-width: 768px) {
  .cta-content h2 {
    font-size: 30px;
  }
.img-bg {
    width: 77%;
	left: 0;}
  .cta-container {
    padding: 50px 25px;
  }

  .cta-content p {
    font-size: 16px;
  }
body .heading {
    font-size: 30px;
    margin-bottom: 0px;
}
}

/*  150226*/
/* ===============================
   RESPONSIVE DESIGN
=================================*/

@media (max-width: 992px) {
  .timeline {
    grid-template-columns: repeat(2, 1fr);
  }

  .timeline::before {
    display: none;
  }
}

@media (max-width: 600px) {
  .timeline {
    grid-template-columns: 1fr;
  }

  .section-header h2 {
    font-size: 28px;
  }

  .step {
    padding: 30px 20px;
  }
}
@media (max-width:500px){ul.services-list li {
    width: 100%;
}}