/* hero section */
.m-hero-section {
    padding-top: 10vh;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(8, 9, 13, 0.92), rgba(18, 22, 27, 0.88)), url(../images/grain.png?v=wai-live-20260707-2);
}

.m-hero-bg {
    z-index: -1;
    object-fit: cover;
    transition: opacity 500ms ease-in-out;
    filter: saturate(0.82) contrast(1.08) brightness(0.72);
}

/* hero section left */
#mHeroLeft {
    transition: transform 1000ms ease-in-out, opacity 400ms ease-in-out;
}
#mHeroCategoryTitle {
    color: var(--clr-secondary-100);
    text-shadow: 0 2px 12px rgba(6, 26, 64, 0.42);
    font-family: var(--ff-heading-primary);
    font-size: var(--fz-main-h1);
}

#mHeroCategory {
    font-family: var(--ff-heading-secondary);
    color: var(--clr-accent-lights-100);
    text-shadow: 0 2px 16px rgba(8, 9, 13, 0.28);
    font-size: clamp(1.7rem, 4.8vw, 4.8rem);
    margin-top: 0.2vw;
    letter-spacing: 0;
}

#mHeroDescription {
    color: var(--clr-secondary-100);
    text-shadow: 0 2px 10px rgba(8, 9, 13, 0.52);
    font-size: var(--fz-main-text);
    font-family: var(--ff-body-light);
    line-height: 1.7;
}

#mHeroButton {
    transition: background-color 400ms ease-in-out, box-shadow 400ms ease-in-out;
    font-family: var(--ff-body-bold);
    letter-spacing: 1px;
    background-color: var(--clr-accent-lights-100);
    color: var(--clr-primary-dark);
    font-size: var(--fz-main-small);
    box-shadow: 0 8px 24px rgba(6, 26, 64, 0.22);
}

#mHeroButton:hover, #mHeroButton:active {
    background-color: var(--clr-accent-lights);
    box-shadow: 0 0 20px var(--clr-accent-lights);
    border: none;
    outline: none;
}

main .btn, main .btn:active {
    border: none;
    outline: none;
}

.m-hero-slider-row {
    min-height: clamp(9rem, 24vh, 15rem);
    padding-bottom: clamp(1rem, 3vh, 2rem) !important;
}

.m-hero-thumb-row {
    align-items: end;
    gap: clamp(0.45rem, 1vw, 1rem);
}

.m-hero-thumb-row > [class*="col-"] {
    flex: 1 1 0;
    max-width: clamp(4.6rem, 10vw, 8rem);
    padding-block: 0.35rem !important;
}

.m-hero-thumb {
    aspect-ratio: 4 / 3;
    width: 100%;
    box-shadow: 0 0 10px var(--clr-primary-dark);
    transition: transform 400ms ease-in-out, box-shadow 400ms ease-in-out, border 400ms ease-in-out;
}

.m-hero-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.m-hero-thumb:hover {
    box-shadow: 0 0 20px -5px var(--clr-secondary-100);
    transform: translateY(-0.35rem) scale(1.06);
}

#mThumbDesc {
    display: block;
    min-height: 1.4em;
    padding-inline: 0.75rem;
    font-family: var(--ff-body-light);
    color: var(--clr-secondary-100);
    letter-spacing: 2px;
    transition: transform 400ms ease-in-out;
    text-shadow: 0 0 15px var(--clr-secondary-100);
    font-size: var(--fz-main-small);
    line-height: 1.25;
    white-space: normal;
    text-align: center;
}

.m-hero-thumb-label {
    min-height: 2.25rem;
    align-items: center !important;
    overflow: visible;
}

#mHeroThumb1 {
    border: 3px solid var(--clr-accent-lights-100);
}

/* Hero section right */
#mHeroRight{
    transition: transform 1000ms ease-in-out;
}

.mHeroCircle {
    top: 100%;
    left: 100%;
    width: 65vw;
    height: 65vw;
    transform: translate(-50%,-50%) rotate(15deg);
}

.m-hero-circle-sub {
    transform: translate(-50%, -50%);
    width: 27vw;
    height: 27vw;
    box-shadow: 0 0 20px var(--clr-primary-dark);
    border-radius: 50%;
}

.m-hero-circle-sub:active {
    transform: translate(-50%, -50%) scale(0.98);
    box-shadow: 0 0 10px var(--clr-primary-dark);
}

.m-hero-circle-image {
    width: 100%;
    min-width: 100%;
    object-fit: cover;
    height: 100%;
    border-radius: 50%;
    object-position: center;
    transform: rotate(-15deg);
}

#mCircleNext {
    width: 10vw;
}

#mCirclePrev {
    height: 10vw;
}

#circleImage2Sub {
    top: 0;
    left: 50%;
}

#circleImage1Sub {
    top: 25%;
    left: 6.6987%;
}

#circleImage3Sub {
    top: 25%;
    left: calc(100% - 6.6987%);
}

#circleImage6Sub {
    top: 75%;
    left: 6.6987%;
}

#circleImage4Sub {
    top: 75%;
    left: calc(100% - 6.6987%);
}

#circleImage5Sub {
    top: 100%;
    left: 50%;
}

.m-continue-rotation {
    background-color: rgba(244, 239, 227, 0.86);
    color: var(--clr-primary-dark);
    font-family: var(--ff-body-light);
    z-index: 2;
    backdrop-filter: blur(5px);
    background-image: url(../images/grain.png?v=wai-live-20260707-2);
}

#mContinueRotation {
    transition: color 400ms ease-in-out, text-shadow 400ms ease-in-out;
}

.mContText1 {
    transform: translate(-50%, 0%) rotate(-80deg);
}
.mContText2 {
    transform: translate(-50%, 0%) rotate(-73deg);
}
.mContText3 {
    transform: translate(-50%, 0%) rotate(-66deg);
}
.mContText4 {
    transform: translate(-50%, 0%) rotate(-59deg);
}
.mContText5 {
    transform: translate(-50%, 0%) rotate(-52deg);
}
.mContText6 {
    transform: translate(-50%, 0%) rotate(-45deg);
}
.mContText7 {
    transform: translate(-50%, 0%) rotate(-38deg);
}
.mContText8 {
    transform: translate(-50%, 0%) rotate(-31deg);
}
.mContText9 {
    transform: translate(-50%, 0%) rotate(-24deg);
}
.mContText10 {
    transform: translate(-50%, 0%) rotate(-17deg);
}
.mContText11 {
    transform: translate(-50%, 0%) rotate(-10deg);
}

.m-circle-text {
    left: 8%;
    bottom: 27vw;
    color: var(--clr-accent-lights-100);
    font-family: var(--ff-body-regular);
}

#mCircleText {
    transition: opacity 400ms ease-in-out;
    opacity: 0;
    background-color: rgba(0, 0, 0, 0.3);
    text-shadow: 0 0 5px var(--clr-primary-dark);
    backdrop-filter: blur(5px);
    font-size: var(--fz-main-small);
}

/* stats section */
.m-stats-section {
    background-color: var(--clr-secondary-300);
    min-height: 15rem;
}

.m-stats-count {
    font-family: var(--ff-heading-primary-2-extrabold);
    color: var(--clr-accent-lights);
    -webkit-text-stroke: 0;
    font-size: var(--fz-main-large);
    line-height: 0.95;
    text-shadow: 1px 0 0 rgba(6, 26, 64, 0.22);
}

.m-stats-section div > span {
    font-family: var(--ff-body-light);
    color: var(--clr-secondary-500);
    font-size: var(--fz-main-p);
    letter-spacing: 0;
}

/* services section */
.m-services-section {
    min-height: 200vh;
    background-color: #dfe6ee;
}

@media (min-width: 768px) {
    .m-services-section {
        min-height: 200vh;
    }
}

@media (min-width: 1200px) {
    .m-services-section {
        min-height: 230vh;
    }
}

.m-services-image-1 {
    top: -1px;
    transform: rotate(180deg);
}

.m-services-image-2 {
    top: 50%;
    left: 15%;
    width: 30%;
    opacity: 0.8;
}

.m-services-image-3 {
    top: 27%;
    right: 10%;
    width: 40%;
}

.m-services-quote img {
    z-index: 1;
    width: 100%;
}

.m-services-quote-1, .m-services-quote-2 {
    width: 10%;
}

.m-services-quote-2 img {
    transform: rotate(180deg);
}

.m-services-quote p {
    z-index: 1;
    color: var(--clr-primary-dark);
    font-family: var(--ff-heading-primary-2-light-italic);
    font-size: var(--fz-main-h2);
}

.m-services-quote span {
    color: var(--clr-primary-dark);
    font-family: var(--ff-body-light);
    font-size: var(--fz-main-p);
    font-style: normal;
    bottom: -30%;
    transform: translate(-50%, 0);
}

.m-services-content {
    z-index: 1;
    min-height: 120vh;
}

.m-services-content-sub {
    background-color: var(--clr-secondary-100);
    border-radius: 0.35rem;
    backdrop-filter: blur(5px);
    background-image: url(../images/grain.png?v=wai-live-20260707-2);
    box-shadow: -5px 5px 15px rgba(0, 0, 0, 0.3);
}

.m-services-content-sub span {
    font-family: var(--ff-heading-primary);
    font-size: var(--fz-main-h3);
    color: var(--clr-primary-dark);
    transform: translate(-100%, -50%);
}

/* stories section */
.m-stories-section {
    background-color: var(--clr-secondary-000);
    min-height: 35rem;
}

.m-stories-image-holder {
    overflow: hidden;
    height: 40vh;
}

.m-stories-image-holder img {
    object-fit: cover;
    border-radius: 0.35rem;
}

/* testimonials section */
.m-testimonials-section {
    background-color: var(--clr-secondary-000);
}

.m-testimonials-title {
    font-size: var(--fz-main-h2);
    font-family: var(--ff-heading-primary-2-light);
}

.m-testimonial-content {
    border-radius: 0.35rem;
    background-color: var(--clr-secondary-100);
    box-shadow: -5px 5px 10px rgba(0, 0, 0, 0.2);
}

.m-testimonial-content span {
    padding-left: clamp(1rem, 2vw, 2.5rem);
    font-family: var(--ff-body-bold);
    font-size: calc(var(--fz-main-text)*1.1);
}

.m-testimonial-content p {
    font-family: var(--ff-body-light);
    font-size: var(--fz-main-text);
}

.m-testimonial-avatar {
    width: clamp(2rem, 4vw, 5rem);
    height: clamp(2rem, 4vw, 5rem);
    box-shadow: -5px 5px 10px rgba(0, 0, 0, 0.2);
    transform: translate(-30%, -30%);
}

.m-testimonial-avatar img {
    object-fit: cover;
}