Update ui.css

ui.css

@@ -1,516 +1,774 @@
-/* Gradio container - Solid background color */
-@import url('https://fonts.googleapis.com/css2?family=Jacques+Francois&display=swap');
-.gradio-container {
-    background-image: url('https://i.ibb.co/KxBn0Yt5/Bottom-Grass-Image.png') !important;
-    background-size: cover !important;
-    background-position: center!important;
-    background-repeat: no-repeat !important;
-    padding: 60px !important;
-    align-items: center;
-    text-align: center !important;
-    
-}
-.gradio-container, .gr-block, .gr-panel, .gr-box {
-    border: none !important;
-    box-shadow: none !important; /* Remove any shadow effect */
-    color:#000 !important; /* Ensure text is visible */ 
-}
-
-/* Ensure inside container has a solid dark background */
-.inner-container {
-    background-color: #0B0F19;
-    padding: 10px;
-    border-radius: 15px;
-    border: 5px solid rgb(20, 18, 18); 
-    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
-    max-width: 800px;
-    text-align: center;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-}
-
-
-/* Title and description - ensure visibility */
-.title-text{
-    background-color: transparent !important;
-    color: #fff !important;
-    text-align: center !important;
-}
-.h1, h1 {
-    font-size: 40px !important;
-    font-family:'Jacques Francois', serif;
-    margin: 10px 0 !important;
-}
-.description-text{
-    font-size: 20px !important;
-    font-family:'Jacques Francois', serif;
-    margin: 10px 0 !important;
-    background-color: transparent !important;
-    color: #fff !important;
-    text-align: center !important;
-}
-.jacques-francois-regular {
-    font-family: "Jacques Francois", serif;
-    font-weight: 400;
-    font-style: normal;
-  }
-
-
-/* Logo styling */
-.logo-container {
-    background-color: #0B0F19 !important; /* Background color for the logo container */
-    margin: 10px 0 !important;
-    padding: 30px !important;  /* Adjust padding if necessary */
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height:120px !important; 
-    width: 400px !important;
-}
-
-/* Optional: Add some padding around the logo image */
-.logo-container img {
-    object-fit: contain !important;  /* Ensure image scales properly */
-    max-height: 100% !important;  /* Make sure the image fits the container */
-}
-.logo-container-system {
-    background-color: #E4E4E7 !important; /* Background color for the logo container */
-    margin: 10px 10px !important;  
-    text-align: left !important;  
-    height: 80px !important;  
-    width: 200px !important;
-}
-
-/* Optional: Add some padding around the logo image */
-.logo-container-system img {
-    display: inline-block;
-    vertical-align: middle;
-}
-
-/* Button styling */
-.trial-button {
-    background-color: #E67E22 !important;
-    color: white !important;
-    border: none !important;
-    border-radius: 15px !important;
-    padding: 10px 30px !important;
-    font-size: 16px !important;
-    /* Make it center so margin has to be auto*/
-    margin: 20px auto !important;
-    cursor: pointer !important;
-    max-width: 200px !important;  /* Limit the button width */
-    text-align: center !important;
-    display: flex !important;
-    justify-content: center !important;
-}
-
-
-
-.back-button {
-    margin-top: 20px !important;
-    margin: 20px auto !important;
-    padding: 10px 30px !important;
-    font-size: 16px !important;
-    border-radius: 15px !important;
-    background-color: #E67E22  !important;
-    color: white !important;
-    border: none !important;
-    cursor: pointer !important;
-    max-width: 200px !important;
-}
-.system-page-description{
-    font-size: 20px !important;
-    color: #000000 !important;
-    text-align: center !important;
-    margin: 40px 40px!important;
-    /* padding: 40px 40px!important; */
-    background-color: transparent !important;
-}
-
-
-
-
-.project-container {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    max-width: 1200px;
-    margin: 0 auto;
-    padding: 20px;
-}
-
-.project-container .project-title {
-    text-align: center;
-    font-size: 30px !important;
-    margin: 0 auto;
-}
-
-.upper-content {
-    display: flex;
-    flex-direction: row;
-    gap: 30px;
-    padding-top: 20px;
-}
-
-.left-upper-column {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-}
-
-.right-upper-column {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-}
-
-.chart {
-    font-family: 'Jacques Francois', serif;
-    width: 100%;
-    background-color: white;
-    border-radius: 10px;
-    padding: 10px;
-}
-
-.chart-image {
-    width: 100%;
-    height: auto;
-}
-
-.chart-caption {
-    text-align: center;
-    font-size: 12px;
-    margin-top: 10px;
-    color: #333;
-}
-
-.herbicide-description {
-    padding: 20px 0;
-    font-size: 20px;
-    text-align: justify;
-}
-
-.herbicide-title {
-    margin-top: -40px;
-    margin-bottom: 20px;
-    font-size: 50px;
-    text-align: center;
-}
-span.bold-red{
-    font-family: 'Jacques Francois', serif;
-    font-size: 20px;
-    color:red;
-    font-weight: bold;
-}
-
-
-.middle-content {
-    display: flex;
-    flex-direction: row;
-    gap: 30px;
-    padding-top: 20px;
-}
-
-.left-middle-column {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-
-}
-
-.right-middle-column {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-}
-
-.objective-description {
-    padding: 20px;
-
-}
-
-.objective-title {
-    font-size: clamp(30px, 5vw, 50px); /* Responsive font size */
-    white-space: nowrap;
-    margin-bottom: 20px;
-    text-align: left;
-}
-
-.objective-text {
-    font-size: 20px;
-    line-height: 1.6;
-    text-align: justify;
-    color: #333;
-}
-
-:root {
-    --size-width: 400px;
-    --size-height: 250px;
-  }
-  
-  .carousel-wrapper {
-    width: calc(var(--size-width) * 1.3);
-    height: calc(var(--size-height) * 1.4);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    box-shadow: 5px 5px 25px 0px rgba(46, 61, 73, 0.2);
-    border-radius: 15px;
-  }
-  
-  .carousel-container {
-    width: var(--size-width);
-    height: var(--size-height);
-    overflow: hidden;
-    margin: 0 auto;
-    font-size: 16px;
-    font-weight:bold;
-    font-family: 'Jacques Francois', serif;
-  }
-  
-  .carousel {
-    display: flex;
-    width: calc(var(--size-width) * 3);
-    animation: sliding 6s infinite;
-  }
-  
-  
-  .carousel div {
-    width: var(--size-width);
-    height: var(--size-height);
-    background-size: cover;
-    background-position: center;
-  }
-  
-  .carousel:hover {
-    animation-play-state: paused;
-  }
-  
-  .image-one {
-    background-image: url("https://i.ibb.co/0jpWh4CD/Dock-Weed-1.jpg");
-  }
-  
-  .image-two {
-    background-image: url("https://i.ibb.co/1f7zdPMk/Dock-Weed-2.jpg");
-  }
-  
-  .image-three {
-    background-image: url("https://i.ibb.co/4Z1YffPd/Dock-Weed-3.jpg");
-  }
-  
-  @keyframes sliding {
-    30% {
-      transform: translateX(0);
-    }
-    35% {
-      transform: translateX(calc(var(--size-width) * -1));
-    }
-    65% {
-      transform: translateX(calc(var(--size-width) * -1));
-    }
-    70% {
-      transform: translateX(calc(var(--size-width) * -2));
-    }
-    98% {
-      transform: translateX(calc(var(--size-width) * -2));
-    }
-    100% {
-      transform: translateX(0);
-    }
-  }
-  
-  @media screen and (max-width: 768px) {
-    :root {
-      --size-width: 240px;
-      --size-height: 150px;
-    }
-  }
-  .bottom-content {
-    display: flex;
-    flex-direction: row;
-    gap: 30px;
-    padding: 20px 0;
-    background-image: url('path-to-your-green-background.jpg');
-    background-size: cover;
-    background-position: center;
-    color: white;
-    border-radius: 10px;
-    margin-top: 10px;
-}
-
-.left-bottom-column {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    padding: 20px;
-}
-
-.right-bottom-column {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    padding: 20px;
-}
-
-.benefits-description {
-    width: 600px;
-    height: 300px;
-    text-align: left;
-    background-color: white;
-    border: 10px;
-    border-radius: 20px;
-    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
-
-
-}
-
-.benefits-title {
-    font-size: clamp(30px, 5vw, 50px);
-    text-align: center;
-    margin-bottom: 20px;
-    font-weight: bold;
-}
-
-.benefits-text {
-    font-size: 18px;
-    line-height: 1.8;
-    text-align: left;
-    padding-left: 20px;
-}
-
-.benefits-text br {
-    margin-bottom: 10px;
-}
-
-.model-image {
-    margin: 20px auto;
-    width: 100%;
-    height: auto;
-    max-width: 400px; /* Limit the image width */
-    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
-    background-color: #fff;
-}
-
-
-/* For bullet points, you can use this instead of <br> */
-.benefits-list {
-    list-style-type: disc;
-    padding-left: 40px;
-}
-
-.benefits-list li {
-    margin-bottom: 10px;
-    font-size: 18px;
-    font-weight: bold;
-}
-.author-section {
-    max-width: 1200px;
-    margin: 0 auto;
-    padding: 30px 20px;
-    font-family: 'Jacques Francois', serif;
-}
-
-.author-title {
-    text-align: center;
-    font-size: 40px;
-    margin-bottom: 40px;
-}
-
-.author-content {
-    display: flex;
-    flex-direction: row;
-    gap: 40px;
-    align-items: center;
-}
-
-.author-image-container {
-    flex: 0 0 200px;
-}
-
-.author-image {
-    width: 100%;
-    border-radius: 10px;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-}
-
-.author-bio {
-    flex: 1;
-}
-
-.author-text {
-    font-size: 18px;
-    line-height: 1.6;
-    margin-bottom: 30px;
-    text-align: justify;
-}
-
-.social-links {
-    display: flex;
-    gap: 20px;
-    margin-top: 20px;
-}
-
-.social-link {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    text-decoration: none;
-    color: #2a6a39;
-    font-weight: bold;
-    padding: 10px 15px;
-    border-radius: 5px;
-    background-color: #f5f5f5;
-    transition: all 0.3s ease;
-}
-
-.social-link:hover {
-    background-color: #e0e0e0;
-    transform: translateY(-2px);
-}
-
-.social-icon {
-    width: 24px;
-    height: 24px;
-}
-
-
-
-
-
-
-@media (max-width: 1200px) {
-    .upper-content {
-        flex-direction: column;
-    }
-    .middle-content {
-        flex-direction: column; /* This would stack elements on small screens */
-    }
-    .bottom-content {
-        flex-direction: column;
-    }
-    .author-content {
-        flex-direction: column;
-        text-align: center;
-    }
-    
-    .author-image-container {
-        max-width: 150px;
-        margin: 0 auto;
-    }
-    
-    .social-links {
-        flex-direction: column;
-        align-items: center;
-    }
-    
-    .social-link {
-        width: 80%;
-        justify-content: center;
-    }
-}
+/* Gradio container - Solid background color */
+@import url('https://fonts.googleapis.com/css2?family=Jacques+Francois&display=swap');
+.gradio-container {
+    background-image: url('https://i.ibb.co/KxBn0Yt5/Bottom-Grass-Image.png') !important;
+    background-size: cover !important;
+    background-position: center!important;
+    background-repeat: no-repeat !important;
+    padding: 60px !important;
+    align-items: center;
+    text-align: center !important;
+    
+}
+.gradio-container, .gr-block, .gr-panel, .gr-box {
+    border: none !important;
+    box-shadow: none !important; /* Remove any shadow effect */
+    color:#000 !important; /* Ensure text is visible */ 
+}
+
+/* Ensure inside container has a solid dark background */
+.inner-container {
+    background-color: #0B0F19;
+    padding: 10px;
+    border-radius: 15px;
+    border: 5px solid rgb(20, 18, 18); 
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
+    max-width: 800px;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+
+/* Title and description - ensure visibility */
+.title-text{
+    background-color: transparent !important;
+    color: #fff !important;
+    text-align: center !important;
+}
+.h1, h1 {
+    font-size: 40px !important;
+    font-family:'Jacques Francois', serif;
+    margin: 10px 0 !important;
+}
+.description-text{
+    font-size: 20px !important;
+    font-family:'Jacques Francois', serif;
+    margin: 10px 0 !important;
+    background-color: transparent !important;
+    color: #fff !important;
+    text-align: center !important;
+}
+.jacques-francois-regular {
+    font-family: "Jacques Francois", serif;
+    font-weight: 400;
+    font-style: normal;
+  }
+
+
+/* Logo styling */
+.logo-container {
+    background-color: #0B0F19 !important; /* Background color for the logo container */
+    margin: 10px 0 !important;
+    padding: 30px !important;  /* Adjust padding if necessary */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height:120px !important; 
+    width: 400px !important;
+}
+
+/* Optional: Add some padding around the logo image */
+.logo-container img {
+    object-fit: contain !important;  /* Ensure image scales properly */
+    max-height: 100% !important;  /* Make sure the image fits the container */
+}
+.logo-container-system {
+    background-color: #E4E4E7 !important; /* Background color for the logo container */
+    margin: 10px 10px !important;  
+    text-align: left !important;  
+    height: 80px !important;  
+    width: 200px !important;
+}
+
+/* Optional: Add some padding around the logo image */
+.logo-container-system img {
+    display: inline-block;
+    vertical-align: middle;
+}
+
+/* Button styling */
+.trial-button {
+    background-color: #E67E22 !important;
+    color: white !important;
+    border: none !important;
+    border-radius: 15px !important;
+    padding: 10px 30px !important;
+    font-size: 16px !important;
+    /* Make it center so margin has to be auto*/
+    margin: 20px auto !important;
+    cursor: pointer !important;
+    max-width: 200px !important;  /* Limit the button width */
+    text-align: center !important;
+    display: flex !important;
+    justify-content: center !important;
+}
+
+
+
+.back-button {
+    margin-top: 20px !important;
+    margin: 20px auto !important;
+    padding: 10px 30px !important;
+    font-size: 16px !important;
+    border-radius: 15px !important;
+    background-color: #E67E22  !important;
+    color: white !important;
+    border: none !important;
+    cursor: pointer !important;
+    max-width: 200px !important;
+}
+.system-page-description{
+    font-size: 20px !important;
+    color: #000000 !important;
+    text-align: center !important;
+    margin: 40px 40px!important;
+    /* padding: 40px 40px!important; */
+    background-color: transparent !important;
+}
+
+
+
+
+.project-container {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 20px;
+}
+
+.project-container .project-title {
+    text-align: center;
+    font-size: 30px !important;
+    margin: 0 auto;
+}
+
+.upper-content {
+    display: flex;
+    flex-direction: row;
+    gap: 30px;
+    padding-top: 20px;
+}
+
+.left-upper-column {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+}
+
+.right-upper-column {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.chart {
+    font-family: 'Jacques Francois', serif;
+    width: 100%;
+    background-color: white;
+    border-radius: 10px;
+    padding: 10px;
+}
+
+.chart-image {
+    width: 100%;
+    height: auto;
+}
+
+.chart-caption {
+    text-align: center;
+    font-size: 12px;
+    margin-top: 10px;
+    color: #333;
+}
+
+.herbicide-description {
+    padding: 20px 0;
+    font-size: 20px;
+    text-align: justify;
+}
+
+.herbicide-title {
+    margin-top: -40px;
+    margin-bottom: 20px;
+    font-size: 50px;
+    text-align: center;
+}
+span.bold-red{
+    font-family: 'Jacques Francois', serif;
+    font-size: 20px;
+    color:red;
+    font-weight: bold;
+}
+
+
+.middle-content {
+    display: flex;
+    flex-direction: row;
+    gap: 30px;
+    padding-top: 20px;
+}
+
+.left-middle-column {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+
+}
+
+.right-middle-column {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.objective-description {
+    padding: 20px;
+
+}
+
+.objective-title {
+    font-size: clamp(30px, 5vw, 50px); /* Responsive font size */
+    white-space: nowrap;
+    margin-bottom: 20px;
+    text-align: left;
+}
+
+.objective-text {
+    font-size: 20px;
+    line-height: 1.6;
+    text-align: justify;
+    color: #333;
+}
+
+:root {
+    --size-width: 400px;
+    --size-height: 250px;
+  }
+  
+  .carousel-wrapper {
+    width: calc(var(--size-width) * 1.3);
+    height: calc(var(--size-height) * 1.4);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    box-shadow: 5px 5px 25px 0px rgba(46, 61, 73, 0.2);
+    border-radius: 15px;
+  }
+  
+  .carousel-container {
+    width: var(--size-width);
+    height: var(--size-height);
+    overflow: hidden;
+    margin: 0 auto;
+    font-size: 16px;
+    font-weight:bold;
+    font-family: 'Jacques Francois', serif;
+  }
+  
+  .carousel {
+    display: flex;
+    width: calc(var(--size-width) * 3);
+    animation: sliding 6s infinite;
+  }
+  
+  
+  .carousel div {
+    width: var(--size-width);
+    height: var(--size-height);
+    background-size: cover;
+    background-position: center;
+  }
+  
+  .carousel:hover {
+    animation-play-state: paused;
+  }
+  
+  .image-one {
+    background-image: url("https://i.ibb.co/0jpWh4CD/Dock-Weed-1.jpg");
+  }
+  
+  .image-two {
+    background-image: url("https://i.ibb.co/1f7zdPMk/Dock-Weed-2.jpg");
+  }
+  
+  .image-three {
+    background-image: url("https://i.ibb.co/4Z1YffPd/Dock-Weed-3.jpg");
+  }
+  
+  @keyframes sliding {
+    30% {
+      transform: translateX(0);
+    }
+    35% {
+      transform: translateX(calc(var(--size-width) * -1));
+    }
+    65% {
+      transform: translateX(calc(var(--size-width) * -1));
+    }
+    70% {
+      transform: translateX(calc(var(--size-width) * -2));
+    }
+    98% {
+      transform: translateX(calc(var(--size-width) * -2));
+    }
+    100% {
+      transform: translateX(0);
+    }
+  }
+  
+  @media screen and (max-width: 768px) {
+    :root {
+      --size-width: 240px;
+      --size-height: 150px;
+    }
+  }
+  .bottom-content {
+    display: flex;
+    flex-direction: row;
+    gap: 30px;
+    padding: 20px 0;
+    background-image: url('path-to-your-green-background.jpg');
+    background-size: cover;
+    background-position: center;
+    color: white;
+    border-radius: 10px;
+    margin-top: 10px;
+}
+
+.left-bottom-column {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    padding: 20px;
+}
+
+.right-bottom-column {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 20px;
+}
+
+.benefits-description {
+    width: 600px;
+    height: 300px;
+    text-align: left;
+    background-color: white;
+    border: 10px;
+    border-radius: 20px;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
+
+
+}
+
+.benefits-title {
+    font-size: clamp(30px, 5vw, 50px);
+    text-align: center;
+    margin-bottom: 20px;
+    font-weight: bold;
+}
+
+.benefits-text {
+    font-size: 18px;
+    line-height: 1.8;
+    text-align: left;
+    padding-left: 20px;
+}
+
+.benefits-text br {
+    margin-bottom: 10px;
+}
+
+.model-image {
+    margin: 20px auto;
+    width: 100%;
+    height: auto;
+    max-width: 400px; /* Limit the image width */
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
+    background-color: #fff;
+}
+
+
+/* For bullet points, you can use this instead of <br> */
+.benefits-list {
+    list-style-type: disc;
+    padding-left: 40px;
+}
+
+.benefits-list li {
+    margin-bottom: 10px;
+    font-size: 18px;
+    font-weight: bold;
+}
+.author-section {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 30px 20px;
+    font-family: 'Jacques Francois', serif;
+}
+
+.author-title {
+    text-align: center;
+    font-size: 40px;
+    margin-bottom: 40px;
+}
+
+.author-content {
+    display: flex;
+    flex-direction: row;
+    gap: 40px;
+    align-items: center;
+}
+
+.author-image-container {
+    flex: 0 0 200px;
+}
+
+.author-image {
+    width: 100%;
+    border-radius: 10px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+}
+
+.author-bio {
+    flex: 1;
+}
+
+.author-text {
+    font-size: 18px;
+    line-height: 1.6;
+    margin-bottom: 30px;
+    text-align: justify;
+}
+
+.social-links {
+    display: flex;
+    gap: 20px;
+    margin-top: 20px;
+}
+
+.social-link {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    text-decoration: none;
+    color: #2a6a39;
+    font-weight: bold;
+    padding: 10px 15px;
+    border-radius: 5px;
+    background-color: #f5f5f5;
+    transition: all 0.3s ease;
+}
+
+.social-link:hover {
+    background-color: #e0e0e0;
+    transform: translateY(-2px);
+}
+
+.social-icon {
+    width: 24px;
+    height: 24px;
+}
+
+
+
+
+
+
+@media (max-width: 1200px) {
+    .upper-content {
+        flex-direction: column;
+    }
+    .middle-content {
+        flex-direction: column; /* This would stack elements on small screens */
+    }
+    .bottom-content {
+        flex-direction: column;
+    }
+    .author-content {
+        flex-direction: column;
+        text-align: center;
+    }
+    
+    .author-image-container {
+        max-width: 150px;
+        margin: 0 auto;
+    }
+    
+    .social-links {
+        flex-direction: column;
+        align-items: center;
+    }
+    
+    .social-link {
+        width: 80%;
+        justify-content: center;
+    }
+}
+
+.api-introduction-section {
+    font-family: 'Jacques Francois', serif;
+    background-color: #ffffff;
+    border-radius: 12px;
+    padding: 25px;
+    margin: 20px auto;
+    max-width: 800px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    border: 1px solid #e0e0e0;
+}
+
+.api-page-title {
+    color: #000000;
+    text-align: center;
+    font-size: 28px;
+    margin-bottom: 20px;
+    border-bottom: 2px solid #2e7d32;
+    padding-bottom: 10px;
+}
+
+.api-page-description {
+    font-size: 20px;
+    line-height: 1.6;
+    margin-bottom: 25px;
+    color: #424242;
+}
+
+.needed-tools {
+    background-color: rgba(46, 125, 50, 0.1);
+    border-radius: 8px;
+    padding: 15px;
+    margin: 20px 0;
+    text-align: center;
+}
+
+.needed-tools h3 {
+    color: #010201;
+    margin-top: 0;
+    font-size: 20px;
+}
+
+.tool-icons {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 20px;
+    margin-top: 15px;
+}
+
+.tool-icon {
+    height: 50px;
+    border-radius: 8px;
+    transition: transform 0.3s ease;
+}
+
+.tool-icon:hover {
+    transform: scale(1.1);
+}
+
+.api-link-section {
+    margin: 25px 0;
+    text-align: center;
+}
+
+.api-link-section h3 {
+    color: #030503;
+    margin-bottom: 15px;
+}
+
+.api-link-button {
+    display: inline-block;
+    background-color: #2e7d32;
+    color: white;
+    padding: 12px 24px;
+    border-radius: 6px;
+    text-decoration: none;
+    font-weight: bold;
+    transition: background-color 0.3s ease;
+}
+
+.api-link-button:hover {
+    background-color: #1b5e20;
+    text-decoration: none;
+}
+.api-link-description{
+    font-size: 18px;
+    line-height: 1.6;
+    margin-top: 20px;
+    margin-bottom: 25px;
+    color: #424242;
+    text-align: center;
+}
+
+.how-to-use {
+    background-color: rgba(92, 107, 192, 0.1);
+    border-radius: 8px;
+    padding: 15px 30px;
+    margin: 20px 0;
+}
+
+.how-to-use h3 {
+    color: #3949ab;
+    margin-top: 0;
+}
+
+.how-to-use ol {
+    margin-left: 20px;
+    padding-left: 0;
+}
+
+.how-to-use li {
+    margin-bottom: 10px;
+    color: #424242;
+    text-align: left;
+}
+
+.model-playground-container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 20px;
+    background-color: #f9f9f9;
+    border-radius: 10px;
+}
+.model-playground-header {
+    font-size: 30px;
+    text-align: center;
+    color: #333;
+    margin-bottom: 15px;
+    font-family: 'Jacques Francois', serif;
+}
+.model-playground-description {
+    font-size: 18px;
+    line-height: 1.6;
+    color: #555;
+    margin-bottom: 30px;
+    padding: 10px;
+    font-family: 'Jacques Francois', serif;
+}
+
+.download-image-header, .select-model-header {
+    color: #000000;
+    font-size: 24px;
+    font-family: 'Jacques Francois', serif;
+    margin-bottom: 10px;
+}
+.download-image-description, .select-model-description {
+    color: #555555;
+    font-size: 18px;
+    font-family: 'Jacques Francois', serif;
+    margin-bottom: 15px;
+}
+.section-container {
+    padding: 15px;
+    border-radius: 8px;
+    background-color: #f5f5f5;
+    height: 100%;
+}
+
+.model-selection-container {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+}
+
+/* Additional styling for the radio button itself */
+.model-selection-radio .gr-form {
+    display: flex;
+    justify-content: center;
+}
+
+/* Style for the radio button label */
+.model-selection-radio label {
+    text-align: center;
+}
+.advice-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    max-width: 1200px;
+    margin-top: 20px;
+    padding: 15px;
+    border-radius: 10px;
+    background-color: #f8f9fa;
+
+}
+
+.advice-header {
+    color: #333;
+    font-size: 24px;
+    font-family: 'Jacques Francois', serif;
+    text-align: center;
+    margin-bottom: 10px;
+}
+
+.advice-description {
+    color: #555;
+    font-size: 16px;
+    text-align: center;
+    margin-bottom: 20px;
+}
+
+.advice-card {
+    border-radius: 8px;
+    padding: 20px;
+    margin-bottom: 15px;
+    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+}
+
+.high-risk {
+    border-left: 5px solid #d9534f;
+    background-color: #fff8f8;
+}
+
+.medium-risk {
+    border-left: 5px solid #f0ad4e;
+    background-color: #fffcf5;
+}
+
+.low-risk {
+    border-left: 5px solid #5cb85c;
+    background-color: #f5fff5;
+}
+
+.advice-card h3 {
+    margin-top: 0;
+    color: #333;
+    font-size: 20px;
+    margin-bottom: 15px;
+}
+
+.advice-content {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 15px;
+}
+
+.advice-section {
+    flex: 1 1 calc(33.333% - 15px);
+    min-width: 250px;
+}
+
+.advice-section h4 {
+    color: #555;
+    margin-bottom: 8px;
+    font-size: 16px;
+}
+
+.advice-section ul {
+    margin: 0;
+    padding-left: 20px;
+}
+
+.advice-section li {
+    margin-bottom: 5px;
+}