diff --git a/CodeClip b/CodeClip
new file mode 160000
index 00000000..4aced003
--- /dev/null
+++ b/CodeClip
@@ -0,0 +1 @@
+Subproject commit 4aced00397aac773ae09bf5b58607fc9d91330c4
diff --git a/index.html b/index.html
index b667b341..a312c72d 100644
--- a/index.html
+++ b/index.html
@@ -95,44 +95,60 @@ Loading
-
+
+
+
+
diff --git a/styles/main.css b/styles/main.css
index cfbf1794..74bb95cf 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -13,1154 +13,40 @@ html {
/* =================== Navbar Styles Start Here ================== */
-.navbar {
- background-color: #ffffff;
+.custom-navbar {
+ background: linear-gradient(90deg, #0077ff 0%, #00c6ff 100%);
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+ transition: 0.3s ease, box-shadow 0.3s ease;
}
-.navbar-brand {
- font-size: 2.1rem;
- font-weight: 900;
- color: #2563eb;
+.custom-navbar .navbar-brand {
+ color: #ffffff !important;
+ font-size: 1.6rem;
+ letter-spacing: 0.5px;
+ display: flex;
+ align-items: center;
}
-.navbar-brand,.nav-link:hover { /*========added for issue #605========*/
- color: #2563eb;
- nav {
- position: fixed;
- top: 0;
- width: 100%;
- z-index: 1000;
- background-color: #ffffff;
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
- transition: background-color 0.3s ease, box-shadow 0.3s ease;
- }
-
- .navbar .container .navbar-nav {
- width: 80%;
- display: flex;
- flex-direction: row;
- justify-content: flex-end;
- align-items: center;
- gap: 1rem;
- }
- .nav .container,
- .navbar {
- display: flex;
- align-items: center;
- justify-content: space-between;
- }
-
- .container .navbar-brand {
- font-size: 2.1rem;
- font-weight: 900;
- color: #2563eb;
- text-shadow: 2px 2px 5px rgba(37, 99, 235, 0.5),
- 2px 2px 8px rgba(0, 0, 0, 0.3), 1px 1px 3px rgba(255, 255, 255, 0.6);
- display: inline-block;
- transform: scale(0.9);
- animation: scaleUp 1s ease forwards;
- transition: transform 0.3s ease, color 0.3s ease, text-shadow 0.3s ease;
- }
-
- /* Hover effect for desktop */
- .container .navbar-brand:hover {
- transform: scale(1.1);
- color: #1d4ed8;
- text-shadow: 3px 3px 6px rgba(37, 99, 235, 0.7),
- 3px 3px 10px rgba(0, 0, 0, 0.4), 1px 1px 4px rgba(255, 255, 255, 0.7);
- }
-
- @keyframes scaleUp {
- to {
- transform: scale(1);
- }
- }
-
- .navbar-brand span {
- color: #1e2c44;
- }
-
- /* added gap in nav links */
- .navbar-nav {
- display: flex;
- gap: 1rem;
- }
- /* added shadow box and hover effact in nav-links */
- .nav-item a {
- color: #1e2c44;
- /* adding box hover effact */
- text-decoration: none;
- font-weight: 700;
- font-size: 1rem;
- padding: 0.75rem 0.75rem;
- border-radius: 12px;
- box-shadow: 0 4px 10px rgba(40, 167, 69, 0.25);
- transition: all 0.3s ease-in-out;
- }
- .nav-item a:hover {
- background: linear-gradient(90deg, #1e2c44 40%, #2563eb 100%);
- border-color: #2563eb;
- transform: translateY(-2px) scale(1.02);
- box-shadow: 0 8px 20px rgba(33, 136, 56, 0.4);
- color: white;
- font-size: 1.1rem;
-
- .nav-item a {
- color: #1e2c44;
- text-decoration: none;
- font-weight: 700;
- font-size: 1rem;
- padding: 0.75rem 0.75rem;
- position: relative;
- }
-
- .nav-item a:hover {
- color: #2563eb;
- animation: underline-slide 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
- }
-
- .nav-item a:hover::after {
- content: "";
- position: absolute;
- left: 0;
- bottom: 6px;
- width: 100%;
- height: 2px;
- background: linear-gradient(90deg, #2563eb 60%, #1e2c44 100%);
- border-radius: 2px;
- animation: underline-slide 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
- }
-
- @keyframes underline-slide {
- from {
- width: 0;
- opacity: 0.5;
- }
- to {
- width: 100%;
- opacity: 1;
- }
- }
-
- /* Hamburger menu hidden by default */
- .nav-toggle-label {
- display: none;
- }
-
- /* ================== Mobile Styles ================== */
- @media (max-width: 768px) {
- /* Navbar links hidden initially */
- .navbar .container .navbar-nav {
- display: none;
- position: fixed;
- top: 0;
- left: 0;
- width: 100%;
- height: 100vh;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- background-color: #ffffff;
- z-index: 999;
- }
- .navbar .container .navbar-brand {
- margin-left: 1rem;
- }
-
- /* Show menu when checkbox is checked */
- #nav-toggle:checked ~ .navbar-nav {
- display: flex;
- }
-
- /* Hamburger toggle visible on mobile */
- .nav-toggle-label {
- display: block;
- cursor: pointer;
- font-size: 1.8rem;
- color: #2563eb;
- z-index: 1000;
- }
-
- /* Close icon hidden initially */
- .close-icon {
- display: none;
- }
-
- /* Toggle hamburger and close icons */
- #nav-toggle:checked + .nav-toggle-label .menu-icon {
- display: none;
- }
- #nav-toggle:checked + .nav-toggle-label .close-icon {
- display: inline-block;
- }
- }
- /* ================== Navbar Styles End Here ================== */
-
- /* ================== Hero Styles Start Here ================== */
- .heroSection {
- margin-top: 56px;
- background-color: #f8fafc;
- padding: 2rem 0;
- }
-
- .heroSection-Container {
- display: flex;
- justify-content: center;
- align-items: center;
- }
-
- .gssoc-logo {
- height: 14px;
- width: 17px;
- }
-
- .gssocContainer {
- display: flex;
- align-items: center;
- max-width: 150px;
- justify-content: center;
- border-radius: 36px;
- padding: 3px 0;
- color: white;
- background: #e0ecfa;
- margin: 1rem 0;
- }
-
- .gssocContainer p {
- margin-bottom: 0;
- display: inline-block;
- font-size: 12px;
- color: #81a6d3;
- }
-
- .shinning-effect {
- mask: linear-gradient(-60deg, #000 30%, #0005, #000 70%) right/450% 100%;
- animation: shiningEff 2.5s infinite;
- }
-
- @keyframes shiningEff {
- 100% {
- mask-position: left;
- }
- }
-
- .heroDescription {
- margin-bottom: 1.2rem;
- }
-
- .heroSection-Left h1 {
- color: black;
- font-size: 58px;
- font-weight: 900;
- margin: 1rem 0;
- }
-
- .blueCol {
- color: #2563eb;
- }
-
- .heroSection-Left p {
- color: #7e7f88;
- text-align: justify;
- font-size: 14px;
- hyphens: auto;
- }
-
- .ctaBtn-Container {
- display: flex;
- align-items: center;
- justify-content: start;
- gap: 10px;
- }
-
- .heroSectionBtn {
- text-align: center;
- padding: 7px 60px !important;
- border-radius: 40px !important;
- background: #2563eb !important;
- color: white !important;
-
- transition: all 0.2s ease-in-out;
- }
-
- .heroSectionBtn:hover {
- box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
- background-color: #0b5ed7;
- }
-
- .heroSectionBtn i {
- font-size: 14px;
- margin-right: 5px;
-
- border: 1px solid #2563eb !important;
- transition: all 0.3s ease-in-out;
- font-weight: 600;
- cursor: pointer;
- }
-
- .heroSectionBtn:hover {
- background: #ffffff !important;
- box-shadow: 0 4px 12px rgba(11, 94, 215, 0.3);
- transform: translateY(-2px);
- color: #2563eb !important;
- }
-
- .heroSectionBtnOutline {
- text-align: center;
- padding: 7px 60px !important;
- border-radius: 40px !important;
- background: white !important;
- color: #2563eb !important;
- border: 1px solid #2563eb !important;
- transition: all 0.3s ease-in-out;
- font-weight: 600;
- cursor: pointer;
- }
-
- .heroSectionBtnOutline:hover {
- background: #2563eb !important;
- color: white !important;
- box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
- transform: translateY(-2px);
- }
- .heroSectionBtn i,
- .heroSectionBtnOutline i {
- font-size: 14px;
- margin-right: 5px;
- transition: transform 0.2s ease-in-out;
- }
-
- .heroSectionBtn:hover i,
- .heroSectionBtnOutline:hover i {
- transform: translateX(3px);
- }
-
- /* ================== Hero Styles End Here ================== */
-
- /* ================== Challenge Styles Start Here ================== */
- /**#challengeSection {
- padding: 2rem 0;
- }
-
- .challengeContainer .card {
- box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
- border: none;
- transition: all 0.2s ease-in-out;
- border-radius: 15px;
- margin: 15px 0;
- }
-
- .challengeContainer .card:hover {
- box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
- }
-
- .challengeContainer .card:hover {
- transform: translateY(-2px);
- }
- .challengeContainer .card {
- box-shadow: rgba(19, 117, 216, 0.2) 0px 8px 24px;
- border: none;
- transition: all 0.2s ease-in-out;
- border-radius: 15px;
- margin: 15px 0;
- transition: transform 0.2s ease-in-out;
- }
-
- .challengeContainer .card:hover {
- transform: translateY(-3px) scale(1);
- box-shadow: 0 0 18px rgba(37, 99, 235, 0.45);
- }
-
- .card-TopContainer {
- display: flex;
- align-items: center;
- justify-content: space-between;
- }
-
- .card-Header {
- font-size: 20px;
- font-weight: 600;
- margin-bottom: 0;
- }
-
- .card-Level {
- margin-bottom: 0;
- font-size: 10px;
- padding: 4px 20px;
- border-radius: 17px;
- background: #d5edda;
- color: #1a7071;
- font-weight: 700;
- /*Added margin to improve UI layout*/
- /** margin-right: 7px;
-
- margin-bottom: 0;
- font-size: 12px;
- padding: 4px 25px;
- border-radius: 17px;
- background: #d5edda;
- color: #1a7071;
- font-weight: 700;
- }
-
- .medium-Col {
- background-color: #fff3cd;
- color: #a88825;
- }
-
- .hard-Col {
- background-color: #f8d7da;
- color: #7d1c1c;
- }
-
- .card-Participate {
- font-size: 13px;
- color: #8b8b8b;
- margin-bottom: 8px;
- margin-top: 1px;
- opacity: 0.9;
- }
-
- .card-Text {
- font-size: 14px;
- opacity: 0.8;
- text-align: justify;
- hyphens: auto;
- }
-
- .card-CTAButton {
- display: flex;
- align-items: center;
- justify-content: end;
- }
-
- .card-Btn {
- text-decoration: none;
- font-size: 13px;
- padding: 8px 36px;
- border-radius: 5px;
- background-color: #2563eb;
- color: white;
- border: none;
- transition: all 0.2s ease-in-out;
- font-weight: 700;
- }
-
- .card-Btn:hover {
- box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
- background-color: #0b5ed7;
-
- box-shadow: #83aafe 0px 3px 8px;
- background-color: #1d4ed8;
- }**/
-
- /* ================== Challenge Styles End Here ================== */
-
- /* ================== Leaderboard Styles Starts Here ================== */
-
- #leaderboardSection {
- padding: 2rem 0;
- background-color: #f8fafc;
- }
-
- .owl-carousel .card {
- border: none;
- background: transparent;
- }
-
- .leaderboard-wrapper {
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- min-height: 100vh;
- background: linear-gradient(135deg, #e0f0ff, #f9f9ff);
- padding: 2rem;
- text-align: center;
- font-family: "Poppins", sans-serif;
- }
-
- /* ===== Heading Section ===== */
- #leaderboardSection h2 {
- font-size: 2.4rem;
- font-weight: normal;
- text-align: center;
- margin-bottom: 0.5rem;
- color: #111827;
- }
-
- #leaderboardSection h2 span {
- color: #2563eb;
- font-weight: 700;
- }
-
- main .secHeader {
- text-align: center;
- font-size: 2rem;
- font-weight: 600;
- }
-
- .secHeader span {
- color: #2563eb;
-
- color: #131212b1;
- }
-
- #leaderboardSection p {
- font-size: 1rem;
- color: #374151;
- max-width: 600px;
- margin: 0 auto 2rem auto;
- line-height: 1.6;
- }
-
- /* ===== Leaderboard Container ===== */
- .leaderboard-list {
- max-width: 650px;
- width: 100%;
- margin: 0 auto;
- display: flex;
- flex-direction: column;
- gap: 1rem;
- background: rgba(255, 255, 255, 0.65);
- backdrop-filter: blur(14px);
- padding: 2rem;
- border-radius: 22px;
- box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
- transition: transform 0.3s ease, box-shadow 0.3s ease;
- }
-
- .leaderboard-list:hover {
- transform: scale(1.01);
- box-shadow: 0 14px 32px rgba(0, 0, 0, 0.18);
- }
-
- .leaderboard-Para {
- text-align: center;
- opacity: 0.8;
- }
-
- .leaderboard-Img {
- width: 100px !important;
- border: 5px solid #e0ecfa;
- border-radius: 100%;
- }
-
- .userName {
- opacity: 0.9;
- font-weight: 700;
- }
-
- .leaderBoard-userContainer {
- display: flex;
- justify-content: center;
- align-items: center;
- }
-
- .leaderBoard-Container {
- text-align: center;
- }
-
- .leaderBoard-Container h5 {
- font-size: 24px;
- margin: 1rem 0;
- }
-
- .leaderboradUser-RankContainer {
- display: flex;
- align-items: center;
- justify-content: space-evenly;
- }
-
- .leaderboradUser-RankContainer p {
- margin-bottom: 0;
- padding: 10px 30px;
- border-radius: 10px;
- background: #0000ff;
- color: white;
- font-weight: 700;
- border: none;
- font-size: 13px;
- }
-
- .rankPosition {
- padding: 10px 40px !important;
- }
-
- .rankPoints {
- background-color: skyblue !important;
- color: darkblue !important;
- transition: all 0.3s ease-in-out;
- cursor: pointer;
- }
-
- .rankPoints:hover {
- background-color: #0000ff !important;
- color: white !important;
- }
-
- .leaderBoard-Container:hover .leaderboard-Img,
- .leaderBoard-Container:hover .rankPoints,
- .leaderBoard-Container:hover .rankPosition {
- mask: linear-gradient(-60deg, #000 30%, #0005, #000 70%) right / 450% 100%;
- -webkit-mask: linear-gradient(-60deg, #000 30%, #0005, #000 70%) right /
- 450% 100%;
- animation: rankList 2.5s infinite;
- -webkit-animation: rankList 2.5s infinite;
- }
-
- @keyframes rankList {
- 100% {
- mask-position: left;
- -webkit-mask-position: left;
- }
-
- color: #131212b1;
- width: 50%;
- font-size: 1.2rem;
- }
-
- /* ===== Rows ===== */
- .leaderboard-row {
- display: flex;
- align-items: center;
- justify-content: space-between;
- background: #fff;
- padding: 1rem 1.5rem;
- border-radius: 15px;
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
- transition: transform 0.25s ease, box-shadow 0.25s ease;
- position: relative;
- overflow: hidden;
- }
-
- .leaderboard-row:hover {
- transform: translateY(-4px) scale(1.02);
- box-shadow: 0 10px 22px rgba(0, 0, 0, 0.14);
- }
-
- /* Gradient glow border effect */
- .leaderboard-row::before {
- content: "";
- position: absolute;
- inset: 0;
- border-radius: 15px;
- padding: 2px;
- background: linear-gradient(90deg, #6a11cb, #2575fc, #6a11cb);
- background-size: 300% 300%;
- -webkit-mask: linear-gradient(#fff 0 0) content-box,
- linear-gradient(#fff 0 0);
- -webkit-mask-composite: destination-out;
- mask-composite: exclude;
- opacity: 0;
- transition: opacity 0.4s ease;
- animation: gradientMove 5s linear infinite;
- z-index: 0;
- }
-
- .leaderboard-row:hover::before {
- opacity: 1;
- }
-
- /* Keep content always above */
- .leaderboard-row * {
- position: relative;
- z-index: 1;
- }
-
- @keyframes gradientMove {
- 0% {
- background-position: 0% 50%;
- }
- 50% {
- background-position: 100% 50%;
- }
- 100% {
- background-position: 0% 50%;
- }
- }
-
- /* ===== Rank Badges ===== */
- .leaderboard-row .rank {
- font-size: 1.4rem;
- font-weight: bold;
- width: 60px;
- text-align: center;
- color: #111827;
- transition: transform 0.3s ease;
- }
-
- .leaderboard-row:hover .rank {
- transform: scale(1.2);
- }
-
- /* ===== Top 3 Special Honors ===== */
- .leaderboard-row.rank-1 {
- background: linear-gradient(135deg, #fff8dc, #fff);
- border: 2px solid #ffd700;
- box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
- }
- .leaderboard-row.rank-1 .rank {
- color: #ffd700;
- text-shadow: 0 0 10px rgba(255, 215, 0, 0.9);
- }
- .leaderboard-row.rank-1 .leaderboard-Img {
- border: 3px solid #ffd700;
- }
-
- .leaderboard-row.rank-2 {
- background: linear-gradient(135deg, #f0f0f0, #fff);
- border: 2px solid #c0c0c0;
- box-shadow: 0 0 20px rgba(192, 192, 192, 0.5);
- }
- .leaderboard-row.rank-2 .rank {
- color: #c0c0c0;
- text-shadow: 0 0 10px rgba(192, 192, 192, 0.9);
- }
- .leaderboard-row.rank-2 .leaderboard-Img {
- border: 3px solid #c0c0c0;
- }
-
- .leaderboard-row.rank-3 {
- background: linear-gradient(135deg, #fff5f0, #fff);
- border: 2px solid #cd7f32;
- box-shadow: 0 0 20px rgba(205, 127, 50, 0.5);
- }
- .leaderboard-row.rank-3 .rank {
- color: #cd7f32;
- text-shadow: 0 0 10px rgba(205, 127, 50, 0.9);
- }
- .leaderboard-row.rank-3 .leaderboard-Img {
- border: 3px solid #cd7f32;
- }
-
- /* ===== Avatar ===== */
- .leaderboard-row .leaderboard-Img {
- width: 65px;
- height: 65px;
- margin: 0 15px;
- border-radius: 50%;
- object-fit: cover;
- border: 3px solid transparent;
- background: linear-gradient(white, white) padding-box,
- linear-gradient(45deg, #6a11cb, #2575fc) border-box;
- transition: transform 0.3s ease, box-shadow 0.3s ease;
- }
-
- .leaderboard-row:hover .leaderboard-Img {
- transform: rotate(5deg) scale(1.12);
- box-shadow: 0 0 12px rgba(37, 117, 252, 0.4);
- }
-
- /* ===== Username ===== */
- .leaderboard-row .userName {
- flex: 1;
- font-size: 1.15rem;
- font-weight: 600;
- color: #1f2937;
- transition: color 0.3s ease;
- }
-
- .leaderboard-row:hover .userName {
- color: #2563eb;
- }
-
- /* ===== Points ===== */
- .leaderboard-row .points {
- font-weight: bold;
- font-size: 1.1rem;
- color: #2563eb;
- transition: transform 0.3s ease, color 0.3s ease, text-shadow 0.3s ease;
- }
-
- .leaderboard-row:hover .points {
- transform: scale(1.12);
- color: #1d4ed8;
- text-shadow: 0 0 6px rgba(29, 78, 216, 0.4);
- }
-
- /* ================== Leaderboard Styles End Here ================== */
-
- /* ================== About Styles Start Here ================== */
- #aboutSection {
- padding: 2rem 0;
-
- padding: 4rem 1rem;
- background: linear-gradient(135deg, #f9fafb, #f3f4f6);
- }
-
- /* Heading */
- #aboutSection .secHeader {
- font-size: 2.2rem;
- margin-bottom: 1.5rem;
- font-weight: 700;
- text-align: center;
- line-height: 1.3;
- }
-
- #aboutSection .secHeader span {
- color: #2563eb; /* Blue for "About" */
- font-weight: 700; /* Bold */
- }
-
- #aboutSection .secHeader {
- color: #111827; /* Black for "CodeClip" */
- }
-
- /* Container */
- .aboutContainer {
- display: flex;
- justify-content: center;
- align-items: center;
- }
-
- .aboutContainer .col-10 {
- opacity: 0.8;
- text-align: center;
-
- opacity: 0.9;
- text-align: center;
- max-width: 850px;
- line-height: 1.7;
- font-size: 1.05rem;
- color: #374151;
- margin: 0 auto;
- }
-
- /* Paragraphs */
- .aboutContainer .col-10 p {
- margin-bottom: 1.8rem;
- }
-
- .aboutContainer .col-10 strong {
- color: #111827;
- font-weight: 700;
- }
-
- /* CTA Container */
- .ctaBtn {
- text-align: center;
- margin-top: 1.5rem;
- }
-
- /* CTA Button */
- .aboutCTA-Btn {
- text-decoration: none;
- font-weight: 700;
- margin-top: 1.5rem;
-
- box-shadow: 0 0 18px 0 rgba(19, 117, 216, 0.25);
-
- position: relative;
-
- display: inline-block;
- padding: 0.85rem 2rem;
- font-size: 1rem;
- font-weight: 600;
- color: #1d4ed8;
- background-color: #fff;
- border-radius: 30px;
- border: 1px solid #2563eb;
- cursor: pointer;
- text-decoration: none;
-
- box-shadow: 0 4px 10px rgba(40, 167, 69, 0.25);
- transition: all 0.3s ease;
-
- overflow: hidden;
- z-index: 1;
-
- transition: color 0.3s ease, transform 0.3s ease;
-
- transition: color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
- }
-
- /* Hover Effect */
- .aboutCTA-Btn:hover {
- color: #fff;
- transform: translateY(-3px);
- box-shadow: 0 8px 20px rgba(37, 99, 235, 0.35);
- }
-
- .aboutCTA-Btn::before {
- content: "";
- position: absolute;
- top: 0;
- left: -100%;
- width: 100%;
- height: 100%;
- background: #2563eb;
- transition: left 0.4s ease;
- z-index: -1;
- border-radius: inherit;
- }
-
- .aboutCTA-Btn:hover::before {
- left: 0;
- }
-
- @keyframes pulse {
- 0%,
- 100% {
- transform: scale(1);
- }
- 50% {
- transform: scale(1.03);
- }
- }
-
- /* ================== About Styles End Here ================== */
-
- /* --- Footer Redesign --- */
-
- /* Responsive */
- @media (max-width: 768px) {
- #aboutSection {
- padding: 3rem 1rem;
- }
-
- #aboutSection .secHeader {
- font-size: 1.8rem;
- }
-
- .aboutContainer .col-10 {
- font-size: 1rem;
- line-height: 1.6;
- }
-
- .aboutCTA-Btn {
- padding: 0.7rem 1.5rem;
- font-size: 0.95rem;
- }
- }
- /* ================== About Styles End Here ================== */
-
- /* ================== Footer Styles Start Here ================== */
-
- main .footer-contact-btn {
- width: 150px;
- min-width: 100px;
- max-width: 170px;
- font-size: 0.97rem;
-
- padding: 0.45em 0;
- border-radius: 8px;
- gap: 0.4em;
- }
- .footer-contact-btn:hover {
- background: linear-gradient(90deg, #1e2c44 60%, #2563eb 100%);
- color: #fff;
- box-shadow: 0 4px 20px rgba(30, 44, 68, 0.15);
- transform: translateY(-2px) scale(1.03);
-
- padding: 0.5em 1.2em;
- border-radius: 9999px;
- background: #fff;
- color: #2563eb;
- border: 2px solid #2563eb;
- font-weight: 500;
- gap: 0.4em;
- box-shadow: 0 0 0 transparent;
- transition: all 0.3s ease;
- }
- .footer-contact-btn:hover {
- background: #2563eb;
- color: #fff;
- box-shadow: 0 0 12px rgba(37, 99, 235, 0.45);
- transform: translateY(-2px) scale(1.04);
- }
- .footer-contact-btn i {
- font-size: 1em;
- margin-right: 0.4em;
- }
-
- /* Footer Container */
- footer {
- padding-top: 2.5rem;
- padding-bottom: 1.5rem;
- background: linear-gradient(90deg, #f8fafc 60%, #e0ecfa 100%);
- border-top: 1.5px solid #e5e7eb;
- box-shadow: 0 -2px 16px rgba(30, 44, 68, 0.06);
-
- padding: 2.5rem 0 1.5rem;
- background: linear-gradient(90deg, #f8fafc 60%, #e0ecfa 100%);
- border-top: 1.5px solid #e5e7eb;
- box-shadow: 0 -2px 16px rgba(30, 44, 68, 0.06);
- }
- footer .container {
- max-width: 1200px;
- }
- footer .row.align-items-start {
- display: flex;
- flex-wrap: wrap;
- align-items: center;
- justify-content: space-between;
-
- gap: 0;
- row-gap: 2.5rem;
- }
-
- row-gap: 2.5rem;
- }
-
- main .footer-logo-col,
- .footer-links-col,
- .footer-contact-col-main {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- min-width: 220px;
- flex: 1 1 0;
- padding: 0 1rem;
- }
- .footer-links-col,
- .footer-contact-col-main {
- border-left: 1.5px solid #e5e7eb;
- }
- .footer-logo-col {
- border-right: 2px solid #e5e7eb;
- min-height: 140px;
-
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- }
- @media (max-width: 991px) {
- .footer-logo-col {
- border-right: none;
- min-height: unset;
- }
- }
- .footer-logo,
- .footer-desc {
- text-align: center;
- margin-left: auto;
- margin-right: auto;
- }
-
- .footer-logo {
- font-size: 2.3rem;
- font-weight: bolder;
- color: #2563eb;
- margin-bottom: 0.3rem;
- letter-spacing: 1px;
-
- text-align: center;
- }
- .footer-desc {
- font-size: 1rem;
- color: #4a5568;
- opacity: 0.85;
- margin-top: 0.3rem;
-
- max-width: 320px;
- padding-right: 1.5rem;
-
- line-height: 1.6;
- max-width: 380px;
- text-align: center;
- padding: 0 1.5rem;
- }
-
- .footer-title {
- font-size: 1.2rem;
- font-weight: 600;
- margin-bottom: 0.7rem;
- color: #1e2c44;
-
- letter-spacing: 0.5px;
- text-align: center;
- }
- .footer-contact-links {
- margin-top: 0;
-
- text-align: center;
- letter-spacing: 0.5px;
- }
- .footer-contact-col-main .footer-title,
- .imp-links {
- font-size: 1.45rem;
- font-weight: 700;
- color: #2563eb;
- margin-bottom: 1.1rem;
- position: relative;
- }
- .footer-contact-col-main .footer-title::after,
- .imp-links::after {
- content: "";
- display: block;
- width: 55%;
- height: 3px;
- background: linear-gradient(90deg, #2563eb 60%, #1e2c44 100%);
- border-radius: 2px;
- margin: 0.4rem auto 0 auto;
- }
-
- .footer-links {
- display: flex;
- flex-direction: column;
- align-items: center;
- gap: 0.5rem;
- margin: 0;
- padding: 0;
- }
- .footer-links li {
- margin: 0;
- padding: 0;
-
- list-style: none;
- }
- .footer-links a {
- color: #1e2c44;
- text-decoration: none;
- font-size: 1rem;
- opacity: 0.85;
-
- transition: color 0.2s, opacity 0.2s;
- position: relative;
- transition: color 0.3s ease, opacity 0.3s ease;
- }
- .footer-links a::after {
- content: "";
- position: absolute;
- left: 0;
- bottom: -3px;
- width: 0;
- height: 2px;
- background: #2563eb;
- transition: width 0.3s ease;
- }
- .footer-links a:hover {
- color: #2563eb;
- opacity: 1;
- }
-}
-.footer-links a:hover::after {
- width: 100%;
+.custom-navbar .navbar-brand span {
+ color: #ffd400;
}
-.footer-contact-row {
- display: flex;
- flex-direction: column;
- align-items: center;
- gap: 1.8rem;
-}
-.open-issue {
- margin-top: 10%;
+.custom-navbar .nav-link {
+ color: #ffffff !important;
+ font-weight: 500;
+ margin: 0 8px;
+ position: relative;
+ transition: color 0.3s ease;
}
-/* First Row: Open Issue Button */
-.open-issue a {
- width: 180px;
- font-size: 1rem;
- padding: 0.7em 1.6em;
- border-radius: 9999px;
- background: #fff;
- color: #2563eb;
- border: 1px solid #2563eb;
- font-weight: 600;
- box-shadow: 0 0 0 transparent;
+
+.custom-navbar .nav-link::after {
+ content: "";
+ position: absolute;
+ bottom: 4px;
+ left: 50%;
+ width: 0;
+ height: 2px;
+ background-color: #ffd400;
transition: all 0.3s ease;
text-decoration: none;
}
@@ -1216,10 +102,9 @@ main .scroll_to_top {
color: #fff;
border-radius: 50%;
transition: all 0.3s ease;
-
- border-radius: 50%;
text-decoration: none;
}
+
.scroll_to_top:hover {
background: linear-gradient(45deg, #2563eb, #0000ff);
transform: translateY(-3px) scale(1.05);
@@ -1236,6 +121,7 @@ main .scroll_to_top {
font-size: 1.2rem;
}
}
+
@media (max-width: 991px) {
footer .row.align-items-start {
flex-direction: column;
@@ -1274,6 +160,7 @@ main .scroll_to_top {
margin-bottom: 0.8rem;
}
}
+
@media (max-width: 768px) {
footer .row {
flex-direction: column;
@@ -1316,6 +203,7 @@ main .scroll_to_top {
margin-left: auto;
margin-right: auto;
}
+
.footer-desc {
font-size: 1rem;
color: #4a5568;
@@ -1325,6 +213,7 @@ main .scroll_to_top {
padding: 0 1.5rem;
line-height: 1.6;
}
+
@media (min-width: 992px) {
.footer-logo,
.footer-desc,
@@ -1346,11 +235,13 @@ main .scroll_to_top {
align-items: flex-start;
gap: 2.5rem;
}
+
.footer-links-row .footer-links {
margin: 0;
padding: 0;
min-width: 110px;
}
+
@media (max-width: 768px) {
.footer-links-row {
flex-direction: column;
@@ -1369,18 +260,25 @@ main .scroll_to_top {
align-items: flex-start;
gap: 2.5rem;
}
+
.footer-contact-col {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.2rem;
}
+
@media (max-width: 768px) {
- text-decoration: none;
-}
-.scroll_to_top:hover {
- background: linear-gradient(45deg, #2563eb, #0000ff);
- transform: translateY(-3px) scale(1.05);
+ main .footer-contact-row {
+ flex-direction: column;
+ align-items: center;
+ gap: 0.5rem;
+ }
+
+ .footer-contact-col {
+ gap: 0.2rem;
+ margin-bottom: 0.5rem;
+ }
}
.footer-line {
@@ -1427,18 +325,6 @@ main .scroll_to_top {
}
}
-@media (max-width: 768px) {
- main .footer-contact-row {
- flex-direction: column;
- align-items: center;
- gap: 0.5rem;
- }
-
- .footer-contact-col {
- gap: 0.2rem;
- margin-bottom: 0.5rem;
- }
-}
.footer-contact-col-main .footer-title {
font-size: 1.45rem;
font-weight: 700;
@@ -1447,6 +333,7 @@ main .scroll_to_top {
margin-bottom: 1.1rem;
position: relative;
}
+
.footer-contact-col-main .footer-title::after {
content: "";
display: block;
@@ -1459,9 +346,9 @@ main .scroll_to_top {
/* Custom Navbar Styling */
.custom-navbar {
- background-color: #0d1b2a; /* Dark blue/navy background */
+ background-color: #0d1b2a;
transition: background-color 0.3s ease;
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
/* Base link color */
@@ -1475,7 +362,7 @@ main .scroll_to_top {
/* Hover and active-hover effect */
.custom-navbar .nav-link:hover,
.custom-navbar .nav-link.active:hover {
- color: #fca311 !important; /* Gold */
+ color: #fca311 !important;
text-decoration: underline;
}
@@ -1485,13 +372,959 @@ main .scroll_to_top {
font-weight: bold;
}
-.footer-contact-btn {
- width: 100%;
- min-width: 0;
- max-width: 100%;
-}
main .contact-icons a {
margin-top: 10%;
}
/* ================== Footer Styles End Here ================== */
+ /* Removed invalid selector block */
+
+
+.custom-navbar .nav-link:hover::after,
+.custom-navbar .nav-link.active::after {
+ width: 50%;
+}
+
+.custom-navbar .nav-link:hover {
+ color: #ffd400 !important;
+}
+
+.contribute-btn {
+ background-color: #ffd400;
+ color: #003366;
+ font-weight: 600;
+ border: none;
+ transition: all 0.3s ease;
+}
+
+.contribute-btn:hover {
+ background-color: #ffcc00;
+ color: #001f3f;
+ transform: translateY(-2px);
+}
+
+/* Sticky effect shadow when scrolled */
+.navbar.fixed-top.scrolled {
+ background: linear-gradient(90deg, #005ac8 0%, #00a6e0 100%);
+ box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
+}
+
+/* Hero Section Styling */
+.hero {
+ background: linear-gradient(to right, #0077ff, #00c6ff);
+ color: #fff;
+}
+.hero h1 span {
+ color: #ffd400;
+}
+.hero .btn-warning {
+ font-weight: 600;
+ border: none;
+ color: #003366;
+}
+
+/* Mobile adjustments */
+@media (max-width: 992px) {
+ .custom-navbar .nav-link {
+ margin: 8px 0;
+ }
+ .contribute-btn {
+ width: 100%;
+ }
+}
+
+/* ================== Navbar Styles End Here ================== */
+
+/* ================== Hero Styles Start Here ================== */
+.heroSection {
+ margin-top: 56px;
+ background-color: #f8fafc;
+ padding: 2rem 0;
+}
+
+.heroSection-Container {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.gssoc-logo {
+ height: 14px;
+ width: 17px;
+}
+
+.gssocContainer {
+ display: flex;
+ align-items: center;
+ max-width: 150px;
+ justify-content: center;
+ border-radius: 36px;
+ padding: 3px 0;
+ color: white;
+ background: #e0ecfa;
+ margin: 1rem 0;
+}
+
+.gssocContainer p {
+ margin-bottom: 0;
+ display: inline-block;
+ font-size: 12px;
+ color: #81a6d3;
+}
+
+.shinning-effect {
+ mask: linear-gradient(-60deg, #000 30%, #0005, #000 70%) right/450% 100%;
+ animation: shiningEff 2.5s infinite;
+}
+
+@keyframes shiningEff {
+ 100% {
+ mask-position: left;
+ }
+}
+
+.heroDescription {
+ margin-bottom: 1.2rem;
+}
+
+.heroSection-Left h1 {
+ color: black;
+ font-size: 58px;
+ font-weight: 900;
+ margin: 1rem 0;
+}
+
+.blueCol {
+ color: #2563eb;
+}
+
+.heroSection-Left p {
+ color: #7e7f88;
+ text-align: justify;
+ font-size: 14px;
+ hyphens: auto;
+}
+
+.ctaBtn-Container {
+ display: flex;
+ align-items: center;
+ justify-content: start;
+ gap: 10px;
+}
+
+.heroSectionBtn {
+ text-align: center;
+ padding: 7px 60px !important;
+ border-radius: 40px !important;
+ background: #2563eb !important;
+ color: white !important;
+ transition: all 0.2s ease-in-out;
+}
+
+.heroSectionBtn:hover {
+ box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
+ background-color: #0b5ed7;
+}
+
+.heroSectionBtn i {
+ font-size: 14px;
+ margin-right: 5px;
+ border: 1px solid #2563eb !important;
+ transition: all 0.3s ease-in-out;
+ font-weight: 600;
+ cursor: pointer;
+}
+
+.heroSectionBtn:hover {
+ background: #ffffff !important;
+ box-shadow: 0 4px 12px rgba(11, 94, 215, 0.3);
+ transform: translateY(-2px);
+ color: #2563eb !important;
+}
+
+.heroSectionBtnOutline {
+ text-align: center;
+ padding: 7px 60px !important;
+ border-radius: 40px !important;
+ background: white !important;
+ color: #2563eb !important;
+ border: 1px solid #2563eb !important;
+ transition: all 0.3s ease-in-out;
+ font-weight: 600;
+ cursor: pointer;
+}
+
+.heroSectionBtnOutline:hover {
+ background: #2563eb !important;
+ color: white !important;
+ box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
+ transform: translateY(-2px);
+}
+
+.heroSectionBtn i,
+.heroSectionBtnOutline i {
+ font-size: 14px;
+ margin-right: 5px;
+ transition: transform 0.2s ease-in-out;
+}
+
+.heroSectionBtn:hover i,
+.heroSectionBtnOutline:hover i {
+ transform: translateX(3px);
+}
+
+/* ================== Hero Styles End Here ================== */
+
+/* ================== Challenge Styles Start Here ================== */
+#challengeSection {
+ padding: 2rem 0;
+}
+
+.challengeContainer .card {
+ box-shadow: rgba(19, 117, 216, 0.2) 0px 8px 24px;
+ border: none;
+ transition: all 0.2s ease-in-out;
+ border-radius: 15px;
+ margin: 15px 0;
+}
+
+.challengeContainer .card:hover {
+ transform: translateY(-3px) scale(1);
+ box-shadow: 0 0 18px rgba(37, 99, 235, 0.45);
+}
+
+.card-TopContainer {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+}
+
+.card-Header {
+ font-size: 20px;
+ font-weight: 600;
+ margin-bottom: 0;
+}
+
+.card-Level {
+ margin-bottom: 0;
+ font-size: 12px;
+ padding: 4px 25px;
+ border-radius: 17px;
+ background: #d5edda;
+ color: #1a7071;
+ font-weight: 700;
+ margin-right: 7px;
+}
+
+.medium-Col {
+ background-color: #fff3cd;
+ color: #a88825;
+}
+
+.hard-Col {
+ background-color: #f8d7da;
+ color: #7d1c1c;
+}
+
+.card-Participate {
+ font-size: 13px;
+ color: #8b8b8b;
+ margin-bottom: 8px;
+ margin-top: 1px;
+ opacity: 0.9;
+}
+
+.card-Text {
+ font-size: 14px;
+ opacity: 0.8;
+ text-align: justify;
+ hyphens: auto;
+}
+
+.card-CTAButton {
+ display: flex;
+ align-items: center;
+ justify-content: end;
+}
+
+.card-Btn {
+ text-decoration: none;
+ font-size: 13px;
+ padding: 8px 36px;
+ border-radius: 5px;
+ background-color: #2563eb;
+ color: white;
+ border: none;
+ transition: all 0.2s ease-in-out;
+ font-weight: 700;
+}
+
+.card-Btn:hover {
+ box-shadow: #83aafe 0px 3px 8px;
+ background-color: #1d4ed8;
+}
+
+/* ================== Challenge Styles End Here ================== */
+
+/* ================== Leaderboard Styles Starts Here ================== */
+
+#leaderboardSection {
+ padding: 2rem 0;
+ background-color: #f8fafc;
+}
+
+.owl-carousel .card {
+ border: none;
+ background: transparent;
+}
+
+.leaderboard-wrapper {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ min-height: 100vh;
+ background: linear-gradient(135deg, #e0f0ff, #f9f9ff);
+ padding: 2rem;
+ text-align: center;
+ font-family: "Poppins", sans-serif;
+}
+
+/* ===== Heading Section ===== */
+#leaderboardSection h2 {
+ font-size: 2.4rem;
+ font-weight: normal;
+ text-align: center;
+ margin-bottom: 0.5rem;
+ color: #111827;
+}
+
+#leaderboardSection h2 span {
+ color: #2563eb;
+ font-weight: 700;
+}
+
+main .secHeader {
+ text-align: center;
+ font-size: 2rem;
+ font-weight: 600;
+}
+
+.secHeader span {
+ color: #131212b1;
+}
+
+#leaderboardSection p {
+ font-size: 1rem;
+ color: #374151;
+ max-width: 600px;
+ margin: 0 auto 2rem auto;
+ line-height: 1.6;
+}
+
+/* ===== Leaderboard Container ===== */
+.leaderboard-list {
+ max-width: 650px;
+ width: 100%;
+ margin: 0 auto;
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ background: rgba(255, 255, 255, 0.65);
+ backdrop-filter: blur(14px);
+ padding: 2rem;
+ border-radius: 22px;
+ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.leaderboard-list:hover {
+ transform: scale(1.01);
+ box-shadow: 0 14px 32px rgba(0, 0, 0, 0.18);
+}
+
+.leaderboard-Para {
+ text-align: center;
+ opacity: 0.8;
+}
+
+.leaderboard-Img {
+ width: 100px !important;
+ border: 5px solid #e0ecfa;
+ border-radius: 100%;
+}
+
+.userName {
+ opacity: 0.9;
+ font-weight: 700;
+}
+
+.leaderBoard-userContainer {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.leaderBoard-Container {
+ text-align: center;
+}
+
+.leaderBoard-Container h5 {
+ font-size: 24px;
+ margin: 1rem 0;
+}
+
+.leaderboradUser-RankContainer {
+ display: flex;
+ align-items: center;
+ justify-content: space-evenly;
+}
+
+.leaderboradUser-RankContainer p {
+ margin-bottom: 0;
+ padding: 10px 30px;
+ border-radius: 10px;
+ background: #0000ff;
+ color: white;
+ font-weight: 700;
+ border: none;
+ font-size: 13px;
+}
+
+.rankPosition {
+ padding: 10px 40px !important;
+}
+
+.rankPoints {
+ background-color: skyblue !important;
+ color: darkblue !important;
+ transition: all 0.3s ease-in-out;
+ cursor: pointer;
+}
+
+.rankPoints:hover {
+ background-color: #0000ff !important;
+ color: white !important;
+}
+
+.leaderBoard-Container:hover .leaderboard-Img,
+.leaderBoard-Container:hover .rankPoints,
+.leaderBoard-Container:hover .rankPosition {
+ mask: linear-gradient(-60deg, #000 30%, #0005, #000 70%) right / 450% 100%;
+ -webkit-mask: linear-gradient(-60deg, #000 30%, #0005, #000 70%) right / 450% 100%;
+ animation: rankList 2.5s infinite;
+ -webkit-animation: rankList 2.5s infinite;
+}
+
+@keyframes rankList {
+ 100% {
+ mask-position: left;
+ -webkit-mask-position: left;
+ }
+}
+
+/* ===== Rows ===== */
+.leaderboard-row {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ background: #fff;
+ padding: 1rem 1.5rem;
+ border-radius: 15px;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+ transition: transform 0.25s ease, box-shadow 0.25s ease;
+ position: relative;
+ overflow: hidden;
+}
+
+.leaderboard-row:hover {
+ transform: translateY(-4px) scale(1.02);
+ box-shadow: 0 10px 22px rgba(0, 0, 0, 0.14);
+}
+
+/* Gradient glow border effect */
+.leaderboard-row::before {
+ content: "";
+ position: absolute;
+ inset: 0;
+ border-radius: 15px;
+ padding: 2px;
+ background: linear-gradient(90deg, #6a11cb, #2575fc, #6a11cb);
+ background-size: 300% 300%;
+ -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: destination-out;
+ mask-composite: exclude;
+ opacity: 0;
+ transition: opacity 0.4s ease;
+ animation: gradientMove 5s linear infinite;
+ z-index: 0;
+}
+
+.leaderboard-row:hover::before {
+ opacity: 1;
+}
+
+/* Keep content always above */
+.leaderboard-row * {
+ position: relative;
+ z-index: 1;
+}
+
+@keyframes gradientMove {
+ 0% {
+ background-position: 0% 50%;
+ }
+ 50% {
+ background-position: 100% 50%;
+ }
+ 100% {
+ background-position: 0% 50%;
+ }
+}
+
+/* ===== Rank Badges ===== */
+.leaderboard-row .rank {
+ font-size: 1.4rem;
+ font-weight: bold;
+ width: 60px;
+ text-align: center;
+ color: #111827;
+ transition: transform 0.3s ease;
+}
+
+.leaderboard-row:hover .rank {
+ transform: scale(1.2);
+}
+
+/* ===== Top 3 Special Honors ===== */
+.leaderboard-row.rank-1 {
+ background: linear-gradient(135deg, #fff8dc, #fff);
+ border: 2px solid #ffd700;
+ box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
+}
+.leaderboard-row.rank-1 .rank {
+ color: #ffd700;
+ text-shadow: 0 0 10px rgba(255, 215, 0, 0.9);
+}
+.leaderboard-row.rank-1 .leaderboard-Img {
+ border: 3px solid #ffd700;
+}
+
+.leaderboard-row.rank-2 {
+ background: linear-gradient(135deg, #f0f0f0, #fff);
+ border: 2px solid #c0c0c0;
+ box-shadow: 0 0 20px rgba(192, 192, 192, 0.5);
+}
+.leaderboard-row.rank-2 .rank {
+ color: #c0c0c0;
+ text-shadow: 0 0 10px rgba(192, 192, 192, 0.9);
+}
+.leaderboard-row.rank-2 .leaderboard-Img {
+ border: 3px solid #c0c0c0;
+}
+
+.leaderboard-row.rank-3 {
+ background: linear-gradient(135deg, #fff5f0, #fff);
+ border: 2px solid #cd7f32;
+ box-shadow: 0 0 20px rgba(205, 127, 50, 0.5);
+}
+.leaderboard-row.rank-3 .rank {
+ color: #cd7f32;
+ text-shadow: 0 0 10px rgba(205, 127, 50, 0.9);
+}
+.leaderboard-row.rank-3 .leaderboard-Img {
+ border: 3px solid #cd7f32;
+}
+
+/* ===== Avatar ===== */
+.leaderboard-row .leaderboard-Img {
+ width: 65px;
+ height: 65px;
+ margin: 0 15px;
+ border-radius: 50%;
+ object-fit: cover;
+ border: 3px solid transparent;
+ background: linear-gradient(white, white) padding-box, linear-gradient(45deg, #6a11cb, #2575fc) border-box;
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.leaderboard-row:hover .leaderboard-Img {
+ transform: rotate(5deg) scale(1.12);
+ box-shadow: 0 0 12px rgba(37, 117, 252, 0.4);
+}
+
+/* ===== Username ===== */
+.leaderboard-row .userName {
+ flex: 1;
+ font-size: 1.15rem;
+ font-weight: 600;
+ color: #1f2937;
+ transition: color 0.3s ease;
+}
+
+.leaderboard-row:hover .userName {
+ color: #2563eb;
+}
+
+/* ===== Points ===== */
+.leaderboard-row .points {
+ font-weight: bold;
+ font-size: 1.1rem;
+ color: #2563eb;
+ transition: transform 0.3s ease, color 0.3s ease, text-shadow 0.3s ease;
+}
+
+.leaderboard-row:hover .points {
+ transform: scale(1.12);
+ color: #1d4ed8;
+ text-shadow: 0 0 6px rgba(29, 78, 216, 0.4);
+}
+
+/* ================== Leaderboard Styles End Here ================== */
+
+/* ================== About Styles Start Here ================== */
+#aboutSection {
+ padding: 4rem 1rem;
+ background: linear-gradient(135deg, #f9fafb, #f3f4f6);
+}
+
+/* Heading */
+#aboutSection .secHeader {
+ font-size: 2.2rem;
+ margin-bottom: 1.5rem;
+ font-weight: 700;
+ text-align: center;
+ line-height: 1.3;
+ color: #111827;
+}
+
+#aboutSection .secHeader span {
+ color: #2563eb;
+ font-weight: 700;
+}
+
+/* Container */
+.aboutContainer {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.aboutContainer .col-10 {
+ opacity: 0.9;
+ text-align: center;
+ max-width: 850px;
+ line-height: 1.7;
+ font-size: 1.05rem;
+ color: #374151;
+ margin: 0 auto;
+}
+
+/* Paragraphs */
+.aboutContainer .col-10 p {
+ margin-bottom: 1.8rem;
+}
+
+.aboutContainer .col-10 strong {
+ color: #111827;
+ font-weight: 700;
+}
+
+/* CTA Container */
+.ctaBtn {
+ text-align: center;
+ margin-top: 1.5rem;
+}
+
+/* CTA Button */
+.aboutCTA-Btn {
+ text-decoration: none;
+ font-weight: 700;
+ margin-top: 1.5rem;
+ box-shadow: 0 0 18px 0 rgba(19, 117, 216, 0.25);
+ position: relative;
+ display: inline-block;
+ padding: 0.85rem 2rem;
+ font-size: 1rem;
+ font-weight: 600;
+ color: #1d4ed8;
+ background-color: #fff;
+ border-radius: 30px;
+ border: 1px solid #2563eb;
+ cursor: pointer;
+ overflow: hidden;
+ z-index: 1;
+ transition: color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+/* Hover Effect */
+.aboutCTA-Btn:hover {
+ color: #fff;
+ transform: translateY(-3px);
+ box-shadow: 0 8px 20px rgba(37, 99, 235, 0.35);
+}
+
+.aboutCTA-Btn::before {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: -100%;
+ width: 100%;
+ height: 100%;
+ background: #2563eb;
+ transition: left 0.4s ease;
+ z-index: -1;
+ border-radius: inherit;
+}
+
+.aboutCTA-Btn:hover::before {
+ left: 0;
+}
+
+@keyframes pulse {
+ 0%, 100% {
+ transform: scale(1);
+ }
+ 50% {
+ transform: scale(1.03);
+ }
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+ #aboutSection {
+ padding: 3rem 1rem;
+ }
+
+ #aboutSection .secHeader {
+ font-size: 1.8rem;
+ }
+
+ .aboutContainer .col-10 {
+ font-size: 1rem;
+ line-height: 1.6;
+ }
+
+ .aboutCTA-Btn {
+ padding: 0.7rem 1.5rem;
+ font-size: 0.95rem;
+ }
+}
+
+/* ================== About Styles End Here ================== */
+
+/* ================== Footer Styles Start Here ================== */
+
+main .footer-contact-btn {
+ width: 150px;
+ min-width: 100px;
+ max-width: 170px;
+ font-size: 0.97rem;
+ padding: 0.5em 1.2em;
+ border-radius: 9999px;
+ background: #fff;
+ color: #2563eb;
+ border: 2px solid #2563eb;
+ font-weight: 500;
+ gap: 0.4em;
+ box-shadow: 0 0 0 transparent;
+ transition: all 0.3s ease;
+}
+
+.footer-contact-btn:hover {
+ background: #2563eb;
+ color: #fff;
+ box-shadow: 0 0 12px rgba(37, 99, 235, 0.45);
+ transform: translateY(-2px) scale(1.04);
+}
+
+.footer-contact-btn i {
+ font-size: 1em;
+ margin-right: 0.4em;
+}
+
+/* Footer Container */
+footer {
+ padding: 2.5rem 0 1.5rem;
+ background: linear-gradient(90deg, #f8fafc 60%, #e0ecfa 100%);
+ border-top: 1.5px solid #e5e7eb;
+ box-shadow: 0 -2px 16px rgba(30, 44, 68, 0.06);
+}
+
+footer .container {
+ max-width: 1200px;
+}
+
+footer .row.align-items-start {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: space-between;
+ gap: 0;
+ row-gap: 2.5rem;
+}
+
+main .footer-logo-col,
+.footer-links-col,
+.footer-contact-col-main {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ min-width: 220px;
+ flex: 1 1 0;
+ padding: 0 1rem;
+}
+
+.footer-links-col,
+.footer-contact-col-main {
+ border-left: 1.5px solid #e5e7eb;
+}
+
+.footer-logo-col {
+ border-right: 2px solid #e5e7eb;
+ min-height: 140px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+}
+
+@media (max-width: 991px) {
+ .footer-logo-col {
+ border-right: none;
+ min-height: unset;
+ }
+}
+
+.footer-logo,
+.footer-desc {
+ text-align: center;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.footer-logo {
+ font-size: 2.3rem;
+ font-weight: bolder;
+ color: #2563eb;
+ margin-bottom: 0.3rem;
+ letter-spacing: 1px;
+ text-align: center;
+}
+
+.footer-desc {
+ font-size: 1rem;
+ color: #4a5568;
+ opacity: 0.85;
+ margin-top: 0.3rem;
+ line-height: 1.6;
+ max-width: 380px;
+ text-align: center;
+ padding: 0 1.5rem;
+}
+
+.footer-title {
+ font-size: 1.2rem;
+ font-weight: 600;
+ margin-bottom: 0.7rem;
+ color: #1e2c44;
+ letter-spacing: 0.5px;
+ text-align: center;
+}
+
+.footer-contact-links {
+ margin-top: 0;
+ text-align: center;
+ letter-spacing: 0.5px;
+}
+
+.footer-contact-col-main .footer-title,
+.imp-links {
+ font-size: 1.45rem;
+ font-weight: 700;
+ color: #2563eb;
+ margin-bottom: 1.1rem;
+ position: relative;
+}
+
+.footer-contact-col-main .footer-title::after,
+.imp-links::after {
+ content: "";
+ display: block;
+ width: 55%;
+ height: 3px;
+ background: linear-gradient(90deg, #2563eb 60%, #1e2c44 100%);
+ border-radius: 2px;
+ margin: 0.4rem auto 0 auto;
+}
+
+.footer-links {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 0.5rem;
+ margin: 0;
+ padding: 0;
+}
+
+.footer-links li {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+}
+
+.footer-links a {
+ color: #1e2c44;
+ text-decoration: none;
+ font-size: 1rem;
+ opacity: 0.85;
+ position: relative;
+ transition: color 0.3s ease, opacity 0.3s ease;
+}
+
+.footer-links a::after {
+ content: "";
+ position: absolute;
+ left: 0;
+ bottom: -3px;
+ width: 0;
+ height: 2px;
+ background: #2563eb;
+ transition: width 0.3s ease;
+}
+
+.footer-links a:hover {
+ color: #2563eb;
+ opacity: 1;
+}
+
+.footer-links a:hover::after {
+ width: 100%;
+}
+
+.footer-contact-row {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 1.8rem;
+}
+
+.open-issue {
+ margin-top: 10%;
+}
+
+/* First Row: Open Issue Button */
+.open-issue a {
+ width: 180px;
+ font-size: 1rem;
+ padding: 0.7em 1.6em;
+ border-radius: 9999px;
+ background: #fff;
+ color: #2563eb;
+ border: 1px solid #2563eb;
+ font-weight: 600;
+ box-shadow: 0 0 0 transparent;
+transition: all;
+}
\ No newline at end of file