* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
}


:root {
     --primary-color: #ed4705;
     --secondary-color: #253d98;
     --light-text: #fff;
     --green-color: #2d9222;
}

body {
     font-family: "Rubik", sans-serif;
}

.wrapper {
     overflow: hidden;
}

.width-fixed {
     max-width: 1100px;
     margin: 0 auto;
}

.text-60 {
     font-size: 60px;
     font-weight: 800;
}

.text-50 {
     font-size: 50px;
     font-weight: 800;
}

.text-42 {
     font-size: 42px;
     font-weight: 800;
     line-height: 1.15;
     /* line-height: 54.6px; */
}

.text-36 {
     font-size: 36px;
     font-weight: 600;
}

.text-32 {
     font-size: 32px;
     font-weight: 500;
}

.text-26 {
     font-size: 26px;
     font-weight: 700;
}

.text-24 {
     font-size: 24px;
     font-weight: 800;
}

.text-22 {
     font-size: 22px;
     font-weight: 500;
     line-height: 36px;
     margin: 3px 0;
}

.text-20 {
     font-size: 20px;
     font-weight: 500;
}

.text-18 {
     font-size: 18px;
     font-weight: 300;

}

.text-16 {
     font-size: 16px;
     font-weight: 300;
}

.text-14 {
     font-size: 14px;
}

.btn-link {
     width: 290px;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     background-color: var(--primary-color);
     color: var(--light-text);
     text-decoration: none;
     padding: 8px 12px;
     border-radius: 100px;
     position: relative;
     transition: .5s ease-in-out;
}


.btn-link:hover {
     color: var(--light-text);
     background-color: var(--secondary-color);
}

.highlight-text {
     color: var(--primary-color);
}

.blue-text {
     color: var(--secondary-color);
}

.ulstyle {
     padding-left: 0px;
}

ul.ulstyle li {
     margin-bottom: 8px;
     /* adjust spacing as needed */
}

@media (max-width: 768px) {

     .text-60 {
          font-size: 50px;
          font-weight: 800;
     }

     .text-50 {
          font-size: 35px;
          font-weight: 800;
     }

     .text-42 {
          font-size: 32px;
     }

     .text-36 {
          font-size: 28px;
          font-weight: 600;
     }

     .text-32 {
          font-size: 24px;
          font-weight: 500;
     }

     .text-26 {
          font-size: 22px;
          font-weight: 700;
     }

     .text-24 {
          font-size: 20px;
          font-weight: 800;
     }

     .text-22 {
          font-size: 18px;
          line-height: 20px;
          margin: 3px 0;
     }

     .text-20 {
          font-size: 16px;
          font-weight: 500;
     }

     .text-18 {
          font-size: 16px;
          font-weight: 300;

     }

     .ulstyle {
          padding-left: 0px;
     }

     ul.ulstyle li {
          margin-bottom: 8px;
          /* adjust spacing as needed */
     }
}

@media (max-width: 575px) {

     .text-60 {
          font-size: 25px;
          font-weight: 800;
     }

     .text-50 {
          font-size: 24px;
          font-weight: 800;
     }

     .text-42 {
          font-size: 24px;
     }

     .text-36 {
          font-size: 20px;
          font-weight: 600;
     }

     .text-32 {
          font-size: 18px;
          font-weight: 500;
     }

     .text-26 {
          font-size: 16px;
          font-weight: 700;
     }

     .text-24 {
          font-size: 16px;
          font-weight: 800;
     }

     .text-22 {
          font-size: 14px;
          line-height: 20px;
          margin: 3px 0;
     }

     .text-20 {
          font-size: 14px;
          font-weight: 500;
     }

     .text-18 {
          font-size: 14px;
          font-weight: 300;

     }

     .pnum {
          font-size: 18px;
          font-weight: 600;
     }

     .ulstyle {
          padding-left: 0px;
     }

     ul.ulstyle li {
          margin-bottom: 8px;
          /* adjust spacing as needed */
     }
}

/* 
=======================================================
     HEADER SECTION START
=======================================================
*/
.header-section {
     padding: 5px;
     background-color: rgb(255, 253, 0);
     position: sticky;
     top: 0;
     z-index: 100;
}

.header-section .para {
     line-height: 1;
     margin-top: 5px;
     font-size: 14px;
}

.header-btn {
     width: 280px;
     height: 60px;
     max-width: 500px;
     align-items: start;
     padding-left: 70px;
}

.header-btn p {
     line-height: 1;
}

.btn-link .icon {
     width: 60px;
     height: 60px;
     border-radius: 50%;
     background-color: var(--green-color);
     display: flex;
     align-items: center;
     justify-content: center;
     position: absolute;
     left: 0;
}

/* 
=======================================================
     HEADER SECTION END
=======================================================
*/

/* 
=======================================================
     HERO SECTION START
=======================================================
*/
.hero-section {
     padding: 50px 10px;
     margin-bottom: 20px
}

.hero-section ul {
     list-style: none;
     padding-right: 20px
}

.hero-section ul li svg {
     width: 28px;
     fill: var(--green-color);
     border: none;
     outline: none;
}


.hero-img {
     position: relative;
     max-width: 700px;
     margin: auto;
     margin-bottom: 10px;
}

.hero-img img {
     max-width: 100%;
     height: auto;
     display: block;
     object-fit: contain;
}

/* 
=======================================================
     HERO SECTION END
=======================================================
*/

/* 
=======================================================
     STEP SECTION START
=======================================================
*/
.step-section {
     margin-top: 100px;
     padding: 32px 10px;

}

.step-section .step-card {
     max-width: 400px;
     margin: 20px auto;
}

@media (max-width: 767px) {
     .step-section {
          margin-top: 10px;
          padding: 32px 10px;

     }
}

.step-section .step-img {
     /* width: 320px; */
     margin: auto;
     margin-bottom: 20px;
}

.step-section .step-img img {
     width: 120px;
     /* width: 100%; */
     /* width;: 100%; */
     /* aspect-ratio: 1/1; */
}

.step-section .step-img.step-lg-img img {
     width: 200px;
}

/* 
=======================================================
     STEP SECTION END
=======================================================
*/

/* 
=======================================================
     SERVICE SECTION START
=======================================================
*/
.service-section {
     padding: 100px 10px;
     background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url("../imgs/mtf2-scaled-1.webp") !important;
     background-size: auto, cover !important;
     background-position: 50% 50%, 50% 100% !important;
     background-attachment: scroll, scroll !important;
     background-repeat: no-repeat, no-repeat !important;

}

/* 
=======================================================
     SERVICE SECTION END
=======================================================
*/

/* 
=======================================================
     FITTING SECTION START
=======================================================
*/
.fitting-section {
     margin: 50px 0px 0px 0px;
     padding: 10px;
}

.fitting-section .fitting-img {
     max-width: 100%;
     overflow: hidden;
     border-radius: 10px;
}

.fitting-section .fitting-text-item {
     margin-bottom: 20px;
}

.fitting-section .fitting-text-item .icon {
     font-size: 20px;
     margin-right: 12px;
     color: var(--green-color);
}

/* 
=======================================================
     FITTING SECTION END
=======================================================
*/

/* 
=======================================================
     CUSTOMER SECTION START
=======================================================
*/
.customer-section {
     padding: 70px 10px;
}

.customer-section .customer-card {
     background-color: #252727;
     max-width: 345px;
     margin: auto;
     border-radius: 5px;
     position: relative;
     padding-top: 120px;
     margin-top: 70px;
}

.customer-section .customer-card .c-profile {
     width: 120px;
     height: 120px;
     border-radius: 50%;
     margin: auto;
     overflow: hidden;
     border: 7px solid var(--primary-color);
     position: absolute;
     left: 50%;
     top: 10px;
     transform: translate(-50%, -50%);
}

.customer-section .customer-card .c-profile img {
     width: 100%;
     height: 100%;
     object-fit: cover;
}

.customer-section .customer-card .c-card-text {
     padding: 10px 20px;
     position: relative;
     word-spacing: 3px;
     min-height: 330px;
}

.customer-section .customer-card .c-card-text .quote-icon {
     font-size: 90px;
     color: #ffffff39;
     position: absolute;
     left: 30px;
     top: -20px;
}

.customer-section .customer-card .c-card-foot {
     border-top: 1px solid #ffffff1e;
     padding: 15px 5px;
}

.customer-section .customer-card .c-card-foot .stars {
     color: rgb(240, 196, 25);
     font-size: 15px;
}

@media (max-width: 575px) {
     .customer-section {
          padding: 30px 10px;
     }

     .customer-section .customer-card .c-card-text {
          min-height: auto;
     }


}

/* 
=======================================================
     CUSTOMER SECTION END
=======================================================
*/

/* 
=======================================================
     WHY CHOOSE US SECTION START
=======================================================
*/
.why-choose-us {
     padding: 60px 10px 0px 10px;
}

.why-choose-us .choose-img {
     position: relative;
}

.why-choose-us .choose-img svg {
     position: absolute;
     border-radius: 10px;
     height: 200px;
     bottom: -30px;
     z-index: -1;
     fill: var(--secondary-color);

}

.why-choose-us .choose-img .img-wrap {
     width: calc(100% - 70px);
     height: 450px;
     overflow: hidden;
     border-radius: 10px;
     margin: auto;

}

.why-choose-us .choose-img .img-wrap img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: center right;
}

.choose-text-item .icon {
     color: var(--green-color);
     font-size: 24px;
     opacity: 0.8;
     margin-right: 15px;
}

@media (max-width: 575px) {
     .why-choose-us .choose-img .img-wrap {
          width: calc(100% - 25px);
          height: 400px;
     }
}

/* 
=======================================================
     WHY CHOOSE US SECTION END
=======================================================
*/

/* 
=======================================================
     FOOTER SECTION START
=======================================================
*/
.footer-section {
     background-color: rgb(1, 33, 105);
     padding: 40px 10px;
     margin-top: 50px;
}

.footer-section p.text-h {
     font-weight: 500;
     line-height: 1.6;
}

.footer-section .links a {
     text-decoration: none;
     position: relative;
     font-weight: 400 !important;
     color: rgb(254, 177, 41);
}

/* 
=======================================================
     FOOTER SECTION END
=======================================================
*/
/* ===== QUOTE FORM SECTION ===== */
.quote-form-section {
     padding: 60px 0;
     background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.quote-form-section h2 {
     color: #1a1a2e;
}

.form-input {
     border: 2px solid #e0e0e0;
     border-radius: 10px;
     padding: 14px 18px;
     font-size: 16px;
     transition: border-color 0.3s ease, box-shadow 0.3s ease;
     background: #fff;
}

.form-input:focus {
     border-color: #ff6600;
     box-shadow: 0 0 0 3px rgba(255, 102, 0, 0.15);
     outline: none;
}

.form-input::placeholder {
     color: #999;
}

.btn-quote-submit {
     background: linear-gradient(135deg, #ff6600 0%, #ff8533 100%);
     color: #fff;
     border: none;
     padding: 16px 40px;
     border-radius: 50px;
     font-size: 18px;
     font-weight: 600;
     cursor: pointer;
     transition: all 0.3s ease;
     box-shadow: 0 4px 15px rgba(255, 102, 0, 0.3);
}

.btn-quote-submit:hover {
     transform: translateY(-2px);
     box-shadow: 0 6px 20px rgba(255, 102, 0, 0.4);
}

.btn-quote-submit:active {
     transform: translateY(0);
}



/* ===== FIX SPACING ISSUES ===== */
.hero-section {
     padding-top: 30px !important;
     padding-bottom: 40px !important;
}

.steps-section {
     padding-top: 40px !important;
     padding-bottom: 40px !important;
}

.location-section {
     padding-top: 40px !important;
     padding-bottom: 40px !important;
}

.services-section {
     padding-top: 40px !important;
     padding-bottom: 40px !important;
}

.customer-card {
     margin-bottom: 0 !important;
}

section {
     overflow: hidden;
}



/* ===== ALERT SUCCESS ===== */
.alert-success {
     background: #d4edda;
     color: #155724;
     border: 1px solid #c3e6cb;
     padding: 15px 20px;
     border-radius: 10px;
     font-size: 16px;
}

/* ===== FAQ SECTION ===== */
.faq-section {
     padding: 50px 0;
     background: #fff;
}

.faq-item {
     background: #f8f9fa;
     border-radius: 12px;
     margin-bottom: 12px;
     overflow: hidden;
     border: 1px solid #e9ecef;
     transition: box-shadow 0.3s ease;
}

.faq-item:hover {
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.faq-question {
     padding: 18px 24px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     cursor: pointer;
     transition: background 0.2s ease;
     user-select: none;
}

.faq-question:hover {
     background: #f0f0f0;
}

.faq-question h3 {
     font-weight: 600;
     color: #1a1a2e;
     margin: 0;
     font-size: 17px;
     flex: 1;
     padding-right: 15px;
}

.faq-question i {
     color: #ff6600;
     transition: transform 0.3s ease;
     font-size: 14px;
     flex-shrink: 0;
}

.faq-item.active .faq-question i {
     transform: rotate(180deg);
}

.faq-answer {
     max-height: 0;
     overflow: hidden;
     transition: max-height 0.4s ease;
}

.faq-item.active .faq-answer {
     max-height: 500px;
}

.faq-answer p {
     color: #555;
     line-height: 1.7;
     margin: 0;
     padding: 0 24px 18px;
     font-size: 16px;
}

/* FAQ Responsive */
@media (max-width: 767px) {
     .faq-section {
          padding: 35px 15px;
     }

     .faq-question {
          padding: 14px 16px;
     }

     .faq-question h3 {
          font-size: 15px;
     }

     .faq-answer p {
          padding: 0 16px 14px;
          font-size: 14px;
     }

     .faq-section h2 {
          font-size: 26px !important;
     }
}

/* ===== FOOTER LINKS ===== */
.footer-links {
     margin-top: 10px;
}

.footer-links a {
     text-decoration: none;
     color: #fff;
     background: rgba(255, 255, 255, 0.15);
     padding: 6px 16px;
     border-radius: 20px;
     font-size: 13px;
     transition: all 0.2s ease;
     display: inline-block;
     margin: 4px;
}

.footer-links a:hover {
     background: rgba(255, 255, 255, 0.3);
     color: #fff;
}

/* 
=======================================================
     WHATSAPP FLOATING BUTTON
=======================================================
*/
#wa {
     position: fixed;
     bottom: 24px;
     right: 24px;
     z-index: 9999;
}

.whatsapp-button {
     display: flex;
     align-items: center;
     gap: 10px;
     background: #25d366;
     color: #fff;
     text-decoration: none;
     padding: 10px 18px 10px 14px;
     border-radius: 50px;
     box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
     transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.whatsapp-button:hover {
     transform: scale(1.06);
     box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
     color: #fff;
     text-decoration: none;
}

.whatsapp-button h5 {
     margin: 0;
     font-size: 15px;
     font-weight: 600;
     white-space: nowrap;
     color: #fff;
}

.whatsapp-button img {
     width: 36px;
     height: 36px;
     flex-shrink: 0;
}

@media (max-width: 576px) {
     .whatsapp-button h5 {
          display: none;
     }

     .whatsapp-button {
          padding: 12px;
          border-radius: 50%;
     }

     .whatsapp-button img {
          width: 32px;
          height: 32px;
     }
}