/* 3D Animatics */

@font-face {
    font-family: 'Poppins', sans-serif;
    src: url('../fonts/Poppins/Poppins-Regular.ttf') format('truetype');
}

 :root {
    /* colors */
    --main-color: #ea463d;
    --second-color: #6A2696;
    --third-color: #FFBF00;
    --fourth-color: #83D302;
    --fifth-color: #00BDD6;
    /* soft-colors */
    --main-color-soft: #ffe4e2;
    --second-color-soft: #f0d9ff;
    --third-color-soft: #fff1c8;
    --fourth-color-soft: #f0ffd8;
    --fifth-color-soft: #d2faff;
    /* hovers */
    --main-hover-color: #762723;
    --second-hover-color: #40175b;
    --third-hover-color: #a07f1c;
    --fourth-hover-color: #4e6f18;
    --fifth-hover-color: #125159;
    /* hover */
    --hover-main-color: #451664;
    --hover-second-color: #2a6a97;
    --hover-third-color: #ca873b;
    --hover-fourth-color: #989b9e;
    --hover-fifth-color: #e0c25f;
    /* neutral colors */
    --white-color: #fff;
    --light-color: #e6e6e6;
    --gray-color: #999999;
    --dark-color: #333;
    --hard-dark-color: #000;
    /* bg-colors */
    --bg-main-color: #00c492;
    --bg-second-color: #e1ffea;
    --bg-light-second-color: #eefff3;
    --bg-third-color: #7AFADA;
    --bg-fourth-color: #FA997A;
    --bg-fifth-color: #AD5032;
    /* bg-neutral colors */
    --bg-white-color: #fff;
    --bg-light-color: #e6e6e6;
    --bg-gray-color: #999999;
    --bg-dark-color: #333;
    --bg-hard-dark-color: #000;
    /* other colors */
    --whats-color: #00f078;
    --whats-second-color: #128C7E;
    --whats-hover-color: #1b6c43;
    /* fonts */
    --poppins: 'Poppins', sans-serif;
    --size-10px: 10px;
    --size-12px: 12px;
    --size-14px: 14px;
    --size-16px: 16px;
    --size-18px: 18px;
    --size-20px: 20px;
    --size-24px: 24px;
    --size-28px: 28px;
    --size-34px: 34px;
    --size-38px: 38px;
    --size-46px: 46px;
    --size-54px: 54px;
    --size-64px: 64px;
    --size-72px: 72px;
    --size-88px: 88px;
    --box-shadow-1: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
    --box-shadow-2: rgba(0, 0, 0, 0.16) 0px 1px 4px, rgb(51, 51, 51) 0px 0px 0px 3px;
    --box-shadow-3: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}


/* @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700&display=swap'); */

img {
    pointer-events: none;
}


/* slick */

.carousel {
    width: 100%;
    margin: 0px auto;
}

.carousel .card {
    border: none;
}

.carousel .card-header {
    padding: 0;
    margin: 0;
}

.carousel .card-body a {
    color: var(--main-color);
    font-size: .8rem;
}

.carousel .card-title {
    font-size: 1rem;
}

.slick-slide {
    margin: 10px;
}

.slick-slide img {
    width: 100%;
    object-fit: cover;
    height: 180px;
    border-radius: 5px;
}

.slick-prev,
.slick-next {
    display: none;
}


/* Arrows */

.slick-prev,
.slick-next {
    font-size: 0;
    line-height: 0;
    position: absolute;
    top: 50%;
    display: none;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    padding: 0;
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    background: transparent;
}

.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus {
    color: transparent;
    outline: none;
    background: transparent;
}

.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before {
    opacity: 1;
}

.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before {
    opacity: .25;
}

.slick-prev:before,
.slick-next:before {
    font-family: 'slick';
    font-size: 20px;
    line-height: 1;
    opacity: .75;
    color: white;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.slick-prev {
    left: -25px;
}

[dir='rtl'] .slick-prev {
    right: -25px;
    left: auto;
}

.slick-prev:before {
    content: '←';
}

[dir='rtl'] .slick-prev:before {
    content: '→';
}

[dir='rtl'] .slick-next {
    right: auto;
    left: -25px;
}

.slick-next:before {
    content: '→';
}

[dir='rtl'] .slick-next:before {
    content: '←';
}


/* Dots */

.slick-slider {
    margin-bottom: 30px;
}

.slick-dots {
    position: absolute;
    bottom: -45px;
    display: block;
    width: 100%;
    padding: 0;
    list-style: none;
    text-align: center;
}

.slick-dots li {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 0 5px;
    padding: 0;
    cursor: pointer;
}

.slick-dots li button {
    font-size: 0;
    line-height: 0;
    display: block;
    width: 20px;
    height: 20px;
    padding: 5px;
    cursor: pointer;
    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}

.slick-dots li button:hover,
.slick-dots li button:focus {
    outline: none;
}

.slick-dots li button:hover:before,
.slick-dots li button:focus:before {
    opacity: 1;
}

.slick-dots li button:before {
    font-family: 'slick';
    font-size: 6px;
    line-height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    content: '•';
    text-align: center;
    opacity: .25;
    color: black;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.slick-dots li.slick-active button:before {
    opacity: .75;
    color: black;
}


/* blog index */

.parent-event-index {
    position: relative;
    transition: .3s ease-in-out;
}

.grid-blog-index {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 2rem;
    margin: 50px 0;
}

.img-event-index {
    position: relative;
}

.img-event-index img {
    display: inline-block;
    width: 100%;
    border-radius: 5px;
    object-fit: cover;
    transition: .4s ease-in-out;
}

.card-event-index {
    opacity: 0;
    transition: .4s ease-in-out;
}

.parent-event-index:hover .img-event-index img {
    box-shadow: var(--box-shadow-3);
    transform: translateY(-10px);
    filter: brightness(.5);
}

.parent-event-index:hover .card-event-index {
    opacity: 1;
}

.flex-event-index {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    bottom: 2rem;
    left: 1rem;
}

.category-event-index {
    font-weight: 300;
    text-transform: uppercase;
    font-size: 12px;
    color: #f9f9f9;
    transition: .4s ease-in-out;
}

.title-event-index {
    font-weight: 500;
    font-size: 1rem;
    text-transform: uppercase;
    color: var(--white-color);
    transition: .4s ease-in-out;
}

.release-event-index {
    font-weight: 300;
    text-transform: uppercase;
    font-size: 12px;
    color: #f9f9f9;
    transition: .4s ease-in-out;
    font-style: italic;
}

.description-blog * {
    font-size: 14px !important;
}

.title-blog-index * {
    color: #333 !important;
}

#blog-content .card-title a,
#myItem .card-title a {
    color: #333 !important;
}


/* index testimonials */

.flex-idx-testimonial {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 1rem;
}


/* testimonials */

.register-format {
    font-size: var(--font-14px);
    color: #878787;
    font-style: italic;
}

.stars-icons {
    color: var(--third-color);
}

#getTestimonials {
    position: relative;
}

.flex-testimonial {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 50px 0;
}

.testimonial-card {
    margin: 20px 0;
    display: flex;
    flex-direction: column;
    padding: 25px;
    box-shadow: var(--box-shadow-3);
    border-radius: 0px 50px 0px 50px;
    text-align: center;
    background-color: var(--white-color);
    height: auto;
    justify-content: space-around;
}


/* testimonial in class */

.wp-grp-main,
.wp-class-testimonials {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin: 1rem 0;
}

.wp-grp-main .wp-sub-grp {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .8rem;
}

.wp-grp-main .wp-sub-grp .tst-tt {
    font-size: .813rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
}

.wp-grp-main .wp-sub-grp .tst-date {
    font-size: .7rem;
    font-style: italic;
    color: gray;
}

.wp-class-testimonials .tst-rkn {
    color: #f2c80f;
}

.wp-class-testimonials .tst-desc {
    font-size: .813rem;
}

.tst-btn {
    font-size: .8rem;
}


/* grid-event-index */

.grid-event-index {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 2rem;
}


/* testimonial-card */

.testimonial-card p {
    font-size: 16px !important;
    line-height: 1.5;
}


/* preloader */

.preloader {
    position: fixed;
    z-index: 99999;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: #fff;
    transition: 1s 0.4s;
}

.spinner {
    content: '';
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 8%;
    height: 10%;
    position: absolute;
    background: url("../images/logo-animation-gif.gif");
    background-size: cover;
    background-position: center;
    /* -webkit-animation: fadein .8s ease-in alternate infinite;
    -moz-animation: fadein .8s ease-in alternate infinite;
    animation: fadein .8s ease-in alternate infinite; */
}

@-webkit-keyframes fadein {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-moz-keyframes fadein {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fadein {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

a.pdf_url[href='admin/pdf/eventos/'] {
    display: none;
}

body {
    font-family: var(--poppins);
    overflow-x: hidden;
}

.main-color {
    color: var(--main-color);
}

.second-color {
    color: var(--second-color);
}

.third-color {
    color: var(--third-color);
}

.fourth-color {
    color: var(--fourth-color);
}

.fifth-color {
    color: var(--fifth-color);
}

#bg-light {
    background: #EEF0F8;
}

.bg-parallax-11 h5 {
    color: var(--white-color);
    font-style: italic;
    font-weight: 300;
    font-size: 24px !important;
}

.grid-two {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 2rem;
}


/* grid page */

.post-grid .date-div {
    background-color: var(--third-color);
    padding: 0px 20px;
    font-size: 14px;
}

.post-grid h5 * {
    color: var(--main-color) !important;
    padding: 5px 0px;
}

.post-grid .img-hover-zoom {
    height: 100%;
    overflow: hidden;
}

.post-grid .img-hover-zoom img {
    transition: transform .5s ease;
    width: 100%;
    height: 150px;
    object-fit: cover;
}

.post-grid .img-hover-zoom:hover img {
    transform: scale(1.1);
}

.post-grid .btn-one {
    background-color: var(--main-color);
    color: var(--white-color);
}

.btn-teacher {
    background-color: var(--second-color);
    color: var(--white-color);
}

.btn-teacher:hover,
.btn-teacher:focus,
.btn-teacher:active {
    background: none;
    border: 1px solid var(--second-color);
    color: var(--second-color);
}

.btn-clase-muestra {
    background-color: var(--third-color);
    padding: 10px;
    border-radius: 10px;
    color: var(--second-color);
    font-weight: 500;
    transition: .5s ease-in-out;
}

.btn-clase-muestra:hover,
.btn-clase-muestra:focus,
.btn-clase-muestra:active {
    background: none;
    border: 1px solid var(--third-color);
    color: var(--white-color);
}


/* grid services */

.grid-services .card-1 h2 {
    font-size: var(--size-18px) !important;
    padding: 18px 0;
}

.grid-services .card-1 p {
    font-size: var(--size-16px);
    line-height: 1.5;
}

.date-event-start {
    position: relative;
    top: 0px;
    background-color: var(--main-color);
    padding: 5px;
    font-size: 18px;
    width: 100%;
    color: var(--white-color);
}

.grid-services .card-1 a {
    color: var(--second-color);
}


/* simple pagination */

.simple-pagination ul {
    padding: 0;
    list-style: none;
    text-align: center;
    margin-left: 10px;
}

.simple-pagination li {
    display: inline-block;
    margin: 2px;
}

.simple-pagination li a,
.simple-pagination li span {
    display: block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    background-color: #fff;
    text-decoration: none;
    color: var(--main-color);
    ;
    border-radius: 4px;
    margin: 5px;
    box-shadow: inset 0 5px 10px rgba(0, 0, 0, .1), 0 2px 5px rgba(0, 0, 0, .2);
    transition: all .5s ease;
}

.simple-pagination li a:hover {
    background: var(--main-color);
    color: #fff;
}

.simple-pagination .current {
    color: #fff;
    background-color: var(--main-color);
    border-color: rgb(255, 255, 255);
    cursor: pointer;
}

.simple-pagination .prev.current,
.simple-pagination .next.current {
    background: var(--main-color);
    ;
    border: none;
}

.cupo-lleno-preview {
    background-color: var(--yellow-color);
    color: rgb(100, 89, 26) !important;
    font-weight: 700;
    text-align: center;
    padding: 5px;
    width: 30%;
    position: absolute;
    top: 0;
}

.cupo-lleno-prox {
    background-color: #68ff89;
    color: rgb(26, 100, 38) !important;
    font-weight: 700;
    text-align: center;
    padding: 5px;
    width: 30%;
    position: absolute;
    top: 0;
}

.cupo-lleno-index {
    background-color: var(--yellow-color);
    ;
    color: rgb(100, 89, 26) !important;
    font-weight: 400;
    text-align: center;
    padding: 5px;
    width: 30%;
    position: absolute;
    top: 0;
    z-index: 999;
}

.cupo-lleno-index-prox {
    background-color: #68ff89;
    color: rgb(26, 100, 38) !important;
    font-weight: 400;
    text-align: center;
    padding: 5px;
    width: 30%;
    position: absolute;
    top: 0;
    z-index: 999;
}


/* flex-contact */

.flex-contact {
    margin: 20px 0px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.flex-contact div {
    margin: 0 20px;
}

.flex-contact .content-1,
.flex-contact .content-2,
.flex-contact .content-3,
.flex-contact .content-4 {
    width: 150px;
    text-align: center;
    border-radius: 5px;
}

.flex-contact .content-1 a,
.flex-contact .content-2 a,
.flex-contact .content-3 a,
.flex-contact .content-4 a {
    text-decoration: none;
    color: var(--white-color);
}

.flex-contact .content-1 {
    background-color: var(--main-color);
    color: var(--white-color);
}

.flex-contact .content-2 {
    background-color: var(--second-color);
    color: var(--white-color);
}

.flex-contact .content-3 {
    background-color: var(--third-color);
    color: var(--white-color);
}

.flex-contact .content-4 {
    background-color: var(--fourth-color);
    color: var(--white-color);
}

.flex-contact .contact-1 a,
.flex-contact .contact-2 a,
.flex-contact .contact-3 a,
.flex-contact .contact-4 a {
    color: var(--hard-dark-color);
}

.contact-1 i {
    color: var(--second-color);
}

.contact-2 i {
    color: var(--fifth-color);
}

.contact-3 i {
    color: var(--main-color);
}

.contact-4 i {
    color: var(--whats-hover-color);
}


/* notice page */

.head-title {
    margin: 10px 0;
    font-size: .8rem;
    text-transform: uppercase;
    font-weight: 600;
    margin: 5px 0;
}

.head-title a {
    color: var(--hard-dark-color);
}

.grid-notice {
    margin-top: 3.5rem;
    display: grid;
    grid-gap: 2rem;
    grid-template-columns: 30% auto;
}

.grid-notice .content-1 h1 {
    font-size: 24px;
}

.grid-notice .content-1 i {
    color: var(--main-color);
}

.grid-notice .notice-1 .content-2 img,
.grid-notice .notice-2 .content-4 img {
    width: 100% !important;
}

.grid-notice .content-3 ul {
    list-style: none;
    padding: 0px;
}

.grid-notice .content-3 .btn {
    font-size: 12px;
}

.grid-notice .content-4 p,
.grid-notice .content-4 span,
.grid-notice .content-4 li,
.grid-notice .content-4 a {
    font-size: 14px !important;
    line-height: 1.5;
    margin: 0;
}

.grid-notice .content-4 .phrase span {
    color: var(--main-color) !important;
    font-size: 18px !important;
}

.grid-notice .content-5 img {
    width: 100%;
}

.grid-notice .content-5 small {
    font-size: .7rem;
    line-height: 1;
    font-style: italic;
    color: gray;
}


/* clases detail */

.bg-clases {
    background-color: white;
    padding: 10px;
}

.event-details .content-1 h3 {
    font-weight: 400;
}

.event-details .content-1 i {
    color: var(--main-color);
}

.event-details .content-1 p {
    color: #717171;
    font-weight: 300;
}

.event-details .content-2 img {
    width: 100%;
    height: 450px;
    object-fit: cover;
}

.event-details .img-hover-zoom {
    height: auto;
    overflow: hidden;
}

.event-details .img-hover-zoom img {
    transition: transform .5s ease;
    width: 100%;
}

.event-details .img-hover-zoom:hover img {
    transform: scale(1.1);
}

.event-details .content-3 {
    margin: 20px 0px;
}

.event-details .content-3 ul {
    text-decoration: none;
    list-style: none;
    padding: 0;
}

.event-details .content-4 ul {
    list-style: circle;
}

.event-details .content-4 ol {
    list-style: decimal;
}

.event-details .content-4 p,
.event-details .content-4 span,
.event-details .content-4 li,
.event-details .content-4 a {
    font-size: 16px !important;
    margin: 0;
}

.event-details .content-4 iframe {
    width: 100%;
}

.sticky-section {
    position: sticky;
    top: 10px;
}


/* grid class */

.grid-class {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 2rem;
    margin: 1rem 0;
}

.grid-class .cc-card {
    padding: 10px;
}

.grid-class .cc-card,
.grid-class .cc-card .card-img,
.grid-class .cc-card .card-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: .5rem;
}

.grid-class .cc-card .card-img img {
    object-fit: cover;
    object-position: center;
    border-radius: 5px;
    width: 100%;
    height: 200px;
}

.grid-class .cc-card .card-content .title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--second-color);
}

.grid-class .cc-card .card-content .stars {
    font-size: .8rem;
    font-weight: 600;
    color: var(--third-color);
}

.grid-class .cc-card .card-content .subtitle {
    font-size: .8rem;
    color: #8d8d8d
}

.grid-class .cc-card .card-content .button {
    margin: 1rem 0;
}

.grid-class .cc-card .card-content .button a {
    background-color: #ed145b;
    color: white;
    font-size: .8rem;
    padding: 10px 20px;
    border-radius: 5px;
}


/* class detail right navbar */

.class-grid-content {
    position: relative;
    top: 0;
    display: grid;
    grid-template-columns: 70% auto;
    grid-gap: 2rem;
}

.class-grid-content .content-1 h1 {
    font-size: 1.5rem;
}


/* navbar-right-class */

.navbar-right-class {
    position: sticky;
    top: 10px;
    display: flex;
    flex-direction: column;
}

.class-info-content {
    display: flex;
    flex-direction: column;
    padding-top: 20px;
}

.class-img-logo img {
    width: 20%;
}

.class-info-ste {
    margin: 20px 0;
}

.class-info-ste .title {
    font-weight: 600;
    text-transform: uppercase;
    font-size: .9rem;
}

.class-info-ste .about,
.class-info-ste .dates-class {
    font-size: .8rem;
    margin: 10px 0;
    text-align: justify !important;
}

.class-info-ste ul {
    list-style-type: none;
    padding: 0;
    margin: 10px 0;
}

.class-info-ste a {
    color: var(--hard-dark-color);
    font-size: .8rem;
}


/* related-class */

.related-class span {
    margin: 20px 0;
    font-weight: 600;
    text-transform: uppercase;
    font-size: .9rem;
}


/* class-related-content */

.class-related-content {
    display: flex;
    flex-direction: column;
    padding-top: 20px;
    position: sticky;
    top: 89px;
}

.flex-related-class {
    display: flex;
    flex-direction: column;
    padding-top: 20px;
}

.card-class-related {
    display: grid;
    grid-template-columns: 30% auto;
    grid-gap: 1rem;
    margin: 10px 0;
    transition: transform .5s ease;
}

.card-class-related:hover span {
    color: var(--main-color);
}

.img-related-class {
    overflow: hidden;
    height: auto;
}

.img-related-class img {
    width: 100%;
    border-radius: 5px;
    transition: transform .5s ease;
}

.img-related-class:hover img {
    transform: scale(1.1);
}

.info-related-class span {
    font-weight: 500;
    text-transform: uppercase;
    font-size: .8rem;
    color: var(--hard-dark-color);
}

.reference-social-media span {
    font-size: 12px;
    text-transform: uppercase;
}


/* general */

.btn-outline-main {
    border: 1px solid var(--main-color) !important;
    color: var(--main-color) !important;
}

.btn-outline-main:active,
.btn-outline-main:hover,
.btn-outline-main:focus {
    background-color: transparent;
    border: 1px solid var(--main-color);
    color: var(--main-hover-color);
}

.btn-outline-whatsApp {
    border: 1px solid var(--whats-second-color) !important;
    color: var(--whats-second-color) !important;
}

.btn-outline-whatsApp:active,
.btn-outline-whatsApp:hover,
.btn-outline-whatsApp:focus {
    background-color: transparent;
    border: 1px solid var(--whats-second-color);
    color: var(--whats-hover-color);
}

.btn-find {
    background-color: #65a2ff !important;
    color: var(--white-color) !important;
}

.btn-find:active,
.btn-find:hover,
.btn-find:focus {
    background-color: transparent;
    border: 1px solid #65a2ff;
    color: var(--whats-hover-color);
}

.btn-whatsApp {
    background-color: var(--whats-color) !important;
    color: var(--white-color) !important;
}

.btn-whatsApp:active,
.btn-whatsApp:hover,
.btn-whatsApp:focus {
    background-color: transparent;
    border: 1px solid var(--whats-color);
    color: var(--whats-hover-color);
}

#navbar-two {
    position: relative;
    background-color: var(--second-color);
    color: var(--white-color) !important;
    top: 70px;
    z-index: 9;
}

.navbar-two {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    margin: 0;
    padding: 12px;
    height: 50px;
}

.navbar-two .content-1 b {
    color: var(--third-color) !important;
}

.navbar-two .content-2 {
    display: flex;
}

.navbar-two .content-2 i {
    color: var(--white-color);
    margin: 0 5px;
}

.navbar-two ul {
    display: flex;
    text-decoration: none;
    list-style: none;
    flex-direction: row;
    align-items: center;
    gap: .5rem;
    align-content: center;
}

.bg-parallax-11 {
    background-image: linear-gradient(to bottom, rgba(36, 36, 36, 0.52), rgba(0, 0, 0, 0.73)), url('../admin/images/gallery/IMG_3090.jpg');
    /* background: url(../images/bg8.jpg); */
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
    height: 200px;
}

.bg-parallax-11 .col-md-12 {
    padding: 50px;
}

.phrase {
    /* text-block text-white text-center p-l-100 p-r-100 relative text-lead */
    color: #fff;
    position: relative;
    font-family: var(--poppins);
    line-height: 1.5;
    font-size: 2em;
}

.phrase span {
    /* text-block text-white text-center p-l-100 p-r-100 relative text-lead */
    color: #FFBF00;
}

.image-container {
    position: relative;
    /* cursor: pointer; */
}

.image-container img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    object-position: top;
}


/* suzuki page */

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

.flex-suzuki>div {
    margin: 5px;
}

.flex-suzuki>img {
    width: 100%;
}

.flex-suzuki h3 {
    color: var(--main-color);
}

.suzuki-1 p {
    font-size: var(--size-16px);
    text-align: justify;
}

.flex-suzuki .img-hover-zoom {
    height: auto;
    overflow: hidden;
}

.flex-suzuki .img-hover-zoom img {
    transition: transform .5s ease;
    width: 100%;
}

.flex-suzuki .img-hover-zoom:hover img {
    transform: scale(1.1);
}


/* about */

.grid-about {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 10px;
}

.flex-about {
    display: flex;
    justify-content: space-around;
}

.flex-about>div {
    margin: 5px;
}

.flex-about img {
    width: 100%;
}

.flex-about h3,
.grid-about h3 {
    color: var(--main-color);
}

.flex-about p,
.grid-about p {
    font-size: var(--size-16px);
    text-align: justify;
}

.flex-about .img-hover-zoom {
    height: auto;
    overflow: hidden;
}

.flex-about .img-hover-zoom img {
    transition: transform .5s ease;
    width: 100%;
}

.flex-about .img-hover-zoom:hover img {
    transform: scale(1.1);
}


/* gallery */

.scrollmenu {
    background-color: var(--white-color);
    overflow: auto;
    white-space: nowrap;
    box-shadow: var(--box-shadow-3);
    margin: 20px 0;
    padding: 30px;
    border-radius: 8px;
}

.scrollmenu div {
    display: inline-block;
    color: var(--main-color) !important;
    text-align: center;
    padding: 10px !important;
    text-decoration: none;
    cursor: pointer;
}

.grid-gallery {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-gap: 2rem;
    margin: 20px 0px;
    padding: 20px;
    box-shadow: var(--box-shadow-3);
    border-radius: 10px;
}

.gallery-2 img {
    width: 300px;
    height: 300px;
    object-fit: cover;
}

.grid-gallery>div {
    cursor: pointer;
}

.bg-parallax-2 {
    background-image: linear-gradient(to bottom, rgba(36, 36, 36, 0), rgba(0, 0, 0, 0.303)), url('../images/bg-3.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.bg-parallax-2 .head-1 {
    color: var(--white-color);
    position: relative;
    margin-top: 90px;
}

.bg-parallax-2 .head-1 h1 {
    font-size: 1.5rem;
}

#programas .zoom-gallery {
    height: 250px;
    overflow: hidden;
}

#programas .zoom-gallery img {
    transition: transform .5s ease;
    height: 250px;
}

#programas .zoom-gallery:hover img {
    transform: scale(1.1);
}

.flex-content-gallery {
    margin: 50px 0px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.flex-content-gallery>div {
    cursor: pointer;
    margin: 0px 30px;
    padding: 0px 30px;
    border: 1px solid var(--main-color);
    border-radius: 10px;
    color: var(--main-color);
}

.flex-content-gallery>div:hover {
    font-weight: bold;
}

.grid-promotions {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    margin: 10px 0;
}

.grid-promotions img {
    width: 100%;
}

.navbar-nav li {
    font-size: var(--size-14px);
}

.footer li {
    font-size: .8rem;
}

footer .footer-rules-body {
    display: flex;
    background-color: #4c007b;
    padding: 5px;
    justify-content: center;
}

footer .footer-rules * {
    color: #8d8d8d !important;
}

.mouse-down {
    margin: 30px 0;
    cursor: pointer;
}

.mouse-down img {
    width: 70px;
    color: var(--white-color);
    animation: updown 2s linear infinite;
    --webkit-animation: updown 2s linear infinite;
    filter: opacity(0.7);
}

.cookies-body {
    display: flex;
    flex-direction: column;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.aviso-de-privacidad-body {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.cookies-body .title {
    font-size: clamp(1.8rem, 2.5vw, 2.8rem);
    text-align: center;
    margin: 2rem 0;
    text-transform: uppercase;
}

.cookies-body p {
    font-size: max(1.2rem, 1.2vw);
    text-align: justify;
}


/* teacher data */

.teachers-body {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 1rem;
    margin: 3rem 0;
}

.teachers-body .card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    background-color: white;
    padding: 10px;
    border: none;
    border-radius: 5px;
    transition: .3s ease-in-out;
    gap: 1rem;
    cursor: pointer;
}

.teachers-body .card .teach-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.teachers-body .card:hover {
    box-shadow: var(--box-shadow-3);
    transform: translateY(-10px);
}

.teachers-body .card img {
    width: 190px;
    height: 190px;
    object-fit: cover;
    object-position: top;
    border-radius: 50%;
    margin-bottom: 2rem;
}

.teachers-body .card span {
    font-size: .8rem;
    text-align: left;
}

.teachers-body .card .name {
    font-size: 1rem !important;
    text-align: center;
}

.teachers-body .card .instruments {
    font-weight: 600;
    font-size: .7rem;
}

.teachers-body .card .more {
    color: gray;
    font-size: .8rem;
    margin-top: 3rem;
}

.teachers-body .card:nth-child(3) {
    order: 1;
}

.teacher-border-1 .teach-img img,
.teacher-border-10 .teach-img img,
.teacher-border-11 .teach-img img {
    border: 5px solid var(--main-color);
}

.teacher-border-2 .teach-img img,
.teacher-border-9 .teach-img img,
.teacher-border-12 .teach-img img {
    border: 5px solid var(--second-color);
}

.teacher-border-4 .teach-img img,
.teacher-border-8 .teach-img img,
.teacher-border-13 .teach-img img {
    border: 5px solid var(--third-color);
}

.teacher-border-3 .teach-img img,
.teacher-border-5 .teach-img img,
.teacher-border-14 .teach-img img {
    border: 5px solid var(--fourth-color);
}

.teacher-border-5 .teach-img img,
.teacher-border-6 .teach-img img,
.teacher-border-15 .teach-img img {
    /* border: 5px solid var(--fifth-color); */
    border: 5px solid var(--main-color);
}

.teacher-border-7 .teach-img img,
.teacher-border-12 .teach-img img,
.teacher-border-16 .teach-img img {
    border: 5px solid var(--fourth-color);
}

.teacher-border-11 .teach-img img,
.teacher-border-13 .teach-img img,
.teacher-border-17 .teach-img img {
    border: 5px solid var(--fifth-color);
}

#promotionsSection .lg-promo {
    display: block;
}

#promotionsSection .xs-promo {
    display: none;
}


/* program event */

.bg-xmas {
    /* bg winter */
    /* background-color: #0e1133;  */
    /* bg spring */
    background: rgb(121, 15, 255);
    background: linear-gradient(176deg, rgba(121, 15, 255, 1) 0%, rgba(61, 4, 85, 1) 99%);
    z-index: 1;
}

.bg-xmas .img-xmas {
    position: relative;
    z-index: 0;
}

.bg-xmas .img-xmas img {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 290px;
    opacity: .4;
}

.wp-main-title {
    display: flex;
    flex-direction: column;
    margin: 2rem 0;
    text-align: center;
}

.wp-main-title .main-title {
    font-size: 1.3rem;
    font-weight: 500;
    color: white;
}

.wp-program p {
    color: white;
}

.wp-program {
    z-index: 1;
}

.wp-program .coming-soon {
    color: white;
    font-size: 2rem;
    font-weight: 400;
    text-align: center;
    margin: 3rem 0;
}

.wp-program .maps * {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: rgb(78, 240, 255);
    font-size: .9rem;
    font-weight: 400;
    padding: 10px 20px;
}

.wp-program .program-event {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    margin: 1rem 0;
    color: white;
}

.wp-program .program-event .pre-title {
    font-size: .7rem;
    font-weight: 500;
    margin-top: 2rem;
}

.wp-program .program-event .title {
    font-size: 1.5rem;
    text-transform: uppercase;
    margin: 0;
    color: #00BDD6;
}

.wp-program .program-event .content {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    margin: 1rem 0;
}

.wp-program .program-event .content .subtitle {
    font-size: .9rem;
    font-weight: 600;
}

.wp-program .program-event .content .content-flex {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    transition: ease-in-out .3s;
}

.wp-program .program-event .content .content-flex:hover {
    /* background-color: #f1f5f9; */
    color: #00BDD6;
}

.wp-program .program-event .content .note {
    font-style: italic;
    font-size: .8rem;
    color: rgb(210, 240, 255);
}

.wp-program .program-event .content .teachers {
    font-style: italic;
    font-size: .8rem;
    color: rgb(62, 62, 62);
}

.wp-program .program-event .content .description {
    margin: .8rem;
}

.wp-program .program-event .ul-none {
    list-style-type: none;
}


/* event program 2025 */

.program-header a {
    color: rgb(23, 201, 255);
    font-size: .813rem;
}

.content-data {
    font-size: .813rem;
    color: rgb(224, 210, 255);
}


/* sitemap */

.wp-sitemap {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 1rem;
}

.wp-sitemap .ctn-sitemap {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.wp-sitemap .ctn-sitemap .title {
    font-size: 1.2rem;
    color: #333;
    text-transform: uppercase;
    font-weight: 600;
}

.wp-sitemap .ctn-sitemap ul {
    margin: 0;
    padding: 0;
}

.wp-sitemap .ctn-sitemap ul li {
    list-style-type: none;
}

.wp-sitemap .ctn-sitemap ul li a {
    font-size: .813rem;
    color: #333;
    text-decoration: none;
}


/* teachers into landing class */

.wp-card {
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.wp-card .wp-content .title {
    font-size: 1rem;
}

.wp-card .card {
    border: none;
    margin: 1rem 0;
}

.wp-card .card .wp-img img {
    width: 40px;
    height: 40px;
    border-radius: 50px;
    object-fit: cover;
    object-position: top;
}

.wp-card .card span {
    font-size: .813rem;
}


/* youtube chanel */

.parent-yt {
    display: flex;
    justify-content: center;
    align-items: center;
}

.wp-yt {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 5rem 0;
    max-width: 60%;
    border-radius: 1rem;
    box-shadow: var(--box-shadow-3);
}

.wp-yt .card-yt {
    display: grid;
    grid-template-columns: 30% auto;
    grid-gap: 1rem;
    padding: 2rem;
    align-items: center;
}

.wp-yt .card-yt .sub-card-yt {
    position: relative;
    display: flex;
    gap: 1rem;
    flex-direction: column;
}

.wp-yt .card-yt .sub-card-yt img {
    position: absolute;
    top: -100px;
}

.wp-yt .card-yt .sub-card-yt img {
    width: 180px;
}

.wp-yt .card-yt .sub-card-yt .title {
    font-size: 1.9rem;
    font-weight: 600;
    color: #333;
}

.wp-yt .card-yt .sub-card-yt .description {
    font-size: .9rem;
}

.wp-yt .card-btn {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    justify-content: center;
    margin: 3rem 0;
}

.wp-yt .card-btn .dt-btn-fb {
    color: white;
    background-color: #1877F2;
    padding: 10px;
    border-radius: 5px;
}

.wp-yt .card-btn .dt-btn-ig {
    color: white;
    background-color: #E4405F;
    padding: 10px;
    border-radius: 5px;
}

.wp-yt .card-btn .dt-btn-tk {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 2px;
    color: white;
    background-color: #282425;
    padding: 10px;
    border-radius: 5px;
}

.dt-btn-tk img {
    width: 15px;
    filter: invert(1) brightness(100%);
}

.wp-yt .card-btn .dt-btn-yt {
    color: white;
    background-color: #CD201F;
    padding: 10px;
    border-radius: 5px;
}


/* video banner */

.banner-section {
    position: relative;
    width: 100%;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.469);
}

.fullscreen-video-container {
    position: relative;
    top: 0;
    left: 0;
    width: 100vw;
    height: 90vh;
    overflow: hidden;
    z-index: -1;
}

.fullscreen-video-container video {
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    object-fit: cover;
    pointer-events: none;
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 0;
}

.overlay-text-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #fff;
    z-index: 1;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}

.overlay-text-container h1 {
    margin: 0;
    font-size: 3em;
    font-weight: 600;
}

.content-below-banner {
    padding: 20px;
    background-color: #fff;
    color: #333;
    position: relative;
    z-index: 2;
}

.txt-banner {
    margin: 20px auto;
    max-width: 800px;
    font-size: 1.2em;
    line-height: 1.5;
}

@media (max-width: 768px) {
    .overlay-text-container h1 {
        font-size: 1.5em;
    }
    .fullscreen-video-container {
        height: 50vh;
    }
    .txt-banner {
        display: inline;
    }
    .btn-clase-muestra {
        font-size: .7rem;
    }
    .overlay-text-container h1 {
        font-size: 1rem;
    }
    .main-grid .card-1 {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        height: 150px;
    }
    .txt-banner {
        max-width: 90%;
        font-size: 1em;
        font-size: .7rem !important;
    }
    /* teach index list */
    .teachers-body .card img {
        width: 120px;
        height: 120px;
        border-radius: 10%;
        margin-bottom: 0;
    }
    .teachers-body .card {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        gap: .6rem;
    }
    .teachers-body .card .teach-content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 5px;
    }
    .teachers-body .card span {
        font-size: .7rem;
        text-align: left;
    }
    .teachers-body .card .name {
        font-size: .813rem !important;
        text-align: left;
    }
    .teachers-body .card .instruments {
        font-weight: 600;
        font-size: .7rem;
    }
    .teachers-body .card .more {
        color: var(--main-color);
        font-size: .8rem;
        margin-top: 3rem;
    }
    .teacher-border-1 .teach-img img,
    .teacher-border-10 .teach-img img,
    .teacher-border-11 .teach-img img {
        border: none;
        border-left: 3px solid var(--main-color);
    }
    .teacher-border-2 .teach-img img,
    .teacher-border-9 .teach-img img,
    .teacher-border-12 .teach-img img {
        border: none;
        border-left: 3px solid var(--second-color);
    }
    .teacher-border-4 .teach-img img,
    .teacher-border-8 .teach-img img,
    .teacher-border-13 .teach-img img {
        border: none;
        border-left: 3px solid var(--third-color);
    }
    .teacher-border-3 .teach-img img,
    .teacher-border-5 .teach-img img,
    .teacher-border-14 .teach-img img {
        border: none;
        border-left: 3px solid var(--fourth-color);
    }
    .teacher-border-5 .teach-img img,
    .teacher-border-6 .teach-img img,
    .teacher-border-15 .teach-img img {
        border: none;
        border-left: 3px solid var(--main-color);
    }
    .teacher-border-7 .teach-img img,
    .teacher-border-12 .teach-img img,
    .teacher-border-16 .teach-img img {
        border: none;
        border-left: 3px solid var(--fourth-color);
    }
    .teacher-border-11 .teach-img img,
    .teacher-border-13 .teach-img img,
    .teacher-border-17 .teach-img img {
        border: none;
        border-left: 3px solid var(--fifth-color);
    }
}

@media (min-width: 1281px) {
    .fullscreen-video-container {
        height: 70vh;
    }
    .txt-banner {
        max-width: 900px;
    }
}


/*==== footer css lg ====*/

@keyframes updown {
    0% {
        transform: translateX(0) translateY(0);
    }
    50% {
        transform: translateX(0) translateY(-15px);
    }
    100% {
        transform: translateX(0) translateY(0);
    }
}


/* Prefijo para Webkit (Chrome, Safari) */

@-webkit-keyframes updown {
    0% {
        -webkit-transform: translateX(0) translateY(0);
    }
    50% {
        -webkit-transform: translateX(0) translateY(-15px);
    }
    100% {
        -webkit-transform: translateX(0) translateY(0);
    }
}

.flex-services .tt-class-music {
    margin-bottom: 1.5rem;
}

.flex-services .tt-class-music b {
    color: var(--second-color);
}

.xs-content {
    display: none;
}


/* FHD >= */

@media screen and (min-width: 1920px) {
    /* main lg*/
    #main {
        background-image: linear-gradient(to bottom, rgba(29, 22, 33, 0.902), rgba(0, 0, 0, 0.609)), url('../admin/images/gallery/IMG_3090.jpg');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 40%;
    }
}

@media screen and(min-width: 1400px) {
    /* Start Icons */
    .company-icon {
        display: none;
    }
}

@media screen and (min-width: 1200px) {
    .teachers-body .card img {
        width: 150px;
        height: 150px;
        object-fit: cover;
        object-position: top;
        border-radius: 50%;
        margin-bottom: 2rem;
    }
    .banner-section {
        max-height: 100vh;
    }
    /* sitemap */
    .wp-sitemap {
        grid-template-columns: repeat(3, 1fr);
    }
    .grid-notice .content-1 h3 {
        font-size: 16px;
    }
    .gallery-2 img {
        width: 250px;
        height: 250px;
        object-fit: cover;
    }
    .scrollmenu {
        background-color: var(--white-color);
        white-space: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        box-shadow: none;
        margin: 20px 0;
        padding: 10px;
        border-radius: 0px;
    }
    .scrollmenu div {
        display: inline-block;
        color: white;
        text-align: center;
        padding: 30px;
        text-decoration: none;
        cursor: pointer;
    }
    .grid-gallery {
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        grid-gap: 5px;
        margin: 20px 0px;
        padding: 20px;
        box-shadow: var(--box-shadow-3);
        border-radius: 10px;
    }
    .grid-gallery>div {
        cursor: pointer;
    }
    /* flex-contact */
    .flex-contact {
        margin: 20px 0px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .flex-contact div {
        margin: 0 8px;
    }
    .flex-contact .content-1,
    .flex-contact .content-2,
    .flex-contact .content-3,
    .flex-contact .content-4 {
        width: 150px;
        text-align: center;
        border-radius: 5px;
    }
    .flex-contact .content-1 a,
    .flex-contact .content-2 a,
    .flex-contact .content-3 a,
    .flex-contact .content-4 a {
        text-decoration: none;
        color: var(--white-color);
    }
    .flex-contact .content-1 {
        background-color: var(--main-color);
        color: var(--white-color);
    }
    .flex-contact .content-2 {
        background-color: var(--second-color);
        color: var(--white-color);
    }
    .flex-contact .content-3 {
        background-color: var(--third-color);
        color: var(--white-color);
    }
    .flex-contact .content-4 {
        background-color: var(--fourth-color);
        color: var(--white-color);
    }
    .flex-contact .contact-1 a,
    .flex-contact .contact-2 a,
    .flex-contact .contact-3 a,
    .flex-contact .contact-4 a {
        color: var(--hard-dark-color);
    }
    /* grid-three-columns */
    .grid-three-columns {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-column-gap: 20px;
        grid-row-gap: 20px;
    }
    .flex-three-columns {
        display: flex;
        flex-direction: column;
        width: auto;
    }
    .flex-three-columns .teacher-1 {
        text-align: center !important;
    }
    .flex-three-columns h4 {
        font-size: 1.1rem !important;
    }
    .img-hover-zoom {
        /* height: 400px; */
        overflow: hidden;
    }
    .img-hover-zoom img {
        transition: transform .5s ease;
        width: 100%;
    }
    .img-hover-zoom:hover img {
        transform: scale(1.1);
    }
    .teacher-1 {
        background-color: var(--main-color);
        color: var(--white-color);
        padding: 20px 0px;
        border-radius: 0 0 10px 10px;
    }
    .teacher-1 a {
        border: 1px solid var(--white-color);
        border-radius: 25px;
        color: white;
    }
    .teacher-1 a:hover {
        border: 1px solid var(--main-hover-color);
        border-radius: 25px;
        color: var(--ligting-color)
    }
    .teacher-2 {
        background-color: var(--second-color);
        color: var(--white-color);
        text-align: center;
        padding: 20px 0px;
        border-radius: 0 0 10px 10px;
    }
    .teacher-2 a {
        border: 1px solid var(--white-color);
        border-radius: 25px;
        color: #f9f9f9;
    }
    .teacher-2 a:hover {
        border: 1px solid var(--second-hover-color);
        border-radius: 25px;
        color: var(--ligting-color)
    }
    .teacher-3 {
        background-color: var(--third-color);
        color: var(--white-color);
        text-align: center;
        padding: 20px 0px;
        border-radius: 0 0 10px 10px;
    }
    .teacher-3 a {
        border: 1px solid var(--white-color);
        border-radius: 25px;
        color: #f9f9f9;
    }
    .teacher-3 a:hover {
        border: 1px solid var(--second-hover-color);
        border-radius: 25px;
        color: #f9f9f9;
    }
    .teacher-4 {
        background-color: var(--fourth-color);
        color: var(--white-color);
        text-align: center;
        padding: 20px 0px;
        border-radius: 0 0 10px 10px;
    }
    .teacher-4 a {
        border: 1px solid var(--white-color);
        border-radius: 25px;
        color: #f9f9f9;
    }
    .teacher-4 a:hover {
        border: 1px solid var(--second-hover-color);
        border-radius: 25px;
        color: #f9f9f9;
    }
    .teachers-grid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-gap: 1rem;
    }
    .teacher-5 {
        background-color: var(--fifth-color);
        color: var(--white-color);
        text-align: center;
        padding: 20px 0px;
        border-radius: 0 0 10px 10px;
    }
    .teacher-5 a {
        border: 1px solid var(--white-color);
        border-radius: 25px;
        color: #f9f9f9;
    }
    .teacher-5 a:hover {
        border: 1px solid var(--second-hover-color);
        border-radius: 25px;
        color: #f9f9f9;
    }
    /* grid four */
    .grid-four {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-gap: 1rem;
    }
    /* section 4 */
    .box-section-4 {
        text-align: center;
    }
    .box-section-4 h4 {
        font-size: var(--font-18px);
        text-transform: uppercase;
        color: var(--dark-color);
        letter-spacing: 2px;
        font-weight: 300;
        font-family: var(--poppins);
        padding: 10px 0px;
    }
    .box-section-4 h2 {
        font-size: 50px;
        font-family: var(--poppins);
        padding: 10px 0px;
    }
    .box-section-4 p {
        color: var(--dark-color);
        font-size: var(--font-18px);
        padding: 0px 200px;
        line-height: 1.9;
        font-weight: 300;
    }
    .button-whats {
        position: relative;
        bottom: 0;
    }
    .button-whats a {
        width: 100px;
        text-align: center;
        padding: 10px 20px;
        background-color: var(--whats-color);
        color: var(--white-color);
        border-radius: 50px;
        transition: .3s ease-in-out;
        font-weight: 500;
    }
    .button-whats a:hover,
    .button-whats a:focus,
    .button-whats a:active {
        background-color: transparent;
        border: 1px solid var(--whats-hover-color);
        color: var(--whats-hover-color);
    }
    .class h2 {
        font-weight: 400 !important;
    }
    .class b {
        color: var(--second-color);
    }
    /* grid-two-columns */
    .grid-two-columns {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-column-gap: 20px;
        grid-row-gap: 20px;
    }
    .image-content {
        position: relative;
    }
    .image-content img {
        width: 100%;
        object-fit: cover;
        height: 700px;
    }
    .flex-direction-columns {
        display: flex;
        flex-direction: column;
    }
    .flex-direction-columns .card-body {
        display: flex;
        position: relative;
    }
    .flex-direction-columns img {
        width: 60%;
    }
    .flex-direction-columns .card-1 p {
        font-size: 18px !important;
    }
    /* Start Icons */
    .company-icons {
        display: inline-block;
        height: 100%;
        position: relative;
        vertical-align: top;
    }
    .company-icon-container {
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-animation-direction: alternate;
        animation-direction: alternate;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        -webkit-animation-name: floating;
        animation-name: floating;
        -webkit-animation-play-state: running;
        animation-play-state: running;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
        background-color: #fff;
        background-position: center;
        background-repeat: no-repeat;
        /* border-radius: 50%;
box-shadow: 0 10px 40px 0 rgba(23, 28, 33, .13), 0 31px 13px 0 rgba(23, 28, 33, .05); */
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        opacity: 0.1;
        -webkit-transition: margin 1s cubic-bezier(.2, .6, .3, 1), opacity 2s ease;
        transition: margin 1s cubic-bezier(.2, .6, .3, 1), opacity 2s ease;
    }
    .company-icon-container {
        animation-duration: 4s;
        height: 144px;
        margin-left: 76px;
        margin-top: -25px;
        position: absolute;
        width: 144px;
    }
    @keyframes floating {
        0% {
            -webkit-transform: translateY(8px) rotate3d(0, 0, 1, 3deg);
            transform: translateY(8px) rotate3d(0, 0, 1, 3deg);
        }
        100% {
            -webkit-transform: translateY(-8px) rotate3d(0, 0, 1, 0deg);
            transform: translateY(-29px) rotate3d(0, 0, 1, 0deg);
            transform: translateX(-49px) rotate3d(0, 0, 1, 0deg);
        }
    }
    .bmw {
        -webkit-animation-delay: -3.4s;
        animation-delay: -3.4s;
        -webkit-animation-duration: 4s;
        animation-duration: 4s;
        height: 136px;
        margin-left: 1015px;
        margin-top: 624px;
        position: absolute;
        -webkit-transition-delay: .3s;
        transition-delay: .3s;
        width: 136px;
        color: aqua;
    }
    .intuit-big {
        -webkit-animation-delay: -2.4s;
        animation-delay: -2.4s;
        -webkit-animation-duration: 4s;
        animation-duration: 4s;
        background-image: url(../fonts/logo-intuit-preferred.svg);
        background-size: 100px;
        height: 122px;
        margin-left: 524px;
        margin-top: 265px;
        position: absolute;
        -webkit-transition-delay: .4s;
        transition-delay: .4s;
        width: 122px;
        color: blue;
    }
    .company-icon-container .company-icon.image {
        background-size: contain;
        background-position: center center;
        background-repeat: no-repeat;
    }
    .company-icon-container.samsung {
        -webkit-animation-delay: -.3s;
        animation-delay: -.3s;
        -webkit-animation-duration: 4s;
        animation-duration: 4s;
        height: 144px;
        margin-left: 302px;
        margin-top: 850px;
        position: absolute;
        -webkit-transition-delay: .5s;
        transition-delay: .5s;
        width: 144px;
        color: #00BDD6;
    }
    .company-icon-container.uber {
        -webkit-animation-delay: -3.9s;
        animation-delay: -3.9s;
        -webkit-animation-duration: 4s;
        animation-duration: 4s;
        height: 136px;
        margin-left: 500px;
        margin-top: 640px;
        position: absolute;
        -webkit-transition-delay: .8s;
        transition-delay: .8s;
        width: 136px;
        color: #228B22;
    }
    .company-icon-container.starz-new {
        -webkit-animation-delay: -.9s;
        animation-delay: -.9s;
        -webkit-animation-duration: 4s;
        animation-duration: 4s;
        height: 122px;
        margin-left: 515px;
        margin-top: 958px;
        position: absolute;
        -webkit-transition-delay: .7s;
        transition-delay: .7s;
        width: 122px;
        color: #83D302;
    }
    .company-icon-container.usbank {
        -webkit-animation-delay: -2.9s;
        animation-delay: -2.9s;
        -webkit-animation-duration: 4s;
        animation-duration: 4s;
        height: 122px;
        margin-left: 1108px;
        margin-top: 379px;
        position: absolute;
        -webkit-transition-delay: .6s;
        transition-delay: .6s;
        width: 100px;
        color: #83D302;
        display: none;
    }
    .company-icon-container.docusign {
        -webkit-animation-delay: -2.2s;
        animation-delay: -2.2s;
        -webkit-animation-duration: 4s;
        animation-duration: 4s;
        height: 104px;
        margin-left: -311px;
        margin-top: 309px;
        position: absolute;
        -webkit-transition-delay: .2s;
        transition-delay: .2s;
        width: 80px;
        color: #ee2309;
    }
    .company-icon-container.new-york-magazine {
        -webkit-animation-duration: 4s;
        animation-duration: 4s;
        height: 144px;
        margin-left: 76px;
        margin-top: 20px;
        position: absolute;
        width: 144px;
        color: #ee09c8;
    }
    .company-icon-container.microsoft {
        -webkit-animation-delay: -1.8s;
        animation-delay: -1.8s;
        -webkit-animation-duration: 4s;
        animation-duration: 4s;
        height: 147px;
        margin-left: 817px;
        margin-top: 38px;
        position: absolute;
        -webkit-transition-delay: .1s;
        transition-delay: .1s;
        width: 447px;
        color: #FFBF00;
    }
    .company-icon-link:hover .company-icon-container {
        background: #f7f7f7;
    }
    /* end icons bg */
    section p {
        font-size: 16px !important;
        font-weight: 400;
        line-height: 1.8;
    }
    /* postSlider */
    #postSlider .post-body h2 {
        color: var(--second-color);
    }
    #postSlider .post-body ul {
        padding: 0;
    }
    #postSlider .post-body ul>li {
        line-height: 2.2;
        list-style-type: none;
    }
    #postSlider .post-body ul>li>i {
        color: var(--whats-color);
    }
    /* main lg*/
    #main {
        background-image: linear-gradient(to bottom, rgba(29, 22, 33, 0.902), rgba(0, 0, 0, 0.609)), url('../admin/images/gallery/IMG_3090.jpg');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 40%;
    }
    .main-img {
        position: relative;
        top: calc(100% - 80px);
        animation-name: mainFloating;
        animation-duration: 3s;
        animation-iteration-count: infinite;
        animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
    }
    .main-img img {
        position: absolute;
        width: 100%;
    }
    .main-grid {
        display: grid;
        text-align: center;
        justify-items: center;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: 0;
        grid-column-gap: 0px;
        grid-row-gap: 0px;
        height: 650px;
        padding: 100px 0px;
    }
    .main-grid .card-1 {
        padding: 60px 0px;
        z-index: 9;
    }
    .main-grid .card-1 h1 {
        font-size: 48px !important;
        color: var(--white-color);
    }
    .main-grid .card-1 p {
        margin: 40px 0px;
        width: 80%;
        color: var(--white-color);
        transform: translate(15%, -15%);
    }
    .main-grid .card-2 .icon1 {
        position: absolute !important;
        top: 70px;
        left: 10px;
    }
    .main-grid .card-2 .icon1 img {
        width: 40px !important;
        animation-name: iconFloating;
        animation-duration: 3s;
        animation-iteration-count: infinite;
        animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
    }
    .main-grid .card-2 .icon2 {
        position: absolute !important;
        left: 50%;
        top: -70px;
    }
    .main-grid .card-2 .icon2 img {
        width: 50px !important;
        animation-name: icon2Floating;
        animation-duration: 3s;
        animation-iteration-count: infinite;
        animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
    }
    .main-grid .card-2 .icon3 {
        position: absolute !important;
        left: 80%;
        top: -20px;
    }
    .main-grid .card-2 .icon3 img {
        width: 30px !important;
        animation-name: icon2Floating;
        animation-duration: 3s;
        animation-iteration-count: infinite;
        animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
    }
    .main-grid .card-2 .icon4 {
        position: absolute !important;
        left: 60%;
        top: 190px;
    }
    .main-grid .card-2 .icon4 img {
        width: 60px !important;
        animation-name: icon2Floating;
        animation-duration: 3s;
        animation-iteration-count: infinite;
        animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
    }
    .main-grid .card-2 {
        position: relative;
        z-index: 999;
    }
    .main-grid .card-2 img {
        width: 100% !important;
        z-index: -10;
    }
    .appie-hero-area-2 {
        z-index: 10;
    }
    .appie-hero-area-2 .hero-shape-1 {
        position: absolute;
        top: 250px;
        left: 130px;
        animation: linear 20s animationFramesOne infinite;
        z-index: -1;
    }
    .appie-hero-area-2 .hero-shape-2 {
        position: absolute;
        bottom: 290px;
        left: 40px;
        animation: linear 20s animationFramesFour infinite;
        z-index: -1;
    }
    .appie-hero-area-2 .hero-shape-3 {
        position: absolute;
        top: 480px;
        right: 240px;
        animation: linear 20s animationFramesFive infinite;
        z-index: -1;
    }
    .appie-hero-area-2 img {
        width: 90px !important;
    }
    .appie-hero-area-2 .hero-shape-4 {
        position: absolute;
        top: 210px;
        right: 0px;
        animation: linear 20s animationFramesThree infinite;
        z-index: -1;
    }
    @keyframes animationFramesOne {
        0% {
            transform: translate(0px, 0px) rotate( 0deg);
        }
        20% {
            transform: translate(73px, -1px) rotate( 36deg);
        }
        40% {
            transform: translate(141px, 72px) rotate( 72deg);
        }
        60% {
            transform: translate(83px, 122px) rotate( 108deg);
        }
        80% {
            transform: translate(-40px, 72px) rotate( 144deg);
        }
        100% {
            transform: translate(0px, 0px) rotate( 0deg);
        }
    }
    @keyframes animationFramesFour {
        0% {
            transform: translate(-300px, 151px) rotate( 0deg);
        }
        100% {
            transform: translate(251px, -200px) rotate( 180deg);
        }
    }
    @keyframes animationFramesFive {
        0% {
            transform: translate(61px, -99px) rotate( 0deg);
        }
        21% {
            transform: translate(4px, -190px) rotate( 38deg);
        }
        41% {
            transform: translate(-139px, -200px) rotate( 74deg);
        }
        60% {
            transform: translate(-263px, -164px) rotate( 108deg);
        }
        80% {
            transform: translate(-195px, -49px) rotate( 144deg);
        }
        100% {
            transform: translate(-1px, 0px) rotate( 180deg);
        }
    }
    @keyframes animationFramesThree {
        0% {
            transform: translate(165px, -179px);
        }
        100% {
            transform: translate(-346px, 617px);
        }
    }
    /* services */
    #services {
        height: 100%;
        padding: 70px 0px;
        position: relative;
    }
    .flex-services {
        display: flex;
        justify-content: space-between;
        margin: 38px 0px;
        flex-direction: column;
        flex-wrap: nowrap;
    }
    .title-services h1 {
        font-size: 1rem;
        display: inline;
        font-weight: 600;
    }
    .title-services h2 {
        font-size: var(--size-38px);
        font-weight: bold;
    }
    .button-services {
        position: relative;
        bottom: 0;
    }
    .button-services a {
        width: 100px;
        text-align: center;
        padding: 10px 20px;
        background-color: transparent;
        color: var(--hard-dark-color-color) !important;
        border: 1px solid var(--light-color);
        border-radius: 50px;
        transition: .3s ease-in-out;
        font-weight: 500;
    }
    .button-services a:hover,
    .button-services a:focus,
    .button-services a:active {
        background-color: #f0f0f0;
        color: var(--main-color);
    }
    .grid-services {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-gap: 1rem;
    }
    .grid-services .card {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 5px;
        height: 100%;
        border: none;
        transition: .3s ease-in-out;
        background-color: transparent;
    }
    .grid-services .card:hover {
        transform: translateY(-10px);
        /* box-shadow: var(--box-shadow-3); */
    }
    .grid-services .card i {
        margin: 30px 0px;
        height: 50px;
        width: 50px;
        text-align: center;
        line-height: 50px;
        background: #2eacfc;
        color: #fff;
        border-radius: 50%;
    }
    .grid-services .card:nth-child(1) i {
        background-color: var(--main-color);
    }
    .grid-services .card:nth-child(2) i {
        background-color: var(--second-color);
    }
    .grid-services .card:nth-child(3) i {
        background-color: var(--third-color);
    }
    .grid-services .card:nth-child(4) i {
        background-color: #3ab094;
    }
    .grid-services .card:nth-child(5) i {
        background-color: var(--fourth-color)
    }
    .grid-services .card:nth-child(6) i {
        background-color: var(--fifth-color)
    }
    .grid-services .card h2 {
        font-size: var(--size-20px) !important;
        padding: 5px 0;
    }
    .grid-services .card p {
        font-size: var(--size-16px);
        line-height: 1.5;
    }
    .grid-services .card a {
        color: var(--main-color);
    }
    .grid-services .card h2 {
        font-size: 1rem !important;
        padding: 5px 0;
    }
    /* metodologias */
    .grid-metodologias {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-column-gap: 50px;
        grid-row-gap: 50px;
    }
    .grid-metodologias .card {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 30px;
        height: 100%;
        border: none;
        transition: .3s ease-in-out;
        background-color: transparent;
    }
    .grid-metodologias .card:hover {
        transform: translateY(-10px);
        box-shadow: var(--box-shadow-3);
    }
    .grid-metodologias .card i {
        margin: 30px 0px;
        height: 50px;
        width: 50px;
        text-align: center;
        line-height: 50px;
        background: #2eacfc;
        color: #fff;
        border-radius: 50%;
    }
    .grid-metodologias .card:nth-child(1) i {
        background-color: var(--main-color);
    }
    .grid-metodologias .card:nth-child(2) i {
        background-color: var(--second-color);
    }
    .grid-metodologias .card:nth-child(3) i {
        background-color: var(--third-color);
    }
    .grid-metodologias .card:nth-child(4) i {
        background-color: #3ab094;
    }
    .grid-metodologias .card:nth-child(5) i {
        background-color: var(--fourth-color)
    }
    .grid-metodologias .card:nth-child(6) i {
        background-color: var(--fifth-color)
    }
    .grid-metodologias .card h2 {
        font-size: var(--size-20px) !important;
        padding: 5px 0;
    }
    .grid-metodologias .card p {
        font-size: var(--size-16px);
        line-height: 1.5;
    }
    .grid-metodologias .card a {
        color: var(--main-color);
    }
    .grid-metodologias .card h2 {
        font-size: 1rem !important;
        padding: 5px 0;
    }
    /* powerUp */
    #powerUp {
        height: 100%;
        padding: 70px 0px;
        background-color: var(--second-color);
    }
    .title-powerUp {
        text-align: center;
        color: var(--white-color);
        margin-bottom: 50px;
    }
    .content-powerUp {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: 100%;
        grid-column-gap: 50px;
        grid-row-gap: 0px;
    }
    .img-powerUp {
        display: flex;
        justify-content: left;
    }
    .img-powerUp img {
        /* width: calc(100% - -50px); */
        width: 100%;
    }
    .list-powerUp {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: flex-end;
        justify-content: space-between;
    }
    .flex-powerUp {
        display: flex;
        align-items: flex-start;
        padding: 10px 30px;
        margin: 20px 0px;
        width: 100%;
        transition: .5s ease-in-out;
        border: var(--main-color) 1px solid;
    }
    .flex-powerUp .circle {
        position: relative;
        top: 10px;
        width: 20px;
        height: 20px;
        background-color: var(--fifth-color);
    }
    .flex-powerUp .card-1 {
        color: white;
        padding: 10px 30px;
    }
    .flex-powerUp:hover {
        border: var(--fifth-color) 1px solid;
        border-radius: 10px;
    }
    /* banner-1 */
    #banner1 {
        padding: 90px 0px;
        background-image: url("../img/banner/banner-1.jpg");
        background-size: cover;
        background-repeat: no-repeat;
        height: 100%;
    }
    .banner-1 {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 30%;
    }
    .banner-1 h6 {
        color: var(--main-color);
        font-weight: 500;
    }
    .banner-1 h2 {
        font-size: var(--size-38px);
        font-weight: bold;
    }
    .banner-1 p {
        margin: 20px 0px;
        line-height: 1.3;
    }
    .btn-demo {
        width: 200px;
        text-align: center;
        padding: 10px 20px;
        background-color: var(--main-color);
        color: var(--white-color) !important;
        border-radius: 50px;
        transition: .5s ease-in-out;
    }
    .btn-demo:hover,
    .btn-demo:focus,
    .btn-demo:active {
        border: 1px solid var(--hover-main-color);
        background-color: transparent;
        color: var(--main-color) !important;
    }
    .flex-button {
        margin: 10px 0px;
    }
    .flex-button a {
        margin: 0px 10px;
    }
    .btn-pricing {
        width: 200px;
        text-align: center;
        padding: 10px 20px;
        border: 1px solid var(--main-color);
        background-color: transparent !important;
        color: var(--main-color) !important;
        border-radius: 50px;
        transition: .5s ease-in-out;
    }
    .btn-pricing:hover,
    .btn-pricing:focus,
    .btn-pricing:active {
        border: 1px solid var(--hover-main-color);
        background-color: transparent;
        color: var(--main-color) !important;
    }
    .btn-pricing-active {
        width: 200px;
        text-align: center;
        padding: 10px 20px;
        background-color: var(--fifth-color);
        color: var(--main-color) !important;
        border: none;
        border-radius: 50px;
        transition: .5s ease-in-out;
        font-weight: bold;
    }
    .btn-pricing-active:hover,
    .btn-pricing-active:focus,
    .btn-pricing-active:active {
        border: 1px solid var(--hover-main-color);
        background-color: transparent;
        color: var(--main-color) !important;
    }
    .banner-popular-pricing {
        position: absolute;
        top: 15px;
        right: 0;
        width: 40%;
        background-color: var(--second-color);
        padding: 5px 12px;
        border-radius: 15px 0px 0px 15px;
    }
    .banner-popular-pricing span {
        color: var(--white-color);
        font-weight: bold;
        font-style: var(--size-10px);
    }
    /* princing */
    #pricing {
        height: 100%;
        padding: 100px 0px;
    }
    .princing-1 {
        text-align: center;
        margin: 30px 0px;
    }
    .princing-1 h2 {
        font-weight: bold;
        font-size: var(--size-38px);
    }
    .pricing-toggle {
        display: flex;
        justify-content: center;
        padding: 20px;
    }
    .pricing-toggle ul {
        display: flex;
        list-style: none;
        border: 1px solid #bbbbbb;
        border-radius: 25px;
        text-align: center;
        padding: 10px 0px;
    }
    .pricing-toggle li {
        margin: 0px 10px;
    }
    .pricing-toggle a {
        color: var(--hard-dark-color);
        cursor: pointer;
    }
    .pricing-toggle .actived {
        background-color: var(--main-color);
        color: var(--white-color);
        padding: 5px 30px;
        border-radius: 15px;
    }
    .grid-pricing {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: 100%;
        grid-column-gap: 80px;
        grid-row-gap: 20px;
    }
    .grid-pricing .card {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        padding: 30px 50px;
        border-radius: 15px;
        border: 1px solid #f0f0f0;
        transition: .5s ease-in-out;
    }
    .grid-pricing .card:hover {
        box-shadow: var(--box-shadow-1);
        transform: translateY(-5%);
    }
    .grid-pricing .card h5 {
        font-weight: bold;
        margin: 20px 0px;
    }
    .grid-pricing .card h2 span {
        font-size: var(--size-14px);
        position: relative;
        top: -5px;
    }
    .grid-pricing .card h2 {
        margin: 20px 0px;
        font-weight: bold;
    }
    .grid-pricing .card h2 small {
        font-size: var(--size-12px);
    }
    .grid-pricing .card h6 {
        font-size: var(--size-16px);
        font-weight: 300;
    }
    .grid-pricing .card ul {
        list-style: none;
        line-height: 2;
        padding: 0;
    }
    .grid-pricing .card ul i {
        color: var(--whats-color);
    }
    .grid-pricing .card .li-muted {
        color: #f0f0f0;
        font-style: italic;
    }
    /* checkbox */
    .switch {
        display: inline-block;
        height: 34px;
        position: relative;
        width: 60px;
    }
    .switch input {
        display: none;
    }
    .slider {
        background-color: var(--main-color);
        bottom: 0;
        cursor: pointer;
        left: 0;
        position: absolute;
        right: 0;
        top: 0;
        transition: .4s;
    }
    .slider:before {
        background-color: #fff;
        bottom: 4px;
        content: "";
        height: 26px;
        left: 4px;
        position: absolute;
        transition: .4s;
        width: 26px;
    }
    input:checked+.slider {
        background-color: var(--main-color);
        ;
    }
    input:checked+.slider:before {
        transform: translateX(26px);
    }
    .slider.round {
        border-radius: 34px;
    }
    .slider.round:before {
        border-radius: 50%;
    }
    /* nabvar */
    nav {
        padding: 20px 0px;
        margin: 0px 0px;
        position: fixed !important;
        z-index: 99;
        top: 0;
        width: 100%;
        -webkit-box-shadow: 4px 11px 15px -7px rgba(97, 97, 97, 0.25);
        box-shadow: 4px 11px 15px -7px rgba(97, 97, 97, 0.25);
    }
    nav .navbar-brand * {
        font-size: var(--font-18px) !important;
        font-weight: 300 !important;
        position: relative;
        float: right;
    }
    nav .navbar-nav {
        font-size: var(--font-14px) !important;
        font-weight: 600 !important;
        text-transform: uppercase;
        padding: 0px 5px;
        margin: 0px 5px;
        position: relative;
    }
    nav .navbar-nav i {
        color: var(--main-color);
    }
    nav .nav-contact:hover {
        background-color: var(--hard-dark-color);
        color: var(--white-color);
    }
    .logo img {
        width: 78px;
    }
    .navbar-expand-lg .navbar-collapse {
        justify-content: right;
    }
    .navbar-nav li {
        text-transform: none;
        margin: 0px 10px;
        font-weight: 600;
    }
    .btn-registro {
        margin-left: 0px;
        width: 100px;
        text-align: center;
        padding: 5px 10px;
        background-color: transparent;
        border: var(--main-color) 1px solid;
        color: var(--main-color) !important;
        border-radius: 50px;
        transition: .5s ease-in-out;
    }
    .btn-registro:hover,
    .btn-registro:focus,
    .btn-registro:active {
        background-color: var(--hover-main-color);
        border: transparent;
        color: var(--white-color) !important;
    }
    .btn-login {
        margin-left: 0px;
        width: 100px;
        text-align: center;
        padding: 5px 10px;
        background-color: var(--main-color);
        color: var(--white-color) !important;
        border-radius: 50px;
        transition: .5s ease-in-out;
    }
    .btn-login:hover,
    .btn-login:focus,
    .btn-login:active {
        border: 1px solid var(--hover-main-color);
        background-color: transparent;
        color: var(--main-color) !important;
    }
    .btn-fill {
        margin-left: 0px;
        width: 100px;
        text-align: center;
        padding: 10px 20px;
        background-color: var(--main-color);
        color: var(--white-color) !important;
        border-radius: 50px;
        transition: .5s ease-in-out;
    }
    .btn-fill:hover,
    .btn-fill:focus,
    .btn-fill:active {
        border: 1px solid var(--hover-main-color);
        background-color: transparent;
        color: var(--main-color) !important;
    }
    .dropdown-menu {
        border-radius: 15px;
        box-shadow: var(--box-shadow-3);
    }
    .dropdown-menu li {
        line-height: 1.8;
        padding: 0px;
    }
    .dropdown-menu li:hover * {
        background-color: var(--main-color) !important;
        color: var(--white-color);
    }
    /* section 1 */
    .bg-section-1 {
        /* img optional */
        /* background: url(../img/stock/mainslider-bg003.jpg);
        background-position: 0px, -50px; */
        /* img actual */
        background: url(../img/stock/BlogWellzenTools.jpg);
        background-repeat: no-repeat;
        background-position: 0px, 0px;
        background-size: cover;
        background-attachment: fixed;
        height: 620px;
        position: relative;
        -webkit-transition: all 1.4s cubic-bezier(.42, 0, .58, 1);
        transition: all .5s cubic-bezier(.42, 0, .58, 1);
    }
    .bg-section-1-slider-2 {
        /* img optional */
        background: url(../img/stock/mainslider-bg003.jpg);
        background-position: 0px, -50px;
        /* img actual */
        background-repeat: no-repeat;
        background-position: 0px, 0px;
        background-size: cover;
        height: 620px;
        position: relative;
        -webkit-transition: all .5s cubic-bezier(.42, 0, .58, 1);
        transition: all .5s cubic-bezier(.42, 0, .58, 1);
    }
    .bg-section-1-slider-3 {
        /* img optional */
        background: url(../img/stock/cta-bg-two.jpg);
        background-position: 0px, -50px;
        /* img actual */
        background-repeat: no-repeat;
        background-position: 0px, 0px;
        background-size: cover;
        height: 620px;
        position: relative;
        -webkit-transition: all .5s cubic-bezier(.42, 0, .58, 1);
        transition: all .5s cubic-bezier(.42, 0, .58, 1);
    }
    .bg-section-1-slider-4 {
        /* img optional */
        background: url(../img/stock/slider-landing.jpg);
        background-position: 0px, -50px;
        /* img actual */
        background-repeat: no-repeat;
        background-position: 0px, 0px;
        background-size: cover;
        height: 620px;
        position: relative;
        -webkit-transition: all .5s cubic-bezier(.42, 0, .58, 1);
        transition: all .5s cubic-bezier(.42, 0, .58, 1);
    }
    .circle {
        height: 12px;
        width: 12px;
        border: 2px solid var(--main-color);
        border-radius: 50%;
        display: inline-block;
        cursor: pointer;
        margin: 0px 4px;
    }
    /* .active {
            border: none;
            background-color: var(--main-color);
            transition: ease-in-out .2s;
        } */
    .circle:hover {
        border: none;
        background-color: var(--main-color);
        transition: ease-in-out .2s;
    }
    .bg-section-1 .fa-chevron-left {
        position: absolute;
        top: 50%;
        left: 2%;
        background-color: rgba(241, 241, 241, 0.431);
        padding: 20px;
        border-radius: 50px;
        cursor: pointer;
    }
    .bg-section-1 .fa-chevron-left:hover {
        color: var(--white-color);
        transition: ease-in-out .2s;
    }
    .bg-section-1 .fa-chevron-right {
        position: absolute;
        top: 50%;
        left: 96%;
        background-color: rgba(241, 241, 241, 0.431);
        padding: 20px;
        border-radius: 50px;
        cursor: pointer;
    }
    .bg-section-1 .fa-chevron-right:hover {
        color: var(--white-color);
        transition: ease-in-out .2s;
    }
    .btn-section-1 {
        position: absolute;
        top: 94%;
        left: 96%;
        transform: translateX(-50%) translateY(-50%);
        display: block;
    }
    .circle-btn {
        height: 20px;
        width: 20px;
        border: 2px solid var(--gray-color);
        border-radius: 50%;
        display: inline-block;
        cursor: pointer;
        margin: 0px 4px;
    }
    /* .active {
            border: none;
            background-color: var(--main-color);
            transition: ease-in-out .2s;
        } */
    .circle-btn:hover {
        border: none;
        background-color: var(--main-color);
        transition: ease-in-out .2s;
    }
    .box-section-1 {
        background-color: var(--white-color);
        width: 20%;
        height: auto;
        box-sizing: border-box;
        margin: 10px;
        padding: 20px;
        border-radius: 15px;
        position: relative;
        top: 40%;
        left: 10%;
        transform: translateX(30%) translateY(-20%);
        box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12)
    }
    /* contents section-1 */
    .content-1-section-1 {
        position: absolute;
        top: 20%;
        left: 39%;
        transition: ease-in-out .2s;
    }
    .content-1-section-1 h2 {
        font-size: 50px;
        font-weight: 700;
        font-family: var(--poppins);
        letter-spacing: 1px;
        width: 100%;
        animation-duration: .8s;
        animation-name: slidein;
    }
    .content-1-section-1 h3 {
        font-size: 30px;
        border-radius: 15px;
        font-weight: 400;
        font-family: var(--poppins);
        background-color: var(--bg-light-second-color);
        padding: 20px;
        width: 100%;
        animation-duration: .8s;
        animation-name: slidein;
    }
    .content-2-section-1 {
        position: absolute;
        top: 20%;
        left: 39%;
        transition: ease-in-out .2s;
    }
    .content-2-section-1 h2 {
        font-size: 50px;
        font-weight: 700;
        font-family: var(--poppins);
        letter-spacing: 1px;
        width: 100%;
        animation-duration: .8s;
        animation-name: slidein;
    }
    .content-2-section-1 h3 {
        font-size: 30px;
        border-radius: 15px;
        font-weight: 400;
        font-family: var(--poppins);
        width: 100%;
        animation-duration: .8s;
        animation-name: slidein;
    }
    .content-3-section-1 {
        position: absolute;
        top: 20%;
        left: 39%;
        transition: ease-in-out .2s;
    }
    .content-3-section-1 h2 {
        font-size: 35px;
        font-weight: 700;
        letter-spacing: 1px;
        font-family: var(--poppins);
        letter-spacing: 1px;
        text-transform: uppercase;
        width: 100%;
        animation-duration: .8s;
        animation-name: slidein;
    }
    .content-3-section-1 h3 {
        font-size: 20px;
        border-radius: 15px;
        font-weight: 400;
        font-family: var(--poppins);
        width: 100%;
        animation-duration: .8s;
        animation-name: slidein;
    }
    .content-3-section-1 a {
        margin: 10px 0px;
        animation-duration: .8s;
        animation-name: slideFadeIn;
    }
    .content-3-section-1 i {
        margin: 0px 5px;
        animation-duration: .8s;
        animation-name: slideFadeIn;
    }
    .floating-speed i {
        animation-name: floating;
        animation-duration: 1s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out;
    }
    .box-section-1 h3 {
        font-size: 30px;
        color: var(--dark-color);
        font-weight: 700;
    }
    .box-section-1 p {
        bottom: 0px;
        color: var(--dark-color);
        font-size: var(--font-16px);
        font-weight: 300;
    }
    /* section 2 */
    .bg-section-2 {
        background-color: var(--bg-second-color);
        padding: 100px 0px;
        text-align: center;
    }
    .box-section-2 h2 {
        font-size: 50px;
        font-family: var(--poppins);
        padding: 10px 0px;
    }
    .box-section-2 p {
        color: var(--dark-color);
        font-size: var(--font-18px);
        padding: 0px 400px;
        line-height: 1.9;
        font-weight: 500;
    }
    .flex-days-section-2 {
        display: flex;
        flex-direction: row;
        justify-content: center;
        flex-flow: wrap;
        align-items: center;
    }
    .flex-days-section-2 div {
        background: var(--second-color);
        margin: 0px 20px;
        padding: 5px 20px;
        border-radius: 5px;
        cursor: pointer;
    }
    .flex-days-section-2 div:hover {
        background-color: var(--main-color) !important;
        color: var(--white-color);
        box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12)
    }
    .day-active {
        background-color: var(--main-color) !important;
        color: var(--white-color);
        box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12)
    }
    .flex-content-section-2 {
        margin: 40px 0px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        flex-flow: wrap;
        align-items: center;
    }
    .content-2-section-2 {
        margin: 0px 10px;
        border-radius: 5px;
        text-align: left;
        background-color: var(--white-color);
        padding: 50px 30px;
    }
    .flex-content-section-2 div img {
        width: 480px;
        background-color: transparent !important;
    }
    .flex-content-section-2 div p {
        color: var(--dark-color);
        font-size: var(--font-16px);
        font-weight: 300;
    }
    .flex-content-section-2 div span {
        background-color: var(--bg-second-color);
        font-weight: 500;
    }
    .flex-content-section-2 div h3 {
        color: var(--dark-color);
        font-size: var(--font-18px);
        line-height: 1.9;
        font-weight: 700;
    }
    .flex-content-section-2 div a {
        position: relative;
        bottom: 0px;
        color: var(--bg-main-color);
        font-weight: 500;
    }
    /* section 3 */
    .box-section-3 {
        text-align: center;
    }
    .box-section-3 h4 {
        font-size: var(--font-18px);
        text-transform: uppercase;
        color: var(--dark-color);
        letter-spacing: 2px;
        font-weight: 300;
        font-family: var(--poppins);
        padding: 10px 0px;
    }
    .box-section-3 h2 {
        font-size: 50px;
        font-family: var(--poppins);
        padding: 10px 0px;
    }
    .box-section-3 p {
        color: var(--dark-color);
        font-size: var(--font-18px);
        padding: 0px 400px;
        line-height: 1.9;
        font-weight: 500;
    }
    /* section 4 */
    .box-section-4 {
        text-align: center;
    }
    .box-section-4 h4 {
        font-size: var(--font-18px);
        text-transform: uppercase;
        color: var(--dark-color);
        letter-spacing: 2px;
        font-weight: 300;
        font-family: var(--poppins);
        padding: 10px 0px;
    }
    .box-section-4 h2 {
        font-size: 50px;
        font-family: var(--poppins);
        padding: 10px 0px;
    }
    .box-section-4 p {
        color: var(--dark-color);
        font-size: var(--font-18px);
        padding: 0px 200px;
        line-height: 1.9;
        font-weight: 300;
    }
    .flex-content-section-3 {
        margin: 20px 0px 80px 0px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        flex-flow: wrap;
        align-items: center;
    }
    .flex-content-section-3 div {
        /* background: var(--main-color); */
        margin-bottom: 80px;
        margin-left: 20px;
        border-radius: 5px;
        max-width: 210px;
        height: 200px;
        text-align: center;
    }
    .flex-content-section-3 div:hover>h3 {
        color: var(--main-color);
        transition: ease-in-out .3s;
    }
    .flex-content-section-3 div img {
        width: 150px;
        position: relative;
        margin: 50px 0px;
        top: 50%;
        left: 60%;
        transform: translateX(-90%) translateY(-50%);
    }
    .flex-content-section-3 div:hover>img {
        padding: 5px;
        transition: ease-in-out .3s;
    }
    .flex-content-section-3 h3 {
        font-size: 18px;
        font-family: var(--poppins);
        font-weight: 600;
    }
    /* section carousel*/
    .title-section h2 {
        font-family: var(--poppins);
        color: var(--dark-color);
    }
    .btn-archive {
        color: var(--tx-button);
        background: var(--bg-button);
        border-color: var(--bg-button-border);
        -webkit-transition: all 0.3s linear 0s;
        transition: all 0.3s linear 0s;
    }
    .btn-archive:hover {
        color: var(--tx-button-hover);
        background-color: var(--bg-button-hover);
        border-color: var(--bg-button-hover);
    }
    .btn-archive:focus {
        -webkit-box-shadow: 0 0 0 0.25rem var(--bg-button-focus);
        box-shadow: 0 0 0 0.25rem var(--bg-button-focus);
    }
    .posts-section {
        background: var(--bg-post-section);
        font-family: var(--font1);
        -webkit-transition: all 0.3s linear 0s;
        transition: all 0.3s linear 0s;
        height: 750px;
    }
    .posts-section .title-section {
        font-weight: 700;
        text-transform: uppercase;
        color: var(--tx-post-section-title);
    }
    .posts-section .bg-card {
        background: var(--bg-post-title);
        color: var(--tx-post-title);
    }
    .posts-section .post-body h2 {
        font-weight: 600;
    }
    .posts-section .post-info {
        font-size: 0.8rem;
        font-weight: 300;
    }
    .posts-section .text-img-over {
        position: relative;
    }
    .posts-section .text-img-over .card-img-top {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }
    .posts-section .text-img-over .overlay {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100%;
        width: 100%;
        opacity: 0;
        transition: 0.5s ease;
        background: var(--bg-post-image-overlay);
    }
    .posts-section .text-img-over:hover .overlay {
        opacity: 1;
    }
    .text-img-over img {
        width: 500px;
    }
    .posts-section .social-hover {
        color: var(--tx-color-1);
        font-size: 40px;
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        text-align: center;
    }
    .posts-section .social-hover .fa-share-alt {
        color: var(--tx-color-1);
    }
    .posts-section .social-hover .fa-share-alt:hover {
        color: var(--tx-color-1);
    }
    .post-body h2 {
        color: var(--dark-color);
        margin: 20px 0px;
        font-family: var(--poppins);
    }
    .post-body p {
        color: var(--dark-color);
        line-height: 1.8;
        font-family: var(--poppins);
    }
    /* footer */
    footer {
        background-color: var(--hover-main-color);
        color: var(--white-color) !important;
        padding: 50px 20px;
    }
    .footer-content {
        display: grid;
        grid-template-columns: 30% 40% 30%;
        grid-template-rows: 70%;
        grid-column-gap: 20px;
        grid-row-gap: 0px;
    }
    .footer-bottom {
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
    }
    .footer-2-flex {
        display: flex;
        flex-direction: column;
    }
    .footer-2-columns {
        display: flex;
    }
    /* footer lg */
    .footer-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: 40%;
        grid-column-gap: 60px;
        grid-row-gap: 0px;
        height: 100%;
    }
    footer {
        background-color: var(--hover-main-color);
        color: var(--hard-dark-color);
        padding: 50px 0 0 0;
    }
    footer .social-media {
        display: flex;
        flex-direction: row;
        align-content: center;
        align-items: center;
        justify-content: flex-start;
        gap: 1rem;
    }
    footer .social-media i:hover {
        color: lightcyan;
    }
    footer img {
        width: 150px;
        margin: 20px 0px;
    }
    footer h4 {
        font-size: .8rem;
        text-transform: uppercase;
        padding: 20px 0px;
        font-weight: 700;
    }
    footer p {
        color: var(--white-color) !important;
        font-size: .8rem;
        width: 80%;
        line-height: 1.8;
    }
    footer ul {
        list-style-type: none;
        padding: 0px;
        color: var(--white-color) !important;
    }
    footer li {
        color: var(--white-color) !important;
        list-style-type: none;
        padding: 5px 0px;
    }
    footer a {
        list-style-type: none;
        padding: 5px 0px;
        color: var(--white-color) !important;
        transition: .5s ease-in-out;
        font-size: .8rem
    }
    footer a:hover {
        color: var(--main-color);
    }
    footer i {
        padding: 0px 10px;
        color: var(--third-color);
    }
    a {
        text-decoration: none;
    }
    .view-lg {
        display: block;
    }
    .hiden-lg {
        display: none;
    }
    .up-to-home {
        position: fixed;
        margin: 20px;
        z-index: 999;
        bottom: 0;
        right: 0;
        background-color: rgba(5, 5, 5, 0.13);
        border-radius: 5px;
        padding: 20px;
        cursor: pointer;
    }
    .up-to-home i {
        color: rgb(0, 0, 0);
    }
    .up-to-home:hover i {
        color: var(--main-color);
        transition: ease-in-out .2s;
    }
     ::-webkit-scrollbar {
        width: 10px;
    }
     ::-webkit-scrollbar-track {
        background-color: rgb(253, 253, 253);
        -webkit-border-radius: 10px;
        border-radius: 10px;
    }
     ::-webkit-scrollbar-thumb {
        -webkit-border-radius: 10px;
        border-radius: 10px;
        background: var(--main-color);
    }
    .copyright {
        text-align: center;
        margin: 10px 0px;
    }
    .copyright * {
        color: #9d00e0 !important;
        font-size: 0.8rem;
    }
    @keyframes slidein {
        from {
            margin-left: 50%;
            opacity: 0;
            width: 300%;
        }
        to {
            margin-left: 0%;
            opacity: 1;
            width: 100%;
        }
    }
    @keyframes floating {
        from {
            transform: translate(0, 0px);
        }
        65% {
            transform: translate(0, 5px);
        }
        to {
            transform: translate(0, -0px);
        }
    }
    @keyframes iconFloating {
        from {
            transform: translate(0, 0px);
            opacity: 1;
        }
        65% {
            transform: translate(0, 20px);
            opacity: 1;
        }
        to {
            transform: translate(0, -0px);
            opacity: 1;
        }
    }
    @keyframes mainFloating {
        from {
            transform: translate(0, 0px);
            opacity: 1;
        }
        65% {
            transform: translate(0, 20px);
            opacity: 1;
        }
        to {
            transform: translate(0, -0px);
            opacity: 1;
        }
    }
    @keyframes icon2Floating {
        from {
            transform: translate(0, 20px);
            opacity: .7;
        }
        65% {
            transform: translate(0, 0px);
            opacity: 1;
        }
        to {
            transform: translate(0, 20px);
            opacity: .7;
        }
    }
    .scrollmenu {
        background-color: var(--white-color);
        white-space: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        box-shadow: none;
        margin: 20px 0;
        padding: 10px;
        border-radius: 0px;
    }
    .scrollmenu div {
        display: inline-block;
        color: white;
        text-align: center;
        padding: 30px;
        text-decoration: none;
        cursor: pointer;
    }
}

@media (min-width: 978.98px) and (max-width: 1199.98px) {
    .fullscreen-video-container {
        height: 60vh;
    }
    .banner-section {
        max-height: 50vh;
    }
    .title-services * {
        display: inline !important;
        font-size: .813rem;
    }
    .title-services h1 {
        color: var(--second-color);
        font-weight: 600;
    }
    .grid-class {
        grid-template-columns: repeat(2, 1fr);
    }
    .teachers-grid {
        grid-template-columns: repeat(5, 1fr);
    }
    /* grid four */
    .grid-four {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-gap: 1rem;
    }
    .gallery-2 img {
        width: 200px;
        height: 200px;
        object-fit: cover;
    }
    .scrollmenu {
        background-color: var(--white-color);
        white-space: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        box-shadow: none;
        margin: 20px 0;
        padding: 10px;
        border-radius: 0px;
    }
    .scrollmenu div {
        display: inline-block;
        color: white;
        text-align: center;
        padding: 30px;
        text-decoration: none;
        cursor: pointer;
    }
    .grid-gallery {
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        grid-gap: 2rem;
        margin: 20px 0px;
        padding: 20px;
        box-shadow: var(--box-shadow-3);
        border-radius: 10px;
    }
    .grid-gallery>div {
        cursor: pointer;
    }
    /* grid-three-columns */
    .grid-three-columns {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-column-gap: 20px;
        grid-row-gap: 20px;
    }
    .flex-three-columns {
        display: flex;
        flex-direction: column;
        /* width: 300px; */
    }
    .img-hover-zoom {
        height: auto;
        overflow: hidden;
    }
    .img-hover-zoom img {
        transition: transform .5s ease;
        width: 100%;
    }
    .img-hover-zoom:hover img {
        transform: scale(1.1);
    }
    .teacher-1 {
        background-color: var(--main-color);
        color: var(--white-color);
        text-align: center;
        padding: 20px 0px;
        border-radius: 0 0 10px 10px;
    }
    .teacher-1 a {
        border: 1px solid var(--white-color);
        border-radius: 25px;
        color: white;
    }
    .teacher-1 a:hover {
        border: 1px solid var(--main-hover-color);
        border-radius: 25px;
        color: var(--ligting-color)
    }
    .teacher-2 {
        background-color: var(--second-color);
        color: var(--white-color);
        text-align: center;
        padding: 20px 0px;
        border-radius: 0 0 10px 10px;
    }
    .teacher-2 a {
        border: 1px solid var(--white-color);
        border-radius: 25px;
        color: #f9f9f9;
    }
    .teacher-2 a:hover {
        border: 1px solid var(--second-hover-color);
        border-radius: 25px;
        color: var(--ligting-color)
    }
    .teacher-3 {
        background-color: var(--third-color);
        color: var(--white-color);
        text-align: center;
        padding: 20px 0px;
        border-radius: 0 0 10px 10px;
    }
    .teacher-3 a {
        border: 1px solid var(--white-color);
        border-radius: 25px;
        color: #f9f9f9;
    }
    .teacher-3 a:hover {
        border: 1px solid var(--second-hover-color);
        border-radius: 25px;
        color: var(--third-hover-color)
    }
    .teacher-4 {
        background-color: var(--fourth-color);
        color: var(--white-color);
        text-align: center;
        padding: 20px 0px;
        border-radius: 0 0 10px 10px;
    }
    .teacher-4 a {
        border: 1px solid var(--white-color);
        border-radius: 25px;
        color: #f9f9f9;
    }
    .teacher-4 a:hover {
        border: 1px solid var(--second-hover-color);
        border-radius: 25px;
        color: #f9f9f9;
    }
    .teacher-5 {
        background-color: var(--fifth-color);
        color: var(--white-color);
        text-align: center;
        padding: 20px 0px;
        border-radius: 0 0 10px 10px;
    }
    .teacher-5 a {
        border: 1px solid var(--white-color);
        border-radius: 25px;
        color: #f9f9f9;
    }
    .teacher-5 a:hover {
        border: 1px solid var(--second-hover-color);
        border-radius: 25px;
        color: #f9f9f9;
    }
    .teachers-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 1rem;
    }
    #icons-1 {
        display: none;
    }
    /* section 4 */
    .box-section-4 {
        text-align: center;
    }
    .box-section-4 h4 {
        font-size: var(--font-18px);
        text-transform: uppercase;
        color: var(--dark-color);
        letter-spacing: 2px;
        font-weight: 300;
        font-family: var(--poppins);
        padding: 10px 0px;
    }
    .box-section-4 h2 {
        font-size: 50px;
        font-family: var(--poppins);
        padding: 10px 0px;
    }
    .box-section-4 p {
        color: var(--dark-color);
        font-size: var(--font-18px);
        padding: 0px 200px;
        line-height: 1.9;
        font-weight: 300;
    }
    .button-whats {
        position: relative;
        bottom: 0;
    }
    .button-whats a {
        width: 100px;
        text-align: center;
        padding: 10px 20px;
        background-color: var(--whats-color);
        color: var(--white-color);
        border-radius: 50px;
        transition: .3s ease-in-out;
        font-weight: 500;
    }
    .button-whats a:hover,
    .button-whats a:focus,
    .button-whats a:active {
        background-color: transparent;
        border: 1px solid var(--whats-hover-color);
        color: var(--whats-hover-color);
    }
    .class h2 {
        font-weight: 400 !important;
    }
    .class b {
        color: var(--second-color);
    }
    /* grid-two-columns */
    .grid-two-columns {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-column-gap: 20px;
        grid-row-gap: 20px;
    }
    .image-content {
        position: relative;
    }
    .image-content img {
        width: 100%;
    }
    .flex-direction-columns {
        display: flex;
        flex-direction: column;
    }
    .flex-direction-columns .card-body {
        display: flex;
        position: relative;
    }
    .flex-direction-columns img {
        width: 60%;
    }
    .flex-direction-columns .card-1 h3 {
        font-size: 18px;
    }
    .flex-direction-columns .card-1 p {
        font-size: 14px !important;
    }
    p {
        font-size: 14px !important;
        font-weight: 400;
        line-height: 1.8;
    }
    /* postSlider */
    #postSlider .post-body h2 {
        color: var(--main-color);
    }
    #postSlider .post-body ul {
        padding: 0;
    }
    #postSlider .post-body ul>li {
        line-height: 2.2;
        list-style-type: none;
    }
    #postSlider .post-body ul>li>i {
        color: var(--whats-color);
    }
    /* main tablets*/
    #main {
        background-image: linear-gradient(to bottom, rgba(29, 22, 33, 0.902), rgba(0, 0, 0, 0.609)), url('../admin/images/gallery/IMG_3090.jpg');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 40%;
    }
    .main-grid {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: 0;
        grid-column-gap: 1rem;
        grid-row-gap: 0px;
        height: 390px;
        text-align: center;
        padding: 100px 0px;
    }
    .main-grid .card-1 {
        display: flex;
        flex-direction: column;
        padding: 10px 0px;
        z-index: 999;
    }
    .main-grid .card-1 h1 {
        font-size: 28px !important;
        font-weight: 300;
        color: var(--white-color);
    }
    .main-grid .card-1 p {
        font-size: var(--size-18px) !important;
        color: var(--white-color);
    }
    .main-grid .card-1 a {
        margin: 2rem 0;
    }
    .main-grid .card-2 .icon1 {
        position: relative !important;
        top: 70px;
        left: 10px;
    }
    .main-grid .card-2 .icon1 img {
        width: 50px !important;
        animation-name: iconFloating;
        animation-duration: 3s;
        animation-iteration-count: infinite;
        animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
    }
    .main-grid .card-2 .icon2 {
        position: relative !important;
        left: 50%;
        top: -70px;
    }
    .main-grid .card-2 .icon2 img {
        width: 50px !important;
        animation-name: iconFloating;
        animation-duration: 3s;
        animation-iteration-count: infinite;
        animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
    }
    .main-grid .card-2 {
        position: relative;
        z-index: 999;
    }
    .main-grid .card-2 img {
        width: 450px;
    }
    .appie-hero-area-2 {
        z-index: 10;
    }
    .appie-hero-area-2 .hero-shape-1 {
        position: absolute;
        top: 250px;
        left: 130px;
        animation: linear 20s animationFramesOne infinite;
        z-index: -1;
    }
    .appie-hero-area-2 .hero-shape-2 {
        position: absolute;
        bottom: 290px;
        left: 40px;
        animation: linear 20s animationFramesFour infinite;
        z-index: -1;
    }
    .appie-hero-area-2 .hero-shape-3 {
        position: absolute;
        top: 480px;
        right: 240px;
        animation: linear 20s animationFramesFive infinite;
        z-index: -1;
    }
    .appie-hero-area-2 .hero-shape-4 {
        position: absolute;
        top: 210px;
        right: 0px;
        animation: linear 20s animationFramesThree infinite;
        z-index: -1;
    }
    @keyframes animationFramesOne {
        0% {
            transform: translate(0px, 0px) rotate( 0deg);
        }
        20% {
            transform: translate(73px, -1px) rotate( 36deg);
        }
        40% {
            transform: translate(141px, 72px) rotate( 72deg);
        }
        60% {
            transform: translate(83px, 122px) rotate( 108deg);
        }
        80% {
            transform: translate(-40px, 72px) rotate( 144deg);
        }
        100% {
            transform: translate(0px, 0px) rotate( 0deg);
        }
    }
    @keyframes animationFramesFour {
        0% {
            transform: translate(-300px, 151px) rotate( 0deg);
        }
        100% {
            transform: translate(251px, -200px) rotate( 180deg);
        }
    }
    @keyframes animationFramesFive {
        0% {
            transform: translate(61px, -99px) rotate( 0deg);
        }
        21% {
            transform: translate(4px, -190px) rotate( 38deg);
        }
        41% {
            transform: translate(-139px, -200px) rotate( 74deg);
        }
        60% {
            transform: translate(-263px, -164px) rotate( 108deg);
        }
        80% {
            transform: translate(-195px, -49px) rotate( 144deg);
        }
        100% {
            transform: translate(-1px, 0px) rotate( 180deg);
        }
    }
    @keyframes animationFramesThree {
        0% {
            transform: translate(0px, 0px);
        }
        100% {
            transform: translate(-346px, 617px);
        }
    }
    /* services */
    #services {
        height: 100%;
        padding: 70px 0px;
        position: relative;
    }
    .flex-services {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin: 30px 0px;
    }
    .button-services {
        position: relative;
        bottom: 0;
    }
    .button-services a {
        width: 100px;
        text-align: center;
        padding: 10px 20px;
        background-color: transparent;
        color: var(--hard-dark-color-color) !important;
        border: 1px solid var(--light-color);
        border-radius: 50px;
        transition: .3s ease-in-out;
        font-weight: 500;
    }
    .button-services a:hover,
    .button-services a:focus,
    .button-services a:active {
        background-color: #f0f0f0;
        color: var(--main-color);
    }
    .grid-services {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-column-gap: 50px;
        grid-row-gap: 50px;
    }
    .grid-services .card {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 30px;
        height: 100%;
        border: none;
        transition: .3s ease-in-out;
    }
    .grid-services .card:hover {
        transform: translateY(-10px);
        box-shadow: var(--box-shadow-3);
    }
    .grid-services .card i {
        margin: 30px 0px;
        height: 50px;
        width: 50px;
        text-align: center;
        line-height: 50px;
        background: #2eacfc;
        color: #fff;
        border-radius: 50%;
    }
    .grid-services .card:nth-child(1) i {
        background-color: var(--main-color);
    }
    .grid-services .card:nth-child(2) i {
        background-color: var(--second-color);
    }
    .grid-services .card:nth-child(3) i {
        background-color: var(--third-color);
    }
    .grid-services .card:nth-child(4) i {
        background-color: #3ab094;
    }
    .grid-services .card:nth-child(5) i {
        background-color: var(--fourth-color)
    }
    .grid-services .card:nth-child(6) i {
        background-color: var(--fifth-color)
    }
    .grid-services .card h2 {
        font-size: var(--size-20px) !important;
    }
    .grid-services .card p {
        font-size: var(--size-16px);
        line-height: 1.5;
    }
    .grid-services .card a {
        color: var(--main-color);
    }
    /* grid metodologias */
    .grid-metodologias {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-column-gap: 50px;
        grid-row-gap: 50px;
    }
    .grid-metodologias .card {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 30px;
        height: 100%;
        border: none;
        transition: .3s ease-in-out;
    }
    .grid-metodologias .card:hover {
        transform: translateY(-10px);
        box-shadow: var(--box-shadow-3);
    }
    .grid-metodologias .card i {
        margin: 30px 0px;
        height: 50px;
        width: 50px;
        text-align: center;
        line-height: 50px;
        background: #2eacfc;
        color: #fff;
        border-radius: 50%;
    }
    .grid-metodologias .card:nth-child(1) i {
        background-color: var(--main-color);
    }
    .grid-metodologias .card:nth-child(2) i {
        background-color: var(--second-color);
    }
    .grid-metodologias .card:nth-child(3) i {
        background-color: var(--third-color);
    }
    .grid-metodologias .card:nth-child(4) i {
        background-color: #3ab094;
    }
    .grid-metodologias .card:nth-child(5) i {
        background-color: var(--fourth-color)
    }
    .grid-metodologias .card:nth-child(6) i {
        background-color: var(--fifth-color)
    }
    .grid-metodologias .card h2 {
        font-size: var(--size-20px) !important;
    }
    .grid-metodologias .card p {
        font-size: var(--size-16px);
        line-height: 1.5;
    }
    .grid-metodologias .card a {
        color: var(--main-color);
    }
    /* powerUp */
    #powerUp {
        height: 100%;
        padding: 70px 0px;
        background-color: #0e1133;
    }
    .title-powerUp {
        text-align: center;
        color: var(--white-color);
        margin-bottom: 50px;
    }
    .content-powerUp {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: 100%;
        grid-column-gap: 50px;
        grid-row-gap: 0px;
    }
    .img-powerUp {
        display: flex;
        justify-content: left;
    }
    .img-powerUp img {
        width: calc(100% - 150px);
    }
    .list-powerUp {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: flex-end;
        justify-content: space-between;
    }
    .flex-powerUp {
        display: flex;
        align-items: flex-start;
        padding: 10px 30px;
        margin: 20px 0px;
        transition: .5s ease-in-out;
        border: var(--main-color) 1px solid;
    }
    .flex-powerUp .circle {
        position: relative;
        top: 10px;
        width: 20px;
        height: 20px;
        background-color: var(--fifth-color);
    }
    .flex-powerUp .card-1 {
        color: white;
        padding: 10px 30px;
    }
    .flex-powerUp:hover {
        border: var(--fifth-color) 1px solid;
        border-radius: 10px;
    }
    /* banner-1 */
    #banner1 {
        padding: 180px 0px;
        background-image: url("../img/banner/banner-1.jpg");
        background-size: cover;
        background-position: center top;
        background-repeat: no-repeat;
        height: 100%;
    }
    .banner-1 {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 50%;
    }
    .banner-1 h6 {
        color: var(--main-color);
        font-weight: 500;
    }
    .banner-1 h2 {
        font-size: var(--size-38px);
        font-weight: bold;
    }
    .banner-1 p {
        margin: 20px 0px;
        line-height: 1.3;
    }
    .btn-demo {
        width: 200px;
        text-align: center;
        padding: 10px 20px;
        background-color: var(--main-color);
        color: var(--white-color) !important;
        border-radius: 50px;
        transition: .5s ease-in-out;
    }
    .btn-demo:hover,
    .btn-demo:focus,
    .btn-demo:active {
        border: 1px solid var(--hover-main-color);
        background-color: transparent;
        color: var(--main-color) !important;
    }
    .flex-button {
        margin: 10px 0px;
    }
    .flex-button a {
        margin: 0px 10px;
    }
    .btn-pricing {
        width: 200px;
        text-align: center;
        padding: 10px 20px;
        border: 1px solid var(--main-color);
        color: var(--main-color) !important;
        border-radius: 50px;
        transition: .5s ease-in-out;
    }
    .btn-pricing:hover,
    .btn-pricing:focus,
    .btn-pricing:active {
        border: 1px solid var(--hover-main-color);
        background-color: transparent;
        color: var(--main-color) !important;
    }
    .btn-pricing-active {
        width: 200px;
        text-align: center;
        padding: 10px 20px;
        background-color: var(--fifth-color);
        color: var(--main-color) !important;
        border-radius: 50px;
        transition: .5s ease-in-out;
        font-weight: bold;
    }
    .btn-pricing-active:hover,
    .btn-pricing-active:focus,
    .btn-pricing-active:active {
        border: 1px solid var(--hover-main-color);
        background-color: transparent;
        color: var(--main-color) !important;
    }
    .banner-popular-pricing {
        position: absolute;
        top: 15px;
        right: 0;
        width: 60%;
        background-color: var(--second-color);
        padding: 5px 12px;
        border-radius: 15px 0px 0px 15px;
    }
    .banner-popular-pricing span {
        color: var(--white-color);
        font-weight: bold;
        font-style: var(--size-10px);
    }
    /* princing */
    #pricing {
        height: 100%;
        padding: 100px 0px;
    }
    .princing-1 {
        text-align: center;
        margin: 30px 0px;
    }
    .princing-1 h2 {
        font-weight: bold;
        font-size: var(--size-38px);
    }
    .pricing-toggle {
        display: flex;
        justify-content: center;
        padding: 20px;
    }
    .pricing-toggle ul {
        display: flex;
        list-style: none;
        border: 1px solid #bbbbbb;
        border-radius: 25px;
        text-align: center;
        padding: 10px 0px;
    }
    .pricing-toggle li {
        margin: 0px 10px;
    }
    .pricing-toggle a {
        color: var(--hard-dark-color);
        cursor: pointer;
    }
    .pricing-toggle .actived {
        background-color: var(--main-color);
        color: var(--white-color);
        padding: 5px 30px;
        border-radius: 15px;
    }
    .grid-pricing {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: 100%;
        grid-column-gap: 10px;
        grid-row-gap: 20px;
    }
    .grid-pricing .card {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        padding: 30px 50px;
        border-radius: 15px;
        border: 1px solid #f0f0f0;
        transition: .5s ease-in-out;
    }
    .grid-pricing .card:hover {
        box-shadow: var(--box-shadow-1);
        transform: translateY(-5%);
    }
    .grid-pricing .card h5 {
        font-weight: bold;
        margin: 20px 0px;
    }
    .grid-pricing .card h2 span {
        font-size: var(--size-14px);
        position: relative;
        top: -5px;
    }
    .grid-pricing .card h2 {
        margin: 20px 0px;
        font-weight: bold;
    }
    .grid-pricing .card h2 small {
        font-size: var(--size-12px);
    }
    .grid-pricing .card h6 {
        font-size: var(--size-16px);
        font-weight: 300;
    }
    .grid-pricing .card ul {
        list-style: none;
        line-height: 2;
        padding: 0;
    }
    .grid-pricing .card ul i {
        color: var(--whats-color);
    }
    .grid-pricing .card .li-muted {
        color: #f0f0f0;
        font-style: italic;
    }
    /* checkbox */
    .switch {
        display: inline-block;
        height: 34px;
        position: relative;
        width: 60px;
    }
    .switch input {
        display: none;
    }
    .slider {
        background-color: var(--main-color);
        bottom: 0;
        cursor: pointer;
        left: 0;
        position: absolute;
        right: 0;
        top: 0;
        transition: .4s;
    }
    .slider:before {
        background-color: #fff;
        bottom: 4px;
        content: "";
        height: 26px;
        left: 4px;
        position: absolute;
        transition: .4s;
        width: 26px;
    }
    input:checked+.slider {
        background-color: var(--main-color);
        ;
    }
    input:checked+.slider:before {
        transform: translateX(26px);
    }
    .slider.round {
        border-radius: 34px;
    }
    .slider.round:before {
        border-radius: 50%;
    }
    /* nabvar */
    nav {
        padding: 20px 0px;
        margin: 0px 0px;
        position: fixed !important;
        z-index: 99;
        top: 0;
        width: 100%;
        -webkit-box-shadow: 4px 11px 15px -7px rgba(97, 97, 97, 0.25);
        box-shadow: 4px 11px 15px -7px rgba(97, 97, 97, 0.25);
    }
    nav .navbar-brand * {
        font-size: var(--font-18px) !important;
        font-weight: 300 !important;
        position: relative;
        float: right;
    }
    nav .navbar-nav {
        font-size: var(--font-14px) !important;
        font-weight: 600 !important;
        text-transform: uppercase;
        padding: 0px 5px;
        margin: 0px 5px;
        position: relative;
    }
    nav .navbar-nav i {
        color: var(--main-color);
    }
    nav .nav-contact:hover {
        background-color: var(--hard-dark-color);
        color: var(--white-color);
    }
    .logo img {
        width: 100px;
    }
    .navbar-expand-lg .navbar-collapse {
        justify-content: right;
    }
    .navbar-nav li {
        text-transform: none;
        margin: 0px 10px;
        font-weight: 600;
    }
    .btn-registro {
        margin-left: 0px;
        width: 100px;
        text-align: center;
        padding: 5px 10px;
        background-color: transparent;
        border: var(--main-color) 1px solid;
        color: var(--main-color) !important;
        border-radius: 50px;
        transition: .5s ease-in-out;
    }
    .btn-login {
        margin-left: 0px;
        width: 100px;
        text-align: center;
        padding: 10px 20px;
        background-color: var(--main-color);
        color: var(--white-color) !important;
        border-radius: 50px;
        transition: .5s ease-in-out;
    }
    .btn-login:hover,
    .btn-login:focus,
    .btn-login:active {
        border: 1px solid var(--hover-main-color);
        background-color: transparent;
        color: var(--main-color) !important;
    }
    .btn-fill {
        margin-left: 0px;
        width: 100px;
        text-align: center;
        padding: 10px 20px;
        background-color: var(--main-color);
        color: var(--white-color) !important;
        border-radius: 50px;
        transition: .5s ease-in-out;
    }
    .btn-fill:hover,
    .btn-fill:focus,
    .btn-fill:active {
        border: 1px solid var(--hover-main-color);
        background-color: transparent;
        color: var(--main-color) !important;
    }
    /* section 1 */
    .bg-section-1 {
        /* img optional */
        /* background: url(../img/stock/mainslider-bg003.jpg);
        background-position: 0px, -50px; */
        /* img actual */
        background: url(../img/stock/BlogWellzenTools.jpg);
        background-repeat: no-repeat;
        background-position: 0px, 0px;
        background-size: cover;
        background-attachment: fixed;
        height: 620px;
        position: relative;
        -webkit-transition: all 1.4s cubic-bezier(.42, 0, .58, 1);
        transition: all .5s cubic-bezier(.42, 0, .58, 1);
    }
    .bg-section-1-slider-2 {
        /* img optional */
        background: url(../img/stock/mainslider-bg003.jpg);
        background-position: 0px, -50px;
        /* img actual */
        background-repeat: no-repeat;
        background-position: 0px, 0px;
        background-size: cover;
        height: 620px;
        position: relative;
        -webkit-transition: all .5s cubic-bezier(.42, 0, .58, 1);
        transition: all .5s cubic-bezier(.42, 0, .58, 1);
    }
    .bg-section-1-slider-3 {
        /* img optional */
        background: url(../img/stock/cta-bg-two.jpg);
        background-position: 0px, -50px;
        /* img actual */
        background-repeat: no-repeat;
        background-position: 0px, 0px;
        background-size: cover;
        height: 620px;
        position: relative;
        -webkit-transition: all .5s cubic-bezier(.42, 0, .58, 1);
        transition: all .5s cubic-bezier(.42, 0, .58, 1);
    }
    .bg-section-1-slider-4 {
        /* img optional */
        background: url(../img/stock/slider-landing.jpg);
        background-position: 0px, -50px;
        /* img actual */
        background-repeat: no-repeat;
        background-position: 0px, 0px;
        background-size: cover;
        height: 620px;
        position: relative;
        -webkit-transition: all .5s cubic-bezier(.42, 0, .58, 1);
        transition: all .5s cubic-bezier(.42, 0, .58, 1);
    }
    .circle {
        height: 12px;
        width: 12px;
        border: 2px solid var(--main-color);
        border-radius: 50%;
        display: inline-block;
        cursor: pointer;
        margin: 0px 4px;
    }
    /* .active {
            border: none;
            background-color: var(--main-color);
            transition: ease-in-out .2s;
        } */
    .circle:hover {
        border: none;
        background-color: var(--main-color);
        transition: ease-in-out .2s;
    }
    .bg-section-1 .fa-chevron-left {
        position: absolute;
        top: 50%;
        left: 2%;
        background-color: rgba(241, 241, 241, 0.431);
        padding: 20px;
        border-radius: 50px;
        cursor: pointer;
    }
    .bg-section-1 .fa-chevron-left:hover {
        color: var(--white-color);
        transition: ease-in-out .2s;
    }
    .bg-section-1 .fa-chevron-right {
        position: absolute;
        top: 50%;
        left: 96%;
        background-color: rgba(241, 241, 241, 0.431);
        padding: 20px;
        border-radius: 50px;
        cursor: pointer;
    }
    .bg-section-1 .fa-chevron-right:hover {
        color: var(--white-color);
        transition: ease-in-out .2s;
    }
    .btn-section-1 {
        position: absolute;
        top: 94%;
        left: 96%;
        transform: translateX(-50%) translateY(-50%);
        display: block;
    }
    .circle-btn {
        height: 20px;
        width: 20px;
        border: 2px solid var(--gray-color);
        border-radius: 50%;
        display: inline-block;
        cursor: pointer;
        margin: 0px 4px;
    }
    /* .active {
            border: none;
            background-color: var(--main-color);
            transition: ease-in-out .2s;
        } */
    .circle-btn:hover {
        border: none;
        background-color: var(--main-color);
        transition: ease-in-out .2s;
    }
    .box-section-1 {
        background-color: var(--white-color);
        width: 20%;
        height: auto;
        box-sizing: border-box;
        margin: 10px;
        padding: 20px;
        border-radius: 15px;
        position: relative;
        top: 40%;
        left: 10%;
        transform: translateX(30%) translateY(-20%);
        box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12)
    }
    /* contents section-1 */
    .content-1-section-1 {
        position: absolute;
        top: 20%;
        left: 39%;
        transition: ease-in-out .2s;
    }
    .content-1-section-1 h2 {
        font-size: 50px;
        font-weight: 700;
        font-family: var(--poppins);
        letter-spacing: 1px;
        width: 100%;
        animation-duration: .8s;
        animation-name: slidein;
    }
    .content-1-section-1 h3 {
        font-size: 30px;
        border-radius: 15px;
        font-weight: 400;
        font-family: var(--poppins);
        background-color: var(--bg-light-second-color);
        padding: 20px;
        width: 100%;
        animation-duration: .8s;
        animation-name: slidein;
    }
    .content-2-section-1 {
        position: absolute;
        top: 20%;
        left: 39%;
        transition: ease-in-out .2s;
    }
    .content-2-section-1 h2 {
        font-size: 50px;
        font-weight: 700;
        font-family: var(--poppins);
        letter-spacing: 1px;
        width: 100%;
        animation-duration: .8s;
        animation-name: slidein;
    }
    .content-2-section-1 h3 {
        font-size: 30px;
        border-radius: 15px;
        font-weight: 400;
        font-family: var(--poppins);
        width: 100%;
        animation-duration: .8s;
        animation-name: slidein;
    }
    .content-3-section-1 {
        position: absolute;
        top: 20%;
        left: 39%;
        transition: ease-in-out .2s;
    }
    .content-3-section-1 h2 {
        font-size: 35px;
        font-weight: 700;
        letter-spacing: 1px;
        font-family: var(--poppins);
        letter-spacing: 1px;
        text-transform: uppercase;
        width: 100%;
        animation-duration: .8s;
        animation-name: slidein;
    }
    .content-3-section-1 h3 {
        font-size: 20px;
        border-radius: 15px;
        font-weight: 400;
        font-family: var(--poppins);
        width: 100%;
        animation-duration: .8s;
        animation-name: slidein;
    }
    .content-3-section-1 a {
        margin: 10px 0px;
        animation-duration: .8s;
        animation-name: slideFadeIn;
    }
    .content-3-section-1 i {
        margin: 0px 5px;
        animation-duration: .8s;
        animation-name: slideFadeIn;
    }
    .floating-speed i {
        animation-name: floating;
        animation-duration: 1s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out;
    }
    .box-section-1 h3 {
        font-size: 30px;
        color: var(--dark-color);
        font-weight: 700;
    }
    .box-section-1 p {
        bottom: 0px;
        color: var(--dark-color);
        font-size: var(--font-16px);
        font-weight: 300;
    }
    /* section 2 */
    .bg-section-2 {
        background-color: var(--bg-second-color);
        padding: 100px 0px;
        text-align: center;
    }
    .box-section-2 h2 {
        font-size: 50px;
        font-family: var(--poppins);
        padding: 10px 0px;
    }
    .box-section-2 p {
        color: var(--dark-color);
        font-size: var(--font-18px);
        padding: 0px 400px;
        line-height: 1.9;
        font-weight: 500;
    }
    .flex-days-section-2 {
        display: flex;
        flex-direction: row;
        justify-content: center;
        flex-flow: wrap;
        align-items: center;
    }
    .flex-days-section-2 div {
        background: var(--second-color);
        margin: 0px 20px;
        padding: 5px 20px;
        border-radius: 5px;
        cursor: pointer;
    }
    .flex-days-section-2 div:hover {
        background-color: var(--main-color) !important;
        color: var(--white-color);
        box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12)
    }
    .day-active {
        background-color: var(--main-color) !important;
        color: var(--white-color);
        box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12)
    }
    .flex-content-section-2 {
        margin: 40px 0px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        flex-flow: wrap;
        align-items: center;
    }
    .content-2-section-2 {
        margin: 0px 10px;
        border-radius: 5px;
        text-align: left;
        background-color: var(--white-color);
        padding: 50px 30px;
    }
    .flex-content-section-2 div img {
        width: 480px;
        background-color: transparent !important;
    }
    .flex-content-section-2 div p {
        color: var(--dark-color);
        font-size: var(--font-16px);
        font-weight: 300;
    }
    .flex-content-section-2 div span {
        background-color: var(--bg-second-color);
        font-weight: 500;
    }
    .flex-content-section-2 div h3 {
        color: var(--dark-color);
        font-size: var(--font-18px);
        line-height: 1.9;
        font-weight: 700;
    }
    .flex-content-section-2 div a {
        position: relative;
        bottom: 0px;
        color: var(--bg-main-color);
        font-weight: 500;
    }
    /* section 3 */
    .box-section-3 {
        text-align: center;
    }
    .box-section-3 h4 {
        font-size: var(--font-18px);
        text-transform: uppercase;
        color: var(--dark-color);
        letter-spacing: 2px;
        font-weight: 300;
        font-family: var(--poppins);
        padding: 10px 0px;
    }
    .box-section-3 h2 {
        font-size: 50px;
        font-family: var(--poppins);
        padding: 10px 0px;
    }
    .box-section-3 p {
        color: var(--dark-color);
        font-size: var(--font-18px);
        padding: 0px 400px;
        line-height: 1.9;
        font-weight: 500;
    }
    .flex-content-section-3 {
        margin: 20px 0px 80px 0px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        flex-flow: wrap;
        align-items: center;
    }
    .flex-content-section-3 div {
        /* background: var(--main-color); */
        margin-bottom: 80px;
        margin-left: 20px;
        border-radius: 5px;
        max-width: 210px;
        height: 200px;
        text-align: center;
    }
    .flex-content-section-3 div:hover>h3 {
        color: var(--main-color);
        transition: ease-in-out .3s;
    }
    .flex-content-section-3 div img {
        width: 150px;
        position: relative;
        margin: 50px 0px;
        top: 50%;
        left: 60%;
        transform: translateX(-90%) translateY(-50%);
    }
    .flex-content-section-3 div:hover>img {
        padding: 5px;
        transition: ease-in-out .3s;
    }
    .flex-content-section-3 h3 {
        font-size: 18px;
        font-family: var(--poppins);
        font-weight: 600;
    }
    /* section carousel*/
    .title-section h2 {
        font-family: var(--poppins);
        color: var(--dark-color);
    }
    .btn-archive {
        color: var(--tx-button);
        background: var(--bg-button);
        border-color: var(--bg-button-border);
        -webkit-transition: all 0.3s linear 0s;
        transition: all 0.3s linear 0s;
    }
    .btn-archive:hover {
        color: var(--tx-button-hover);
        background-color: var(--bg-button-hover);
        border-color: var(--bg-button-hover);
    }
    .btn-archive:focus {
        -webkit-box-shadow: 0 0 0 0.25rem var(--bg-button-focus);
        box-shadow: 0 0 0 0.25rem var(--bg-button-focus);
    }
    .posts-section {
        background: var(--bg-post-section);
        font-family: var(--font1);
        -webkit-transition: all 0.3s linear 0s;
        transition: all 0.3s linear 0s;
        height: 750px;
    }
    .posts-section .title-section {
        font-weight: 700;
        text-transform: uppercase;
        color: var(--tx-post-section-title);
    }
    .posts-section .bg-card {
        background: var(--bg-post-title);
        color: var(--tx-post-title);
    }
    .posts-section .post-body h2 {
        font-weight: 600;
    }
    .posts-section .post-info {
        font-size: 0.8rem;
        font-weight: 300;
    }
    .posts-section .text-img-over {
        position: relative;
    }
    .posts-section .text-img-over .card-img-top {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }
    .posts-section .text-img-over .overlay {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100%;
        width: 100%;
        opacity: 0;
        transition: 0.5s ease;
        background: var(--bg-post-image-overlay);
    }
    .posts-section .text-img-over:hover .overlay {
        opacity: 1;
    }
    .text-img-over img {
        width: 500px;
    }
    .posts-section .social-hover {
        color: var(--tx-color-1);
        font-size: 40px;
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        text-align: center;
    }
    .posts-section .social-hover .fa-share-alt {
        color: var(--tx-color-1);
    }
    .posts-section .social-hover .fa-share-alt:hover {
        color: var(--tx-color-1);
    }
    .post-body h2 {
        color: var(--dark-color);
        margin: 20px 0px;
        font-family: var(--poppins);
    }
    .post-body p {
        color: var(--dark-color);
        line-height: 1.8;
        font-family: var(--poppins);
    }
    /* footer */
    footer {
        background-color: var(--hover-main-color);
        color: var(--hard-dark-color);
        padding: 50px 0 0 0;
    }
    .footer-content {
        display: grid;
        grid-template-columns: 40% 40% 20%;
        grid-template-rows: 70%;
        grid-column-gap: 20px;
        grid-row-gap: 0px;
    }
    .footer-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }
    .footer-bottom {
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
    }
    .footer-2-flex {
        display: flex;
        flex-direction: column;
    }
    .footer-2-columns {
        display: flex;
    }
    footer a {
        font-size: var(--size-14px);
    }
    .footer-2 {
        padding: 0;
        margin: 0;
    }
    footer img {
        width: 150px;
        margin: 20px 0px;
    }
    footer h4 {
        color: var(--white-color);
        font-size: var(--font-14px);
        text-transform: uppercase;
        padding: 20px 0px;
        font-weight: 700;
    }
    footer p {
        color: var(--white-color) !important;
        font-size: var(--size-12px);
        width: 100%;
        line-height: 1.8;
    }
    footer ul {
        list-style-type: none;
        padding: 0px;
        color: var(--dark-color);
    }
    footer li {
        list-style-type: none;
        padding: 5px 0px;
        font-size: var(--font-14px);
    }
    footer a {
        list-style-type: none;
        padding: 5px 0px;
        color: var(--white-color);
    }
    footer a:hover {
        color: var(--main-color);
    }
    footer i {
        padding: 0px 10px;
        color: var(--third-color);
    }
    .flex-contact div {
        font-size: .8rem;
    }
    a {
        text-decoration: none;
    }
    .view-lg {
        display: block;
    }
    .hiden-lg {
        display: none;
    }
    .up-to-home {
        position: fixed;
        margin: 20px;
        z-index: 999;
        top: 90%;
        left: 95%;
        transform: translateX(-50%) translateY(-50%);
        background-color: rgba(5, 5, 5, 0.13);
        border-radius: 5px;
        padding: 20px;
        cursor: pointer;
    }
    .up-to-home i {
        color: rgb(0, 0, 0);
    }
    .up-to-home:hover i {
        color: var(--main-color);
        transition: ease-in-out .2s;
    }
     ::-webkit-scrollbar {
        width: 10px;
    }
     ::-webkit-scrollbar-track {
        background-color: rgb(253, 253, 253);
        -webkit-border-radius: 10px;
        border-radius: 10px;
    }
     ::-webkit-scrollbar-thumb {
        -webkit-border-radius: 10px;
        border-radius: 10px;
        background: var(--main-color);
    }
    .copyright {
        text-align: center;
        margin: 10px 0px;
    }
    .copyright * {
        color: #9e9e9e !important;
    }
    @keyframes slidein {
        from {
            margin-left: 50%;
            opacity: 0;
            width: 300%;
        }
        to {
            margin-left: 0%;
            opacity: 1;
            width: 100%;
        }
    }
    @keyframes floating {
        from {
            transform: translate(0, 0px);
        }
        65% {
            transform: translate(0, 5px);
        }
        to {
            transform: translate(0, -0px);
        }
    }
}

@media (min-width: 768px) and (max-width: 979px) {
    .teachers-body .card {
        display: flex;
        flex-direction: column;
    }
    .teachers-body .card img {
        width: 130px;
        height: 130px;
    }
    .fullscreen-video-container {
        height: 45vh;
    }
    .banner-section {
        max-height: 40vh;
    }
    /* youtube */
    .wp-yt {
        max-width: 100%;
    }
    .wp-yt .card-yt {
        grid-template-columns: 100%;
    }
    .wp-yt .card-yt .sub-card-yt img {
        width: 100px;
    }
    .flex-idx-testimonial {
        grid-template-columns: repeat(1, 1fr);
    }
    .title-services * {
        display: inline !important;
        font-size: .813rem;
    }
    .title-services h1 {
        color: var(--second-color);
        font-weight: 600;
    }
    /* sitemap */
    .wp-sitemap {
        grid-template-columns: repeat(1, 1fr);
    }
    .wp-program .program-event .content .content-flex {
        display: flex;
        flex-direction: column;
        margin: .8rem 0;
    }
    .wp-program .program-event .content .content-flex .track {
        font-size: .9rem;
    }
    .wp-program .program-event .content .content-flex .participant {
        font-size: .8rem;
    }
    .grid-class {
        grid-template-columns: repeat(2, 1fr);
    }
    .teachers-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr) !important;
        grid-gap: 1rem;
    }
    .teachers-grid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-gap: 1rem;
    }
    .teacher-5 {
        background-color: var(--fifth-color);
        color: var(--white-color);
        text-align: center;
        padding: 20px 0px;
        border-radius: 0 0 10px 10px;
    }
    .teacher-5 a {
        border: 1px solid var(--white-color);
        border-radius: 25px;
        color: #f9f9f9;
    }
    .teacher-5 a:hover {
        border: 1px solid var(--second-hover-color);
        border-radius: 25px;
        color: #f9f9f9;
    }
    /* grid four */
    .grid-four {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-gap: 1rem;
    }
    .teacher-4 {
        background-color: var(--fourth-color);
        color: var(--white-color);
        text-align: center;
        padding: 20px 0px;
        border-radius: 0 0 10px 10px;
    }
    .teacher-4 a {
        border: 1px solid var(--white-color);
        border-radius: 25px;
        color: #f9f9f9;
    }
    .teacher-4 a:hover {
        border: 1px solid var(--second-hover-color);
        border-radius: 25px;
        color: #f9f9f9;
    }
    .mouse-down {
        display: none;
    }
    .class-grid-content {
        grid-template-columns: 100%;
        grid-gap: 1rem;
    }
    .gallery-2 img {
        width: 200px;
        height: 200px;
        object-fit: cover;
    }
    .scrollmenu {
        background-color: var(--white-color);
        white-space: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        box-shadow: none;
        margin: 20px 0;
        padding: 10px;
        border-radius: 0px;
    }
    .scrollmenu div {
        display: inline-block;
        color: white;
        text-align: center;
        padding: 30px;
        text-decoration: none;
        cursor: pointer;
    }
    .grid-gallery {
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        grid-gap: 2rem;
        margin: 20px 0px;
        padding: 20px;
        box-shadow: var(--box-shadow-3);
        border-radius: 10px;
    }
    .grid-gallery>div {
        cursor: pointer;
    }
    .grid-two {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-gap: 2rem;
    }
    .card-body {
        flex: 1 1 auto;
        padding: 0rem;
    }
    .spinner {
        content: '';
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
        width: 30%;
        height: 10%;
        position: absolute;
        background: url("../images/logo-animation-gif.gif");
        background-size: cover;
        background-position: center;
        /* -webkit-animation: fadein .8s ease-in alternate infinite;
        -moz-animation: fadein .8s ease-in alternate infinite;
        animation: fadein .8s ease-in alternate infinite; */
    }
    /* grid-three-columns */
    .grid-three-columns {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-column-gap: 20px;
        grid-row-gap: 20px;
    }
    .flex-three-columns {
        display: flex;
        flex-direction: column;
        width: auto;
    }
    .flex-three-columns h4 {
        font-size: calc(100% - .5px);
    }
    .img-hover-zoom {
        /* height: 300px; */
        overflow: hidden;
    }
    .img-hover-zoom img {
        transition: transform .5s ease;
        width: 100%;
    }
    .img-hover-zoom:hover img {
        transform: scale(1.1);
    }
    .teacher-1 {
        background-color: var(--main-color);
        color: var(--white-color);
        text-align: center;
        padding: 20px 0px;
        border-radius: 0 0 10px 10px;
    }
    .teacher-1 a {
        border: 1px solid var(--white-color);
        border-radius: 25px;
        color: white;
    }
    .teacher-1 a:hover {
        border: 1px solid var(--main-hover-color);
        border-radius: 25px;
        color: var(--ligting-color)
    }
    .teacher-2 {
        background-color: var(--second-color);
        color: var(--white-color);
        text-align: center;
        padding: 20px 0px;
        border-radius: 0 0 10px 10px;
    }
    .teacher-2 a {
        border: 1px solid var(--white-color);
        border-radius: 25px;
        color: #f9f9f9;
    }
    .teacher-2 a:hover {
        border: 1px solid var(--second-hover-color);
        border-radius: 25px;
        color: var(--ligting-color)
    }
    .teacher-3 {
        background-color: var(--third-color);
        color: var(--white-color);
        text-align: center;
        padding: 20px 0px;
        border-radius: 0 0 10px 10px;
    }
    .teacher-3 a {
        border: 1px solid var(--white-color);
        border-radius: 25px;
        color: #f9f9f9;
    }
    .teacher-3 a:hover {
        border: 1px solid var(--second-hover-color);
        border-radius: 25px;
        color: var(--third-hover-color)
    }
    /* section 4 */
    .box-section-4 {
        text-align: center;
    }
    .box-section-4 h4 {
        font-size: var(--font-18px);
        text-transform: uppercase;
        color: var(--dark-color);
        letter-spacing: 2px;
        font-weight: 300;
        font-family: var(--poppins);
        padding: 10px 0px;
    }
    .box-section-4 h2 {
        font-family: var(--poppins);
        padding: 10px 0px;
    }
    .box-section-4 p {
        color: var(--dark-color);
        font-size: var(--font-18px);
        padding: 0px;
        line-height: 1.9;
        font-weight: 300;
    }
    .button-whats {
        position: relative;
        bottom: 0;
    }
    .button-whats a {
        width: 100px;
        text-align: center;
        padding: 10px 20px;
        background-color: var(--whats-color);
        color: var(--white-color);
        border-radius: 50px;
        transition: .3s ease-in-out;
        font-weight: 500;
    }
    .button-whats a:hover,
    .button-whats a:focus,
    .button-whats a:active {
        background-color: transparent;
        border: 1px solid var(--whats-hover-color);
        color: var(--whats-hover-color);
    }
    .class h2 {
        font-weight: 400 !important;
    }
    .class b {
        color: var(--second-color);
    }
    #icons-1 {
        display: none;
    }
    p {
        font-size: 14px !important;
        font-weight: 400;
        line-height: 1.8;
    }
    /* grid-two-columns */
    .grid-two-columns {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-column-gap: 20px;
        grid-row-gap: 20px;
    }
    .image-content {
        position: relative;
    }
    .image-content img {
        display: none;
    }
    .flex-direction-columns {
        display: flex;
        flex-direction: column;
    }
    .flex-direction-columns .card-body {
        display: flex;
        position: relative;
    }
    .flex-direction-columns img {
        width: 60%;
    }
    p {
        font-size: 14px !important;
        font-weight: 400;
        line-height: 1.8;
    }
    /* postSlider */
    #postSlider .post-body h2 {
        color: var(--main-color);
    }
    #postSlider .post-body ul {
        padding: 0;
    }
    #postSlider .post-body ul>li {
        line-height: 2.2;
        font-size: var(--size-14px);
        list-style-type: none;
    }
    #postSlider .post-body ul>li>i {
        color: var(--whats-color);
    }
    #main {
        background-image: linear-gradient(to bottom, rgba(29, 22, 33, 0.902), rgba(0, 0, 0, 0.609)), url('../admin/images/gallery/IMG_3090.jpg');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 40%;
    }
    .main-img {
        display: none;
    }
    .main-grid {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: 0;
        grid-column-gap: 60px;
        grid-row-gap: 0px;
        height: 280px;
        padding: 0px 0px;
        text-align: center;
    }
    .main-grid .card-1 {
        display: flex;
        flex-direction: column;
        padding: 82px 0px;
        z-index: 9;
    }
    .main-grid .card-1 h1 {
        font-size: 28px !important;
        color: var(--white-color);
    }
    .main-grid .card-1 p {
        color: var(--white-color);
    }
    .main-grid .card-2 .icon1 {
        display: none;
    }
    .main-grid .card-2 .icon2 {
        display: none;
    }
    .main-grid .card-2 {
        position: relative;
        z-index: 999;
    }
    .main-grid .card-2 img {
        width: 450px;
    }
    .appie-hero-area-2 {
        z-index: 10;
    }
    .appie-hero-area-2 .hero-shape-1 {
        position: absolute;
        top: 250px;
        left: 130px;
        animation: linear 20s animationFramesOne infinite;
        z-index: -1;
    }
    .appie-hero-area-2 .hero-shape-2 {
        position: absolute;
        bottom: 290px;
        left: 40px;
        animation: linear 20s animationFramesFour infinite;
        z-index: -1;
    }
    .appie-hero-area-2 .hero-shape-3 {
        display: none;
        position: absolute;
        top: 480px;
        right: 240px;
        animation: linear 20s animationFramesFive infinite;
        z-index: -1;
    }
    .appie-hero-area-2 .hero-shape-4 {
        display: none;
        position: absolute;
        top: 210px;
        right: 0px;
        animation: linear 20s animationFramesThree infinite;
        z-index: -1;
    }
    @keyframes animationFramesOne {
        0% {
            transform: translate(0px, 0px) rotate( 0deg);
        }
        20% {
            transform: translate(73px, -1px) rotate( 36deg);
        }
        40% {
            transform: translate(141px, 72px) rotate( 72deg);
        }
        60% {
            transform: translate(83px, 122px) rotate( 108deg);
        }
        80% {
            transform: translate(-40px, 72px) rotate( 144deg);
        }
        100% {
            transform: translate(0px, 0px) rotate( 0deg);
        }
    }
    @keyframes animationFramesFour {
        0% {
            transform: translate(-300px, 151px) rotate( 0deg);
        }
        100% {
            transform: translate(251px, -200px) rotate( 180deg);
        }
    }
    @keyframes animationFramesFive {
        0% {
            transform: translate(61px, -99px) rotate( 0deg);
        }
        21% {
            transform: translate(4px, -190px) rotate( 38deg);
        }
        41% {
            transform: translate(-139px, -200px) rotate( 74deg);
        }
        60% {
            transform: translate(-263px, -164px) rotate( 108deg);
        }
        80% {
            transform: translate(-195px, -49px) rotate( 144deg);
        }
        100% {
            transform: translate(-1px, 0px) rotate( 180deg);
        }
    }
    @keyframes animationFramesThree {
        0% {
            transform: translate(165px, -179px);
        }
        100% {
            transform: translate(-346px, 617px);
        }
    }
    /* services */
    #services {
        height: 100%;
        padding: 0;
        position: relative;
    }
    .flex-services {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin: 30px 0px;
    }
    .title-services h2 {
        font-size: var(--size-24px);
        font-weight: bold;
    }
    .button-services {
        position: relative;
        bottom: 0;
    }
    .button-services a {
        width: 100px;
        text-align: center;
        padding: 10px 20px;
        background-color: transparent;
        color: var(--hard-dark-color-color) !important;
        border: 1px solid var(--light-color);
        border-radius: 50px;
        transition: .3s ease-in-out;
        font-weight: 500;
    }
    .button-services a:hover,
    .button-services a:focus,
    .button-services a:active {
        background-color: #f0f0f0;
        color: var(--main-color);
    }
    /* grid services card-1 */
    .grid-services .card-1 h2 {
        font-size: 16px !important;
        font-weight: 300;
    }
    .grid-services .card-1 .date-event-start {
        position: relative;
        top: 0px;
        background-color: var(--main-color);
        padding: 0px 5px;
        font-size: 18px;
        width: 100%;
        color: var(--white-color);
    }
    /* grid services card */
    .grid-services {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-column-gap: 20px;
        grid-row-gap: 50px;
    }
    .grid-services .card {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 5px;
        height: 100%;
        border: none;
        transition: .3s ease-in-out;
    }
    .grid-services .card:hover {
        transform: translateY(-10px);
        box-shadow: var(--box-shadow-3);
    }
    .grid-services .card i {
        margin: 30px 0px;
        height: 50px;
        width: 50px;
        text-align: center;
        line-height: 50px;
        background: #2eacfc;
        color: #fff;
        border-radius: 50%;
    }
    .grid-services .card:nth-child(1) i {
        background-color: var(--main-color);
    }
    .grid-services .card:nth-child(2) i {
        background-color: var(--second-color);
    }
    .grid-services .card:nth-child(3) i {
        background-color: var(--third-color);
    }
    .grid-services .card:nth-child(4) i {
        background-color: #3ab094;
    }
    .grid-services .card:nth-child(5) i {
        background-color: var(--fourth-color)
    }
    .grid-services .card:nth-child(6) i {
        background-color: var(--fifth-color)
    }
    .grid-services .card h2 {
        font-size: var(--size-16px) !important;
        font-weight: 300;
    }
    .grid-services .card p {
        line-height: 1.5;
    }
    .grid-services .card a {
        color: var(--main-color);
        font-weight: 400 !important;
    }
    /* grid metodologias */
    .grid-metodologias {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-column-gap: 20px;
        grid-row-gap: 50px;
    }
    .grid-metodologias .card {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 5px;
        height: 100%;
        border: none;
        transition: .3s ease-in-out;
    }
    .grid-metodologias .card:hover {
        transform: translateY(-10px);
        box-shadow: var(--box-shadow-3);
    }
    .grid-metodologias .card i {
        margin: 30px 0px;
        height: 50px;
        width: 50px;
        text-align: center;
        line-height: 50px;
        background: #2eacfc;
        color: #fff;
        border-radius: 50%;
    }
    .grid-metodologias .card:nth-child(1) i {
        background-color: var(--main-color);
    }
    .grid-metodologias .card:nth-child(2) i {
        background-color: var(--second-color);
    }
    .grid-metodologias .card:nth-child(3) i {
        background-color: var(--third-color);
    }
    .grid-metodologias .card:nth-child(4) i {
        background-color: #3ab094;
    }
    .grid-metodologias .card:nth-child(5) i {
        background-color: var(--fourth-color)
    }
    .grid-metodologias .card:nth-child(6) i {
        background-color: var(--fifth-color)
    }
    .grid-metodologias .card h2 {
        font-size: var(--size-16px) !important;
        font-weight: 300;
    }
    .grid-metodologias .card p {
        line-height: 1.5;
    }
    .grid-metodologias .card a {
        color: var(--main-color);
        font-weight: 400 !important;
    }
    /* bg-parallax-2 */
    .bg-parallax-2 {
        padding-top: 2.5rem !important;
        padding-bottom: 0.5rem !important;
    }
    .bg-parallax-2 .col-md-6 {
        width: 100% !important;
    }
    .bg-parallax-2 .head-1 {
        margin-top: 40px;
    }
    .bg-parallax-2 .head-1 span {
        font-size: 16px !important;
        line-height: 1.5;
    }
    /* myItems */
    #myItems .card-title a {
        color: var(--hard-dark-color) !important;
    }
    /* steAbout */
    #steAbout h3 {
        font-size: 16px !important;
    }
    /* powerUp */
    #powerUp {
        height: 100%;
        padding: 70px 0px;
        background-color: #0e1133;
    }
    .title-powerUp {
        text-align: center;
        color: var(--white-color);
        margin-bottom: 50px;
    }
    .content-powerUp {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: 100%;
        grid-column-gap: 50px;
        grid-row-gap: 0px;
    }
    .img-powerUp {
        display: flex;
        justify-content: left;
    }
    .img-powerUp img {
        width: calc(100% - 150px);
    }
    .list-powerUp {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: flex-end;
        justify-content: space-between;
    }
    .flex-powerUp {
        display: flex;
        align-items: flex-start;
        padding: 10px 30px;
        margin: 20px 0px;
        transition: .5s ease-in-out;
        border: var(--main-color) 1px solid;
    }
    .flex-powerUp .circle {
        position: relative;
        top: 10px;
        width: 20px;
        height: 20px;
        background-color: var(--fifth-color);
    }
    .flex-powerUp .card-1 {
        color: white;
        padding: 10px 30px;
    }
    .flex-powerUp:hover {
        border: var(--fifth-color) 1px solid;
        border-radius: 10px;
    }
    /* flex contact */
    .flex-contact {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }
    .flex-contact div {
        margin: 10px;
    }
    .flex-contact div a {
        font-size: 14px;
    }
    /* banner-1 */
    #banner1 {
        padding: 10px 0px;
        background-image: url("../img/banner/banner-1.jpg");
        background-size: cover;
        background-position: center top;
        background-repeat: no-repeat;
        height: 100%;
    }
    .banner-1 {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 50%;
    }
    .banner-1 h6 {
        color: var(--main-color);
        font-weight: 500;
    }
    .banner-1 h2 {
        font-size: var(--size-38px);
        font-weight: bold;
    }
    .banner-1 p {
        margin: 20px 0px;
        line-height: 1.3;
    }
    .btn-demo {
        width: 200px;
        text-align: center;
        padding: 10px 20px;
        background-color: var(--main-color);
        color: var(--white-color) !important;
        border-radius: 50px;
        transition: .5s ease-in-out;
    }
    .btn-demo:hover,
    .btn-demo:focus,
    .btn-demo:active {
        border: 1px solid var(--hover-main-color);
        background-color: transparent;
        color: var(--main-color) !important;
    }
    .flex-button {
        margin: 10px 0px;
    }
    .flex-button a {
        margin: 0px 10px;
    }
    .btn-pricing {
        width: 200px;
        text-align: center;
        padding: 10px 20px;
        border: 1px solid var(--main-color);
        color: var(--main-color) !important;
        border-radius: 50px;
        transition: .5s ease-in-out;
    }
    .btn-pricing:hover,
    .btn-pricing:focus,
    .btn-pricing:active {
        border: 1px solid var(--hover-main-color);
        background-color: transparent;
        color: var(--main-color) !important;
    }
    .btn-pricing-active {
        width: 200px;
        text-align: center;
        padding: 10px 20px;
        background-color: var(--fifth-color);
        color: var(--main-color) !important;
        border-radius: 50px;
        transition: .5s ease-in-out;
        font-weight: bold;
    }
    .btn-pricing-active:hover,
    .btn-pricing-active:focus,
    .btn-pricing-active:active {
        border: 1px solid var(--hover-main-color);
        background-color: transparent;
        color: var(--main-color) !important;
    }
    .banner-popular-pricing {
        position: absolute;
        top: 5px;
        right: 0;
        width: 50%;
        background-color: var(--second-color);
        padding: 5px;
        border-radius: 15px 0px 0px 15px;
    }
    .banner-popular-pricing span {
        color: var(--white-color);
        font-weight: bold;
    }
    /* princing */
    #pricing {
        height: 100%;
        padding: 100px 0px;
    }
    .princing-1 {
        text-align: center;
        margin: 30px 0px;
    }
    .princing-1 h2 {
        font-weight: bold;
        font-size: var(--size-38px);
    }
    .pricing-toggle {
        display: flex;
        justify-content: center;
        padding: 20px;
    }
    .pricing-toggle ul {
        display: flex;
        list-style: none;
        border: 1px solid #bbbbbb;
        border-radius: 25px;
        text-align: center;
        padding: 10px 0px;
    }
    .pricing-toggle li {
        margin: 0px 10px;
    }
    .pricing-toggle a {
        color: var(--hard-dark-color);
        cursor: pointer;
    }
    .pricing-toggle .actived {
        background-color: var(--main-color);
        color: var(--white-color);
        padding: 5px 30px;
        border-radius: 15px;
    }
    .grid-pricing {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: 100%;
        grid-column-gap: 10px;
        grid-row-gap: 20px;
    }
    .grid-pricing .card {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        padding: 10px;
        border-radius: 15px;
        border: 1px solid #f0f0f0;
        transition: .5s ease-in-out;
    }
    .grid-pricing .card:hover {
        box-shadow: var(--box-shadow-1);
        transform: translateY(-5%);
    }
    .grid-pricing .card h5 {
        font-weight: bold;
        margin: 20px 0px;
    }
    .grid-pricing .card h2 span {
        font-size: var(--size-14px);
        position: relative;
        top: -5px;
    }
    .grid-pricing .card h2 {
        margin: 20px 0px;
        font-weight: bold;
    }
    .grid-pricing .card h2 small {
        font-size: var(--size-12px);
    }
    .grid-pricing .card h6 {
        font-size: var(--size-16px);
        font-weight: 300;
    }
    .grid-pricing .card ul {
        list-style: none;
        line-height: 2;
        padding: 0;
    }
    .grid-pricing .card ul i {
        color: var(--whats-color);
    }
    .grid-pricing .card .li-muted {
        color: #f0f0f0;
        font-style: italic;
    }
    /* checkbox */
    .switch {
        display: inline-block;
        height: 34px;
        position: relative;
        width: 60px;
    }
    .switch input {
        display: none;
    }
    .slider {
        background-color: var(--main-color);
        bottom: 0;
        cursor: pointer;
        left: 0;
        position: absolute;
        right: 0;
        top: 0;
        transition: .4s;
    }
    .slider:before {
        background-color: #fff;
        bottom: 4px;
        content: "";
        height: 26px;
        left: 4px;
        position: absolute;
        transition: .4s;
        width: 26px;
    }
    input:checked+.slider {
        background-color: var(--main-color);
        ;
    }
    input:checked+.slider:before {
        transform: translateX(26px);
    }
    .slider.round {
        border-radius: 34px;
    }
    .slider.round:before {
        border-radius: 50%;
    }
    /* nabvar */
    nav {
        padding: 20px 0px;
        margin: 0px 0px;
        position: fixed !important;
        z-index: 99;
        top: 0;
        width: 100%;
        -webkit-box-shadow: 4px 11px 15px -7px rgba(97, 97, 97, 0.25);
        box-shadow: 4px 11px 15px -7px rgba(97, 97, 97, 0.25);
    }
    nav .navbar-brand * {
        font-size: var(--font-18px) !important;
        font-weight: 300 !important;
        position: relative;
        float: right;
    }
    nav .navbar-nav {
        font-size: var(--font-14px) !important;
        font-weight: 600 !important;
        text-transform: uppercase;
        padding: 0px 5px;
        margin: 0px 5px;
        position: relative;
    }
    nav .navbar-nav i {
        color: var(--main-color);
    }
    nav .nav-contact:hover {
        background-color: var(--hard-dark-color);
        color: var(--white-color);
    }
    .logo img {
        width: 80px;
    }
    .navbar-expand-lg .navbar-collapse {
        justify-content: right;
    }
    .navbar-light .navbar-toggler {
        border: none;
    }
    .navbar-nav li {
        text-transform: none;
        margin: 0px 10px;
        font-weight: 600;
    }
    /* section 1 */
    .bg-section-1 {
        /* img optional */
        /* background: url(../img/stock/mainslider-bg003.jpg);
        background-position: 0px, -50px; */
        /* img actual */
        background: url(../img/stock/BlogWellzenTools.jpg);
        background-repeat: no-repeat;
        background-position: 0px, 0px;
        background-size: cover;
        background-attachment: fixed;
        height: 620px;
        position: relative;
        -webkit-transition: all 1.4s cubic-bezier(.42, 0, .58, 1);
        transition: all .5s cubic-bezier(.42, 0, .58, 1);
    }
    .bg-section-1-slider-2 {
        /* img optional */
        background: url(../img/stock/mainslider-bg003.jpg);
        background-position: 0px, -50px;
        /* img actual */
        background-repeat: no-repeat;
        background-position: 0px, 0px;
        background-size: cover;
        height: 620px;
        position: relative;
        -webkit-transition: all .5s cubic-bezier(.42, 0, .58, 1);
        transition: all .5s cubic-bezier(.42, 0, .58, 1);
    }
    .bg-section-1-slider-3 {
        /* img optional */
        background: url(../img/stock/cta-bg-two.jpg);
        background-position: 0px, -50px;
        /* img actual */
        background-repeat: no-repeat;
        background-position: 0px, 0px;
        background-size: cover;
        height: 620px;
        position: relative;
        -webkit-transition: all .5s cubic-bezier(.42, 0, .58, 1);
        transition: all .5s cubic-bezier(.42, 0, .58, 1);
    }
    .bg-section-1-slider-4 {
        /* img optional */
        background: url(../img/stock/slider-landing.jpg);
        background-position: 0px, -50px;
        /* img actual */
        background-repeat: no-repeat;
        background-position: 0px, 0px;
        background-size: cover;
        height: 620px;
        position: relative;
        -webkit-transition: all .5s cubic-bezier(.42, 0, .58, 1);
        transition: all .5s cubic-bezier(.42, 0, .58, 1);
    }
    .circle {
        height: 12px;
        width: 12px;
        border: 2px solid var(--main-color);
        border-radius: 50%;
        display: inline-block;
        cursor: pointer;
        margin: 0px 4px;
    }
    /* .active {
            border: none;
            background-color: var(--main-color);
            transition: ease-in-out .2s;
        } */
    .circle:hover {
        border: none;
        background-color: var(--main-color);
        transition: ease-in-out .2s;
    }
    .bg-section-1 .fa-chevron-left {
        position: absolute;
        top: 50%;
        left: 2%;
        background-color: rgba(241, 241, 241, 0.431);
        padding: 20px;
        border-radius: 50px;
        cursor: pointer;
    }
    .bg-section-1 .fa-chevron-left:hover {
        color: var(--white-color);
        transition: ease-in-out .2s;
    }
    .bg-section-1 .fa-chevron-right {
        position: absolute;
        top: 50%;
        left: 96%;
        background-color: rgba(241, 241, 241, 0.431);
        padding: 20px;
        border-radius: 50px;
        cursor: pointer;
    }
    .bg-section-1 .fa-chevron-right:hover {
        color: var(--white-color);
        transition: ease-in-out .2s;
    }
    .btn-section-1 {
        position: absolute;
        top: 94%;
        left: 96%;
        transform: translateX(-50%) translateY(-50%);
        display: block;
    }
    .circle-btn {
        height: 20px;
        width: 20px;
        border: 2px solid var(--gray-color);
        border-radius: 50%;
        display: inline-block;
        cursor: pointer;
        margin: 0px 4px;
    }
    /* .active {
            border: none;
            background-color: var(--main-color);
            transition: ease-in-out .2s;
        } */
    .circle-btn:hover {
        border: none;
        background-color: var(--main-color);
        transition: ease-in-out .2s;
    }
    .box-section-1 {
        background-color: var(--white-color);
        width: 20%;
        height: auto;
        box-sizing: border-box;
        margin: 10px;
        padding: 20px;
        border-radius: 15px;
        position: relative;
        top: 40%;
        left: 10%;
        transform: translateX(30%) translateY(-20%);
        box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12)
    }
    /* contents section-1 */
    .content-1-section-1 {
        position: absolute;
        top: 20%;
        left: 39%;
        transition: ease-in-out .2s;
    }
    .content-1-section-1 h2 {
        font-size: 50px;
        font-weight: 700;
        font-family: var(--poppins);
        letter-spacing: 1px;
        width: 100%;
        animation-duration: .8s;
        animation-name: slidein;
    }
    .content-1-section-1 h3 {
        font-size: 30px;
        border-radius: 15px;
        font-weight: 400;
        font-family: var(--poppins);
        background-color: var(--bg-light-second-color);
        padding: 20px;
        width: 100%;
        animation-duration: .8s;
        animation-name: slidein;
    }
    .content-2-section-1 {
        position: absolute;
        top: 20%;
        left: 39%;
        transition: ease-in-out .2s;
    }
    .content-2-section-1 h2 {
        font-size: 50px;
        font-weight: 700;
        font-family: var(--poppins);
        letter-spacing: 1px;
        width: 100%;
        animation-duration: .8s;
        animation-name: slidein;
    }
    .content-2-section-1 h3 {
        font-size: 30px;
        border-radius: 15px;
        font-weight: 400;
        font-family: var(--poppins);
        width: 100%;
        animation-duration: .8s;
        animation-name: slidein;
    }
    .content-3-section-1 {
        position: absolute;
        top: 20%;
        left: 39%;
        transition: ease-in-out .2s;
    }
    .content-3-section-1 h2 {
        font-size: 35px;
        font-weight: 700;
        letter-spacing: 1px;
        font-family: var(--poppins);
        letter-spacing: 1px;
        text-transform: uppercase;
        width: 100%;
        animation-duration: .8s;
        animation-name: slidein;
    }
    .content-3-section-1 h3 {
        font-size: 20px;
        border-radius: 15px;
        font-weight: 400;
        font-family: var(--poppins);
        width: 100%;
        animation-duration: .8s;
        animation-name: slidein;
    }
    .content-3-section-1 a {
        margin: 10px 0px;
        animation-duration: .8s;
        animation-name: slideFadeIn;
    }
    .content-3-section-1 i {
        margin: 0px 5px;
        animation-duration: .8s;
        animation-name: slideFadeIn;
    }
    .floating-speed i {
        animation-name: floating;
        animation-duration: 1s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out;
    }
    .box-section-1 h3 {
        font-size: 30px;
        color: var(--dark-color);
        font-weight: 700;
    }
    .box-section-1 p {
        bottom: 0px;
        color: var(--dark-color);
        font-size: var(--font-16px);
        font-weight: 300;
    }
    /* section 2 */
    .bg-section-2 {
        background-color: var(--bg-second-color);
        padding: 100px 0px;
        text-align: center;
    }
    .box-section-2 h2 {
        font-size: 50px;
        font-family: var(--poppins);
        padding: 10px 0px;
    }
    .box-section-2 p {
        color: var(--dark-color);
        font-size: var(--font-18px);
        padding: 0px 400px;
        line-height: 1.9;
        font-weight: 500;
    }
    .flex-days-section-2 {
        display: flex;
        flex-direction: row;
        justify-content: center;
        flex-flow: wrap;
        align-items: center;
    }
    .flex-days-section-2 div {
        background: var(--second-color);
        margin: 0px 20px;
        padding: 5px 20px;
        border-radius: 5px;
        cursor: pointer;
    }
    .flex-days-section-2 div:hover {
        background-color: var(--main-color) !important;
        color: var(--white-color);
        box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12)
    }
    .day-active {
        background-color: var(--main-color) !important;
        color: var(--white-color);
        box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12)
    }
    .flex-content-section-2 {
        margin: 40px 0px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        flex-flow: wrap;
        align-items: center;
    }
    .content-2-section-2 {
        margin: 0px 10px;
        border-radius: 5px;
        text-align: left;
        background-color: var(--white-color);
        padding: 50px 30px;
    }
    .flex-content-section-2 div img {
        width: 480px;
        background-color: transparent !important;
    }
    .flex-content-section-2 div p {
        color: var(--dark-color);
        font-size: var(--font-16px);
        font-weight: 300;
    }
    .flex-content-section-2 div span {
        background-color: var(--bg-second-color);
        font-weight: 500;
    }
    .flex-content-section-2 div h3 {
        color: var(--dark-color);
        font-size: var(--font-18px);
        line-height: 1.9;
        font-weight: 700;
    }
    .flex-content-section-2 div a {
        position: relative;
        bottom: 0px;
        color: var(--bg-main-color);
        font-weight: 500;
    }
    /* section 3 */
    .box-section-3 {
        text-align: center;
    }
    .box-section-3 h4 {
        font-size: var(--font-18px);
        text-transform: uppercase;
        color: var(--dark-color);
        letter-spacing: 2px;
        font-weight: 300;
        font-family: var(--poppins);
        padding: 10px 0px;
    }
    .box-section-3 h2 {
        font-family: var(--poppins);
        padding: 10px 0px;
    }
    .box-section-3 p {
        color: var(--dark-color);
        font-size: var(--font-18px);
        padding: 0px 400px;
        line-height: 1.9;
        font-weight: 500;
    }
    .flex-content-section-3 {
        margin: 20px 0px 80px 0px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        flex-flow: wrap;
        align-items: center;
    }
    .flex-content-section-3 div {
        /* background: var(--main-color); */
        margin-bottom: 80px;
        margin-left: 20px;
        border-radius: 5px;
        max-width: 210px;
        height: 200px;
        text-align: center;
    }
    .flex-content-section-3 div:hover>h3 {
        color: var(--main-color);
        transition: ease-in-out .3s;
    }
    .flex-content-section-3 div img {
        width: 150px;
        position: relative;
        margin: 50px 0px;
        top: 50%;
        left: 60%;
        transform: translateX(-90%) translateY(-50%);
    }
    .flex-content-section-3 div:hover>img {
        padding: 5px;
        transition: ease-in-out .3s;
    }
    .flex-content-section-3 h3 {
        font-size: 18px;
        font-family: var(--poppins);
        font-weight: 600;
    }
    /* section carousel*/
    .title-section h2 {
        font-family: var(--poppins);
        color: var(--dark-color);
    }
    .btn-archive {
        color: var(--tx-button);
        background: var(--bg-button);
        border-color: var(--bg-button-border);
        -webkit-transition: all 0.3s linear 0s;
        transition: all 0.3s linear 0s;
    }
    .btn-archive:hover {
        color: var(--tx-button-hover);
        background-color: var(--bg-button-hover);
        border-color: var(--bg-button-hover);
    }
    .btn-archive:focus {
        -webkit-box-shadow: 0 0 0 0.25rem var(--bg-button-focus);
        box-shadow: 0 0 0 0.25rem var(--bg-button-focus);
    }
    .posts-section {
        background: var(--bg-post-section);
        font-family: var(--font1);
        -webkit-transition: all 0.3s linear 0s;
        transition: all 0.3s linear 0s;
        height: auto;
    }
    .posts-section .title-section {
        font-weight: 700;
        text-transform: uppercase;
        color: var(--tx-post-section-title);
    }
    .posts-section .bg-card {
        background: var(--bg-post-title);
        color: var(--tx-post-title);
    }
    .posts-section .post-body h2 {
        font-weight: 600;
    }
    .posts-section .post-info {
        font-size: 0.8rem;
        font-weight: 300;
    }
    .posts-section .text-img-over {
        position: relative;
    }
    .posts-section .text-img-over .card-img-top {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }
    .posts-section .text-img-over .overlay {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100%;
        width: 100%;
        opacity: 0;
        transition: 0.5s ease;
        background: var(--bg-post-image-overlay);
    }
    .posts-section .text-img-over:hover .overlay {
        opacity: 1;
    }
    .text-img-over img {
        width: 500px;
    }
    .posts-section .social-hover {
        color: var(--tx-color-1);
        font-size: 40px;
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        text-align: center;
    }
    .posts-section .social-hover .fa-share-alt {
        color: var(--tx-color-1);
    }
    .posts-section .social-hover .fa-share-alt:hover {
        color: var(--tx-color-1);
    }
    .post-body h2 {
        color: var(--dark-color);
        margin: 20px 0px;
        font-family: var(--poppins);
    }
    .post-body p {
        color: var(--dark-color);
        line-height: 1.8;
        font-family: var(--poppins);
    }
    /* footer */
    footer {
        background-color: var(--hover-main-color);
        color: var(--white-color);
        padding: 50px 0 0 0;
    }
    .footer-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 1rem;
    }
    .footer-content {
        display: grid;
        grid-template-columns: 40% 40% 20%;
        grid-template-rows: 70%;
        grid-column-gap: 20px;
        grid-row-gap: 0px;
    }
    .footer-bottom {
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
    }
    .footer-2-flex {
        display: flex;
        flex-direction: column;
    }
    .footer-2-columns {
        display: flex;
    }
    footer a {
        font-size: 0.7rem;
    }
    .footer-2 {
        padding: 0;
        margin: 0;
    }
    footer img {
        width: 150px;
        margin: 20px 0px;
    }
    footer h4 {
        font-size: 0.8rem;
        text-transform: uppercase;
        padding: 20px 0px;
        font-weight: 700;
    }
    footer p {
        color: var(--white-color);
        font-size: 0.7rem !important;
        width: 100%;
        line-height: 1.8;
    }
    footer .social-media {
        display: flex;
    }
    footer ul {
        list-style-type: none;
        padding: 0px;
        color: var(--white-color);
    }
    footer li {
        list-style-type: none;
        padding: 5px 0px;
        font-size: var(--font-14px);
    }
    footer a {
        list-style-type: none;
        padding: 5px 0px;
        color: var(--white-color);
    }
    footer a:hover {
        color: var(--third-color);
    }
    footer i {
        padding: 0px 10px;
        color: var(--third-color);
    }
    a {
        text-decoration: none;
    }
    .view-lg {
        display: block;
    }
    .hiden-lg {
        display: none;
    }
    .up-to-home {
        position: fixed;
        margin: 20px;
        z-index: 999;
        top: 90%;
        left: 95%;
        transform: translateX(-50%) translateY(-50%);
        background-color: rgba(5, 5, 5, 0.13);
        border-radius: 5px;
        padding: 20px;
        cursor: pointer;
    }
    .up-to-home i {
        color: rgb(0, 0, 0);
    }
    .up-to-home:hover i {
        color: var(--main-color);
        transition: ease-in-out .2s;
    }
     ::-webkit-scrollbar {
        width: 10px;
    }
     ::-webkit-scrollbar-track {
        background-color: rgb(253, 253, 253);
        -webkit-border-radius: 10px;
        border-radius: 10px;
    }
     ::-webkit-scrollbar-thumb {
        -webkit-border-radius: 10px;
        border-radius: 10px;
        background: var(--main-color);
    }
    .copyright {
        text-align: center;
        margin: 20px 0px;
        font-size: 14px;
    }
    .copyright * {
        color: #9d00e0 !important;
        font-size: 0.7rem;
    }
    @keyframes slidein {
        from {
            margin-left: 50%;
            opacity: 0;
            width: 300%;
        }
        to {
            margin-left: 0%;
            opacity: 1;
            width: 100%;
        }
    }
    @keyframes floating {
        from {
            transform: translate(0, 0px);
        }
        65% {
            transform: translate(0, 5px);
        }
        to {
            transform: translate(0, -0px);
        }
    }
    @keyframes iconFloating {
        from {
            transform: translate(0, 0px);
            opacity: .5;
        }
        65% {
            transform: translate(0, 20px);
            opacity: 1;
        }
        to {
            transform: translate(0, -0px);
            opacity: .5;
        }
    }
}

@media (max-width: 480px) {
    .xs-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        margin: 1rem 0;
    }
    .xs-content .tt-title {
        font-size: 20px;
        font-family: var(--poppins);
        padding: 10px 0px;
        font-weight: 600;
    }
    .xs-content .description {
        font-size: .813rem;
    }
    .xs-content .btn-main {
        font-size: .813rem;
        color: white;
        background-color: var(--main-color);
        padding: 10px 20px;
    }
    .fullscreen-video-container {
        height: 50vh;
    }
    .fullscreen-video-container video {
        width: 180%;
    }
    .overlay-text-container {
        width: 100%;
    }
    /* youtube */
    .wp-yt .card-yt .sub-card-yt .title {
        font-size: 20px;
    }
    .wp-yt {
        max-width: 100%;
    }
    .wp-yt .card-yt {
        grid-template-columns: 100%;
    }
    .wp-yt .card-yt .sub-card-yt img {
        width: 100px;
    }
    .wp-yt .card-btn {
        flex-direction: column;
        padding: 10px;
        margin: 1rem 0;
        text-align: center;
    }
    .flex-idx-testimonial {
        grid-template-columns: repeat(1, 1fr);
    }
    .bg-xmas .img-xmas img {
        width: 190px;
        opacity: .2;
    }
    #winter-ads {
        display: none;
    }
    .wp-card {
        display: flex;
        flex-direction: row;
        gap: 1px;
    }
    /* sitemap */
    .wp-sitemap {
        grid-template-columns: repeat(1, 1fr);
    }
    .wp-program .program-event .content .content-flex {
        display: flex;
        flex-direction: column;
        margin: .8rem 0;
    }
    .wp-program .program-event .content .content-flex .track {
        font-size: .8rem;
        font-style: italic;
        color: #d6eeff;
    }
    .wp-program .program-event .content .content-flex .track::before,
    .wp-program .program-event .content .content-flex .track::after {
        content: '"';
    }
    .wp-program .program-event .content .content-flex .participant {
        font-size: .9rem;
        font-weight: 500;
    }
    #promotionsSection .lg-promo {
        display: none;
    }
    #promotionsSection .xs-promo {
        display: block;
    }
    .grid-class {
        grid-template-columns: repeat(1, 1fr);
    }
    .grid-class .cc-card,
    .grid-class .cc-card .card-img,
    .grid-class .cc-card .card-content {
        justify-content: flex-start;
    }
    .teachers-body {
        grid-template-columns: repeat(1, 1fr);
    }
    .mouse-down {
        display: none;
    }
    .class-grid-content {
        grid-template-columns: 100%;
        grid-gap: 1rem;
    }
    .btn-outline-primary,
    .btn-outline-main,
    .btn-outline-dark {
        font-size: 12px;
        border: none !important;
    }
    .navbar-light .navbar-toggler {
        border: none;
        font-size: 1rem;
    }
    .navbar-toggler:focus {
        box-shadow: none;
    }
    .navbar {
        position: fixed;
    }
    .navbar-nav .dropdown-menu {
        border: none;
        background-color: transparent;
    }
    /* blog index */
    .parent-event-index {
        position: relative;
        transition: .3s ease-in-out;
    }
    .grid-event-index {
        grid-template-columns: repeat(1, 1fr);
        grid-gap: 1rem;
    }
    .main-event-index {
        display: grid;
        grid-template-columns: 30% auto;
        grid-gap: 1rem;
    }
    .img-event-index {
        position: relative;
    }
    .img-event-index img {
        display: inline;
        width: 100%;
        border-radius: 5px;
        object-fit: cover;
        transition: .4s ease-in-out;
    }
    .card-event-index {
        opacity: 1;
        transition: .4s ease-in-out;
    }
    .flex-event-index {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        bottom: 0rem;
        left: 0rem;
    }
    .category-event-index {
        font-weight: 300;
        text-transform: uppercase;
        font-size: 10px;
        color: var(--hard-dark-color);
    }
    .title-event-index {
        font-weight: 500;
        font-size: .8rem;
        text-transform: uppercase;
        color: var(--hard-dark-color);
    }
    .release-event-index {
        font-weight: 300;
        text-transform: uppercase;
        font-size: 10px;
        color: var(--hard-dark-color);
        font-style: italic;
    }
    .grid-blog-index {
        grid-template-columns: repeat(1, 1fr);
    }
    .testimonial-card p {
        font-size: 12px !important;
        line-height: 1.5;
    }
    .flex-testimonial {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        /* white-space: nowrap;
        overflow-x: auto;
        margin: 0px; */
    }
    .testimonial-card {
        flex-shrink: 0;
        width: 90%;
    }
    .description-text {
        white-space: normal;
        font-size: 12px;
    }
    .grid-promotions {
        margin: 10px 0;
    }
    /* sticky as fixed */
    .sticky {
        position: fixed;
        top: 0;
        width: 100%;
    }
    /* gallery fix img */
    .gallery-2 img {
        width: 100%;
        height: auto;
        object-fit: fill;
    }
    .scrollmenu {
        background-color: var(--white-color);
        white-space: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        box-shadow: none;
        margin: 0;
        padding: 10px;
        border-radius: 0px;
    }
    .scrollmenu div {
        display: inline-block;
        color: var(--main-color) !important;
        text-align: center;
        margin: 0 5px;
        padding: 5px !important;
        border: 1px solid var(--main-color);
        border-radius: 10px;
        text-decoration: none;
        cursor: pointer;
    }
    .bg-parallax-2 .head-1 h1 {
        font-size: 1rem;
    }
    .grid-gallery {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 2rem;
        margin: 20px 0px;
        padding: 20px;
        box-shadow: var(--box-shadow-3);
        border-radius: 10px;
    }
    .grid-gallery>div {
        cursor: pointer;
    }
    .spinner {
        content: '';
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
        width: 50%;
        height: 10%;
        position: absolute;
        background: url("../images/logo-animation-gif.gif");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        /* -webkit-animation: fadein .8s ease-in alternate infinite;
        -moz-animation: fadein .8s ease-in alternate infinite;
        animation: fadein .8s ease-in alternate infinite; */
    }
    .phrase {
        color: var(--white-color) !important;
        font-size: 24px !important;
        font-family: var(--poppins);
    }
    .bg-parallax-11 h5 {
        color: var(--white-color);
        font-style: italic;
        font-weight: 300;
        font-size: 18px !important;
    }
    .phrase span {
        font-style: italic;
    }
    .main-grid .card-1 a span {
        margin: 40px 0 !important;
    }
    /* flex-contact */
    .flex-contact {
        margin: 20px 0px;
        display: flex;
        flex-direction: column;
    }
    .flex-contact div {
        margin: 0 20px;
    }
    .flex-contact .content-1,
    .flex-contact .content-2,
    .flex-contact .content-3,
    .flex-contact .content-4 {
        display: none;
    }
    .flex-contact .content-1 a,
    .flex-contact .content-2 a,
    .flex-contact .content-3 a,
    .flex-contact .content-4 a {
        text-decoration: none;
        color: var(--white-color);
        font-size: 10px;
    }
    .flex-contact .content-1 {
        background-color: var(--main-color);
        color: var(--white-color);
    }
    .flex-contact .content-2 {
        background-color: var(--second-color);
        color: var(--white-color);
    }
    .flex-contact .content-3 {
        background-color: var(--third-color);
        color: var(--white-color);
    }
    .flex-contact .content-4 {
        background-color: var(--fourth-color);
        color: var(--white-color);
    }
    .flex-contact .contact-1 a,
    .flex-contact .contact-2 a,
    .flex-contact .contact-3 a,
    .flex-contact .contact-4 a {
        color: var(--hard-dark-color);
    }
    .flex-contact a span {
        font-size: 12px;
    }
    .contact-1 i {
        color: var(--second-color);
    }
    .contact-2 i {
        color: var(--fifth-color);
    }
    .contact-3 i {
        color: var(--main-color);
    }
    .contact-4 i {
        color: var(--whats-hover-color);
    }
    /* notice page */
    .grid-notice {
        margin-top: 3.5rem;
        display: grid;
        grid-gap: 2rem;
        grid-template-columns: repeat(1, 1fr);
    }
    .grid-notice .content-1 h3 {
        font-size: 24px;
    }
    .grid-notice .content-1 i {
        color: var(--main-color);
    }
    .grid-notice .content-3 ul {
        list-style: none;
        padding: 0px;
        margin: 10px 0;
    }
    .grid-notice .content-3 .btn {
        font-size: 12px;
    }
    .grid-notice .content-4 p,
    .grid-notice .content-4 span,
    .grid-notice .content-4 li,
    .grid-notice .content-4 a {
        font-size: 12px !important;
    }
    .bg-clases {
        background-color: white;
        padding: 10px 0;
    }
    .event-details .content-1 h3 {
        font-size: 16px;
        font-weight: 400;
    }
    .event-details .date_start,
    .event-details .date_end {
        font-size: 12px;
    }
    .event-details .content-1 i {
        color: var(--main-color);
    }
    .event-details .content-1 p {
        color: #717171;
        font-weight: 300;
    }
    .event-details .content-2 img {
        width: 100%;
        height: 250px;
        object-fit: cover;
    }
    .event-details .btn {
        font-size: 12px;
    }
    .event-details .img-hover-zoom {
        /* height: 100%; */
        overflow: hidden;
    }
    .event-details .img-hover-zoom img {
        transition: transform .5s ease;
        width: 100%;
    }
    .event-details .img-hover-zoom:hover img {
        transform: scale(1.1);
    }
    .event-details .content-3 {
        margin: 20px 0px;
    }
    .event-details .content-3 ul {
        text-decoration: none;
        list-style: none;
        padding: 0;
    }
    .event-details .content-4 ul {
        list-style: circle;
    }
    .event-details .content-4 ol {
        list-style: decimal;
    }
    .flex-suzuki {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
    }
    .flex-suzuki>div {
        margin: 5px;
    }
    .flex-suzuki>img {
        width: 100%;
    }
    .flex-suzuki h3 {
        color: var(--main-color);
    }
    .suzuki-1 p {
        font-size: var(--size-16px);
        text-align: justify;
    }
    .flex-suzuki .img-hover-zoom {
        height: auto;
        overflow: hidden;
    }
    .flex-suzuki .img-hover-zoom img {
        transition: transform .5s ease;
        width: 100%;
    }
    .flex-suzuki .img-hover-zoom:hover img {
        transform: scale(1.1);
    }
    /* about page */
    .flex-about {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }
    .grid-about {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-gap: 10px;
    }
    /* gallery */
    .bg-parallax-2 {
        background-image: linear-gradient(to bottom, rgba(36, 36, 36, 0.064), rgba(0, 0, 0, 0.33)), url('../images/bg-3.jpg');
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
    }
    .bg-parallax-2 .head-1 {
        color: var(--white-color);
        position: relative;
        margin-top: 60px;
    }
    .zoom-gallery {
        height: auto;
        overflow: hidden;
        padding: 0px;
    }
    .zoom-gallery img {
        transition: transform .5s ease;
        height: auto
    }
    .zoom-gallery:hover img {
        width: 10%;
        transform: scale(1.1);
    }
    .flex-content-gallery {
        margin: 0px !important;
        flex-direction: row;
    }
    .flex-content-gallery>div {
        cursor: pointer;
        margin: 10px 3px;
        padding: 0px 30px;
        border: 1px solid var(--main-color);
        border-radius: 10px;
        color: var(--main-color);
    }
    .flex-content-gallery>div {
        cursor: pointer;
        border: 1px solid var(--main-color);
        border-radius: 10px;
        color: var(--main-color);
    }
    .flex-content-gallery>div:hover {
        font-weight: bold;
    }
    /* navbar-two */
    #navbar-two {
        position: relative;
        background-color: var(--second-color);
        color: var(--white-color) !important;
        top: 60px;
    }
    .navbar-two {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        position: relative;
        margin: 0;
        padding: 5px 20px;
        height: 30px;
    }
    .navbar-two .content-1 p {
        font-size: 12px;
    }
    .navbar-two .content-1 b {
        color: var(--third-color) !important;
    }
    .navbar-two .content-2 {
        display: none;
    }
    .navbar-two ul {
        display: flex;
        text-decoration: none;
        list-style: none;
    }
    .bg-parallax-11 {
        background-image: linear-gradient(to bottom, rgba(36, 36, 36, 0.52), rgba(0, 0, 0, 0.73)), url('..//admin/images/gallery/IMG_3090.jpg');
        /* background: url(../images/bg8.jpg); */
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
        background-attachment: fixed;
    }
    .bg-parallax-11 .col-md-12 {
        padding: 10px;
    }
    /* grid-three-columns */
    .grid-three-columns {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-column-gap: 20px;
        grid-row-gap: 20px;
    }
    .flex-three-columns {
        display: flex;
        flex-direction: column;
        width: auto;
        height: auto;
    }
    .flex-three-columns .img-hover-zoom {
        flex: 1;
        border-radius: 10px 0px 0px 10px;
    }
    .flex-three-columns .teacher-1 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        flex: 2;
    }
    .flex-three-columns .teacher-2 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        flex: 2;
    }
    .flex-three-columns h4 {
        font-size: calc(100% - .5px);
    }
    .img-hover-zoom {
        height: auto;
        overflow: hidden;
    }
    .img-hover-zoom img {
        transition: transform .5s ease;
        width: 100%;
    }
    .img-hover-zoom:hover img {
        transform: scale(1.1);
    }
    .teacher-1 {
        background-color: var(--main-color);
        color: var(--white-color);
        text-align: center;
        padding: 10px 0px;
        border-radius: 0 10px 10px 0px;
    }
    .teacher-1 a {
        border: none;
        border-radius: none;
        color: #f9f9f9;
        font-size: 12px;
    }
    .teacher-1 a:hover {
        border: 1px solid var(--main-hover-color);
        border-radius: 25px;
        color: var(--ligting-color)
    }
    .teacher-2 {
        background-color: var(--second-color);
        color: var(--white-color);
        text-align: center;
        padding: 20px 0px;
        border-radius: 0 10px 10px 0px;
    }
    .teacher-2 a {
        border: none;
        border-radius: none;
        color: #f9f9f9;
    }
    .teacher-2 a:hover {
        border: 1px solid var(--second-hover-color);
        border-radius: 25px;
        color: var(--ligting-color)
    }
    .teacher-3 {
        background-color: var(--third-color);
        color: var(--white-color);
        text-align: center;
        padding: 20px 0px;
        border-radius: 0 10px 10px 0px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        flex: 2;
    }
    .teacher-3 a {
        border: none;
        border-radius: none;
        color: #f9f9f9;
        font-size: 12px;
    }
    .teacher-3 a:hover {
        border: 1px solid var(--second-hover-color);
        border-radius: 25px;
        color: var(--third-hover-color)
    }
    .flex-three-columns {
        flex-direction: row !important;
        margin: 1rem 0;
    }
    .teachers-grid {
        grid-template-columns: repeat(1, 1fr);
    }
    .teacher-5 {
        background-color: var(--fifth-color);
        color: var(--white-color);
        text-align: center;
        padding: 20px 0px;
        border-radius: 0 10px 10px 0px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        flex: 2;
    }
    .teacher-5 a {
        border: 1px solid var(--white-color);
        border-radius: 25px;
        color: #f9f9f9;
    }
    .teacher-5 a:hover {
        border: 1px solid var(--second-hover-color);
        border-radius: 25px;
        color: #f9f9f9;
    }
    .slick-slide img {
        height: 150px;
    }
    .teacher-4 {
        background-color: var(--fourth-color);
        color: var(--white-color);
        text-align: center;
        padding: 20px 0px;
        border-radius: 0 10px 10px 0px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        flex: 2;
    }
    .teacher-4 a {
        border: 1px solid var(--white-color);
        border-radius: 25px;
        color: #f9f9f9;
    }
    .teacher-4 a:hover {
        border: 1px solid var(--second-hover-color);
        border-radius: 25px;
        color: #f9f9f9;
    }
    /* section 4 */
    .box-section-4 {
        text-align: center;
    }
    .box-section-4 h4 {
        font-size: var(--font-18px);
        text-transform: uppercase;
        color: var(--dark-color);
        letter-spacing: 2px;
        font-weight: 300;
        font-family: var(--poppins);
        padding: 10px 0px;
    }
    .box-section-4 h2 {
        font-size: 20px;
        font-family: var(--poppins);
        padding: 10px 0px;
    }
    .box-section-4 p {
        color: var(--dark-color);
        font-size: var(--font-18px);
        padding: 0px;
        line-height: 1.9;
        font-weight: 300;
    }
    .button-whats {
        position: relative;
        bottom: 0;
    }
    .button-whats a {
        width: 100px;
        text-align: center;
        padding: 10px 20px;
        background-color: var(--whats-color);
        color: var(--white-color);
        border-radius: 50px;
        transition: .3s ease-in-out;
        font-weight: 500;
    }
    .button-whats a:hover,
    .button-whats a:focus,
    .button-whats a:active {
        background-color: transparent;
        border: 1px solid var(--whats-hover-color);
        color: var(--whats-hover-color);
    }
    .class h2 {
        font-weight: 400 !important;
    }
    .class b {
        color: var(--second-color);
    }
    #icons-1 {
        display: none;
    }
    /* grid-two-columns */
    .grid-two-columns {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-column-gap: 20px;
        grid-row-gap: 20px;
    }
    .image-content {
        position: relative;
    }
    .image-content img {
        width: 100%;
    }
    .flex-direction-columns {
        display: flex;
        flex-direction: column;
    }
    .flex-direction-columns .card-body {
        display: flex;
        position: relative;
    }
    .flex-direction-columns img {
        width: 60%;
    }
    .flex-direction-columns .card-1 p {
        font-size: 12px !important;
    }
    .card-1 .second-color,
    .card-1 .fifth-color,
    .card-1 .main-color {
        font-size: 1rem;
    }
    section p {
        font-size: 14px !important;
        font-weight: 400;
        line-height: 1.8;
    }
    /* postSlider */
    #postSlider .post-body h2 {
        color: var(--main-color);
    }
    #postSlider .post-body ul {
        padding: 0;
    }
    #postSlider .post-body ul>li {
        line-height: 2.2;
        list-style-type: none;
        font-size: 0.8rem;
    }
    #postSlider .post-body ul>li>i {
        color: var(--whats-color);
    }
    /* main */
    .verlay-text-container .main-grid {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        height: 350px;
        padding: 67px 0px;
        text-align: center;
    }
    #main {
        background-image: linear-gradient(to bottom, rgba(29, 22, 33, 0.902), rgba(0, 0, 0, 0.609)), url('../admin/images/gallery/IMG_3090.jpg');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 40%;
    }
    .verlay-text-container .main-grid .card-1 {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 2rem;
        padding: 10px 10px;
        z-index: 1;
    }
    .verlay-text-container .main-grid .card-1 h1 {
        font-size: calc(100% * 1px);
        color: var(--white-color);
    }
    .verlay-text-container .main-grid .card-1 p {
        display: none;
        color: var(--white-color);
    }
    .verlay-text-container .main-grid .card-2 {
        position: relative;
        z-index: 999;
    }
    .verlay-text-container .main-grid .card-2 img {
        display: none;
        width: 350px;
    }
    .appie-hero-area-2 {
        z-index: 10;
    }
    .appie-hero-area-2 .hero-shape-1 {
        display: none;
        position: absolute;
        top: 250px;
        left: 130px;
        animation: linear 20s animationFramesOne infinite;
        z-index: -1;
    }
    .appie-hero-area-2 .hero-shape-2 {
        display: none;
        position: absolute;
        bottom: 290px;
        left: 40px;
        animation: linear 20s animationFramesFour infinite;
        z-index: -1;
    }
    .appie-hero-area-2 .hero-shape-3 {
        display: none;
        position: absolute;
        top: 480px;
        right: 240px;
        animation: linear 20s animationFramesFive infinite;
        z-index: -1;
    }
    .appie-hero-area-2 .hero-shape-4 {
        display: none;
        display: none;
        position: absolute;
        top: 210px;
        right: 0px;
        animation: linear 20s animationFramesThree infinite;
        z-index: -1;
    }
    @keyframes animationFramesOne {
        0% {
            transform: translate(0px, 0px) rotate( 0deg);
        }
        20% {
            transform: translate(73px, -1px) rotate( 36deg);
        }
        40% {
            transform: translate(141px, 72px) rotate( 72deg);
        }
        60% {
            transform: translate(83px, 122px) rotate( 108deg);
        }
        80% {
            transform: translate(-40px, 72px) rotate( 144deg);
        }
        100% {
            transform: translate(0px, 0px) rotate( 0deg);
        }
    }
    @keyframes animationFramesFour {
        0% {
            transform: translate(-300px, 151px) rotate( 0deg);
        }
        100% {
            transform: translate(251px, -200px) rotate( 180deg);
        }
    }
    @keyframes animationFramesFive {
        0% {
            transform: translate(61px, -99px) rotate( 0deg);
        }
        21% {
            transform: translate(4px, -190px) rotate( 38deg);
        }
        41% {
            transform: translate(-139px, -200px) rotate( 74deg);
        }
        60% {
            transform: translate(-263px, -164px) rotate( 108deg);
        }
        80% {
            transform: translate(-195px, -49px) rotate( 144deg);
        }
        100% {
            transform: translate(-1px, 0px) rotate( 180deg);
        }
    }
    @keyframes animationFramesThree {
        0% {
            transform: translate(165px, -179px);
        }
        100% {
            transform: translate(-346px, 617px);
        }
    }
    /* services */
    #services {
        height: 100%;
        padding: 0px 0px;
        position: relative;
    }
    .flex-services {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin: 30px 0px;
    }
    .flex-services .tt-class-music {
        margin-bottom: 1.5rem;
    }
    .flex-services .tt-class-music b {
        color: var(--second-color);
    }
    .title-services * {
        display: inline !important;
        font-size: .813rem;
    }
    .title-services h1 {
        color: var(--second-color);
        font-weight: 600;
    }
    .button-services {
        position: relative;
        bottom: 0;
    }
    .button-services a {
        width: 100px;
        text-align: center;
        padding: 10px 20px;
        background-color: transparent;
        color: var(--hard-dark-color-color) !important;
        border: 1px solid var(--light-color);
        border-radius: 50px;
        transition: .3s ease-in-out;
        font-weight: 500;
    }
    .button-services a:hover,
    .button-services a:focus,
    .button-services a:active {
        background-color: #f0f0f0;
        color: var(--main-color);
    }
    .grid-services {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-column-gap: 5px;
        grid-row-gap: 5px;
    }
    .grid-services .card {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 10px 0px;
        height: 100%;
        border: none;
        transition: .3s ease-in-out;
    }
    .grid-services .card:hover {
        transform: translateY(-10px);
        box-shadow: var(--box-shadow-3);
    }
    .grid-services .card i {
        display: none;
    }
    .grid-services .card:nth-child(1) i {
        background-color: var(--main-color);
    }
    .grid-services .card:nth-child(2) i {
        background-color: var(--second-color);
    }
    .grid-services .card:nth-child(3) i {
        background-color: var(--third-color);
    }
    .grid-services .card:nth-child(4) i {
        background-color: #3ab094;
    }
    .grid-services .card:nth-child(5) i {
        background-color: var(--fourth-color)
    }
    .grid-services .card:nth-child(6) i {
        background-color: var(--fifth-color)
    }
    .grid-services .card h2 {
        font-size: var(--size-20px) !important;
    }
    .grid-services .card p {
        font-size: var(--size-16px);
        line-height: 1.5;
    }
    .grid-services .card a {
        color: var(--main-color);
    }
    /* grid metodologias */
    .grid-metodologias {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-column-gap: 5px;
        grid-row-gap: 5px;
    }
    .grid-metodologias .card {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
        padding: 10px 0px;
        height: 100%;
        border: none;
        transition: .3s ease-in-out;
    }
    .grid-metodologias .card:hover {
        transform: translateY(-10px);
        box-shadow: var(--box-shadow-3);
    }
    .grid-metodologias .card i {
        margin: 30px 0px;
        height: 50px;
        width: 50px;
        text-align: center;
        line-height: 50px;
        background: #2eacfc;
        color: #fff;
        border-radius: 50%;
    }
    .grid-metodologias .card:nth-child(1) i {
        background-color: var(--main-color);
    }
    .grid-metodologias .card:nth-child(2) i {
        background-color: var(--second-color);
    }
    .grid-metodologias .card:nth-child(3) i {
        background-color: var(--third-color);
    }
    .grid-metodologias .card:nth-child(4) i {
        background-color: #3ab094;
    }
    .grid-metodologias .card:nth-child(5) i {
        background-color: var(--fourth-color)
    }
    .grid-metodologias .card:nth-child(6) i {
        background-color: var(--fifth-color)
    }
    .grid-metodologias .card h2 {
        font-size: var(--size-20px) !important;
    }
    .grid-metodologias .card p {
        font-size: var(--size-16px);
        line-height: 1.5;
    }
    .grid-metodologias .card a {
        color: var(--main-color);
    }
    /* powerUp */
    #powerUp {
        height: 100%;
        padding: 20px 0px;
        background-color: #0e1133;
    }
    .title-powerUp {
        text-align: center;
        color: var(--white-color);
        margin-bottom: 50px;
    }
    .content-powerUp {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: 100%;
        grid-column-gap: 50px;
        grid-row-gap: 0px;
    }
    .img-powerUp {
        display: flex;
        justify-content: left;
    }
    .img-powerUp img {
        display: none;
        width: calc(100% - 150px);
    }
    .list-powerUp {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: flex-end;
    }
    .flex-powerUp {
        display: flex;
        align-items: flex-start;
        padding: 10px 10px;
        margin: 20px 0px;
        transition: .5s ease-in-out;
        border: var(--main-color) 1px solid;
    }
    .flex-powerUp .circle {
        display: none;
        position: relative;
        top: 10px;
        width: 15px;
        height: 15px;
        background-color: var(--fifth-color);
    }
    .flex-powerUp .card-1 {
        color: white;
        padding: 0px 30px;
    }
    .flex-powerUp:hover {
        border: var(--fifth-color) 1px solid;
        border-radius: 10px;
    }
    /* servicios */
    #servicios img {
        display: none;
    }
    #servicios h2 {
        font-size: var(--size-20px);
    }
    .banner-1 {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }
    .banner-1 h6 {
        color: var(--main-color);
        font-weight: 300;
    }
    .banner-1 h2 {
        font-size: var(--size-38px);
        font-weight: bold;
    }
    .banner-1 p {
        margin: 20px 0px;
        line-height: 1.3;
    }
    .btn-demo {
        width: 200px;
        text-align: center;
        padding: 10px 20px;
        background-color: var(--main-color);
        color: var(--white-color) !important;
        border-radius: 50px;
        transition: .5s ease-in-out;
    }
    .btn-demo:hover,
    .btn-demo:focus,
    .btn-demo:active {
        border: 1px solid var(--hover-main-color);
        background-color: transparent;
        color: var(--main-color) !important;
    }
    .flex-button {
        margin: 10px 0px;
    }
    .flex-button a {
        margin: 0px 10px;
    }
    .btn-pricing {
        width: 200px;
        text-align: center;
        padding: 10px 20px;
        border: 1px solid var(--main-color);
        color: var(--main-color) !important;
        border-radius: 50px;
        transition: .5s ease-in-out;
    }
    .btn-pricing:hover,
    .btn-pricing:focus,
    .btn-pricing:active {
        border: 1px solid var(--hover-main-color);
        background-color: transparent;
        color: var(--main-color) !important;
    }
    .btn-pricing-active {
        width: 200px;
        text-align: center;
        padding: 10px 20px;
        background-color: var(--fifth-color);
        color: var(--main-color) !important;
        border-radius: 50px;
        transition: .5s ease-in-out;
        font-weight: bold;
    }
    .btn-pricing-active:hover,
    .btn-pricing-active:focus,
    .btn-pricing-active:active {
        border: 1px solid var(--hover-main-color);
        background-color: transparent;
        color: var(--main-color) !important;
    }
    .banner-popular-pricing {
        position: absolute;
        top: 15px;
        right: 0;
        width: 60%;
        background-color: var(--second-color);
        padding: 2px 12px;
        border-radius: 15px 0px 0px 15px;
    }
    .banner-popular-pricing span {
        color: var(--white-color);
        font-weight: bold;
        font-style: 8px;
    }
    /* princing */
    #pricing {
        height: 100%;
        padding: 100px 0px;
    }
    .princing-1 {
        text-align: center;
        margin: 30px 0px;
    }
    .princing-1 h2 {
        font-weight: bold;
        font-size: var(--size-28px);
    }
    .pricing-toggle {
        display: flex;
        justify-content: center;
        padding: 20px;
    }
    .pricing-toggle ul {
        display: flex;
        list-style: none;
        border: 1px solid #bbbbbb;
        border-radius: 25px;
        text-align: center;
        padding: 10px 0px;
    }
    .pricing-toggle li {
        margin: 0px 10px;
    }
    .pricing-toggle a {
        color: var(--hard-dark-color);
        cursor: pointer;
    }
    .pricing-toggle .actived {
        background-color: var(--main-color);
        color: var(--white-color);
        padding: 5px 30px;
        border-radius: 15px;
    }
    .grid-pricing {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: 30%;
        grid-column-gap: 10px;
        grid-row-gap: 20px;
    }
    .grid-pricing .card {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        padding: 30px 10px;
        border-radius: 15px;
        border: 1px solid #f0f0f0;
        transition: .5s ease-in-out;
    }
    .grid-pricing .card:hover {
        box-shadow: var(--box-shadow-1);
        transform: translateY(-5%);
    }
    .grid-pricing .card h5 {
        font-weight: bold;
        margin: 20px 0px;
    }
    .grid-pricing .card h2 span {
        font-size: var(--size-14px);
        position: relative;
        top: -5px;
    }
    .grid-pricing .card h2 {
        margin: 20px 0px;
        font-weight: bold;
    }
    .grid-pricing .card h2 small {
        font-size: var(--size-12px);
    }
    .grid-pricing .card h6 {
        font-size: var(--size-16px);
        font-weight: 300;
    }
    .grid-pricing .card ul {
        list-style: none;
        line-height: 2;
        padding: 0;
    }
    .grid-pricing .card ul i {
        color: var(--whats-color);
    }
    .grid-pricing .card .li-muted {
        color: #f0f0f0;
        font-style: italic;
    }
    /* checkbox */
    .switch {
        display: inline-block;
        height: 34px;
        position: relative;
        width: 60px;
    }
    .switch input {
        display: none;
    }
    .slider {
        background-color: var(--main-color);
        bottom: 0;
        cursor: pointer;
        left: 0;
        position: absolute;
        right: 0;
        top: 0;
        transition: .4s;
    }
    .slider:before {
        background-color: #fff;
        bottom: 4px;
        content: "";
        height: 26px;
        left: 4px;
        position: absolute;
        transition: .4s;
        width: 26px;
    }
    input:checked+.slider {
        background-color: var(--main-color);
        ;
    }
    input:checked+.slider:before {
        transform: translateX(26px);
    }
    .slider.round {
        border-radius: 34px;
    }
    .slider.round:before {
        border-radius: 50%;
    }
    /* nabvar */
    nav {
        padding: 20px 0px;
        margin: 0px 0px;
        /* position: fixed !important; */
        z-index: 99;
        top: 0;
        width: 100%;
        -webkit-box-shadow: 4px 11px 15px -7px rgba(97, 97, 97, 0.25);
        box-shadow: 4px 11px 15px -7px rgba(97, 97, 97, 0.25);
    }
    nav .navbar-brand * {
        font-size: var(--font-18px) !important;
        font-weight: 300 !important;
        position: relative;
        float: right;
    }
    nav .navbar-nav {
        font-size: var(--font-14px) !important;
        font-weight: 600 !important;
        text-transform: uppercase;
        padding: 0px 5px;
        margin: 0px 5px;
        position: relative;
    }
    nav .navbar-nav i {
        color: var(--main-color);
    }
    nav .nav-contact:hover {
        background-color: var(--hard-dark-color);
        color: var(--white-color);
    }
    .logo img {
        width: 62px;
    }
    .navbar-expand-lg .navbar-collapse {
        justify-content: right;
    }
    .navbar-nav li {
        text-transform: none;
        margin: 0px 10px;
        font-weight: 600;
    }
    .btn-fill {
        margin-left: 0px;
        width: 100px;
        text-align: center;
        padding: 10px 20px;
        background-color: var(--main-color);
        color: var(--white-color) !important;
        border-radius: 50px;
        transition: .5s ease-in-out;
    }
    .btn-fill:hover,
    .btn-fill:focus,
    .btn-fill:active {
        border: 1px solid var(--hover-main-color);
        background-color: transparent;
        color: var(--main-color) !important;
    }
    /* section 1 */
    .bg-section-1 {
        /* img optional */
        /* background: url(../img/stock/mainslider-bg003.jpg);
        background-position: 0px, -50px; */
        /* img actual */
        background: url(../img/stock/BlogWellzenTools.jpg);
        background-repeat: no-repeat;
        background-position: 0px, 0px;
        background-size: cover;
        background-attachment: fixed;
        height: 620px;
        position: relative;
        -webkit-transition: all 1.4s cubic-bezier(.42, 0, .58, 1);
        transition: all .5s cubic-bezier(.42, 0, .58, 1);
    }
    .bg-section-1-slider-2 {
        /* img optional */
        background: url(../img/stock/mainslider-bg003.jpg);
        background-position: 0px, -50px;
        /* img actual */
        background-repeat: no-repeat;
        background-position: 0px, 0px;
        background-size: cover;
        height: 620px;
        position: relative;
        -webkit-transition: all .5s cubic-bezier(.42, 0, .58, 1);
        transition: all .5s cubic-bezier(.42, 0, .58, 1);
    }
    .bg-section-1-slider-3 {
        /* img optional */
        background: url(../img/stock/cta-bg-two.jpg);
        background-position: 0px, -50px;
        /* img actual */
        background-repeat: no-repeat;
        background-position: 0px, 0px;
        background-size: cover;
        height: 620px;
        position: relative;
        -webkit-transition: all .5s cubic-bezier(.42, 0, .58, 1);
        transition: all .5s cubic-bezier(.42, 0, .58, 1);
    }
    .bg-section-1-slider-4 {
        /* img optional */
        background: url(../img/stock/slider-landing.jpg);
        background-position: 0px, -50px;
        /* img actual */
        background-repeat: no-repeat;
        background-position: 0px, 0px;
        background-size: cover;
        height: 620px;
        position: relative;
        -webkit-transition: all .5s cubic-bezier(.42, 0, .58, 1);
        transition: all .5s cubic-bezier(.42, 0, .58, 1);
    }
    .circle {
        height: 12px;
        width: 12px;
        border: 2px solid var(--main-color);
        border-radius: 50%;
        display: inline-block;
        cursor: pointer;
        margin: 0px 4px;
    }
    /* .active {
            border: none;
            background-color: var(--main-color);
            transition: ease-in-out .2s;
        } */
    .circle:hover {
        border: none;
        background-color: var(--main-color);
        transition: ease-in-out .2s;
    }
    .bg-section-1 .fa-chevron-left {
        position: absolute;
        top: 50%;
        left: 2%;
        background-color: rgba(241, 241, 241, 0.431);
        padding: 20px;
        border-radius: 50px;
        cursor: pointer;
    }
    .bg-section-1 .fa-chevron-left:hover {
        color: var(--white-color);
        transition: ease-in-out .2s;
    }
    .bg-section-1 .fa-chevron-right {
        position: absolute;
        top: 50%;
        left: 96%;
        background-color: rgba(241, 241, 241, 0.431);
        padding: 20px;
        border-radius: 50px;
        cursor: pointer;
    }
    .bg-section-1 .fa-chevron-right:hover {
        color: var(--white-color);
        transition: ease-in-out .2s;
    }
    .btn-section-1 {
        position: absolute;
        top: 94%;
        left: 96%;
        transform: translateX(-50%) translateY(-50%);
        display: block;
    }
    .circle-btn {
        height: 20px;
        width: 20px;
        border: 2px solid var(--gray-color);
        border-radius: 50%;
        display: inline-block;
        cursor: pointer;
        margin: 0px 4px;
    }
    /* .active {
            border: none;
            background-color: var(--main-color);
            transition: ease-in-out .2s;
        } */
    .circle-btn:hover {
        border: none;
        background-color: var(--main-color);
        transition: ease-in-out .2s;
    }
    .box-section-1 {
        background-color: var(--white-color);
        width: 20%;
        height: auto;
        box-sizing: border-box;
        margin: 10px;
        padding: 20px;
        border-radius: 15px;
        position: relative;
        top: 40%;
        left: 10%;
        transform: translateX(30%) translateY(-20%);
        box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12)
    }
    /* contents section-1 */
    .content-1-section-1 {
        position: absolute;
        top: 20%;
        left: 39%;
        transition: ease-in-out .2s;
    }
    .content-1-section-1 h2 {
        font-size: 50px;
        font-weight: 700;
        font-family: var(--poppins);
        letter-spacing: 1px;
        width: 100%;
        animation-duration: .8s;
        animation-name: slidein;
    }
    .content-1-section-1 h3 {
        font-size: 30px;
        border-radius: 15px;
        font-weight: 400;
        font-family: var(--poppins);
        background-color: var(--bg-light-second-color);
        padding: 20px;
        width: 100%;
        animation-duration: .8s;
        animation-name: slidein;
    }
    .content-2-section-1 {
        position: absolute;
        top: 20%;
        left: 39%;
        transition: ease-in-out .2s;
    }
    .content-2-section-1 h2 {
        font-size: 50px;
        font-weight: 700;
        font-family: var(--poppins);
        letter-spacing: 1px;
        width: 100%;
        animation-duration: .8s;
        animation-name: slidein;
    }
    .content-2-section-1 h3 {
        font-size: 30px;
        border-radius: 15px;
        font-weight: 400;
        font-family: var(--poppins);
        width: 100%;
        animation-duration: .8s;
        animation-name: slidein;
    }
    .content-3-section-1 {
        position: absolute;
        top: 20%;
        left: 39%;
        transition: ease-in-out .2s;
    }
    .content-3-section-1 h2 {
        font-size: 35px;
        font-weight: 700;
        letter-spacing: 1px;
        font-family: var(--poppins);
        letter-spacing: 1px;
        text-transform: uppercase;
        width: 100%;
        animation-duration: .8s;
        animation-name: slidein;
    }
    .content-3-section-1 h3 {
        font-size: 20px;
        border-radius: 15px;
        font-weight: 400;
        font-family: var(--poppins);
        width: 100%;
        animation-duration: .8s;
        animation-name: slidein;
    }
    .content-3-section-1 a {
        margin: 10px 0px;
        animation-duration: .8s;
        animation-name: slideFadeIn;
    }
    .content-3-section-1 i {
        margin: 0px 5px;
        animation-duration: .8s;
        animation-name: slideFadeIn;
    }
    .floating-speed i {
        animation-name: floating;
        animation-duration: 1s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out;
    }
    .box-section-1 h3 {
        font-size: 30px;
        color: var(--dark-color);
        font-weight: 700;
    }
    .box-section-1 p {
        bottom: 0px;
        color: var(--dark-color);
        font-size: var(--font-16px);
        font-weight: 300;
    }
    /* section 2 */
    .bg-section-2 {
        background-color: var(--bg-second-color);
        padding: 100px 0px;
        text-align: center;
    }
    .box-section-2 h2 {
        font-size: 50px;
        font-family: var(--poppins);
        padding: 10px 0px;
    }
    .box-section-2 p {
        color: var(--dark-color);
        font-size: var(--font-18px);
        padding: 0px 400px;
        line-height: 1.9;
        font-weight: 500;
    }
    .flex-days-section-2 {
        display: flex;
        flex-direction: row;
        justify-content: center;
        flex-flow: wrap;
        align-items: center;
    }
    .flex-days-section-2 div {
        background: var(--second-color);
        margin: 0px 20px;
        padding: 5px 20px;
        border-radius: 5px;
        cursor: pointer;
    }
    .flex-days-section-2 div:hover {
        background-color: var(--main-color) !important;
        color: var(--white-color);
        box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12)
    }
    .day-active {
        background-color: var(--main-color) !important;
        color: var(--white-color);
        box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12)
    }
    .flex-content-section-2 {
        margin: 40px 0px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        flex-flow: wrap;
        align-items: center;
    }
    .content-2-section-2 {
        margin: 0px 10px;
        border-radius: 5px;
        text-align: left;
        background-color: var(--white-color);
        padding: 50px 30px;
    }
    .flex-content-section-2 div img {
        width: 480px;
        background-color: transparent !important;
    }
    .flex-content-section-2 div p {
        color: var(--dark-color);
        font-size: var(--font-16px);
        font-weight: 300;
    }
    .flex-content-section-2 div span {
        background-color: var(--bg-second-color);
        font-weight: 500;
    }
    .flex-content-section-2 div h3 {
        color: var(--dark-color);
        font-size: var(--font-18px);
        line-height: 1.9;
        font-weight: 700;
    }
    .flex-content-section-2 div a {
        position: relative;
        bottom: 0px;
        color: var(--bg-main-color);
        font-weight: 500;
    }
    /* section 3 */
    .box-section-3 {
        text-align: center;
    }
    .box-section-3 h4 {
        font-size: calc(100% - 1px);
        text-transform: uppercase;
        color: var(--dark-color);
        letter-spacing: 2px;
        font-weight: 300;
        font-family: var(--poppins);
        padding: 10px 0px;
    }
    .box-section-3 h2 {
        font-size: 20px;
        font-family: var(--poppins);
        padding: 10px 0px;
    }
    .box-section-3 p {
        color: var(--dark-color);
        font-size: var(--font-18px);
        padding: 0px 400px;
        line-height: 1.9;
        font-weight: 500;
    }
    .flex-content-section-3 {
        margin: 20px 0px 80px 0px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        flex-flow: wrap;
        align-items: center;
    }
    .flex-content-section-3 div {
        /* background: var(--main-color); */
        margin-bottom: 80px;
        margin-left: 20px;
        border-radius: 5px;
        max-width: 210px;
        height: 200px;
        text-align: center;
    }
    .flex-content-section-3 div:hover>h3 {
        color: var(--main-color);
        transition: ease-in-out .3s;
    }
    .flex-content-section-3 div img {
        width: 150px;
        position: relative;
        margin: 50px 0px;
        top: 50%;
        left: 60%;
        transform: translateX(-90%) translateY(-50%);
    }
    .flex-content-section-3 div:hover>img {
        padding: 5px;
        transition: ease-in-out .3s;
    }
    .flex-content-section-3 h3 {
        font-size: 18px;
        font-family: var(--poppins);
        font-weight: 600;
    }
    /* section carousel*/
    .title-section h2 {
        font-family: var(--poppins);
        color: var(--dark-color);
    }
    .btn-archive {
        color: var(--tx-button);
        background: var(--bg-button);
        border-color: var(--bg-button-border);
        -webkit-transition: all 0.3s linear 0s;
        transition: all 0.3s linear 0s;
    }
    .btn-archive:hover {
        color: var(--tx-button-hover);
        background-color: var(--bg-button-hover);
        border-color: var(--bg-button-hover);
    }
    .btn-archive:focus {
        -webkit-box-shadow: 0 0 0 0.25rem var(--bg-button-focus);
        box-shadow: 0 0 0 0.25rem var(--bg-button-focus);
    }
    .posts-section {
        background: var(--bg-post-section);
        font-family: var(--font1);
        -webkit-transition: all 0.3s linear 0s;
        transition: all 0.3s linear 0s;
        height: 100%;
    }
    .posts-section .title-section {
        font-weight: 700;
        text-transform: uppercase;
        color: var(--tx-post-section-title);
    }
    .posts-section .title-section button {
        border: none;
        margin: 10px 0;
        color: var(--gray-color);
    }
    .posts-section .bg-card {
        background: var(--bg-post-title);
        color: var(--tx-post-title);
    }
    .posts-section .post-body h2 {
        font-weight: 600;
    }
    .posts-section .post-info {
        font-size: 0.8rem;
        font-weight: 300;
    }
    .posts-section .text-img-over {
        position: relative;
    }
    .posts-section .text-img-over .card-img-top {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }
    .posts-section .text-img-over .overlay {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100%;
        width: 100%;
        opacity: 0;
        transition: 0.5s ease;
        background: var(--bg-post-image-overlay);
    }
    .posts-section .text-img-over:hover .overlay {
        opacity: 1;
    }
    .text-img-over img {
        width: 500px;
    }
    .posts-section .social-hover {
        color: var(--tx-color-1);
        font-size: 40px;
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        text-align: center;
    }
    .posts-section .social-hover .fa-share-alt {
        color: var(--tx-color-1);
    }
    .posts-section .social-hover .fa-share-alt:hover {
        color: var(--tx-color-1);
    }
    .post-body h2 {
        color: var(--dark-color);
        margin: 20px 0px;
        font-family: var(--poppins);
    }
    .post-body p {
        color: var(--dark-color);
        line-height: 1.8;
        font-family: var(--poppins);
    }
    /* footer */
    footer {
        background-color: var(--hover-main-color);
        color: var(--white-color);
        padding: 50px 20px;
    }
    .footer-content {
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: 30%;
        grid-column-gap: 20px;
        grid-row-gap: 0px;
    }
    .footer-bottom {
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
    }
    .footer-2-flex {
        display: flex;
        flex-direction: column;
    }
    .footer-2-columns {
        display: flex;
    }
    footer a {
        font-size: var(--size-14px);
        color: var(--white-color);
    }
    .footer-2 {
        padding: 0;
        margin: 0;
    }
    footer img {
        width: 150px;
        margin: 20px 0px;
    }
    footer h4 {
        font-size: 0.8rem;
        text-transform: uppercase;
        padding: 20px 0px;
        font-weight: 700;
    }
    footer p {
        color: var(--white-color);
        width: 100%;
        line-height: 1.8;
        font-size: 0.7rem;
    }
    footer .social-media {
        display: flex;
    }
    footer ul {
        list-style-type: none;
        padding: 0px;
        color: var(--white-color);
    }
    footer li {
        list-style-type: none;
        padding: 5px 0px;
    }
    footer a {
        list-style-type: none;
        padding: 5px 0px;
        color: var(--white-color);
        font-size: 0.7rem;
    }
    footer a:hover {
        color: var(--white-color);
    }
    footer i {
        padding: 0px 10px;
        color: var(--third-color);
    }
    a {
        text-decoration: none;
    }
    .view-lg {
        display: block;
    }
    .hiden-lg {
        display: none;
    }
    .up-to-home {
        position: fixed;
        margin: 20px;
        z-index: 999;
        bottom: 0;
        right: 0;
        background-color: rgba(5, 5, 5, 0.13);
        border-radius: 5px;
        padding: 20px;
        cursor: pointer;
    }
    .up-to-home i {
        color: rgb(0, 0, 0);
    }
    .up-to-home:hover i {
        color: var(--main-color);
        transition: ease-in-out .2s;
    }
     ::-webkit-scrollbar {
        width: 10px;
    }
     ::-webkit-scrollbar-track {
        background-color: rgb(253, 253, 253);
        -webkit-border-radius: 10px;
        border-radius: 10px;
    }
     ::-webkit-scrollbar-thumb {
        -webkit-border-radius: 10px;
        border-radius: 10px;
        background: var(--main-color);
    }
    .copyright {
        text-align: center;
        margin: 10px 0px;
    }
    .copyright * {
        color: #9d00e0 !important;
        font-size: 0.7rem;
    }
    @keyframes slidein {
        from {
            margin-left: 50%;
            opacity: 0;
            width: 300%;
        }
        to {
            margin-left: 0%;
            opacity: 1;
            width: 100%;
        }
    }
    @keyframes floating {
        from {
            transform: translate(0, 0px);
        }
        65% {
            transform: translate(0, 5px);
        }
        to {
            transform: translate(0, -0px);
        }
    }
    .grid-two {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-gap: 2rem;
    }
    .card-body {
        flex: 1 1 auto;
        padding: 0rem;
    }
}