@import url(colors.css);
@import url(buttons.css);
@import url(fonts.css);
@import url(animations.css);

/* General styles */
    .orange-navbar-toggler { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 107, 0, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='4' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important; }
    .white-navbar-toggler { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='4' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important; }
    .navbar-toggler:focus { box-shadow: none !important; }
    .nav-link:hover { text-decoration: underline; }
    .z-index-logo-header { position: relative; z-index: 3 !important; }
    
    .reset-nav-padding { padding-top: 5rem; }
    .cursor-pointer { cursor: pointer !important; }
    .left-about-1 { animation: animationLeftAbout1 2s ease-in-out 1s infinite; }
    .left-about-2 { animation: animationLeftAbout2 2s ease-in-out 1.4s infinite; }
    .line-1 { animation: animationLineAbout 3s ease 0s 1; }
    .line-2 { animation: animationLineAbout 2s ease 0s 1; }
    .bee-about { animation: animationBeeAbout 2s ease 0s infinite; }
    .bg-clients { background-image: url(../imgs/bg-clients.svg); background-size: auto; background-repeat: no-repeat; }
    .bg-portifolio { background-image: url(../imgs/bg-portifolio.svg); background-size: auto; background-repeat: no-repeat; background-position: bottom; }
    .fancybox__content :focus:not(.carousel__button.is-close) { outline: none; }

    .card-portifolio[data-portifolio='thumb-case-artesanato'] { background-image: url(../imgs/portifolio/case-artesanato/thumb.png); }
    .card-portifolio[data-portifolio='thumb-case-camisa10'] { background-image: url(../imgs/portifolio/case-camisa10/thumb.png); }
    .card-portifolio[data-portifolio='thumb-case-soleil'] { background-image: url(../imgs/portifolio/case-soleil/thumb.png); }
    .card-portifolio[data-portifolio='thumb-case-dia-bancario'] { background-image: url(../imgs/portifolio/case-dia-bancario/thumb.png); }
    .card-portifolio[data-portifolio='thumb-case-empresarios'] { background-image: url(../imgs/portifolio/case-empresarios/thumb.png); }
    .card-portifolio[data-portifolio='thumb-case-olha-de-novo'] { background-image: url(../imgs/portifolio/case-olha-de-novo/thumb.png); }
    .card-portifolio[data-portifolio='thumb-case-concentrix'] { background-image: url(../imgs/portifolio/case-concentrix/thumb.png); }
    .card-portifolio[data-portifolio='thumb-case-furukawa'] { background-image: url(../imgs/portifolio/case-furukawa/thumb.png); }
    .card-portifolio[data-portifolio='thumb-case-convencao-natura'] { background-image: url(../imgs/portifolio/case-convencao-natura/thumb.png); }
    .card-portifolio[data-portifolio='thumb-case-regional-natura'] { background-image: url(../imgs/portifolio/case-regional-natura/thumb.png); }
    .card-portifolio[data-portifolio='thumb-case-essity'] { background-image: url(../imgs/portifolio/case-essity/thumb.png); }
    .card-portifolio[data-portifolio='thumb-case-gbg'] { background-image: url(../imgs/portifolio/case-gbg/thumb.png); }
    .card-portifolio[data-portifolio='thumb-case-incentivo'] { background-image: url(../imgs/portifolio/case-incentivo/thumb.png); }
    .card-portifolio[data-portifolio='thumb-case-linkedin'] { background-image: url(../imgs/portifolio/case-linkedin/thumb.png); }
    .card-portifolio[data-portifolio='thumb-case-cafe-presidente'] { background-image: url(../imgs/portifolio/case-cafe-presidente/thumb.png); }
    .card-portifolio[data-portifolio='thumb-case-incentivo-tokio'] { background-image: url(../imgs/portifolio/case-incentivo-tokio/thumb.png); }
    .card-portifolio[data-portifolio='thumb-case-cimed-experience'] { background-image: url(../imgs/portifolio/case-cimed-experience-2023/thumb.png); }
    .card-portifolio[data-portifolio='thumb-case-sbt-ccxp'] { background-image: url(../imgs/portifolio/case-sbt-ccxp/thumb.png); }
    .card-portifolio[data-portifolio='thumb-case-selecao-essity'] { background-image: url(../imgs/portifolio/case-selecao-essity-2022/thumb.png); }
    .card-portifolio[data-portifolio='thumb-case-tokio-fest-22'] { background-image: url(../imgs/portifolio/case-tokio-fest-2022/thumb.png); }
    .card-portifolio[data-portifolio='thumb-case-tokio-rgp-22'] { background-image: url(../imgs/portifolio/case-tokio-rgp-2022/thumb.png); }
    .card-portifolio[data-portifolio='thumb-case-amanha-comeca-agora-sbt'] { background-image: url(../imgs/portifolio/case-amanha-comeca-agora-sbt/thumb.png); }

    /* Novos 21.10.24 */
    .card-portifolio[data-portifolio='thumb-case-cafe-presidente24'] { background-image: url(../imgs/portifolio/cafe-presidente24/thumb.png); }
    .card-portifolio[data-portifolio='thumb-case-festival-interlagos24'] { background-image: url(../imgs/portifolio/case-festival-interlagos24/thumb.png); }
    .card-portifolio[data-portifolio='thumb-case-wec24'] { background-image: url(../imgs/portifolio/case-wec24/thumb.png); }
    .card-portifolio[data-portifolio='thumb-case-novo-corolla-cross24'] { background-image: url(../imgs/portifolio/case-novo-corolla-cross24/thumb.png); }
    .card-portifolio[data-portifolio='thumb-case-caverna-encantada24'] { background-image: url(../imgs/portifolio/case-caverna-encantada24/thumb.png); }
    .card-portifolio[data-portifolio='thumb-case-tokio-trends23'] { background-image: url(../imgs/portifolio/case-tokio-trends23/thumb.png); }
    .card-portifolio[data-portifolio='thumb-case-tokio-rgp23'] { background-image: url(../imgs/portifolio/case-tokio-rgp23/thumb.png); }
    .card-portifolio[data-portifolio='thumb-case-concentrix-webhelp23'] { background-image: url(../imgs/portifolio/case-concentrix-webhelp23/thumb.png); }
    .card-portifolio[data-portifolio='thumb-case-sbt-ccxp23'] { background-image: url(../imgs/portifolio/case-sbt-ccxp23/thumb.png); }
    .card-portifolio[data-portifolio='thumb-case-sbt-bgs23'] { background-image: url(../imgs/portifolio/case-sbt-bgs23/thumb.png); }
    .card-portifolio[data-portifolio='thumb-case-cimed-encontro-farmarcas23'] { background-image: url(../imgs/portifolio/case-cimed-encontro-farmarcas23/thumb.png); }


    .card-portifolio-cover { background-image: url(../imgs/portifolio/thumb-cover.png); }
    
    .social-links-location { color: var(--orange); transition: var(--transition); }
    .social-links-location:hover { color: var(--yellow); }
    .fancybox-modal { background-image: url(../imgs/fav-modal.svg); background-repeat: no-repeat; background-position: 97% 4%; }

    .clients-logos { filter: grayscale(100%); transition: all .4s ease; }
    .clients-logos:hover { filter: grayscale(0%); }

    
/* END General styles */

@media screen and (max-width: 350px) {
    .center-content { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; }
    .bg-header { background-image: url(../imgs/bg-header-mobile.svg); background-size: cover; background-repeat: no-repeat; }
    .title-about { font-size: 4.5rem; }
    .subtitle-about { font-size: 2.9rem; }
    .ajust-mid-grid { margin-top: -2rem; }
    .grid-about-mobile, div[data-image-state='coverMobile1'], div[data-image-state='coverMobile2'], div[data-image-state='coverMobile3'], div[data-image-state='coverMobile4'], div[data-image-state='coverMobile5'], div[data-image-state='coverMobile6'], div[data-image-state='coverMobile7'] { height: 11rem; width: 9rem; }
    div[data-image-state='leftMobile1'], div[data-image-state='rightMobile1'] { height: 11rem; width: 100%; }
    .grid-about-mobile[data-image-state='normalMobile1'] { background-image: url(../imgs/grid-about/1.png); background-size: contain; background-repeat: no-repeat; }
    div[data-image-state='coverMobile1'] { background-image: url(../imgs/grid-about/1-hover.png); background-size: contain; background-repeat: no-repeat; opacity: 0; transition: var(--transition);  }
    div[data-image-state='coverMobile1']:hover { opacity: 1; }
    .grid-about-mobile[data-image-state='normalMobile2'] { background-image: url(../imgs/grid-about/2.png); background-size: contain; background-repeat: no-repeat; }
    div[data-image-state='coverMobile2'] { background-image: url(../imgs/grid-about/2-hover.png); background-size: contain; background-repeat: no-repeat; opacity: 0; transition: var(--transition);  }
    div[data-image-state='coverMobile2']:hover { opacity: 1; }
    .grid-about-mobile[data-image-state='leftMobile1'] { background-image: url(../imgs/grid-about/left1.svg); background-size: contain; background-repeat: no-repeat; }
    .grid-about-mobile[data-image-state='normalMobile3'] { background-image: url(../imgs/grid-about/3.png); background-size: contain; background-repeat: no-repeat; }
    div[data-image-state='coverMobile3'] { background-image: url(../imgs/grid-about/3-hover.png); background-size: contain; background-repeat: no-repeat; opacity: 0; transition: var(--transition);  }
    div[data-image-state='coverMobile3']:hover { opacity: 1; }
    .grid-about-mobile[data-image-state='rightMobile1'] { background-image: url(../imgs/grid-about/right1.svg); background-size: contain; background-repeat: no-repeat; }
    .grid-about-mobile[data-image-state='normalMobile4'] { background-image: url(../imgs/grid-about/4.png); background-size: contain; background-repeat: no-repeat; }
    div[data-image-state='coverMobile4'] { background-image: url(../imgs/grid-about/4-hover.png); background-size: contain; background-repeat: no-repeat; opacity: 0; transition: var(--transition);  }
    div[data-image-state='coverMobile4']:hover { opacity: 1; }
    .grid-about-mobile[data-image-state='normalMobile5'] { background-image: url(../imgs/grid-about/5.png); background-size: contain; background-repeat: no-repeat; }
    div[data-image-state='coverMobile5'] { background-image: url(../imgs/grid-about/5-hover.png); background-size: contain; background-repeat: no-repeat; opacity: 0; transition: var(--transition);  }
    div[data-image-state='coverMobile5']:hover { opacity: 1; }
    .grid-about-mobile[data-image-state='leftMobile2'] { background-image: url(../imgs/grid-about/left2.svg); background-size: contain; background-repeat: no-repeat; }
    .grid-about-mobile[data-image-state='normalMobile6'] { background-image: url(../imgs/grid-about/6.png); background-size: contain; background-repeat: no-repeat; }
    div[data-image-state='coverMobile6'] { background-image: url(../imgs/grid-about/6-hover.png); background-size: contain; background-repeat: no-repeat; opacity: 0; transition: var(--transition);  }
    div[data-image-state='coverMobile6']:hover { opacity: 1; }
    .grid-about-mobile[data-image-state='rightMobile2'] { background-image: url(../imgs/grid-about/right2.svg); background-size: contain; background-repeat: no-repeat; }
    .grid-about-mobile[data-image-state='normalMobile7'] { background-image: url(../imgs/grid-about/7.png); background-size: contain; background-repeat: no-repeat; }
    div[data-image-state='coverMobile7'] { background-image: url(../imgs/grid-about/7-hover.png); background-size: contain; background-repeat: no-repeat; opacity: 0; transition: var(--transition);  }
    div[data-image-state='coverMobile7']:hover { opacity: 1; }

    .left-element-about { display: none; }
    .right-line { display: none; }
    .bee-about { display: none; }

    .bg-manifest { background-image: url(../imgs/bg-manifest-tablet.svg); background-size: cover; background-repeat: no-repeat; background-color: var(--orange); }
    .manifest-title { color: transparent; font-size: 5rem; -webkit-text-stroke-width: .12rem; -webkit-text-stroke-color: var(--bs-white); font-family: sans-serif !important; }
    .position-bee-manifest { position: relative; left: -9rem; }

    .card-clients { width: 100%; height: 10rem; background-image: url(../imgs/clients/client-placeholder.png); background-size: cover; }
    .card-clients-cover { width: 100%; height: 10rem; background-image: url(../imgs/clients/client-placeholder-hover.png); background-size: cover; opacity: 0; transition: var(--transition); background-position: center 26rem; background-repeat: no-repeat; }
    .card-clients-cover:hover { opacity: 1; background-position: center; }

    .card-portifolio { width: 100%; height: 10rem; background-image: url(../imgs/portifolio/case1/thumb.png); background-size: cover; }
    .card-portifolio-cover { width: 100%; height: 10rem; background-image: url(../imgs/portifolio/case1/thumb-cover.png); background-size: cover; opacity: 0; transition: var(--transition); background-position: -26rem center; background-repeat: no-repeat; }
    .card-portifolio-cover:hover { opacity: 1; background-position: center; }

    .fancybox-modal { width: 95%; padding: 1rem; }
    .bg-hashtag { background-image: url(../imgs/bg-hashtag-mobile.jpg); background-size: cover; }
    .bg-location { background-image: url(../imgs/bg-location-mobile.jpg); background-size: cover; }
}

@media screen and (min-width: 351px) and (max-width: 767px) {
    .bg-header { background-image: url(../imgs/bg-header-mobile.svg); background-size: cover; background-repeat: no-repeat; }
    .title-about { font-size: 6rem; }
    .subtitle-about { font-size: 2.9rem; }
    .ajust-mid-grid { margin-top: -2rem; }
    .grid-about-mobile, div[data-image-state='coverMobile1'], div[data-image-state='coverMobile2'], div[data-image-state='coverMobile3'], div[data-image-state='coverMobile4'], div[data-image-state='coverMobile5'], div[data-image-state='coverMobile6'], div[data-image-state='coverMobile7'] { height: 12rem; width: 10rem; }
    div[data-image-state='leftMobile1'], div[data-image-state='rightMobile1'] { height: 12rem; width: 100%; }
    .grid-about-mobile[data-image-state='normalMobile1'] { background-image: url(../imgs/grid-about/1.png); background-size: contain; background-repeat: no-repeat; }
    div[data-image-state='coverMobile1'] { background-image: url(../imgs/grid-about/1-hover.png); background-size: contain; background-repeat: no-repeat; opacity: 0; transition: var(--transition);  }
    div[data-image-state='coverMobile1']:hover { opacity: 1; }
    .grid-about-mobile[data-image-state='normalMobile2'] { background-image: url(../imgs/grid-about/2.png); background-size: contain; background-repeat: no-repeat; }
    div[data-image-state='coverMobile2'] { background-image: url(../imgs/grid-about/2-hover.png); background-size: contain; background-repeat: no-repeat; opacity: 0; transition: var(--transition);  }
    div[data-image-state='coverMobile2']:hover { opacity: 1; }
    .grid-about-mobile[data-image-state='leftMobile1'] { background-image: url(../imgs/grid-about/left1.svg); background-size: contain; background-repeat: no-repeat; }
    .grid-about-mobile[data-image-state='normalMobile3'] { background-image: url(../imgs/grid-about/3.png); background-size: contain; background-repeat: no-repeat; }
    div[data-image-state='coverMobile3'] { background-image: url(../imgs/grid-about/3-hover.png); background-size: contain; background-repeat: no-repeat; opacity: 0; transition: var(--transition);  }
    div[data-image-state='coverMobile3']:hover { opacity: 1; }
    .grid-about-mobile[data-image-state='rightMobile1'] { background-image: url(../imgs/grid-about/right1.svg); background-size: contain; background-repeat: no-repeat; }
    .grid-about-mobile[data-image-state='normalMobile4'] { background-image: url(../imgs/grid-about/4.png); background-size: contain; background-repeat: no-repeat; }
    div[data-image-state='coverMobile4'] { background-image: url(../imgs/grid-about/4-hover.png); background-size: contain; background-repeat: no-repeat; opacity: 0; transition: var(--transition);  }
    div[data-image-state='coverMobile4']:hover { opacity: 1; }
    .grid-about-mobile[data-image-state='normalMobile5'] { background-image: url(../imgs/grid-about/5.png); background-size: contain; background-repeat: no-repeat; }
    div[data-image-state='coverMobile5'] { background-image: url(../imgs/grid-about/5-hover.png); background-size: contain; background-repeat: no-repeat; opacity: 0; transition: var(--transition);  }
    div[data-image-state='coverMobile5']:hover { opacity: 1; }
    .grid-about-mobile[data-image-state='leftMobile2'] { background-image: url(../imgs/grid-about/left2.svg); background-size: contain; background-repeat: no-repeat; }
    .grid-about-mobile[data-image-state='normalMobile6'] { background-image: url(../imgs/grid-about/6.png); background-size: contain; background-repeat: no-repeat; }
    div[data-image-state='coverMobile6'] { background-image: url(../imgs/grid-about/6-hover.png); background-size: contain; background-repeat: no-repeat; opacity: 0; transition: var(--transition);  }
    div[data-image-state='coverMobile6']:hover { opacity: 1; }
    .grid-about-mobile[data-image-state='rightMobile2'] { background-image: url(../imgs/grid-about/right2.svg); background-size: contain; background-repeat: no-repeat; }
    .grid-about-mobile[data-image-state='normalMobile7'] { background-image: url(../imgs/grid-about/7.png); background-size: contain; background-repeat: no-repeat; }
    div[data-image-state='coverMobile7'] { background-image: url(../imgs/grid-about/7-hover.png); background-size: contain; background-repeat: no-repeat; opacity: 0; transition: var(--transition);  }
    div[data-image-state='coverMobile7']:hover { opacity: 1; }

    .left-element-about { display: none; }
    .right-line { display: none; }
    .bee-about { display: none; }

    .bg-manifest { background-image: url(../imgs/bg-manifest-tablet.svg); background-size: cover; background-repeat: no-repeat; background-color: var(--orange); }
    .manifest-title { color: transparent; font-size: 5rem; -webkit-text-stroke-width: .12rem; -webkit-text-stroke-color: var(--bs-white); font-family: sans-serif !important; }
    .position-bee-manifest { position: relative; left: -9rem; }

    .card-clients { width: 100%; height: 12rem; background-image: url(../imgs/clients/client-placeholder.png); background-size: cover; }
    .card-clients-cover { width: 100%; height: 12rem; background-image: url(../imgs/clients/client-placeholder-hover.png); background-size: cover; opacity: 0; transition: var(--transition); background-position: center 26rem; background-repeat: no-repeat; }
    .card-clients-cover:hover { opacity: 1; background-position: center; }

    .card-portifolio { width: 100%; height: 12rem; background-image: url(../imgs/portifolio/case1/thumb.png); background-size: cover; }
    .card-portifolio-cover { width: 100%; height: 12rem; background-image: url(../imgs/portifolio/case1/thumb-cover.png); background-size: cover; opacity: 0; transition: var(--transition); background-position: -26rem center; background-repeat: no-repeat; }
    .card-portifolio-cover:hover { opacity: 1; background-position: center; }
    
    .fancybox-modal { width: 95%; padding: 1rem; }
    .bg-hashtag { background-image: url(../imgs/bg-hashtag-mobile.jpg); background-size: cover; }
    .bg-location { background-image: url(../imgs/bg-location-mobile.jpg); background-size: cover; }
    .featured-home { width: 100%; min-height: 15rem; background: linear-gradient(135deg, rgba(255, 107, 0, 79%) 0, rgba(255, 107, 0, 79%) 100%), url('../imgs/featured-home.jpg') no-repeat; background-size: cover; background-blend-mode: hue; }
    .cover-featured-home { background-image: url(../imgs/featured/featured-cover.svg); background-size: contain; background-repeat: no-repeat; opacity: 0; transition: var(--transition); height: 15rem; }
    .cover-featured-home:hover { opacity: 1; }

    .video-container { display: flex; justify-content: center; align-items: center; width: 100%; height: 80vh; overflow: hidden; }
    video { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 80vh; -o-object-fit: cover; object-fit: cover; }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
    .center-content { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; }
    .bg-header { background-image: url(../imgs/bg-header-mobile.svg); background-size: cover; background-repeat: no-repeat; }
    .title-about { font-size: 4rem; }
    .subtitle-about { font-size: 2.9rem; }
    .ajust-mid-grid { margin-top: -3rem; }
    .grid-about, div[data-image-state='cover1'], div[data-image-state='cover2'], div[data-image-state='cover3'], div[data-image-state='cover4'], div[data-image-state='cover5'], div[data-image-state='cover6'], div[data-image-state='cover7'] { height: 16rem; width: 14rem; }
    .grid-about[data-image-state='normal1'] { background-image: url(../imgs/grid-about/1.png); background-size: contain; background-repeat: no-repeat; }
    div[data-image-state='cover1'] { background-image: url(../imgs/grid-about/1-hover.png); background-size: contain; background-repeat: no-repeat; opacity: 0; transition: var(--transition);  }
    div[data-image-state='cover1']:hover { opacity: 1; }
    .grid-about[data-image-state='normal2'] { background-image: url(../imgs/grid-about/2.png); background-size: contain; background-repeat: no-repeat; }
    div[data-image-state='cover2'] { background-image: url(../imgs/grid-about/2-hover.png); background-size: contain; background-repeat: no-repeat; opacity: 0; transition: var(--transition);  }
    div[data-image-state='cover2']:hover { opacity: 1; }
    .grid-about[data-image-state='normal3'] { background-image: url(../imgs/grid-about/3.png); background-size: contain; background-repeat: no-repeat; }
    div[data-image-state='cover3'] { background-image: url(../imgs/grid-about/3-hover.png); background-size: contain; background-repeat: no-repeat; opacity: 0; transition: var(--transition);  }
    div[data-image-state='cover3']:hover { opacity: 1; }
    .grid-about[data-image-state='normal4'] { background-image: url(../imgs/grid-about/4.png); background-size: contain; background-repeat: no-repeat; }
    div[data-image-state='cover4'] { background-image: url(../imgs/grid-about/4-hover.png); background-size: contain; background-repeat: no-repeat; opacity: 0; transition: var(--transition);  }
    div[data-image-state='cover4']:hover { opacity: 1; }
    .grid-about[data-image-state='normal5'] { background-image: url(../imgs/grid-about/5.png); background-size: contain; background-repeat: no-repeat; }
    div[data-image-state='cover5'] { background-image: url(../imgs/grid-about/5-hover.png); background-size: contain; background-repeat: no-repeat; opacity: 0; transition: var(--transition);  }
    div[data-image-state='cover5']:hover { opacity: 1; }
    .grid-about[data-image-state='normal6'] { background-image: url(../imgs/grid-about/6.png); background-size: contain; background-repeat: no-repeat; }
    div[data-image-state='cover6'] { background-image: url(../imgs/grid-about/6-hover.png); background-size: contain; background-repeat: no-repeat; opacity: 0; transition: var(--transition);  }
    div[data-image-state='cover6']:hover { opacity: 1; }
    .grid-about[data-image-state='normal7'] { background-image: url(../imgs/grid-about/7.png); background-size: contain; background-repeat: no-repeat; }
    div[data-image-state='cover7'] { background-image: url(../imgs/grid-about/7-hover.png); background-size: contain; background-repeat: no-repeat; opacity: 0; transition: var(--transition);  }
    div[data-image-state='cover7']:hover { opacity: 1; }

    .left-element-about { display: none; }
    .right-line { display: none; }
    .bee-about { display: none; }

    .bg-manifest { background-image: url(../imgs/bg-manifest-tablet.svg); background-size: cover; background-repeat: no-repeat; background-color: var(--orange); }
    .manifest-title { color: transparent; font-size: 5rem; -webkit-text-stroke-width: .12rem; -webkit-text-stroke-color: var(--bs-white); font-family: sans-serif !important; }
    .position-bee-manifest { position: relative; left: -9rem; }
    
    .card-clients { width: 100%; height: 10rem; background-image: url(../imgs/clients/client-placeholder.png); background-size: cover; }
    .card-clients-cover { width: 100%; height: 10rem; background-image: url(../imgs/clients/client-placeholder-hover.png); background-size: cover; opacity: 0; transition: var(--transition); background-position: center 26rem; background-repeat: no-repeat; }
    .card-clients-cover:hover { opacity: 1; background-position: center; }

    .card-portifolio { width: 100%; height: 10rem; background-image: url(../imgs/portifolio/case1/thumb.png); background-size: cover; }
    .card-portifolio-cover { width: 100%; height: 10rem; background-image: url(../imgs/portifolio/case1/thumb-cover.png); background-size: cover; opacity: 0; transition: var(--transition); background-position: -26rem center; background-repeat: no-repeat; }
    .card-portifolio-cover:hover { opacity: 1; background-position: 0rem center; }

    .fancybox-modal { width: 95%; padding: 2rem; }
    .bg-hashtag { background-image: url(../imgs/bg-hashtag-mobile.jpg); background-size: cover; }
    .bg-location { background-image: url(../imgs/bg-location-mobile.jpg); background-size: cover; }

    .video-container { display: flex; justify-content: center; align-items: center; width: 100%; height: 66vh; overflow: hidden; }
    video { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 66vh; -o-object-fit: cover; object-fit: cover; }
}

@media screen and (min-width: 992px) {
    .center-content { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; }
    .bg-header { background-image: url(../imgs/bg-header.svg); background-size: initial; background-repeat: no-repeat; }
    .down-btn { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); opacity: 0; animation: showDownBtn 1s 6s forwards; }
    .left-stage-1:nth-child(1) { position: absolute; z-index: 1; top: 5rem; left: 8rem; animation: animationStage1 1s forwards, animationStage1Out .3s 4s forwards; transform: scale(0); }
    .left-stage-1:nth-child(2) { position: absolute; z-index: 1; top: 31rem; left: 2rem; animation: animationStage1 1s .25s forwards, animationStage1Out .3s 4s forwards; transform: scale(0); }
    .left-stage-1:nth-child(3) { position: absolute; z-index: 1; top: 28rem; left: 18rem; animation: animationStage1 1s .5s forwards, animationStage1Out .3s 4s forwards; transform: scale(0); }
    .right-stage-1:nth-child(4) { position: absolute; z-index: 1; top: 7rem; right: 15rem; animation: animationStage1 1s .75s forwards, animationStage1Out .3s 4s forwards; transform: scale(0); }
    .right-stage-1:nth-child(5) { position: absolute; z-index: 1; top: 12rem; right: 9rem; animation: animationStage1 1s 1s forwards, animationStage1Out .3s 4s forwards; transform: scale(0); }
    .right-stage-1:nth-child(6) { position: absolute; z-index: 1; top: 26rem; right: 18rem; animation: animationStage1 1s 1.25s forwards, animationStage1Out .3s 4s forwards; transform: scale(0); }
    .right-stage-1:nth-child(7) { position: absolute; z-index: 1; top: 19rem; right: 1rem; animation: animationStage1 1s 1.5s forwards, animationStage1Out .3s 4s forwards; transform: scale(0); }

    .left-stage-2:nth-child(8) { position: absolute; z-index: 1; top: 2rem; left: 15rem; animation: animationStage2 1s 4.25s forwards; transform: scale(0); }
    .left-stage-2:nth-child(9) { position: absolute; z-index: 1; top: 15rem; left: 9rem; animation: animationStage2 1s 4.5s forwards; transform: scale(0); width: 15rem; }
    .left-stage-2:nth-child(10) { position: absolute; z-index: 1; top: 24rem; left: 21rem; animation: animationStage2 1s 4.75s forwards; transform: scale(0); width: 15rem; }
    .left-stage-2:nth-child(11) { position: absolute; z-index: 1; top: 28rem; left: 7rem; animation: animationStage2 1s 5s forwards; transform: scale(0); width: 15rem; }
    .right-stage-2:nth-child(12) { position: absolute; z-index: 1; top: 3rem; right: 21rem; animation: animationStage2 1s 5.25s forwards; transform: scale(0); }
    .right-stage-2:nth-child(13) { position: absolute; z-index: 1; top: 20rem; right: 4rem; animation: animationStage2 1s 5.5s forwards; transform: scale(0); }

    .featured-home { width: 100%; min-height: 100vh; background: linear-gradient(135deg, rgba(255, 107, 0, 79%) 0, rgba(255, 107, 0, 79%) 100%), url('../imgs/featured-home.jpg') no-repeat; background-size: cover; background-blend-mode: hue; }
    .cover-featured-home { background-image: url(../imgs/featured/featured-cover.svg); background-size: contain; background-repeat: no-repeat; opacity: 0; transition: var(--transition); height: 100vh; }
    .cover-featured-home:hover { opacity: 1; }
    .no-scroll { overflow-y: hidden; }
    .title-about { font-size: 4rem; }
    .subtitle-about { font-size: 2.9rem; }
    .ajust-mid-grid { margin-top: -3rem; }
    .grid-about, div[data-image-state='cover1'], div[data-image-state='cover2'], div[data-image-state='cover3'], div[data-image-state='cover4'], div[data-image-state='cover5'], div[data-image-state='cover6'], div[data-image-state='cover7'] { height: 16rem; width: 14rem; }
    .grid-about[data-image-state='normal1'] { background-image: url(../imgs/grid-about/1.png); background-size: contain; background-repeat: no-repeat; }
    div[data-image-state='cover1'] { background-image: url(../imgs/grid-about/1-hover.png); background-size: contain; background-repeat: no-repeat; opacity: 0; transition: var(--transition);  }
    div[data-image-state='cover1']:hover { opacity: 1; }
    .grid-about[data-image-state='normal2'] { background-image: url(../imgs/grid-about/2.png); background-size: contain; background-repeat: no-repeat; }
    div[data-image-state='cover2'] { background-image: url(../imgs/grid-about/2-hover.png); background-size: contain; background-repeat: no-repeat; opacity: 0; transition: var(--transition);  }
    div[data-image-state='cover2']:hover { opacity: 1; }
    .grid-about[data-image-state='normal3'] { background-image: url(../imgs/grid-about/3.png); background-size: contain; background-repeat: no-repeat; }
    div[data-image-state='cover3'] { background-image: url(../imgs/grid-about/3-hover.png); background-size: contain; background-repeat: no-repeat; opacity: 0; transition: var(--transition);  }
    div[data-image-state='cover3']:hover { opacity: 1; }
    .grid-about[data-image-state='normal4'] { background-image: url(../imgs/grid-about/4.png); background-size: contain; background-repeat: no-repeat; }
    div[data-image-state='cover4'] { background-image: url(../imgs/grid-about/4-hover.png); background-size: contain; background-repeat: no-repeat; opacity: 0; transition: var(--transition);  }
    div[data-image-state='cover4']:hover { opacity: 1; }
    .grid-about[data-image-state='normal5'] { background-image: url(../imgs/grid-about/5.png); background-size: contain; background-repeat: no-repeat; }
    div[data-image-state='cover5'] { background-image: url(../imgs/grid-about/5-hover.png); background-size: contain; background-repeat: no-repeat; opacity: 0; transition: var(--transition);  }
    div[data-image-state='cover5']:hover { opacity: 1; }
    .grid-about[data-image-state='normal6'] { background-image: url(../imgs/grid-about/6.png); background-size: contain; background-repeat: no-repeat; }
    div[data-image-state='cover6'] { background-image: url(../imgs/grid-about/6-hover.png); background-size: contain; background-repeat: no-repeat; opacity: 0; transition: var(--transition);  }
    div[data-image-state='cover6']:hover { opacity: 1; }
    .grid-about[data-image-state='normal7'] { background-image: url(../imgs/grid-about/7.png); background-size: contain; background-repeat: no-repeat; }
    div[data-image-state='cover7'] { background-image: url(../imgs/grid-about/7-hover.png); background-size: contain; background-repeat: no-repeat; opacity: 0; transition: var(--transition);  }
    div[data-image-state='cover7']:hover { opacity: 1; }

    .left-element-about { position: absolute; top: 15rem; left: 0rem; }
    .left-about-1 { width: 7rem; position: relative; left: 3rem; }
    .left-about-2 { width: 9rem; position: relative; top: 3rem; }
    .right-line { width: 1px; background-color: var(--orange); height: 32rem; position: absolute; top: 8rem; right: 15rem; z-index: -1; }
    .line-2 { right: 10.1rem; }
    .bee-about { position: absolute; right: 9rem; bottom: -12rem; width: 6rem; }

    .bg-manifest { background-image: url(../imgs/bg-manifest.png); background-size: cover; background-repeat: no-repeat; background-color: var(--orange); }
    .manifest-title { color: transparent; font-size: 5rem; -webkit-text-stroke-width: .12rem; -webkit-text-stroke-color: var(--bs-white); font-family: sans-serif !important; }

    .card-clients { width: 100%; height: 20rem; background-image: url(../imgs/clients/client-placeholder.png); background-size: cover; }
    .card-clients-cover { width: 100%; height: 20rem; background-image: url(../imgs/clients/client-placeholder-hover.png); background-size: cover; opacity: 0; transition: var(--transition); background-position: center 26rem; background-repeat: no-repeat; }
    .card-clients-cover:hover { opacity: 1; background-position: center; }

    .card-portifolio { width: 100%; height: 15rem; background-image: url(../imgs/portifolio/case1/thumb.png); background-size: cover; }
    .card-portifolio-cover { width: 100%; height: 15rem; background-image: url(../imgs/portifolio/case1/thumb-cover.png); background-size: cover; opacity: 0; transition: var(--transition); background-position: -26rem center; background-repeat: no-repeat; }
    .card-portifolio-cover:hover { opacity: 1; background-position: 0rem center; }

    .fancybox-modal { width: 80%; padding: 2rem; }
    .fixed-lg-bottom { position: fixed; bottom: 0; left: 0; right: 0; }

    .bg-hashtag { background-image: url(../imgs/bg-hashtag.svg); background-size: auto; background-repeat: no-repeat; }
    .bg-location { background-image: url(../imgs/bg-location.svg); background-size: auto; background-repeat: no-repeat; background-attachment: fixed; }

    .video-container { display: flex; justify-content: center; align-items: center; width: 100%; height: 100vh; overflow: hidden; }
    video { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }

    .mt-clients { margin-top: -3.4rem; }
    .morebtn { width: 25rem; transition: var(--transition); } 
    .morebtn:hover { transform: scale(1.2); } 
}

@media screen and (min-width: 1200px) {
    .title-about { font-size: 4.5rem; }
    .subtitle-about { font-size: 3.3rem; }
    .ajust-mid-grid { margin-top: -3rem; }
    .grid-about, div[data-image-state='cover1'], div[data-image-state='cover2'], div[data-image-state='cover3'], div[data-image-state='cover4'], div[data-image-state='cover5'], div[data-image-state='cover6'], div[data-image-state='cover7'] { height: 16rem; width: 14rem; }
    .grid-about[data-image-state='normal1'] { background-image: url(../imgs/grid-about/1.png); background-size: contain; background-repeat: no-repeat; }
    div[data-image-state='cover1'] { background-image: url(../imgs/grid-about/1-hover.png); background-size: contain; background-repeat: no-repeat; opacity: 0; transition: var(--transition);  }
    div[data-image-state='cover1']:hover { opacity: 1; }
    .grid-about[data-image-state='normal2'] { background-image: url(../imgs/grid-about/2.png); background-size: contain; background-repeat: no-repeat; }
    div[data-image-state='cover2'] { background-image: url(../imgs/grid-about/2-hover.png); background-size: contain; background-repeat: no-repeat; opacity: 0; transition: var(--transition);  }
    div[data-image-state='cover2']:hover { opacity: 1; }
    .grid-about[data-image-state='normal3'] { background-image: url(../imgs/grid-about/3.png); background-size: contain; background-repeat: no-repeat; }
    div[data-image-state='cover3'] { background-image: url(../imgs/grid-about/3-hover.png); background-size: contain; background-repeat: no-repeat; opacity: 0; transition: var(--transition);  }
    div[data-image-state='cover3']:hover { opacity: 1; }
    .grid-about[data-image-state='normal4'] { background-image: url(../imgs/grid-about/4.png); background-size: contain; background-repeat: no-repeat; }
    div[data-image-state='cover4'] { background-image: url(../imgs/grid-about/4-hover.png); background-size: contain; background-repeat: no-repeat; opacity: 0; transition: var(--transition);  }
    div[data-image-state='cover4']:hover { opacity: 1; }
    .grid-about[data-image-state='normal5'] { background-image: url(../imgs/grid-about/5.png); background-size: contain; background-repeat: no-repeat; }
    div[data-image-state='cover5'] { background-image: url(../imgs/grid-about/5-hover.png); background-size: contain; background-repeat: no-repeat; opacity: 0; transition: var(--transition);  }
    div[data-image-state='cover5']:hover { opacity: 1; }
    .grid-about[data-image-state='normal6'] { background-image: url(../imgs/grid-about/6.png); background-size: contain; background-repeat: no-repeat; }
    div[data-image-state='cover6'] { background-image: url(../imgs/grid-about/6-hover.png); background-size: contain; background-repeat: no-repeat; opacity: 0; transition: var(--transition);  }
    div[data-image-state='cover6']:hover { opacity: 1; }
    .grid-about[data-image-state='normal7'] { background-image: url(../imgs/grid-about/7.png); background-size: contain; background-repeat: no-repeat; }
    div[data-image-state='cover7'] { background-image: url(../imgs/grid-about/7-hover.png); background-size: contain; background-repeat: no-repeat; opacity: 0; transition: var(--transition);  }
    div[data-image-state='cover7']:hover { opacity: 1; }

    .left-element-about { position: absolute; top: 15rem; left: 5rem; }
    .left-about-1 { width: 8rem; position: relative; left: 3rem; }
    .left-about-2 { width: 11rem; position: relative; top: 3rem; }
    .right-line { width: 1px; background-color: var(--orange); height: 32rem; position: absolute; top: 8rem; right: 23rem; z-index: -1; }
    .line-2 { right: 18.1rem; }
    .bee-about { position: absolute; right: 12rem; bottom: -12rem; width: 6rem; }

    .manifest-title { color: transparent; font-size: 6rem; -webkit-text-stroke-width: .12rem; -webkit-text-stroke-color: var(--bs-white); font-family: sans-serif !important; }
}

@media screen and (min-width: 1360px) {
    .title-about { font-size: 4.5rem; }
    .subtitle-about { font-size: 3.3rem; }
    .ajust-mid-grid { margin-top: -3rem; }
    .grid-about, div[data-image-state='cover1'], div[data-image-state='cover2'], div[data-image-state='cover3'], div[data-image-state='cover4'], div[data-image-state='cover5'], div[data-image-state='cover6'], div[data-image-state='cover7'] { height: 16rem; width: 14rem; }
    .grid-about[data-image-state='normal1'] { background-image: url(../imgs/grid-about/1.png); background-size: contain; background-repeat: no-repeat; }
    div[data-image-state='cover1'] { background-image: url(../imgs/grid-about/1-hover.png); background-size: contain; background-repeat: no-repeat; opacity: 0; transition: var(--transition);  }
    div[data-image-state='cover1']:hover { opacity: 1; }
    .grid-about[data-image-state='normal2'] { background-image: url(../imgs/grid-about/2.png); background-size: contain; background-repeat: no-repeat; }
    div[data-image-state='cover2'] { background-image: url(../imgs/grid-about/2-hover.png); background-size: contain; background-repeat: no-repeat; opacity: 0; transition: var(--transition);  }
    div[data-image-state='cover2']:hover { opacity: 1; }
    .grid-about[data-image-state='normal3'] { background-image: url(../imgs/grid-about/3.png); background-size: contain; background-repeat: no-repeat; }
    div[data-image-state='cover3'] { background-image: url(../imgs/grid-about/3-hover.png); background-size: contain; background-repeat: no-repeat; opacity: 0; transition: var(--transition);  }
    div[data-image-state='cover3']:hover { opacity: 1; }
    .grid-about[data-image-state='normal4'] { background-image: url(../imgs/grid-about/4.png); background-size: contain; background-repeat: no-repeat; }
    div[data-image-state='cover4'] { background-image: url(../imgs/grid-about/4-hover.png); background-size: contain; background-repeat: no-repeat; opacity: 0; transition: var(--transition);  }
    div[data-image-state='cover4']:hover { opacity: 1; }
    .grid-about[data-image-state='normal5'] { background-image: url(../imgs/grid-about/5.png); background-size: contain; background-repeat: no-repeat; }
    div[data-image-state='cover5'] { background-image: url(../imgs/grid-about/5-hover.png); background-size: contain; background-repeat: no-repeat; opacity: 0; transition: var(--transition);  }
    div[data-image-state='cover5']:hover { opacity: 1; }
    .grid-about[data-image-state='normal6'] { background-image: url(../imgs/grid-about/6.png); background-size: contain; background-repeat: no-repeat; }
    div[data-image-state='cover6'] { background-image: url(../imgs/grid-about/6-hover.png); background-size: contain; background-repeat: no-repeat; opacity: 0; transition: var(--transition);  }
    div[data-image-state='cover6']:hover { opacity: 1; }
    .grid-about[data-image-state='normal7'] { background-image: url(../imgs/grid-about/7.png); background-size: contain; background-repeat: no-repeat; }
    div[data-image-state='cover7'] { background-image: url(../imgs/grid-about/7-hover.png); background-size: contain; background-repeat: no-repeat; opacity: 0; transition: var(--transition);  }
    div[data-image-state='cover7']:hover { opacity: 1; }

    .left-element-about { position: absolute; top: 15rem; left: 5rem; }
    .left-about-1 { width: 8rem; position: relative; left: 3rem; }
    .left-about-2 { width: 11rem; position: relative; top: 3rem; }
    .right-line { width: 1px; background-color: var(--orange); height: 32rem; position: absolute; top: 8rem; right: 25rem; z-index: -1; }
    .line-2 { right: 20.8rem; }
    .bee-about { position: absolute; right: 12rem; bottom: -16rem; width: 6rem; }
}

@media screen and (min-width: 1400px) {
    .left-stage-1:nth-child(1) { position: absolute; z-index: 1; top: 5rem; left: 8rem; animation: animationStage1 1s forwards, animationStage1Out .3s 4s forwards; transform: scale(0); }
    .left-stage-1:nth-child(2) { position: absolute; z-index: 1; top: 31rem; left: 2rem; animation: animationStage1 1s .25s forwards, animationStage1Out .3s 4s forwards; transform: scale(0); }
    .left-stage-1:nth-child(3) { position: absolute; z-index: 1; top: 28rem; left: 18rem; animation: animationStage1 1s .5s forwards, animationStage1Out .3s 4s forwards; transform: scale(0); }
    .right-stage-1:nth-child(4) { position: absolute; z-index: 1; top: 7rem; right: 15rem; animation: animationStage1 1s .75s forwards, animationStage1Out .3s 4s forwards; transform: scale(0); }
    .right-stage-1:nth-child(5) { position: absolute; z-index: 1; top: 12rem; right: 9rem; animation: animationStage1 1s 1s forwards, animationStage1Out .3s 4s forwards; transform: scale(0); }
    .right-stage-1:nth-child(6) { position: absolute; z-index: 1; top: 26rem; right: 18rem; animation: animationStage1 1s 1.25s forwards, animationStage1Out .3s 4s forwards; transform: scale(0); }
    .right-stage-1:nth-child(7) { position: absolute; z-index: 1; top: 19rem; right: 1rem; animation: animationStage1 1s 1.5s forwards, animationStage1Out .3s 4s forwards; transform: scale(0); }

    .left-stage-2:nth-child(8) { position: absolute; z-index: 1; top: 2rem; left: 15rem; animation: animationStage2 1s 4.25s forwards; transform: scale(0); }
    .left-stage-2:nth-child(9) { position: absolute; z-index: 1; top: 15rem; left: 5rem; animation: animationStage2 1s 4.5s forwards; transform: scale(0); width: auto !important; }
    .left-stage-2:nth-child(10) { position: absolute; z-index: 1; top: 24rem; left: 21rem; animation: animationStage2 1s 4.75s forwards; transform: scale(0); width: auto !important; }
    .left-stage-2:nth-child(11) { position: absolute; z-index: 1; top: 28rem; left: 2rem; animation: animationStage2 1s 5s forwards; transform: scale(0); width: auto !important; }
    .right-stage-2:nth-child(12) { position: absolute; z-index: 1; top: 3rem; right: 21rem; animation: animationStage2 1s 5.25s forwards; transform: scale(0); }
    .right-stage-2:nth-child(13) { position: absolute; z-index: 1; top: 20rem; right: 4rem; animation: animationStage2 1s 5.5s forwards; transform: scale(0); }

    .featured-home { width: 100%; min-height: 100vh; background: linear-gradient(135deg, rgba(255, 107, 0, 79%) 0, rgba(255, 107, 0, 79%) 100%), url('../imgs/featured-home.jpg') no-repeat; background-size: cover; background-blend-mode: hue; }
    .cover-featured-home { background-image: url(../imgs/featured/featured-cover.svg); background-size: contain; background-repeat: no-repeat; opacity: 0; transition: var(--transition); height: 100vh; }
    .cover-featured-home:hover { opacity: 1; }
    .title-about { font-size: 6rem; }
    .subtitle-about { font-size: 4.3rem; }
    .ajust-mid-grid { margin-top: -4.5rem; }
    .grid-about, div[data-image-state='cover1'], div[data-image-state='cover2'], div[data-image-state='cover3'], div[data-image-state='cover4'], div[data-image-state='cover5'], div[data-image-state='cover6'], div[data-image-state='cover7'] { height: 20rem; width: 17rem; }
    .grid-about[data-image-state='normal1'] { background-image: url(../imgs/grid-about/1.png); background-size: contain; background-repeat: no-repeat; }
    div[data-image-state='cover1'] { background-image: url(../imgs/grid-about/1-hover.png); background-size: contain; background-repeat: no-repeat; opacity: 0; transition: var(--transition);  }
    div[data-image-state='cover1']:hover { opacity: 1; }
    .grid-about[data-image-state='normal2'] { background-image: url(../imgs/grid-about/2.png); background-size: contain; background-repeat: no-repeat; }
    div[data-image-state='cover2'] { background-image: url(../imgs/grid-about/2-hover.png); background-size: contain; background-repeat: no-repeat; opacity: 0; transition: var(--transition);  }
    div[data-image-state='cover2']:hover { opacity: 1; }
    .grid-about[data-image-state='normal3'] { background-image: url(../imgs/grid-about/3.png); background-size: contain; background-repeat: no-repeat; }
    div[data-image-state='cover3'] { background-image: url(../imgs/grid-about/3-hover.png); background-size: contain; background-repeat: no-repeat; opacity: 0; transition: var(--transition);  }
    div[data-image-state='cover3']:hover { opacity: 1; }
    .grid-about[data-image-state='normal4'] { background-image: url(../imgs/grid-about/4.png); background-size: contain; background-repeat: no-repeat; }
    div[data-image-state='cover4'] { background-image: url(../imgs/grid-about/4-hover.png); background-size: contain; background-repeat: no-repeat; opacity: 0; transition: var(--transition);  }
    div[data-image-state='cover4']:hover { opacity: 1; }
    .grid-about[data-image-state='normal5'] { background-image: url(../imgs/grid-about/5.png); background-size: contain; background-repeat: no-repeat; }
    div[data-image-state='cover5'] { background-image: url(../imgs/grid-about/5-hover.png); background-size: contain; background-repeat: no-repeat; opacity: 0; transition: var(--transition);  }
    div[data-image-state='cover5']:hover { opacity: 1; }
    .grid-about[data-image-state='normal6'] { background-image: url(../imgs/grid-about/6.png); background-size: contain; background-repeat: no-repeat; }
    div[data-image-state='cover6'] { background-image: url(../imgs/grid-about/6-hover.png); background-size: contain; background-repeat: no-repeat; opacity: 0; transition: var(--transition);  }
    div[data-image-state='cover6']:hover { opacity: 1; }
    .grid-about[data-image-state='normal7'] { background-image: url(../imgs/grid-about/7.png); background-size: contain; background-repeat: no-repeat; }
    div[data-image-state='cover7'] { background-image: url(../imgs/grid-about/7-hover.png); background-size: contain; background-repeat: no-repeat; opacity: 0; transition: var(--transition);  }
    div[data-image-state='cover7']:hover { opacity: 1; }
    
    .left-element-about { position: absolute; top: 19rem; left: 5rem; }
    .left-about-1 { width: 8rem; position: relative; left: 3rem; }
    .left-about-2 { width: 11rem; position: relative; top: 3rem; }
    .right-line { width: 1px; background-color: var(--orange); height: 40rem; position: absolute; top: 8rem; right: 25rem; z-index: -1; }
    .line-2 { right: 18.6rem; }
    .bee-about { position: absolute; right: 12rem; bottom: -16rem; width: 6rem; }

    .manifest-title { color: transparent; font-size: 6rem; -webkit-text-stroke-width: .12rem; -webkit-text-stroke-color: var(--bs-white); font-family: sans-serif !important; }

    .fancybox-modal { width: 90%; padding: 2rem; }

}

@media screen and (min-width: 1600px) {
    .fancybox-modal { width: 80%; padding: 2rem; }
    
}

@media screen and (min-width: 1920px) {
    .fancybox-modal { width: 65%; padding: 2rem; }
    
}