@import url('https://api.fontshare.com/v2/css?f[]=clash-display@400,500,600,700&display=swap');

html, body {
    overflow-x: hidden;
}

  
/* Global styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

}

body {
    margin: auto;
    width: 100%;
    position: relative;
    font-family: 'Clash Display', sans-serif; 
    
    
}

/* Navbar */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 3000;
    width: 100%;
    height: 80px;
    padding-left: 80px;
    padding-right: 80px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background: #5264BC;
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform: translateY(0); /* Initially show navbar */
    opacity: 1;
}

.navbar.hidden, .logo-topleft.hidden {

    transform: translateY(-100%);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    pointer-events: none;
}


.logo-topleft {
    position: fixed;
    top: 36px;
    padding-left: 80px;
    font-family: "Clash Display", sans-serif;
    font-size: 16px;          /* Adjust size as needed */
    font-weight: 500;         /* Make it bold */
    color: #ffffff;           /* White text color */
    text-decoration: none;    /* Remove underline from link */
    z-index: 8000;
    cursor: pointer;
    transition: color 0.3s ease;

}

.logo-topleft:hover {
    color: #FFCBFA           /* Change color on hover */
}

/* Navigation links */
.nav-links-container {
    display: flex;
    list-style: none;
    padding-left: 0; /* Removes default list padding */
    margin: 0; /* Removes default margin */
}

.nav-link {
    display: flex;
    align-items: right; /* Vertically aligns the links with icons */
    transition: transform 0.3s ease; /* Smooth transition for scaling */
}



.nav-links-container .nav-link .fab {
    font-size: 16px; /* Adjust the font size to make the icons bigger */
    vertical-align: middle; /* Align the icons vertically with the other menu links */
    margin-top: -4px; /* Adjust as needed to fine-tune the alignment */
    color: #741332; /* Set the color */
}

.links {
    text-decoration: none;
    font-family: "Clash Display", sans-serif;
    font-weight: 300;
    color: #ffffff;
    margin: 0 16px;
    padding-left: 0; /* Adjust padding for better spacing */
    text-transform: capitalize;
    font-size: 16px;
    border-radius: 24px; /* Rounded corners */
    background: transparent; /* Transparent background */
    transition: all 0.3s ease; /* Smooth transition for color and size */
    text-underline-offset: 4px;
}

.charlotte-links-container {
    display: flex;
    flex-direction: column; /* Stack links vertically */
    align-items: flex-start; /* Align links to the left */
    list-style: none; /* Remove default list styling */
    padding: 0; /* Remove padding */
    margin: 0; /* Remove margin */
    gap: 10px; /* Add spacing between links */
}
.charlotte-links {
   display: block; /* Ensure each link takes up its own line */
    text-align: left; /* Align text to the left */
    margin: 0; /* Remove any default margin */
    text-decoration: none; /* Remove underline */
    font-size: 16px; /* Adjust font size for readability */
    color: #ffffff; /* Default link color */
    transition: color 0.3s ease; /* Smooth transition for hover effect */
}

.charlotte-links,
.charlotte-links:link,
.charlotte-links:visited,
.charlotte-links:active {
    color: #ffffff !important;
    text-decoration: none;
}

.charlotte-links:hover {
    color: #282828 !important;
    text-decoration: underline;
}

 
.links:hover {
    opacity: 1;
    color: #2b2b2b; /* Change color on hover */
    font-weight: 300;
    text-decoration: underline;

}

.charlotte-links:active {
    color: #ffffff; /* Keep active links white */
    text-decoration: none; /* Remove underline for active links */
}

.fab-fa-github:hover{
    color: #061446
}

.hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 3001;
    position: fixed;
    top: 20px;
    right: 20px;
}

.hamburger span {
    display: block;
    width: 28px;
    height: 4px;
    margin: 5px 0;
    background: #fff;
    border-radius: 2px;
    transition: 0.3s;
}




/* Header heading */

.header {
    width: 100%;
    height: 100vh;
    position: relative;
    background: #5264BC;
}

.header-heading {
    position: absolute;
    right: 100px;
    width: 30%;
    top: 454px;
    font-size: 1.4vw;
    font-weight: 300;
    color: #ffffff;
    text-align: right;
    /* Animation properties */
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 1s ease-out 2s forwards;  /* Starts after 2 seconds */
}

.sub-heading-charlotte {
    position: absolute;
    left: 100px;
    width: 30%;
    top: 454px;
    font-size: 1.4vw;
    font-weight: 300;
    color: #ffffff;
    text-align: left;
    /* Animation properties */
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 1s ease-out 2s forwards;  /* Starts after 2 seconds */
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.sub-heading-curious {
    position: absolute;
    top: 180px;
    left: 100px;
    width: 100%;
    font-size: 1.4vw;
    font-weight: 400;
    color: #ffffff;
    text-align: left;
    font-family: "Clash Display", sans-serif;
    /* Animation properties */
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 1s ease-out 1.2s forwards;  /* Starts after 2.5 seconds */
}

.rotating-text {
    position: absolute;
    top: 14px; /* Adjust to position it below .sub-heading-curious */
    left: 0px; /* Align it with .sub-heading-curious */
    height: auto; /* Allow it to grow naturally */
    overflow: visible; /* Ensure it is not clipped */
    margin-top: 0; /* Remove any margin affecting its position */
    font-size: 9.4vw;
    text-align: left;
    width: 100%; /* Adjust width to fit content */
    padding-left: 0; /* Ensure no padding pushes it inward */
    color: #ffffff; /* Ensure text is visible */
    opacity: 1; /* Ensure it is visible */
    z-index: 1000; /* Bring it to the front */
}

.text-item {
    position: absolute;
    top: 0;
    left: 0; /* Align to the left */
    opacity: 0; /* Hide by default */
    transition: opacity 0.5s ease-in-out;
    font-weight: 800;
    color: #ffffff;
    pointer-events: none; /* Prevent interaction with hidden items */
}

.text-item.active {
    opacity: 1; /* Show only the active item */
    pointer-events: auto; /* Allow interaction with the active item */
}

.brand-name {
    font-size: 20px; /* Adjust the font size to your preference */
    font-weight: 300;
    color: #ffffff;
    margin-top: 50px;
    text-align: left; 

}

.Me-home-photo {
    position: absolute; /* Position the image absolutely within the header */
    bottom: 10px; /* Distance from the bottom */
    right: 200px; /* Distance from the right */
    width: 200px; /* Adjust size as needed */
    height: auto; /* Maintain aspect ratio */
}

.Me-home-photo img {
    width: 100%; /* Ensure the image scales within its container */
    height: auto; /* Maintain aspect ratio */
    border-radius: 8px; /* Optional: rounded corners */
}

.brand-name span {
    color: #ffffff;
}



.btn-container {
    text-align: center; /* Center align the button container */
}

.btn {
    align-items: center;
    appearance: none;
    background-color: #3058f6;
    border-radius: 24px;
    border-width: 0;
    box-sizing: border-box;
    color: #ffffff;
    cursor: inherit;
    display: inline-flex;
    font-family: "Clash Display", sans-serif;
    height: 48px;
    justify-content: center;
    line-height: 1;
    list-style: none;
    overflow: hidden;
    padding-left: 16px;
    padding-right: 16px;
    position: relative;
    text-align: left;
    text-decoration: none;
    font-size: 18px;
    z-index: 1000;
  }
  
  
  .btn:hover {
    background-color: #132774;
    color: #ffff;
    
  }
  
  




/* PRODUCT DESIGN UX UI SECTION*/

#project-section {
    text-align: center; /* Center-align the cards */
    width: 100%;
    z-index: 2000;
    opacity: 0.8;
    background-color: #ffffff;
}

.heading {
    text-align: left;
    text-transform: capitalize;
    font-size: 4vW;
    font-weight: 600;
    margin-bottom: 100px;
    color: #474747;
   font-family: 'Clash Display', sans-serif; 
    padding-top: 70px;
    padding-left: 0px;
    
}

.card-container{
    padding-left: 100px;
}

.card {
    display: block; 
    width: 90%; 
    margin-bottom: 20px; /* Add some margin between the rows */
    padding: 50px;
    border-radius: 24px;
    overflow: hidden;
    line-height: 1.6;
    transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);
    background-color:#D5A3D9;
    position: relative;
    align-items: flex-start;
    text-align: left;
    font-family: "Poppins", sans-serif;
    cursor:pointer;
    
}

.card2{
    display: block; 
    width: 90%; 
    margin-bottom: 20px; /* Add some margin between the rows */
    padding: 50px;
    border-radius: 24px;
    overflow: hidden;
    line-height: 1.6;
    transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);
    background-color:#8BB9FE;
    position: relative;
    align-items: flex-start;
    text-align: left;
    font-family: "Poppins", sans-serif;
    cursor:pointer;
    
}

.card3{
    display: block; 
    width: 90%; 
    margin-bottom: 20px; /* Add some margin between the rows */
    padding: 50px;
    border-radius: 24px;
    overflow: hidden;
    line-height: 1.6;
    transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);
    background-color:#8EDBA3;
    position: relative;
    align-items: flex-start;
    text-align: left;
    font-family: "Poppins", sans-serif;
    cursor:pointer;
    
}

.content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);
    text-align: left;
    font-family: "Poppins", sans-serif;
    font-weight: 600;
}


.card .content-heading {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-weight: 700;
    font-size: 60px;
    line-height: 1.3;
    z-index: 100;
    transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);
    color: #061446;
    text-align: left;
    font-family: "Poppins", sans-serif;

   
}

.card2 .content-heading {

 display: flex;
flex-direction: column;
align-items: flex-start;
font-weight: 700;
font-size: 60px;
line-height: 1.3;
z-index: 100;
transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);
color: #061446;
text-align: left;
font-family: "Poppins", sans-serif;
}

.card3 .content-heading {

display: flex;
flex-direction: column;
align-items: flex-start;
font-weight: 700;
font-size: 60px;
line-height: 1.3;
z-index: 100;
transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);
color: #05390D;
text-align: left;
font-family: "Poppins", sans-serif;
   }

.card .content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    color: #271655;
    transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);
    text-align: left;
    font-family: "Poppins", sans-serif;

}

.card .para {
    font-weight: 600;

}

.card2 .content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    color: #061446;
    transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);
    text-align: left;
    font-family: "Poppins", sans-serif;
    
}

.card3 .content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    color: #05390D;
    transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);
    text-align: left;
    font-family: "Poppins", sans-serif;
    
}



.card .text-link{
    font-family: "Poppins", sans-serif;
    z-index: 2;
    font-size: 16px;
    font-weight: 300;
    color:#271655
}

.card2 .text-link{
    font-family: "Poppins", sans-serif;
    z-index: 2;
    font-size: 16px;
    font-weight: 300;
    color:#061446;
}

.card3 .text-link{
    font-family: "Poppins", sans-serif;
    z-index: 2;
    font-size: 16px;
    font-weight: 300;
    color:#05390D
}

.text-link:hover {
    text-decoration: underline;
    z-index: 2;

}

.card .Card-badges{
    color: #271655;
    z-index: 2;
    font-weight: 300;
}

.card2 .Card-badges{
    color: #061446;
    z-index: 2;
    font-weight: 300;
}


.card3 .Card-badges{
    color: #05390D;
    z-index: 2;
    font-weight: 300;
}

.content .para {
    z-index: 1;
    opacity: 0.8;
    font-size: 20px;
    font-weight: 300;
    transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);
}

.card::before,
.card::after{
    content: "";
    position: absolute;
    right: -5.2rem;
    top: -5.2rem;
    width: 15rem;
    height: 15rem;
    background: #271655;
    z-index: -1;
    opacity: 0;
    border-radius: 50%;
    transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);
}

.card2::before,
.card2::after {
    content: "";
    position: absolute;
    right: -5.2rem;
    top: -5.2rem;
    width: 15rem;
    height: 15rem;
    background: #061446;
    z-index: -1;
    opacity: 0;
    border-radius: 50%;
    transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);
}

.card3::before,
.card3::after {
    content: "";
    position: absolute;
    right: -5.2rem;
    top: -5.2rem;
    width: 15rem;
    height: 15rem;
    background: #05390D;
    z-index: -1;
    opacity: 0;
    border-radius: 50%;
    transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);
}


.card:hover::before,
.card2:hover::before,
.card3:hover::before {
    scale: 7;
    opacity: 1;
}

.card:hover::after,
.card2:hover::after,
.card3:hover::after {
    scale: 12;
    opacity: 1;
}

.card:hover .content .content-heading {
    color: #E6B4EB;
}

.card:hover .content .para{
    color: #E6B4EB;
}

.card:hover .content .text-link{
    color: #E6B4EB;
}

.card:hover .content .Card-badges{
    color: #E6B4EB;
}


.card2:hover .content .content-heading {
    color: #8BB9FE;
}

.card2:hover .content .para {
    color: #8BB9FE;
}

.card2:hover .content .text-link {
    color: #8BB9FE;
}

.card2:hover .content .Card-badges {
    color: #8BB9FE;
}

.card3:hover .content .content-heading {
    color: #8EDBA3;
}

.card3:hover .content .para {
    color: #8EDBA3;
}

.card3:hover .content .text-link {
    color: #8EDBA3;
}

.card3:hover .content .Card-badges {
    color: #8EDBA3;
}



.card:hover,
.card2:hover,
.card3:hover {
    scale: 1.05;
}

 /* about section */

#about-section{
    position: relative;
    padding: 35px ;
}

.aboutheading{
    text-align: left;
    text-transform: capitalize;
    font-size: 36px;
    font-weight: 500;
    margin-bottom: 100px;
    color: #132774;
    font-family: 'Clash Display', sans-serif;
    padding-top: 70px;
    padding-left: 100px;
}

.about-container{
    width: 100%;
    margin: 50px 0 100px;
    display: flex;
    gap: 100px;
}



.about-img{
    width: 250px;
    height: 250px;
    display: block;
    object-fit: cover;
    margin: 10px auto;
    border-radius: 10px;
    
}
.social-links{
    margin-top: 20px;
    display: flex;
    gap: 20px;
    justify-content: center;
}

.social-img{
    width: 30px;
    height: 30px;
    opacity: .4;
    transition: .5s;
}

.social-img:hover{
    opacity: 1;
}

.info{
    width: 80%;
}

.info p{
    font-size: 1.2rem;
    line-height: 2rem;
    margin: 30px 0;
    color: #132774;
}

html{
    scroll-behavior: smooth;
}

::selection{
    background: #9f526430;
}


.infobuttons {
    margin-top: 20px; /* Add margin to the top of the button container */
}

.infobuttons .btn {
    margin-right: 10px; /* Add margin to the right of each button */
}

/* contact section */

#contact-section{
    margin: 100px 0;
    width: 100%;
    
}

.contactheading{
    text-align: left;
    text-transform: capitalize;
    font-size: 80px;
    font-weight: 700;
    margin-bottom: 20px;
    margin-top: 0px;
    color: #061446;
    font-family: 'Poppins', sans-serif;
    padding-left: 100px;
}


.sub-headingcontact{
    text-align: left;
    text-transform: capitalize;
    font-size: 48px;
    font-weight: 500;
    margin-bottom: 50px;
    margin-top: 0px;
    color: #132774;
    font-family: 'Poppins', sans-serif;
    padding-left: 100px;
}


.social-icons {
    display: flex;
    gap: 60px;
    padding-left: 100px;
}

.icon {
    color: #061446;
    font-size: 100px;
    text-decoration: none;
    transition: color 0.3s ease;
}

.icon:hover {
    color: #3058f6;
}

/* Specific icon styles if needed */
.linkedin:hover {
    color: #3058f6; /* LinkedIn blue color */
}

.github:hover {
    color: #3058f6; /* GitHub black color */
}


.email:hover {
    color: #3058f6; /* Email red color */
}


.footer { 
    bottom: 0; 
    left: 0; 
    z-index: 10;
    padding-left: 100px;
}


@media (max-width: 900px) {

    /* Header */
    .header {
        height: auto;          /* Allow header to grow naturally */
        width: 100%;           /* Full width for mobile */
        overflow: visible;     /* Ensure content is not clipped */
        padding: 20px;         /* Add padding for spacing */
        text-align: left;      /* Align content to the left */
        position: relative;    /* Ensure proper positioning */
        box-sizing: border-box; /* Include padding in width/height calculations */
    }

    .sub-heading-curious {
        font-size: 5vw;        /* Adjust font size for mobile */
        margin: 0px 0;        /* Add spacing below the navbar */
        padding: 0 10px;       /* Add padding for better spacing */
        width: 100%;           /* Ensure it spans the full width */
        text-align: left;      /* Align text to the left */
        position: relative;    /* Reset positioning */
        top: 0px;                /* Remove any top offset */
        z-index: 1000;         /* Ensure it appears above other elements */
    }

    .rotating-text {
        font-size: 6vw;        /* Adjust font size for better readability */
        margin: 10px 0;        /* Add spacing below sub-heading-curious */
        text-align: left;      /* Align text to the left */
    }

    .header-heading {
        font-size: 4vw;        /* Adjust font size for readability */
        margin: 20px 0;        /* Add spacing between headings */
        padding: 0 10px;       /* Add padding for better spacing */
        width: 100%;           /* Ensure it spans the full width */
        text-align: left;      /* Align text to the left */
        position: relative;    /* Reset positioning */
    }

    .sub-heading-charlotte {
        font-size: 4vw;        /* Adjust font size for mobile */
        margin: 20px 0;        /* Add spacing between headings */
        padding: 0 10px;       /* Add padding for better spacing */
        width: 100%;           /* Ensure it spans the full width */
        text-align: left;      /* Align text to the left */
        position: relative;    /* Reset positioning */
    }

    .charlotte-links {
        display: block;        /* Stack links vertically */
        margin: 5px 0;         /* Reduce vertical spacing */
        font-size: 3vw;        /* Adjust font size for readability */
        padding: 0;            /* Remove unnecessary padding */
        text-align: left;      /* Align links to the left */
    }

    /* Navbar */
    .navbar {
        height: auto;
        padding: 20px;         /* Add padding for spacing */
        flex-direction: column;
        align-items: flex-start;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        background: #212020;
        z-index: 2000;
        display: none;         /* Hide the navbar by default */
        transform: translateY(-100%); /* Move it off-screen */
        opacity: 0;            /* Make it invisible */
        transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.4s;
    }

    .navbar.open {
        display: flex;         /* Show the navbar when open */
        transform: translateY(0); /* Move it into view */
        opacity: 1;            /* Make it visible */
    }

    .nav-links-container {
        flex-direction: column;
        width: 100%;
        padding: 0;
        gap: 8px;
        align-items: flex-start;
    }

    .nav-link {
        width: auto;
        justify-content: flex-start;
        display: flex;
    }

    .links {
        width: auto;
        min-width: 120px;
        padding: 12px 24px;
        font-size: 16px;
        border-radius: 999px;
        text-align: center;
        margin: 8px 0;
        display: inline-block;
    }

    .hamburger {
        display: flex;
    }

    /* About Section */
    .aboutheading,
    .contactheading,
    .sub-headingcontact,
    .card-container,
    .footer {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

@media (max-width: 480px) {

 .logo-topleft {
        position: fixed;
        top: 36px;
        left: 10px; /* Adjusted to move it further to the left */
        padding-left: 20px; /* Adjust padding for smaller screens */
        font-family: "Clash Display", sans-serif;
        font-size: 4vw; /* Adjust size as needed */
        font-weight: 500; /* Make it bold */
        color: #ffffff; /* White text color */
        text-decoration: none; /* Remove underline from link */
        z-index: 8000;
        cursor: pointer;
        transition: color 0.3s ease;
 }

    .logo-topleft:hover {
        color: #FFCBFA; /* Change color on hover */
    }

     .nav-links-container {
        padding-top: 80px !important; /* Push links further down */
        margin-top: 0 !important;
    }

     .nav-link {
        width: 100%;
        text-align: left;
        justify-content: flex-start;
        display: flex;
    }
    .links {
        text-align: left;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        justify-content: flex-start;
    }


    .header {
        height: 100vh; /* Allow header to grow naturally */
        width: 100%; /* Full width for mobile */
        overflow: visible; /* Ensure content is not clipped */
        padding: 20px; /* Add padding for spacing */
        text-align: left; /* Align content to the left */
        position: relative; /* Ensure proper positioning */
        
    }
    .header-heading {
        font-size: 5vw; /* Adjust font size for smaller screens */
        font-weight: 400;
        position: relative; /* Position it relative to the header */
        top: 320px; /* Adjust top position for smaller screens */
        align-items: left; /* Align text to the left */
        left: 0px; /* Align it with the sub-heading-curious */
        margin: 20px 0; /* Add spacing below the navbar */
        width: 90%; /* Ensure it spans the full width */
    }

    .sub-heading-curious {
        font-size: 4vw; /* Adjust font size for smaller screens */
        top: 140px;
        left: 16px;
        margin: 20px 0; /* Add spacing below the navbar */
        padding: 0px; /* Add padding for better spacing */
        position: absolute; /* Position it relative to the header */
        text-align: left; /* Align text to the left */
        padding: 0 10px; /* Add padding for better spacing */

    }

    .rotating-text {
        font-size: 14vw; /* Adjust font size for smaller screens */
        text-align: left; /* Align text to the left */
        left: 10px; /* Align it with the sub-heading-curious */
        padding-right: 0px;
        white-space: normal;      /* Allow text to wrap */
        overflow-wrap: break-word;/* Break long words if needed */
        word-break: break-word;   /* Break words at arbitrary points if needed */
        width: 90%;              /* Make sure the container isn't too wide */
        max-width: 100%; 
        position: absolute;
    }

    .sub-heading-charlotte {
       font-size: 4vw; /* Adjust font size for smaller screens */
        position: relative; /* Position it relative to the header */
        top: 340px; /* Adjust top position for smaller screens */
        align-items: left; /* Align text to the left */
        left: 0px; /* Align it with the sub-heading-curious */
        margin: 20px 0; /* Add spacing below the navbar */
        width: 100%; /* Ensure it spans the full width */
        font-weight: 200;
    }

    .charlotte-links {
        display: block; /* Stack links vertically */
        margin: 5px 0; /* Reduce vertical spacing */
        font-size: 4vw; /* Adjust font size for readability */
        padding: 0; /* Remove unnecessary padding */
        text-align: left; /* Align links to the left */
        left: 10px; /* Align it with the sub-heading-curious */
    }

}