:root {
    --white: rgba(255, 255, 255, 1);
    --dark-grey: rgba(42, 42, 46, 1)!important;
    --tosca: rgba(4, 140, 170, 1);
    --grey: rgba(143, 142, 152, 1);
    --fw400: 400;
    --fw500: 500;
    --fw600: 600;
    --fw700: 700;
    --fw800: 800;
    --fw900: 900;
    --nunito: "Nunito Sans", Sans-serif;
}

html {
  scroll-behavior: smooth;
}

/* Color */
.white {color: var(--white)}
.dark-grey {color: var(--dark-grey)!important}
.tosca {color: var(--tosca)}
.grey {color: var(--grey)}

/* Typography */
.fw400 {font-weight: var(--fw400)}
.fw500 {font-weight: var(--fw500)}
.fw600 {font-weight: var(--fw600)}
.fw700 {font-weight: var(--fw700)}
.fw800 {font-weight: var(--fw800)}
.fw900 {font-weight: var(--fw900)}
.lg-text {font-size: 48px!important;line-height: 59px!important}
.lg-text-2 {font-size: 48px!important;line-height: 56px!important}
.md-text {font-size: 33px!important;line-height: 36px!important}
.md-text-c {font-size: 32px!important;line-height: 42px!important}
.md-text-m {font-size: 26px!important;line-height: 41px!important}
.md-text-s {font-size: 24px!important;line-height: 32px!important}
.sm-text {font-size: 20px!important;line-height: 28px!important}
.xs-text {font-size: 25px!important;line-height: 30px!important}
.xxs-text {font-size: 16px!important;line-height: 24px!important}
.xxxs-text {font-size: 12px!important;line-height: 18px!important}

/* Margins */
.my-24 {margin: 1.5rem 0!important}
.mb-8 {margin-bottom: .5rem!important}
.mb-10 {margin-bottom: .625rem!important}
.mb-16 {margin-bottom: 1rem!important}
.mb-20 {margin-bottom: 1.25rem!important}
.mb-24 {margin-bottom: 1.5rem!important}
.mb-32 {margin-bottom: 2rem!important}
.mb-42 {margin-bottom: 2.625rem!important}
.mb-56 {margin-bottom: 5.5rem!important}
.mb-65 {margin-bottom: 4.063rem!important}
.mt-16 {margin-top: 1rem!important}
.mt-24 {margin-top: 1.5rem!important}
.mt-32 {margin-top: 2rem!important}
.mt-42 {margin-top: 2.625rem!important}
.mt-56 {margin-top: 3.5rem!important}
.mt-100 {margin-top: 6.5rem!important}
.pb-50 {padding-bottom: 50px!important}
.pb-120 {padding-bottom: 120px!important}
.p-10 {padding: 10px!important}
.p-20 {padding: 1.25rem!important}
.px-15 {
    padding-left: 15px!important;
    padding-right: 15px!important;
}
.px-24 {
    padding-left: 24px!important;
    padding-right: 24px!important;
}
.py-15 {
    padding-top: 15px!important;
    padding-bottom: 15px!important;
}
.py-33 {
    padding-top: 32px!important;
    padding-bottom: 32px!important;
}

/* Gap */
.gap-16 {gap: 16px}
.gap-32 {gap: 32px}
.gap-75 {gap: 75px}
.gap-100 {gap: 100px}

/* Flex */
.flex-20 {flex: 1 1 20%}
.flex-33 {flex: 1 1 33.3333%}
.flex-45 {flex: 1 1 45%}
.flex-50 {flex: 1 1 50%}

/* Width */
.w-80 {width: 80%!important}
.w-90 {width: 90%!important}
.w-custom {width: 210px!important}

/* Border Radius */
.border-radius-12 {border-radius: .75rem}
.border-radius-16 {border-radius: 1rem}
.border-radius-24 {border-radius: 1.5rem}
.border-radius-32 {border-radius: 2rem}

/* Buttons */
.white-btn,
.blue-btn {
    font-size: 16px;
    font-weight: var(--fw700);
    line-height: 24px;
    padding: 12px 16px;
    width: 100%;
}
.white-btn {
    background: var(--white);
    color: var(--dark-grey);
}
.white-btn:hover {
    color: var(--grey);
}
.blue-btn {
    background: var(--cyan);
    color: var(--white)!important;
}
.btn-with-border {border: 1px solid rgba(188, 188, 189, 1)}
.btn-with-shadow {box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1)}

/* Width & Height */
.custom-width {width: calc(100% - 50px)}
.custom-height {min-height: 90px}

/* Checkbox */
.form-check .form-check-label::before,
.form-check.radio .form-check-label::before {
    content: "";
    display: inline-block;
    position: absolute;
    width: 17px;
    height: 17px;
    left: 0;
    margin-left: 0;
    border: 1px solid #cccccc;
    border-radius: 3px;
    background-color: var(--white);
    -webkit-transition: border 0.15sease-in-out, color 0.15sease-in-out;
    -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
    transition: border 0.15sease-in-out, color 0.15sease-in-out;
}
.form-check.radio .form-check-label::before {
    border-radius: 50%;
}
.form-check .form-check-label::after,
.form-check.radio .form-check-label::after {
    display: inline-block;
    position: absolute;
    width: 16px;
    height: 16px;
    left: 0;
    top: 0;
    margin-left: 0;
    padding-left: 3px;
    padding-top: 1px;
    font-size: 11px;
    color: var(--white);
}
.form-check.radio .form-check-label::after {
    width: 9px;
    height: 9px;
    top: 6px;
    left: 4px;
    padding-top: 9px;
    border-radius: 50%;
}
.form-check input[type="checkbox"],
.form-check input[type="radio"] {
  opacity: 0;
  z-index: 1;
}
.form-check input[type="checkbox"]:focus + label::before,
.form-check input[type="radio"]:focus + label::before {
  outline: none;
  outline-offset: 0;
}
.form-check input[type="checkbox"]:checked + label::after {
  font-family: "Font Awesome 5 Pro";
  content: "\f00c";
}
.form-check input[type="radio"]:checked + label::after {
    font-family: "Font Awesome 5 Pro";
    content: "\f111";
}
.form-check input[type="checkbox"]:disabled + label,
.form-check input[type="radio"]:disabled + label {
  opacity: 0.65;
}
.form-check input[type="checkbox"]:disabled + label::before,
.form-check input[type="radio"]:disabled + label::before {
  background-color: #eeeeee;
  cursor: not-allowed;
}
.checkbox-primary input[type="checkbox"]:checked + label::before, 
.checkbox-primary input[type="radio"]:checked + label::before {
    background-color: var(--cyan);
    border-color: var(--cyan);
}

/* Shadows */
.shadow-element {box-shadow: 0px 6px 16px 0px rgba(0, 0, 0, 0.2)}

/* Ornament */
.top-left {
    top: 50px !important;
    left: 65px !important;
    z-index: 0 !important;
}
.bottom-right {
    right: -53px!important;
}

/* Columns */
.full-column {flex: 0 0 calc(100% - 16px)}
.column-third {flex: 0 0 calc(33.333% - 16px)}
.column-fourth {flex: 0 0 calc(25% - 16px)}
.column-half {flex: 0 0 calc(50% - 16px)}
.custom-column-half {flex: 0 0 calc(40% - 16px)}

.hero-banner,
.ebook {
    overflow: unset!important;
    padding-block-end: 0;
}
.hero-banner {
    padding-top: 100px!important;
}

.block-form {
    margin-top: -150px;
    margin-bottom: 60px;
    box-shadow: 0px 6px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
}
.block-form .wrapper-form {
    position: relative;
    padding: 48px 80px;
    z-index: 1;
}
#ebook-form label {
    font-size: 14px;
    font-weight: var(--fw700);
    text-align: left;
    line-height: 20px;
}
#ebook-form button {
    background-color: var(--tosca);
    padding: 14px;
    color: var(--white);
}
.block-text ol {
    padding-left: 25px;
}
.block-text li {
    font-size: 24px;
    font-weight: var(--fw700);
    line-height: 32px;
    margin-bottom: 16px;
}
.tocSlider {
    padding-block-end: 100px;
    z-index: 11;
}


/* Responsive */
@media (max-width: 767px) {
    .hero-banner {padding-top: 0!important}
    .hero-banner .caption {
        top: 100px;
        position: relative;
    }
    .hero-banner .caption p > br {display: none}
    .block-form {
        margin-top: -113px;
        margin-bottom: 30px;
    }
    .block-form .wrapper-form {padding: 24px}
    .block-text li {
        font-size: 16px;
        line-height: 24px;
    }
    .tocSlider {
        padding-block-end: 0;
        min-height: 400px;
        .swiper-wrapper {
            min-height: 400px;
        }
    }
    .swiper-pagination {
        bottom: 115px!important;
        width: auto!important;
        padding: 4px 8px;
        left: 50%!important;
        transform: translate(-50%, 15px);
        background: rgba(0, 0, 0, 0.16);
        border-radius: 16px;
    }
    .swiper-pagination-bullet-active {
        width: 20px;
        border-radius: 16px;
    }
}