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

body{

    min-height:100vh;

    display:flex;
    justify-content:center;
    align-items:flex-start;

    padding:30px;

    overflow-x:hidden;

    font-family:Arial,sans-serif;

    background:url("back.png");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
      opacity:1;
    transition:opacity .5s ease;
}

body.fade-out{
    opacity:0;
}
.cont{

    width:90%;
    max-width:1450px;

    position:relative;

    overflow:hidden;

    border-radius:35px;

    background:rgba(255,255,255,.08);

    border:1px solid rgba(255,255,255,.2);

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    box-shadow:
    0 25px 60px rgba(0,0,0,.35),
    inset 0 1px 1px rgba(255,255,255,.25);

}
.navbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:30px 60px;

}

.logo{

    color:white;

    font-size:34px;

    font-weight:bold;

}

.menu{

    display:flex;

    list-style:none;

    gap:40px;

}

.menu a{

    color:white;

    text-decoration:none;

    font-size:18px;

    transition:.3s;

}

.menu a:hover{

    color:#62a4ff;

}
.buttons{

    display:flex;

    gap:15px;

}

.buttons button{

    padding:12px 28px;

    border:none;

    border-radius:40px;

    cursor:pointer;

    font-size:16px;

    transition:.3s;

}

.login{

    background:transparent;

    color:white;

    border:1px solid white;

}

.login:hover{

    background:#62a4ff;

    color:white;

    box-shadow:0 10px 25px rgba(98,164,255,.45);

}

.signup{

    background:white;

    color:black;

}
.signup:hover{

    background:#62a4ff;

    color:white;

    transform:translateY(-4px);

    box-shadow:0 10px 25px rgba(98,164,255,.45);

}
.hero{

    display:flex;

    justify-content:space-between;

    align-items:flex-end;

    min-height:720px;

    padding:40px 70px 130px;

    position:relative;

    gap:30px;

}
.left{

    width:25%;

    color:white;

}

.intro{

    letter-spacing:5px;

    color:#d7d7d7;

    margin-bottom:20px;

}

.left h1{

    font-size:clamp(45px,5vw,80px);

    line-height:1.05;

    margin-bottom:60px;

}

.text{

    color:#ddd;

    line-height:30px;

    margin-bottom:35px;

}
.start{

    padding:16px 38px;

    border:none;

    border-radius:40px;

    background:white;

    color:black;

    cursor:pointer;

    transition:.3s;

}

.start:hover{

    background:#62a4ff;

    transform:translateY(-4px);

}
.center{

    flex:1;

    display:flex;

    justify-content:center;

    align-items:flex-end;

    position:relative;

}

.center img{

    position:absolute;

    width:900px;

    max-width:none;

    height:auto;

    left:60%;

    bottom:-138px;

    transform:translateX(-50%);

    z-index:10;

    filter:drop-shadow(0 30px 50px rgba(0,0,0,.45));

}
.right{

    width:20%;

    color:white;

}

.right h3{

    font-size:28px;

    margin-bottom:180px;

}

.right p{

    color:#d7d7d7;

    line-height:28px;

}
.divider{
    position: absolute;

    width: 140%;
    height: 280px;

    left: 9%;

    top: 780px;  

    z-index: 5;
    pointer-events: none;
}

.divider svg{

    width:100%;

    height:100%;

}

.divider path{

    fill:none;

    stroke:#e0e0e0;

    stroke-width: 9;

    stroke-linecap:round;

    stroke-linejoin:round;

}
.cards{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;

    padding:60px 70px 70px;

    position:relative;

    z-index:5;

}
.card{

    background:rgba(255,255,255,.08);

    border:1px solid rgba(255,255,255,.15);

    backdrop-filter:blur(18px);

    border-radius:25px;

    overflow:hidden;

    transition:.35s;

    box-shadow:

    0 15px 35px rgba(0,0,0,.25);

}

.card:hover{

    transform:translateY(-10px);

    box-shadow:

    0 25px 50px rgba(98,164,255,.35);

}
.card img{

    width:100%;

    height:320px;

    object-fit:cover;

    display:block;

}
.card-content{

    padding:22px;

}
.card-content h3{

    color:white;

    font-size:24px;

    margin-bottom:10px;

}
.card-content p{

    color:#d7d7d7;

    font-size:15px;

    line-height:25px;

    margin-bottom:22px;

}
.card-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:20px;

}
.price{

    font-size:28px;

    font-weight:bold;

    color:#fff;

    letter-spacing:1px;

}
.view-btn{

    width:50px;

    height:50px;

    border:none;

    border-radius:14px;

    background:white;

    color:black;

    font-size:22px;

    cursor:pointer;

    display:flex;

    justify-content:center;

    align-items:center;

    transition:.3s;

}
.view-btn:hover{

    background:#62a4ff;

    color:white;

    transform:translateY(-4px);

    box-shadow:0 10px 25px rgba(98,164,255,.5);

}
@media (max-width:1200px){

.hero{

    flex-direction:column;

    text-align:center;

    align-items:center;

}

.left,
.center,
.right{

    width:100%;

}

.center img{

    position:relative;

    left:0;

    bottom:0;

    transform:none;

    max-width:600px;

}

.cards{

    grid-template-columns:repeat(2,1fr);

}

}
@media (max-width:768px){

.navbar{

    flex-direction:column;

    gap:20px;

}

.menu{

    flex-wrap:wrap;

    justify-content:center;

}

.buttons{

    margin-top:15px;

}

.cards{

    grid-template-columns:1fr;

    padding:30px;

}

.left h1{

    font-size:42px;

}

.center img{

    max-width:420px;

}

}
body{
    opacity:1;
    transform:scale(1) rotate(0deg);
    transition:
    opacity .7s ease,
    transform .7s cubic-bezier(.22,1,.36,1);
}

body.page-out{
    opacity:0;
    transform:scale(.88) rotate(-2deg);
}