Fixed overlapping Issue

django-mlapi-backend/static/css/style.css

@@ -3,6 +3,7 @@
   padding: 0;
   box-sizing: border-box;
 }
+
 :root {
   --font-primary: 'Ubuntu', sans-serif;
   --font-secondary: sans-serif;
@@ -21,6 +22,7 @@
 a {
   text-decoration: none;
 }
+
 .list {
   letter-spacing: 0.05rem;
   display: flex;
@@ -30,47 +32,60 @@ a {
   font-family: sans-serif;
   align-items: flex-start;
 }
+
 /* utilities */
 .link {
   color: black;
 }
+
 .icons {
   color: black;
 }
+
 .font-primary {
   font-family: var(--font-primary);
   font-weight: 400;
   font-style: normal;
 }
+
 .font-secondary {
   font-family: var(--font-secondary);
 }
+
 .font-ex-large {
   font-size: var(--font-ex-large);
 }
+
 .font-large {
   font-size: var(--font-large);
 }
+
 .font-mid-large {
   font-size: var(--font-mid-large);
 }
+
 .font-mid-medium {
   font-size: var(--font-mid-medium);
 }
+
 .font-medium {
   font-size: var(--font-medium);
 }
+
 .font-small {
   font-size: var(--font-small);
 }
+
 .font-light {
   color: var(--color-secondary);
 }
+
 .align-items {
   display: flex;
   align-items: flex-end;
   gap: 0.5rem;
 }
+
 .btn-primary {
   background-color: var(--color-primary);
   color: white;
@@ -79,50 +94,58 @@ a {
   border: none;
   cursor: pointer;
 }
+
 .btn-primary:hover {
   background-color: white;
   color: var(--color-primary);
   border: 2px solid var(--color-primary);
   transition: 0.3s;
 }
+
 .btn-secondary {
   color: var(--color-primary);
   padding: 0.4rem 0.3rem;
   border-radius: 0.625rem;
   border: 0.1rem solid var(--color-primary);
   cursor: pointer;
 }
+
 .btn-secondary:hover {
   background-color: var(--color-primary);
   color: white;
 }
+
 .flex-cont {
   display: flex;
   align-items: center;
   gap: 5rem;
   margin: 4rem 0;
-  
+
 }
+
 .blue-text {
   color: var(--color-primary);
 }
+
 /* main section */
 .main-section {
   display: flex;
   /* justify-content: center; */
-  
+
   /* gap: 2rem;
   padding: 0 2.87rem; */
 }
+
 /* content section */
 .content-section {
   display: flex;
   flex-direction: column;
   align-items: center;
   margin: 6rem 2rem 2rem 4rem;
   gap: 8rem;
-  
+
 }
+
 /* navbar */
 .navbar {
   display: flex;
@@ -140,99 +163,119 @@ a {
   background: white;
   gap: 2rem;
   height: 558px;
-  
+
 }
+
 .navbar__logo img {
   height: 5.75rem;
   width: 9.55rem;
-  
+
 }
+
 .navbar__links {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 2rem;
   width: 14rem;
-  
+
 }
+
 .show {
   transform: translateX(-100vw);
   /* transition: ; */
 }
+
 .auth {
   display: flex;
   align-items: center;
   gap: 1rem;
   display: none !important;
 }
+
 /* header   */
 .welcome .welcome-text {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 1.5rem;
 }
+
 .welcome-img {
   height: 40vh;
-  
+
 }
+
 .welcome-btns {
   display: flex;
   align-items: center;
   gap: 1rem;
 }
+
 .dp-search {
   display: flex;
 }
+
 .dp-search img {
   border-radius: 0.625rem 0 0 0.625rem;
   background-color: rgba(126, 124, 124, 0.5);
 }
+
 .dp-search input {
   border: none;
   border-radius: 0 0.625rem 0.625rem 0;
   background-color: rgba(126, 124, 124, 0.5);
 }
+
 /* About */
 .cogni-about-text {
   display: flex;
   flex-direction: column;
   gap: 2rem;
 }
+
 .cogni-about img {
   height: 50vh;
-  
+
 }
+
 /* footer */
 footer {
   display: flex;
   flex-direction: column;
   background-color: #2b2d30;
   padding: 7vh 4vh 0;
   gap: 3rem;
+  margin-top: 15px;
 }
+
 .footer-links {
   display: flex;
   gap: 5.85vw;
   margin-bottom: 0.5rem;
   justify-content: space-between;
 }
+
 .footer-links img {
   height: 2.5rem !important;
 }
+
 .footer-links i {
   font-size: 2rem;
 }
+
 .footer-text {
   display: flex;
   color: white;
   justify-content: space-evenly;
   align-items: center;
-  
+
 }
+
 .footer-text a {
   color: white;
 }
+
 .footer-bottom {
   box-sizing: border-box;
   text-align: center;
@@ -243,6 +286,7 @@ footer {
   left: 0;
   width: 100%;
 }
+
 .footer-bottom i {
   color: red;
 }
@@ -251,34 +295,41 @@ footer {
   display: flex;
   gap: 1rem;
 }
+
 .footer-btn a {
   border: 1px solid white;
 }
+
 .cogni-desc {
   display: flex;
   width: 50%;
   flex-direction: column;
   gap: 1rem;
-  
+
 }
+
 .cogni-desc p {
   letter-spacing: 0.5px;
   line-height: 26px;
   font-family: sans-serif;
 }
+
 .cogni-links {
   display: flex;
   flex-direction: column;
   gap: 2rem;
-  
+
 }
+
 .cogni-links div:first-child {
   display: flex;
   gap: 3rem;
 }
+
 .base-design {
   width: 27rem;
 }
+
 /* speedometer */
 /* .gauge {
   position: relative;
@@ -335,7 +386,7 @@ footer {
   cursor: pointer;
   padding: 0;
   z-index: 10;
-  
+
 }
 
 .line {
@@ -359,6 +410,7 @@ footer {
 .change .line3 {
   transform: translateY(-13px) rotate(45deg);
 }
+
 #overlay {
   position: fixed;
   display: none;
@@ -371,4 +423,4 @@ footer {
   z-index: 2;
   cursor: pointer;
   backdrop-filter: blur(10px);
-}
+}