/* Adelphi Technology, CSS file */

:root {
  /*Some special colours*/
  --color-adelphi-blue: rgb(80, 157, 207);
  --color-adelphi-lightgrey: rgb(232, 232, 232);
  --color-adelphi-verylightgrey: rgb(245, 245, 245);

  /*website mechanics*/
  --color-homepage-cards-top: rgb(150, 150, 150);
  --color-homepage-cards-bottom: rgb(80, 157, 207);

  --color-menu-background: rgb(255, 255, 255);
  --color-menu-background-hover: var(--color-adelphi-blue);

  /*
  --color-menu-foreground: black;
  --color-menu-foreground-hover: white;
  --color-email-foreground: black;
  --color-email-hover: var(--color-adelphi-blue);
  --color-footer-foreground: black; */
  --color-footer-background: var(--color-adelphi-lightgrey);
  --color-page-background: white;
  --color-tables-title-bar: var(--color-adelphi-lightgrey);

  /*product colouring (table)*/

  --color-tables-title-bar: var(--color-adelphi-lightgrey);
  --color-DT-background-light: rgb(195, 220, 245);
  --color-DD-background-light: rgb(228, 239, 250);
  --color-Thermal-background-light: rgb(240, 240, 240);
}

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

html,
body {
  height: 100%;
  margin: 0;
  font-family: Arial, sans-serif;
}

.page-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.main-container {
  flex: 1;
}

.homepage-main-container {
  flex: 1;
}

/* Spacing the cards on the hompage */

/* 88888888888888888888888888888888888888888 */

/*

            HH  HH  EEEEEE     AA      DDDDD    EEEEEE  RRRR
            HH  HH  EE        AAAA     DD  DD   EE      RR  RR
            HHHHHH  EEE      AA  AA    DD   DD  EEE     RRRR
            HH  HH  EE      AAAAAAAA   DD  DD   EE      RR RR
            HH  HH  EEEEEE AA      AA  DDDDD    EEEEEE  RR  RR

Header (includes logo and navbar which includes dropdown menu)

*/

.navbar {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
  padding: 5px 50px 20px 50px;
  background-color: var(--color-menu-background);
}

/* Adelphi's logo - homepage button */
.navbar img {
  max-height: 50px;
}

.logo {
  background-color: var(--color-menu-background);
  font-size: 1.5rem;
  font-weight: bold;
}

.nav-links {
  display: flex;
  flex-wrap: wrap; /*Lets the flexboxes wrap -- looks crappy on screen but not iphone*/
  list-style: none;
  gap: 20px;
}

.nav-links li a {
  text-decoration: none;
  color: var(--color-menu-foreground);
  background-color: var(--color-menu-background);
  font-size: 1rem;
  /*border-radius: 5px;*/
  padding: 1rem;
  transition-duration: 250ms;
}

.nav-links li a:hover {
  color: var(--color-menu-foreground-hover);
  background-color: var(--color-menu-background-hover);
  border-radius: 5px;
  padding: 1rem;
}

/* DROPDOWN */

/* Dropdown wrapper */
.dropdown {
  position: relative;
}

/* Dropdown menu */
.dropdown-menu {
  display: none;
  position: absolute;
  top: 150%; /* 100% */
  left: 0;
  background-color: var(--color-menu-background);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  list-style: none;
  padding: 0;
  margin: 0;
  min-width: 200px;
  z-index: 1000;
}

/* Show dropdown on hover */
.dropdown:hover .dropdown-menu {
  display: block;
}

/* Dropdown items */
.dropdown-menu li a {
  display: block;
  padding: 10px 20px;
  color: var(--color-menu-foreground);
  text-decoration: none;
  white-space: nowrap;
}

.dropdown-menu li a:hover {
  background-color: var(--color-menu-background-hover);
  color: var(--color-menu-foreground-hover);
}

/* Visual divider */
.dropdown-divider {
  height: 1px;
  background-color: #ccc;
  margin: 5px 0;
}

/* transition */

.dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: var(--color-menu-background);
  padding: 0;
  margin: 0;
  list-style: none;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 1000;

  /* ✅ Remove transition/movement */
  transition: none;
}

/*

FFFFFF  OOOO    OOOO  TTTTTT  EEEEE RRRRR
FF     OO  OO  OO  OO   TT    EE    RR  RR
FFFFF  OO  OO  OO  OO   TT    EEE   RRRRR
FF     OO  OO  OO  OO   TT    EE    RR  RR
FF      OOOO    OOOO    TT    EEEEE RR   RR

Footer

*/

/*
footer {
    background-color: var(--color-footer-background);
    color: var(--color-footer-foreground);
    text-align: center;
    padding: 1rem;
  }
*/

footer {
  text-align: center;
  padding: 15px;
  background-color: var(--color-footer-background);
  color: var(--color-footer-foreground);
}

.footer-container {
  display: flex;
  justify-content: space-between; /* Distributes items evenly */
  flex-wrap: wrap; /*Lets the flexboxes wrap*/
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 20px;
  width: 100%; /* Ensures it stretches across the full width */
}

.footer-container p {
  margin: 0;
  font-size: 1rem;
  white-space: nowrap;
}

.footer-email {
  color: var(--color-email-foreground); /* Email link color */
  text-decoration: none;
  font-weight: normal;
}

.footer-email:hover {
  color: var(--color-email-hover); /* Email link color on hover */
  text-decoration: underline;
}

/*
.footer-container {
    display: flex;
    justify-content: space-between; 
    align-items: center; 
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 20px;
    width: 100%;
}
*/
.footer-flag img {
  height: 22px;
  width: auto;
  margin-left: 10px;
}

/*

MMMM   MMMM     AAA      IIII  NNM   NN
MM MM MM MM    AA AA      II   NNMM  NN
MM   M   MM   AAAAAAA     II   NN NN NN
MM       MM  AA     AA    II   NN  NNNN
MM       MM AA       AA  IIII  NN    NN

Main body of text

*/

/*Main body*/
main {
  flex-grow: 1;
}

main.main-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  padding: 2rem 1rem;
  max-width: 1200px;
  margin: 0 auto;
  min-height: 100%;
}

main.homepage-main-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  padding: 2rem 1rem;
  max-width: 1200px;
  margin: 0 auto;
  min-height: 100%;
}

/* Keep this for horizontal card layout */

/*
.card-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}
*/

/* styling for centering vertically */
.homepage-top-text,
.homepage-bottom-text {
  text-align: justify;
  /*max-width: 800px;*/
  margin: 0 auto;
  padding-top: 1rem;
  padding-bottom: 2rem;
  line-height: 1.6;
  font-size: 1.1rem;
  height: 100%;
}

.main-container {
  width: 100%; /* Makes the section take full width */
  padding: 20px 40px; /* Top & bottom = 20px, Left & right = 40px */
  min-height: 60vh; /* Ensures enough height */
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Align text to the left */
  text-align: left;
}

.main-container p {
  margin: 15px 0; /* 15px space above and below, no horizontal margin */
  line-height: 1.6; /* Improves readability */
}

.main-container em {
  /* the default is: font-style: italic;  */
  color: var(--color-adelphi-blue);
  font-weight: bold;
}

/* Flexbox container to align left and right */
.content-container {
  display: flex;
  /* max-width: 1200px;*/
  width: 100%;
  gap: 40px; /* Space between text and image */

  align-items: flex-start;
  justify-content: space-between; /* Push sections apart */
  margin: auto; /* Centers it */
}

/* Left side (Expandable Sections) */
.text-section {
  flex: 1.75; /* says relative size */
  line-height: 1; /* smaller since it's an address */
}

.text-block {
  text-align: left;
  max-width: 800px;
  margin: 2rem auto;
  padding-top: 2rem;
  padding-bottom: 2rem;
  line-height: 1.6;
  font-size: 1.1rem;
}

/* Right side (Image with caption) */
.image-section {
  flex: 1; /* Takes up equal space */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Image styling */
.image-section img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}

.rightcolumn-section {
  flex: 0.5; /* Takes up equal space */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: left;
}

/* 
        ==================
        EXPANDABLE SECTION
        ==================  
*/

/* Styling for summary i.e. names of people*/
summary {
  font-weight: normal;
  cursor: pointer;
  padding: 10px;
  background-color: var(--color-adelphi-lightgrey);
  /*color: rgb(0,0,0);*/
  display: flex;
  align-items: center;
  border-radius: 5px;
  position: relative;
}

/* Add icon dynamically using ::after */
summary::after {
  content: " ▶"; /* Right arrow when collapsed */
  margin-left: auto;
  padding-left: 10px;
  /* font-size: 10px; */
}

/* Styling for details container */
details {
  cursor: pointer;
  /* font-size: 18px; */
  margin-top: 10px;
  padding: 0px;
  /*border: 1px solid rgb(0,0,0);*/
  border-radius: 5px;
  width: 100%;
  background-color: var(--color-adelphi-verylightgrey);
}

/* Change icon when expanded */
details[open] summary::after {
  content: "▼"; /* Down arrow when expanded */
  /*padding: 10px;*/
}

/* Left-align the text under the image */
.image-text {
  text-align: left;
  margin-top: 10px;
}

/* Adjust spacing for address */
.image-text p {
  margin: 5px 0;
}

/* Style the email link */
.image-text a {
  color: black;
  text-decoration: none;
  font-weight: normal;
}

.image-text a:hover {
  text-decoration: underline;
  color: color-email-hover;
}

details ul {
  padding-left: 20px; /* make sure there's left space for bullets */
}

details li {
  margin-bottom: 8px; /* vertical space between list items */
  line-height: 1.4; /* improves text readability */
}

/* 
        ==================
         Table: Products
        ==================  
*/

.table-container {
  display: flex;
  background-color: yellow;
  justify-content: center; /* Centers text horizontally */
  align-items: center; /* Centers text vertically */
  /* text-align: center;*/ /* Ensures multi-line text stays centered */
  width: 100%;
  gap: 50px;
}

.table-title {
  width: 100%;
  justify-content: center; /* Centers text horizontally */
  align-items: center; /* Centers text vertically */
  text-align: center; /* Ensures multi-line text stays centered */
  font-size: xx-large;
}

.left-column,
.middle-column,
.right-column {
  flex: 1;
  background-color: var(--color-adelphi-lightgrey);
  padding: 20px;
  border-radius: 20px;
  text-align: start;
}

.product-title {
  justify-content: center; /* Centers text horizontally */
  text-align: center; /* Ensures multi-line text stays centered */
  font-size: x-large;
}

th {
  font-weight: normal;
}

td ul {
  padding-left: 20px; /* Adjust the indentation */
  margin: 0;
  list-style-position: inside; /* Optional: Keeps bullets aligned within the cell */
}

td,
th {
  vertical-align: top;
}

/* ====================================================================================== */
ul {
  padding-left: 20px; /* Indents the list to align properly */
  margin-left: 0; /* Ensures no unnecessary left margin */
  list-style-position: outside; /* Ensures bullets are outside the text block */

  padding-top: 10px;
  padding-bottom: 10px;
}

.text-section ul {
  padding-left: 30px; /* Extra indentation inside the text section */
  padding-top: 2px;
  padding-bottom: 2px;
}

h1 {
  margin-top: 10px; /* Space above */
  margin-bottom: 10px; /* Space below */
}

h2 {
  margin-top: 10px; /* Space above */
  margin-bottom: 10px; /* Space below */
}

h3 {
  margin-top: 10px; /* Space above */
  margin-bottom: 10px; /* Space below */
}

.bold-text {
  font-weight: bold;
}

/*

       CCCC    AAA    RRRRR    DDDDD     SSSSS
      CC      AA AA   RR  RR   DD  DD   SS 
     CC      AAAAAAA  RRRRR    DD   DD   SSSSS
      CC     AA   AA  RR  RR   DD  DD        SS
       CCCC  AA   AA  RR   RR  DDDDD     SSSSS 


card-container -- container for all of the cards
card -- individual card
card-top -- card top
card-top-img -- updating the img (image) details
card-bottom -- card bottom

DIFFERENT CARD TYPES (updated using modifier classes):

    Card type: Class-DD -- Deuterium-Deuterium generator
    Card type: Class-DT -- Deuterium-Tritium generator
    Card type: Class-Thermal -- Thermal generator
    Card type: Class-Titles -- Cards for title pages (larger width and different colours

*/

.homepage-card-container {
  display: flex;
  background-color: var(--color-page-background);
  /*background-color: yellow; /* for debugging */
  justify-content: center; /* Centers text horizontally */
  align-items: center; /* Centers text vertically */
  text-align: center; /* Ensures multi-line text stays centered */
  width: 100%;
  gap: 25px;
  padding: 10px;
  flex-wrap: wrap;
  border-radius: 20px; /*we need this otherwise the corners get fucked-up */
  overflow: hidden;
}

.homepage-call-to-action {
  display: flex;
  /*background-color:  var(--color-page-background); */
  background-color: var(--color-adelphi-blue);
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
  gap: 25px;
  padding: 10px;
  flex-wrap: wrap;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.4);
  margin: 0 auto;
}

.homepage-main-container a,
.homepage-main-container a:visited {
  text-decoration: none;
  color: white;
}

.card {
  display: flex;
  flex-direction: column;
  /* border-radius: 20px; /* Outer corners rounded */
  overflow: hidden;
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.4);
  border-radius: 20px;
}

/* IMAGE CARD FLEXBOXES */
.card-top {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
  border-top-left-radius: 20px; /* Rounded corners */
  border-top-right-radius: 20px;
  overflow: hidden;
}

.card-top img {
  max-width: 100%;
  height: auto;
  border-radius: 10px; /* Optional rounded edges for image */
}

/* Bottom section of the card */
.card-bottom {
  padding: 5px;
  text-align: center;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  overflow: hidden;
}

/* ===== DIFFERENT CARD TYPES ===== */

/* 
    Card type: class-DD -- Deuterium-Deuterium generator
    Card type: class-DT -- Deuterium-Tritium generator
    Card type: class-Thermal -- Thermal generator
    Card type: class-Titles -- Cards for title pages
    Card type: class-general -- General card
*/

.card.class-DD .card-top {
  background-color: var(--color-DD-background-dark);
  width: 300px;
}
.card.class-DD .card-bottom {
  background-color: var(--color-DD-background-light);
  width: 300px;
}

.card.class-DT .card-top {
  background-color: var(--color-DT-background-dark);
  width: 300px;
}
.card.class-DT .card-bottom {
  background-color: var(--color-DT-background-light);
  width: 300px;
}

.card.class-Thermal .card-top {
  background-color: rgb(80, 157, 207);
  width: 300px;
}
.card.class-Thermal .card-bottom {
  background-color: var(--color-Thermal-background-light);
  width: 300px;
}
/*card top: titles*/
.card.class-titles .card-top {
  background-color: var(--color-homepage-cards-top);
  width: 350px;
}

.card.class-titles .card-bottom {
  background-color: var(--color-homepage-cards-bottom);
  width: 350px;
}

/*Setting the link text color*/
.card.class-titles .card-bottom a {
  color: white;
  text-decoration: none;
}

.card.class-titles .card-bottom a:visited {
  color: white;
  text-decoration: none;
}

.card.class-titles .card-bottom a:hover {
  color: black; /* <--- HOVER OVER MAIN TITLE --> */
  text-decoration: none;
}

.card.class-titles .card-bottom a:active {
  color: white;
  text-decoration: none;
}

/*pressed in animation*/
/*
.card-link {
  display: inline-block;     
  text-decoration: none;
  color: inherit;
}

.card-link .card {
  transition: transform 0.1s ease-in-out;
}


.card-link:hover .card {
  transform: translate(3px, 3px);
}



.card-link {
  background-color: transparent;
}
*/

/* ============================ */

.card-link {
  display: inline-block;
  text-decoration: none;
  color: inherit;
  background-color: transparent;
}

.card-link .card {
  transition: transform 0.1s ease-in-out;
}

.card-link:hover .card {
  transform: translate(3px, 3px);
}

.card-link:active .card {
  transform: translate(6px, 6px);
}

/* *********************************** */

/*Setting the link text color*/
.card.class-general {
  margin: 1em;
}

/*Setting the link text color*/
.card.class-general .card-top {
  background-color: var(--color-adelphi-lightgrey);
  width: 200px;
}

.card.class-general .card-bottom {
  background-color: var(--color-adelphi-verylightgrey);
  color: black;
  width: 200px;
}

.card.class-general .card-bottom a {
  color: black;
  text-decoration: none;
}

.card.class-general .card-bottom a:visited {
  color: black;
  text-decoration: none;
}

.card.class-general .card-bottom a:hover {
  color: var(--color-adelphi-lightgrey);
  text-decoration: none;
}

.card.class-general .card-bottom a:active {
  color: black;
  text-decoration: none;
}

/* For image popup */

.modal {
  display: none;
  position: fixed;
  z-index: 9999;
  padding-top: 60px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.8);
}

.modal-content {
  display: block;
  margin: auto;
  max-width: 90%;
  max-height: 80vh;
  box-shadow: 0 0 20px #000;
  border-radius: 8px;
}

.close-modal {
  position: absolute;
  top: 30px;
  right: 35px;
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
}

/* to change the pointer */
.clickable-card-image {
  cursor: pointer;
}

/* ======================= TABLES  ============================== */
/*
.main-container .table-row-color-header {
  background-color: yellow;
}

.main-container .table-row-color-thermal {
  background-color: var(--color-Thermal-background-light);
}

.main-container .table-row-color-DD {
  background-color: var(--color-DD-background-light);
}

.main-container .table-row-color-DT {
  background-color: var(--color-DT-background-light);
}


TTTTTT   AAAA   BBBBB   LL     EEEEE   SSSS 
  TT    AA  AA  BB  BB  LL     EE     SS
  TT    AAAAAA  BBBB    LL     EEE     SSSS
  TT    AA  AA  BB  BB  LL     EE         SS
  TT    AA  AA  BBBBB   LLLLL  EEEEE   SSSS

*/

/* Ensure main-container is correctly referenced */
.twocolumn-left table {
  width: 100%;
  border-collapse: collapse;
  background-color: var(--color-tables-title-bar);
  text-align: left;
  margin: 1em;
}

.twocolumn-left th,
.twocolumn-left td {
  padding: 10px;
  border: 1px solid #616060;
}

.twocolumn-left th:nth-child(1),
.twocolumn-left td:nth-child(1) {
  width: 10em;
}

.twocolumn-left th:nth-child(2),
.twocolumn-left td:nth-child(2) {
  width: 20em;
}

.twocolumn-left th:nth-child(3),
.twocolumn-left td:nth-child(3) {
  width: 20em;
}

/* Apply background color to table rows */
.table-row-color-header th,
.table-row-color-header td {
  background-color: var(--color-tables-title-bar);
}

.table-row-color-thermal th,
.table-row-color-thermal td {
  background-color: var(--color-Thermal-background-light);
}

.table-row-color-DD th,
.table-row-color-DD td {
  background-color: var(--color-DD-background-light);
}

.table-row-color-DT th,
.table-row-color-DT td {
  background-color: var(--color-DT-background-light);
}

/* 77777777777777777777777777777777 */

/* Wrap the two containers in a flex row */
/*
.side-by-side {
  display: flex;
  gap: 2rem; 
  flex-wrap: wrap; 
  padding: 2rem;
  box-sizing: border-box;
}
*/

/* Left section (main text) takes more space */
/*
.container-large-left {
  flex: 3;
  min-width: 300px;
}
*/
/* Right section (image and address) takes less space */
/*
.container-small-right {
  flex: 1;
  min-width: 250px;
}
*/
/* Ensure the card container sits below the flex row */
.card-container {
  width: 100%;
  margin: 2rem;
  padding: 2rem;
}

/* Make it responsive */
/*
@media (max-width: 768px) {
  .main-container {
    flex-direction: column;
  }

  .container-large-left,
  .container-small-right {
    width: 100%;
  }
}
*/

/*
 22222          CCCC   OOOO   LL   UU  UU  MMM   MMM  NN    NN
22   22        CC     OO  OO  LL   UU  UU  MMMM MMMM  NNN   NN
   22   =====  CC     OO  OO  LL   UU  UU  MM  M  MM  NN N  NN
 22            CC     OO  OO  LL   UU  UU  MM     MM  NN  N NN
2222222         CCCC   OOOO   LLLL  UUUU   MM     MM  NN   NNM

PAGE LAYOUT: "2-column", small right column, cards at bottom

*/

/*
<body>
    <div class="page-wrapper">
        HEADER FILE
        H    <header>
        H        <nav class="navbar"> 
        H            <div class="logo">
        H                <li class="dropdown">
        H                    <ul class=dropdown-menu>
        <main class="page-main-container">
            <div class="twocolumn-container">
                <div class="twocolumn-left">
                <div class="twocolumn-right">
                    <div class="twocolumn-right-top">
                    <div class="twocolumn-right-bottom">
            <div class="bottom-section-card-container">
                <div class="card class-titles">
                    <div class="card-top">       
                    <div class="card-bottom">
        FOOTER FILE 
        F   <footer>
        F       <div class="footer-container">
        F           <div class="footer-flag">
*/

.page-main-container {
  flex: 1;
}

main.page-main-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem 1rem;
  margin: 0 auto;
  min-height: 100%;
  width: 100%;
}

.twocolumn-container {
  display: flex;
  flex-direction: row;
  background-color: var(--color-page-background);
  gap: 1rem;
  width: 100%;
  flex-wrap: wrap;
  align-items: stretch;
}

.twocolumn-container p {
  margin: 15px 0;
  line-height: 1.6;
}

.twocolumn-container a {
  color: var(--color-adelphi-blue);
  text-decoration: none;
  line-height: 1.4;
}

.twocolumn-container a:hover {
  text-decoration: underline;
}

.twocolumn-container img {
  border-radius: 20px;
}

.twocolumn-left {
  flex: 4;
  display: flex;
  background-color: var(--color-page-background);
  flex-direction: column;
  padding: 2rem 1rem;
}

.image-map {
  width: 600px;
  height: auto;
  border: 2px solid #333; /* or whatever color you want */
  margin: 20px 0; /* space above and below the image */
  display: block; /* avoid inline whitespace quirks */
}

.twocolumn-right {
  flex: 1;
  display: flex;
  background-color: var(--color-page-background);
  flex-direction: column;
}

.twocolumn-right-top {
  flex: 1;
  display: flex;
  background-color: var(--color-page-background);
  margin-bottom: 1rem;
  align-items: center;
  align-content: center;
  justify-content: center;
  flex: none;
}

.twocolumn-right-bottom {
  flex: 1;
  display: flex;
  background-color: var(--color-page-background);
  align-items: flex-start;
  flex-direction: column;
  text-align: left;
  flex-basis: auto;
  flex-shrink: 1;
}

.twocolumn-right-bottom p {
  line-height: 1.2;
  margin: 0;
}

.title-for-bottom-section-card-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 2rem;
  width: 100%;
  margin: 2rem auto;
}

.bottom-section-card-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 2rem;
  width: 100%;
  margin-top: 2rem;
  align-items: center;
  align-content: cener;
  justify-content: center;
}