:root {
    --primary-color-darken: #081b57;
    --primary-color: #1b4adc;
    --secondary-color-darken: #33086a;
    --secondary-color: #7000ff;
    --accent-color-darken: #9a007a;
    --accent-color: #e700b7;
    --info-color-darken: #00958c;
    --info-color: #00d8be;
    --grey-color-darken: #24252c;
    --grey-color-darken-3: #24252c;
    --grey-color: #a1a7b3;
    --header-text-color: #c8fbf9;
    --navegation-color: #ffffff;

    --primary-gradient: linear-gradient(
        116.49deg,
        #0036df 0%,
        #7000ff 66.15%,
        #e700b7 100%
    );
    --secondary-gradient: linear-gradient(
        116.49deg,
        #7000ff 0%,
        #e700b7 47.4%,
        #ffa000 100%
    );
    --info-gradient: linear-gradient(
        116.49deg,
        #7000ff 0%,
        #1953f7 51.56%,
        #00d8be 100%
    );

    --text-primary-font-family: Poppins, sans-serif;
    --text-secondary-font-family: Poppins, sans-serif;
    --text-primary-font-weight: 400;
    --text-secondary-font-weight: 600;

    --heading-size-1: 8rem;
    --heading-size-2: 6rem;
    --heading-size-3: 4.8rem;
    --heading-size-4: 3.6rem;
    --heading-size-5: 2.4rem;
    --heading-size-6: 1.8rem;

    --paragraphs-size-normal: 1.6rem;
    --paragraphs-size-small: 1.4rem;
    --paragraphs-size-extra-small: 1.2rem;

    --line-height: 1.5;
    --line-height-small: 1.3;

    --shadow-primary: 0px 7px 6px rgba(0, 0, 0, 0.03);

    --shadow-secondary: 0px 7px 6px rgba(0, 0, 0, 0.03),
        0px 15px 16px rgba(0, 0, 0, 0.04), 0px 24px 30px rgba(0, 0, 0, 0.08);

    --boxes-border-radius: 15px;
}
.is-radius-large {
    border-radius: var(--boxes-border-radius) !important;
}
.is-borderless {
    border: none !important;
}

.is-hover-shadow-secondary:hover {
    box-shadow: var(--shadow-secondary);
}

.is-shadow-primary {
    box-shadow: var(--shadow-primary);
}

.is-shadow-secondary {
    box-shadow: var(--shadow-secondary);
}

/* Style banner */
.ct-banner-content {
    margin-bottom: 8rem;
    margin-top: 3rem;
}
/*
.ct-banner {
    --banner-text-color: white;
    --banner-gradient: linear-gradient(
        90deg,
        #1b4adc 0%,
        #7000ff 50%,
        #e700b7 100%
    );
    --banner__title-font-family: var(--text-primary-font-family);
    --banner__title-font-weight: var(--text-secondary-font-weight);
    --banner__title-font-size: 2.5rem;

    --banner__subtitle-font-family: var(--text-primary-font-family);
    --banner__subtitle-font-weight: var(--text-primary-font-weight);
    --banner__subtitle-font-size: 1.5rem;

    --banner__button-font-family: var(--text-primary-font-family);
    --banner__button-font-weight: var(--text-secondary-font-weight);
    --banner__button-font-size: 2.4rem;

    color: var(--banner-text-color);
    display: flex;
    width: 100%;
    border-radius: 10px;
    background: var(--banner-gradient);
    margin-top: 3rem;
    cursor: pointer;
    position: relative;
    text-decoration: none;
}

.ct-banner::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: transparent;
}

.ct-banner:hover:after {
    background-color: #ffffff11;
    transition: all 300ms ease-in-out;
    z-index: 1;
}

.ct-banner__container {
    display: flex;
    flex-direction: row;
    justify-content: stretch;
    width: 100%;
    position: relative;
    z-index: 2;
}

.ct-banner__container > * {
    flex: 1 1 100%;
}

.ct-banner__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2rem 2rem;
}

.ct-banner__title {
    color: var(--banner-text-color);
    font-family: var(--banner__title-font-family);
    font-size: var(--banner__title-font-size);
    font-weight: var(--banner__title-font-weight);
    line-height: var(--line-height-small);
    letter-spacing: -0.02em;
    margin-bottom: 1.25rem !important;
    text-align: left;
}

.ct-banner__subtitle {
    color: var(--banner-text-color);
    font-family: var(--banner__subtitle-font-family);
    font-size: var(--banner__subtitle-font-size);
    font-weight: var(--banner__subtitle-font-weight);
    line-height: var(--line-height);
    letter-spacing: -0.02em;
    text-align: left;
}

.ct-banner__button {
    color: var(--banner-text-color) !important;
    font-family: var(--banner__button-font-family);
    font-size: var(--banner__button-font-size);
    font-weight: var(--banner__button-font-weight);
    line-height: var(--line-height-small);
    letter-spacing: -0.02em;
}

.ct-banner__button:hover svg {
    transition: all 300ms ease-in-out;
    transform: translateX(20%);
}

.ct-banner__image {
    min-height: 100%;
    max-width: 50%;
} */

.container {
    max-width: 1360px;
    width: 100%;
}


/** Style navegation */
.navegation {
    --navegation__link-font-family: var(--text-primary-font-family);
    --navegation__link-font-weight: var(--text-primary-font-weight);
    --navegation__link-font-size: var(--paragraphs-size-normal);
    --navegation__link-color: var(--grey-color-darken-3);
    --navegation__link-hover-color: #ff3a39;
    --navegation__icon-size: 24px;
    --navegation__button-bar-color: #333;

    background-color: var(--navegation-color);
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 85px;
    z-index: 999999;
    display: flex;
    flex-wrap: wrap;
}
.logo_navegation {
    display: none !important;
}

.navegation__container {
    display: flex;
    width: 100% !important;
    flex-wrap: wrap;
    justify-content: space-between !important;
    flex-direction: row;
    align-items: center;
    height: 85px;
}

.navegation__container::before,
.navegation__container::after {
    display: none;
}
.navegation__image {
    display: flex;
    width: auto;
    margin-right: 0.2rem;
    opacity: 1;
    transition: opacity 300ms ease-in-out;
}
.navegation__image a {
    display: flex;
    align-items: center;
}
.navegation__link {
    height: fit-content;
    display: flex;
    flex-flow: row;
    align-items: center;
    -webkit-box-flex: 1;
    flex: 1 1 0;
}
.navegation__link-start {
    display: flex;
}
.navegation__link-start a {
    margin-right: 0.2rem;
    font-size: 14px;
    font-weight: 500;
    font-family: var(--navegation__link-font-family);
    line-height: var(--line-height);
    color: var(--primary-color-darken);
    height: 38px;
    min-width: 36px;
    transition: 0.35s;
    display: flex;
    align-items: center;
    transition-timing-function: cubic-bezier(0, -0.05, 0.99, 0.96) !important;
    padding: 0px 8px;
}
.navegation__link-start a:hover {
    background-color: #0001;
    border-radius: 5px;
    transition: opacity 0.2s cubic-bezier(0.4, 0, 0.6, 1);
    padding: 0px 8px;
}

.navegation__link-end {
    display: flex;
    margin-left: auto;
}
.navegation__link-end a {
    height: 3.92rem;
    display: flex;
    align-items: center;
    margin-left: 1rem;
    text-decoration: none;
}

.navegation__link-end .button__become-premium {
    margin-right: 1rem;
    padding: 0rem 1.5rem;
}
.button-gradient {
    position: relative;
}

.button-gradient::after {
    content: "" !important;
    transition: background-color 200ms ease-in-out !important;
    top: 0px !important;
    left: 0px !important;
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    background-color: #fff0 !important;
}

.button-gradient:hover::after {
    background-color: #fff4 !important;
}

.navegation__link-end .button__login {
    padding: 0rem 2rem;
    max-width: 106px;
    margin-right: 0.4rem !important;
}
.navegation__link-end .button__login i {
    padding-left: 1rem;
}
.navegation__link-end .button__become-premium i {
    padding-right: 1rem;
}
.navegation__link--secondary-cta {
    background: var(--secondary-gradient) !important;
    color: #fff !important;
    font-size: var(--paragraphs-size-small) !important;
    font-weight: var(--text-secondary-font-weight) !important;
    font-family: var(--text-primary-font-family) !important;
    line-height: var(--line-height) !important;
}
.navegation__link--primary-cta {
    margin-right: 1rem !important;
    background: var(--primary-gradient);
    color: #fff !important;
    font-size: var(--paragraphs-size-small);
    font-weight: var(--text-secondary-font-weight);
    font-family: var(--text-primary-font-family);
    line-height: var(--line-height);
}

.search__form {
    position: relative;
    width: 350px;
    height: 38px;
    border-radius: 15px;
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
    background: #fff !important;
    transition: all 0.3s ease;
}
.search__form:focus {
    box-shadow: 0 3px 4px rgba(0, 0, 0, 0.15);
}

.search__form-mobile {
    position: absolute;
    right: 80px;
    transition-duration: 0.4s;
    margin-right: auto;
    -moz-transition-duration: 0.4s;
    -webkit-transition-duration: 0.4s;
    -o-transition-duration: 0.4s;
    display: none;
}

.navegation__image--hidden {
    opacity: 0;
}

.search__form-mobile .search__select{
    display: none;

}
.search__form-mobile:focus-within,
.search__form-mobile--expanded {
    width: calc(100% - 100px) !important;
    transition-duration: 0.4s;
    -moz-transition-duration: 0.4s;
    -webkit-transition-duration: 0.4s;
    -o-transition-duration: 0.4s;
    position: absolute;
    background: #fff !important;
    /* height: 42px; */
  }
.search__form-mobile:focus-within  .search__select{
    display: flex;
    top: 4px;
}

.navegation__image .search__input:focus  {
    /* display: none !important; */
    background:#0036df !important;
}






.search__input {
    position: absolute;
    top: 10px;
    left: 44px;
    font-size: 14px;
    background: none !important;
    color: #5a6674 !important;
    width: 195px !important;
    height: 20px;
    border: none !important;
    padding: 0px !important;
    appearance: none;
    outline: none;
    font-family: var(--text-primary-font-family);
}
.search__input::webkit-search-cancel-button {
    appearance: none;
}
.search__button {
    position: absolute;
    top: 10px;
    left: 15px;
    height: 20px;
    width: 20px;
    padding: 0;
    margin: 0;
    border: none;
    background: none;
    outline: none !important;
    cursor: pointer;
}
.search__button i {
    width: 20px;
    height: 20px;
    color: #ccc;
}

.search__select {
    position: absolute;
    text-align: right;
    top: 10px;
    right: 15px;
    font-family: var(--text-primary-font-family) !important;

}
.search__select select {
    font-family: var(--text-primary-font-family) !important;
    cursor: pointer;
    box-shadow: none !important;
    background: #fff !important;
}
.search__select select:focus {
    outline: none !important;
}

.navegation__menu .dropdown {
    margin-right: 2.2rem;
}
.navegation__menu .dropdown button {
    border-radius: 50% !important;
}
.navegation__menu .dropdown button img {
    position: absolute;
    top: 0;
    left: 0;
    width: 38px;
    height: 38px;
    object-fit: cover;
    border-radius: 50%;
}
.navegation__menu .dropdown button:focus {
    outline: none !important;
}

.navegation__menu .dropdown .dropdown-menu {
    margin: 10px 0 0;
}
.navegation__menu .dropdown .dropdown-menu-right {
    right: -20px;
}
.navegation__menu .dropdown .dropdown-menu .user__email {
    font-weight: var(--text-secondary-font-weigh);
}
.navegation__menu .dropdown .dropdown-menu .user_logout i {
    margin-left: 1rem;
}
.navegation__menu .dropdown .dropdown-menu > li > a {
    color: var(--primary-color-darken) !important;
    font-family: var(--text-primary-font-family);
    display: flex;
}
.sidebar-menu .dropdown{
    margin-top: 1.5rem;
    margin-left: 0.5rem;
}
/** Style header */
.header_iconshock {
    --header__title-font-family: var(--text-primary-font-family);
    --header__title-font-weight: var(--text-secondary-font-weight);
    --header__title-font-size: 3rem;

    --header__subtitle-font-family:  var(--text-primary-font-family);
    --header__subtitle-font-weight: var(--text-primary-font-weight);
    --header__subtitle-font-size: 2rem;

    --header__title-section-card-font-family: var(--text-primary-font-family);
    --header__title-section-card-font-weight: var(--text-secondary-font-weight);
    --header__title-section-card-font-size: var(--paragraphs-size-normal);

    --header__card-title-font-family: var(--text-primary-font-family);
    --header__card-title-font-weight: var(--text-primary-font-weight);
    --header__card-title-font-size: var(--paragraphs-size-small);


    --header-background-content: radial-gradient(
        77.64% 1602.47% at 32.14% 56.47%,
        #f9f9fb 0%,
        rgba(249, 249, 251, 0) 100%
    );

    --header-background-img: rgba(255, 160, 0, 1);
    --header-background-information-content: linear-gradient(
        to right,
        rgba(255, 236, 204, 0),
        rgba(255, 236, 204, 1),
        rgba(255, 236, 204, 0)
    );
}

.header__content {
    z-index: 9999;
    background: var(--header-background-content);
    position: sticky;
    overflow: hidden;
    width: 100%;
    left: 0;
}
.header__img-background {
    width: 100%;
    background: var(--header-background-img);
    opacity: 0.2;
    height: 100%;
    min-height: 100%;
    position: absolute;
}

.header__img {
    position: absolute;
    width: 100%;
    height: 100%;
}
.header__container {
    margin-top: 110px;
    margin-bottom: 40px;
}
.header__information {
    margin-top: 3rem;
    margin-bottom: 3rem;
}

.header__information-content {
    background-image: var(--header-background-information-content);
    max-width: 520px;
}
.header__title {
    background-image: var(--header-background-information-content);
    font-size: var(--header__title-font-size);
    font-weight: var(--header__title-font-weight);
    font-family: var(--header__title-font-family);
    line-height: var(--line-height);
    color: var(--primary-color-darken);
    letter-spacing: -0.02em;

}

.header__subtitle {
    background-image: var(--header-background-information-content);
    font-size: var(--header__subtitle-font-size);
    font-weight: var(--header__subtitle-font-weight);
    font-family: var(--header__subtitle-font-family);
    line-height: var(--line-height);
    letter-spacing: -0.02em;
    color: var(--primary-color-darken);
    margin-top: 2rem;

}

.header__subtitle a {
    color: var(--primary-color-darken);
    font-weight: var(--text-secondary-font-weight);
    font-family: var(--header__subtitle-font-family);
    font-size: var(--header__subtitle-font-size);
    line-height: var(--line-height);
    letter-spacing: -0.02em;
}
.header__subtitle a:hover {
    color: #ed206f !important;
}
.header__card-section-title {
    font-family: var(--header__title-section-card-font-family);
    font-weight: var(--header__title-section-card-font-weight);
    font-size: var(--header__title-section-card-font-size);
    color: var(--primary-color-darken);
    /* margin-left: 8rem;; */

}
.header__card-container {
    /* display: flex;
    justify-content: end; */

}
/* justify-content: center; */
.cards {
    align-items: start;
    display: grid;
    grid-gap: 22px;
    margin-top: 1.5rem;
    /* grid-template-columns: repeat(auto-fit, 280px); */
    grid-template-columns: repeat(auto-fill,minmax(280px, 1fr));
    /* justify-content: end; */
}
.card {
    background: #ffffff;
    box-shadow: 0px 8px 25px -5px rgba(0, 0, 0, 0.15);
    border-radius: var(--boxes-border-radius);
    width: 100%;
    max-width: 320px;

}
.card__content {
    display: flex;
    flex-wrap: nowrap;
    padding: 1.4rem;
}
.card__img {
    display: flex;
    justify-content: center;
}
.card__img img{
    border-radius: var(--boxes-border-radius);
    width: 42px;
    height: auto;
}
.card__title {
    font-family: var(--header__card-title-font-family);
    font-weight: var(--header__card-title-font-weight);
    font-size: var(--header__card-title-font-size);
    color: var(--grey-color-darken);
}

/** Style sidebar */
.sidebar__iconshock {
    top: 0px !important;
    z-index: 999999 !important;
    box-shadow: 0 8px 9px -5px rgba(0,0,0,.02),0 15px 22px 2px rgba(19,5,5,.04),0 6px 28px 5px rgba(0,0,0,.02)!important
}
.logo__sidebar {
    display: flex;
}
.sidebar__iconshock-mobile {
    width: 268px !important;
}

.sidebar__iconshock-toggle {
    display: none;
}
@media (max-width: 1426px) {
    .button__become-premium {
        display: none !important;
    }
}

@media screen and (max-width: 1200px) {
    .header__information-content {
        text-align: center;
        justify-content: center;
        display: flex;
        flex-direction: column;
        max-width: 100%;
    }
    .header__subtitle {
        text-align: center;
    }
    .header__card-section-title {
        justify-content: center;
        margin-top: 4rem;
        /* margin-left: 0rem; */
    }
    .cards {
        justify-items: center;
    }
}

@media (max-width: 1215px) {
    .navegation__link-start a {
        display: none !important;
    }
}
.show {
    top: 0px !important;
}
.sidebar__mobile div{
    width: 240px;
}
.sidebar__mobile {
    margin-top: 2rem;
}
.show__sidebar {
    display: flex !important;
}
@media screen and (max-width: 959px) {
    .ct-banner__image {
        display: none;
    }



}
@media (max-width: 768px) {
    .search__form-mobile {
        display: flex !important;
    }
    .navegation__image {
        display: flex ;
    }
    .logo_navegation {
        display: flex !important;
    }
    .navegation .dropdown {
        margin-top: 1.5rem;
    }
    .navegation .dropdown .dropdown-menu-right {
        right: 0px;
        left: 0px;
        min-width: 300px;
        margin-top: 2rem;
    }
    .navegation__link-start {
        flex-direction: column;
    }
    .navegation__link-end {
        flex-direction: column;

        display: flex;
        max-width: 202px;
        align-items: flex-start;
        margin-left: 0px;
    }
    .navegation__link-end a {
        margin-left: 0px;
        margin-top: 1.5rem;
    }
    .navegation__link-start a {
        display: flex !important;
    }
    .button__become-premium {
        display: flex !important;
    }
    .navegation__link {
        padding: 2rem;
        margin-top: 75px;
        display: flex;
        flex-flow: column;
        justify-content: space-evenly;
        align-items: flex-start;
        position: fixed;
        top: -100%;
        left: 0;
        width: 100%;
        height: 400 px;
        z-index: 1;
        background-color: #ffffff;
        display: none;
    }
    .navegation {
        margin-bottom: 0;
        justify-content: space-between;
    }

    .navegation__button--bar1,
    .navegation__button--bar2,
    .navegation__button--bar3 {
        width: 35px;
        height: 2px;
        background-color: var(--navegation__button-bar-color);
        margin: 7px 0;
        transition: 0.4s;
    }
    /* Rotate first bar */
    .change .navegation__button--bar1 {
        -webkit-transform: rotate(-45deg) translate(-7px, 6px);
        transform: rotate(-45deg) translate(-7px, 6px);
    }
    /* Fade out the second bar */
    .change .navegation__button--bar2 {
        opacity: 0;
    }
    /* Rotate last bar */
    .change .navegation__button--bar3 {
        -webkit-transform: rotate(45deg) translate(-7px, -8px);
        transform: rotate(45deg) translate(-6px, -7px);
    }
    .sidebar__iconshock-toggle {
        display: block ;
    }
    .search__form {
        /* width: 240px; */
        display: none;
    }
    .logo__sidebar {
        display: none;
    }
    .sidebar__iconshock {
        width: 262px !important;
        right: -290px;

    }
    .navegation__menu .dropdown .dropdown-menu-right {
        right: -140px;
    }
    .navegation__menu .dropdown .dropdown-menu {
        margin: 16px 0 0;
        width: 100%;
    }
    .navegation__menu .dropdown .dropdown-menu > li > a {
        white-space: break-spaces;
    }
    .navegation__menu .dropdown .dropdown-menu .user_logout {
        white-space: normal;
    }
    .header__container {
        margin-top: 90px;
    }

}

@media screen and (max-width: 790px) {
    .header__information-content {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    .header__title {
        font-size: 2.2rem;
    }
    .header__subtitle {
        font-size: var(--paragraphs-size-normal);
    }
    .header__subtitle a {
        font-size: var(--paragraphs-size-normal);
    }
    .header__card-section-title {
        margin-top: 4rem;
    }
}

@media (max-width: 400px) {
    .search__select {
        top: 6px;
    }
}

@media (max-width: 600px) {
    .ct-banner__title {
        font-size: 2rem !important;
    }
    .ct-banner__subtitle {
        font-size: 1.4rem;
    }

    .ct-banner__button {
        font-size: 1.8rem;
    }

    .ct-banner-content {
        padding: 0px 32px;
    }

    .ct-banner__button .icon {
        margin-top: 0rem !important;
    }
    .search__form-mobile {
        width: 118px;
    }

}