:root {
  --blue: #0096ff;
  --yellow: #ffb531;
  --black: #141c1c;
  --gray-light: #f2f4f8;
	--light-gray: #f4f5f8;
  --gray-border: #ccc;
  --font-title: 'Montserrat', 'Poppins', sans-serif;
  --font-text: 'Poppins', sans-serif;
	--font-secondary: 'Inter', sans-serif;
	--font-poppins: 'Poppins', sans-serif;
}

body { font-family: 'Poppins', sans-serif; margin: 0; color: #000; }
h1, h2, h3, h4, h5, h6 { font-family: 'Montserrat', 'Poppins', sans-serif; }

.btn-primary { background-color: #000; color: #fff; border-radius: 2rem; padding: 10px 25px; font-weight: 500; border: none; }

header { padding: 0px 0px 25px 0px; }

/*-- Begin::Hero Section --*/
.hero { padding: 95px 0 55px 0; }
.hero h1 { font-size: 52px; line-height: 56px; font-weight: 900; padding-top: 20px; }
.hero p.lead { font-size: 17px; font-weight: 400; margin-top: 20px; margin-bottom: 15px; }
.email-form .form-control { border-radius: 8px; padding: 0.9rem; }
.email-form .btn { border-radius: 2rem; font-size: 15px; font-weight: 500; padding: 14px 25px; background: #000; color: #fff; border: none; }
.hero p.text-center { font-size: 13px; }
.hero-icons { margin-top: 10px; }
.hero-icons img { width: 45px; height: 45px; }
.hero-icons p { font-size: 13px; line-height: 20px; font-weight: 600; }
.rounded-image { border-radius: 32px; width: 100%; height: auto; }
/*---- End::Hero Section --*/

/*-- Begin::Creators Section --*/
.creators { background-color: #fff; padding: 90px 0px 60px 0px; }
.creators h2 { font-size: 52px; font-weight: 900; padding-bottom: 55px; }
.creators h2 span { background: linear-gradient(90deg, #71cc3f, #27aae1, #f970fe); -webkit-background-clip: text; color: transparent; background-clip: text; }
.creators .creator-box { display: flex; flex-direction: column; height: 100%; }
.creators .creator-box h3 { font-size: 22px; line-height: 28px; font-weight: 700; padding-right: 30px; padding-bottom: 10px; font-family: var(--font-text); }
.creators .creator-box p { font-size: 15px; padding-right: 33px; padding-bottom: 10px; }
.creators .creator-box .line-71cc3f { height: 4px; background-color: #71cc3f; width: 86%; margin-top: 12px; }
.creators .creator-box .line-27aae1 { height: 4px; background-color: #27aae1; width: 86%; margin-top: 12px; }
.creators .creator-box .line-8364e8 { height: 4px; background-color: #8364e8; width: 86%; margin-top: 12px; }
.creators .creator-box .line-f06dcc { height: 4px; background-color: #f06dcc; width: 86%; margin-top: 12px; }
/*---- End::Creators Section --*/

/*-- Begin::Platforms Section --*/
.platforms { background-color: #000; padding: 55px 0; }
.platforms h2 { font-size: 52px; line-height: 60px; font-weight: 900; margin-bottom: 65px; }
.platforms p { font-size: 20px; }
.platform-icons img { height: 42px; width: auto; margin-right: 12px; }
.btn-cta { background-color: #f970fe; color: #000; font-weight: 600; border-radius: 2rem; padding: 15px 28px; font-size: 15px; text-decoration: none; display: inline-flex; align-items: center; border: none; transition: background-color 0.3s ease; }
.btn-cta:hover { background-color: #e756e3; color: #000; }
/*---- End::Platforms Section --*/

/*-- Begin::FAQ Section --*/
.faq { padding: 75px 0; }
.faq h2 { font-size: 52px; line-height: 56px; font-weight: 900; }

.accordion-button { font-size: 19px; padding: 20px 0px; font-weight: 600; background-color: #fff !important; font-family: 'Poppins', Arial, sans-serif; }
.accordion-button::after { display: none; }
.accordion-button::before { content: '+'; position: absolute; right: 0px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border: 2px solid #000; border-radius: 50%; font-weight: 700; font-size: 16px; color: #000; background-color: #fff; transition: all 0.3s ease; }
.accordion-button:not(.collapsed)::before { content: '−'; }

.accordion-body { font-size: 15px; color: #000000; }
.accordion-body .faq-list { font-size: 15px; color: #000000; padding-left: 30px; }
.accordion-body .faq-list li { padding-bottom: 6px; }
.accordion-item { border: none; border-bottom: 1px solid #ddd; }
.accordion-button:not(.collapsed) { color: #000; background-color: #f8f9fa; }
/*-- End::FAQ Section --*/

/*-- Begin::Inclusive CTA Section --*/
.inclusive-cta { padding: 90px 0; }
.inclusive-cta h2 { font-size: 34px; line-height: 44px; font-weight: 900; margin: 0 auto 40px; padding: 0px 45px; }

.btn-black-cta { background-color: #000; color: #fff; font-weight: 600; border-radius: 2rem; padding: 16px 45px; font-size: 15px; text-decoration: none; display: inline-flex; align-items: center; transition: background-color 0.3s ease; border: none; }
.btn-black-cta:hover { background-color: #111; color: #fff; }
/*-- End::Inclusive CTA Section --*/

/*-- Begin::Footer --*/
.footer { background-color: #fff; font-size: 14px; }
.footer .col-1 img.footer-img-logo { width: 315px; height: auto; }
.footer .col-1 p { font-size: 13px; padding-right: 95px; padding-bottom: 5px; }
.footer .col-1 img.footer-img-payments { width: 190px; }
.footer h3 { font-size: 15px; padding-bottom: 14px; }
.footer a { text-decoration: none; color: #000; }
.footer a:hover { text-decoration: underline; }
.footer ul { padding-left: 0; font-size: 14px; }
.footer ul li { padding-bottom: 14px; }
.footer .border-top { border-top: 1px solid #dee2e6; }
.footer .footer-img-payments { width: 50%; }
/*-- End::Footer --*/

@media (max-width: 768px) {

    .container { padding-left: 22px; padding-right: 22px; margin-bottom: 18px; }

    .hero { padding: 115px 0 55px 0; }
    .hero h1 { line-height: 59px; margin-bottom: 30px !important; }
    .hero p.lead { font-size: 18px; line-height: 30px; font-weight: 500; }
    .hero .email-form .form-control { line-height: 36px; }
    .hero .email-form .mb-3 { margin-bottom: 14px !important; }
    .hero .email-form .mb-2 { margin-bottom: 14px !important; }
    .hero .email-form .btn { font-size: 18px; padding: 18px 25px; }
    .hero .rounded-image { height: 380px; object-fit: cover; }
    
    .hero p.text-center { font-size: 16px !important; margin-bottom: 85px; }
    .hero .rounded-image.mb-4 { margin-bottom: 35px !important; }
    .hero .hero-icons .col-4 { display: block !important; text-align: center; }
    .hero .hero-icons .col-4 img { width: 52px; height: 52px; }
    .hero .hero-icons .col-4 p { font-size: 14px !important; line-height: 18px; padding-top: 10px; }
    
    .creators { padding: 90px 0px 10px 0px; }
    .creators h2 { font-size: 56px; font-weight: 900; padding-right: 50px; }
    .creators .mb-4 { margin-bottom: 50px !important; } 
    .creators .row.text-start > div:nth-child(1) .creator-box { border-left: 4px solid #71cc3f; padding-left: 15px; }
    .creators .row.text-start > div:nth-child(2) .creator-box { border-left: 4px solid #00a8ff; padding-left: 15px; }
    .creators .row.text-start > div:nth-child(3) .creator-box { border-left: 4px solid #7688ff; padding-left: 15px; }
    .creators .row.text-start > div:nth-child(4) .creator-box { border-left: 4px solid #fa70ff; padding-left: 15px; }
    .creators .creator-box h3 { font-size: 22px; line-height: 28px; font-weight: 700; padding-bottom: 0px !important; }
    .creators .creator-box p { font-size: 18px; padding-right: 20px; padding-bottom: 0px; margin-bottom: 8px; font-weight: 400; }
    .creators .creator-box div { display: none; }

    .platforms { padding: 100px 0 72px 0; }
    .platforms .mb-4 { margin-bottom: 72px !important; }
    .platforms h2 { font-size: 46px; line-height: 56px; margin-bottom: 40px; }
    .platforms .platform-icons img { height: 38px; margin-right: 5px; margin-right: 8px; }
    .platforms p { font-size: 26px; }
    .platforms .btn-cta { width: 100%; justify-content: center; padding: 18px 28px; font-size: 18px; }

    .faq { padding: 75px 0 60px 0; }
    .faq .accordion-button { font-size: 23px; font-weight: 600; padding: 20px 40px 20px 0px; }
    .faq .accordion-body { padding: 16px 0px; }
    .faq .accordion-body, .faq .accordion-body .faq-list { font-size: 18px; }
    
    .inclusive-cta { padding: 90px 0 70px 0; }
    .inclusive-cta .avatar-group.mb-4 { margin-bottom: 35px !important; }
    .inclusive-cta h2 { font-size: 32px; line-height: 42px; font-weight: 900; padding: 0px; }
    .inclusive-cta .btn-black-cta { padding: 18px 10px; width: 100%; font-size: 18px; justify-content: center; margin-top: 15px; }

    .footer .mb-4 { padding-bottom: 30px; }
    .footer .footer-img-payments { width: 50%; }
    .footer p { padding-right: 60px; }
    .footer p, .footer h3, .footer li, .footer a { font-size: 16px; }
}

@media (max-width: 360px) {

    .hero h1 { font-size: 48px; line-height: 58px; }
    .hero p.lead { font-size: 13px; line-height: 22px; }
    .hero p.text-center { font-size: 13px !important; margin-bottom: 65px; }
    .hero .hero-icons .col-4 p { font-size: 13px !important; }

    .platforms h2 { font-size: 40px; line-height: 50px; }
    .platforms .platform-icons img { height: 30px; margin-right: 5px; margin-right: 8px; }

    .inclusive-cta .avatar-group img { width: 90%; }
    .inclusive-cta h2 { font-size: 28px; line-height: 38px; }
    .inclusive-cta .btn-black-cta { padding: 18px 10px; width: 100%; font-size: 18px; }
}