@font-face {
font-family: Mont;
src: url('../fonts/Montserrat-Bold.ttf');
}

@font-face {
font-family: ColBold;
src: url('../fonts/Colfax-Bold.otf');
}

@font-face {
font-family: ColReg;
src: url('../fonts/Colfax-Regular.otf');
}

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:ColReg;
}

body{
background:#fff;
width:100%;
}

.topbar{
background:#2f4d63;
color:#fff;
text-align:center;
padding:.7em 0;
font-size:.85rem;
font-family:ColBold;
}

.brandbar{
background:#9ebdd4;
display:flex;
justify-content:center;
padding:1.2rem 5vw;
}

.brandbar img{
width:9rem;
max-width:35vw;
}

.intro{
padding:5vh 5vw;
text-align:center;
position:relative;
overflow:hidden;
}

.label{
background:#ff7a4d;
color:#fff;
padding:.4em 1em;
border-radius:2em;
display:inline-block;
margin-bottom:1.5rem;
}

.intro h1{
font-size:3.8rem;
color:#2f4d63;
line-height:1.2;
font-family:Mont;
}

.ctaarea{
margin-top:2rem;
}

.mainbtn{
background:#b6d68c;
color:#fff;
border:none;
padding:.9em 2em;
font-size:1.2rem;
border-radius:2em;
cursor:pointer;
}

.decor{
position:absolute;
right:15vw;
top:15vh;
width:24vw;
z-index:-1;
}

.visual{
padding:0 2vw 3vh;
display:flex;
justify-content:center;
}

.visualwrap{
max-width:90vw;
}

.visualwrap img{
width:100%;
max-height:70vh;
object-fit:contain;
}

.voices{
padding:6vh 6vw;
}

.headline h2,
.headline h3{
font-size:2.5rem;
font-family:Mont;
}

.headline h2{color:#2f5576;}
.headline h3{color:#8fb4d8;margin-top:1vh;}

.feedback{
display:flex;
gap:6vw;
margin-top:5vh;
align-items:center;
}

.story{
flex:1;
background:#f7f9fb;
padding:6vh 4vw;
border-radius:2vw;
display:flex;
flex-direction:column;
align-items:center;
gap:3vh;
}

.tag{
background:#bfe09c;
padding:.6em 1.4em;
border-radius:2em;
font-family:ColBold;
}

.symbol{
width:4.5rem;
height:4.5rem;
}

.symbol img{
width:100%;
}

.message{
font-size:1.3rem;
text-align:center;
color:#375b7d;
}

.switcher{
display:flex;
gap:1.5vw;
margin-top:4vh;
}

.switchbtn{
background:none;
border:none;
cursor:pointer;
}

.switchbtn img{
width:3rem;
}

.portrait{
flex:1;
display:flex;
justify-content:center;
}

.frame{
width:32vw;
height:60vh;
border-radius:4vw;
overflow:hidden;
}

.frame img{
width:100%;
height:100%;
object-fit:cover;
}

.cta{
height:160vh;
background:url("../images/ctaupdatedimg.webp") center bottom/cover no-repeat;
display:flex;
align-items:flex-start;
}

.ctabox{
max-width:50vw;
padding:6vh;
display:flex;
flex-direction:column;
gap:1.5rem;
}

.ctabox h2{
font-size:2.6rem;
font-family:Mont;
color:#2d4a63;
}

.joinbtn{
background:#b6dc8c;
color:#fff;
padding:.8em 1.8em;
border-radius:2em;
text-decoration:none;
width:fit-content;
}

.bottom{
background:#a9c7e1;
padding:6vh 6vw;
color:#fff;
}

.signup{
display:flex;
justify-content:space-between;
flex-wrap:wrap;
gap:4vw;
}

.signuptext h2{
font-size:2.8rem;
font-family:Mont;
}

.signupform{
display:flex;
flex-direction:column;
gap:1.5vh;
width:30vw;
}

.signupform input{
padding:1em;
border-radius:.5em;
border:1px solid rgba(255,255,255,.4);
background:transparent;
color:#fff;
}

.subbtn{
background:#c6e3a5;
padding:1em;
text-align:center;
border-radius:.5em;
text-decoration:none;
color:#fff;
}

.line{
height:.2vh;
background:rgba(255,255,255,.3);
margin:6vh 0;
}

.grid{
display:flex;
gap:6vw;
flex-wrap:wrap;
}

.links{
display:flex;
flex-direction:column;
gap:1.2vh;
}

.links a{
color:#fff;
text-decoration:none;
}

.note{
margin-top:6vh;
font-size:.75rem;
line-height:1.6;
}

@media(max-width:768px){

.decor{display:none;}

.intro h1{font-size:2.3rem;}

.feedback{flex-direction:column;}

.frame{width:90vw;height:45vh;}

.signup{flex-direction:column;}

.signupform{width:100%;}

.grid{flex-direction:column;}

.ctabox {
    max-width: 100vw;
        padding: 4vh;
                align-items: center;
}

.cta {
    justify-content: center;
        text-align: center;
        background-position: right bottom;
}

}