@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap');

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

:root {
    /* COLOR */
    --BGCOLOR: rgba(18, 20, 29, 1);
    --FC: rgba(255, 255, 255, 1);
    --ALT-FC: rgba(137, 136, 137, 1);
    --SCND-ALT-FC: rgba(224, 224, 224, 1);
    --LOGIN-BTN: #000;
    --FORM-COLOR: #222222;

    /* LINEAR-GRADIENT BORDER COLOR */
    --GOOGLE-APPLE-COLOR: linear-gradient(
        to right, 
        rgba(169, 165, 253, 1),
        rgba(235, 215, 92, 1)
        );
    --FB-COLOR: linear-gradient(
        to left, 
        rgba(169, 165, 253, 1),
        rgba(235, 215, 92, 1)
        );

    /* ELLIPSES COLOR */
    --E-1: #FC743A1A;
     /* CIRCLE */
    --E-2: #A930FE;
    --E-3: #F9BC52;
    --E-4: #3FA0FB; /* V-LINE */
    --E-5: #A930FE;

    /* FONT-FAMILY*/
    --FF: 'Inter', sans-serif;
    --ALT-FF: 'Space Grotesk', sans-serif;
}

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

html,
body {
    scroll-behavior: smooth;
    overflow-x: hidden;
    width: 100%;
    height: 100vh;
    background-color: var(--BGCOLOR);
    color: var(--FC);
    padding: 2rem 1rem;
    position: relative;
}

.ellipse-1, .ellipse-2, .ellipse-3, .ellipse-2-3, .ellipse-3-4 {
    display: none;
}

.login-header {
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    align-items: center;
    margin: 2rem 0 1rem; 
    text-align: center;
}

.login-header h1 {
    font: 2.5rem var(--ALT-FF);
    letter-spacing: -2px;
    padding: 10px 0;
    margin-bottom: 10px;
}

.login-header p {
    /* border: 1px solid var(--FC); */
    padding: 0.5rem 0;
    font: 0.8rem var(--FF);
    color: var(--ALT-FC);
}

/* .ellipse-1 {
    position: absolute;
    inset: 0;
    width: 300px;
    height: 50%;
} */

.fields-and-socials-flex {
    display: flex;
    flex-flow: column wrap;
    justify-content: space-evenly;
    align-content: center;
    gap: 3rem;
    margin: 1.5rem 0 10px;
    margin-left: 2px;
}

.fields {
    font-family: var(--FF);
    /* border: 1px solid var(--FC); */
    padding-top: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: flex-start;
    gap: 0.98rem;
    position: relative;
}

.fields-input, .fields-btn {
    padding: 20px 25px;
    width: 300px;
    height: 55px;
    text-align: left;
    border-radius: 8px;
    border: none;
}

.fields-input {
    background-color: var(--FORM-COLOR);
    color: var(--FC);
    font-weight: 500;
}

.fields-btn {
    padding-left: 40px;
    font-weight: bold;
    background: linear-gradient(to left, #3EFB3A, #FBFC47);
}

.fields-btn a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-decoration: none;
    color: #000;
}

.arrow {
    width: 24px; 
    height: 18px;
}

#reg-acct {
    padding-left: 1.5rem;
    font-size: 10px;
    font-weight: 300;
    color: var(--ALT-FC);
}

.bold {
    font-weight: 600;
    color: var(--FC);
    text-decoration: none;
}

.highlight {
    width: 8%;
    margin: 20px auto 40px;
}

.signin-btn {
    display: flex;
    justify-items: space-between;
    align-items: center;
    gap: 2rem;
    color: var(--FC);
    padding: 1rem 2rem;
    margin-bottom: 8px;
    background-color: var(--BGCOLOR);
    border-radius: 10px;
}

.socials {
    font-family: var(--FF);
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: flex-start;
    gap: 0.50rem;
}

.socials img {
    width: 10%;
}

.signin-google, .signin-apple {
    position: relative;
    border: none;
    border-radius: 8px; /* Rounded corners */
    z-index: 1; /* Place content on top */
    background: var(--ALT-FF); /* Background color for content */
    width: 300px;
    height: 55px;
    padding: 1rem; /* Space inside the element */
}

.signin-google::before, .signin-apple::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit; /* Match the parent element's border radius */
    padding: 1.5px; /* Thickness of the border */
    background: var(--GOOGLE-APPLE-COLOR); /* Gradient for the border */
    z-index: -1; /* Place below the content */
    -webkit-mask: 
      linear-gradient(#fff 0 0) content-box, 
      linear-gradient(#fff 0 0);
    mask: 
      linear-gradient(#fff 0 0) content-box, 
      linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; /* Safari compatibility */
    mask-composite: exclude; /* For other browsers */
}

.signin-facebook {
    position: relative;
    border: none;
    border-radius: 8px; /* Rounded corners */
    z-index: 1; /* Place content on top */
    background: var(--ALT-FF); /* Background color for content */
    width: 300px;
    height: 55px;
    padding: 1rem; /* Space inside the element */
}

.signin-facebook::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit; /* Match the parent element's border radius */
    padding: 1.5px; /* Thickness of the border */
    background: var(--FB-COLOR); /* Gradient for the border */
    z-index: -1; /* Place below the content */
    -webkit-mask: 
      linear-gradient(#fff 0 0) content-box, 
      linear-gradient(#fff 0 0);
    mask: 
      linear-gradient(#fff 0 0) content-box, 
      linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; /* Safari compatibility */
    mask-composite: exclude; /* For other browsers */
}

.forgot-password a{
    font-family: var(--FF);
    margin: 0 0 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--FC);
    text-underline-offset: 5px;
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: -8%;
    line-height: 60px;
}

.links {
    display: flex;
    justify-content: space-between;
    color: var(--ALT-FC);
    font-size: 0.5rem;
    font-weight: 400;
    font-family: var(--FF);
    letter-spacing: -8%;
    line-height: 21.78px;
    padding-bottom: 20px;
}

/* Desktop Section */
.desktop-header {
    background-color: #000;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    gap: 7rem;
    padding: 1rem;
    margin-top: -2px;
}

.hideOnMobile {
    display: none !important;
}

.desktop-header li {
    list-style: none;
    padding-right: 30px;
    letter-spacing: 2px;
}

.brand-img {
    width: 150px;
}

.desktop-header a {
    text-decoration: none;
    height: 100%;
    display: flex;
    align-items: center;
}

.menu-btn {
    transform: translateX(80px);
}

.hide-sidebar {
    display: none;
    position: relative;
    top: -3.3rem;
    left: 22rem;
    padding: 1rem 0;
}

.menu-btn.visible, .hide-sidebar.visible {
    display: block;
}

.menu-btn.hidden, .hide-sidebar.hidden {
    display: none;
}

.sidebar {
    position: fixed;
    top: 3rem;
    left: 0;
    height: 40%;
    width: 50%;
    z-index: 999;
    backdrop-filter: blur(10px);
    display: none;
    transition: transform 0.3s ease-in-out;
}

.sidebar.visible {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: flex-start;
}

.hidden {
    display: none;
}  

.sidebar a {
    text-transform: uppercase;
    font-size: 0.8rem;
    padding: 1.5rem;
    font-weight: bold;
    color: var(--FC);
    margin-top: -50px;
    margin-bottom: 50px;
}

.sidebar a:is(:hover, :focus) {
    color: rgb(224, 212, 212);
    transform: scale(1.3); /* Add slight zoom effect */
    transition: transform 0.3s ease, fill 0.2s ease;
}

@keyframes transform {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);;
    }
    100% {
        transform: translateY(0);
    }
}

.desktop-main {
    margin-top: 2rem;
}

.intro-section {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
    transform: translateY(300px);
    margin-top: -280px;
    border-bottom: 2px solid rgba(33, 33, 33, 1);
    padding-top: 40px;
}

.intro-section h1 {
    font: 3rem 'Outfit', sans-serif;
    font-weight: 600;
    line-height: 63px;
    width: 60%;
    height: auto;
}

.intro-section span {
    display: block;
    text-wrap: nowrap;
    position: relative;
    background: linear-gradient(to left, #3EFB3A 50%, #FBFC47);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.intro-section span::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -5px; /* Adjust for underline offset */
    width: 100%;
    height: 4px; /* Adjust for underline thickness */
    background: linear-gradient(to left, #3EFB3A, #FBFC47);
}

.intro-section p {
    width: 551px;
    font: 1rem 'Inter', sans-serif;
    color: var(--SCND-ALT-FC);
    margin: 25px 0;
}

.intro-section button {
    display: inline;
    margin-right: 0.25rem;
    width: 40%;
    height: 42px;
    border: 1px solid rgba(103, 103, 103, 1);
    border-radius: 13px;
    background: linear-gradient(to left, #3EFB3A, #FBFC47);
    font: 16px 'Inter', sans-serif;
    font-weight: 500;
    line-height: 21.78px;
}

.intro-section a {
    color: rgba(47, 47, 47, 1);
    text-decoration: none;
}

.intro-section p:last-child {
    display: flex;
    justify-content: flex-start;
    gap: 5px;
    width: 50%;
    height: 17px;
    font: 0.75rem 'Inter', sans-serif;
    line-height: 16.94px;
    color: var(--SCND-ALT-FC);
}

.video-circle-img {
    width: 22px;
    height: 22px;
    margin-top: -4px;
}

.ai-img img {
    height: 310px;
    border: none;
    border-radius: 20px;
    box-shadow: 0 0 10px 5px rgba(255, 255, 255, 0.1);
}

.customers-section {
    margin: 370px auto 0;
    display: flex;
    flex-flow: column wrap;
}

.customers-section h2 {
    font: 1rem 'Outfit', sans-serif;
    font-weight: 600;
    line-height: 25.2px;
    letter-spacing: 1px;
    text-align: center;
    margin: 0 auto;
    color: var(--SCND-ALT-FC);
    padding-bottom: 80px;
}

.logos {
    width: 100%;
    height: auto;
    padding: 0 1rem;
}

.results-subscription-section, .scnd-results-subscription-section {
    margin: 100px auto 0;
    padding: 0 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 70px;
    position: relative;
}

.results-subscription-section img:first-child {
    width: 100%;
    height: auto;
    box-shadow: 0 6.25px 93.81px 0 rgba(0, 0, 0, 0.08);
}

.sub-logo {
    width: 100%;
    height: auto;
    margin-top: 53px;
}

.scnd-results-subscription-section img:last-child {
    width: 100%;
    height: auto;
    position: relative;
}

.brand-services-section {
    margin: 100px auto 0;
}

.brand-services-section h2 {
    font: 2rem 'Outfit', sans-serif;
    font-weight: 600;
    line-height: 45px;
    text-align: center;
    margin: 0 auto 71px;
}

.brand-services-section img {
    margin-bottom: 50px;
}

.customers-reviews {
    margin: 100px 0;
    padding: 0 1rem;
    background-color: rgba(37, 40, 53, 1);
}

.customers-reviews h2 {
    padding: 40px 0 30px;
    text-align: center;
    margin: 0 auto;
    font: 1rem 'Outfit', sans-serif;
    font-weight: 600;
    letter-spacing: 2px;
    color: var(--SCND-ALT-FC);
}

.customers-reviews p {
    font: 0.8rem 'Inter', sans-serif;
    font-weight: 500;
    line-height: 16.94px;
    text-align: center;
    color: rgba(183, 183, 183, 1);
    margin-bottom: 40px;
}

.img-container {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    padding: 0.5rem;
    padding-left: 150px;
   /*  display: grid;
    grid-template-columns: repeat(3, 315px);
    justify-self: center;
    gap: 30px; */ /* Do this for desktop view */
}

.img-container img {
    width: 45%;
}

.subscription-plans h2 {
    padding: 50px 0 0;
    font: 2rem 'Outfit', sans-serif;
    font-weight: 600;
    text-align: center;
    line-height: 50px;
    color: var(--SCND-ALT-FC);
}

.subscription-plans .h2-p {
    font: 14px 'Inter', sans-serif;
    font-weight: 500;
    line-height: 16.94px;
    color: rgba(183, 183, 183, 1);
    text-align: center;
    padding: 30px 0 50px;
}

.packages-container {
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    align-items: center;
    gap: 50px;
}

.plan {
    border: none;
    border-radius: 30px;
    background-color: rgba(37, 40, 53, 1);
    padding: 35px 20px 30px;
    width: 330px;
    height: auto;
    box-shadow: 0 0 10px 5px rgba(255, 255, 255, 0.1);
}

.plan h3 {
    font: 1.2rem 'Inter', sans-serif;
    font-weight: 500;
    line-height: 19.36px;
    padding-bottom: 2px;
    color: rgba(221, 221, 221, 1);
}

.plan-price {
    font: 40px 'Outfit', sans-serif;
    font-weight: 600;
    line-height: 50.4px;
    color: rgba(224, 224, 224, 1);
}

.dollar-price {
    font: 15px 'Outfit', sans-serif;
    font-weight: 500;
    line-height: 18.9px;
    color: rgba(224, 224, 224, 1);
}

.plan p {
    padding: 16px 0 0;
    font: 14px 'Inter', sans-serif;
    font-weight: 500;
    line-height: 16.94px;
    color: rgba(183, 183, 183, 1);
}

.p-2 {
    margin-bottom: 20px;
}

.plan h4 {
    font: 14px 'Inter', sans-serif;
    font-weight: 600;
    line-height: 16.94px;
    color: rgba(239, 239, 239, 1);
}

.premium-plan-btn, .basic-plan-btn{
    margin: 60px 0 10px;
    width: 100%;
    height: 50px;
    padding: 10px 0; /* Space inside the element */
    border: none;
    border-radius: 15px;  /* Rounded corners */
    position: relative;
    z-index: 1; /* Place content on top */
    background-color: rgba(37, 40, 53, 1); /* Background color for content */
    color: var(--SCND-ALT-FC);
    font: 14px 'Inter', sans-serif;
    font-weight: 500;
    box-shadow: 0 0 4px 2px rgba(255, 255, 255, 0.1);
}

.premium-plan-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit; /* Match the parent element's border radius */
    padding: 1.5px; /* Thickness of the border */
    background: var(--GOOGLE-APPLE-COLOR); /* Gradient for the border */
    z-index: -1; /* Place below the content */
    -webkit-mask: 
      linear-gradient(#fff 0 0) content-box, 
      linear-gradient(#fff 0 0);
    mask: 
      linear-gradient(#fff 0 0) content-box, 
      linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; /* Safari compatibility */
    mask-composite: exclude; /* For other browsers */
}

.basic-plan-btn {
    background: linear-gradient(to right, rgba(251, 252, 71, 1), rgba(62, 251, 58, 1));
    color: rgba(41, 41, 41, 1);
    font: 14px 'Inter', sans-serif;
    font-weight: 500;
}

.free-trial {
    width: 100%;
    height: auto;
    margin: 90px auto 0;
    border: none;
    border-radius: 13px;
    background: linear-gradient(to right, rgba(251, 252, 71, 1), rgba(62, 251, 58, 1));
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    align-items: center;
}

.free-trial h3 {
    font: 1.2rem 'Outfit', sans-serif;
    font-weight: 600;
    color: rgba(41, 41, 41, 1);
    padding: 1rem 0;
    text-align: center;
}

.free-trial p {
    border: 1px solid rgba(103, 103, 103, 1);
    width: 50%;
    height: auto;
    background-color: rgba(245, 245, 245, 1);
    text-align: center;
    padding: 1rem;
    color: rgba(71, 71, 71, 1);
    font: 0.8rem 'Inter', sans-serif;
    font-weight: 500;
    margin: 1rem auto;
}

.brand-links nav {
    margin: 5rem 100px 0 0;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    list-style-type: none;
}

.brand-links ul {
    margin-bottom: 30px;
}

.brand-links li {
    list-style-type: none;
}

.brand-links li:first-child {
    color: rgba(220, 220, 220, 1);
    font: 0.8rem 'Inter', sans-serif;
    font-weight: 700;
    line-height: 18.04px;
    padding-bottom: 10px;
}

.brand-links a {
    text-decoration: none;
    color: rgba(190, 190, 190, 1);
    font: 0.5rem 'Inter', sans-serif;
    font-weight: 500;
}

/* Mobile S */
@media (min-width: 320px) {
     .ellipse-1,
     .ellipse-3, .ellipse-2-3, 
     .ellipse-3-4 {
        display: block;
    }

    .ellipse-1 {
        position: absolute;
        top: 350px;
        left: -50px; /* yellow */
    }

    .ellipse-3 {
        position: absolute;
        top: -30px;
        left: 30px; /*  purple top */
    } 

    .ellipse-2-3 { /* purple bottom */
        position: absolute;
        top: 70%;
        left: 0;
    }
    
    .ellipse-3-4 {
        position: absolute;
        bottom: -700px;
        right: 5%; /* blue */
    }   

    .desktop-header {
        margin-top: -3px;
    }

    .menu-btn {
        transform: translateX(10px);
    }

    .hide-sidebar {
        left: 17.5rem;
    }

    .sidebar {
        width: 40%;     
    }

    .intro-section h1 {
        font-size: 2.5rem;
        line-height: 42px;
        width: 68%;
    }
    
    .intro-section p {
        font-size: 0.9rem;
    }
    
    .intro-section button {
        width: 45%;
    }
    
    .ai-img {
        width: 100%;
    }
    
    .customers-reviews h2 {
        font-size: 1.3rem;
        margin-bottom: -20px;
    }
    
    .customers-reviews p {
        font: 0.5rem 'Inter', sans-serif;
        line-height: 10px;
        margin-bottom: -5px;
    }
    
    .img-container {
        gap: 10px;
        padding: 1.5rem 2.5rem 2rem;
    }
    
    .subscription-plans h2 {
        font-size: 1.3rem;
        line-height: 25px;
    }
    
    .subscription-plans .h2-p {
        font-size: 0.8rem;
    }

    .plan {
        width: 100%;
    }
     
    .free-trial h3 {
        font-size: 1rem;
        padding: 2rem 0 1rem;
    }
    
    .free-trial p {
        font-size: 0.6rem;
    }
}

@media (min-width: 360px) {
    .sidebar {
        width: 50%;
        height: 45%;
    }

    .menu-btn {
        transform: translateX(40px);
    }

    .hide-sidebar {
        left: 20rem;
    }

    .intro-section h1 {
        width: 70%;
        font-size: 3rem;
        line-height: 63px;
    }

    .customers-reviews p {
        font-size: 0.4rem;
    }
}
/* Mobile M */
@media (min-width: 375px) {
    body {
        position: relative;
    }

    .login-header h1 {
        padding: 0 3rem;
    }
    
    .fields-input, .fields-btn {
        width: 350px;
        height: 60px;
    }

    .signin-google, .signin-apple, .signin-facebook {
        width: 350px;
        height: 60px;
    }

    .menu-btn {
        transform: translateX(62px);
    }

    .hide-sidebar {
        left: 21rem;
    }
}

@media (min-width: 390px) {
    .menu-btn {
        transform: translateX(75px);
    }

    .hide-sidebar {
        left: 22rem;
    }
}

/* Mobile L */
@media (min-width: 425px) {
    .login-header h1 {
        padding: 0 2rem;
    }

    .fields-input, .fields-btn {
        width: 400px;
        height: 60px;
    }

    .signin-google, .signin-apple, .signin-facebook {
        width: 400px;
        height: 60px;
    }

    .menu-btn {
        transform: translateX(110px);
    }

    .hide-sidebar {
        left: 24rem;
    }
}

@media (min-width: 480px) {
    .login-header h1 {
        padding: 3rem 3rem 0;
        font-size: 3rem;
    }

    .signin-google, .signin-apple, .signin-facebook {
        height: 65px;
    }

    .menu-btn {
        transform: translateX(px);
    }

    .hide-sidebar {
        top: -4rem;
        left: 27rem;
    }

    .intro-section h1 {
        width: 50%;
    }
}

/* Tablet */
@media (min-width: 768px) {
    body {
        padding: 0 3rem;
        position: relative;
    }

    .ellipse-1 {
        position: absolute;
        top: 150px;
        left: -150px;
    }

    .ellipse-2 {
        position: absolute;
        top: 150px;
        right: -150px;
    }

    .ellipse-3 {
        position: absolute;
        top: -150px;
        left: 70px;
        
    }

    .login-header h1 {
        padding: 8rem 2rem 0;
    }

    .login-header p {
        padding-bottom: 3rem;
    }

    .fields-and-socials-flex {
        margin-top: 2rem;
        gap: 5rem;
    }

    .fields-input, .fields-btn {
        width: 600px;
        height: 80px;
        font-size: 1.5rem;
    }

    .signin-google, .signin-apple, .signin-facebook {
        width: 600px;
        height: 80px;
        padding: 2rem;
        font-size: 1.5rem;
    }

    .forgot-password a {
        margin: -10px 0 50px;
        padding-top: 1rem;
    }

    .links {
        font-size: 0.75rem;
    }

    .menu-btn {
        display: none;
    }

    .hideOnMobile {
        display: flex !important;
    }

    .desktop-header {
        padding-left: 2rem;
    }

    .desktop-header .hideOnMobile-li {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
    }

    .brand-img {
        width: 200px;
        margin-right: 1rem;
    }

    .desktop-header a {
        color: var(--FC);
        text-decoration: none;
    }

    .desktop-header li {
        font-size: 0.7rem;
        padding-right: 0.8rem;
    }

    .desktop-header li:nth-child(6) {
        margin-right: 1rem;
    }

    .desktop-header div {
        border-radius: 10px;
        border: 1px solid rgba(103, 103, 103, 1);
        font: 14px 'Inter', sans-serif;
        font-weight: 500;
        height: 41px;
        background-color: var(--BGCOLOR);
        padding: 10px 1rem;
        color: var(--FC);
        min-width: 85px; 
        margin-right: -0.25rem;
    }

    .desktop-header li:last-child div {
        padding-left: 1.5rem;
        min-width: 116px;
        background: linear-gradient(to left, #3EFB3A, #FBFC47);
    }

    .desktop-header li:last-child a {
        color: #000;
    }

    .intro-section {
        flex-direction: row;
        transform: translateY(380px);
    }
    
    .intro-section h1 {
        font-size: 3.5rem;
        margin-top: 2.5rem;
        width: 50%;
    }
    
    .intro-section p {
        font-size: 1.2rem;
    }

    .intro-section button {
        width: 30%;
    }
    
    .intro-section p:last-child {
        margin-bottom: 20%;
    }
    
    .ai-img {
        transform: translateX(-110px);
        margin-right: -260px;
        overflow-x: hidden;
    }

    .ai-img img {
        width: 500px;
        height: 360px;
        border-radius: 50px;
        box-shadow: none;
    }

    .customers-section {
        padding: 0 3rem;
        width: 100%;
    }

    .customers-section h2 {
        padding: 4rem 0 2.5rem;
    }

    .results-subscription-section, 
    .scnd-results-subscription-section  {
        flex-direction: row;
    }

    .results-subscription-section img:nth-child(3) {
        width: 380px;
        padding: 0 1rem;
    }

    .results-subscription-section img:nth-child(4) {
        width: 200px;
        margin-left: -50px;
        margin-bottom: 40px;
    }
    
    .sub-logo {
        width: 50%;
        height: auto;
        margin-top: 53px;
    }

    .scnd-results-subscription-section img {
        padding: 0 1rem;
        margin-right: -50px;
    }

    .ellipse-2-3 {
        top: 5%;
    }
    
    .ellipse-3-4 {
        right: -20%;
    }

    .scnd-results-subscription-section img:last-child {
        width: 300px;
        height: auto;
        position: relative;
    }    

    .brand-logo {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 40px;
        padding-left: 3rem;
        margin: -20px 0 -60px;
    }

    .brand-logo img:first-child {
        width: 230px;
    }

    .brand-logo img:last-child {
        width: 430px;
    }
    
    .brand-services-section h2, .customers-reviews h2,  .subscription-plans h2  {
        font-size: 1.3rem;
        line-height: 30px;
    }

    .customers-reviews {
        width: 830px;
        margin-left: -50px;
    }
    
    .customers-reviews p, .subscription-plans .h2-p {
        font-size: 0.5rem;
        line-height: 15px;
        margin-top: -20px;
    }

    .customers-reviews h2 {
        padding-bottom: 20px;
    }
    
    .img-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        justify-self: center;
        align-self: center;
        gap: 20px;
        padding: 2rem 10rem 2rem 5rem;      
    }

    .img-container img {  
        width: 100%;
    }

    .subscription-plans {
        margin-top: -100px;
    }

    .packages-container {
        flex-direction: row;
        gap: 20px;
        margin: -2rem;
        padding: 0 2rem;
    }
    
    .plan {
        width: 200px;
        height: auto;
        border-radius: 15px;
    }
    
    .plan h3 {
        font-size: 1rem;
    }
    
    .plan-price {
        font-size: 2rem;
    }
    
    .dollar-price {
        font-size: 0.5rem !important;
    }
    
    .plan p {
        padding: 10px 0 0;
        font-size: 0.8rem;
        line-height: 15.94px;
    }
    
    .p-2 {
        margin-bottom: 15px;
    }
    
    .plan h4 {
        font-size: 1rem;
    }
    
    .premium-plan-btn, .basic-plan-btn{
        margin: 60px auto 10px;
        width: 100%;
        height: 70px;
        font-size: 1.3rem;
    }


    .free-trial {
        flex-direction: row;
        justify-content: space-evenly;
        align-items: center;
        width: 85%;
        margin-bottom: -25px;
    }
    
    .free-trial h3 {
        font-size: 1rem;
        text-align: left;
        padding: 1.5rem 3rem;
    }
    
    .free-trial p {
        width: 20%;
        font-size: 0.8rem;
        padding: 8px 2px;
        margin-right: 50px;
    }
    
    .brand-links nav {
        margin-right: 100px;
        gap: 60px;
    }

    .brand-links li a {
        font-size: 0.6rem;
    }
    
    .brand-links li:first-child {
        font-size: 1rem;
        padding-bottom: 1.3rem;
    }
}

@media (min-width: 820px) {
    .desktop-header li:nth-child(6) {
        margin-right: 4rem;
    }
}

/* Laptop */
@media (min-width: 1024px) {
    body {
        padding: 0 2.5rem;
    }

    .ellipse-1 {
        position: absolute;
        top: 200px;
        left: -150px;
    }

    .ellipse-2 {
        position: absolute;
        top: 200px;
        right: -150px;
    }

    .ellipse-3 {
        position: absolute;
        top: -50px;
        left: 200px;
        
    }

    .login-header {
        padding-top: 10em;
    }

    .login-header h1 {
        padding: 0 2rem;
        font-size: 4rem;
    }

    .login-header p {
        font-size: 1rem;
    }

    .fields-and-socials-flex {
        flex-flow: row wrap;
        justify-content: space-evenly;
        margin-top: 80px;
        gap: 3.5rem;
    }

    .fields-input, .fields-btn {
        width: 400px;
        height: 70px;
        font-size: 1.3rem;
    }

    #reg-acct {
        font-size: 1rem;
    }

    .highlight {
        display: block;
        padding-top: 7rem;
    }

    .signin-google, .signin-apple, .signin-facebook {
        width: 400px;
        height: 70px;
        padding: 2rem;
        font-size: 1.3rem;
    }

    .forgot-password a {
        font-size: 1rem;
    }

    .links {
        font-size: 0.95rem;
        padding-bottom: 0;
    }

    .brand-img {
        width: 250px;
    }

    .desktop-header li {
        padding-right: 1rem;
        font-size: 1rem;
    }

    .desktop-header li:nth-child(6) {
        margin-right: 8.5rem;
    }

    .desktop-header div {
        margin-right: -5px;
    }

    .intro-section {
        padding: 0 2rem;
    }
    
    .intro-section h1 {
        margin-top: 3.8rem;
        width: 50%;
    }

    .intro-section p {
        font-size: 1.5rem;
    }

    .intro-section button {
        width: 30%;
    }
    
    .intro-section p:last-child {
        margin-bottom: 20%;
    }
    
    .ai-img {
        width: 510px;
    }

    .ai-img img {
        width: 540px;
        height: 380px;
    }
    
    .customers-section {
        padding: 0 3rem;
        width: 90%;
    }

    .results-subscription-section img:nth-child(3) {
        width: 50%;
        padding: 0 1rem;
    }

    .results-subscription-section img:nth-child(4) {
        width: 40%;
        margin-left: -40px;
    }
    
    .scnd-results-subscription-section img:last-child {
        width: 40%;
    }  

    .ellipse-2-3 {
        top: -50%;
    }
    
    .ellipse-3-4 {
        right: -20%;
    }  

    .brand-logo {
        padding-left: 3rem;
    }

    .brand-logo img:first-child {
        width: 280px;
    }

    .brand-logo img:last-child {
        width: 70%;
    }
    
    .brand-services-section h2, .customers-reviews h2,  .subscription-plans h2  {
        font-size: 1.8rem;
    }

    .customers-reviews {
        width: 100vw;
        margin-left: -30px;
    }
    
    .customers-reviews p, .subscription-plans .h2-p {
        font-size: 0.7rem;
    }
    
    .img-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        justify-self: center;
        gap: 30px;
        padding: 3rem 10rem;      
    }

    .img-container img {
        width: 100%;
    }

    .subscription-plans {
        margin: 0 -1rem;
    }

    .packages-container {
        margin: 0 auto;
        padding-left: 1.62rem;
        gap: 30px;
    }

    .plan {
        width: 300px;
        height: auto;
        border-radius: 15px;
    }
}

@media (min-width: 1280px) {
    .desktop-header li:nth-child(6) {
        margin-right: 24rem;
    }
}

/* Laptop L*/
@media (min-width: 1440px) {
    body {
        padding: 0 4rem 0;
    }

    .ellipse-1 {
        position: absolute;
        top: 320px;
        left: -150px;
    }

    .ellipse-2 {
        position: absolute;
        top: 320px;
        right: -150px;
    }

    .ellipse-3 {
        position: absolute;
        top: 50px;
        left: 400px;
    }

    .login-header {
        padding-top: 18em;
    }

    .login-header h1 {
        font-size: 5.5rem;
    }

    .login-header p {
        font-size: 1.5rem;
    }

    .fields-and-socials-flex {
        padding: 0 2rem;
        gap: 5rem;
    }

    .fields {
        gap: 1.5rem;
    }

    .fields-input, .fields-btn {
        width: 500px;
        height: 80px;
        font-size: 1.5rem;
        padding-top: 3rem;
        padding-bottom: 3rem;
        border-radius: 1rem;
    }

    .fields-btn {
        align-items: center;
    }   

    .arrow {
        width: 35px;
        height: 20px;
    }

    #reg-acct {
        font-size: 1rem;
    }

    .highlight {
        padding-top: 10rem;
    }

    .signin-google, .signin-apple, .signin-facebook {
        width: 500px;
        height: 80px;
        padding-top: 3rem;
        padding-bottom: 3rem;
        border-radius: 1rem;
        font-size: 1.5rem;
    }

    .forgot-password a {
        font-size: 1.2rem;
    }

    .links {
        font-size: 1rem;
        padding-bottom: 0.5rem;
    }

    .brand-img {
        width: 450px;
    }

    .desktop-header li {
        font-size: 1.2rem;
        padding-right: 2.5rem;
    }

    .desktop-header li:nth-child(6) {
        margin-right: 11rem;
    }

    .desktop-header div {
        margin-right: -25px;
    }

    .desktop-header li:last-child div {
        padding-left: 1.5rem;
        min-width: 116px;
        background: linear-gradient(to left, #3EFB3A, #FBFC47);
    }

    .desktop-header li:last-child a {
        color: #000;
    }
    
    .intro-section h1 {
        font-size: 3.8rem;
        margin-top: 3.5rem;
    }
    
    .intro-section p {
        font-size: 1.5rem;
    }
    
    .intro-section p:last-child {
        margin-bottom: 20%;
        font-size: 1rem;
        gap: 20px;
    }
    
    .ai-img {
        transform: translateX(-250px);
        margin-right: -260px;
    }

    .ai-img img {
        height: 430px;
        border-radius: 50px;
        box-shadow: none;
    }

    .customers-section {
        padding: 0 4rem;
        width: 80%;
    }

    .customers-section h2 {
        padding: 4rem 0 2.5rem;
    }


    .results-subscription-section img:nth-child(3) {
        width: 50%;
        padding: 0 5rem;
    }

    .results-subscription-section img:nth-child(4) {
        width: 40%;
        margin-left: -50px;
        margin-bottom: 40px;
    }

    .scnd-results-subscription-section img:last-child {
        width: 40%;
    }    

    .scnd-results-subscription-section img {
        padding: 0 4rem;
    }

    .brand-logo img:first-child {
        width: 30%;
    }

    .brand-logo img:last-child {
        width: 50%;
    }

    .customers-reviews {
        width: 100vw;
    }
    
    .customers-reviews p, .subscription-plans .h2-p {
        font-size: 0.9rem;
    }
    
    .img-container {
        gap: 20px;
        padding: 4rem 15rem 2rem;
    }

    .img-container img {
        width: 100%;
    }

    .packages-container {
        gap: 40px;
    }
    
    .plan {
        width: 370px;
        height: auto;
        border-radius: 15px;
    }
    
    .plan h3 {
        font-size: 1.2rem;
    }
    
    .plan-price {
        font-size: 2.5rem;
    }
    
    .dollar-price {
        font-size: 0.8rem !important;
    }
    
    .plan p {
        padding: 14px 0 0;
        font-size: 0.9rem;
        line-height: 20.94px;
    }

    .free-trial {
        width: 95%;
        padding: 2rem;
    }
    
    .free-trial h3 {
        font-size: 1.6rem;
        padding: 1.5rem 3rem;
    }
    
    .free-trial p {
        font-size: 1rem;
    }
    
    .brand-links {
        column-gap: 10rem;
    }

    .brand-links li {
        margin-bottom: -18px;
        padding: 0.8rem;
    }
    
    .brand-links li a {
        font-size: 0.8rem;
    }
    
    .brand-links li:first-child {
        font-size: 1.2rem;
        padding-bottom: 1.5rem;
    }
}


/* 4K Screen */
@media (min-width: 2560px) {
    body {
        padding: 0 8rem;
    }

    .ellipse-1 {
        position: absolute;
        top: 700px;
        left: -150px;
    }

    .ellipse-2 {
        position: absolute;
        top: 500px;
        right: -150px;
    }

    .ellipse-3 {
        position: absolute;
        top: 150px;
        left: 800px;
        
    }

    .login-header {
        padding-top: 25em;
    }

    .login-header h1 {
        font-size: 10rem;
    }

    .login-header p {
        font-size: 2rem;
        padding: 2rem 0;
    }

    .fields-and-socials-flex {
        gap: 6.5rem;
    }

    .fields {
        gap: 2rem;
    }

    .fields-input, .fields-btn {
        width: 870px;
        height: 100px;
        font-size: 2.5rem;
        padding-top: 4rem;
        padding-bottom: 4rem;
    }

    .fields-btn {
        align-items: center;
    }   

    .arrow {
        width: 50px;
        height: 35px;
    }

    #reg-acct {
        font-size: 2rem;
    }

    .highlight {
        width: 50px;
        padding-top: 12rem;
    }

    .signin-google, .signin-apple, .signin-facebook {
        width: 870px;
        height: 100px;
        padding-top: 4rem;
        padding-bottom: 4rem;
        font-size: 2.5rem;
    }

    .forgot-password a {
        padding: 4rem 0 5rem;
        font-size: 2rem;
    }

    .links {
        padding: 3rem 0;
        font-size: 1.8rem;
    }

    .desktop-header {
        padding: 3rem 6rem;
    }

    .brand-img {
        width: 500px;
        margin-right: 4rem;
    }

    .desktop-header li {
        font-size: 2rem;
        padding-right: 5rem;
    }

    .desktop-header li:nth-child(6) {
        margin-right: 35rem;
    }

    .desktop-header div {
        border-radius: 10px;
        border: 1px solid rgba(103, 103, 103, 1);
        font: 14px 'Inter', sans-serif;
        font-weight: 500;
        height: 41px;
        background-color: var(--BGCOLOR);
        padding: 10px 1rem;
        color: var(--FC);
        min-width: 150px; 
        margin-right: -4rem;
    }

    .signinBtn {
        padding-left: 25px;
    }
}

/*  I stopped at 4k responsiveness
/*