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

 body {
     font-family: 'Hero Light Regular';
     margin: 0;
     transition: background-color 0.4s, color 0.4s;
 }

 /* Global theme */
 body.dark-theme {
     color: #fff;
     background-color: #000;
     /* background: linear-gradient(black, rgb(51, 22, 63), rgb(83, 0, 179));
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center; */
 }


 .header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 30px 0px;
 }

 .nav {
     display: flex;
     gap: 20px;
 }

 /* nav-menu popups */
 .nav-item,
 .profile-item {
     position: relative;
 }

 .nav-trigger,
 .profile-trigger {
     background: none;
     border: none;
     outline: none;
     cursor: pointer;
     display: flex;
     align-items: center;
     gap: 6px;
 }

 .nav-popup {
     display: none;
     position: absolute;
     top: 100%;
     left: 0;

     background-color: white;
     min-width: 220px;
     padding: 12px;
     border-radius: 8px;
     box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);

     flex-direction: column;
     gap: 10px;
     z-index: 100;
 }

 .profile-popup {
     display: none;
     position: absolute;
     top: 100%;
     right: 0;

     background-color: white;
     min-width: 200px;
     padding: 12px;
     border-radius: 8px;
     box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);

     flex-direction: column;
     gap: 10px;
     z-index: 100;
 }

 .nav-popup a,
 .profile-popup a {
     text-decoration: none;
     color: #333;
 }

 .nav-popup a:hover,
 .profile-popup a:hover {
     text-decoration: none;
     color: #9747FF;
 }

 #internships {
     border-radius: 50%;
 }


 .profile span img {
     filter: invert(1);
 }

 .searchbar {
     background-color: #f1f1f1;
     border-radius: 30px;
     padding: 10px 20px;
     display: flex;
     align-items: center;
     /* justify-content: center; */
     gap: 10px;
 }

 .searchbar input,
 .footer-container input {
     border: none;
     outline: none;
     background-color: transparent;
 }

 .searchbar img {
     width: 16px;
     height: 16px;
 }

 .nav-extras {
     display: flex;
     align-items: center;
     gap: 20px;
     cursor: pointer;
 }

 .profile-icon {
     width: 28px;
     filter: invert(1);
 }


 .icon {
     width: 24px;
     height: 24px;
 }

 .profile {
     background-color: rgb(63, 7, 7);
     border-radius: 20px;
     padding: 2px 5px;
     display: flex;
     gap: 5px;
     justify-content: center;

 }

 .profile img {
     border-radius: 50%;
 }

 .notification {
     position: relative;
     padding: 0px !important;
 }


 #notification-dot,
 #home-dot {
     background-color: red;
     border-radius: 50%;
     position: absolute;
     font-size: 10px;
     color: white;
 }

 #notification-dot {
     right: 10%;
     padding: 5px;
 }

 #home-dot {
     top: 5px;
     right: 60%;
     padding: 0px 5px;
 }

 /* Mobile navigation */
 .hamburger {
     display: none;
 }

 .mobile-menu {
     display: contents;
 }

 /* navigation ends */


 .navLink,
 .navLink:active {
     text-decoration: none;
     color: inherit;
 }

 .offer-div {
     font-size: 18px;
     text-align: center;
     background-color: #f1f1f1;
     color: black;
     padding: 20px 0px 10px 0px;
 }

 .row {
     margin-bottom: 30px;
 }

 .container1 {
     border-radius: 30px;
     background-color: #f1f1f1;
     color: #000;
     padding: 15px;
 }

 .container2 {
     border-radius: 30px;
     border: 2px solid #f1f1f1;
     padding: 15px;
 }

 .container1 .menu div {
     padding-bottom: 40px;
     cursor: pointer;
 }

 .theme {
     display: flex;
     gap: 15px;
     flex-direction: column;
     padding: 3px;
     background: linear-gradient(black, rgb(110, 110, 110), white);
     border-radius: 30px;
 }

 .theme-wrapper {
     display: flex;
     justify-content: end;
     margin-top: -100px;
     padding: 20px;
 }

 .theme img {
     width: 26px;
     border-radius: 50%;
     transform: scale(1) rotate(0deg);
     opacity: 0.6;
     transition: transform 0.4s ease, opacity 0.4s ease, filter 0.4s ease;
 }

 .theme.light-mode #sun {
     transform: scale(1.15) rotate(360deg);
     opacity: 1;
     filter: drop-shadow(0 0 2px white);
 }

 body.dark-theme .theme #moon {
     transform: scale(1.15) rotate(-360deg);
     opacity: 1;
     filter: drop-shadow(0 0 2px white);
 }

 body.dark-theme .header.nav a,
 body.dark-theme .header button,
 body.dark-theme .total-internships {
     color: white;
 }

 body.dark-theme .header .nav img,
 body.dark-theme .header .nav-extras img,
 body.dark-theme .container2 img {
     filter: invert(1) hue-rotate(180deg);
 }

 body.dark-theme .jobtype span {
     color: black;
 }


 body.dark-theme span img {
     border-radius: 50%;
 }

 #logo-white {
     display: none;
 }

 body.dark-theme #logo-white {
     display: block;
     width: 155px;
 }

 body.dark-theme .ranges span {
     border: 1px solid white;
 }

 body.dark-theme #logo-black {
     display: none;
 }


 .filter img {
     width: 24px;
 }

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

 .ranges span {
     border: 1px solid black;
     border-radius: 30px;
     padding: 10px;
     cursor: pointer;
 }

 .filter-menu .input {
     display: flex;
     flex-direction: column;
     margin-bottom: 20px;
 }

 .filter-menu .input label {
     margin-bottom: 10px;
 }

 .range-input {
     padding: 0 !important;
 }

 .filter-menu .input input,
 .filter-menu .input select {
     border-radius: 20px;
     border: 1px solid #c4c4c4;
     outline: none;
     padding: 10px;
     color: #696969;
 }

 .filter-menu .input .range-input,
 .button div button,
 .footer-container button {
     border: 1px solid #c4c4c4;
     border-radius: 20px;
     padding: 5px 20px;
 }

 input[type="radio"] {
     accent-color: #9747FF;
 }

 /* background-color: white; */

 .total-internships {
     color: black;
 }

 .container3 .cards {
     height: 130vh;
     overflow-y: auto;
     margin: 20px 0;
 }

 .card-container {
     padding: 20px 30px;
     margin: 20px 0;
     border: 2px solid #f1f1f1;
     border-radius: 20px;
 }

 .c-header {
     display: flex;
     justify-content: space-between;
     margin-bottom: 10px;
 }

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

 .c-name div p {
     color: #828282;
 }

 .company {
     width: 164px;
 }

 .card-details,
 .card-details-data {
     display: flex;
     margin: 15px 0 0 0;
 }

 .card-details {
     color: #828282;
     gap: 20px;
 }

 .card-details-data {
     font-size: 14px;
     gap: 50px;
 }

 .remain-time,
 .jobtype {
     padding: 5px 15px;
     border-radius: 30px;
 }

 .remain-time {
     background-color: #DBFFEE;
     color: #2FAA6F;
 }

 .jobtype {
     background-color: #f1f1f1;
 }

 .card-tags {
     display: flex;
     gap: 20px;
     font-size: 14px;
 }

 .card-button button {
     border: 1px solid #c4c4c4;
     border-radius: 20px;
     padding: 5px 20px;
 }

 .footer {
     padding: 30px 30px 10px 30px;
     background-color: #9747FF;
     color: white;
 }

 .footer .arrow {
     filter: invert(1);
     rotate: 180deg;
 }

 .footer-container {
     display: flex;
     justify-content: center;
     gap: 50px;
     padding-top: 20px;
 }

 .footer-container input {
     color: #f1f1f1;
 }

 .footer-container input::placeholder {
     /* opacity: 0.8; */
     font-size: 14px;
     color: white;
 }

 .footer-container a,
 .footer-container p {
     font-size: 14px;
     text-decoration: none;
     color: white;
     margin-bottom: 0px;

 }

 .footer-container .subscribe {
     border: 1px solid #c4c4c4;
     padding: 10px;
     border-radius: 30px;
     display: flex;
 }

 .footer-container .footer-div {
     display: flex;
     flex-direction: column;
     gap: 20px;
 }

 .footer-container .social-media {
     display: flex;
     flex-direction: row;
     gap: 10px;
     padding-top: 10px;
 }

 .color-btn {
     background-color: #9747FF;
     color: white;
 }

 .white-btn {
     background-color: white;
 }

 .color-btn:hover {
     background-color: white;
     color: #9747FF;
     border: 1px solid #9747FF;
     transition: 0.3s;
 }

 .white-btn:hover {
     background-color: #9747FF;
     color: white;
     transition: 0.3S;
 }


 .white-btn:active,
 .color-btn:active,
 .theme:active {
     scale: 0.95;
 }

 .active {
     color: black;
     background-color: #c4c4c4;
 }