html,
body {
    font-family: "SVNAptima", sans-serif !important;
}

/* Banner trong Style */
/* About 1 */
.section-about-1 {
    margin-top: -7%;
    position: relative;
    text-align: center;
    margin-bottom: 3rem;
}

.col.about-1-content {
    max-width: 640px !important;
    margin: 2rem auto 0 !important;
    padding: 0 .625rem !important;
}

.about-1-content .about-1-content__header {
    text-transform: uppercase;
    font-size: 1.5rem;
    font-family: "Montserrat";
    color: rgba(0, 0, 0, 0.5);
    font-weight: bold;
    margin-bottom: 1rem;
}

.about-1-content .about-1-content__title {
    font-size: 0.875rem;
    color: #000;
    margin: auto;
}

/* About 2 */
.section-about-2 {
    margin-bottom: 4rem !important;
}

.row.about-2-flex {
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
}

.about-2__left {
    margin-top: 3rem !important;
}

.about-2__header {
    text-transform: uppercase;
    font-size: 1.5rem;
    color: rgba(0, 0, 0, 0.5);
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.about-2__name {
    font-family: var(--devi-font);
    font-size: 2.25rem;
    font-weight: 100;
    color: #000;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
}

.about-2__services p {
    margin-bottom: 8px;
}

.about-2__image img {
    border-radius: 1rem;
    height: auto;
    object-fit: cover;
}

/* Team Members */
#teamMemberSwiper {
    padding-right: 10%;
}

#teamMemberSwiper .team-slide {
    max-width: 330px;
    position: relative;
    z-index: 1009;
}

/* #teamMemberSwiper .team-slide {
    animation-name: balloon;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-delay: 1s;
} */

#teamMemberSwiper .team-slide__items {
    text-align: center;
    position: relative;
    padding-bottom: 30px;
    padding-top: 40px;
}

.team-slide__image {
    width: 92%;
    display: inline-block;
    border-radius: 50%;
    padding-top: 92%;
    position: relative;
    z-index: 2;
}

.team-slide__image::before {
    content: "";
    width: 95px;
    height: 95px;
    border-radius: 50%;
    background: linear-gradient(45deg, var(--devitech-color), var(--devitech-light-color));
    position: absolute;
    bottom: -50px;
    right: 20px;
    transition: all ease 1s;
    opacity: 1;
    transition-delay: 0.2s;
    /* animation: balloon 2s linear 0s infinite alternate; */
}

.team-slide__image span {
    position: absolute;
    top: 0px;
    left: 0;
    width: 101%;
    text-align: center;
    height: 100%;
    overflow: hidden;
    border-radius: 0% 0% 50% 50%;
    padding-top: 20px;
    transition: all ease 0.8s;
}

/* .team-slide:hover .team-slide__image span {
    position: absolute;
    top: 0px;
    left: 0;
    width: 100%;
    text-align: center;
    height: 100%;
    overflow: hidden;
    border-radius: 0% 0% 50% 50%;
    padding-top: 20px;
    transition: all ease 0.8s;
} */

.team-slide__image span::before {
    content: "";
    width: 21px;
    height: 21px;
    border-radius: 50%;
    background: linear-gradient(45deg, var(--devitech-color), var(--devitech-light-color));
    position: absolute;
    top: 60px;
    right: 40px;
    /* transition: all ease 1s; */
    opacity: 1;
    /* transition-delay: 0.6s; */
    /* animation: balloon 4s linear 1s infinite alternate; */
}

#teamMemberSwiper .team-slide__image img {
    width: 92%;
    display: inline-block;
    border-radius: 50%;
    /* padding-top: 92%; */
    position: relative;
    z-index: 2;
}

.team-slide__image span::after {
    content: "";
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(45deg, var(--devitech-color), var(--devitech-light-color));
    position: absolute;
    top: 100px;
    left: 20px;
    /* transition: all ease 1s; */
    opacity: 1;
    /* transition-delay: 0.4s;
    animation: balloon 3s linear 0.5s infinite alternate; */
}

.team-slide__image::after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: #ebebeb;
    border-radius: 50%;
    /* transition: background linear 1s; */
    z-index: -1;

    /* animation-name: balloon1;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate; */
}

/* Team Info */
.team-slide__info {
    display: inline-block;
    background: radial-gradient(circle at center, rgb(0 0 0 / 10%), rgb(31 193 193 / 70%) 100%);
    padding: 10px;
    border-radius: 15px;
    position: absolute;
    bottom: -10%;
    left: 50%;
    transform: translate(-50%, 0);
    width: 70%;
    opacity: 0;
    transition: all ease 0.5s;
    backdrop-filter: blur(10px);
    transition-delay: 0.2s;
    z-index: 3;
}

.team-slide__name {
    color: #fff;
    text-transform: capitalize;
    font-weight: bold;
    font-size: 18px;
    font-family: "Montserrat";
}

.team-slide__position {
    color: #fff;
    font-size: .75rem;
}

/* Team Info Hover */
.swiper-about-item:hover .about-group-4-items__info {
    opacity: 1;
    bottom: 10px;
}

/* About 3 */
.section-about-3 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    max-width: 1024px;
    margin: 0 auto;
}

.section-about-3 .about-3__left {
    padding-right: 3rem;
}

.about-3__title {
    font-family: var(--devi-font);
    font-size: 2.25rem;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
}

.about-3__right {
    /* width: 60%; */
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 1rem;
}

.about-3__right--grid {
    grid-template-columns: repeat(2, 1fr);
}

.value-item {
    border-radius: 1rem;
    border: 1px solid var(--devitech-color);
    padding: 1rem;
    min-height: 197px;
    position: relative;
    overflow: hidden;
}

.value-item__number {
    font-size: 2.25rem;
    margin-bottom: 0.875rem;
}

.value-item__name {
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--devitech-color);
    text-transform: uppercase;
}

.value-item__desc {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    padding: 1.125rem;
    opacity: 0;
    background: linear-gradient(-45deg, var(--devitech-light-color) 0, var(--devitech-color) 100%);
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}

.value-item:hover .value-item__desc {
    opacity: 1;
    cursor: context-menu;
}

.value-item__desc {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    padding: 1.125rem;
    opacity: 0;
    background: linear-gradient(-45deg, var(--devitech-light-color) 0, var(--devitech-color) 100%);
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}

/* About 4 */
.section.section-about-4 {
    padding-top: 70px !important;
    padding-bottom: 70px !important;
}

.section-about-4::after {
    position: absolute;
    content: "";
    width: 50%;
    height: 100%;
    background: #faf5f0;
    border-radius: 1rem 0 0 1rem;
    right: 0;
    top: 0;
}

.about-4--flex {
    align-items: center;
}

.about-4__title {
    font-family: var(--devi-font);
    font-size: 2.25rem;
    text-transform: uppercase;
    margin-bottom: 1.875rem;
}

.about-4__content {
    text-align: justify;

}

.section-about-4 .col.about-4__left {
    padding-right: 2.188rem;
}

/* About 5 */
.section.section-about-5 {
    padding-top: 70px !important;
    padding-bottom: 70px !important;
}

.section.section-about-5 .about-5__left {
    margin-top: 3rem;
}

.about-5__name {
    font-family: var(--devi-font);
    font-size: 2.25rem;
    font-weight: 100;
    color: #000000;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
}

.about-5__desc {
    font-size: 0.875rem;
    font-family: var(--devi-font);
    color: #000000;
    margin-bottom: 3rem;
    text-align: justify;
}

.about-5__image img {
    border-radius: 1rem;
    height: 105vh;
    object-fit: cover;
}

.section.section-about-5 .about-5__right {
    padding-left: 1rem;
}

.section.section-about-5 .about-5__left {
    padding-right: 1rem;
}

.section-banner-footer .banner-footer-image::after {
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgb(250, 245, 240) 30%, rgba(112, 239, 209, 0.7) 50%, rgba(112, 239, 209, 0) 100%);
}

/* Content */
.banner-footer__content {
    position: absolute;
    top: 0px;
    text-align: left;
    width: 100%;
    height: 100%;
    z-index: 999;
}

.banner-footer__main {
    display: inline-block;
    max-width: 40%;
    margin-top: 1rem;
}

.banner-footer__title {
    font-family: var(--devi-font);
    font-size: 2.25rem;
    font-weight: 100;
    color: #000000;
    margin-bottom: 2rem;
    text-transform: uppercase;
}

.banner-footer__items__item {
    margin-bottom: .75rem;
    font-size: 1.125rem;
    font-weight: bold;
    color: var(--devitech-light-color);
    text-align: center;
    background: #ffffff;
    border-radius: 2.5rem;
    padding: .625rem .3125rem;
}

.banner-footer-image {
    margin-bottom: 5rem !important;
}

/* Section Contact */
.section.section-contact {
    /* margin-top: 2rem !important; */
}

/* Media */
/* ───────── iPhone family ───────── */

/* iPhone SE (2nd gen) – 375px */
@media only screen and (max-width: 376px) {
    /* styles cho iPhone SE */
}

/* iPhone 12/13/14 Pro – 390px */
@media only screen and (max-width: 391px) {
    /* styles cho iPhone 12/13/14 Pro */
}

/* iPhone XR – 414px */
@media only screen and (max-width: 415px) {
    /* styles cho iPhone XR */
}

/* iPhone 14 Pro Max – 430px */
@media only screen and (max-width: 431px) {
    /* styles cho iPhone 14 Pro Max */
}



/* Google Nest Hub – 600px */
@media only screen and (max-width: 601px) {

    /* styles cho Nest Hub portrait */
    .row.about-2-flex {
        flex-direction: column-reverse;
    }

    .section-banner-footer .banner-footer-image::after {
        background: linear-gradient(175deg, rgb(250, 245, 240) 30%, rgba(112, 239, 209, 0.7) 50%, rgba(112, 239, 209, 0) 100%);
    }

    /* About 3 */
    .section-about-3 .about-3__left {
        padding-right: 0rem !important;
        text-align: center;
        margin-bottom: 2rem;
    }

    /* About 4 */
    .row.about-4--flex {
        flex-direction: column-reverse;
    }

    .section-about-4 .col.about-4__left {
        padding-right: 0rem;
    }

    .about-4__right {
        margin-bottom: 2rem !important;
    }

    .section-about-4::after {
        width: 100%;
        height: calc(100% - 2rem);
        border-radius: 0px;
    }

    /* About 5 */
    .section.section-about-5 {
        padding-top: 0px !important;
        padding-bottom: 0px !important;
    }

    .section.section-about-5 .about-5__right {
        padding-left: 0rem;
        margin-top: 2rem;
    }

    /* Banner Footer Section */
    .banner-footer__main {
        max-width: 100%;
        margin-top: 1rem;
    }

    .section.section-banner-footer.container-center-layout-2 {
        padding: 0 !important;
        margin-top: 3rem;
    }

    .banner-footer__title {
        text-align: center;
    }
}

/* Google Nest Hub Max – 800px */
@media only screen and (max-width: 801px) {
    /* styles cho Nest Hub Max portrait */
}


/* ───────── iPad family ───────── */

/* iPad Mini / Air (9.7"–10.2") – 768px */
@media only screen and (max-width: 769px) {
    /* styles cho iPad 9.7"/10.2" portrait */
}

/* iPad Air 10.9" – 820px */
@media only screen and (max-width: 821px) {

    /* styles cho iPad Air 10.9" portrait */
}

/* iPad Pro 11" – 834px */
@media only screen and (max-width: 835px) {
    /* styles cho iPad Pro 11" portrait */
}

/* iPad Pro 12.9" – 1024px + Nest Hub*/
@media only screen and (max-width: 1025px) {
    /* styles cho iPad Pro 12.9" portrait */
}

/* ───────── Nest Hub Max ───────── */
@media only screen and (max-width: 1281px) {
    /*  */
}