html, body{overflow-x: hidden;}
/* Nav */
.navbar-brand img{height: 30px !important;}
.navbar{background-color: #e1fcdf;position: fixed;top: 0;right: 0;left: 0;z-index: 1030;padding-top: 0;padding-bottom: 0;}
.navbar-nav a{font-size: 15px;color: #000 !important;font-weight: 500;padding: 30px!important;text-decoration: none;}  
span .navbar-toggle-icon{background-color: rgb(253, 253, 253) !important;} 
.navbar-toggler:focus { box-shadow: 0 0 0 .0;}
.navbar-dark .navbar-toggler{color: #fff !important;}
.navbar-toggler:focus{box-shadow: none;}

/* Underline From Center */
.hvr-underline-from-center {display: inline-block;vertical-align: middle;-webkit-transform: perspective(1px) translateZ(0);transform: perspective(1px) translateZ(0);box-shadow: 0 0 1px rgba(0, 0, 0, 0);position: relative;overflow: hidden;}
.hvr-underline-from-center:before {content: "";position: absolute;z-index: -1;left: 51%;right: 51%;bottom: 11px;background: #7b7a7a;height: 1px;-webkit-transition-property: left, right;transition-property: left, right;-webkit-transition-duration: 0.3s;transition-duration: 0.3s;-webkit-transition-timing-function: ease-out;transition-timing-function: ease-out;}
.hvr-underline-from-center:hover:before, .hvr-underline-from-center:focus:before, .hvr-underline-from-center:active:before {left: 8px;right: 8px;
}
  /* Banner */
.banner { position: relative; display: flex; justify-content: space-between; align-items: center; padding: 60px 80px; min-height: 100vh; 
  box-sizing: border-box; background: linear-gradient(135deg, #f0fdea, #dfffdc); overflow: hidden;}
.curves { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; opacity: 0.25;}
.curves path { stroke: #28a745; stroke-width: 1.5; fill: none;}
.circle { position: absolute; width: 80px; height: 80px; background-color: #28a745; border-radius: 50%; opacity: 0.2; z-index: 0; animation: float 6s infinite ease-in-out;}
.circle.small { width: 30px; height: 30px; opacity: 0.4;}
.circle:nth-child(2) { bottom: 10%; right: 15%; animation-delay: 0s; }.circle:nth-child(3) { top: 15%; right: 10%; animation-delay: 1.5s; }.circle:nth-child(4) { bottom: 5%; left: 20%; animation-delay: 3s; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-25px); }}
.phone-area img {margin-left: 235px; position: relative; z-index: 1;width: 60%;padding-top: 65px;}
.text-area { max-width: 600px; position: relative; z-index: 1;}
.text-area h1 { font-size: 38px; color: #222; margin-bottom: 20px; line-height: 1.4; font-weight: 700;padding-top: 150px;}
.text-area h1 span { color: #28a745;}
.subtext { font-size: 16px; color: #555; margin-bottom: 30px; max-width: 500px;}
.cta-button { background-color: #28a745; color: white; font-size: 16px; padding: 14px 28px; border: none; border-radius: 30px; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; font-weight: 600; transition: background 0.3s ease;}
.cta-button:hover { background-color: #1e7e34;}
/* Store Links */.store-links { display: flex; gap: 20px; margin-top: 30px;}
.store-links img { height: 40px; cursor: pointer;}
/* Responsive */@media (max-width: 900px) { .banner {flex-direction: column;padding: 40px 20px;text-align: center; } .text-area {margin-bottom: 40px; } .phone-area img {width: 280px; }}

/* Lantora */
.lantora{background: #f0fdea}
.section {max-width: 1200px;margin: 0 auto;padding: 60px 20px;display: flex;align-items: center;justify-content: space-between;flex-wrap: wrap;}
.section img {max-width: 280px;width: 100%;padding-top: 40px;}
.feature h2 {font-size: 35px; font-family: "DM Sans", sans-serif;font-weight: 600;text-align: left;padding-top: 130px;}
.feature h3 {font-size: 19px;margin: 0 0 10px;font-weight: 500; font-family: "DM Sans", sans-serif;font-weight: 500;}
.feature p {font-size: 16px;line-height: 1.6;margin: 0;font-family: "DM Sans", sans-serif;padding-bottom: 20px;padding-top: 40px;padding-right: 145px;padding-bottom: 40px;}
.feature a{font-size: 18px;color: #4d4b4b;text-decoration:underline; text-decoration-style:double;text-underline-offset:20px;}
.feature a:hover,.feature a:focus{color: #2a432a;}

/* Phone */
/* .phone-box{border: none;background-color: #fff;border-radius: 5px;padding: 26px 26px 26px 26px;width: 500px;margin-left: 135px;margin-top: 20px;}
.phone-box-1{border: none;background-color: #fff;border-radius: 5px;padding: 26px 26px 26px 26px;width: 500px;margin-top: 20px;margin-left: 50px;}
.phone-box i{font-size: 25px;}
.phone-icon{border: none;background-color: #f8f8f8;padding: 15px 9px 15px 24px;}
.phone-box-1 i{font-size: 25px;}
.your-savings h2{text-align: center;padding-top: 70px;padding-bottom: 40px;font-family: "DM Sans", sans-serif;font-size: 38px;}
.your-savings{padding-bottom: 80px;} */

 /* line-code */
.app-hero {position: relative; display: flex; justify-content: space-between; align-items: center; min-height: 100vh; box-sizing: border-box; background: linear-gradient(135deg, #f0fdea, #dfffdc); overflow: hidden;}
.curves { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; opacity: 0.2;}
.curves path { stroke: #28a745; stroke-width: 1; fill: none;}
.phone-area { position: relative; z-index: 1;}

/* Notification Overlay */
.phone-area-2 img{width: 45%;}
.app-hero-2 {position: relative; display: flex; justify-content: space-between; align-items: center; min-height: 80vh; box-sizing: border-box; background: linear-gradient(135deg, #f0fdea, #dfffdc); overflow: hidden;}


.notification { position: absolute; bottom: 56%; left: 20%; background: #fff; border-radius: 12px; padding: 14px 18px;width: 230px; box-shadow: 0 6px 18px rgba(0,0,0,0.15); font-size: 13px; color: #444; animation: slideUp 1.2s ease forwards;}
.notification strong { color: #222;}
.notification::before { content: "🔔"; margin-right: 6px;}
@keyframes slideUp { 0% { transform: translateY(50px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; }}
.text-area-1 { max-width: 600px; position: relative; z-index: 1;}
.countdown { background: #111; color: #fff; display: inline-block; padding: 6px 14px; border-radius: 6px; font-weight: 600; font-size: 15px; margin-bottom: 20px;}
.text-area-1 h1 { font-size: 38px; color: #222; margin-bottom: 20px; line-height: 1.4; font-weight: 700;padding-top: 130px;font-family: "DM Sans", sans-serif;}
.subtext { font-size: 16px; color: #555; margin-bottom: 30px; max-width: 500px;}
.cta-button { background-color: #28a745; color: white; font-size: 16px; padding: 14px 28px; border: none; border-radius: 30px; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; font-weight: 600; transition: background 0.3s ease;}

  .cta-button:hover { background-color: #1e7e34;}
  /* Responsive */
  @media (max-width: 900px) { .app-hero {flex-direction: column;padding: 40px 20px;text-align: center; } .phone-area {margin-bottom: 40px; } .phone-area img {width: 220px; }
  }
/* Saving */
.savings-section {max-width: 900px;margin: 0 auto;padding: 60px 20px;}
.savings-section h2 {font-size: 38px;margin-bottom: 40px;text-align: center;color: #364221;font-weight: 600;font-family: "DM Sans", sans-serif;}
.tabs {display: flex;justify-content: center;gap: 20px;flex-wrap: wrap;margin-bottom: 40px;}
.tab {padding: 10px 15px;border-radius: 25px;cursor: pointer;font-weight: bold;background: transparent;color: #364221;border: none;transition: all 0.3s ease;}
.tab.active {background: #8d8c8c; color: #364221;}
.tab-content {display: none;color: #000;padding: 40px 20px;border-radius: 20px;background-repeat: no-repeat;background-color: #fff;}
.tab-content.active {display: block;}
.tab-content img {width: 300px;margin-bottom: 20px;margin: auto;display: block;border-radius: 12px;}
.tab-content h4 {font-size: 14px;text-transform: uppercase;color: #c0932d;margin-bottom: 10px;text-align: center;padding-top: 20px;font-family: "DM Sans", sans-serif;}
.tab-content h3 {font-size: 26px;margin-bottom: 15px;text-align: center;font-family: "DM Sans", sans-serif;}
.tab-content p {font-size: 16px;max-width: 600px;margin: 0 auto;text-align: center;font-family: "DM Sans", sans-serif;}
/* works */
.app-hero-1 {position: relative; display: flex; justify-content: space-between; align-items: center; min-height: 60vh; box-sizing: border-box; background: linear-gradient(135deg, #f0fdea, #dfffdc); overflow: hidden;}
.how-it-works {text-align: center;}
.how-it-works h2 {font-size: 38px;margin-bottom: 10px;font-family: "DM Sans", sans-serif;font-weight: 600;}
.subtitle {color: #888;margin-bottom: 40px;}
.steps-container {display: flex;justify-content: center;flex-wrap: wrap;gap: 30px}
.step {background: #eae9e9;padding: 17px;border-radius: 12px;width: 220px;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);transition: transform 0.3s ease;}
.step:hover {transform: translateY(-5px);}
.number {font-size: 53px;font-weight: bold;color: #28a745;margin-bottom: 10px;}
.step p {font-size: 15px;color: #333;font-family: "DM Sans", sans-serif;}
/* faq-section */
.faq-section {max-width: 700px;margin: 0 auto;font-family: Arial, sans-serif;}
.faq-section h2 {font-size: 35px;margin-bottom: 20px;padding-top: 75px;font-family: "DM Sans", sans-serif;}
.faq {border-bottom: 1px solid #ddd;padding: 15px 0;}
.faq-header {display: flex;justify-content: space-between;align-items: center;cursor: pointer;}
.faq-header h3 {margin: 0;font-size: 18px;font-weight: 500;font-family: "DM Sans", sans-serif;}
.faq .icon {font-size: 22px;font-weight: bold;color: #2e7d32; /* green */transition: transform 0.3s ease;}
.faq-body {max-height: 0;overflow: hidden;transition: max-height 0.4s ease;color: #444;font-size: 15px;line-height: 1.6;}
.faq.active .faq-body {max-height: 200px; /* enough for your content */}
.faq.active .icon {transform: rotate(45deg); /* turns + into × */}
/* Slider */
.carousel-caption {padding-bottom: 200px;padding-right: 150px;}
/* subscribe-section */
.subscribe-section {padding: 60px 20px;position: relative;}
.subscribe-container {max-width: 960px;margin: 0 auto;background-color: #c3d6b9;border-radius: 20px;padding: 40px;display: flex;justify-content: space-between;align-items: center;position: relative;overflow: hidden;box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);}
.subscribe-left h2 {font-size: 24px;font-weight: 700;margin-bottom: 12px;color: #111;font-family: "DM Sans", sans-serif;}
.subscribe-left p {font-size: 14px;color: #777;font-family: "DM Sans", sans-serif;}
.subscribe-right {display: flex;flex-direction: column;gap: 15px;width: 450px;}
.subscribe-right input {padding: 12px 18px;border: 1px solid #ccc;border-radius: 30px;font-size: 14px;outline: none;box-shadow: 0 2px 6px rgba(0,0,0,0.05);}
.subscribe-right button {background-color: #28a745;color: #fff;border: none;border-radius: 30px;padding: 12px 18px;font-size: 14px;cursor: pointer;transition: background 0.3s;}
.subscribe-right button:hover {background-color: #1e7c38;}
.circle {position: absolute;width: 50px;height: 50px;background-color: #1a972f;border-radius: 50%;}
/* Animation for up & down bounce */
@keyframes bounce {0%, 100% { transform: translateY(0); }50% { transform: translateY(-20px); }}
@keyframes float {0%, 100% { transform: translateX(0); }50% { transform: translateX(-20px); }}
.circle-left {bottom: 20px;left: 20px;width: 20px;height: 20px;animation: bounce 2s infinite ease-in-out;}
.circle-right {top: 20px;right: 20px;width: 30px;height: 30px;animation: float 3s infinite ease-in-out;}
/* Footer */
.footer{padding-bottom: 50px;background: linear-gradient(135deg, #f0fdea, #dfffdc);}
.ftr{padding-top: 110px;}
.qatar li{font-size: 15px;color: #000;font-weight: 500;list-style: none;line-height: 30px;}
.india h4{font-size: 20px;color: #000;padding-bottom: 5px;}
.india p{font-size: 15px;color: #000;font-weight: 500;list-style: none;line-height: 22px;margin-bottom: 5px;}
.india p span{font-size: 15px;color: #000;font-weight: 500;list-style: none;line-height: 37px;}
.uae h4{font-size: 20px;color: #000;padding-bottom: 5px;}
.uae p{font-size: 15px;color: #000;font-weight: 500;list-style: none;line-height: 22px;margin-bottom: 5px;}
.uae p span{font-size: 15px;color: #000;font-weight: 500;list-style: none;line-height: 37px;}
.oman h4{font-size: 20px;color: #000;padding-bottom: 5px;}
.oman p{font-size: 15px;color: #000;font-weight: 500;list-style: none;line-height: 22px;margin-bottom: 5px;}
.oman  p span{font-size: 15px;color: #000;font-weight: 500;list-style: none;line-height: 37px;}
.footer-box{text-align: center;margin-top: 80px;}
.footer-box p{font-size: 15px;color: #666;list-style: none;}
.footer-box p a{color: #000;text-decoration: none;}
.footer-box p a:hover{text-decoration: underline;}
/* Flexible */
.flexible{background: linear-gradient(135deg, #f0fdea, #dfffdc);padding-bottom: 50px;}
.flexible h2{text-align: center;padding-top: 80px;font-weight: 600;padding-bottom: 50px;}

.flexible h4{padding-top: 0%;text-align: left;font-size: 21px;font-weight: 600;color: #000;}

.flexible-box{padding-right: 40px;padding-bottom: 50px;}
.flexible-text{background-color: #ffffff;border: 1px solid #ffffff;padding: 40px 40px 0 40px;height: 210px;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);}
.flexiblee-text-1{background-color: #ffffff;border: 1px solid #ffffff;padding: 40px 40px 0 40px;height: 210px;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);}
.flexiblee-text-2{background-color: #ffffff;border: 1px solid #ffffff;padding: 40px 40px 0 40px;height: 210px;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);}
.flexiblee-text-3{background-color: #ffffff;border: 1px solid #ffffff;padding: 40px 40px 0 40px;height: 210px;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);}
.flexiblee-text-1 h4{font-size: 16px;color: #000;font-family: "DM Sans", sans-serif;padding-top: 5px;}
.flexiblee-text-1 p{color: #000;font-size: 15px;padding-top: 10px;font-weight: normal;} 
.flexiblee-text-2 h4{font-size: 16px;color: #000;font-family: "DM Sans", sans-serif;padding-top: 5px;}
.flexiblee-text-2 p{color: #000;font-size: 15px;padding-top: 10px;font-weight: normal;}
.flexiblee-text-3 h4{font-size: 16px;color: #000;font-family: "DM Sans", sans-serif;line-height: 1.5;padding-top: 5px;}
.flexiblee-text-3 p{color: #000;font-size: 15px;padding-top: 10px;font-weight: normal;}
.flexible-text h4{font-size: 16px;color: #000;font-family: "DM Sans", sans-serif;padding-top: 5px;}
.flexible-text p{color: #000;font-size: 15px;padding-top: 10px;font-weight: normal;}
.flexiblee-box-2{padding-left: 40px;padding-bottom: 50px;}
.flexiblee-box{padding-right: 40px;padding-bottom: 50px;}
.flexiblee-box-2{padding-left: 40px;padding-bottom: 50px;}

/* .......ABOUT-US......... */
.about{padding-top: 150px;padding-bottom: 50px;}
.about h2{padding-top: 60px;font-size: 40px;padding-bottom: 30px;font-weight: 600;font-family: "DM Sans", sans-serif;}
.about p{line-height: 28px;font-family: "DM Sans", sans-serif;font-size: 15px;}
.about h6{font-size: 20px;font-weight: 600;padding-bottom: 5px;font-family: "DM Sans", sans-serif;}

/* contact */
.contact-container {width: 100%;max-width: 800px;padding: 40px;text-align: center;margin: auto;}
.contact-container h2{padding-top: 110px;font-size: 38px;font-weight: 600;padding-bottom: 40px;}
.contact-form {display: flex;flex-direction: column;gap: 30px;}
.contact-form input,
.contact-form textarea {border: none;border-bottom: 1px solid #ccc;outline: none;padding: 10px;font-size: 16px;background: transparent;text-align: center;resize: none;}
.contact-form button {background: #006d70;color: #fff;border: none;padding: 12px 30px;font-size: 16px;font-weight: bold;border-radius: 30px;cursor: pointer;transition: 0.3s ease;margin-top: 10px;align-self: center;box-shadow: 0px 3px 6px rgba(0,0,0,0.2);}
.contact-form button:hover {background: #004f52;}
/* Responsive */
@media (min-width: 324px) and (max-width: 575.98px) {
.text-area h1{font-size: 32px;text-align: left;padding-top: 95px;}
.subtext {text-align: left;}
.cta-button{justify-content: start;}
.phone-area img {margin-left: 0;width: 100%;padding-top: 0;}
.section img{padding-top: 30px;}
.section{padding: 0 20px;}
.section h2{font-size: 32px;text-align: left;}
.section-content{padding-left: 0;}
.feature p{padding-bottom: 25px;font-size: 15px;padding-right: 0;}
.text-area-1 h1{padding-top: 50px;text-align: left;font-size: 32px;}
.notification{bottom: 15%;left: 0;padding: 8px 19px;width: 209px;text-align: left;}
.phone-area-2 img{margin-left:0;width: 100%;padding-top: 20px;}
.how-it-works h2{font-size: 32px;font-weight: 600;text-align: left;}
.subtitle {text-align: left;}
.your-savings h2{text-align: left;}
.feature-box i{margin: auto;padding-bottom: 15px;}
.feature-box{text-align: left;margin-left: 0;}
.features-section{padding: 60px 0px;}
.subscribe-section{padding: 60px 0px;}
.subscribe-container{padding: 20px;}
.subscribe-left h2 {font-size: 18px;}
.subscribe-right{width: 260px;}
.phone-box{margin-left: 0;}
.phone-box-1{margin-left: 0;}
.flexible-text{height: 300px;  padding: 26px 26px 0 26px;}
.flexiblee-text-2{height: 358px;padding: 26px 26px 0 26px;}
.flexiblee-text-1{height: 340px;padding: 26px 26px 0 26px;}
.flexiblee-text-3{height: 245px;padding: 26px 26px 0 26px;}
.flexiblee-box-2{padding-left: 0;}
.flexiblee-box{padding-right: 0;}
.flexible-box{padding-right: 0;}
.how-it-works{padding-bottom: 50px;}
.footer-column{flex: 0 0 0px;}
.feature a{font-size: 18px;
  color: #4d4b4b;
  text-decoration: underline;
    text-decoration-style: solid;
  text-decoration-style: double;
  text-underline-offset: 20px;}
 .contact-form textarea{min-height: 0;}
.qatar img{margin: auto;display: block;}
.qatar li {text-align: center;}
.india{text-align: center;padding-top: 20px;}
.uae{text-align: center;padding-top: 20px;}
.navbar-brand {padding-top: 25px;padding-bottom: 25px;}
.oman{text-align: center;padding-top: 20px;}
}
@media (min-width: 576px) and (max-width: 767.98px) {
.phone-area img{width: 100%;margin-left: 0;}
.text-area-1 h1{padding-top: 0;}
.text-area h1{text-align: left;font-size: 23px;}
.subtext{text-align: left;}
.phone-area-2 img{margin-left: 0;padding-top: 40px;width: 85%;}
.notification {bottom: 35%;left: 51%;}
.how-it-works h2{font-size: 32px;padding-top: 0;}
.your-savings h2{padding-top: 60px;}
.section img{max-width: 245px;}
.phone-box{margin-left: 0;}
.phone-box-1{margin-left: 0;}
.feature p{font-size: 14px;padding-right: 0;}
.feature h2{font-size: 27px;padding-top: 20px;}
.flexible-text{height: 360px;padding: 30px 30px 0 30px;}
.flexiblee-text-1{height: 364px;padding: 30px 30px 0 30px;}
.flexiblee-box-2{padding-left: 20px;}
.flexible-box{padding-right: 20px;}
.flexiblee-box{padding-right: 20px;}
.flexiblee-text-2{height: 375px;padding: 30px 30px 0 30px;}
.flexiblee-text-3{height: 370px;padding: 30px 30px 0 30px;}
.oman h4{padding-top: 50px;}
.uae h4{padding-top: 50px;}
.contact-form textarea{min-height: 0;}
.navbar-brand {padding-top: 25px;padding-bottom: 25px;}
}
@media (min-width: 768px) and (max-width: 991.98px) {
.navbar-brand{padding-top: 15px;padding-bottom: 15px;}
.phone-area img {margin-left: 0;}
.text-area h1{font-size: 32px;text-align: left;}
.subtext{text-align: left;}
.text-area h1{padding-top: 100px;}
.section h2{text-align: left;}
.section img{padding-top: 10px;}
.text-area-1 h1{padding-top: 10px;text-align: left;}
.phone-area-2 img{margin-left: 0;width: 70%;}
.notification{left: 68%;}
.how-it-works h2{font-size: 32px;font-weight: 600;padding-top: 50px;}
.feature-box{margin-left: 0;margin-right: 0;}
.features-section{padding: 60px 0;}
.feature h2{padding-top: 25px;font-size: 30px;}
.feature p{padding-right: 0;}
.flexible-text{padding: 30px 30px 0 30px;height: 275px;}
.flexible-box{padding-right: 20px;}
.flexiblee-box-2{padding-left: 20px;}
.flexiblee-text-1{padding: 30px 30px 0 30px;height: 277px;}
.flexiblee-box{padding-right: 20px;}
.flexiblee-text-2{padding: 30px 30px 0 30px;height: 280px;}
.flexiblee-text-3{padding: 30px 30px 0 30px;height: 279px;}
.oman h4{padding-top: 50px;}
.uae h4{padding-top: 50px;}
.how-it-works{padding-bottom: 50px;}
}
@media (min-width:992px) and (max-width: 1199.98px) {
.phone-area img{margin-left: 0;width: 100%;}
.phone-area-2 img{margin-left: 0;width: 60%;}
.how-it-works h2{font-size: 32px;font-weight: 600;}
.subscribe-right{width: 400px;}
.flexible-text{height: 236px;}
.flexiblee-text-1{height: 237px;}
.flexiblee-text-2{height: 260px;}
.flexiblee-text-3{height: 260px;}
.how-it-works h2{padding-top: 50px;}
.how-it-works{padding-bottom: 50px;}
}
@media (min-width:1200px) and (max-width: 1399.98px){
.phone-box{margin-left: 55px;}
.phone-box-1{margin-left: 20px;}
}
@media (min-width:1400px){

}