/* Reset default styles */

/* body {
    background: radial-gradient(circle at bottom, #16002a 0%, #000000 20%, #120530 50%, #16002a 70%, #000000 100%);
} */
body {
    --circle-position: 0%;
    background: radial-gradient(circle at center var(--circle-position), #16002a, #000000);
    padding-top: 20px;
}




.main-nav {
    /* margin-top: 20px; */
    height: 70px;
    width: 70vw;
    margin-left: 15vw;
    padding: 50px;
    border-radius: 50px;
    border: solid 1px hsla(0, 0%, 100%, 0.2);
    background: hsla(0, 0%, 100%, 0.05);
}

.most-popular {
    background: rgb(0,93,255);
    background: linear-gradient(220deg, rgba(0,93,255,1) 11%, rgba(255,0,204,1) 100%, rgba(9,9,121,1) 7459%);
}

.most-popular-container {
    border: solid 1px transparent;
    background-image: linear-gradient(rgba(0, 0, 0, 0.779), rgba(0, 0, 0, 0.785)), radial-gradient(circle at bottom left, rgba(255,0,204,1), rgba(0,93,255,1));
    padding: 1px;
    background-origin: border-box;
    background-clip: content-box, border-box;
    border-radius: 20px;

    &::after {
        content: '';
        border-radius: 4px;
        position: absolute;
        z-index: -1;
        width: 100%;
        height: 100%;
        background-color: #00DBDE;
    background-image: linear-gradient(45deg, #00DBDE 0%, #FC00FF 100%);
        filter: blur(20px);
        
        transition: 0.5s ease;
    }
}

.most-pop-header {
    margin-top: 25px;
}

/* Add your custom styles here */



/* SIGN IN Button */

.gradient-border {
    position: relative; /* For positioning the pseudo-element */
    display: inline-block; /* Wrap tightly around the content */
    border-radius: 16px; /* Matches the border-radius of the button */
    overflow: hidden; /* Hide any overflow from the pseudo-element */
    background: linear-gradient(315deg, rgba(220,0,255,1) 0%, rgb(55, 1, 218) 36%, rgba(9,9,121,1) 7459%); /* Gradient border */
    padding: 2px; /* Adds space for the gradient border */
    transition: transform 0.3s ease; /* Smooth transition for scaling */
  }
  
  /* Inner button styling */
  .gradient-border .btn {
    background-color: black; /* Button background */
    color: white; /* Text color */
    padding: 8px 16px; /* Adjust button padding */
    border-radius: 14px; /* Inner element border-radius (less than the outer one) */
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.875rem; /* Matches text size */
    text-decoration: none; /* No underline */
    position: relative; /* Required to keep it above the pseudo-element */
  }
  
  /* Hover effect */
  .gradient-border:hover {
    transform: scale(1.1); /* Scale up the gradient border and everything inside */
  }



/* HOME Button */

.gradient-logo {
    background: linear-gradient(330deg, rgba(220,0,255,1) 0%, rgb(55, 1, 218) 36%, rgba(9,9,121,1) 7459%); /* Pink to blue gradient */
    padding: 2px; 
    transition: transform 0.3s ease;;
  }

.gradient-logo:hover {
    transform: scale(1.2);
}


.youtube-course-btn-gradient {
    background: linear-gradient(45deg, rgba(220,0,255,1) 0%, rgb(55, 1, 218) 36%, rgba(9,9,121,1) 7459%); /* Pink to blue gradient */
    padding: 2px; /* Adds space for the gradient border */
    border-radius: 16px; /* Matches the border-radius of the button */
    transition: transform 0.3s ease;
}

.youtube-course-btn-gradient:hover {
    transform: scale(1.1);
}

.gradient-text {
    background: linear-gradient(345deg, rgb(248, 83, 231), rgb(54, 54, 255)); /* Gradient colors */
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent; /* Make the text transparent so the gradient shows */
  }


/* GET STARTED BUTTON */

.get_started_btn {
    --angle: 315deg;
    background: linear-gradient(var(--angle), rgba(220,0,255,1) 0%, rgb(38, 6, 137) 36%, rgb(0, 0, 33) 80%); /* Gradient colors */
    padding: 2px;
    transition: transform 0.3s ease;
}

.get_started_btn .button {
    padding: 12px 24px; /* Adjust button padding */
    background: black;
}

.get_started_btn:hover {
    transform: scale(1.2);
}


.icon-gradient {
    display: inline-block;
    background: linear-gradient(var(--angle), rgba(220,0,255) 0%, rgb(54, 10, 186) 60%); /* Gradient colors */
    -webkit-background-clip: text; /* Clip the background to the text */
    background-clip: text;
    color: transparent; /* Make the text color transparent to show the gradient */
    font-size: 1.5rem; /* Adjust the font size as needed */
  }
  
  /* Ensure the icon keeps its original styling */
  .icon-gradient i {
    font-size: inherit;
  }



/* Logos */

.instagram-logo {
    width: 250px;
    height: auto;
}

.youtube-logo {
    width: 200px;
    height: auto;
}



/* Purchase Buttons */

.purchase-gradient {
    background: linear-gradient(30deg, rgba(220,0,255,1) 0%, rgb(55, 1, 218) 36%, rgba(9,9,121,1) 7459%); /* Gradient colors */
    padding: 2px; /* Adds space for the gradient border */
    transition: transform 0.3s ease;
}

.purchase-button {
    transition: 0.3s ease;
}

.purchase-button:hover {
    transform: scale(1.1);
}

/* Footer */


.footer-bar {
    width: 70vw;
    height: 1px;
    background: rgba(155, 155, 155, 0.208);
}