* {
    padding: 0;
    margin: 0;
    font-family: "Poppins", sans-serif;
}

.nav {

    display: flex;
    width: 100%;
    height: 11.25vh;
    background-color: black;
    color: white;
    justify-content: space-around;
    align-items: center;
    gap: 15rem;
}

.nav>.logo {
    fill: #fff;
    height: 100%;
    width: 7.5rem;
}

.nav>.navoptions {
    display: flex;
    font-size: 0.9rem;
    font-weight: 650;
    justify-content: space-evenly;
    width: 40vw;
}

.profile {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.line {
    font-weight: 300;
}

.pp {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid #fff;
    border-radius: 50%;
    box-sizing: border-box;
    height: 2.5rem;
    width: 2.5rem;

}

.pp svg {
    fill: #fff;
    height: 1.4rem;
}

.premium,
.support,
.download,
.line {
    margin-top: 0.6rem;
}

.main {
    min-height: 100%;
    width: 100%;
    background-color: #121212;
}

.front {
    height: 100%;
    width: 100%;
    display: flex;
    color: white;
    background: linear-gradient(to bottom, #FFD2D7 0%, #121212 24%);
    margin-bottom: 5rem;
}

.title {
    margin-top: 5rem;
    margin-left: 7rem;
}

.front>img {
    position: relative;
    z-index: 0;
}

.title>.trial {
    font-size: 2.6rem;
    width: 145%;
    position: relative;
    z-index: 1;
    line-height: 3rem;
    margin-bottom: 0.8rem;
    word-spacing: 0rem;
}

.title>.renewal {
    font-size: 0.95rem;
    font-weight: 500;
    margin-bottom: 2rem;
    width: 110%;
}

.options {
    width: 80%;
    display: flex;
    margin-bottom: 1.75rem;
    justify-content: space-between;
    font-size: 0.9rem;
    font-weight: 700;
}

.start {
    display: flex;
    background-color: #FFD2D7;
    padding-left: 2.2rem;
    padding-right: 2.2rem;
    padding-bottom: 0.85rem;
    padding-top: 0.85rem;
    border-radius: 9999px;
    align-items: center;
    color: black;

}

.plans {
    color: white;
    background-color: black;
    display: flex;
    padding-left: 2.2rem;
    padding-right: 2.2rem;
    padding-bottom: 0.85rem;
    padding-top: 0.85rem;
    border-radius: 9999px;
    align-items: center;
    box-sizing: border-box;
    border: 0.3px solid white;
}

.terms,
.terms>a:visited,
.terms>a:link {
    color: white;
    font-size: 0.65rem;
    font-weight: 400;
    width: 85%;
    line-height: 1.5;
}

.difference {
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 5rem;
}

.difference>h1 {
    margin-bottom: 0.3rem;

}

.difference>h2 {
    text-align: center;
    font-weight: 400;
    font-size: 1.3rem;
    width: 50%;
    margin-bottom: 3.8rem;
}

.headings {
    display: flex;
    font-size: 0.9rem;
    font-weight: 600;
    justify-content: space-between;
    /* gap: 1rem; */
    margin-bottom: 2rem;
}

.headings>.get {
    position: relative;
    top: 4rem;
    width: 30%;
}

.headings>.free {
    position: relative;
    width: 18%;
    left: 2rem;
}

.headings>.prem {
    width: 20%;

}

.headings>svg {
    position: relative;
    fill: white;
    height: 1.2rem;
    left: 2.5rem;
    margin-right: 0;
}

.difference hr {
    color: white;
    width: 35%;
}



.tick {
    fill: white;
    height: 2rem;
}

.ads,
.offline,
.order,
.quality,
.friends,
.queue,
.insights {
    display: flex;
    align-items: center;
    height: 4.5rem;
    font-weight: 500;
    font-size: 0.9rem;
    justify-content: center;
    gap: 4rem;
}

.adv {
    text-decoration: dashed underline white;
    text-decoration-thickness: 0.1px;
    text-underline-offset: 5px;
    width: 12rem;
}

.dash {
    position: relative;
    width: 4rem;
    left: -2.5rem;
}

.tick {
    position: relative;
    width: 4rem;
    left: -2rem;
}

.payment {
    color: white;
    margin: auto;
    text-align: center;
    width: 57%;
    margin-bottom: 6rem;
}

.payment h1 {
    margin-bottom: 0.8rem;
    line-height: 1.5;
    margin-bottom: 0.8rem;
}

.paymethods {
    display: flex;
    justify-content: center;
    gap: 0.6rem;
    margin-bottom: 0.5rem;
}

.paymethods>div {
    display: flex;
    background-color: #fff;
    height: 2.4rem;
    width: 3.5rem;
    padding-bottom: 0.5rem;
    padding-top: 0.5rem;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
    border-radius: 0.2rem;
}

.paymethods img {
    height: 2rem;
    width: 3rem;
}

.morepay {
    text-decoration: solid underline white;
    margin-bottom: 4rem;
}

.premadv {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    color: white;
    text-align: center;

}

.premadv>h2 {
    font-size: 1.75rem;
}

.premadv>ul {
    font-size: 0.95rem;
    width: 35%;
    text-align: left;
    list-style: none;
}

.premiumplans {
    color: white;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 4rem;
    gap: 2rem;
}

.individual,
.family,
.duo,
.student {
    background-color: #242424;
    width: 26%;
    border-radius: 0.7rem;
    padding-bottom: 0.75rem;

}


.premiumplans .cost1 {
    width: auto;
    color: black;
    position: relative;
    border-bottom-right-radius: 0.3rem;
    border-top-left-radius: 0.3rem;
    top: 0.15rem;
    font-size: 0.95rem;
    font-weight: 600;
    padding-left: 0.9rem;
    padding-right: 0.9rem;
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
    margin-bottom: 2rem;
}

.premiumplans .premium {
    display: flex;
    align-items: center;
    padding-left: 0.9rem;
    margin-top: 2rem;
    gap: 0.1rem;
    font-size: 0.95rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.premium>svg {
    height: 1.5rem;
    fill: white;
}

.premiumplans h2 {
    font-size: 1.75rem;
    padding-left: 0.9rem;
}

.premiumplans .cost2 {
    font-size: 0.95rem;
    font-weight: 600;
    padding-left: 0.9rem;
}

.premiumplans .cost3 {
    font-size: 0.85rem;
    padding-left: 0.9rem;
    font-weight: 500;
    margin-bottom: 1rem;
    color: rgb(167, 167, 167);
}

.premiumplans hr {
    height: 0.1px;
    background-color: rgb(167, 167, 167);
    width: 91%;
    margin: auto;
    border: none;
    margin-bottom: 1rem;
}

.premiumplans ul {
    padding-left: 2.1rem;
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 2.5rem;
}

.premiumplans li {
    margin-bottom: 0.2rem;
}

.premiumplans .try {
    color: black;
    background-color: aqua;
    font-size: 0.95rem;
    font-weight: 600;
    width: 92%;
    margin: auto;
    text-align: center;
    padding-bottom: 0.75rem;
    padding-top: 0.75rem;
    border-radius: 10rem;
    margin-bottom: 0.9rem;
}

.premiumplans .onetimepay {
    background-color: #242424;
    font-size: 0.95rem;
    font-weight: 700;
    width: 92%;
    margin: auto;
    text-align: center;
    padding-bottom: 0.75rem;
    padding-top: 0.75rem;
    border-radius: 10rem;
    border: 0.3px solid white;
    margin-bottom: 2rem;
}

.premiumplans .foot {
    padding-left: 0.9rem;
    padding-right: 0.9rem;
    font-size: 0.7rem;
    text-align: center;
    line-height: 1.25;
    color: rgb(167, 167, 167);
}

.questions {
    color: white;
    margin-bottom: 3rem;
}

.questions > h2 {
    margin-bottom: 1rem;
    text-align: center;
    font-size: 1.75rem;
}

.questions > .ans {
    font-size: 0.95rem;
    margin-bottom: 0.8rem;
    text-align: center;
}

.questions > .moreans {
    font-size: 0.95rem;
    margin-bottom: 3rem;
    text-align: center;
}

.questions hr {
    width: 85%;
    margin: auto;
    height: 0.1px;
    background-color: rgb(167, 167, 167);
    border: none;
    
}

.q {
    display: flex;
    margin-bottom: 1rem;
    margin-top: 1rem;
    align-items: center;
    justify-content: center;
    gap: 55%;
}

.q svg {
    height: 1.5rem;
    fill: white;
    width: 1.5rem;
}

.q p {
    width: 27%;
    font-weight: 600;
}

.footer {
    background-color: black;
    padding: 5rem;
}

.links {
    display: flex;
    color: white;
    align-items: flex-start;
    justify-content: space-around;
    
    margin-bottom: 6rem;
}

.links>svg {
    fill: white;
    width: 7.5rem;
}

.links ul {
    list-style: none;
    font-size: 0.9rem;
}

.links .icons {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    align-items: center;
}

.icons div {
    background-color: #222326;
    height: 3.5rem;
    width: 3.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

ul li {
    margin-bottom: 1rem;
    text-align: left;
}

ul .first {
    color: #919496;
    font-size: 0.75rem;
    font-weight: 600;
}

.final {
    display: flex;
    color: #919496;
    font-size: 0.75rem;
    justify-content: space-between;
    align-items: flex-end;
   
}

.final .country {
    margin-bottom: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.4rem
}
.final span {
    margin-right: 1rem;
}

*{
    transition:color .25s ease,background-color .25s ease,transform .25s ease,box-shadow .25s ease,border-color .25s ease,opacity .25s ease;
}
.nav>.logo:hover{
    transform:scale(1.08);
    cursor:pointer;
}
.navoptions>div:hover{
    color:#FFD2D7;
    cursor:pointer;
}
.pp:hover{
    background-color:#fff;
}
.pp:hover svg{
    fill:#000;
}
.start:hover{
    background-color:#ffc1c9;
    transform:translateY(-3px);
    box-shadow:0 .75rem 1.5rem rgba(0,0,0,.4);
    cursor:pointer;
}
.plans:hover{
    background-color:#1e1e1e;
    transform:translateY(-3px);
    box-shadow:0 .75rem 1.5rem rgba(0,0,0,.4);
    cursor:pointer;
}

.ads:hover,
.offline:hover,
.order:hover,
.quality:hover,
.friends:hover,
.queue:hover,
.insights:hover{
    background-color:rgba(255,255,255,.05);
}
.paymethods>div:hover{
    transform:scale(1.12);
    box-shadow:0 .75rem 1.25rem rgba(0,0,0,.4);
}
.morepay:hover{
    color:#FFD2D7;
    cursor:pointer;
}
.individual:hover,
.family:hover,
.duo:hover,
.student:hover{
    transform:translateY(-8px);
    box-shadow:0 1.5rem 3rem rgba(0,0,0,.6);
}
.premiumplans .try:hover{
    background-color:#7fffd4;
    transform:translateY(-3px);
    cursor:pointer;
    box-shadow:0 .75rem 1.5rem rgba(0,0,0,.5);
}
.premiumplans .onetimepay:hover{
    background-color:#1e1e1e;
    transform:translateY(-3px);
    cursor:pointer;
}
.q:hover{
    background-color:rgba(255,255,255,.05);
    cursor:pointer;
}
.links ul li:hover{
    color:white;
    cursor:pointer;
}
.icons div:hover{
    background-color:#1db954;
    transform:scale(1.15);
    cursor:pointer;
}
.final span:hover{
    color:white;
    cursor:pointer;
}