.hero {padding: 50px 20px; }
.hero-content {flex: 1; min-width: 300px; }
.hero-tag {font-size: 16px; font-weight: 600; color:var(--orange); letter-spacing: 1px; display: inline-block; margin-bottom: 20px; }
.hero-content h1 {font-size: 48px; line-height: 1.2; font-weight: 800; color: var(--black); }
.hero-content h1 span {color:var(--orange); }
.hero-content p {font-size: 16px; font-weight: normal; color: var(--gray); margin: 0 0 1rem 0; padding: 0; }
.hero-buttons {display: flex; gap: 15px; flex-wrap: wrap; }
.hero-buttons .btnExplore {padding: 14px 22px; border-radius: 6px; text-decoration: none; font-weight: 600; font-size: 14px; transition: 0.3s ease; background: var(--orange); color:  var(--white); }
.hero-image-1{rotate: 1deg;box-shadow: 0 20px 40px rgba(0,0,0,0.08); height: 500px;transform: translate(0, 0) rotate(1deg) skewX(0) skewY(0) scaleX(1) scaleY(1); aspect-ratio: 1 / 1; position: relative; overflow: hidden; border-radius: 1.5rem; }
.hero-image-1 img{  width: 100%;height: 100%;object-fit: cover;max-width: 100%;display: block;}
.hero-image-1:before{position: absolute; left: 0;right: 0; top: 0; bottom: 0; content: ''; background: linear-gradient(133deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%); }
.hero-image {flex: 1; min-width: 300px; position: relative; }
.phone-card {position: absolute; bottom: -30px; left: 30px; width: 215px; background:var(--white); padding: 15px; border-radius: 10px; box-shadow: 0 15px 30px rgba(0,0,0,0.15); rotate: -2deg; transform: translate(0, 0) rotate(-2deg) skewX(0) skewY(0) scaleX(1) scaleY(1); }
.hero-image-2{ position: relative; overflow: hidden; border-radius:1rem; }
.hero-image-2 img{  width: 100%;height: 100%;object-fit: cover;}


.feature-section {text-align:center; background: var(--white); padding: 2rem 0}
.feature-heading h2 {font-size: 40px; line-height: 1.2; font-weight: 800; color: var(--black); }
.feature-heading p {font-size: 14px; font-weight: normal; color: var(--gray); margin: 0 0 1rem 0; padding: 0; }
.feature-tag {font-size: 16px; text-transform: uppercase; font-weight: 600; color: var(--orange); letter-spacing: 1px; display: inline-block; margin-bottom: 20px; }
.feature-card {background:var(--body); min-height: 290px; border: 1px solid var(--border); padding: 20px 20px; border-radius: 16px; box-shadow: 0 15px 35px rgba(0,0,0,0.05); transition: 0.3s ease; }
.feature-card:hover {transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0,0,0,0.08); }
.feature-card .icon-box {width: 60px; height: 60px; background:var(--white); border-radius: 14px; display: flex; align-items: center; justify-content: center; margin-bottom: 25px; font-size: 22px; color: var(--orange); }
.feature-card h3 {margin-bottom: 10px; font-size: 20px; font-weight: 700; color: var(--black);  padding: 0; text-align:left; }
.feature-card p {font-size: 14px; font-weight: normal; color: var(--gray); margin: 0 0 1rem 0; padding: 0;text-align:left; }



.about-section{padding: 2rem 0 2rem 0; position: relative; background:#1C140C;}
.about-image-stack{position: relative;}
.about-image-grid{display: grid;gap: 1rem;     grid-template-columns: repeat(2, minmax(0, 1fr)); flex: 1 1 0%}
.about-image-1 {width: 100%; height:400px; border-width: 1px 1px 5px 1px; border-color: #fff #fff var(--orange); #fff; border-style: solid; position: relative; overflow: hidden; border-radius: 20px; }
.about-image-1 img{width: 100%; height: 100%; object-fit: cover;}
.about-image-2 {width: 100%; height: 400px; overflow: hidden; border-radius: 20px; margin-top: 20px; border-width:1px 1px 5px 1px; border-color: #fff #fff var(--orange); #fff; border-style: solid;}
.about-image-2 img{width: 100%; height: 100%; object-fit: cover;}
.about-content h2 {font-size: 40px; line-height: 1.2; font-weight: 800; color: var(--white); }
.about-content p {font-size: 14px; font-weight: normal; color: var(--white); margin: 0 0 1rem 0; padding: 0; }
.about-tag {font-size: 16px; text-transform: uppercase; font-weight: 600; color: var(--orange); letter-spacing: 1px; display: inline-block; margin-bottom: 20px; }


.how-it-works{padding: 2rem 0 2rem 0; position: relative; background:#fff;}
.how-content {flex: 1; min-width: 300px; }
.how-content h2 {font-size: 48px; line-height: 1.2; font-weight: 800; color: var(--black); }
.how-content p {font-size: 16px; font-weight: normal; color: var(--gray); margin: 0 0 1rem 0; padding: 0; }
.how-tag {font-size: 16px; text-transform: uppercase; font-weight: 600; color: var(--orange); letter-spacing: 1px; display: inline-block; margin-bottom: 20px; }
.how-image-1{rotate: -4deg;box-shadow: 0 20px 40px rgba(0,0,0,0.08); height: 500px;transform: translate(0, 0) rotate(1deg) skewX(0) skewY(0) scaleX(1) scaleY(1); aspect-ratio: 1 / 1; position: relative; overflow: hidden; border-radius: 1.5rem; }
.how-image-1 img{  width: 100%;height: 100%;object-fit: cover;max-width: 100%;display: block;}
.how-image-1:before{position: absolute; left: 0;right: 0; top: 0; bottom: 0; content: ''; background: linear-gradient(133deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%); }
.how-image {flex: 1; min-width: 300px; position: relative; }
.how-media-card {position: absolute; bottom: -30px; left: 30px; width: 215px; background:var(--white); padding: 15px; border-radius: 10px; box-shadow: 0 15px 30px rgba(0,0,0,0.15); rotate:4deg; transform: translate(0, 0) rotate(-2deg) skewX(0) skewY(0) scaleX(1) scaleY(1); }
.how-image-2{ position: relative; overflow: hidden; border-radius:1rem; }
.how-image-2 img{  width: 100%;height: 100%;object-fit: cover;}
.how-step-list{margin-top: 1rem;}
.how-step-list .step {display: flex; align-items: flex-start; margin-bottom: 25px; gap: 20px; }
.how-step-list .step .step-number {background: var(--lightorange); color:var(--orange); font-weight: bold; width: 45px; height: 45px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
.how-step-list .step h4{font-size:18px; font-weight:600; color: var(--black); padding:0; margin:0 0 10px 0 }
.how-step-list .step p {font-size: 14px; font-weight: normal; color: var(--gray); margin: 0 0 0 0; padding: 0; }




.app-download-section{position: relative;overflow: hidden;padding-top: 40px;padding-bottom: 40px;background:var(--body);} 
.app-download-content h2 {font-size: 48px; line-height: 1.2; font-weight: 800; color: var(--black); }
.app-download-content p {font-size: 16px; font-weight: normal; color: var(--gray); margin: 0 0 1rem 0; padding: 0; }
.app-tag {font-size: 16px; text-transform: uppercase; font-weight: 600; color: var(--orange); letter-spacing: 1px; display: inline-block; margin-bottom: 20px; }

.app-btn-box .appstore-btn {position: relative; border-radius: 5px; margin-right: 15px; display: inline-block; background-color:var(--black); -webkit-box-shadow: 0 7px 18px 0 rgb(107 124 147 / 15%); box-shadow: 0 7px 18px 0 rgb(107 124 147 / 15%); padding: 12px 20px 12px 60px; -webkit-transition: all .25s ease; transition: all .25s ease; line-height: normal; }
.app-btn-box .appstore-btn .appstore-icon {-webkit-transform: translateY(-50%); transform: translateY(-50%); position: absolute; left: 20px; top: 50%; font-size: 30px; color: var(--white); }
.appstore-text{font-size: 14px; font-weight: 500; color: var(--white); }
.appstore-text span {display: block; margin-top: 2px; font-size: 17px; font-weight: 700; -webkit-transition: all .25s ease; transition: all .25s ease; color: var(--orange); }
.app-btn-box .appstore-btn:hover {background-color:var(--orange); -webkit-transform: translateY(-3px); transform: translateY(-3px); }
.appstore-btn:hover .appstore-text span{color: var(--white);}

.app-image {flex: 1; min-width: 300px; position: relative; }
.app-media-1 {position: absolute; top: -200px; left: 20px; width: 250px; background:var(--white); padding: 15px; border-radius: 10px; box-shadow: 0 15px 30px rgba(0,0,0,0.15); rotate: -2deg; transform: translate(0, 0) rotate(-2deg) skewX(0) skewY(0) scaleX(1) scaleY(1); }
.app-image-1{ position: relative; overflow: hidden; border-radius:1rem; }
.app-image-1 img{  width: 100%;height: 100%;object-fit: cover;}
.app-media-2 {position: absolute; bottom: -150px; right: 20px; width: 250px; background:var(--white); padding: 15px; border-radius: 10px; box-shadow: 0 15px 30px rgba(0,0,0,0.15); rotate: -2deg; transform: translate(0, 0) rotate(-2deg) skewX(0) skewY(0) scaleX(1) scaleY(1); }
.app-image-2{ position: relative; overflow: hidden; border-radius:1rem; }
.app-image-2 img{  width: 100%;height: 100%;object-fit: cover;}



.contactus-section{position: relative;overflow: hidden;padding-top: 40px;padding-bottom: 40px;background:var(--white);} 
.contact-heading h2 {font-size: 48px; line-height: 1.2; font-weight: 800; color: var(--black); }
.contact-heading p {font-size: 16px; font-weight: normal; color: var(--gray); margin: 0 0 1rem 0; padding: 0; }
.contact-tag {font-size: 16px; text-transform: uppercase; font-weight: 600; color: var(--orange); letter-spacing: 1px; display: inline-block; margin-bottom: 20px; }


.contact-form .form-group {margin-bottom: 1rem; }
.contact-form .form-group label {color:var(--black); font-size: 14px; font-weight: 600; }
.contact-form input.form-control {background: transparent; border-radius: 5px; font-size: 13px; border: 1px solid var(--border); font-weight: 400; height: auto; padding: 0.94rem 0.94rem; outline: 0; width: 100%; display: inline-block; color: var(--pink); box-shadow: none; }
.contact-form select.form-control {background: transparent; border-radius: 5px; font-size: 13px; border: 1px solid var(--border); font-weight: 400; height: auto; padding: 0.94rem 0.94rem; outline: 0; width: 100%; display: inline-block; color: var(--pink); box-shadow: none; }
.contact-form textarea.form-control {background: transparent; border-radius: 5px; font-size: 13px; border: 1px solid var(--border); font-weight: 400; height: auto; padding: 0.94rem 0.94rem; outline: 0; width: 100%; display: inline-block; color: var(--pink); box-shadow:none; }
.contact-form input.form-control:focus {border: 1px solid var(--orange); }

button.bb-thems-btn{font-size: 14px;    box-shadow: 0 8px 20px rgb(0 0 0 / 27%);white-space: nowrap;position: relative;padding: 12px 40px;margin-bottom: 0px;color: var(--white);background: var(--black);display: inline-block;border: none;text-decoration: none;border-radius: 5px;font-weight: 600;text-transform: uppercase;}
button.bb-thems-btn1 {font-size: 14px;    box-shadow: 0 8px 20px rgb(0 0 0 / 27%);white-space: nowrap;position: relative;padding: 12px 40px;margin-bottom: 0px;color: var(--white);background: var(--orange);display: inline-block;border: none;text-decoration: none;border-radius: 5px;font-weight: 600;text-transform: uppercase;}