* { margin: 0; padding: 0; box-sizing: border-box;  font-family: 'Poppins', sans-serif; }


body { color: var(--h-text); background-color: var(--white); overflow-x: hidden; line-height: 1.5; }

.container { max-width: 1366px; margin: 0 auto; padding: 0 20px; position: relative; }

/* Reveal Animation */
.reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); }
.reveal.active { opacity: 1; transform: translateY(0); }

/* Background Decorative Blobs */
.blob { position: absolute; z-index: -1; pointer-events: none; opacity: 0.5; }
.blob-1 { top: 0; right: -10%; width: 500px; }
.blob-2 { top: 1500px; left: -10%; width: 400px; }

/* Navigation */
nav { display: flex; justify-content: space-between; align-items: center; height: 90px; }
.nav-links { display: flex; gap: 30px; list-style: none; }
.nav-links a {
    text-decoration: none;
    color: #33475B;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 1px;
}
.nav-links a:hover {
    color: #fd5215;
}
.btn {
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    transition: 0.3s;
    border: none;
    cursor: pointer;
    font-size: 16px;
    letter-spacing: 1px;
}
.btn-orange {
    background: linear-gradient(90deg, #FF7A18 0%, #FD4E15 100%);
    color: #fff;
}

.btn-orange:hover { background: #e66a4c; transform: translateY(-2px); }



.btn-outline {
  position: relative;
  border-radius: 12px;
    background: transparent;
  z-index: 0;color: #33475B;
}

.btn-outline::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  padding: 1px; /* border thickness */
  background: linear-gradient(180deg, #FF7A18 0%, #FD4E15 100%);
  
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;

  z-index: -1;
}
/* Hero */
section.hero_sec {
    background: #F9F9F9;
    position: relative;
    display: flex;
    align-items: center;
}
section.hero_sec:after {
    content: "";
    background-image: url("../images/Ellipse-1.png");
    background-repeat: no-repeat;
    display: block;
    width: 351px;
    height: 572px;
    position: absolute;
    top: auto;
    right: 0;
}
.hero {
    display: flex;
    align-items: center;
    padding: 100px 0;
    gap: 40px;
    position: relative;
    z-index: 1;
}
.hero-content { flex: 1; }
.hero-content p.hero-tag {
    color: #FD4E15;
    font-size: 12px;
    font-weight: 500;
    text-transform: capitalize;
    letter-spacing: 2px;
    background: #FFF4EC;
    display: inline-block;
    padding: 5px 10px;
    margin: 0 0 7px;
    border-radius: 6px;
}
.hero h1 {
    font-size: 60px;
    color: #33475B;
    line-height: 1.2;
    margin-bottom: 20px;
    font-weight: 700;
    letter-spacing: 1px;
}
.hero h1 span {
    font-weight: 400;
}
.hero h1 span.text_orange {
    background: linear-gradient(180deg, #FF7A18 0%, #FD4E15 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero p {
    font-size: 16px;
    margin-bottom: 30px;
    max-width: 480px;
    color: #6D6969;
    letter-spacing: 1px;
    line-height: 26px;
}

/* Trusted By */
.trusted {
    padding: 52px 0;
    text-align: center;
    background: #fff;
}
.swiper-button-next:after, .swiper-button-prev:after { display: none;}
.trusted p {
    margin-bottom: 40px;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: 1px;
    position: relative;
    display: flex;
    justify-content: center;padding-bottom: 18px;
}
.trusted p:after {
    content: "";
    border-bottom: 2px solid #FD4E15;
    display: block;
    width: 81px;
    left: auto;
    right: auto;
    position: absolute;
    text-align: center;
    align-items: center;
    bottom: 0;
}
.trusted .swiper-button-next svg, .trusted .swiper-button-prev svg {
    width: 18px;
    height: 18px;
    object-fit: contain;
    transform-origin: center;
}
.trusted .swiper-button-next, .trusted .swiper-button-prev {
    position: absolute;
    top: var(--swiper-navigation-top-offset,45%);

}
.swiper-slide {
  width: auto;
}


.swiper-button-prev,
.swiper-button-next {
  color: #000;
}
/* Features Section */
.Features_sec {
    background: #F9F9F9;
    padding: 100px 0;
    position: relative;
}
.Features_sec:after {
    content: "";
    background-image: url("../images/bottom-lft-shap.png");
    width: 362px;
    height: 257px;
    background-repeat: no-repeat;
    display: block;
    position: absolute;
    z-index: 0;
    bottom: 0;
    left: 0;
}
p.hero-tag {
    color: #FD4E15;
    font-size: 12px;
    font-weight: 500;
    text-transform: capitalize;
    letter-spacing: 2px;
    background: #FFF4EC;
    display: inline-block;
    padding: 5px 10px;
    margin: 0 0 7px;
    border-radius: 6px;
}
.section-head { text-align: center; margin-bottom: 40px; }
.section-head h2 {
    font-size: 41px;
    color: #33475B;
    max-width: 700px;
    margin: 0px auto; font-weight: 700;
    line-height: 48px;letter-spacing: 1px;
}
.section-head h2 span {
    color: #FD4E15;
    font-weight: 600;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 26px;
    position: relative;
    z-index: 1;
}

.feature-card {
    border-radius: 15px;
    transition: 0.3s;
    background: #fff;
    overflow: hidden;
    padding-bottom: 20px;
    box-shadow: 0px 4px 10px rgba(109, 105, 105, 0.11);
}
.feature-card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
.f-ui {
    background: #FDFBFB;
    height: 219px;
    margin-bottom: 23px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.feature-card h3, .feature-card p {
    padding: 0 20px;
}
.feature-card h3 {
    font-size: 20px;
    color: #33475B;
    margin-bottom: 8px;
    font-weight: 600;
    letter-spacing: 1px;
}
.feature-card p {
    font-size: 14px;
    color: #6D6969;
    line-height: 26px;
}
.feature-wide {
    grid-column: span 2;
    display: flex;
    align-items: self-start;
    gap: 23px;
    flex-direction: column;
    padding-bottom: 20px;
}
.feature-wide .f-ui {
    margin-bottom: 0;
    width: 100%;
    height: 219px;
    flex-shrink: 0;
}

/* video Section */
.video_row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 47px;
    margin-top: 40px;
}
.video_row .video-wrap video {
    width: 100%;
}
.video_row .video-wrap {
    flex: 1;
    background: #fff;
    padding: 30px 30px 26px;
    border-radius: 25px;
}
.dark-bg h2 {
    font-size: 41px;
    color: #ffffff;
    max-width: 700px;
    margin: 0px auto;
    font-weight: 700;
    line-height: 48px;
    letter-spacing: 1px;
}
.dark-bg {
    background: #33475B;
    color: white;
    padding: 100px 0;
    text-align: center;
    margin-top: 0px;
    position: relative;
}
.dark-bg .container {
    z-index: 2;
}
.dark-bg:after {
    content: "";
    background-image: url("../images/center-shap.png");
    width: 1448px;
    height: 321px;
    background-repeat: no-repeat;
    display: block;
    position: absolute;
    top: 0;
    z-index: 1;
    left: 0;
    right: 0;
    margin: 0 auto;
}
.dark-bg h2 span {
    color: #FD4E15;
    font-weight: 600;
}
.video-flex { display: flex; gap: 30px; margin-top: 50px; justify-content: center; }
.video-box { background: #3b4d61; padding: 10px; border-radius: 12px; flex: 1; border: 1px solid #4a5d71; max-width: 500px; }
.v-screen { height: 250px; background: #243444; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 40px; opacity: 0.6; }

/* Pricing */
.pricing-wrap:after {
    content: "";
    background-image: url("../images/plan-shap-right.png");
    background-repeat: no-repeat;
    width: 426px;
    height: 307px;
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 0;
}

.pricing-wrap .container {
    z-index: 1;
}
.p-top h3 {
    font-size: 64px;
    color: #33475B;
    line-height: normal;
}
.pricing-wrap {
    padding: 100px 0;
    position: relative;
}
.price-grid {
    display: flex;
    gap: 30px;
    margin: 0 auto;
}
.price-card { flex: 1; border: 1px solid var(--h-border); border-radius: 15px; overflow: hidden; text-align: center; background: white; }
.p-top {
    background: #F5F5F5;
    padding: 23px 20px 40px;
}
.p-top p {
    font-weight: 600;
    color: #33475B;
    font-size: 38px;
    letter-spacing: 1px;
}
.p-list {
    padding: 0;
    list-style: none;
}
.p-list li {
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 16px;
    color: #33475B;
    font-weight: 400;
}
.price-card .btn {
    margin: 30px 0;
    width: 80%;
    max-width: 177px;
}
.price-card h4 {
    font-size: 20px;
    margin: 20px 0 8px;
    color: #33475B;
    font-weight: 600;
}
/* CTA */
.call-to-action {
    background: #F9F9F9;
    padding: 92px 0;
}
.cta-box {
    border-radius: 25px;
    padding: 36px;
    text-align: center;
    color: white;
    background: linear-gradient(90deg, #33475B 0%, #334960 100%);
    position: relative;
}
.cta-box:after {
    content: "";
    background-image: url("../images/wave.png");
    background-repeat: no-repeat;
    width: 1366px;
    height: 252px;
    display: block;
    position: absolute;
    bottom: 0;
    z-index: 0;
    left: 0;
}
.cta-box h2 {
    font-size: 41px;
    margin-bottom: 13px;
}
.cta-box h2, .cta-box p, cta-box a {
    position: relative;
    z-index: 1;
}
.cta-box p {
    margin-bottom: 30px;
    font-size: 16px;
    color: #fff;
    letter-spacing: 1px;
    font-weight: 400;
}

/* client */
section.testimonial {
    padding: 100px 0;
    background: #FFFFFF;
    position: relative;
}
section.testimonial:after {
    content: "";
    background-image: url("../images/client-bg.png");
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    background-size: cover;
    position: absolute;
    display: block;
    top: 0;
    z-index: 0;
}
section.testimonial .container {
    z-index: 1;
}
.testimonial {
  text-align: center;
  padding: 60px 20px;
}

h2 span {
  color: #ff6a00;
}

/* SLIDER */
.slider {
  overflow: hidden;
  margin: 40px 10px;
}

.track {
  display: flex;
  transition: transform 0.5s ease;
}


/* CARD */
.card {
    position: relative;
    background: #ffffff;
    border-radius: 14px;
    padding: 25px;
    min-width: calc(33.33% - 15px);
    text-align: left;
    box-shadow: 0px 0px 2px 2px rgba(217, 217, 217, 0.2);
    margin: 8px;
}

/* quote */
.quote {
    font-size: 60px;
    color: #F5F5F5;
    font-family: auto;
    height: 24px;
    line-height: normal;
}

/* stars */
.stars {
    color: #ff6a00;
    font-size: 20px;
    margin-top: 15px;
}

/* text */
.text {
    font-size: 16px;
    color: #6D6969;
    margin: 12px 0 18px;
    letter-spacing: 1px;
    line-height: 26px;
}

/* user */
.user {
  display: flex;
  align-items: center;
  gap: 10px;
}

.user img {
  width: 45px;
  border-radius: 50%;
}

.user h4 {
    margin: 0;
    font-size: 20px;
    color: #33475B;
    font-weight: 600;
    letter-spacing: 1px;
}

.user span {
  font-size: 12px;
  color: #999;
}

/* dots */
.dots {
  margin-top: 20px;
}

.dot {
    height: 12px;
    width: 12px;
    margin: 5px;
    background: #ccc;
    border-radius: 50%;
    display: inline-block;
    cursor: pointer;
}

.dot.active {
  background: #ff6a00;
}

/* Responsive */
@media(max-width:900px){
  .card { min-width: calc(50% - 10px); }
}

@media(max-width:600px){
  .card { min-width: 100%; }
}
/* client */

/* Footer */

footer { padding: 80px 0 30px; border-top: 1px solid var(--h-border); background: #fafbfc; }
.footer-grid {    display: flex; justify-content: space-between; margin-bottom: 50px; }
.footer-logo { font-size: 20px; font-weight: 700; color: var(--h-dark); margin-bottom: 15px; display: flex; align-items: center; gap: 10px; }
.footer-links h4 { color: var(--h-dark); margin-bottom: 20px; font-size: 15px; }
.footer-links ul { list-style: none; }
.footer-links li { margin-bottom: 10px; font-size: 14px; }
.footer-links a { text-decoration: none; color: var(--h-text); }
.copyright { text-align: center; font-size: 12px; color: #999; padding-top: 30px; border-top: 1px solid #eee; }

@media (max-width: 992px) {
	.hero { flex-direction: column; text-align: center; }
	.hero p { margin: 0 auto 30px; }
	.features-grid { grid-template-columns: 1fr 1fr; }
	.feature-wide { grid-column: span 2; }
	.price-grid { flex-direction: column; }
	.footer-grid { grid-template-columns: 1fr; }
}