@import "./index.css";
.page_gap{min-height: 20rem;}
/* ************************************ Navi Begin ************************************ */
.Navi{justify-content: space-between;padding: var(--pad-2-5);position: sticky;top: 0;background-color: var(--color-white);z-index: 999;}
.Navi a{color: var(--color-dark);transition: all .3s ease;}
.Navi a:hover{color: var(--color-hover);}
.Navi_logo{max-width: 20rem;}
.Navi_btn_line{gap: 2rem;}
.Navi_btn_wrap{width: 1px;height: 2rem;background-color: var(--color-gray);}

@media (max-width: 800px) {
}
/* Ẩn menu mặc định */
.mobile-nav {position: fixed;top: 0;right: -100%;width: 80%;height: 100%;background: var(--color-green-bg);
    box-shadow: -4px 0 10px rgba(0,0,0,0.2);transition: all 0.3s ease !important;z-index: 999;padding: 5rem 2rem;
    flex-direction: column;gap: 1rem;
}
  
/* Khi mở menu */
.mobile-nav.open {right: 0;}
  
/* Nút menu hamburger */
.mobile-menu-btn {position: fixed;top: 5rem;right: 3rem;z-index: 1000;background: none;border: none;cursor: pointer;}
  
.menu-icon,
.menu-icon::before,
.menu-icon::after {
    display: block;width: 25px;height: 3px;background: #000;transition: all 0.3s ease;content: '';position: relative;
}
  
.menu-icon::before {transform: translateY(-8px);}
.menu-icon::after {transform: translateY(5px);}
  
/* Toggle thành X */
.mobile-menu-btn.active .menu-icon {background: transparent;}
.mobile-menu-btn.active .menu-icon::before {transform: rotate(45deg) translate(0px, 5px);}
.mobile-menu-btn.active .menu-icon::after {transform: rotate(-45deg) translate(-2px, -2px);}
  
/* ************************************ Navi End ************************************ */

/* ************************************ Top Carol Begin ************************************ */
.top_carol{padding: var(--pad-0-5);gap: 5rem;width: 100%;min-height: 85vh;}
.top_carol_bg{width: calc(100% - 10rem);height: 100%;overflow: hidden;position: absolute;z-index: 0;
    border-top-left-radius: 5rem;border-top-right-radius: 5rem;}
.top_carol_photoslide{width: 100%;height: 100%;object-fit: cover;overflow: hidden;position: relative;}
.top_carol_photoslide img {position: absolute;width: 100%;height: 100%;object-fit: cover;top: 0;left: 0;opacity: 0;transform: scale(1);
  transition: opacity 2s ease-in-out, transform 5s ease-in-out;z-index: 0;
}
.top_carol_photoslide img.active {opacity: 1;transform: scale(1.05);z-index: 1;}
.top_carol_slide_container{flex-direction: column;align-items: flex-start;width: 100%;padding: var(--pad-0-10);}
.top_carol_slide_container p{color: var(--color-white);justify-content: flex-start;width: 100%;flex-wrap: wrap;}
.carol_p_block_1,.carol_p_block_2{width: 100%;justify-content: flex-start;}
.carol_p_1,.carol_p_2{font-family: var(--font-JP2);line-height: 1;color: var(--color-white);}
.carol_p_block_1 span{font-family: var(--font-JP2);line-height: 1;color: var(--color-white);font-weight: 700;}
.carol_p_block_2 span{font-family: var(--font-JP2);color: var(--color-white);}
.carol_p_block_1 + .carol_p_block_2{margin-top: 3rem;}

.top_carol_scroll{min-width: 20%;justify-content: flex-start;flex-direction: column;
    position: absolute;right: -5rem;transform: rotateZ(90deg);bottom: -10rem;z-index: 1;}
.scroll_p{font-family: var(--font-JP2);color: var(--color-white);margin-right: auto;}
.scroll_under{height: 1px;background-color: var(--color-white);animation: scroll_under 4s infinite ease-out;}
@keyframes scroll_under {
    0%{width: 0;margin-right: auto;margin-left: unset;}
    50%{width: 100%;margin-right: auto;margin-left: unset;}
    50.000001%{width: 100%;margin-left: auto;margin-right: unset;}
    100%{width: 0%;margin-left: auto;margin-right: unset;}
}
@media (max-width: 800px) {
    .top_carol_bg{width: 100%;}
    .top_carol{height: 95vh;}
    .top_carol_slide_container{padding: 0 1rem;}
}

@keyframes dropChar {
  0% {transform: translateY(-40px);opacity: 0;}
  100% {transform: translateY(0px);opacity: 1;}
}

.char-drop {display: inline-block;opacity: 0;animation: dropChar 0.6s ease-out forwards;}
/* ************************************ Top Carol End ************************************ */

/* ************************************ Top About Begin ************************************ */
.top_about{width: 100%;padding: var(--pad-0-10);gap: var(--gap-5);}
.top_about_inner{width: 45%;flex-direction: column;align-items: flex-start;gap: var(--gap-3);}
.about_logo{max-width: 30rem;}
.about_btn_1{padding: var(--pad-btn);background-color: var(--color-pri);color: var(--color-white);transition: all .3s ease !important;border-radius: .8rem;}
.about_btn_1:hover{background-color: var(--color-secon);color: var(--color-dark);}

.top_about_photo{width: 55%;padding: 2rem;}
.top_about_image img{border-radius: 4rem; z-index: 1;}
.top_about_image_decor1,.top_about_image_decor2{position: absolute;z-index: 0;border-radius: 6rem;}
.top_about_image_decor1{background-color: var(--color-pri);animation: about_decor_1 10s infinite linear;}
.top_about_image_decor2{background-color: var(--color-secon);animation: about_decor_2 10s infinite linear;}
@keyframes about_decor_1 {
    0%{min-width: 100%;min-height: 50%;top: 0;left: 0;right: unset;bottom: unset;}
    25%{min-width: 50%;min-height: 100%;top: 0;left: 0;right: unset;bottom: unset;}
    25.000001%{min-width: 50%;min-height: 100%;top: unset;left: 0;right: unset;bottom: 0;}
    50%{min-width: 100%;min-height: 50%;top: unset;left: 0;right: unset;bottom: 0;}
    50.000001%{min-width: 100%;min-height: 50%;top: unset;left: unset;right: 0;bottom: 0;}
    75%{min-width: 50%;min-height: 100%;top: unset;left: unset;right: 0;bottom: 0;}
    75.000001%{min-width: 50%;min-height: 100%;top: 0;left: unset;right: 0;bottom: unset;}
    99.999999%{min-width: 100%;min-height: 50%;top: 0;left: unset;right: 0;bottom: unset;}
    100%{min-width: 100%;min-height: 50%;top: 0;left: 0;right: unset;bottom: unset;}
}
@keyframes about_decor_2 {
    0%{min-width: 100%;min-height: 50%;top: unset;left: unset;right: 0;bottom: 0;}
    25%{min-width: 50%;min-height: 100%;top: unset;left: unset;right: 0;bottom: 0;}
    25.000001%{min-width: 50%;min-height: 100%;top: 0;left: unset;right: 0;bottom: unset;}
    50%{min-width: 100%;min-height: 50%;top: 0;left: unset;right: 0;bottom: unset;}
    50.000001%{min-width: 100%;min-height: 50%;top: 0;left: 0;right: unset;bottom: unset;}
    75%{min-width: 50%;min-height: 100%;top: 0;left: 0;right: unset;bottom: unset;}
    75.000001%{min-width: 50%;min-height: 100%;top: unset;left: 0;right: unset;bottom: 0;}
    99.999999%{min-width: 100%;min-height: 50%;top: unset;left: 0;right: unset;bottom: 0;}
    100%{min-width: 100%;min-height: 50%;top: unset;left: unset;right: 0;bottom: 0;}
}
@media (max-width: 800px) {
    .top_about{flex-direction: column;}
    .top_about_inner,.top_about_photo{width: 100%;}
}
/* ************************************ Top About End ************************************ */

/* ************************************ Top Blog Begin ************************************ */
.top_section_title{flex-direction: column;align-items: flex-start;}
.top_section_title_s{gap: 1rem;}
.section_title_decor_1{width: 2rem;height: .4rem;background-color: var(--color-pri);}
.top_section_title p{color: var(--color-dark);}

.owl-stage-outer{display: unset !important;}
.owl-carousel .owl-stage{align-items: stretch;}
.owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev{
    padding: 2rem !important;background-color: var(--color-white) !important;border-radius: 50rem;aspect-ratio: 1/1;transition: all .3s ease !important;}
.owl-carousel .owl-nav{gap: 5rem;}
.owl-carousel .owl-nav button.owl-next span, .owl-carousel .owl-nav button.owl-prev span{font-size: 3rem;line-height: 0;margin-top: -.5rem;font-weight: 700;}
.owl-carousel .owl-nav button.owl-next:hover, .owl-carousel .owl-nav button.owl-prev:hover{background-color: var(--color-pri) !important;color: var(--color-white) !important;}
.owl-carousel.owl-drag .owl-item{align-items: flex-start;}

.top_blog{width: 100%;overflow: hidden;padding: var(--pad-0-5);}
.top_blog_container{padding: var(--pad-5-5);border-radius: 4rem;gap: 3rem;flex-direction: column;align-items: flex-start;
    width: 100%;background-color: var(--color-secon);}
.blog_item,.blog_item_text{flex-direction: column;align-items: flex-start;gap: 1rem;}
.blog_item{width: 100%;overflow: hidden;}
.top_blog_slide{width: 100%;overflow: hidden;}
.blog_item_photo{width: 100%;aspect-ratio: 3/2;overflow: hidden;border-radius: 1rem;}
.top_blog_more{width: 100%;padding: var(--pad-0-10);justify-content: flex-end;padding-top: 1rem;}
.top_blog_more_btn{gap: 1rem;color: var(--color-dark);transition: all .3s ease !important;}
.top_blog_more_btn svg{transition: all .3s ease !important;fill: var(--color-dark);}
.top_blog_more_btn:hover svg{transform: translateX(2rem);fill: var(--color-pri);}
.top_blog_more_btn:hover{color: var(--color-pri);}
/* ************************************ Top Blog End ************************************ */

/* ************************************ Top Story Begin ************************************ */
.top_story{gap: var(--gap-5);justify-content: flex-start;padding: var(--pad-0-10);align-items: stretch;}
.story_photo{width: -webkit-fill-available;border-radius: 4rem;overflow: hidden;height: 100%;}
.story_photo > img{width: unset;}
.story_text{align-items: flex-start;justify-content: flex-start;gap: 2rem;flex-direction: row-reverse;}
.story_text p{writing-mode: vertical-rl;text-orientation: upright;letter-spacing: .8rem;line-height: 1.4;}
.story_text_title{padding: 0 4rem;}
.story_text_mark{position: absolute;top: -4.8rem;right: 4rem;}
@media (max-width: 800px) {
    .top_story{flex-direction: column;}
    .story_photo > img{width: 100%;}
    .story_text_title{padding: 0 1rem;}
    .story_text{gap: .7rem;justify-content: center;}
    .story_text_mark{top: -3.2rem;right: 0.5rem;}
}
/* ************************************ Top Story End ************************************ */

/* ************************************ Top Service Begin ************************************ */
.top_service{width: 100%;flex-direction: column;align-items: flex-start;gap: var(--gap-5);padding: var(--pad-0-10);}
.serivce_inner{width: 100%;flex-direction: column;align-items: flex-start;gap: var(--gap-3);padding: var(--pad-0-10);}
.serivce_inner_text{width: 100%;align-items: flex-start;gap: 2rem;flex-wrap: wrap;justify-content: flex-start;}
.serivce_inner_p_1{padding: .5rem 5rem;border-radius: 50rem;border: solid 1px var(--color-dark);text-wrap: nowrap;}
.serivce_inner_p_2{text-align: center;margin: 3rem auto;}
.serivce_photo{width: 100%;flex-direction: column;gap: 1rem;}
.serivce_photo_line{gap: 1rem;}
.serivce_photo_image{width: 100%;aspect-ratio: 4/3;border-radius: .8rem;overflow: hidden;}
/* ************************************ Top Service End ************************************ */

/* ************************************ Top Examples Begin ************************************ */
.top_examples{width: 100%;flex-direction: column;align-items: flex-start;gap: var(--gap-5);padding: var(--pad-0-5);}
.examples_container{width: 100%;flex-direction: column;gap: 1rem;}
.examples_slide{width: 100%;overflow: hidden;}
.examples_slide_1{border-top-right-radius: 20rem;}
.examples_slide_2{border-bottom-left-radius: 20rem;}
/* ************************************ Top Examples End ************************************ */


/* ************************************ Top Eco Begin ************************************ */
.top_eco{width: 100%;flex-direction: column;align-items: flex-start;gap: var(--gap-10);padding: var(--pad-10-10);background-color: var(--color-green-bg);}
.eco_title{justify-content: stretch;gap: var(--gap-3);}
.eco_title > img{width: 100%;}
.eco_title_text{width: 100%;flex-direction: column;gap: 1rem;}
.eco_title_photo{width: 100%;}
.eco_title_image{width: 100%;aspect-ratio: 27/20;overflow: hidden;}

.eco_btn{width: 100%;}
.eco_a{padding: var(--pad-btn);gap: 1rem;border-radius: 50rem;background-color: var(--color-secon);border: solid 1px var(--color-dark);transition: all .3s ease !important;}
.eco_a p{color: var(--color-dark);}
.eco_a:hover{gap: 5rem;}
.eco_photo{width: 100%;flex-wrap: wrap;gap: 1rem;}
.eco_image{width: calc((100% - 3rem)/4);aspect-ratio: 4/3;overflow: hidden;border-radius: .8rem;}
@media (max-width: 800px) {
    .eco_title{flex-direction: column;}
}
/* ************************************ Top Eco End ************************************ */

/* ************************************ Top Company Begin ************************************ */
.top_company{width: 100%;flex-direction: column;align-items: flex-start;gap: var(--gap-10);}
.top_company .top_section_title{padding: var(--pad-0-10);}
.top_company_inner{align-items: stretch;width: 100%;justify-content: flex-start;}
.company_item{border: solid 1px var(--color-dark);max-width: 70%;align-items: stretch;transition: all .3s ease !important;overflow: hidden;}
.company_item_1{flex-direction: column;width: 100%;gap: var(--gap-3);object-fit: cover;padding: var(--pad-3-3);}
.company_title_1{flex-direction: column;display: flex;}
.company_more{gap: 1rem;display: flex;}
.company_photo{width: 80%;height: 80%;transition: all .3s ease !important;}

.company_item_2{flex-direction: column;justify-content: flex-start;align-items: flex-start;gap: var(--gap-3);;
    width: 0;min-height: 45rem;max-height: 45rem;height: 100%;transition: all .3s ease !important;overflow: hidden;}
.company_title_2{flex-direction: column;align-items: flex-start;}
.company_text{flex-direction: column;align-items: flex-start;gap: 1rem;}
.company_text_2{margin-top: 5rem;}

.company_item{min-width: 25%;max-width: 25%;background-color: #ECE5DF;position: absolute;height: 100%;}
.company_item.company_show{min-width: 70%;max-width: 70%;background-color: var(--color-white);position: relative;}
.company_4{right: 0;z-index: 0;}
.company_3{right: 10%;z-index: 1;}
.company_2{right: 20%;z-index: 2;}
.company_1{left: 0;z-index: 3;}

.company_item.company_show > .company_item_1 > .company_title_1{height: 0;overflow: hidden;}
.company_item.company_show > .company_item_1 > .company_more{height: 0;overflow: hidden;}
.company_item.company_show > .company_item_1 > .company_photo{width: 100%;height: 100%;}
.company_item.company_show > .company_item_1{padding: 0;gap: 0;}
.company_item.company_show > .company_item_2{width: 100%;padding: var(--pad-3-3)}
.company_item.company_show{z-index: 4;}

.company_2.company_show{right: unset;left: 10%;}
.company_3.company_show{right: unset;left: 20%;}
.company_4.company_show{right: unset;left: 30%;}

.top_company_btn{width: 100%;}
.company_btn{align-items: stretch;border: solid 1px var(--color-dark);background-color: var(--color-white);color: var(--color-dark);transition: all .3s ease !important;}
.company_btn svg{fill: var(--color-dark);transition: all .3s ease !important;}
.company_btn_item_1{padding: 1rem 5rem;}
.company_btn_item_2{padding: 2rem;aspect-ratio: 1/1;}
.company_btn_item_1+.company_btn_item_2{border-left: solid 1px var(--color-dark);}
.company_btn:hover{background-color: var(--color-dark);color: var(--color-white);}
.company_btn:hover svg{fill: var(--color-white);}
.company_btn:hover .company_btn_item_2{border-left: solid 1px var(--color-white);}

@media (max-width: 800px) {
.top_company_inner{flex-direction: column;width: 100%;padding: var(--pad-0-5);}
}
.company_inner_line_m{flex-direction: column;width: 100%;border: solid 1px var(--color-dark);align-items: flex-start;gap: 2rem;}
.company_inner_line_m+.company_inner_line_m{border-top: none;padding: 3rem 2rem;}
/* ************************************ Top Company End ************************************ */

/* ************************************ Top Recruit Begin ************************************ */
.top_recruit{width: 100%;padding: var(--pad-0-10);min-height: 95vh;background-image: url(../images/recruit.jpg);background-repeat: no-repeat;}
.recruit_text{width: 100%;color: var(--color-white);flex-direction: column;align-items: flex-start;gap: var(--gap-3);}
.recruit_text .section_title_p_1,.recruit_text .section_title_p_2{color: var(--color-white);}
.recruit_text_inner,.recruit_text_spec{flex-direction: column;align-items: flex-start;}
.recruit_text_spec p{background-color: var(--color-white);color: var(--color-dark);}
.recruit_text_spec{gap: 1rem;}

.recruit_btn{width: 100%;}
.recruit_a{gap: 1rem;padding: var(--pad-btn);border: solid 1px var(--color-white);border-radius: .4rem;
    transition: all .3s ease !important;color: var(--color-white);}
.recruit_a svg{fill: var(--color-white);transition: all .3s ease !important;}
.recruit_a:hover{background: var(--color-white);color: var(--color-dark);}
.recruit_a:hover svg{fill: var(--color-dark);}

@media (max-width: 800px) {
    .top_recruit{flex-direction: column;gap: 5rem;}
}
/* ************************************ Top Recruit End ************************************ */

/* ************************************ Top Contact Begin ************************************ */
.top_contact{width: 100%;}
.top_contact_inner{flex-direction: column;align-items: flex-start;gap: 0;min-width: 50%;}
.top_contact_title{padding: var(--pad-btn);background-color: var(--color-dark);color: var(--color-white);
    border-top-left-radius: 1rem;border-top-right-radius: 1rem;}
.contact_form{flex-direction: column;padding: var(--pad-5-5);border: solid 1px var(--color-dark);border-radius: 1rem;
    border-top-left-radius: 0;width: 100%;gap: var(--gap-3);display: flex;justify-content: flex-start;align-items: center;}
.contact_p_1{text-align: center;}
.contact_form_inner_item{flex-direction: column;align-items: flex-start;width: 100%;}
.contact_form_inner_item span{color: red;margin-left: 1rem;}
.contact_form_inner_item p{margin-left: 2rem;}
input[type=text]{width: 100%;padding: 1.5rem 1.5rem;border-radius: 50rem;border: solid 1px var(--color-dark);}
textarea[type=text]{width: 100%;padding: 1.5rem 1.5rem;border-radius: 1rem;border: solid 1px var(--color-dark);line-height: 1.6;}
input[type=text]:focus,textarea[type=text]:focus{border: solid 1px var(--color-pri);outline: none;color: var(--color-pri);}
input[type=submit]{background-color: var(--color-dark);color: var(--color-white);font-size: 2.8rem;padding: 1rem 5rem;
    font-weight: 700;border-radius: .8rem;transition: all .3s ease !important;border: none;}
input[type=submit]:hover{background-color: var(--color-secon);color: var(--color-dark);cursor: pointer;}
.contact_form_inner_item_2{gap: 1rem;flex-wrap: wrap;}
input[type=radio]{display: none;}
input[type=radio] + label{padding: .5rem 2rem;border-radius: .8rem;background-color: var(--color-white);cursor: pointer;
    border: solid 1px var(--color-dark);opacity: 0;transition: all .3s ease !important;color: var(--color-dark);}
input[type=radio] + label:hover{color: var(--color-pri);border: solid 1px var(--color-pri);}
input[type=radio]:checked + label{color: var(--color-white);background-color: var(--color-pri);border: solid 1px var(--color-pri);}
input[type=radio] + label.show{opacity: .5;}
input[type=radio]:checked + label.show{opacity: 1;}
input[type=radio]:checked + label.show:hover{opacity: 1;}
@media (max-width: 800px) {
    .top_contact{padding: 0 1rem;}
}
/* ************************************ Top Contact End ************************************ */

/* ************************************ Top Footer Begin ************************************ */
.footer{padding: var(--pad-5-10);justify-content: space-between;background-color: var(--color-green-bg);}
.footer_inner{flex-direction: column;gap: var(--gap-3);align-items: flex-start;}
.footer_inner_logo,.footer_inner_info{flex-direction: column;align-items: flex-start;}
.footer_inner_info{gap: 1rem;}
.footer_inner_info_line{gap: 3rem;}
.footer_inner_info a{color: var(--color-dark);transition: all .3s ease !important;}
.footer_inner_info a:hover{color: var(--color-pri);}
.footer_map{width: 30%;overflow: hidden;}
.footer_map *{width: 100%;height: 100%;object-fit: cover;aspect-ratio: 4/3;}
@media (max-width: 800px) {
    .footer{flex-direction: column;gap: 5rem;align-items: flex-start;}
    .footer_map{width: 100%;}
    .footer_inner_logo img{max-width: 50%;}
}
/* ************************************ Top Footer End ************************************ */
.page_block_container{width: 100%;padding: var(--pad-0-10);gap: 2rem;flex-wrap: wrap;justify-content: flex-start;row-gap: 3rem;align-items: flex-start;}
.page_block_container .blog_item{width: calc((100% - 4rem)/3);}
.child_carol{min-height: 65vh;}
.chile_navi{width: 100%;padding: var(--pad-0-10);gap: var(--gap-3);justify-content: flex-start;padding-top: 1rem;}
@media (max-width: 800px) {
    .child_carol{height: 45vh;min-height: 45vh;}
    .page_block_container .blog_item{width: calc((100% - 2rem)/2);}
}

.page_recruit_container{width: 100%;flex-direction: column;align-items: flex-start;padding: var(--pad-0-10);gap: var(--gap-5);}
.page_recruit_cover{width: 100%;flex-direction: column;align-items: flex-start;padding: 5rem;gap: var(--gap-5);border-radius: 1rem;border: solid 1px var(--color-dark);}
.chile_recruit{justify-content: stretch;align-items: flex-start;gap: var(--gap-5);}
.chile_recruit_row{flex-direction: column;align-items: flex-start;gap: var(--gap-3);width: 100%;}
.chile_recruit_item{flex-direction: column;align-items: flex-start;}
.chile_recruit_p_1{color: var(--color-pri);}
@media (max-width: 800px) {
    .chile_recruit{flex-direction: column;gap: var(--gap-3);}
}
.chile_back{padding: .5rem 5rem;border-radius: 50rem;background-color: var(--color-pri);color: var(--color-white);transition: all .3s ease !important;}
.chile_back:hover{background-color: var(--color-secon);color: var(--color-dark);}
/* ************************************ Show Up Setup ************************************ */
.show_up,.show_up_4,.show_up_6 {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.show_up_2{opacity: 0;transform: translate(-100%,0);transition: opacity 1s ease, transform 1s ease;}
.show_up_3{opacity: 0;transform: translate(100%,0);transition: opacity 1s ease, transform 1s ease;}

.show_up.show,.show_up_2.show,.show_up_3.show,.show_up_4.show,.show_up_6.show {
    opacity: 1;
    transform: translate(0,0);
}
/* ************************************ Show Up Setup End ************************************ */

#loading{position: fixed;top: 0;left: 0;width: 100%;height: 100%;
    background: white;z-index: 9999;display: flex;align-items: center;justify-content: center;}
.loader-content{position: relative;display: flex;align-items: center;justify-content: flex-start;gap: 2rem;}
.loading_logo_2{width: 10rem;aspect-ratio: 1/1;}
.loading_logo_3{width: 0;height: 10rem;animation: slideIn .8s ease-out .8s forwards;overflow: hidden;}
#logo2 {width: 100%;height: 100%;
    animation: spinScale .8s ease-out forwards;transform-origin: center;}
#logo3{position: absolute;left: 0;width: 12rem;height: auto;}
  
  @keyframes spinScale {
    0% {
      transform: scale(0) rotate(0deg);
      opacity: 0;
    }
    60% {
      opacity: 1;
    }
    100% {
      transform: scale(1) rotate(360deg);
      opacity: 1;
    }
  }
  
  @keyframes slideIn {
    0% {
      width: 0;
    }
    100% {
      width: 12rem;
    }
  }