/**
Theme Name: Hours Music
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hours-music
Template: astra
*/

/*---- Header CSS ----*/

#header{
 transition: 0.3s ease-in-out;
}

#header.scrolled{
 background: #2d2d2d !important;
}

#header.scrolled .inner-padding{
	transition: 0.3 ease-in-out;
}

#header.scrolled .inner-padding{
 padding-top: 25px !important;
 padding-bottom: 25px !important;
}

/*---- Global CSS ----*/

body{
 overflow-x: hidden !important;
}

#ast-scroll-top {
    background-color: #03BBEF !important;
}

.break-content a {
    word-break: break-all;
}

.elementor-widget-text-editor a{
	text-decoration: underline !important;
}

.post-content ul{
    margin-left: 20px !important;
    margin-bottom: 0 !important;
}

.post-content .content-table-wrapper{
    overflow: auto;
}

.post-content .content-table-wrapper table{
    min-width: 600px !important;
}

.responsive-menu a:hover{
	color: #03BBEF !important;
}

.responsive-menu a{
	display: inline-block !important;
}

/*----- Custom Ball -----*/

.cursor-ball{
  position: fixed;
  top:0;
  left:0;
  width:22px;
  height:22px;
  border-radius:50%;
  background:#03bbef;
  pointer-events:none;
  z-index:99999;

  display:flex;
  align-items:center;
  justify-content:center;

  transform:translate(-50%,-50%) scale(1);

  box-shadow:
      0 0 6px rgba(3,187,239,0.6),
      0 0 14px rgba(3,187,239,0.4),
      0 0 28px rgba(3,187,239,0.25);

  filter: drop-shadow(0 0 4px rgba(3,187,239,.6));

  transition: transform .2s ease, background .2s ease;
}

/* PLAY text */
.cursor-text{
  font-size:9px;
  color:#000;
  font-weight:600;
  letter-spacing:.5px;
  opacity:0;
  transition:.2s;
  white-space:nowrap;
}

/* play icon inside cursor */
.cursor-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transform:scale(.6);
  transition:.2s ease;
}

/* show icon on hover */
.cursor-ball.show-text .cursor-icon{
  opacity:1;
  transform:scale(1);
}

/* smooth icon look */
.cursor-icon svg{
  display:block;
}


/* hover state */
.cursor-ball.is-hover{
  background:#fff;
  transform:translate(-50%,-50%) scale(2.2);
}

.cursor-ball.show-text .cursor-text{
  opacity:1;
}

/* optional mobile disable */
@media(max-width:1024px){
  .cursor-ball{display:none;}
}


/*----- Section Scroll Top  ------*/

#unlimited-dis {
  scroll-margin-top: 120px; /* height of sticky header */
}

/*---- Astra Theme Default Style Reset CSS - START----*/

.ast-container {
    max-width: 100% !important;    
    padding: 0 !important;  
    margin: 0 !important;  
    width: 100% !important;
}

 .ast-article-single {
    padding: 0 !important;
}

.ast-separate-container #primary {
    margin: 0 !important;
    padding: 0 !important;
}

.ast-container p {
    margin-bottom: 10px;
}

.ast-container p:last-child {
    margin-bottom: 0;
}

.news-letter-form a{
    color: #03BBEF !important;
}

.ast-separate-container .ast-article-post,
.ast-separate-container .ast-article-single,
.ast-separate-container .comments-title,
.ast-separate-container .ast-archive-description {
    padding: 0;
    border: none;
}

.ast-separate-container .ast-article-single {
    background-color: transparent!important;
}

.ast-separate-container .ast-article-post{
	background: transparent!important;
}

.blog-loop-item:hover .blog-fet-img{
    transform: scale(1.1);
}

#ast-scroll-top {
    background-color: var(--primary);
    color: var(--text);
}

/*---- Astra Theme Default Style Reset CSS - END ----*/

.menu-icon .elementor-menu-toggle__icon--open{
    line-height: 0 !important;
}

.menu-icon .elementor-menu-toggle__icon--close{
    line-height: 0 !important;
}

h1.elementor-heading-title {
    line-height: 1.2em !important;
}

.specific-line-height h1{
	line-height: 0.8em !important;
}

.specific-line-height b{
    color: #03BBEF !important;
	position: relative;
	animation: bGlow 2.2s ease-in-out infinite;
}

@keyframes bGlow {
    0% {
        filter:
            drop-shadow(0 0 4px rgba(3, 187, 239, 0.6));
        transform: translateY(-50%) scale(1);
        opacity: 0.85;
    }

    50% {
        filter:
            drop-shadow(0 0 8px rgba(3, 187, 239, 0.9))
            drop-shadow(0 0 16px rgba(3, 187, 239, 0.7));
        transform: translateY(-50%) scale(1.15);
        opacity: 1;
    }

    100% {
        filter:
            drop-shadow(0 0 4px rgba(3, 187, 239, 0.6));
        transform: translateY(-50%) scale(1);
        opacity: 0.85;
    }
}

.no-margin-p p:last-child{
    margin-bottom: 0 !important;
}

/*----- Brand Slider ----*/

.brand-slider .swiper-wrapper{
	transition-timing-function: linear !important
}

.artist-slider .swiper-wrapper{
	transition-timing-function: linear !important
}

.brand-slider{
	position: relative;
}

.brand-slider::after{
	position: absolute;
	content: "";
	width: 50px;
	height: 100%;
	background: linear-gradient(270deg, #00000000 0%, #161616f0 43% 50%);
	top: 0;
	left: 0;
	z-index: 9;
}


.brand-slider::before{
	position: absolute;
	content: "";
	width: 50px;
	height: 100%;
	background: linear-gradient(90deg, #00000000 0%, #161616f0 43% 50%);
	top: 0;
	right: 0;
    z-index: 9;
}

/*------ Hover Box -------*/

.width-box{
    width: calc(33.33% - 20px)
}

.hover-box{
    cursor: pointer;
}

.hover-box .hover-box-icon svg{
    transition: 0.3s ease-in-out;
}

.hover-box:hover .hover-box-icon svg{
    filter: invert(99%) sepia(38%) saturate(2%) hue-rotate(105deg) brightness(285%) contrast(110%);
}

.hover-box:hover .hover-text{
	color: #ffffff !important;
}

/*------ Services Section ----*/

.padding-right-full {
    padding-right: calc((100% - 1400px) / 2) !important;
}

.padding-left-full {
    padding-left: calc((100% - 1400px) / 2) !important;
}


.services-box-dot{
    position: relative;
}

.services-box-dot:after{
   position: absolute;
   content: "";
   width: 26px;
   height: 26px;
   border-radius: 50%;
   background: #03bbef;
   box-shadow: 0px 0px 5.5px rgba(3, 187, 239, 0.87);
   left: -13px;
   top: 50%;
   transform: translateY(-50%);
   animation:dotGlow 2.2s ease-in-out infinite;
}

@keyframes dotGlow {
    0%{
        box-shadow: 0 0 4px rgba(3, 187, 239, 0.6);
        transform: translateY(-50%) scale(1);
        opacity: 0.85;
    }

    50%{
        box-shadow: 0 0 14px rgba(3, 187, 239, 0.95);
        transform: translateY(-50%) scale(1.15);
        opacity: 1;
    }

    100%{
        box-shadow: 0 0 4px rgba(3, 187, 239, 0.6);
        transform: translateY(-50%) scale(1);
        opacity: 0.85;
    }
}


/*----- Globe Section -----*/

.globe-container{
    position: relative;
}

.globe-container .globe-animate{
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    animation: globe-rotate 35s linear infinite;
    transform-origin: center;
}

@keyframes globe-rotate {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    50% {
        transform: translate(-50%, -50%) rotate(360deg); /* clockwise */
    }

    100% {
        transform: translate(-50%, -50%) rotate(-360deg); /* anticlockwise */
    }
}

.text-hover:hover .hover-text{
    color: #fff !important;
}

/*----- Testimonial Section -------*/

#button-left, #button-right{
	cursor: pointer;
}

.ul-css ul{
    margin-left: 0 !important;
    margin-bottom: 0 !important;
}

.ul-css ul li{
   padding-bottom: 25px;
}

.ul-css ul li:last-child{
   padding-bottom: 0px;
   margin-bottom: 0 !important;
}

.custom-list ul{
    list-style:none;
}

.custom-list li{
    position:relative;
    padding-left: 30px;
}

.custom-list li::before{
    content:"";
    position:absolute;
    left:0;
    top:0.6em;
    width:12px;
    height:12px;
    background:#03bbef;
    border-radius:50%;
    box-shadow:0px 0px 5.5px rgba(3, 187, 239, 0.87);
	animation:listDotGlow 2s ease-in-out infinite;
}


@keyframes listDotGlow {
    0%{
        box-shadow: 0 0 4px rgba(3, 187, 239, 0.6);
        transform: scale(1);
        opacity: 0.85;
    }

    50%{
        box-shadow: 0 0 12px rgba(3, 187, 239, 0.95);
        transform: scale(1.2);
        opacity: 1;
    }

    100%{
        box-shadow: 0 0 4px rgba(3, 187, 239, 0.6);
        transform: scale(1);
        opacity: 0.85;
    }
}

/*----- Tab Section -------*/

.tab-sec .e-n-tabs-heading button:first-child{
	 border-radius: 7px 0px 0px 7px !important;
}

.tab-sec .e-n-tabs-heading button:last-child{
	 border-radius: 0px 7px 7px 0px !important;
}

.custom-icon .elementor-icon-wrapper{
    line-height: 0 !important;
}

.custom-design-faq .e-n-accordion-item:not(:last-child){
    border-bottom: 1px solid #c8c8c82b;
}

.contact-us-list li{
    word-break: break-all;
}

/*------ Contact form -----*/

/* Hide native radio */
.contact-from input[type="radio"]{
    position: absolute;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Option wrapper */
.contact-from .elementor-field-option{
    display: flex;
    align-items: center;
    cursor: pointer;
    position: relative;
}

/* Label base */
.contact-from .elementor-field-option label{
    position: relative;
    padding-left: 32px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
}

/* Outer circle */
.contact-from .elementor-field-option label::before{
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid #ffffff;
    box-sizing: border-box;
    transition: all 0.25s ease;
}

/* Inner dot (unchecked = hidden) */
.contact-from .elementor-field-option label::after{
    content: "";
    position: absolute;
    left: 7px;
    top: 50%;
    transform: translateY(-50%) scale(0);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #03BBEF;
    transition: transform 0.25s ease;
}


.contact-from input[type="radio"]:checked + label::after{
    transform: translateY(-50%) scale(1);
}

/* Hover effect */
.contact-from .elementor-field-option label:hover::before{
    box-shadow: 0 0 6px rgba(3, 187, 239, 0.5);
}

.contact-from .elementor-field-type-radio label{
    display: block !important;
}

.contact-from label{
    display: none !important;
}

.contact-from .elementor-field-type-radio .elementor-field-subgroup .elementor-field-option{
    flex-basis: unset !important;
}


.contact-from .elementor-field-type-radio .elementor-field-subgroup{
    gap: 30px;
}

/* =====================================
   CAREER FORM — FILE UPLOAD (CLEAN)
===================================== */

.career-form .elementor-field-type-upload{
    position: relative;
}

/* Hide native input */
.career-form input[type="file"]{
    opacity: 0;
    position: absolute;
    inset: 0;
    z-index: 2;
    cursor: pointer;
}

/* Upload box */
.career-form .elementor-field-type-upload::before{
    content: attr(data-label);
    display: flex;
    align-items: center;
    height: 60px;
    width: 100%;
    padding: 0 20px;
    border: 1px dashed rgba(255,255,255,0.4);
    border-radius: 6px;
    background: transparent;
    color: #ffffff;
    font-size: 15px;
    font-weight: 500;
    transition: border-color 0.25s ease;
}

/* Hover (no shadow) */
.career-form .elementor-field-type-upload:hover::before{
    border-color: #03BBEF;
}

/* When file selected */
.career-form .elementor-field-type-upload.file-selected::before{
    color: #03BBEF;
}

/* =====================================
   CAREER FORM — SELECT ARROW DESIGN
===================================== */

.career-form .elementor-field-type-select{
    position: relative;
}

/* Remove default arrow */
.career-form select{
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: transparent;
    padding-right: 55px; /* space for arrow */
}

/* Custom arrow */
.career-form .elementor-field-type-select::after{
    content: "";
    position: absolute;
    top: 50%;
    right: 35px;
    width: 10px;
    height: 10px;
    border-right: 2px solid rgba(255,255,255,0.8);
    border-bottom: 2px solid rgba(255,255,255,0.8);
    transform: translateY(-50%) rotate(45deg);
    pointer-events: none;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

/* Hover */
.career-form .elementor-field-type-select:hover::after{
    border-color: #03BBEF;
}

.career-form .elementor-select-wrapper .select-caret-down-wrapper {
    display: none;
}

/* Open / focus state */
.career-form select:focus + *,
.career-form select:focus{
    outline: none;
}

/* Optional: rotate arrow on focus */
.career-form select:focus ~ ::after{
    transform: translateY(-50%) rotate(-135deg);
}

/*----- Blog Listing Page ------*/

/* =====================================
   ELEMENTOR TAXONOMY → REAL DROPDOWN
===================================== */

.custom-drop-down {
    position: relative;
}

/* Dropdown button */
.custom-drop-down .e-filter {
    position: relative;
    background: transparent;
    border: 1px solid #666666;
    border-radius: 12px;
    padding: 12px 20px 12px 20px;
    cursor: pointer;
}

/* Chevron */
.custom-drop-down .e-filter::after {
    content: "";
    position: absolute;
    right: 18px;
    top: 50%;
    width: 12px;
    height: 12px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: translateY(-50%) rotate(45deg);
    pointer-events: none;
}

/* Floating dropdown panel */
.custom-drop-down .dropdown-panel {
    position: absolute;
    padding: 15px;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: #0f0f0f;
    border: 1px solid #2a2a2a;
    border-radius: 12px;
    display: none;
    z-index: 999;
}

/* Open state */
.custom-drop-down.open .dropdown-panel {
    display: block;
}

/* Dropdown items */
.custom-drop-down .dropdown-panel .e-filter-item {
    width: 100%;
    background: none;
    border: none;
    padding: 12px 22px;
    text-align: left;
    font-size: 15px;
    cursor: pointer;
}

/* Hover + active */
.custom-drop-down .dropdown-panel .e-filter-item:hover,
.custom-drop-down .dropdown-panel .e-filter-item[aria-pressed="true"] {
}

/* Placeholder text inside dropdown */
.custom-drop-down .filter-placeholder {
    font-size: 15px;
    color: #ffffff;
    pointer-events: none;
}

/*----- Search Box -----*/

/* ===============================
   BLOG SEARCH INPUT — FIGMA STYLE
================================ */

.blog-search-form {
    position: relative;
}

/* Input */
.blog-search-input {
    width: 100%;
    height: 58px !important;
    padding: 0 48px 0 18px !important;
    background: transparent !important;
    border: 1px solid #666666 !important;
    border-radius: 12px !important;
    color: #ffffff !important;
    font-size: 20px !important;
    font-weight: 400;
    outline: none;
    transition: all .25s ease;
    font-family: 'Zalando Sans Expanded' !important;
}

/* Placeholder */
.blog-search-input::placeholder {
    color: #ffffff !important;
}


/* Search icon */
.blog-search-form::after {
    content: "";
    position: absolute;
    right: 16px;
    top: 50%;
    width: 30px;
    height: 30px;
    transform: translateY(-50%);
    pointer-events: none;

    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2303bbef' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
}

.post-content h2, .post-content h3, .post-content h4, .post-content h5, .post-content h6{
    color: #ffffff !important;
    margin: 10px 0 !important;
}

.post-content p{
    padding: 0 !important;
    margin: 5px 0 !important;
}

.post-content ul{
	padding: 10px 0 !important;
}

.post-content ol{
	padding: 10px 0 !important;
}

.post-content ol{
    margin-left: 35px !important;
}

.post-content img {
    width: 100% !important;
    border-radius: 10px;
    margin: 10px 0 !important;
}

/*----- News Letter ------*/

.news-letter-form .elementor-form-fields-wrapper{
    justify-content: center !important;
}

.news-letter-form .elementor-field-type-html{
    text-align: center !important;
}

.news-letter-form h4{
    color: #03BBEF !important;
    padding-bottom: 15px !important;
}

.news-letter-form .font-20{
    font-size: 16px !important;
}

/* =====================================
   NEWSLETTER FORM – ACCEPTANCE CHECKBOX
   Works with Elementor acceptance field
===================================== */

.news-letter-form .elementor-field-option{
    position: relative;
    display: block;
}

/* Hide native checkbox */
.news-letter-form
.elementor-acceptance-field{
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* Label styling */
.news-letter-form
.elementor-field-option > label{
    position: relative;
    display: block;
    padding-left: 38px;
    cursor: pointer;
    line-height: 1.5;
}

/* Bold heading (Email) */
.news-letter-form
.elementor-field-option > label b{
    color: #00c6ff;
    padding-bottom: 20px !important;
}

/* ===== Checkbox box ===== */
.news-letter-form
.elementor-field-option > label::before{
    content: "";
    position: absolute;
    left: 0;
    top: -4px;
    width: 30px;
    height: 30px;
    border: 1px solid #ffffff;
    background: transparent;
    transition: all 0.25s ease;
}

/* ===== Tick mark ===== */
.news-letter-form
.elementor-field-option > label::after{
    content: "";
    position: absolute;
    left: 10px;
    top: 1px;
    width: 10px;
    height: 17px;
    border-right: 3px solid #00c6ff;
    border-bottom: 3px solid #00c6ff;
    transform: rotate(45deg);
    opacity: 0;
    transition: opacity 0.2s ease;
}

/* ===== Checked state ===== */
.news-letter-form
.elementor-acceptance-field:checked
+ label::before{
    border-color: #00c6ff;
}

.news-letter-form
.elementor-acceptance-field:checked
+ label::after{
    opacity: 1;
}

/* Hover effect */
.news-letter-form
.elementor-field-option > label:hover::before{
    border-color: #00c6ff;
}

/* Focus (keyboard accessibility) */
.news-letter-form
.elementor-acceptance-field:focus
+ label::before{
    box-shadow: 0 0 0 2px rgba(0, 198, 255, 0.35);
}

.padding-ul ul{
    padding-left: 10px !important;
}

.simple-ul ul{
    margin-left: 20px !important;
    margin-bottom: 10px !important;
	text-align: left !important;
}

.custom-carusel .swiper-pagination .swiper-pagination-bullet-active{
    width: 30px !important;
    border-radius: 20px !important;
    background-color: #03BBEF !important;
}

.blod-blue strong{
	color: #03BBEF !important;
}

/*----- Responsivness -----*/


@media(max-width: 1599px){

#header.scrolled .inner-padding{
 padding-top: 20px !important;
 padding-bottom: 20px !important;
}

.padding-right-full {
    padding-right: calc((100% - 1200px) / 2) !important;
}

.padding-left-full {
    padding-left: calc((100% - 1200px) / 2) !important;
}

}

@media(max-width: 1366px){
    
.news-letter-form
.elementor-field-option > label{
    padding-left: 30px;
}    
    /* ===== Checkbox box ===== */
.news-letter-form
.elementor-field-option > label::before{
    left: 0;
    top: -4px;
    width: 25px;
    height: 25px;
}

.news-letter-form
.elementor-field-option > label::after{
    left: 9px;
    top: 1px;
    width: 7px;
    height: 13px;
}

.news-letter-form .elementor-field-group {
    margin-bottom: 30px !important;
	align-items: flex-start !important;
}

}

@media(max-width: 1200px){
    
.padding-right-full {
    padding-right: 20px;
}

.padding-left-full {
    padding-left: 20px;
}

}

@media(max-width: 1024px){
  .width-box{
     width: calc(50% - 11px);
  }

.services-box-dot:after{
   width: 20px;
   height: 20px;
  }

.services-box-dot:after {
	left: -9px;
 }
}


@media(max-width: 1024px){
    .contact-from .elementor-field-option label::before{
    width: 20px;
    height: 20px;
}

.contact-from .elementor-field-option label::after{
    left: 5px;
    width: 10px;
    height: 10px;
}

.news-letter-form .elementor-field-option > label::before{
    left: 0;
    top: -2px;
    width: 20px;
    height: 20px;
}

.news-letter-form
.elementor-field-option > label::after{
    left: 7px;
    top: 1px;
    width: 7px;
    height: 11px;
}

}

@media(max-width: 768px){
    .table-wrapper{
    min-width: 685px !important;
    }
    .table-scroll-wrapper{
        overflow: auto;
    }
}

@media(max-width: 767px){


#header.scrolled .inner-padding{
 padding-top: 15px !important;
 padding-bottom: 15px !important;
}
	
.responsive-menu a{
	display: flex !important;
    justify-content: center !important;
}

.width-box{
     width: 100%;
}

.mobile-center-list li{
    text-align: center !important;
}

.list-text li{
    text-align: center !important;
}

.no-br br{
	display: none !important
}

.services-box-dot:after{
   width: 20px;
   height: 20px;
}

.process-boxes{
    position: relative;
}

.process-boxes::after{
    position: absolute;
    content: "";
    width: 2px;
    height: 40px;
    background: #03BBEF;
    bottom: -40px;
    z-index: 1;
    left: 0;
    right: 0;
    margin: auto;
    box-shadow: 0px 0px 5.5px rgba(3, 187, 239, 0.87);
}

.career-form .elementor-field-type-upload::before{
     height: 56px;
     font-size: 14px;
}

.blog-search-input {
     font-size: 16px !important;
     padding: 0 10px 0 15px !important;
     height: 50px !important;
}

.blog-search-form::after {
    width: 20px;
    height: 20px;
}
	
}

@media(max-width: 400px){
    .iframe-wrapper .iframe-content{
        min-width: 400px !important;
    }
}


.timeline .progress-line-container {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    transform: translateY(-50%);
}

.timeline .progress-line {
    width: 100%;
    height: 100%;
    background: #4C4C4C;
}

.timeline .progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background: #03BBEF;
}

.timeline .steps {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 2;
}

.timeline .step {
    flex: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.timeline .step-circle {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #4C4C4C;
    z-index: 3;
}

.timeline .step-label {
    font-size: 20px;
    font-weight: 600;
    opacity: 0;
	color: #fff;
}

.timeline .step-top .step-label {
    margin-top: 14px;
}

.timeline .step-bottom .step-label {
    margin-bottom: 14px;
}

.timeline .step-description {
    font-size: 15px;
    font-weight: 300;
    min-height: 126px;
    line-height: 1.2em;
    color: #C8C8C8;
    max-width: 275px;
    opacity: 0;
}

.timeline .step-bottom .step-description {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
}

.timeline .step.step-bottom {
    padding-top: 96px;
}

.timeline .step-top {
    justify-content: flex-end;
    padding-bottom: 96px;
}

.timeline .step-top .step-description {
    margin-bottom: 14px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

@media(max-width:1366px) {
    .timeline .step-description {
        font-size: 14px;
        min-height: 135px;
    }
    .timeline .step.step-bottom {
        padding-top: 108px;
    }
    .timeline .step.step-top {
        padding-bottom: 108px;
    }
}

@media(max-width:1024px) {
    .timeline .step-label {
        font-size: 18px;
    }
    .timeline .step-description {
        font-size: 13px;
        min-height: 130px;
    }
}

@media(max-width:768px) {
     .timeline {
        padding: 0px 0 0px 40px;
    }

    .timeline .step {
        position: relative;
    }

   .timeline .step .step-circle {
        position: absolute;
        left: -29px;
        top: 0;
        margin: 0;
        width: 20px;
        height: 20px;
    }

    .timeline .step.step-bottom {
        padding-top: 0px;
    }

    .timeline .step.step-top {
        padding-bottom: 0px;
    }

    .timeline .step.step-top {
        flex-direction: column-reverse;
    }

    .timeline .step-bottom .step-description {
        margin-top: 0;
    }

    .timeline .step-top .step-description {
        margin-top: 0;
    }

    .timeline .step-top .step-label {
        margin-top: 0;
        margin-bottom: 14px;
    }

    .timeline .step-description {
        min-height: 0px;
    }

    .timeline .progress-line-container {
        left: 20px;
        top: 0;
        bottom: 0;
        width: 1px;
        height: 100%;
        transform: none;
    }

    .timeline .progress-fill {
        width: 100%;
        height: 0%;
    }

    .timeline .steps {
        flex-direction: column;
        gap: 70px;
        align-items: flex-start;
    }

    .timeline .step {
        align-items: flex-start;
        text-align: left;
    }

    .timeline .step-label,
    .timeline .step-description {
        max-width: 100%;
    }

    .timeline .step-top,
    .timeline .step-bottom {
        justify-content: flex-start;
    }

}