* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    /* border: 1px solid red !important; */
}

.fa, .fab {
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
}

body, html {
    background-color: transparent; /* changed from white */
    background-image: none;
    max-width: 100vw;
    overflow-x: hidden;
    font-size: 16px;
    color: #070606;
    font-family: Arial, Helvetica, sans-serif;
    padding-top: 60px;
    scroll-padding-top: 60px;
}

h1 {
    font-size: 2rem;
    font-weight: bold;
    background-color: #3F007E;
    color: #FF3399;
    padding: 0.5rem 1rem;
    text-align: center;
}

h2 {
    font-size: 1.75rem;
    font-weight: bold;
    background-color: #3F007E;
    color: #FF3399;
    padding: 0.5rem 1rem;
    border: 0.25rem solid #FF3399;
    text-align: center;
    margin: 0.5rem;
    font-family: "Arial Black";
}

h3 {
    font-size: 1.5rem;
    font-weight: bold;
    background-color: #3F007E;
    color: #FFC000;
    padding: 0.5rem 1rem;
    text-align: center;
    font-family: "Arial Black";
}

h4 {
    font-size: 1.25rem;
    font-weight: bold;
    color: #FFC000;
    text-align: center;
}

h5 {
    font-size: 1.25rem;
    font-weight: bold;
    background-color: #3F007E;
    color: #FFC000;
    text-align: center;
    padding: 0.5rem 1rem;
    border-radius: 15px;
    font-family: "Arial Black";
}

p, ul, li {
    font-size: 1rem;
}

li {
    list-style-type: disc;
    margin-left: 1.5rem;
    margin-top: 0;
    margin-bottom: 0;
}

strong {
    color: #FF3399;
    font-weight: bold;
    font-family: "Arial Black";
    font-size: clamp(1rem, 2vw, 1.1rem);
}

em {
    color: #FF3399;
    font-style: italic;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

b {
    color: #E6CDFF;
    font-style: italic;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.left_right {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px; /* Adjust the spacing between text and image */
    width: 100%;
}

.text-content {
    flex: 1; /* The text will take up remaining space */
}

.image-content {
    flex: 0 0 60%; /* The image container takes up 40% of the width */
}

.stats-icons {
    width: 100%;
    height: auto;
    border-radius: 10px;
}

.navigation {
    display: block;
}

.navbar_content {
    display: flex;
    justify-content: space-between;
    background-color: #FFC000;
    padding: 0;
    border-radius: 15px;
    position: fixed; /* Fixes the navbar to the viewport */
    top: 0; /* Sticks the navbar to the top of the page */
    left: 0;
    right: 0;
    z-index: 1000; /* Ensures the navbar stays on top of other content */
    opacity: 0.7;
}

.navbar_index {
    display: flex;
    flex-grow: 1; /* Makes the navbar index occupy the full width */
    justify-content: space-between; /* Distributes the links evenly */
}

/* Navbar - retain hover color once clicked */
.navbar_index a {
    color:#3F007E;
    font-weight: bold;
    padding: 0.5rem 1rem;
    align-content: safe center;
    font-family: "Arial Black";
}

.navbar_index a:hover {
    background-color:  #FF3399;
}

.navbar_index a.active {
    background-color:  #FF3399; /* Retain hover color after click */
    color: #FFC000;
}

.navbar_toggle {
    background-color: #D0B6FF;
}

header {
    border-top: 0.2rem double #3F007E;
    border-bottom: 0.2rem double #3F007E;
    height: 40%;
}

.hero_business_card img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 18px;
}

.hero_lower_row {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
    margin-top: 1.5rem;
}

.hero_portrait_area {
    flex: 1;
}

.hero_portrait_area .photo-DV-portrait {
    width: 100%;
    max-width: 320px;
    border-radius: 18px;
    display: block;
}

.hero_links_area {
    flex: 1;
}

.hero_links_area h2 {
    color: #3F007E;
    margin-bottom: 1rem;
}

.badge_sociallinks {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.8rem 1.2rem;
}

.badge_sociallinks a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.55rem 0.75rem;
    border-radius: 10px;
    background-color: #E6CDFF;
    text-decoration: none;
    color: #3F007E;
    font-weight: 600;
    transition: all 0.25s ease;
}

.badge_sociallinks a:hover {
    background-color: #FFC000;
    color: #3F007E;
}

.badge_sociallinks img {
    margin-left: 0.5rem;
    object-fit: contain;
}

.logo_left img, 
.logo_right img {
    display: block;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0 auto;
    margin-bottom: 0;
}

.badge_container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    text-align: center;
}

#datascience .project-summary {
    margin-bottom: 1rem;
}

#lifescience .project-summary img {
    margin-top: 1rem;
}

/* ===============================
   Project summaries inside ML/NLP portfolio tabs
   =============================== */

.project-summary {
    background-color: rgba(255, 255, 255, 0.35);
    border-left: 0.35rem solid #FF3399;
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 6px rgba(63, 0, 126, 0.08);
}

.project-summary h4 {
    color: #3F007E;
    margin-top: 0;
    margin-bottom: 0.75rem;
    font-size: clamp(1rem, 2vw, 1.35rem);
}

.project-summary p {
    margin-bottom: 0.75rem;
    line-height: 1.5;
}

.project-summary ul {
    margin-left: 1.5rem;
    margin-bottom: 1rem;
}

.project-summary li {
    margin-bottom: 0.4rem;
}

.project-summary strong {
    color: #FF3399;
}

.project-summary a {
    display: inline-block;
    margin-right: 1rem;
    margin-bottom: 0.5rem;
    color: #3F007E;
    font-weight: 500;
    text-decoration: underline;
}

.project-summary a:hover {
    color: #FFC000;
}

.project-summary img {
    display: block;
    margin-top: 0.75rem;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(63, 0, 126, 0.12);
}

.project-links {
    margin-top: 1rem;
}

.project-links a {
    display: inline-block;
    margin-right: 1rem;
    margin-bottom: 0.5rem;
    color: #3F007E;               /* dark purple = readable and elegant */
    font-weight: bold;
    text-decoration: none;
    border-bottom: 1px solid #3F007E;
    padding-bottom: 1px;
    transition: all 0.3s ease;
}

.project-links a:hover {
    color: #FF3399;
    border-bottom-color: #FF3399;
}

.consulting-form {
    margin-top: 1rem;
}

.consulting-form .form-row {
    display: flex;
    flex-direction: column;
    margin-bottom: 0.9rem;
}

.consulting-form label {
    font-weight: bold;
    color: #3F007E;
    margin-bottom: 0.25rem;
}

.consulting-form input,
.consulting-form select,
.consulting-form textarea {
    padding: 0.65rem 0.75rem;
    border: 1px solid #C9B6E4;
    border-radius: 8px;
    background-color: #FFFFFF;
    color: #070606;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1rem;
}

.consulting-form textarea {
    resize: vertical;
    min-height: 8rem;
}

.consulting-form input:focus,
.consulting-form select:focus,
.consulting-form textarea:focus {
    outline: none;
    border-color: #FF3399;
    box-shadow: 0 0 0 2px rgba(255, 51, 153, 0.15);
}

.form-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.form-consent label {
    font-weight: normal;
    color: #3F007E;
}

.consulting-submit {
    background-color: #3F007E;
    color: #FFC000;
    border: 0.2rem solid #FFC000;
    border-radius: 15px;
    padding: 0.6rem 1.1rem;
    cursor: pointer;
    font-weight: bold;
    width: fit-content;
}

.consulting-submit:hover {
    background-color: #FF3399;
}

#workwithme .project-summary {
    margin-bottom: 1rem;
}



@media (min-width: 768px) {
    .badge_container {
        flex-direction: row;
        justify-content: flex-start;
        align-items: flex-start;
        text-align: left;
    }

    .logo_left {
        flex: 0 0 200px;
        margin-right: 40px;
    }

    .badge_bottom_section {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .photo-DV-portrait {
        width: 200px;
        height: auto;
        margin-bottom: 10px;
    }

    .badge_links {
        margin-top: 0;
    }

    .badge_sociallinks {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
}


.logo_left {
    margin-bottom: 0; /* Space below the logo */
}

.badge_bottom_section {
    display: flex; /* Arrange the portrait and links side by side */
    flex-direction: row; /* Align items horizontally */
    align-items: center; /* Vertically align the items */
    justify-content: center; /* Center the items within this section */
    width: 100%; /* Ensure it takes up the full width */
    padding-top: 0;
    margin-top: 0;
}

.photo-DV-portrait {
    width: 60%; /* Adjust the width of the portrait */
    margin-right: 1rem; /* Space between the portrait and the links */
    border-radius: 10px;
    padding-top: 0;
    margin-top: 0;
}

.badge_links {
    display: flex;
    flex-direction: column; /* Stack the links vertically */
    align-items: center; /* Align links to the left */
    justify-content: center; /* Vertically center the content */
    padding: 0.5rem;
    background-color: #3F007E;
    border-radius: 10px;
    width: 40%; /* Adjust the width of the links section */
}

.badge_sociallinks {
    display: flex;
    flex-direction: column;
    gap: 1rem; /* Spacing between social links */
}

.badge_sociallinks a {
    color: #FFC000;
}

.badge_sociallinks img {
    width: 20px;
    height: 20px;
    fill: #ffffff; /* Change color of the SVG */
    margin-left: 0.5rem;
}

.badge_sociallinks img:hover {
    fill: #1c94eb; /* Change color on hover */
}

.infobox_container {
    display: flex;
    flex-direction: column;
    width: 60%; /* Right section */
    margin: 0 auto; /* Centers the section */
    padding: 1rem;
    box-sizing: border-box;
    overflow: hidden;
}

#Biography {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0.5rem 0;
    margin-bottom: 0.5rem;
}

.infobox_tab {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 0.1rem;
}

/* Infobox tabs - retain hover color once clicked */
button.infobox_tab_button {
    background-color: #3F007E;
    color: #FFC000;
    padding: 0.25rem 0.5rem;
    margin: 0.1rem 0.5rem;
    border-radius: 15px;
    border: 0.2rem solid #FFC000;
}

button.infobox_tab_button:hover {
    background-color:#FF3399;
}

button.infobox_tab_button.active {
    background-color:#FF3399; /* Retain hover color after click */
    color: #3F007E;
    border-radius: 15px;
}

.infobox_tab_scrollable {
    display: none; /* Initially hidden */
    overflow-y: auto; /* Enable vertical scrolling */
    overflow-x: hidden; /* Hide horizontal overflow */
    padding: 1rem;
    background-color: #E6CDFF;
    border-radius: 10px;
    border: 1px solid #ddd;
    flex-direction: column;
    justify-content: flex-start;
    padding-bottom: 0;
    height: 80%;
    max-height: 90%;
    max-width: 100%;
    word-wrap: break-word;
}

.infobox_tab_scrollable.active {
    display: block; /* Show when active */
}

.infobox_tab_scrollable ul {
    list-style-type: disc;
    margin-left: 1.5rem;
    margin-top: 0;
    margin-bottom: 0;
}

.infobox_tab_scrollable p {
    margin-bottom: 0;
    margin-top: 0.25rem;
}

#Biography, #Skills, #Portofolio, #Learning {
    display: flex;
    flex-direction: row; /* Aligns content horizontally */
    justify-content: center; /* Centers the content horizontally */
    align-items: center; /* Aligns content vertically */
    border-top: 0.2rem double #3F007E;
    border-bottom: 0.2rem double #3F007E;
    flex-wrap: wrap; /* Allows wrapping if content exceeds container width */
    width: 80%; /* Matches the width used for #Certificates */
    margin: 0 auto; /* Centers the section on the page */
}

#Biography h2, #Skills h2, #Portofolio h2, #Learning h2 {
    margin-bottom: 10px;
    width: 100%; /* Ensures the title takes up the full width */
    text-align: center; /* Centers the heading text */
}

#Biography a, #Skills a, #Portofolio a, #Learning a {
    color: initial; /* Default color for your links */
    background-color: initial;
    text-decoration: none; /* Remove underline by default */
    transition: color 0.3s ease; /* Smooth transition for color changes */
}

#Biography a:hover, #Skills a:hover, #Portofolio a:hover, #Learning a:hover {
    color: #FFC000; /* Change color when hovered */
    background-color: initial; /* Reset any background color */
    text-decoration: none;
}

#Biography a:focus,
#Biography a:active,
#Skills a:focus,
#Skills a:active,
#Portofolio a:focus,
#Portofolio a:active {
    color: #FFC000; /* Retain the color when clicked or focused */
    text-decoration: none; /* Ensure no underline on active or focus */
}
#Learning a:focus,
#Learning a:active {
    color: #FFC000; /* Retain the color when clicked or focused */
    text-decoration: none; /* Ensure no underline on active or focus */
}

.skills_tab_button:hover, .portofolio_tab_button:hover, .learning_tab_button:hover {
    background-color: #FFC000; /* Adds a hover effect */
}


.skillbox_container {
    display: flex;
    flex-wrap: wrap;
    width: 80%;
    align-items: center;

}

.skills_tab, .portfolio_tab, .portofolio_tab {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

/* General Styles for Scrollable Tabs (Skills and Portfolio) */
.skills_tab_scrollable, 
.portofolio_tab_scrollable,
.learning_tab_scrollable {
    display: none; /* Initially hide all tabs */
    width: 100%;
    padding: 1rem;
    background-color: #E6CDFF;
    border-radius: 10px;
    border: 1px solid #ddd;
    overflow-y: auto; /* Enable vertical scrolling */
    overflow-x: hidden;
    flex-direction: column;
    justify-content: flex-start;
    padding-bottom: 0;
    max-height: 40rem;
    max-width: 100%;
    word-wrap: break-word;
}

/* Styles for Buttons in Skills and Portfolio */
.skills_tab_button, 
.portofolio_tab_button,
.learning_tab_button {
    width: auto; /* Adjust width based on content */
    padding: 10px;
    margin: 5px;
    text-decoration: none;
    background-color: #E6CDFF;
    border: 1px solid #ddd;
    border-radius: 5px;
}

/* Active tab content */
.skills_tab_scrollable.active, 
.portofolio_tab_scrollable.active,
.learning_tab_scrollable.active {
    display: block; /* Show only the active tab */
}

.skills_tab_scrollable ul, .portofolio_tab_scrollable ul, .learning_tab_scrollable ul {
    list-style-type: disc;
    margin-left: 1.5rem;
}

.skills_tab_scrollable p, .portofolio_tab_scrollable p, .learning_tab_scrollable p {
    margin-bottom: 1rem;
}

.skills_tab_scrollable strong, .portofolio_tab_scrollable strong, .learning_tab_scrollable strong {
    color: #FF3399;
    font-weight: bold;
}

.skills_tab_scrollable  a, .portofolio_tab_scrollable a, .learning_tab_scrollable a {
    text-indent: 1rem;
    margin-left: 1.5rem;
}

/* Skills tabs - retain hover color once clicked */
button.skills_tab_button, button.portofolio_tab_button, button.learning_tab_button {
    background-color: #3F007E;
    color: #FFC000;
    padding: 0.5rem 1rem;
    margin: 0.25rem 1rem;
    border-radius: 15px;
    border: 0.2rem solid #FFC000;
}

button.skills_tab_button:hover, button.portofolio_tab_button:hover, button.learning_tab_button:hover {
    background-color: #FF3399;
}

button.skills_tab_button.active, button.portofolio_tab_button.active, button.learning_tab_button.active {
    background-color: #FF3399; /* Retain hover color after click */
    color: #FFC000;
    border-radius: 15px;
}

#editor a, #storytelling a, #bigdata a, #systemsbiology a, #datascience a, #lifescience a, #Biography a,
#patents a, #youtube a, #webdesign a, #codecademycareer a, #codecademycareerML a, #codecademyskill a, #codecademyskill2 a, #codecademyprompt a {
    text-decoration: underline;
    color:  #3F007E;
}

#Certificates {
    display: flex;
    flex-direction: row; /* Changes the direction to horizontal (row) */
    justify-content: center; /* Centers the content horizontally */
    align-items: center; /* Aligns items vertically */
    border-top: 0.2rem double #3F007E;
    border-bottom: 0.2rem double #3F007E;
    flex-wrap: wrap; /* Ensures that links wrap to the next line if they overflow */
}

#Certificates h2 {
    margin-bottom: 10px; /* Adds spacing between the title and the links */
    width: 100%; /* Ensures the title takes up the full width of the container */
    text-align: center; /* Centers the heading text */
}

#Certificates a {
    display: inline-block;
    width: auto; /* Adjusts the width automatically based on content */
    text-align: center;
    padding: 10px;
    margin: 5px;
    text-decoration: none;
    background-color: #E6CDFF;
    border: 1px solid #ddd;
    border-radius: 5px;
}

#Certificates a:hover {
    background-color: #D0B6FF; /* Adds a hover effect */
}


.footer_content {
    padding: 1rem;
    background-color: #3F007E;
    color: #FFC000;
    text-align: center;
    margin-bottom: 0;
}

.footer_content div {
    margin-top: 1.25rem;
}

.footer_content p {
    margin-bottom: 0;
}

.footer_sociallinks {
    margin: 0 auto;
    color: #FFC000;
}

.footer_sociallinks a {
    display: inline-block;
    margin: 0 .75rem;
    color: #FF3399;
}



/* Ensure that the container resizes flexibly */
.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 80%; /* Takes 80% of the viewport width */
    margin: 0 auto; /* Centers the container */
}

/* Ensure that images or sections resize appropriately */
.container img {
    max-width: 100%;
    height: auto;
}

/* fluid typography */
h1, h2, h3, h4 {
    font-size: clamp(1rem, 2.5vw, 2rem); /* Adjusts between 1.5rem and 2rem based on viewport width */
}

p, ul, li, em {
    font-size: clamp(0.9rem, 2vw, 1.2rem);
}

/* Responsive images and media */
img, video {
    max-width: 100%;
    height: auto;
}

/* Styles for small screens (mobile) */
@media (max-width: 600px) {
    .navbar_content {
        flex-direction: column; /* Stack navigation elements */
    }

    .navbar_index {
        display: none; /* Initially hide the nav links */
    }

    .navbar_toggle {
        display: block; /* Add a toggle button for mobile */
    }

    .navbar_content.active .navbar_index {
        display: flex;
        flex-direction: column;
    }

    .infobox_container {
        flex-direction: column; /* Ensure stacking for small screens */
        width: 100%; /* Ensure it takes up full width on small screens */
        padding: 0.5rem; /* Adjust padding */
    }

    .infobox_container, .badge_container {
        padding: 1rem;
    }

    .infobox_tab_button {
        font-size: 0.9rem; /* Reduce font size */
    }

    .infobox_tab_scrollable {
        max-width: 100%; /* Ensure no overflow */
        margin-bottom: 1rem; /* Add space below the section */
        max-height: 20rem;
    }

    .left_right {
        flex-direction: column; /* Stack content vertically */
        padding: 0.5rem;
    }

    .text-content, .image-content {
        width: 100%; /* Full width for both content and image */
        padding: 0.5rem 0; /* Add padding for readability */
    }

    .container {
        width: 100%;
        padding: 0.5rem;
    }   
}

/* Styles for medium screens (tablet) */
@media (min-width: 601px) and (max-width: 1200px) {
    .navbar_content {
        flex-direction: row;
    }
}

/* Styles for large screens (desktop) */
@media (min-width: 1201px) {
    .navbar_content {
        flex-direction: row;
    }
}

/* Responsive behavior for smaller screens */
@media (max-width: 768px) {
    .skills_tab_scrollable {
        flex-direction: column; /* Stack sections vertically on small screens */
    }

    .left_section, .right_section {
        width: 100%; /* Ensure full width on smaller screens */
        padding: 0; /* Remove padding on small screens */
        text-align: center; /* Center-align text and image on smaller screens */
    }

    .right_section {
        max-width: none; /* Remove the max-width constraint */
    }
}

/* === Fullscreen Background Video === */
#background-video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: -1;
  opacity: 0.3;
  pointer-events: none;
  background-color: white; /* fallback if video fails */
}

/* === Responsive for small vertical screens (smartphones) ==*/
@media screen and (max-width: 768px) {
    .badge_container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    gap: 10px;
    margin-bottom: 40px;
    flex-wrap: wrap;
    }

    .badge_left_column {
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: stretch;
    align-items: center;
    min-width: 150px;
    max-width: 300px;
    }

  .logo_left {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: stretch;
    flex: 1;
  }

    .logo_left img,
    .photo-DV-portrait {
    width: 100%;
    height: 100%;
    object-fit: contain;
    flex: 1;
    }

  .badge_bottom_section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: stretch;
    flex: 1;
  }

  .photo-DV-portrait {
    width: 100%;
    height: 50%;
    object-fit: contain;
  }

  .badge_links {
    flex-grow: 1;
    width: 100%;
    height: 100%;
    justify-content: center;
    display: flex;
    flex-direction: column;
  }

  .badge_sociallinks {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    flex-grow: 1;
  }

    .main-biography-container {
    display: block; /* stacked by default for mobile */
    padding: 0 20px;
    }


  /* Optional: ensure the left and right sections remain same height */
  .logo_left, .badge_bottom_section {
    min-height: 100vw;
  }
}

/* --- Responsive: side-by-side layout on wide screens --- */
@media screen and (min-width: 1000px) {
  .main-biography-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
    padding: 0 60px;
  }

  .badge_container {
    flex: 0 0 300px; /* fixed width for sidebar */
  }

  .biography-content {
    flex: 1;
    max-width: 100%;
  }
}

/* ====================
   Restore horizontal layout on wide screens
   ==================== */
@media screen and (min-width: 1000px) {
  .badge_biography_container {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 40px; /* spacing between left and right blocks */
  }

  .badge_left {
    flex: 0 0 320px; /* fixed width for left panel */
  }

  .badge_right {
    flex: 1; /* take remaining space */
  }
}

/* --- Responsive: side-by-side layout on screens larger than 768px--- */
@media (min-width: 768px) {
  .bio-tab-content {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: 40px;
    padding: 20px 40px;
  }

  .left_area {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 240px;
    flex-shrink: 0;
  }

  .bio-content {
    flex: 1;
    max-width: 800px;
  }
}

/* Always use large logo and portrait sizes unless on small screens */
.logo_left img {
  width: 280px;
  height: auto;
}

.photo-DV-portrait {
  width: 260px;
  height: auto;
}

/* Optional spacing */
.badge_container {
  gap: 40px;
}

/* responsive for large screen */
@media (min-width: 1200px) {
  .badge_container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    padding: 40px;
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
  }

  .badge_left {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 40%;
  }

  .badge_left img {
    width: 100%;
    height: auto;
    object-fit: contain;
    margin-bottom: 20px;
  }

  .badge_right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 60%;
  }

  .badge_right .badge_links {
    width: 100%;
  }

  .badge_right h2 {
    font-size: 1.8rem;
    margin-bottom: 20px;
  }

  .badge_sociallinks a {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    font-size: 1rem;
  }

  .badge_sociallinks img {
    margin-left: 10px;
    height: 20px;
    width: 20px;
  }
}

/* === WIDE SCREEN FIXES ONLY (min 1200px) === */
@media (min-width: 1200px) {
  /* Make photo, logo and badge links larger */
  .photo-DV-portrait {
    width: 300px !important;
    height: auto !important;
  }

  .logo_left {
    width: 260px !important;
    height: auto !important;
  }

  .badge_links {
    width: 180px !important;
    height: auto !important;
  }

  /* Increase margin under logo */
  .logo_left {
    margin-bottom: 15px;
  }

  /* Increase spacing between links and photo */
  .badge_links {
    margin-top: 10px;
  }

  /* Ensure left section is tall enough */
  .badge_container {
    min-height: 700px;
  }
}

.bot-message span.dv-citation {
    font-weight: 600;
    color: #3F007E;
}

/* =========================================
   HERO SECTION OVERRIDE - NEW BUSINESS CARD LAYOUT
   Put this at the VERY END of style.css
   ========================================= */

header.container {
    display: block;
    width: 80%;
    margin: 0 auto;
    padding: 2rem 0;
    border-top: 0.2rem double #3F007E;
    border-bottom: 0.2rem double #3F007E;
}

.badge_container {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 2rem !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 auto !important;
    text-align: left !important;
    min-height: unset !important;
}

.hero_business_card {
    display: block;
    width: 100%;
}

.hero_business_card img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 18px;
}

.hero_lower_row {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 2.5rem !important;
    width: 100% !important;
    margin-top: 0 !important;
}

.hero_portrait_area {
    flex: 0 0 410px !important;
    display: flex;
    justify-content: center;
}

.hero_portrait_area .photo-DV-portrait {
    display: block;
    width: 100% !important;
    max-width: 410px !important;
    height: auto !important;
    border-radius: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.hero_links_area {
    flex: 0 0 420px !important;
    display: flex;
    justify-content: center;
}

.badge_links {
    display: block !important;
    width: 100% !important;
    background-color: #3F007E !important;
    border-radius: 16px !important;
    padding: 1.25rem !important;
    margin: 0 !important;
}

.hero_links_area h2,
.badge_links h2 {
    background: transparent !important;
    border: none !important;
    color: #FF3399 !important;
    font-family: "Arial Black", Arial, Helvetica, sans-serif !important;
    font-size: 1.35rem !important;
    text-align: center !important;
    margin: 0 0 1rem 0 !important;
    padding: 0 !important;
    width: auto !important;
}

.badge_sociallinks {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(150px, 1fr)) !important;
    gap: 0.9rem 1rem !important;
    width: 100% !important;
}

.badge_sociallinks a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.75rem !important;
    background-color: #E6CDFF !important;
    color: #3F007E !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    padding: 0.75rem 0.9rem !important;
    border-radius: 12px !important;
    margin: 0 !important;
    min-height: 56px;
}

.badge_sociallinks a:hover {
    background-color: #FFC000 !important;
    color: #3F007E !important;
}

.badge_sociallinks img {
    width: 22px !important;
    height: 22px !important;
    margin-left: 0 !important;
    flex-shrink: 0;
}

/* Mobile */
@media (max-width: 900px) {
    header.container {
        width: 95%;
        padding: 1rem 0;
    }

    .hero_lower_row {
        flex-direction: column !important;
        align-items: center !important;
    }

    .hero_portrait_area,
    .hero_links_area {
        flex: 0 0 auto !important;
        width: 100% !important;
        max-width: 420px !important;
    }

    .hero_portrait_area .photo-DV-portrait {
        max-width: 300px !important;
        margin: 0 auto !important;
    }

    .badge_sociallinks {
        grid-template-columns: 1fr !important;
    }
}


.infobox_tab_button h4 {
    line-height: 1.15;
    margin: 0;
}

.infobox_tab_button {
    min-height: 88px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* =========================================
   BIOGRAPHY SECTION OVERRIDE
   ========================================= */

#Biography {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    width: 80% !important;
    max-width: 80% !important;
    margin: 2rem auto !important;
    padding: 0 !important;
    border-top: 0.2rem double #3F007E;
    border-bottom: 0.2rem double #3F007E;
}

#Biography h2 {
    width: 100% !important;
    text-align: center !important;
    margin-bottom: 10px !important;
}

#Biography .infobox_container {
    width: 60% !important;
    max-width: 60% !important;
    margin: 0 auto !important;
    padding: 1rem 0 !important;
    box-sizing: border-box;
}

#Biography .infobox_container {
    width: 60% !important;
    max-width: 60% !important;
}

#Biography .infobox_tab_scrollable {
    width: 100% !important;
    max-width: 100% !important;
}

/* biography buttons */
.infobox_tab {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.infobox_tab_button {
    min-height: 88px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.infobox_tab_button h4 {
    line-height: 1.15;
    margin: 0;
}

/* =========================================
   MOBILE CONSISTENCY OVERRIDE:
   Biography / Skills / Portfolio / Learning
   ========================================= */
@media (max-width: 900px) {
    #Biography,
    #Skills,
    #Portofolio,
    #Learning {
        width: 95% !important;
        max-width: 95% !important;
        margin: 1rem auto !important;
        padding: 0 !important;
    }

    #Biography .infobox_container,
    #Biography .infobox,
    #Biography .infobox_tab_content,
    #Skills .skillbox_container,
    #Portofolio .skillbox_container,
    #Learning .skillbox_container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0.5rem 0 !important;
        box-sizing: border-box;
    }

    #Biography .infobox_tab_scrollable,
    .skills_tab_scrollable,
    .portofolio_tab_scrollable,
    .learning_tab_scrollable,
    .infobox_tab_scrollable {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    .skills_tab,
    .portfolio_tab,
    .portofolio_tab,
    .learning_tab,
    .infobox_tab {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 0.75rem !important;
        width: 100% !important;
    }

    .skills_tab_button,
    .portofolio_tab_button,
    .learning_tab_button,
    .infobox_tab_button {
        width: 100% !important;
        max-width: 320px !important;
        margin: 0 !important;
    }
}