/* ================================
   GLOBAL RESET
================================ */

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

body{
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
background:#f8f8f8;
color:#333;
line-height:1.6;
}

/* ================================
   CONTAINER
================================ */

.container{
max-width:1200px;
margin:auto;
padding:0 20px;
}

/* ================================
   HEADER
================================ */

.site-header{
position:sticky;
top:0;
width:100%;
background:#ffffff;
border-bottom:1px solid #eee;
z-index:1000;
}

.nav-container{
max-width:1200px;
margin:auto;
display:flex;
align-items:center;
justify-content:space-between;
padding:16px 20px;
}

/* ================================
   LOGO
================================ */

.logo a{
font-size:24px;
font-weight:700;
text-decoration:none;
color:#7a1f4a;
}

/* ================================
   NAV MENU
================================ */

.nav-menu{
display:flex;
gap:30px;
align-items:center;
}

.nav-menu a{
text-decoration:none;
font-size:15px;
font-weight:500;
color:#333;
transition:0.2s;
}

.nav-menu a:hover{
color:#c02c6b;
}

/* ================================
   NAV BUTTONS
================================ */

.nav-actions{
display:flex;
align-items:center;
gap:12px;
}

.login-btn{
border:1px solid #ddd;
padding:8px 18px;
border-radius:25px;
text-decoration:none;
font-size:14px;
color:#333;
transition:0.2s;
}

.login-btn:hover{
border-color:#aaa;
}

.cta-btn{
background:#c02c6b;
color:white;
padding:9px 20px;
border-radius:25px;
text-decoration:none;
font-size:14px;
font-weight:600;
transition:0.2s;
}

.cta-btn:hover{
background:#a9225c;
}

/* ================================
   MOBILE MENU BUTTON
================================ */

.menu-toggle{
display:none;
font-size:26px;
cursor:pointer;
}

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

.hero{
padding:100px 20px;
text-align:center;
}

.hero h1{
font-size:44px;
margin-bottom:20px;
}

.hero p{
font-size:18px;
color:#666;
max-width:700px;
margin:auto;
}

/* ================================
   BUTTONS
================================ */

.btn{
display:inline-block;
padding:12px 24px;
border-radius:30px;
text-decoration:none;
font-weight:600;
}

.btn-primary{
background:#c02c6b;
color:white;
}

.btn-secondary{
border:1px solid #ccc;
color:#333;
}

/* ================================
   RESPONSIVE
================================ */

@media(max-width:900px){

.nav-actions{
display:none;
}

}

@media(max-width:768px){

.nav-container{
padding:14px 16px;
}

.nav-menu{
position:absolute;
top:70px;
left:0;
width:100%;
background:white;
flex-direction:column;
gap:18px;
padding:25px 0;
display:none;
border-bottom:1px solid #eee;
}

.nav-menu.active{
display:flex;
}

.menu-toggle{
display:block;
}

.hero h1{
font-size:32px;
}

.hero p{
font-size:16px;
}

}



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

.hero{
background:#f3f3f5;
padding:30px 20px;
text-align:center;
}

.hero-container{
max-width:900px;
margin:auto;
}

.hero h1{
font-size:56px;
font-weight:700;
color:#3b2443;
margin-bottom:25px;
line-height:1.2;
}

.hero p{
font-size:18px;
color:#555;
max-width:720px;
margin:auto;
margin-bottom:35px;
line-height:1.7;
}

.hero-btn{
background:#c02c6b;
color:white;
padding:16px 36px;
border-radius:35px;
text-decoration:none;
font-weight:600;
font-size:16px;
display:inline-block;
transition:0.3s;
}

.hero-btn:hover{
background:#a9225c;
}

/* ================================
   HERO RESPONSIVE
================================ */

@media(max-width:900px){

.hero h1{
font-size:40px;
}

}

@media(max-width:600px){

.hero{
padding:80px 20px;
}

.hero h1{
font-size:32px;
}

.hero p{
font-size:16px;
}

.hero-btn{
padding:14px 28px;
font-size:15px;
}

}




/* ================================
   SHOWCASE SLIDER
================================ */

.showcase-slider{
background:#f3f3f5;
padding:20px 0;
overflow:hidden;
}

.slider{
width:100%;
overflow:hidden;
position:relative;
}



.slide-track{
display:flex;
width:calc(320px * 10);
animation:scroll 30s linear infinite;
}

.slide-track img{
width:320px;
margin-right:30px;
border-radius:14px;
box-shadow:0 10px 25px rgba(0,0,0,0.08);
}

/* animation */

@keyframes scroll {

0%{
transform:translateX(0);
}

100%{
transform:translateX(calc(-320px * 5));
}

}

/* responsive */

@media(max-width:768px){

.slide-track img{
width:240px;
}

}

@media(max-width:500px){

.slide-track img{
width:200px;
}

}



/* ================================
   TRUSTED LOGOS SECTION
================================ */

.trusted-section{
background:#f3f3f5;
padding:60px 20px;
text-align:center;
}

.trusted-title{
font-size:20px;
color:#4b2a57;
margin-bottom:35px;
font-weight:600;
}

.trusted-logos{
display:flex;
flex-wrap:wrap;
justify-content:center;
align-items:center;
gap:50px;
}

.trusted-logos img{
height:28px;
opacity:0.8;
transition:0.3s;
}

.trusted-logos img:hover{
opacity:1;
transform:scale(1.05);
}

/* ================================
   RESPONSIVE
================================ */

@media(max-width:768px){

.trusted-logos{
gap:30px;
}

.trusted-logos img{
height:24px;
}

}



/* ================================
   FEATURES SECTION
================================ */

.features-section{
background:#f4efe8;
padding:50px 20px;
}

.features-title{
font-size:40px;
font-weight:700;
color:#3b2443;
max-width:600px;
margin-bottom:60px;
}

.features-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:50px;
}

.feature-box h3{
font-size:22px;
margin-bottom:12px;
color:#3b2443;
}

.feature-box p{
font-size:15px;
color:#555;
line-height:1.6;
}

.feature-number{
font-size:36px;
font-weight:700;
margin-bottom:20px;
color:#3b2443;
opacity:0.7;
}

/* ================================
   RESPONSIVE
================================ */

@media(max-width:1000px){

.features-grid{
grid-template-columns:repeat(2,1fr);
gap:40px;
}

}

@media(max-width:600px){

.features-title{
font-size:30px;
}

.features-grid{
grid-template-columns:1fr;
}

}


/* =================================
   FEATURE FLOW SECTION
================================= */

.feature-flow{
background:#f4efe8;
padding:50px 20px;
}

.flow-row{
display:flex;
align-items:center;
justify-content:space-between;
gap:80px;
margin-bottom:120px;
}

.flow-row.reverse{
flex-direction:row-reverse;
}

.flow-image img{
width:100%;
max-width:520px;
border-radius:14px;
box-shadow:0 10px 30px rgba(0,0,0,0.08);
}

.flow-text{
max-width:500px;
}

.flow-text h2{
font-size:36px;
color:#3b2443;
margin-bottom:20px;
}

.flow-text p{
font-size:16px;
line-height:1.7;
color:#555;
margin-bottom:25px;
}

.flow-btn{
background:#c02c6b;
color:white;
padding:14px 28px;
border-radius:30px;
text-decoration:none;
font-weight:600;
display:inline-block;
transition:0.3s;
}

.flow-btn:hover{
background:#a9225c;
}

/* =================================
   RESPONSIVE
================================= */

@media(max-width:900px){

.flow-row{
flex-direction:column;
gap:40px;
text-align:center;
}

.flow-row.reverse{
flex-direction:column;
}

.flow-text{
max-width:100%;
}

.flow-text h2{
font-size:30px;
}

}



/* =================================
   TESTIMONIALS SECTION
================================= */

.testimonials-section{
background:#f3f3f5;
padding:50px 20px;
}

.testimonials-title{
text-align:center;
font-size:36px;
color:#3b2443;
margin-bottom:60px;
}

/* GRID */

.testimonials-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
}

/* CARD */

.testimonial-card{
background:#efe6dc;
padding:25px;
border-radius:12px;
transition:0.3s;
}

.testimonial-card p{
font-size:15px;
line-height:1.6;
color:#4a3a4f;
margin-bottom:20px;
}

/* USER */

.testimonial-user{
display:flex;
align-items:center;
gap:12px;
}

.testimonial-user img{
width:40px;
height:40px;
border-radius:50%;
object-fit:cover;
}

.testimonial-user strong{
display:block;
font-size:14px;
color:#3b2443;
}

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

/* HOVER */

.testimonial-card:hover{
transform:translateY(-5px);
box-shadow:0 10px 25px rgba(0,0,0,0.08);
}

/* RESPONSIVE */

@media(max-width:1000px){

.testimonials-grid{
grid-template-columns:repeat(2,1fr);
}

}

@media(max-width:600px){

.testimonials-grid{
grid-template-columns:1fr;
}

.testimonials-title{
font-size:28px;
}

}



/* =================================
   CTA SECTION
================================= */

.cta-section{
padding:50px 20px;
background:#f5f3f8;
}

.cta-box{
background:#dcd5ea;
border-radius:20px;
padding:60px;
display:flex;
align-items:center;
justify-content:space-between;
gap:60px;
}

/* TEXT */

.cta-text{
max-width:520px;
}

.cta-text h2{
font-size:38px;
line-height:1.3;
color:#3b2443;
margin-bottom:20px;
}

.cta-text p{
font-size:16px;
color:#555;
margin-bottom:30px;
}

/* BUTTON */

.cta-main-btn{
background:#c02c6b;
color:white;
padding:16px 34px;
border-radius:40px;
text-decoration:none;
font-weight:600;
display:inline-block;
transition:0.3s;
}

.cta-main-btn:hover{
background:#a9225c;
}

/* IMAGE */

.cta-image img{
width:100%;
max-width:420px;
}

/* =================================
   RESPONSIVE
================================= */

@media(max-width:900px){

.cta-box{
flex-direction:column;
text-align:center;
padding:50px 30px;
}

.cta-text h2{
font-size:30px;
}

.cta-image img{
max-width:320px;
}

}



/* =================================
   TOOL TRUST SECTION
================================= */

.tool-trust{
padding:50px 20px;
text-align:center;
background:#f8f8fb;
}

.tool-trust h2{
font-size:34px;
color:#3b2443;
margin-bottom:10px;
}

.tool-trust p{
font-size:16px;
color:#666;
max-width:600px;
margin:auto;
margin-bottom:60px;
}

/* SLIDER */

.tool-slider{
overflow:hidden;
position:relative;
width:100%;
}

.tool-track{
display:flex;
gap:40px;
animation:toolScroll 40s linear infinite;
width:max-content;
}

.tool-track img{
height:180px;
border-radius:10px;
box-shadow:0 10px 25px rgba(0,0,0,0.06);
}

/* infinite animation */

@keyframes toolScroll{

0%{
transform:translateX(0);
}

100%{
transform:translateX(-50%);
}

}

/* responsive */

@media(max-width:768px){

.tool-track img{
height:120px;
}

}



/* =================================
   FOOTER
================================= */

.site-footer{
  background:#2d1038;
  color:#fff;
  padding:72px 20px 28px;
}

.footer-container{
  max-width:1280px;
  margin:0 auto;
}

.footer-top{
  display:grid;
  grid-template-columns:320px 1fr;
  gap:60px;
  align-items:flex-start;
}

.footer-brand{
  max-width:300px;
}

.footer-logo{
  display:inline-block;
  color:#fff;
  text-decoration:none;
  font-size:34px;
  font-weight:800;
  line-height:1.1;
  margin-bottom:20px;
}

.footer-desc{
  font-size:15px;
  line-height:1.8;
  color:rgba(255,255,255,0.78);
  margin-bottom:24px;
}

.footer-contact{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.footer-contact a{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:#fff;
  text-decoration:none;
  font-size:15px;
  line-height:1.6;
  opacity:.9;
  transition:opacity .2s ease, transform .2s ease;
}

.footer-contact a:hover{
  opacity:1;
  transform:translateX(2px);
}

.footer-contact i{
  font-size:14px;
  width:18px;
}

/* links area */

.footer-links{
  display:grid;
  grid-template-columns:repeat(4, minmax(140px, 1fr));
  gap:40px;
}

.footer-col h3{
  font-size:18px;
  font-weight:700;
  margin-bottom:18px;
  color:#fff;
}

.footer-col ul{
  list-style:none;
  margin:0;
  padding:0;
}

.footer-col ul li{
  margin-bottom:14px;
}

.footer-col ul li a{
  color:rgba(255,255,255,0.9);
  text-decoration:none;
  font-size:15px;
  line-height:1.6;
  transition:opacity .2s ease, color .2s ease;
}

.footer-col ul li a:hover{
  color:#fff;
  opacity:1;
}

.footer-divider{
  height:1px;
  background:rgba(255,255,255,0.22);
  margin:42px 0 24px;
}

/* bottom */

.footer-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  flex-wrap:wrap;
}

.footer-socials{
  display:flex;
  align-items:center;
  gap:22px;
}

.footer-socials a{
  color:#fff;
  text-decoration:none;
  font-size:28px;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:transform .2s ease, opacity .2s ease;
}

.footer-socials a:hover{
  transform:translateY(-2px);
  opacity:1;
}

.footer-copy p{
  margin:0;
  font-size:14px;
  color:rgba(255,255,255,0.9);
  line-height:1.7;
  text-align:right;
}

.footer-copy a{
  color:#fff;
  text-decoration:none;
}

.footer-copy a:hover{
  text-decoration:underline;
}

/* =================================
   RESPONSIVE
================================= */

@media (max-width: 1100px){
  .footer-top{
    grid-template-columns:1fr;
    gap:40px;
  }

  .footer-brand{
    max-width:100%;
  }

  .footer-links{
    grid-template-columns:repeat(2, minmax(180px, 1fr));
    gap:34px;
  }
}

@media (max-width: 640px){
  .site-footer{
    padding:56px 16px 24px;
  }

  .footer-logo{
    font-size:30px;
  }

  .footer-desc{
    font-size:14px;
  }

  .footer-links{
    grid-template-columns:1fr;
    gap:26px;
  }

  .footer-col h3{
    margin-bottom:12px;
  }

  .footer-col ul li{
    margin-bottom:10px;
  }

  .footer-bottom{
    flex-direction:column;
    align-items:flex-start;
  }

  .footer-copy p{
    text-align:left;
    font-size:13px;
  }

  .footer-socials a{
    font-size:26px;
  }
}



/* =================================
   INNER PAGES / LEGAL PAGES STYLE
================================= */

.page-banner{
  background:#f3f3f5;
  padding:90px 20px 60px;
  text-align:center;
}

.page-banner .container{
  max-width:900px;
}

.page-banner h1{
  font-size:48px;
  line-height:1.2;
  color:#3b2443;
  margin-bottom:18px;
}

.page-banner p{
  font-size:18px;
  color:#666;
  max-width:720px;
  margin:0 auto;
}

.page-content{
  background:#f8f8f8;
  padding:60px 20px 80px;
}

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

.page-card{
  background:#fff;
  border:1px solid #eee;
  border-radius:18px;
  padding:40px;
  box-shadow:0 8px 24px rgba(0,0,0,0.04);
}

.page-card + .page-card{
  margin-top:24px;
}

.page-card h2{
  font-size:30px;
  color:#3b2443;
  margin-bottom:18px;
}

.page-card h3{
  font-size:22px;
  color:#3b2443;
  margin:28px 0 12px;
}

.page-card p{
  font-size:16px;
  color:#555;
  line-height:1.8;
  margin-bottom:16px;
}

.page-card ul,
.page-card ol{
  margin:0 0 18px 22px;
}

.page-card ul li,
.page-card ol li{
  font-size:16px;
  color:#555;
  line-height:1.8;
  margin-bottom:10px;
}

.page-highlight{
  background:#efe6dc;
  border-left:4px solid #c02c6b;
  padding:18px 20px;
  border-radius:12px;
  margin:22px 0;
}

.page-highlight p{
  margin:0;
  color:#4a3a4f;
}

.page-grid{
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:28px;
}

.page-sidebar{
  background:#efe6dc;
  border-radius:18px;
  padding:28px;
  height:fit-content;
}

.page-sidebar h3{
  font-size:22px;
  color:#3b2443;
  margin-bottom:14px;
}

.page-sidebar p{
  font-size:15px;
  color:#555;
  line-height:1.7;
  margin-bottom:14px;
}

.page-sidebar ul{
  margin:0 0 0 18px;
}

.page-sidebar ul li{
  font-size:15px;
  color:#555;
  margin-bottom:10px;
  line-height:1.7;
}

/* =================================
   CONTACT PAGE
================================= */

.contact-box{
  background:#fff;
  border:1px solid #eee;
  border-radius:18px;
  padding:40px;
  box-shadow:0 8px 24px rgba(0,0,0,0.04);
}

.contact-form{
  display:grid;
  gap:18px;
}

.contact-form .form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}

.contact-form input,
.contact-form textarea{
  width:100%;
  border:1px solid #ddd;
  border-radius:14px;
  padding:14px 16px;
  font-size:15px;
  color:#333;
  background:#fff;
  outline:none;
  transition:0.25s;
}

.contact-form input:focus,
.contact-form textarea:focus{
  border-color:#c02c6b;
  box-shadow:0 0 0 3px rgba(192,44,107,0.08);
}

.contact-form textarea{
  min-height:160px;
  resize:vertical;
}

.contact-info-card{
  background:#efe6dc;
  border-radius:18px;
  padding:30px;
  height:fit-content;
}

.contact-info-card h3{
  font-size:24px;
  color:#3b2443;
  margin-bottom:16px;
}

.contact-info-card p{
  font-size:15px;
  color:#555;
  margin-bottom:14px;
  line-height:1.8;
}

.contact-info-item{
  margin-bottom:16px;
}

.contact-info-item strong{
  display:block;
  color:#3b2443;
  margin-bottom:4px;
}

/* =================================
   ABOUT / WRITE FOR US BOXES
================================= */

.info-boxes{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
  margin-top:26px;
}

.info-box{
  background:#efe6dc;
  border-radius:16px;
  padding:24px;
}

.info-box h3{
  font-size:22px;
  color:#3b2443;
  margin-bottom:10px;
}

.info-box p{
  font-size:15px;
  color:#555;
  line-height:1.7;
  margin:0;
}

/* =================================
   CTA STRIP INSIDE PAGES
================================= */

.inner-cta{
  margin-top:30px;
  background:#dcd5ea;
  border-radius:18px;
  padding:32px;
  text-align:center;
}

.inner-cta h3{
  font-size:28px;
  color:#3b2443;
  margin-bottom:12px;
}

.inner-cta p{
  font-size:16px;
  color:#555;
  margin-bottom:20px;
}

/* =================================
   RESPONSIVE
================================= */

@media(max-width:900px){

  .page-grid{
    grid-template-columns:1fr;
  }

  .info-boxes{
    grid-template-columns:1fr;
  }

  .page-banner h1{
    font-size:38px;
  }

  .page-banner p{
    font-size:16px;
  }

}

@media(max-width:768px){

  .page-banner{
    padding:70px 20px 45px;
  }

  .page-card,
  .contact-box,
  .contact-info-card,
  .page-sidebar{
    padding:24px;
  }

  .contact-form .form-row{
    grid-template-columns:1fr;
  }

  .page-card h2{
    font-size:26px;
  }

  .page-card h3{
    font-size:20px;
  }

}

@media(max-width:600px){

  .page-banner h1{
    font-size:32px;
  }

  .page-content{
    padding:40px 16px 60px;
  }

  .page-card p,
  .page-card ul li,
  .page-card ol li{
    font-size:15px;
  }

}