/*
================================================================================
Font Imports
--------------------------------------------------------------------------------
Google Fonts are imported here. This should be at the very top of the file.
================================================================================
*/
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&family=Poppins:wght@400;600&display=swap');


/*
================================================================================
Theme Variables
--------------------------------------------------------------------------------
All primary theme values are defined here as CSS variables.
Update these values to easily re-theme the entire website.
================================================================================
*/
:root {
    /* Typography */
    --font-primary: 'Poppins', sans-serif;
    --font-secondary: 'Open Sans', sans-serif; /* Added for the newly imported font */
    --font-weight-normal: 400; /* Matched to imported weight */
    --font-weight-semibold: 600; /* Matched to imported weight */
    --font-weight-bold: 700; /* Matched to imported weight */

    /* Core Colors */
    --color-text-base: #080808;
    --color-text-light: #eee;
    --color-text-muted: #6f75a7;
    --color-primary: #2a2b32;
    --color-secondary: #ed6524;
    --color-accent: #8864f4;
    --color-white: #fff;

    /* Component & State Colors */
    --color-success: #5cb377;
    --color-info: #7FCDB8;
    --color-info-alt: #3b82f6; /* For timeline */
    --color-danger: #ff0000;
    --color-review-icon-bg: #f5a782;
    --color-carousel-indicator: #4c527d;

    /* Background Colors */
    --bg-light: #f2f2f2;
    --bg-dark: #1c1e2e;
    --bg-light-gradient: linear-gradient(to bottom, var(--bg-light) 0%, var(--color-white) 70%);

    /* Custom Utility Colors (from .bg and .color classes) */
    --color-custom-1: #68a5e9;
    --color-custom-2: var(--color-accent); /* Reusing accent color */

    /* Transparent Colors */
    --color-black-t-05: rgba(0, 0, 0, 0.05);
    --color-black-t-10: rgba(0, 0, 0, 0.1);
    --color-black-t-15: rgba(0, 0, 0, 0.15);
    --color-white-t-50: rgba(255, 255, 255, 0.5);

    /* Borders & Radius */
    --border-radius-button: 2rem;
    --border-width-primary-btn: 5px;
    --border-width-secondary-btn: 2px;

    /* Shadows */
    --box-shadow-light: 0 10px 20px -4px var(--color-black-t-05);
    --box-shadow-heavy: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
}


/*
================================================================================
Base & Typography Styles
================================================================================
*/
body{
    font-family: var(--font-primary);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    color: var(--color-text-base);
    overflow-x:hidden;
}


h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6{
    font-family: var(--font-primary);
    color: var(--color-text-base);
    font-weight: var(--font-weight-bold);
}

	h1:first-letter { text-transform: capitalize; }


a { color: var(--color-primary); text-decoration:underline;}
a:hover{ color: var(--color-primary);  text-decoration-color:none;}


.logo img {width:195px;}


/*
================================================================================
Button Styles
================================================================================
*/
.btn{
    font-weight: var(--font-weight-semibold);
    padding:0.875rem 2.5rem;
    transition:all 0.4s ease-in-out;
    border-radius: var(--border-radius-button);
    border:none
}

@media (prefers-reduced-motion: reduce){
    .btn{
        transition:none
    }
}

.btn:hover,.btn:active,.btn:focus{
    box-shadow: var(--box-shadow-light);
    color: var(--color-white) !important;
}

.btn:focus,.btn.focus{
    box-shadow:none !important
}
.btn-primary{
    border: var(--border-width-primary-btn) solid var(--color-primary);
    background-color: var(--color-primary);
    color: var(--color-white) !important;
    font-weight: var(--font-weight-bold);
}
.btn-primary:hover,.btn-primary:active,.btn-primary:focus{
   border: var(--border-width-primary-btn) solid var(--color-primary);
    background: var(--color-accent);
      color: var(--color-white) !important;
}
.btn-secondary{
    background: var(--color-white);
    border: var(--border-width-secondary-btn) solid var(--color-secondary);
    color: var(--color-secondary);
}
.btn-secondary:hover,.btn-secondary:active,.btn-secondary:focus,.btn-secondary:not(:disabled):not(.disabled):active{
    background: var(--color-secondary);
    border: var(--border-width-secondary-btn) solid var(--color-secondary);
    color: var(--color-white);
}


/*
================================================================================
Theme Layout & Helpers
================================================================================
*/
.theme-bg-light{
    background-color: var(--bg-light);
}
.theme-bg-dark{
    background-color: var(--bg-dark);
}
.theme-bg-primary{
    background-color: var(--color-secondary);
}
.theme-bg-light-gradient{
    background-image: var(--bg-light-gradient);
}


.border-radius-0{
    border-radius:0
}


.single-col-max{
    max-width:760px
}

.section-heading{
    font-size:2.5rem
}
.section-intro{
    font-size:1.25rem
}

/*
================================================================================
Component Styles
================================================================================
*/

/* Hero Section */
.hero-section .headline{
    font-size:2.5rem;
    font-weight: var(--font-weight-bold);
}
.hero-section .subheadline{
    font-size:1.25rem
}
.hero-quotes .quote{
    position:relative;
    border-left:4px solid var(--color-accent);
    font-style:italic
}
.hero-quotes .quote:after{
    content:"";
    display:block;
    width:0;
    height:0;
    border-left:10px solid transparent;
    border-right:10px solid transparent;
    border-top:10px solid var(--bg-light);
    position:absolute;
    bottom:-10px;
    margin-left:-10px;
    left:2rem
}
.hero-quotes .source{
    vertical-align:middle;
    color: var(--color-text-muted);
    font-size:0.875rem
}
.hero-quotes .source-profile{
    width:60px;
    height:60px
}
.hero-quotes .carousel-indicators{
    bottom:-4rem
}
.hero-quotes .carousel-indicators button{
    border:none;
    background-color: var(--color-carousel-indicator);
    width:10px;
    height:10px;
    border-radius:50%;
    margin-left:5px;
    margin-right:5px
}

/* Book Cover */
.book-cover-holder{
    position:relative
}
.book-cover-holder .book-badge{
    position:absolute;
    right:0;
    top:-2rem;
    width:120px;
    height:120px;
    background: var(--color-success);
    border-radius:50%;
    text-align:center;
    color: var(--color-white);
    font-family: var(--font-primary);
    padding-top:34px;
    font-size:1.375rem;
    line-height:1;
    font-weight: var(--font-weight-bold);
}

/* Benefits Section */
.benefits-section .item-inner{
    height:100%
}
.benefits-section .item-icon{
    font-size:3rem;
    color: var(--color-secondary);
}
.benefits-section .item-heading{
    font-size:1.125rem
}

/* Content Section */
.content-section .key-points-list{
    font-size:1.125rem
}
.content-section .key-points-list li{
    margin-bottom:1rem
}
.content-section .fa-check-circle{
    color: var(--color-info);
}

/* Audience Section */
.audience-section .audience{
    max-width:500px
}
.audience-section .item{
    margin-bottom:1.5rem
}
.audience-section .item-title{
    font-size:1.125rem
}
.audience-section .item-icon{
    font-size:1.25rem;
    color: var(--color-info);
}

/* Reviews Section */
.reviews-section .item-inner{
    height:100%;
    position:relative
}
.reviews-section .icon-holder{
    position:absolute;
    left:50%;
    top:-18px;
    margin-left:-18px;
    display:inline-block;
    width:36px;
    height:36px;
    background: var(--color-review-icon-bg);
    color: var(--color-white);
    text-align:center;
    border-radius:50%;
    padding-top:6px
}
.reviews-section .source-profile{
    width:60px
}
.reviews-section .source-info{
    font-size:0.875rem
}
.reviews-section .quote{
    font-style:italic
}

/* Author Section */
.author-section{
    /* color:#fff */
}
.author-section .author-pic{
    width:150px;
    height:150px
}
.author-section .social-list li{
    background: var(--color-black-t-10);
    width:36px;
    height:36px;
    display:inline-block;
    border-radius:50%;
    padding-top:6px
}
.author-section .social-list li:hover{
    background: var(--color-black-t-15);
}
.author-section .social-list a{
    color: var(--color-white);
}
.theme-bg-primary a.theme-link{
    color: var(--color-white);
    text-decoration:underline;
    text-decoration-color: var(--color-white-t-50);
}
.theme-bg-primary a.theme-link:hover{
    color: var(--color-white);
    text-decoration-color: var(--color-white);
}

/* Lead Form & Misc Elements */
.lead-form-wrapper {position:relative;top:80px;border:5px solid var(--color-white);box-shadow: var(--box-shadow-heavy);}
.frm_error_style {display:none}

.starburst {
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  transform: rotate(15deg); 
  width: 200px;
  aspect-ratio: 1;
  clip-path: polygon(100% 50%,89.51% 56.26%,97.55% 65.45%,85.64% 68.16%,90.45% 79.39%,78.28% 78.28%,79.39% 90.45%,68.16% 85.64%,65.45% 97.55%,56.26% 89.51%,50% 100%,43.74% 89.51%,34.55% 97.55%,31.84% 85.64%,20.61% 90.45%,21.72% 78.28%,9.55% 79.39%,14.36% 68.16%,2.45% 65.45%,10.49% 56.26%,0% 50%,10.49% 43.74%,2.45% 34.55%,14.36% 31.84%,9.55% 20.61%,21.72% 21.72%,20.61% 9.55%,31.84% 14.36%,34.55% 2.45%,43.74% 10.49%,50% 0%,56.26% 10.49%,65.45% 2.45%,68.16% 14.36%,79.39% 9.55%,78.28% 21.72%,90.45% 20.61%,85.64% 31.84%,97.55% 34.55%,89.51% 43.74%);
}

.hero-section .container .promo {position:relative;}

.forward {position:absolute; color: var(--color-danger);z-index:100;top:30px;right:-50px;display:block;width:100px;height:100px;background:transparent url('../images/arrow.svg') top left  no-repeat;rotate:30deg;transform: scaleX(1);background-size:100%}

/* Progress Bar */
.progress-bar {
   height:14px !important; 
   border-radius:0 5px 5px 0; 
   top:auto !important; 
   bottom:0 !important;
   background-color: var(--color-accent);
    width: 0px;
    z-index: 1000;
    position: fixed;
    bottom: 0px;
    left: 0;
    color: var(--color-white);
    text-align:right;
    transition: width .6s ease-out;

}
.progress-bar-perc {padding:0 10px;font-size:28px;    width: 0px;
   transition: left .6s ease-out;
    z-index: 1000;
    position: fixed;
    bottom: 20px;
    left: 0;
    color: var(--color-white);
    margin-left:-65px;
    text-align:right;
    color: var(--color-accent);
    font-family: var(--font-primary);
    font-weight: var(--font-weight-bold);
} 

/* Formidable Forms Dropzone */
.frm_dropzone.frm_single_upload {max-width:100% !important;}
.frm_dropzone.frm_single_upload .frm_small_text {display: none !Important}

/* Color Utilities */
.bg {background-color: var(--color-custom-1) !important}
.bg2 {background-color: var(--color-custom-2) !important}
.color {color: var(--color-custom-1) !important}
.color2 {color: var(--color-custom-2) !important}

/* Timeline Steps */
.timeline-steps {
    display: flex;
    justify-content: center;
    flex-wrap: wrap
}
.timeline-steps .timeline-step {
    align-items: center;
    display: flex;
    flex-direction: column;
    position: relative;
    margin: 1rem
}
.timeline-steps .timeline-content {
    width: 15rem;
    text-align: center
}
.timeline-steps .timeline-content .inner-circle {
    border-radius: 1.5rem;
    height: 1rem;
    width: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-info-alt);
}
.timeline-steps .timeline-content .inner-circle:before {
    content: "";
    background-color: var(--color-accent);
    display: inline-block;
    height: 3rem;
    width: 3rem;
    min-width: 3rem;
    border-radius: 6.25rem;
    opacity: .2
}

/* Top Bar */
.top-bar .btn{padding: 5px 15px;    border-width: 3px;    font-weight: var(--font-weight-normal); margin-left:20px;}
.top-bar a {color: var(--color-primary);}
.top-bar span {text-decoration:underline;cursor:pointer;}
.top-bar{background-color: var(--bg-light);color: var(--color-carousel-indicator); min-height:50px; padding:10px 0;}
.top-bar.scroll-to-fixed-fixed{box-shadow:0 1px 5px var(--color-black-t-15);}

.tooltip {font-size:13px;}


/* Footer */
footer {background-color: var(--color-primary); color: var(--color-text-light);padding:20px 0}
footer a {color: var(--color-white);text-decoration:none;}
footer a:hover {color: var(--color-white); text-decoration:underline}

/*
================================================================================
Media Queries & Responsive Styles
================================================================================
*/
@media (min-width:768px) {
    .timeline-steps .timeline-step:not(:last-child):after {
        content: "";
        display: block;
        border-top: .25rem dotted var(--color-accent);
        width: 13rem;
        position: absolute;
        left: 7.5rem;
        top: .3125rem
    }
    .timeline-steps .timeline-step:not(:first-child):before {
        content: "";
        display: block;
        border-top: .25rem dotted var(--color-accent);
        width: 3.8125rem;
        position: absolute;
        right: 7.5rem;
        top: .3125rem
    }
}


@media (max-width: 991.98px){
    .section-heading{
        font-size:1.75rem
    }
    .section-intro{
        font-size:1.125rem
    }
    .hero-section .headline{
        font-size:2rem;
        font-weight: var(--font-weight-bold);
    }
    .hero-section .subheadline{
        font-size:1.125rem
    }
    .book-cover-holder .book-badge{
        width:100px;
        height:100px;
        padding-top:25px;
        font-size:1.25rem
    }
}

@media (max-width: 780px) {
  .forward {
    top: auto !important;
    bottom: -150px !important;
    left:0;
    rotate:-115deg;
    transform: scaleX(-1);
  }
  .source-profile {display:none;}
  .source-info {text-align:left !important;text-indent:30px;}
  .quotes-carousel {position:relative;margin-bottom:0 !important}
  .carousel-indicators {position:absolute;bottom:0 !important;}
}

@media (max-width: 575.98px){
    .hero-quotes .quote:after{
        left:50%;
        margin-left:-10px
    }
    .reviews-section .source-profile{
        margin-bottom:0.5rem
    }
    .form-inline .form-control{
        width:200px
    }
}
@media (min-width: 576px){
    .form-inline .form-control{
        width:400px
    }
}