@import url('https://fonts.googleapis.com/css2?family=Teko:wght@300..700&display=swap');

/* Reset and Global Styles */

*,
::after,
::before {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    text-decoration: none;
}
  
/* Root Variables */
:root {
    /* Cyber Punk Wizerd Color Theme */
    --primary-color: #ff9900;   /* Bitcoin Orange */
    --primary-color2: #ff8000;   /* Bitcoin Orange Dark */
    --secondary-color: #33e000; /* Alien Green */
    --third-color: #c30000;     /* Blood Red */
    --item-color: #fffc00;      /* Cyber Yellow */
    --var-color: #ff33cc;       /* Punk Pink */
    --text-color: #33ccff;      /* Wizerd Blue */
    --text-dark: #3b3b3b;       /* Storm Grey */


    /* Background Color Theme */
    --bg-dark: #393939;
    --bg-darker: #2b2b2b;
    --bg-darkest: #171717;


    /* Font Themes */
    --font-family: 'Teko', sans-serif;


    /* Button Elements 
    --btn-font-size: 1rem;
    --btn-letter-spacing: 0.1rem;
    --btn-height: 3rem;
    --btn-padding: 1rem 1rem 1rem;
    --btn-radius: 1.5rem; */


    /* Standard Breakpoints */
    --breakpoint-xs: 478px;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-mdl: 992px;
    --breakpoint-lg: 1200px;
    --breakpoint-xl: 1440px;
}

  
/* Basic HTML Setup */
html {
    font-size: 16px;
    scroll-behavior: smooth;
    overflow-x: hidden;
}
  
body {
    display: flex;
    flex-direction: column;
    font-family: var(--font-family);
    color: var(--text-color);
    background-color: var(--bg-darker);
    align-items: center;
    justify-content: center;
    line-height: 1.6;
}

/* Body - Text Styles */
h1 {
    font-size: 5rem;
    font-weight: 500;
    line-height: .5;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

h2 {
    font-size: 4rem;
    font-weight: 400;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

h3 {
    font-size: 3rem;
    font-weight: 300;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

h4 {
    font-size: 2rem;
    font-weight: 250;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

p {
    font-size: 2rem;
    font-weight: 200;
    margin-top: .5rem;
    margin-bottom: .5rem;
}

i {
    font-size: 2.5rem;
    font-weight: 150;
}

  
/* Header Styles */
.header {
    background-color: var(--bg-darkest);
    color: var(--secondary-color);
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding: 1rem 1rem;
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: #33e000 .2rem solid;
}

.header .sticky {
    border-bottom: .1rem solid var(--text-color);
}


/* Logo Styles */
.logo {
    font-size: 3rem;
    font-weight: 600;
    color: var(--primary-color);
    cursor: pointer;
    align-content: center;
}

.header .logo2 {
    font-size: 3rem;
    font-weight: 600;
    color: var(--secondary-color);
    cursor: pointer;
    align-items: center;
}

  
/* Navbar Styles */
.navbar {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 50;
    justify-content: flex-end;
    align-items: center;
}

.navbar-container {
    display: flex;
    justify-content: space-between;
    align-items: center;;
}

.navbar a {
    display: inline-flex;
    align-items: center;
    font-size: 2rem;
    color: var(--main-color);
    margin-left: 2.5rem;
    transition: .5s;
}

.navbar a:hover {
    color: var(--var-color);
    transform: scale(1.2);
}

.navbar a.active {
    color: var(--text-color);
}

.navbar a.active:hover {
    color: var(--var-color)
}

/* Trading View Widget */
.tradingview-widget-container {
    position: sticky;
    font-size: 5rem;
    width: 100%;
}


.tradingview-widget {
    position: sticky;
    font-size: 5rem;
    height: 5rem;
    width: 100%;
}


/* Search Icon */
.search-icon {
    font-size: 2.5rem;
    color: var(--secondary-color);
    display: none;
}


/* Menu Icon */
#menu-icon {
    font-size: 2.5rem;
    color: var(--secondary-color);
    display: none;
}


/* Button Styles */

/* Button Container */
.button-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3rem;
    width: 100%;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

/* Primary Button */
.button {
    border: none;
    padding: 0.8rem 2rem;
    background: linear-gradient(147deg, --primary-color, --primary-color2);
    color: var(--bg-darkest);
    border-radius: 2rem;
    font-size: 1.2rem;
    font-weight: bold;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    justify-content: center;
    transition: all 0.3s ease;
    cursor: pointer;
    width: 10rem;
    height: 3rem;
    transform: translateY(-50%) scale(1.5);
    box-shadow: 0 0 1rem var(--text-color);
}

.button a:hover {
    transform: translateY(-50%) scale(1.5);
}

.button i {
    display: flex;
    position: absolute;
    background: transparent;
    color: var(--secondary-color);
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem;
    transition: all 0.3s ease;
}

.button:hover i {
    transform: translateY(-50%) scale(1.5); /* Slightly enlarge the icon on hover */
  } 

.button:hover, .button:focus, .button:active {
    box-shadow: 0 0 1rem var(--text-color);
    color: var(--bg-darker);
    background: var(--primary-color);
    text-decoration: none;
    cursor: pointer;
    margin: 0.5rem;
}




/* Pill Buttons */
/* Red Pill */
.button-redpill {
    display: flex;
    background: var(--third-color);
    border-radius: 1.5rem;
    align-items: center;
    text-align: center;
    justify-content: center;
    height: 3rem;
    width: 10%;
}

.button-redpill:hover {
    transform: scale(1.2);
    transition: all 0.5s ease;
    box-shadow: 0 0 1rem var(--third-color);
}


/* Pink Pill */
.button-pinkpill {
    background: linear-gradient(-147deg, #cc0099, var(--var-color), pink);
    border-radius: 1.5rem;
    color: var(--item-color);
    font-size: 1.5rem;
    text-align: center;
    justify-content: center;
    letter-spacing: 0.1rem;
    font-weight: 600;
    transition: all 0.5s ease;
    width: 40%;
    margin-top: 1rem;
    margin-bottom: 1rem;
    animation: pulse 2s infinite;
}

.button-pinkpill i {
    color: var(--bg-darkest);
    align-items: center;
    font-size: 2rem;
    transition: transform 0.5s ease;
}


/* Orange Pill */
.orangepill {
    display: flex;
    background: var(--primary-color2);
    color: var(--bg-darker);
    border-radius: 1.5rem;
    font-size: 1.5rem;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.1rem;
    font-weight: 600;
    transition: all 0.5s ease;
    width: auto;
    margin-top: 2rem;
    margin-bottom: 2rem;
    animation: pulse 2s infinite;
}

.orangepill i {
    background: var(--primary-color2);
    color: var(--bg-darkest);
    align-items: center;
    align-content: center;
    font-size: 2rem;
    transition: transform 0.5s ease;
}


.orangepill:hover {
    box-shadow: 0 0 5rem var(--text-color);
    transform: scale(1.1); /* Enlarge the button on hover */
}

.orangepill:active {
    transform: translateY(5px);
    box-shadow: 0 2px 4px(0,0,0,0.2);
}


/* Yellow Pill */
.yellowpill {
    display: flex;
    background: var(--item-color);
}


/* Green Pill */
.greenpill {
    display: flex;
    background: var(--secondary-color);
    margin-top: 2rem;
    margin-bottom: 2rem;
    animation: pulse 2s infinite;
}


/* Blue Pill */
.button-bluepill {
    display: flex;
    background: var(--text-color);
    border-radius: 1.5rem;
    align-items: center;
    text-align: center;
    justify-content: center;
    height: 3rem;
    width: 10%;
}

.button-bluepill:hover {
    transform: scale(1.2);
    transition: all 0.5s ease;
    box-shadow: 0 0 1rem var(--text-color);
}


/* Animations */
@keyframes pulse {
    0% {
        transform: scale(0.98);
    }
    50% {
        transform: scale(1.17);
    }
    100% {
        transform: scale(0.98);
    }
}



/* Home Section */
.home {
    color: var(--second-color);
    background-image: radial-gradient(circle, #393939, #000000);
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
}

.home-content {
    text-align: center;
    padding: 1rem 1rem 1rem;
    width: 100%;
}

.home-content h1 {
    font-size: 5rem;
    font-weight: 500;
    line-height: 1;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.home-content h2 {
   font-size: 3rem;
   font-weight: 300;
   margin-top: 1rem;
   margin-bottom: 1rem;
}

.home-content h3 {
    font-size: 2.5rem;
    font-weight: 250;
    margin-top: 1rem;
    margin-bottom: 1rem;
 }

.home-content p {
    font-size: 1.5rem;
}

.home-content h3:nth-of-type(2) {
    margin-bottom: .5rem;
}

span {
    color: var(--primary-color);
}


/* Home Image */
.home-img {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 100%;
}

.home-img img {
    display: block;
    align-content: center;
    width: 30vw;  /* Adjust this value to get the desired size on larger screens */
}



/* Section Divider Racers */
.section-divider::before {
    content: '';
    position: absolute;
    bottom: -5;
    left: -100%; /* Start off-screen to the left */
    width: 100%; /* Full width of the line */
    height: .5%;
    background-color: #33ccff; /* Same color as the static line */
    animation: raceLine 1.7s forwards; /* Animation properties */
}
  
    @keyframes raceLine {
        0% {
            left: -100%; /* Start position */
        }
        100% {
            left: 0; /* End position */
        }
    }

.section-divider2::before {
    content: '';
    position: absolute;
    bottom: -5;
    left: -100%; /* Start off-screen to the left */
    width: 100%; /* Full width of the line */
    height: .5%;
    background-color: #33e000; /* Same color as the static line */
    animation: raceLine 1.7s forwards; /* Animation properties */
  }

    @keyframes raceLine {
        0% {
            left: -100%; /* Start position */
        }
        100% {
            left: 0; /* End position */
        }
    }

.section-divider3::before {
    content: '';
    position: absolute;
    bottom: -5;
    left: -100%; /* Start off-screen to the left */
    width: 100%; /* Full width of the line */
    height: .5%;
    background-color: #fffc00; /* Same color as the static line */
    animation: raceLine 1.7s forwards; /* Animation properties */
}
    
    @keyframes raceLine {
        0% {
            left: -100%; /* Start position */
        }
        100% {
            left: 0; /* End position */
        }
    }

.section-divider4::before {
    content: '';
    position: absolute;
    bottom: -5;
    left: -100%; /* Start off-screen to the left */
    width: 100%; /* Full width of the line */
    height: .5%;
    background-color: #ff9900; /* Same color as the static line */
    animation: raceLine 1.7s forwards; /* Animation properties */
  }

    @keyframes raceLine {
        0% {
            left: -100%; /* Start position */
        }
        100% {
            left: 0; /* End position */
        }
    }

  .section-divider5::before {
    content: '';
    position: absolute;
    bottom: -5;
    left: -100%; /* Start off-screen to the left */
    width: 100%; /* Full width of the line */
    height: .5%;
    background-color: #ff33cc; /* Same color as the static line */
    animation: raceLine 1.7s forwards; /* Animation properties */
  }

    @keyframes raceLine {
        0% {
            left: -100%; /* Start position */
        }
        100% {
            left: 0; /* End position */
        }
    }


/* About Section */
.about {
    color: var(--secondary-color);
    background-color: var(--bg-darker);
    width: 100%;
    justify-content: center;
    align-items: center;
}

.about-content {
    justify-content: center;
    text-align: center;
    padding: 2rem 2rem 2rem;
}



/* Cards */

.main-content {
    position: relative;
    justify-content: center;
}

#cards {
    max-width: 1070px;
    padding: 0 2rem;
    margin: 2rem 0;
    min-height: 60vh;
    justify-content: center;
}

.card-content {
    background-color: var(--bg-darkest);
    cursor: pointer;
    text-align: center;
    padding: 3rem 0;
    border-radius: 25px;
}

.card-content img {
    border-radius: 50%;
    width: 150px;
    height: 150px;
    margin: 0 auto;
    border: 2px solid var(--item-color);
}

.card-title {
    padding-top: 2rem;
    font-size: 3rem;
}

.swiper-button-next,
.swiper-button-prev {
    color: var(--item-color);
}


/* Pagination */
.swiper-pagination {
    position: static;
    padding-top: 20px;
}

.swiper-pagination-bullet {
    background-color: var(--secondary-color);
    height: 10px;
    width: 10px;
    border-radius:100%;
    opacity: 1;
}

.swiper-pagination-bullet-active {
    background-color: var(--item-color);
    height: 10px;
    width: 22px;
    border-radius:100%;
    opacity: 1;
}



/* Charts Section */


/* Projects Section */
.projects {
    color: var(--item-color);
    display: flex;
    justify-content: center;
    align-items: center;
}

.projects-content {
    text-align: center;
    padding: 1rem 1rem 1rem;
    width: 100%;
}

.projects-content h1 {
    font-size: 5rem;
    font-weight: 500;
    line-height: 1;
    margin-top: 2rem;
    margin-bottom: .2rem;
}

.projects-content h2 {
    font-size: 3rem;
    font-weight: 300;
    margin-top: 1rem;
    margin-bottom: 1rem;
 }
 
.projects-content h3 {
     font-size: 2.5rem;
     font-weight: 250;
     margin-top: 1rem;
     margin-bottom: 1rem;
}
 
.projects-content p {
     font-size: 1.5rem;
}


/* Services Section */
.services {
    background-color: var(--bg-darker);
    color: var(--primary-color);
    display: flex;
    justify-content: center;
    align-items: center;
}

.services-content {
    text-align: center;
    padding: 1rem 1rem 1rem;
    width: 100%;
}

.services-content h1 {
    font-size: 5rem;
    font-weight: 500;
    line-height: 1;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.services-content h2 {
    font-size: 3rem;
    font-weight: 300;
    margin-top: 1rem;
    margin-bottom: 1rem;
 }
 
.services-content h3 {
     font-size: 2.5rem;
     font-weight: 250;
     margin-top: 1rem;
     margin-bottom: 1rem;
}
 
.services-content p {
     font-size: 1.5rem;
}

.services-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--bg-darker);
    padding: 1rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
    gap: 1rem;
}

.services-card {
    display: block;
    background: var(--bg-darkest);
    border: .05rem solid transparent;
    border-radius: 2.5rem;
    transition: .3s ease;
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.service-container .services-card {
    align-content: center;
    background: var(--primary-color2);
    padding: 1rem 1rem 1rem;
    border-radius: 2rem;
    text-align: center;
    border: .05rem solid var(--primary-color2);
    transition: .3s ease;
    overflow: auto;
}

.services-container .services-card:hover {
    border-color: var(--primary-color2);
    box-shadow: 0 0 2rem var(--primary-color2);
    transform: scale(1.1);
}

.services-card i {
    font-size: 5rem;
    color: var(--item-color);
    margin-top: 1rem;
}

.services-card p {
    color: var(--text-color);
    font-size: 1.5rem;
}


/* Contact Section */
.contact {
    color: var(--var-color);
    display: flex;
    justify-content: center;
    align-items: center;
}

.contact-content {
    text-align: center;
    padding: 1rem 1rem 1rem;
    width: 100%;
}

.contact-content h1 {
    font-size: 5rem;
    font-weight: 500;
    line-height: 1;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.contact-content h2 {
    font-size: 3rem;
    font-weight: 300;
    margin-top: 1rem;
    margin-bottom: 1rem;
 }
 
.contact-content h3 {
     font-size: 2.5rem;
     font-weight: 250;
     margin-top: 1rem;
     margin-bottom: 1rem;
}
 
.contact-content p {
     font-size: 1.5rem;
}


/* Contact Form Container */
.contactform-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--bg-darkest);
    padding: 1rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
    gap: 1rem;
}


/* Contact Form */
.contact-form {
    max-width: 100%;
    text-align: center;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

/* Contact Info Container */
.contact-container {
    border: var(--var-color) .1rem solid;
    text-align: center;
    margin-top: 1rem;
    margin-bottom: 1rem;
}


/* Client Info Container - All Sections: Info, Service Type, Message, Send */
.clientinfo-container {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center all children horizontally */
    width: 100%;
    height: auto;
}

/* Client Info Label */
.clientinfo-container .contact-label {
    color: var(--var-color);
    font-size: 2.5rem;
    text-align: center;
    margin-top: 1rem;
    margin-bottom: 1rem;
}


/* Business/Personal Info Toggle Switch */
.toggle-switch {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.toggle-radio {
    display: none;
}

.toggle-label {
    background-color: var(--bg-darker);
    border-radius: 20px;
    color: var(--secondary-color);
    cursor: pointer;
    font-size: 1.5rem;
    padding: 5px 15px;
    margin: 0 5px; /* Margin to space out the labels */
    transition: background-color 0.3s;
}

.toggle-label:hover {
    background-color: var(--bg-darker);
    box-shadow: var(--primary-color) 0 0 20px;
}

.toggle-radio:checked + .toggle-label {
    color: var(--item-color);
    background-color: var(--bg-dark);
    box-shadow: var(--primary-color) 0 0 20px;
}



/* Client Information Data Container - Large Box  */
.contact-container .input-box {
    display: grid;
    grid-template-rows: auto;
    justify-content: center;
    align-items: center;
    width: 80%;
    background: var(--bg-dark);
    border: 2px solid var(--bg-darkest);  /* Dark border by default */
    border-radius: 5px;
    transition: border-color 0.3s ease, height 0.3s ease, box-shadow 0.3s ease;
}

.contact-container .input-box:hover,
.contact-container .input-box:focus {
    border-color: var(--var-color); /* Pink border on hover or focus */
    box-shadow: 0 0 20px 10px var(--var-color); /* Pink box shadow */
}



/* Date Input Fields - Data Entry Boxes */
.input-box {
    grid-column: 1;
    align-content: center;
    width: 100%;
    opacity: 1;
    overflow: hidden;
    margin-top: 1rem;
    margin-bottom: 1rem;
    transition: height 0.3s ease;
}

.input-box input {
    background-color: var(--bg-darker); /* Dark grey placeholder background */
    color: var(--text-color);
    font-size: 1.1rem;
    padding: 10px;
    border: 1.5px solid var(--bg-darkest);
    border-radius: 5px;
    width: 80%;
    height: 2rem;
    transition: border-color 0.3s ease, color 0.3s ease, font-size 0.3s ease;
}

.input-box input::placeholder {
    color: var(--item-color); /* Blue placeholder text */
}

.input-box input:focus {
    border: var(--primary-color) 1.5px solid; /* Yellow border on focus */
    caret-color: var(--primary-color);
    color: var(--primary-color);
    font-size: 1.2em; /* Increase text size on focus */
}

.input-box input:hover {
    color: var(--primary-color);
    border: 1.5px solid var(--primary-color); /* Yellow border on hover**/
}

.input-box .active {
    border: var(--secondary-color);
}




/* Business/Personal Info Input Toggles */
.personal-info, .company-info {
    transition: solid 0.3s ease, transform 0.3s ease;
}

.company-info {
    opacity: 0;
    transform: translateY(-20px);
}

#personal:checked ~ .input-box .personal-info {
    opacity: 1;
    transform: translateY(0);
}

#personal:checked ~ .input-box .company-info {
    opacity: 0;
    transform: translateY(-20px);
}

#business:checked ~ .input-box .personal-info {
    opacity: 0;
    transform: translateY(20px);
}

#business:checked ~ .input-box .company-info {
    opacity: 1;
    transform: translateY(0);
}

.separator {
    width: 90%;
    height: 0.2rem;
    background: var(--primary-color);
    margin: 20px 0; /* Space before and after the divider */
}


/* Contact Form - Services Checkboxes */
#serviceTypes input[type="checkbox"] {
    transform: scale(1.5); /* Increase the size of the checkbox */
    accent-color: var(--primary-color); /* Setting the initial color */
}

#serviceTypes {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0; /* Adjusts spacing between labels */
}

#serviceTypes label {
    display: flex;
    align-items: center;
    color: var(--var-color);
    gap: 10px;
    font-size: 1.5rem; /* Adjust text size if needed */
}




/* Contact Form TextBox */
.message-container textarea {
    background-color: var(--bg-dark);
    border: 2px solid var(--bg-darkest);
    border-radius: 5px;
    color: var(--primary-color);
    font-size: 1.5rem;
    height: 10rem;
    width: 80%;
    resize: vertical;
    transition: border-color 0.3s ease, height 0.3s ease, box-shadow 0.3s ease;
}

.message-container textarea .input {
    caret-color: var(--primary-color);
    color: var(--primary-color);
    font-size: 1.2rem;
}

.message-container textarea:focus,
.message-container textarea:hover {
    border-color: var(--var-color); /* Pink border on hover or focus */
    box-shadow: 0 0 20px 10px var(--var-color);
}

.message-container textarea.active {
    border: var(--primary-color) 2px solid;
    font-family: teko;
}




/* Data Input Messages For User ie Place Holders */
.contact-container input::placeholder,
.contact-container textarea::placeholder {
    color: var(--var-color);
    background-color: transparent;
    font-size: 1.5rem;
    font-family: teko;
    text-align: center;
}




/* Alert Styling */
.alert-hidden {
    display: none;
}

.alert-displayed {
    display: flex;
    color: var(--primary-color)
}

.alert-shown {
    display: block;
    background: var(--var-color);
    color: var(--bg-darkest);
    padding: 10px;
    border-radius: 5px;
    margin-top: 10px;
    text-align: center;
    animation: fadeIn 0.5s;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.button-pinkpill {
    width: 10rem;
}



/* Affiliates Section */
.affiliates {
    display: flex;
    color: var(--text-color);
    justify-content: center;
    align-items: center;
}

.affiliates-content {
    text-align: center;
    padding: 1rem 1rem 1rem;
    width: 120%;
}

.affiliates-content h1 {
    font-size: 5rem;
    font-weight: 500;
    line-height: 1;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

/* Logo Crawler Container */
.logo-container {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    width: 150%;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

/* Logo Crawler */
.logo-crawler {
    position: relative;
    align-content: center;
    align-items: center;
    background: transparent;
    width: 220%;
    white-space: nowrap;
    animation: logo-crawler 30s linear infinite;
}

@keyframes logo-crawler {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}

.logo-crawler:before,
.logo-crawler:after {
    position: absolute;
    top: 0;
    width: 250px;
    height: 100%;
    content: "";
    z-index: 2;
}

.logo-crawler:before {
    left: 0;
    background: linear-gradient(to left, transparent);
    z-index: 1;
}

.logo-crawler:after {
    right: 0;
    background: linear-gradient(to right, transparent);
    z-index: 3;
}

.logo-crawler:hover {
    animation-play-state: paused;
}

/* Logo Crawler */
.logo-crawler i {
    height: 50px;
    color: var(--primary-color);
    margin: 0 1rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.logo-crawler img {
    align-content: center;
}




/* Newsletter Subscription */
.subscribe {
    color: var(--secondary-color);
    display: flex;
    justify-content: center;
    align-items: center;
}

span {
    color: var(--primary-color);
}

.subscribe-content {
    text-align: center;
    padding: 1rem 1rem 1rem;
    width: 100%;
}

.subscribe-content h1 {
    font-size: 5rem;
    font-weight: 500;
    line-height: 1;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.subscribe-content h2 {
    font-size: 3rem;
    font-weight: 300;
    margin-top: 1rem;
    margin-bottom: 1rem;
 }
 
.subscribe-content h3 {
     font-size: 2.5rem;
     font-weight: 250;
     margin-top: 1rem;
     margin-bottom: 1rem;
}
 
.subscribe-content p {
     font-size: 1.5rem;
}

.subscribe-container {
    display: flex;
    flex-direction: column;
    font-size: 2rem;
    justify-content: center;
    align-items: center;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.subscribe-form input[type="checkbox"] {
    display: none;
    size: 2.5rem;
}

.subscribe-form input[type="checkbox"]:checked + label {
    color: var(--primary-color); /* Label text color when checkbox is checked */
}



/* Footer Section */
.footer {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 1% 1rem;
    background: var(--bg-darkest);
    width: 100%;
}

.footer-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

/* Social Media Buttons */
.social-media {
    display: inline-flex;
    justify-content: center; /* or space-between, space-around depending on your need */
    align-items: center;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.social-media a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 3.75rem;
    height: 3.75rem;
    line-height: 2.75rem;
    background: transparent;
    border: .15rem solid var(--secondary-color);
    border-radius: 50%;
    font-size: 2rem;
    color: var(--second-color);
    margin: .5rem .5rem .5rem;
    transition: .5s ease;
}

.social-media a:hover {
    background: var(--second-color);
    color: var(--second-bg-color);
    box-shadow: 0 0 1rem var(--text-color);
    transform: translateY(-25%) scale(1.25);
}

.footer-text p {
    font-size: 1.5rem;
    color: var(--secondary-color);
    text-align: center;
    justify-content: center;
}

.footer-iconTop a {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: .1rem;
    background: var(--bg-dark);
    border-radius: .5rem;
    transition: .5s ease;
}

.footer-iconTop a:hover {
    box-shadow: 0 0 1rem var(--text-color)
}

.footer-iconTop a i {
    font-size: 2rem;
    color: var(--secondary-color);
}



  
/* Responsive Design */

/*** Xtra Small Screen ***/
@media (max-width: 478px) {
    html, body {
        font-size: 14px;
        overflow-x: hidden; /* Disable horizontal scrolling for the entire page */
        width: 100%; /* Ensure full width */
        margin: 0; /* Remove any default margins */
        padding: 0;
    }

    .header {
        display: flex;
        width: 100%;
        padding: 1rem 1rem;
    }


    /* Small Screen Logo */
    .logo {
        font-size: 3rem;
        align-content: center;
    }

    .header .logo2 {
        font-size: 3rem;
        align-content: center;
    }


    /* Small Screen Search Bar */
    #search-icon {
        display: block;
        font-size: 4rem;
        align-content: center;
        color: var(--main-color);
    }

    #search-toggle {
        display: none;
    }

    #search-toggle:enabled ~ .searchbar {
        top: 0;
    }


    /* Small Screen Menu Icon */
    #menu-icon {
        display: block;
        font-size: 4rem;
        align-content: center;
        color: var(--main-color);
    }

    #menu-toggle {
        display: none;
    }

    #menu-toggle:checked ~ .navbar {
        top: 0;
    }

    
    /* Small Screen Navbar Menu**/
    .navbar {
        position: fixed;
        top: -100%;
        width: 100%;
        height: auto;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        transition: left 0.3s ease-in-out;
        z-index: 1000;
    }

    .navbar.active {
        background-color: var(--bg-darkest);
        width: 34.2rem;
        left: .01%;
        top: 9%;
    }

    .navbar a {
        display: flex;
        font-size: 2.5rem;
        text-align: center;
        width: 100%;
    }

    .navbar.active::before {
        content: '';
        position: absolute;
        height: 2px;
        background: var(--item-color);
        margin: 1px;
        width: 100%;
        bottom: 0;
    }

    .navbar.active::after {
        content: '';
        position: absolute;
        height: 2px;
        background: var(--item-color);
        margin: 1px;
        width: 100%;
        top: 0;
    } 

    .navbar a:hover {
        color: var(--var-color);
        font-size: 2.5rem;
        text-align: center;
        transform: translateX(5%);
        width: 100%;
    }


    /* Small Screen Home Section */
    .home {
        width: 100%;
        height: 60rem;
    }

    .tradingview-widget {
        position: sticky;
        font-size: 5rem;
        height: 5rem;
        width: 100%;
        margin-top: 1rem;
        margin-bottom: 1rem;
    }


    /* Small Screen Image */
    .home-img {
        display: flex;
        justify-content: center;
        align-items: center;
        max-width: 100%;
    }
    
    .home-img img {
        display: block;
        align-content: center;
        width: 90vw;
    }


    /* Small Screen Orange Pill Button */
    .container {
        display: flex;
        justify-content: center;
        align-content: center;
        height: 5rem;
        width: 100%;
    }

    .orangepill {
        display: inline-flex;
        position: relative;
        justify-content: center;
        align-items: center;
        transform: 0.3s ease, box-shadow 0.3 ease;
        width: 40%;
        overflow: hidden;
    }

    .orangepill i {
        display: flex;
        justify-content: center;
        font-size: 2rem;
        transform: scale(1.2);
        transition: all 0.3s ease;
    }

    .orangepill a {
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
    }

    .orangepill:hover {
        animation: glow 1s infinite;
        box-shadow: 0 0 5rem var(--primary-color2);
        transform: scale(1.2);
    }

    .orangepill:hover::before {
        animation: glow .5s infinite; /* Bright orange glow instead of pulse */
        background-color: var(--orange-glow);
        opacity: 0.5; /* Opacity for the glow effect */
    }
    
    @keyframes glow {
        0%, 100% { 
            opacity: 0.3;
        }
        50% { 
            opacity: 0.6;
        }
    }

    .orangepill:hover i, .btn-orangepill:hover a {
        font-size: 1.5rem;
        transform: scale(1.2); /* Reset the transform to scale with the button */
    }



    /* Small Screen About Section */

    /* About Section Buttons */
    .about {
        align-items: center !important;
        justify-content: center !important;
    }

    .about-content {
        text-align: center;
        padding: 1rem 1rem 1rem;
        width: 100%;
    }

    .about h2 {
        font-size: 2rem;
    }

    .about h3 {
        font-size: 1.7rem;
        color: var(--text-color);
    }   



    /* Cards */


    /*Pagination */
    .swiper-pagination {
        position: static !important;
        padding-top: 20px;
    }

    .swiper-pagination-bullet {
        background-color: #33e000 !important;
        height: 15px !important;
        width: 15px !important;
        border-radius: 100%;
        opacity: 1;
    }
    
    .swiper-pagination-bullet-active {
        width: 25px !important;
        border-radius: 7px !important;
        background-color: #fffc00 !important;
    }



    /* Red Pill */
    .button-redpill {
        width: 20%;
    }
    

    /* Blue Pill */
    .button-bluepill {
        width: 20%;
    }


    /* Small Screen Projects Section */


    /* Small Screen Services Section */
    .services {
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--bg-darker);
    }

    .services h2 {
        font-size: 3rem;
        font-weight: 300;
        margin-top: .5rem;
        margin-bottom: .5rem;
    }

    .services-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        background: var(--bg-darker);
        padding: 1rem;
        margin-top: 1rem;
        margin-bottom: 1rem;
        gap: 1rem;
    }

    .services-card {
        display: block;
        background: var(--bg-darkest);
        border: .05rem solid transparent;
        border-radius: 2.5rem;
        transition: .3s ease;
        width: 85%;
        padding-left: 1rem;
        padding-right: 1rem;
        margin-top: 1rem;
        margin-bottom: 1rem;
    }

    .service-container .services-card {
        align-content: center;
        background: var(--primary-color2);
        padding: 1rem 1rem 1rem;
        border-radius: 2rem;
        text-align: center;
        border: .05rem solid var(--primary-color2);
        transition: .3s ease;
        overflow: auto;
    }

    .services-container .services-card:hover {
        border-color: var(--primary-color2);
        box-shadow: 0 0 2rem var(--primary-color2);
        transform: scale(1.1);
    }

    .services-card i {
        font-size: 3rem;
        color: var(--item-color);
        margin-top: 1rem;
    }

    .services-card p {
        color: var(--text-color);
        font-size: 1.5rem;
    }


    /* Small Screen Contact Section */
    .contact {
        display: flex;
        background-color: var(--fourth-bg-color);
        justify-content: center;
        align-items: center;
    }

    .contact-content {
        font-size: 1.5rem;
        text-align: center;
        padding: 1rem 1rem 1rem;
        width: 100%;
    }


    /* Contact Form Container */
    .contactform-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: var(--bg-darkest);
        padding: 1rem;
        margin-top: 1rem;
        margin-bottom: 1rem;
        gap: 1rem;
    }


    /* Contact Form */
    .contact-form {
        max-width: 100%;
        text-align: center;
        margin-top: 1rem;
        margin-bottom: 1rem;
    }

    /* Contact Info Container */
    .contact-container {
        border: var(--var-color) .1rem solid;
        text-align: center;
        margin-top: 1rem;
        margin-bottom: 1rem;
    }


    /* Client Info Container - All Sections: Info, Service Type, Message, Send */
    .clientinfo-container {
        display: flex;
        flex-direction: column;
        align-items: center; /* Center all children horizontally */
        width: 100%;
        height: auto;
    }

    /* Client Info Label */
    .clientinfo-container .contact-label {
        color: var(--var-color);
        font-size: 2.8rem;
        text-align: center;
        margin-top: 1rem;
        margin-bottom: 1rem;
    }

    /* Business/Personal Info Toggle Switch */
    .toggle-switch {
        display: flex;
        gap: 10px;
        justify-content: center;
        margin-top: 1rem;
        margin-bottom: 1rem;
    }

    .toggle-radio {
        display: none;
    }

    .toggle-label {
        background-color: var(--bg-darker);
        border-radius: 20px;
        color: var(--secondary-color);
        cursor: pointer;
        font-size: 1.8rem;
        padding: 5px 15px;
        margin: 0 5px; /* Margin to space out the labels */
        transition: background-color 0.3s;
    }

    .toggle-label:hover {
        background-color: var(--bg-darker);
        box-shadow: var(--primary-color) 0 0 20px;
    }

    .toggle-radio:checked + .toggle-label {
        color: var(--item-color);
        background-color: var(--bg-dark);
        box-shadow: var(--primary-color) 0 0 20px;
    }




    /* Client Information Data Container - Large Box  */
    .contact-container .input-box {
        display: grid;
        grid-template-rows: auto;
        justify-content: center;
        align-items: center;
        width: 80%;
        background: var(--bg-dark);
        border: 2px solid var(--bg-darkest);  /* Dark border by default */
        border-radius: 5px;
        transition: border-color 0.3s ease, height 0.3s ease, box-shadow 0.3s ease;
    }

    .contact-container .input-box:hover,
    .contact-container .input-box:focus {
        border-color: var(--var-color); /* Pink border on hover or focus */
        box-shadow: 0 0 20px 10px var(--var-color); /* Pink box shadow */
    }



    /* Date Input Fields - Data Entry Boxes */
    .input-box {
        grid-column: 1;
        align-content: center;
        width: 100%;
        opacity: 1;
        overflow: hidden;
        margin-top: 1rem;
        margin-bottom: 1rem;
        transition: linear 0.3s ease;
    }

    .input-box input {
        background-color: var(--bg-darker); /* Dark grey placeholder background */
        color: var(--text-color);
        font-size: 1.4rem;
        padding: 10px;
        border: 1.5px solid var(--bg-darkest);
        border-radius: 5px;
        width: 80%;
        height: 2rem;
        transition: border-color 0.3s ease, color 0.3s ease, font-size 0.3s ease;
    }

    .input-box input::placeholder {
        color: var(--item-color); /* Blue placeholder text */
    }

    .input-box input:focus {
        border: var(--primary-color) 1.5px solid; /* Yellow border on focus */
        caret-color: var(--primary-color);
        color: var(--primary-color);
        font-size: 1.2em; /* Increase text size on focus */
    }

    .input-box input:hover {
        color: var(--primary-color);
        border: 1.5px solid var(--primary-color); /* Yellow border on hover**/
    }

    .input-box input:hover .active {
        border: var(--secondary-color);
    }




    /* Business/Personal Info Input Toggles */
    .personal-info, .company-info {
        transition: solid 0.3s ease, transform 0.3s ease;
    }

    .company-info {
        opacity: 0;
        transform: translateY(-20px);
    }

    #personal:checked ~ .input-box .personal-info {
        opacity: 1;
        transform: translateY(0);
    }

    #personal:checked ~ .input-box .company-info {
        opacity: 0;
        transform: translateY(-20px);
    }

    #business:checked ~ .input-box .personal-info {
        opacity: 0;
        transform: translateY(20px);
    }

    #business:checked ~ .input-box .company-info {
        opacity: 1;
        transform: translateY(0);
    }


    /* Contact Form - Services Checkboxes */
    #serviceTypes input[type="checkbox"] {
        transform: scale(1.5); /* Increase the size of the checkbox */
        accent-color: var(--primary-color); /* Setting the initial color */
    }

    #serviceTypes {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 0; /* Adjusts spacing between labels */
    }

    #serviceTypes label {
        display: flex;
        align-items: center;
        color: var(--var-color);
        gap: 10px;
        font-size: 1.8rem; /* Adjust text size if needed */
    }




    /* Contact Form TextBox */
    .message-container textarea {
        background-color: var(--bg-dark);
        border: 2px solid var(--bg-darkest);
        border-radius: 5px;
        color: var(--primary-color);
        font-size: 1.5rem;
        height: 10rem;
        width: 80%;
        resize: vertical;
        transition: border-color 0.3s ease, height 0.3s ease, box-shadow 0.3s ease;
    }

    .message-container textarea .input {
        caret-color: var(--primary-color);
        color: var(--primary-color);
        font-size: 1.2rem;
    }

    .message-container textarea:hover,
    .message-container textarea:focus {
        border-color: var(--var-color); /* Pink border on hover or focus */
        box-shadow: 0 0 20px 10px var(--var-color);
    }

    .message-container textarea .active {
        border: var(--item-color) 2px solid;
        font-family: teko;
    }


    /* Data Input Messages For User ie Place Holders */
    .contact-container input::placeholder,
    .contact-container textarea::placeholder {
        color: var(--var-color);
        background-color: transparent;
        font-size: 1.5rem;
        font-family: teko;
        text-align: center;
    }

    


    /* Alert Container */
    .alert-container {
        display: none;
        font-size: 2.5rem;
        justify-content: center;
        align-items: center;
        width: 100%;
        margin-top: 1rem;
        margin-bottom: 1rem;
}

    /* Alert Messages */
    .message-sent .hidden
    .message-failed .hidden {
        display: none;
        font-size: 2.5rem;
}

    .alert-displayed {
        display: none;
        background: var(--var-color);
        color: var(--bg-darkest);
        padding: 10px;
        border-radius: 5px;
        text-align: center;
        animation: fadeIn 0.5s;
}

    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
}

    /* Contact Form Send Message Button */
    /* Button Container (For adjusting small screen button design) */


    /* Contact Form Send It Button */
    .button-pinkpill {
        font-family: teko;
        width: 30%;
}


    /* Footer Section */
    .footer {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 1rem 1% 1rem;
    }

    .footer .social-container {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 1rem;
    }

    /* Small Screen Social Media Buttons */
}






/*** Medium Screen ***/
@media (min-width: 479px) and (max-width: 576px) {
    html {
        font-size: 15px;
    }

    .header {
        display: flex;
        justify-content: space-between;
    }

    .logo {
        font-size: 2rem;
        align-content: center;
    }

    .header .logo2 {
        font-size: 2rem;
        align-content: center;
    }

    /* Search Icon */
    .search-icon {
        font-size: 2.5rem;
        color: var(--secondary-color);
        display: none;
    }

    /* Menu Icon */
    #menu-icon {
        display: none;
        font-size: 2.5rem;
        color: var(--secondary-color);
    }


    .home-img {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .home-img img {
        width: 100vw;  /* Adjust this value to get the desired size on larger screens */
    }


    /* Orange Pill Button */
    .btn-container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 16vh;
        width: 100%;
    }

    .btn-orangepill {
        display: flex;
        width: 40%;
    }

    .btn-orangepill i {
        display: flex;
        justify-content: center;
    }

    
}


/*** Small Screen ***/
@media (min-width: 577px) and (max-width: 767px) {
    html {
        font-size: 15px;
    }

    .header {
        padding: 1rem;
    }


    /* Search Icon */
    .search-icon {
        font-size: 2.5rem;
        color: var(--secondary-color);
        display: none;
    }

    /* Menu Icon */
    #menu-icon {
        display: none;
        font-size: 2.5rem;
        color: var(--secondary-color);
    }


    /* Image */
    .home-img {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .home-img img {
        width: 100vw;  /* Adjust this value to get the desired size on larger screens */
    }


    /* Orange Pill Button */
    .btn-container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 16vh;
        width: 100%;
    }

    .btn-orangepill {
        display: flex;
        width: 40%;
    }

    .btn-orangepill i {
        display: flex;
        justify-content: center;
    }

    /* Medium Screen Home Section */


    /* Medium Screen About Section */


    /* Medium Screen Projects Section */


    /* Medium Screen Services Section */


    /* Medium Screen Contact Section */
}


/*** Medium ***/
@media (min-width: 768px) and (max-width: 991px) {
    html {
        font-size: 16px;
    }

    header h1 {
        font-size: 2rem;
    }

    /* Search Icon */
    .search-icon {
        display: none;
        font-size: 2.5rem;
        color: var(--secondary-color);
    }

    /* Menu Icon */
    .menu-icon {
        display: none;
    }


    .home-img img {
        width: 50vw;  /* Adjust this value to get the desired size on larger screens */
    }


    /* Small Screen Home Section */


    /* Small Screen About Section */


    /* Small Screen Projects Section */


    /* Small Screen Services Section */


    /* Small Screen Contact Section */
}


/*** Extra Large Screen ***/
@media (min-width: 992px) and (max-width: 1198px) {
    html {
        font-size: 18px;
    }

    header {
        padding: 1.5rem;
    }

    .nav-item {
        margin-right: 1.5rem;
    }


    /* Search Icon */
    .search-icon {
        display: none;
        font-size: 2.5rem;
        color: var(--secondary-color);
    }

    /* Menu Icon */
    .menu-icon {
        display: none;
    }

    .home {
        height: 100vh;
    }


    /* Image */
    .home-img img {
        width: 50vw;  /* Adjust this value to get the desired size on larger screens */
    }

    .about {
        justify-items: center;
        justify-content: center;
        background: var(--bg-darker);
        width: 100%;
        height: 1200vh;
    }

    .about-content {
        justify-content: center;
        text-align: center;
        height: 125vh;
    }

    .about h2 {
        font-size: 3.2rem;
    }

    .about h3 {
        font-size: 2.3rem;
        color: var(--text-color)
    }


    /* Cards */
    .main-content {
        position: relative;
        justify-content: center !important;
    }

    #cards {
        max-width: 1070px;
        padding: 0 2rem;
        margin: 2rem 0;
        height: 75vh;
        justify-content: center !important;
    }

    .swiper-pagination {
        position: static;
        text-align: center;
        transition: .3s opacity;
        transform: translate3d(0,0,0);
    }


}

/*** Extra Large Screen ***/
@media (min-width: 1199px) and (max-width: 1600px) {
    .header {
        width: 100%;
    }

    /* Search Icon */
    .search-icon {
        font-size: 2.5rem;
        color: var(--secondary-color);
    }

    /* Menu Icon */
    .menu-icon {
        display: none;
        font-size: 2.5rem;
        color: var(--secondary-color);
    }


    /*Home Section */
    .home {
        height: 150vh;
    }

    .home-img img {
        width: 40vw;  /* Adjust this value to get the desired size on larger screens */
    }


    /* About Section */
    .about {
        justify-items: center;
        justify-content: center;
        background: var(--bg-darker);
        width: 100%;
        height: 150vh;
    }

    .about-content {
        justify-items: center;
        justify-content: center;
        height: 120vh;
    }

    .about h2 {
        font-size: 3rem;
        margin: 0;
    }

    .about h3 {
        font-size: 1.5rem;
        color: var(--text-color);
        margin: 0;
    }


    /* Cards */
    .main-content {
        position: relative;
        justify-content: center;
    }

    #cards {
        max-width: 1070px;
        padding: 0 2rem;
        margin: 2rem 0;
        min-height: 60vh;
        justify-content: center !important;
    }

    /* Swiper Pagination */
    .swiper-pagination {
        padding-top: 40px !important;
    }

    .swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
        bottom: -3rem !important;
    }

    .swiper-pagination-bullet {
        background-color: #33e000 !important;
        height: 15px !important;
        width: 15px !important;
        border-radius: 100%;
        opacity: 1;
    }
    
    .swiper-pagination-bullet-active {
        width: 25px !important;
        border-radius: 7px !important;
        background-color: #fffc00 !important;
    }
    


    /* Contact */
    .contact {
        background-color: var(--fourth-bg-color);
        justify-content: center;
        align-items: center;
        width: 70%;
    }

    /* WebForm */
}


@media (min-width: 1600px) and (max-width: 6500px) {
   
}