@font-face{
    font-family: mextrabold;
    src: url(font/Montserrat-ExtraBold.otf);
}
@font-face{
    font-family: mmedium;
    src: url(font/Montserrat-Medium.otf);
}
@font-face{
    font-family: mlight;
    src: url(font/Montserrat-Light.otf);
}
@font-face{
    font-family: slight;
    src: url(font/OpenSans-Light.ttf);
}
@font-face{
    font-family: smedium;
    src: url(font/OpenSans-Medium.ttf);
}

/* ============ variables ============ */
:root{
    --bg: #2B2933;
    --purple: #765AE2;
    --purple-light: #AF9EF5;
    --gold: #F1AE0E;
    --footer-bg: #333333;
    --container: min(1200px, 92%);
}

/* ============ reset ============ */
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Poppins',sans-serif;
}

html{
    scroll-behavior: smooth;
}

html,body{
    width: 100%;
    overflow-x: hidden;
    position: relative;
    background-color: var(--bg);
}

img{
    max-width: 100%;
    display: block;
}

/* ============ overlay ============ */
.overlay{
    background-color: rgba(0, 0, 0, 0.596);
    position: fixed;
    inset: 0;
    z-index: 150;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease;
}
.overlay.active{
    opacity: 1;
    visibility: visible;
}

/* ============ header & nav drawer ============ */
header{
    height: clamp(4.5rem, 9vw, 6.2rem);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 clamp(1.2rem, 5vw, 3rem);
    background-color: var(--bg);
    position: relative;
    z-index: 10;
}

ul{
    position: fixed;
    top: 0;
    left: 0;
    width: min(80vw, 320px);
    height: 100vh;
    background-color: black;
    padding: clamp(4.5rem, 12vw, 6rem) clamp(1.5rem, 6vw, 2.5rem) 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    transform: translateX(-100%);
    transition: transform 0.5s ease;
    z-index: 200;
}
ul.active{
    transform: translateX(0);
}

li{
    color: white;
    list-style: none;
    font-size: clamp(1.15rem, 2.6vw, 1.6rem);
    margin: 0.6rem 0;
    width: auto;
    font-weight: 300;
    cursor: pointer;
    transition: color 0.3s ease;
}

li:hover{
    color: gray;
}

.lisp,.lisp2{
    margin-left: 0;
}

.ri-menu-line{
    cursor: pointer;
    font-size: clamp(1.6rem, 3.2vw, 2.2rem);
    color: white;
    z-index: 20;
    transition: color 0.3s ease;
}

.ri-menu-line:hover{
    color: var(--gold);
}

.ri-close-large-line{
    position: absolute;
    top: 1.4rem;
    right: 1.4rem;
    color: white;
    font-size: clamp(1.4rem, 3vw, 1.8rem);
    cursor: pointer;
    transition: color 0.3s ease;
}
.ri-close-large-line:hover{
    color: var(--gold);
}

/* ============ hero / main ============ */
.main{
    position: relative;
    padding: clamp(2rem, 6vw, 4rem) 0 clamp(1.5rem, 4vw, 3rem);
    overflow: hidden;
}

.main-container{
    width: var(--container);
    margin-inline: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: clamp(2rem, 6vw, 4rem);
}

.main-text{
    flex: 1 1 380px;
    max-width: 600px;
}

.main-heading{
    font-size: clamp(2.1rem, 5vw, 3.4rem);
    color: white;
    font-family: 'mextrabold';
    opacity: 0;
    transform: translateY(30px);
}

.main-p1{
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: white;
    font-family: 'slight';
    margin-top: clamp(0.8rem, 2vw, 1.2rem);
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 300;
    opacity: 0;
    transform: translateY(30px);
}

.main-p2{
    margin-top: clamp(1.2rem, 3vw, 2rem);
    font-size: clamp(0.95rem, 1.7vw, 1.3rem);
    font-family: 'smedium';
    line-height: 1.7;
    opacity: 0;
    color: white;
    transform: translateY(30px);
}

.mainfree{
    font-family: 'smedium';
    color: white;
    font-size: clamp(0.85rem, 1.5vw, 1.1rem);
    margin-top: clamp(0.8rem, 2vw, 1.2rem);
    opacity: 0;
    transform: translateY(30px);
}

.maina{
    color: white;
    font-weight: 550;
    text-decoration: none;
}

.maina:hover{
    color: rgb(204, 204, 204);
}

.contactbtn{
    margin-top: clamp(1.2rem, 3vw, 2rem);
    opacity: 0;
    transform: translateY(30px);
    padding: clamp(0.85rem, 2vw, 1rem) clamp(1.6rem, 4vw, 2.2rem);
    background-color:#F1AE0E;
    color: white;
    border: 0;
    font-size: clamp(0.9rem, 1.6vw, 1.1rem);
    font-weight: 550;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.contactbtn:hover{
    background-color: #765AE2;
    color: white;
}

.main-visual{
    flex: 1 1 320px;
    max-width: 460px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: clamp(1.2rem, 4vw, 2rem);
}

.main-pic{
    width: clamp(160px, 26vw, 320px);
    height: clamp(160px, 26vw, 320px);
    border-radius: 100%;
    object-fit: cover;
    opacity: 0;
    transform: translateY(20px);
}

.main-features{
    display: flex;
    flex-direction: column;
    gap: clamp(0.9rem, 2.4vw, 1.4rem);
}

.gol-item{
    display: flex;
    align-items: center;
    gap: clamp(0.6rem, 1.6vw, 0.9rem);
}

.gol1,.gol2,.gol3,.gol4,.gol5{
    width: 8px;
    height: 8px;
    background-color: #765AE2;
    border-radius: 50%;
    opacity: 0;
    flex-shrink: 0;
}

.gol1-h4,.gol2-h4,.gol3-h4,.gol4-h4,.gol5-h4{
    font-size: clamp(0.95rem, 1.9vw, 1.25rem);
    color: white;
    font-family: 'mlight';
    font-weight: 300;
    opacity: 0;
    transform: scale(0);
    white-space: nowrap;
}

.maincontainer{
    margin-top: clamp(2.5rem, 6vw, 5rem);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(1.5rem, 5vw, 4rem);
    width: var(--container);
    margin-inline: auto;
}

.maincp1{
    width: clamp(80px, 10vw, 180px);
    height: auto;
}

/* ============ about (services) ============ */
.about{
    position: relative;
    padding: clamp(3rem, 6vw, 5rem) 0;
}

.about-container{
    width: var(--container);
    margin-inline: auto;
    display: flex;
    flex-wrap: wrap-reverse;
    align-items: center;
    justify-content: space-between;
    gap: clamp(2rem, 5vw, 3.5rem);
}

.about-boxes{
    flex: 1 1 300px;
    max-width: 340px;
    display: flex;
    flex-direction: column;
    gap: clamp(0.8rem, 2vw, 1.1rem);
    width: 100%;
}

.box1,.box2,.box3,.box4,.box5,.box6,.box7{
    width: 100%;
    border-radius: 10px;
    min-height: 70px;
    border: 3px solid #AF9EF5;
    display: flex;
    align-items: center;
    gap: clamp(0.8rem, 2vw, 1.2rem);
    padding: 0.7rem clamp(1rem, 3vw, 1.5rem);
    opacity: 0;
    transform: scale(0);
}

.box1-pic,.box2-pic,.box3-pic,.box6-pic,.box7-pic{
    width: clamp(22px, 3vw, 30px);
    flex-shrink: 0;
}

.box1-link,.box2-link,.box3-link,.box6-link,.box7-link{
    color: white;
    text-decoration: none;
    font-size: clamp(1rem, 1.9vw, 1.35rem);
    font-family: 'mmedium';
    font-weight: 650;
    letter-spacing: 1px;
}

.box2sp,.box3sp,.box6sp,.box7sp{
    font-size: inherit;
    font-family: 'mmedium';
    font-weight: 650;
    margin-left: 0.3rem;
}

.about-info{
    flex: 1 1 380px;
    max-width: 650px;
}

.about-heading{
    font-family: 'mextrabold';
    font-size: clamp(1.8rem, 4.6vw, 3.2rem);
    color: white;
    line-height: 1.3;
    opacity: 0;
    transform: translateY(40px);
}

.about-p{
    color: white;
    font-family: 'mlight';
    font-size: clamp(0.95rem, 1.7vw, 1.25rem);
    line-height: 1.7;
    margin-top: clamp(1.2rem, 3vw, 1.8rem);
    opacity: 0;
    transform: translateY(40px);
}

.aboutbtn{
    margin-top: clamp(1.2rem, 3vw, 1.8rem);
    padding: clamp(0.85rem, 2vw, 1rem) clamp(1.6rem, 4vw, 2.2rem);
    font-size: clamp(0.9rem, 1.6vw, 1.1rem);
    font-family: 'mmedium';
    background-color: #765AE2;
    color: white;
    border: 0;
    cursor: pointer;
    opacity: 0;
    transform: translateY(40px);
    transition: background-color 0.3s ease;
}

.aboutbtn:hover{
    background-color: #F1AE0E;
}

/* ============ about2 (leadership) ============ */
.about2{
    padding: clamp(3rem, 6vw, 5rem) 0;
}

.about2-heading{
    color: white;
    font-family: 'mextrabold';
    font-size: clamp(1.8rem, 4.2vw, 2.6rem);
    font-weight: 900;
    width: var(--container);
    margin-inline: auto;
}

.containerabout2,.containerabout3{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: clamp(1.6rem, 4vw, 2.5rem);
    width: var(--container);
    margin-inline: auto;
    margin-top: clamp(2rem, 5vw, 3rem);
    text-align: center;
}

.about2box1,.about2box2,.about2box3,.about2box4,
.about2box5,.about2box6,.about2box7,.about2box8{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.about2b1pic1,.about2b1pic2,.about2b1pic3,.about2b1pic4,
.about2b1pic5,.about2b1pic6,.about2b1pic7,.about2b1pic8{
    width: clamp(130px, 16vw, 200px);
    height: clamp(130px, 16vw, 200px);
    border-radius: 50%;
    object-fit: cover;
    transform: scale(0);
}

.about-b1h4,.about-b2h4,.about-b3h4,.about-b4h4,
.about-b5h4,.about-b6h4,.about-b7h4,.about-b8h4{
    font-size: clamp(1.1rem, 1.8vw, 1.4rem);
    font-family: 'mmedium';
    color: white;
    font-weight: 650;
    margin-top: 1rem;
}

.about-b1p,.about-b2p,.about-b3p,.about-b4p,
.about-b5p,.about-b6p,.about-b7p,.about-b8p{
    font-size: clamp(0.95rem, 1.5vw, 1.15rem);
    margin-top: 0.4rem;
    font-family: 'mlight';
    color: white;
}

.about2-link{
    color: white;
    font-size: clamp(0.9rem, 1.6vw, 1.1rem);
    text-align: center;
    margin-top: clamp(2rem, 5vw, 3rem);
    width: var(--container);
    margin-inline: auto;
}

.about2last{
    color: white;
    text-decoration: none;
    font-family: 'mlight';
}

.about2last:hover{
    color: rgb(204, 204, 204);
}

/* ============ free trial CTA ============ */
.free{
    padding: clamp(3rem, 6vw, 5rem) 0;
}

.free-container{
    width: var(--container);
    margin-inline: auto;
}

.free-heading{
    color: white;
    font-size: clamp(1.8rem, 4.6vw, 3rem);
    font-family: 'mextrabold';
    opacity: 0;
    transform: translateY(30px);
}

.freep{
    color: white;
    font-family: 'mlight';
    font-size: clamp(0.95rem, 1.7vw, 1.25rem);
    line-height: 1.7;
    margin-top: clamp(1.2rem, 3vw, 1.8rem);
    max-width: 900px;
}

.freesp{
    margin-left: 0;
}

.freebtn{
    font-size: clamp(0.9rem, 1.6vw, 1.1rem);
    padding: clamp(0.85rem, 2vw, 1rem) clamp(1.6rem, 4vw, 2rem);
    color: white;
    background-color: #F1AE0E;
    font-weight: 550;
    font-family: 'mlight';
    margin-top: clamp(1.2rem, 3vw, 1.8rem);
    cursor: pointer;
    border: 0;
    transition: background-color 0.3s ease;
}

.freebtn:hover{
    background-color: #f1ad0ee5;
}

/* ============ contact ============ */
.contact{
    padding: clamp(3rem, 6vw, 5rem) 0;
    position: relative;
}

.contact-container{
    width: var(--container);
    margin-inline: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: clamp(2rem, 5vw, 3.5rem);
}

.contact-info{
    flex: 1 1 340px;
    max-width: 500px;
}

.contact-h1{
    font-size: clamp(1.8rem, 4.6vw, 3rem);
    font-family: 'mextrabold';
    color: white;
    transform: scale(0);
    opacity: 0;
}

.contactp{
    color: rgba(255, 255, 255, 0.863);
    font-family: 'smedium';
    font-size: clamp(0.95rem, 1.7vw, 1.25rem);
    font-weight: 300;
    line-height: 1.7;
    letter-spacing: 1px;
    margin-top: clamp(1rem, 2.5vw, 1.4rem);
    transform: scale(0);
    opacity: 0;
}

.phone{
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    font-family: 'smedium';
    font-weight: 500;
    color: white;
    margin-top: clamp(1.2rem, 3vw, 1.6rem);
    transform: scale(0);
    opacity: 0;
}

.pho{
    color: #F1AE0E;
    text-decoration: none;
    font-weight: 650;
}

.pho:hover{
    color: #765AE2;
}

.sech4{
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    font-family: 'smedium';
    font-weight: 400;
    margin-top: 0.6rem;
    color: white;
    transform: scale(0);
    opacity: 0;
}

.lastcont{
    margin-top: clamp(1.2rem, 3vw, 1.6rem);
    font-size: clamp(0.9rem, 1.6vw, 1.1rem);
    font-family: 'smedium';
    font-weight: 500;
    color: white;
    transform: scale(0);
    opacity: 0;
}

.conlink{
    color: white;
    text-decoration: none;
}

.conlink:hover{
    color: rgba(255, 255, 255, 0.911);
}

.contact-visual{
    flex: 1 1 260px;
    max-width: 320px;
    display: flex;
    justify-content: center;
}

.contact-pic{
    width: 100%;
    max-width: 300px;
    opacity: 0;
    transform: scale(0.6);
}

/* ============ footer ============ */
.footer{
    background-color: #333333;
    padding: clamp(2rem, 6vw, 3rem) 1.5rem;
    text-align: center;
}

.footerp1{
    color: white;
    font-size: clamp(0.9rem, 1.6vw, 1.05rem);
    font-family: 'smedium';
}

.footerp2{
    color: white;
    font-family: 'smedium';
    font-size: clamp(0.8rem, 1.4vw, 0.9rem);
    margin-top: 1rem;
}

.flink1{
    color: #eae4ff;
}
.flink1:hover{
    color: gray;
}

.flink2{
    color: #eae4ff;
}
.flink2:hover{
    color: gray;
}

/* ============ NEW: stats ============ */
.stats{
    padding: clamp(2.5rem, 5vw, 4rem) 0;
}

.stats-container{
    width: var(--container);
    margin-inline: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: clamp(1.6rem, 4vw, 2.5rem);
    text-align: center;
}

.stat-item{
    flex: 1 1 160px;
    opacity: 0;
    transform: translateY(30px);
}

.stat-num{
    font-size: clamp(2.2rem, 5.5vw, 3.6rem);
    font-family: 'mextrabold';
    color: var(--gold);
}

.stat-label{
    font-family: 'mlight';
    color: white;
    margin-top: 0.5rem;
    font-size: clamp(0.9rem, 1.6vw, 1.1rem);
}

/* ============ NEW: portfolio ============ */
.portfolio{
    padding: clamp(3rem, 6vw, 5rem) 0;
}

.portfolio-container{
    width: var(--container);
    margin-inline: auto;
    text-align: center;
}

.portfolio-heading{
    font-family: 'mextrabold';
    color: white;
    font-size: clamp(1.8rem, 4.6vw, 3rem);
    opacity: 0;
    transform: translateY(30px);
}

.portfolio-sub{
    font-family: 'smedium';
    color: rgba(255, 255, 255, 0.75);
    margin-top: 0.8rem;
    font-size: clamp(0.95rem, 1.7vw, 1.2rem);
    opacity: 0;
    transform: translateY(30px);
}

.portfolio-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: clamp(1.2rem, 3vw, 2rem);
    margin-top: clamp(2rem, 5vw, 3rem);
}

.port-item{
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    opacity: 0;
    transform: scale(0.85);
    cursor: pointer;
}

.port-img{
    width: 100%;
    height: 260px;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.port-item:hover .port-img{
    transform: scale(1.08);
}

.port-overlay{
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent 60%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 1.2rem;
    text-align: left;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.port-item:hover .port-overlay{
    opacity: 1;
}

.port-title{
    color: white;
    font-family: 'mmedium';
    font-size: clamp(1rem, 1.8vw, 1.2rem);
}

.port-tag{
    color: var(--gold);
    font-family: 'mlight';
    font-size: 0.85rem;
    margin-top: 0.3rem;
}

/* ============ NEW: testimonials ============ */
.testimonials{
    padding: clamp(3rem, 6vw, 5rem) 0;
}

.testimonials-container{
    width: var(--container);
    margin-inline: auto;
    text-align: center;
}

.testi-heading{
    font-family: 'mextrabold';
    color: white;
    font-size: clamp(1.8rem, 4.6vw, 3rem);
    opacity: 0;
    transform: translateY(30px);
}

.testi-slider{
    margin-top: clamp(2rem, 5vw, 3rem);
    max-width: 760px;
    margin-inline: auto;
}

.testi-track{
    position: relative;
    min-height: 200px;
}

.testi-slide{
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease;
}

.testi-slide.active{
    opacity: 1;
    visibility: visible;
    position: relative;
}

.testi-text{
    color: white;
    font-family: 'mlight';
    font-size: clamp(1rem, 2vw, 1.3rem);
    line-height: 1.7;
    font-style: italic;
}

.testi-person{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.5rem;
    text-align: left;
}

.testi-pic{
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
}

.testi-name{
    color: white;
    font-family: 'mmedium';
    font-size: 1.05rem;
}

.testi-role{
    color: var(--purple-light);
    font-family: 'mlight';
    font-size: 0.85rem;
}

.testi-controls{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 2rem;
}

.testi-prev,.testi-next{
    background-color: var(--purple);
    color: white;
    border: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
}

.testi-prev:hover,.testi-next:hover{
    background-color: var(--gold);
}

.testi-dots{
    display: flex;
    gap: 0.5rem;
}

.testi-dot{
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: rgba(255,255,255,0.3);
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.testi-dot.active{
    background-color: var(--gold);
}

/* ============ NEW: faq ============ */
.faq{
    padding: clamp(3rem, 6vw, 5rem) 0;
}

.faq-container{
    width: min(900px, 92%);
    margin-inline: auto;
}

.faq-heading{
    text-align: center;
    font-family: 'mextrabold';
    color: white;
    font-size: clamp(1.8rem, 4.6vw, 3rem);
    opacity: 0;
    transform: translateY(30px);
}

.faq-list{
    margin-top: clamp(2rem, 5vw, 3rem);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.faq-item{
    border: 2px solid var(--purple-light);
    border-radius: 10px;
    overflow: hidden;
    opacity: 0;
    transform: translateY(20px);
}

.faq-question{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.4rem;
    color: white;
    font-family: 'mmedium';
    cursor: pointer;
    font-size: clamp(0.95rem, 1.8vw, 1.15rem);
}

.faq-icon{
    transition: transform 0.3s ease;
    color: var(--gold);
    flex-shrink: 0;
}

.faq-item.open .faq-icon{
    transform: rotate(45deg);
}

.faq-answer{
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}

.faq-answer p{
    padding: 0 1.4rem 1.2rem;
    color: rgba(255,255,255,0.85);
    font-family: 'mlight';
    line-height: 1.6;
    font-size: clamp(0.9rem, 1.6vw, 1.05rem);
}

/* ============ NEW: contact form ============ */
.contact-form-wrap{
    flex: 1 1 340px;
    max-width: 480px;
}

.contact-form{
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.cf-input{
    padding: 0.9rem 1rem;
    background-color: transparent;
    border: 2px solid var(--purple-light);
    border-radius: 6px;
    color: white;
    font-family: 'smedium';
    font-size: 0.95rem;
}

.cf-input::placeholder{
    color: rgba(255,255,255,0.6);
}

.cf-input:focus{
    outline: 0;
    border-color: var(--gold);
}

.cf-textarea{
    resize: vertical;
    min-height: 100px;
}

.cf-error{
    color: #ff8a8a;
    font-size: 0.8rem;
    min-height: 1rem;
    font-family: 'smedium';
}

.cf-submit{
    margin-top: 0.5rem;
    padding: 0.9rem;
    background-color: var(--purple);
    color: white;
    border: 0;
    font-family: 'mmedium';
    cursor: pointer;
    font-size: 0.95rem;
    transition: background-color 0.3s ease;
}

.cf-submit:hover{
    background-color: var(--gold);
}

.cf-success{
    color: #8CE28C;
    margin-top: 0.6rem;
    font-family: 'smedium';
    font-size: 0.9rem;
    display: none;
}

.cf-success.show{
    display: block;
}

/* ============ NEW: newsletter ============ */
.newsletter{
    padding: clamp(2.5rem, 5vw, 4rem) 0;
    background-color: var(--footer-bg);
}

.newsletter-container{
    width: min(700px, 92%);
    margin-inline: auto;
    text-align: center;
}

.newsletter-heading{
    color: white;
    font-family: 'mextrabold';
    font-size: clamp(1.5rem, 3.6vw, 2.2rem);
}

.newsletter-sub{
    color: rgba(255,255,255,0.75);
    font-family: 'mlight';
    margin-top: 0.6rem;
    font-size: clamp(0.9rem, 1.6vw, 1.05rem);
}

.newsletter-form{
    display: flex;
    gap: 0.7rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
    justify-content: center;
}

.newsletter-input{
    flex: 1 1 260px;
    padding: 0.85rem 1rem;
    border: 0;
    border-radius: 6px;
    font-family: 'smedium';
}

.newsletter-btn{
    padding: 0.85rem 1.6rem;
    background-color: var(--gold);
    color: white;
    border: 0;
    font-family: 'mmedium';
    cursor: pointer;
    font-size: 0.95rem;
    transition: background-color 0.3s ease;
}

.newsletter-btn:hover{
    background-color: var(--purple);
}

.newsletter-msg{
    margin-top: 0.8rem;
    color: var(--gold);
    font-family: 'smedium';
    font-size: 0.9rem;
    min-height: 1.2rem;
}