@import "./fonts.css";
@import "./variables.css";
@import "./slider.css";

*, body {
    font-family: "Como", ui-sans-serif, system-ui, sans-serif;
}

/* For Chrome, Safari, and Edge */
::-webkit-scrollbar-thumb {
    background-color: var(--color-steel-teal);
}

/* For Firefox */
:root {
    scrollbar-color: var(--color-steel-teal) white;
}

.fs-18 {
    font-size: 18px;
}

.fs-24 {
    font-size: 24px;
}

.fs-36 {
    font-size: 36px;
}

.fs-48 {
    font-size: 48px;
}

.fs-56 {
    font-size: 56px;
}

.fw-400 {
    font-weight: 400;
}

.fw-900 {
    font-weight: 900;
}

.bg-pale-cyan-dark {
    background: var(--color-pale-cyan-dark);
}

.bg-pale-cyan {
    background: var(--color-pale-cyan);
}

.bg-steel-teal {
    background: var(--color-steel-teal);
}

.color-dark-blue-green {
    color: var(--color-dark-blue-green);
}

.bg-dark-blue-green {
    background: var(--color-dark-blue-green);
}

.bg-portland-orange {
    background: var(--color-portland-orange);
}

.color-portland-orange {
    color: var(--color-portland-orange);
}

.cursor-pointer {
    cursor: pointer;
}

.max-w-8xl {
    max-width: 1440px;
}

.max-w-9xl {
    max-width: 1660px;
}

.max-w-10xl {
    max-width: 1880px;
}

.w-150 {
    width: 150px;
}

/*button hover border style*/
.btn-border-hover {
    position: relative;
    cursor: pointer;
    border-radius: 25px;
    transition: ease-out 0.5s;
    -webkit-transition: ease-out 0.5s;
    -moz-transition: ease-out 0.5s;
}

.btn-border-hover::after,
.btn-border-hover::before {
    position: absolute;
    content: "";
    /*border-radius: 50%;*/
    width: 0;
    height: 0;
    border-radius: 25px;
    visibility: hidden;
}

.btn-border-hover::after {
    bottom: 0;
    right: 0;
    border-left: 2px solid white;
    border-bottom: 2px solid white;
    border-radius: 25px;
    transition: width .1s ease .1s, height .1s ease, visibility 0s .2s;
}

.btn-border-hover::before {
    top: 0;
    left: 0;
    border-top: 2px solid white;
    border-right: 2px solid white;
    border-radius: 25px;
    transition: width .1s ease .3s, height .1s ease .2s, visibility 0s .4s;
}

.btn-border-hover:hover {
    animation: pulse 1s ease-out .4s;
}

.btn-border-hover:hover::after,
.btn-border-hover:hover::before {
    width: calc(100% + 1px);
    height: calc(100% + 1px);
    visibility: visible;
    border-radius: 25px;
    transition: width .1s ease .2s, height .1s ease .3s, visibility 0s .2s;
}

.btn-border-hover:hover::after {
    transition: width .1s ease .2s, height .1s ease .3s, visibility 0s .2s;
}

.btn-border-hover::before {
    transition: width .1s ease, height .1s ease .1s;
}

/*for secondary button*/

.btn-border-hover.secondary-btn-border-hover::after {
    border-left: 3px solid var(--color-portland-orange);
    border-bottom: 3px solid var(--color-portland-orange);
}

.btn-border-hover.secondary-btn-border-hover::before {
    border-top: 2px solid var(--color-portland-orange);
    border-right: 2px solid var(--color-portland-orange);
}

.btn-border-hover.secondary-btn-border-hover:hover {
    color: var(--color-portland-orange) !important;
}



.tier-selector-bg {
    background-size: contain !important;
    background-repeat: repeat;
    width: 100%;
    height: auto;
    /*padding-bottom: 3rem;*/
    margin-top: -2px;
    background-image: url('../assets/images/tier-selector-center.png');
}

.hero-section-bg {
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: auto;
    background-image: url('../assets/images/hero/bg.png');
}

/*.board-bg {*/
/*    background-repeat: no-repeat;*/
/*    background-size: cover;*/
/*    width: 100%;*/
/*    height: auto;*/
/*    background-image: url('../assets/images/whiteboard.png');*/
/*    */
/*}*/

.footer-bg {
    width: 100%;
    height: auto;
    background: #f9e9e5;
    /*background-repeat: no-repeat;*/
    /*background-image: url('../assets/images/bg-footer.png');*/
}

.fade-slide-out {
    @apply opacity-0 translate-y-4;
}
.fade-slide-in {
    @apply opacity-100 translate-y-0;
}

@keyframes spin-slow {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(-360deg);
    }
}

.animate-spin-slow {
    animation: spin-slow 100s linear infinite;
}

.fade-out {
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.fade-in {
    opacity: 1;
    transition: opacity 1s ease-in-out;
}

.chalk-strike {
    position: relative;
    width: max-content;
}

.chalk-strike::after {
    content: "";
    position: absolute;
    left: 0;
    top: 48%;
    height: 8px;
    /*background: rgba(255, 255, 255, 0.9);*/
    background: url("../assets/images/strike-text.png") repeat-x center;
    background-size: contain;
    background-position: top;
    background-repeat: round;
    /*background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.95) 0 8px, rgba(255, 255, 255, 0.7) 8px 12px, rgba(255, 255, 255, 0.9) 12px 18px);*/
    /*filter: blur(1px);*/
    /*border-radius: 2px;*/
    /*transform: rotate(-1deg);*/
    width: 0;                 /* start hidden */
    transition: width 0.4s ease;

}

.chalk-strike:not(.chalk-active)::after {
    width: 100%;              /* animate to full when strike is active */
}


.chalk-active::after {
    width: 0;                 /* shrink back instead of removing */
    content: "";              /* keep content so animation works */
}


/* Apply styles for screens up to 767px wide (typical mobile portrait) */
@media (max-width: 1720px) {
    .tier-selector-bg{
        background-size: cover;
}
}
@media (max-width: 767px) {
    .mb-coverage-bg {
        /*background-size: cover;*/
        /*background-position: center;*/
        /*background-repeat: no-repeat;*/
        background-image: url('../assets/svgs/mb-coverage-bg.svg');
    }

    .hero-section-bg {
        background-image: url('../assets/images/hero/mb-hero-section-bg.png');
        background-size: contain;
    }
    /*.footer-bg {*/
    /*    background-image: url('../assets/images/bg-footer-mbl.png');*/
    /*    background-position: center;*/
    /*}*/

}

@media (max-width: 1022px) {
    .about-us-mbl {
        position: absolute;
        top: 5%;
        right: 5%;
        width: 30%;
    }

}
@media (min-width: 992px) {

    .resp-hidden {
        display: none !important;
    }
    .resp-block {
        display: block !important;
    }
}


@keyframes typing {
    from { width: 0 }
    to { width: 100% }
}

.typing-animation {
    overflow: hidden;      /* hide text until typed */
    white-space: nowrap;   /* keep text in one line */
    width: 0;              /* start hidden */
    animation: typing 2s steps(30, end) forwards;
}

.animate-grow {
    transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}

.animate-grow:hover {
    transform: scale(1.2);
    opacity: 0.8;
}

@keyframes grow {

    from { transform: scale(0.8); opacity: 0; }

    to { transform: scale(1); opacity: 1; }

}

.animate-character-grow {
    animation: grow 1s ease-out forwards;
}


.opacity-frame {
    animation: opacity 0.5s ease-in-out;
}

.opacity-frame-0 {
    animation: opacity-0 0.5s ease-in-out;
}

@keyframes opacity {

    0%   {opacity: 0; }
    40%  {opacity: 0.3; }
    60%  {opacity: 0.6; }
    100% {opacity: 1; }

}

@keyframes opacity-0 {

    0%   {opacity: 1; }
    60%  {opacity: 0.6; }
    60%  {opacity: 0.3; }
    100% {opacity: 0; }

}
.animate-opacity:hover {
    opacity: 0.7;
}

.rocket-move {
    transition: transform 1.5s ease-in-out, opacity 1.5s ease-in-out;
}

.rocket-move:hover {
    transform: translateX(200px); /* move forward */
    opacity: 0;                  /* disappear */
}

.bounce-pop {
    opacity: 1;
    animation: bouncePopIn 0.4s ease;
}

.de-bounce-pop {
    opacity: 0;
    animation: bouncePopOut 0.4s ease forwards;
}

.inObject {
    position: absolute;
    opacity: 1;
    transform: translate(0,0) scale(1);
    will-change: transform, opacity;
    transition: transform 0.3s linear, opacity 0.3s linear;
}

.shield {
    position: absolute;
    opacity: 0;
    width: 3.5rem;
    height: 3.5rem;
    max-width: 4rem;
    max-height: 4rem;
    transform: scale(0.3);
    transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}


@keyframes bouncePopIn {
    0%   { transform: scale(0.6); opacity: 0; }
    60%  { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1);   opacity: 1; }
}

@keyframes bouncePopOut {
    0%   { transform: scale(1);   opacity: 1; }
    100% { transform: scale(0.6); opacity: 0; }
}