/* Basic reset and styling */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Arial', sans-serif;
}

.custom-cursor {
    cursor: url('images/home/mouse.svg'), auto;
}

.custom-pointer {
    cursor: pointer, auto;
}

/* fade in */
/* Initial state: hidden */
.hidden {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s ease, transform 1s ease;
}

.fade-in {
    opacity: 0;
    transition: opacity 1s ease-in-out; /* Smooth transition with easing */
}

.fade-in.visible {
    opacity: 1;
}




html {
    margin: 0;
    padding: 0;
    font-size: 16px;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

.contact-details p {
    line-height: 2;
}

.homepage {
    color: #082160;
    background: #EDFAFF;
}

.main-colour {
    color: #082160;
    background: #fff7db;
}

.dailyui {
    color: #082160;
    background: #EDFAFF;
}

.about-colours {
    color: #423D44;
    background: #FFFAEA;
}

.questopia-colours {
    color: #423D44;
    background: #F0FFF2;
}

/* Loading Screen */
#loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Keep it above everything */
    opacity: 1;
    transition: opacity 1s ease; /* Fade out effect */
}

/* Loading Logo */
.loading-logo {
    width: 40px; /* Logo width */
    animation: spin 1s linear infinite; /* Spinning animation */
}

/* Keyframes for spinning */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* yellow circle */

/* yellow circle */
.yellow-circle {
    width: 150px;
    height: 150px;
    background-color: #FFFAEA; /* Set the circle color */
    border-radius: 50%; /* Make it a perfect circle */
    position: absolute; /* Fixed positioning */
    top: 60px; /* 30px from the top */
    right: 160px; /* 160px from the right */
    z-index: 99; /* Ensure it appears below the spinning wheel if necessary */
    border: 1px solid #082160;
    display: flex;
    justify-content: center;
    align-items: center; /* Center the icon */
    transition: 0.5s ease;
}

.yellow-circle img.circle-icon {
    width: 50px; /* Adjust the size of the icon */
    height: auto;
}

.yellow-circle:hover {
    background-color: white;
    cursor: pointer, auto;
    transition: 0.5s ease;
}


/* resume wheel */

/* Styling for the spinning wheel */
.resume-wheel a {
    width: 150px;
    height: 150px;
    border-radius: 50%; /* Make it circular */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #082160;
    background-color: transparent; /* Light blue background */
    animation: spin 6s linear infinite; /* Spin effect */
    position: absolute; /* Fixed positioning */
    bottom: 30px; /* 30px from the bottom */
    left: 160px; /* 160px from the right */
    z-index: 100; /* Ensures it's above other content */
    padding: 12px;
    animation-play-state: running; /* Make sure this is defined */
    cursor: pointer, auto;
}

.resume-wheel a:hover {
    animation-play-state: paused; /* Make sure this is defined */
}

/* Keyframes for spinning */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Styling for the text inside */
.resume-wheel svg text a{
    font-size: 1.4rem;
    fill: #082160; /* Text color */
    letter-spacing: 1px;
    font-family: "EB Garamond", serif;
    cursor: pointer, auto;
}


/* Sticky Navigation Bar */
.full-nav {
    display: flex;
    background-color: white;
    padding: 10px 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    border: 1px solid #A0C59E;
}

.nav {
    background: linear-gradient(to right, #ffffff 30%, #ffffff7e 100%);

    position: sticky;
    top: 0;
    z-index: 1000;
    border: 1px solid #A0C59E;
    margin-top: 0;
    transition: 0.5s ease;
    align-items: center;
    justify-content: center;
}

/* Projects */
.case-study-images {
    background-color: #F5FCFF;
    padding: 80px;
    text-align: center;
}

.case-study-images h2 {
    margin-bottom: 24px;
    font-size: 24px;
}

.image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.image-grid img {
    width: 100%;
    height: auto;
    transition: 0.5s ease;
}

.image-grid img:hover {
    scale: 1.1;
    transition: 0.5s ease;
}

/* dropdown */
    /* dropdown menu */
 /* Full Navigation Dropdown */
 .nav-links .dropdown {
    position: relative;
    justify-content: center;
}

.nav-links .dropdown-menu {
    display: none;
    position: absolute;
    top: 100%; /* Adjust based on your layout */
    width: 100%; /* Adjust the width here */
    left: 0;
    border-radius: 5px;
    background-color: #ffffff80;
    list-style: none;
    margin: 0;
    padding: 0;
    z-index: 1000; /* Ensure it appears on top */
    border: 1px solid #A0C59E;
}

.nav-links .dropdown:hover .dropdown-menu {
    display: block;
}

.nav-links .dropdown-menu li {
    padding: 10px 10px 0 10px;
}

.nav-links .dropdown-menu li a {
    padding: 10px 10px;
    background-color: white;
    border: 1px solid #A0C59E;
    border-radius: 5px;
    text-decoration: none;
    color: #082160;
    display: block;
    font-weight: 400;
}

.nav-links .dropdown-menu li a:hover {
    background-color: #082160;
    color: #ffffff;
    transition: 0.5s ease;
}


.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 80px;
}

.logo {
    width: 45px; /* Adjust the size of the logo */
    padding: 10px 0;
    transition: transform 0.5s ease;
}

.logo:hover {
    transform: rotate(20deg);
    transition: transform 0.5s ease;
    cursor: pointer, auto;
}

.hamburger-nav {
    display: none; /* Hide by default */
    background-color: white;
    position: sticky;
    top: 0;
    z-index: 1000;
    border: 1px solid #A0C59E;
    padding: 5px 0;
}

.menu-icon {
    width: 35px; /* Adjust the size of the menu icon */
    padding: 10px 0;
    cursor: pointer, auto;
}

/* Overlay Menu */
.menu-overlay {
    position: fixed;
    top: -150%;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: white;
    border: 1px solid #A0C59E;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: top 0.5s ease; /* Slide down effect */
    z-index: 2000;
}

.overlay-header {
    position: absolute;
    top: 20px;
    right: 20px;
}

.close-icon {
    width: 30px;
    cursor: pointer, auto;
}

.overlay-menu {
    list-style: none;
    padding: 0;
}

.overlay-menu li {
    margin: 40px 0;
}

.overlay-menu li a {
    text-decoration: none;
    color: #082160;
    font-weight: 600;
    font-family: "M PLUS 1", sans-serif;
    font-size: 1.5rem;
    text-align: center;
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 26px;
    align-items: center;
}

.nav-links li a {
    text-decoration: none;
    color: #082160;
    font-weight: 600;
    font-family: "M PLUS 1", sans-serif;
    font-size: 1rem;
    position: relative;
    display: inline-block;
    cursor: pointer, auto;
}

#dropdown {
    margin-left: 5px;
    margin-bottom: 3px;
    height: 100%
}

.nav-links li a:hover {
    background-color: #F8FDFF;
    transition: 0.5s ease;
}

#word {
    padding: 10px 15px;
    background-color: white;
    border-radius: 5px;
    border: 1px solid #A0C59E;
    justify-content: center; /* Align items horizontally */
}

#word:hover {
    background-color: #082160;
    color: white;
    transition: 0.5s ease;
}

#iconnav {
    transition: 0.5s ease;
}

#iconnav:hover {
    transition: 0.5s ease;
    scale: 1.1;
}

/* .nav-links li a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 100%;
    background-color: #A0C59E;
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.nav-links li a:hover::after {
    transform: scaleX(1);
    cursor: pointer, auto;
} */

/* Main Section */
.main-section {
    position: relative;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 200px;
}

/* Top Left and Bottom Right Images */
.topleft-img {
    position: absolute;
    top: 0;
    left: 0;
    max-width: 40%; /* Ensures the image scales proportionally */
    height: auto;
    object-fit: cover;
    opacity: 0.8;
}

.bottomright-img {
    position: absolute;
    bottom: 0px;
    right: 0;
    max-width: 40%; /* Ensures the image scales proportionally */
    height: auto;
    object-fit: cover;
    transition: transform 0.5s ease;
    opacity: 0.8;
}

/* .topleft-img:hover, .bottomright-img:hover {
    transform: rotate(10deg);
    transition: transform 0.5s ease;
} */

/* Center Circle */
.circle {
    position: relative;
    width: 75vh;
    height: 75vh;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    transition: 0.5s ease;
    padding: 10px;
    margin-top: 150px;
    z-index: 10;
}

.circle img {
    z-index: 999;
    height: 50px;
}

.circle::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('images/home/circlely.svg') center/cover no-repeat;
    z-index: -1; /* Moves it behind the .circle */
}


.circle:hover {
    background-color: white;
    transform: scale(1.1);
    transition: 0.5s ease;
}

h1 {
    font-family: 'EB Garamond', serif;
    font-weight: 700;
    font-size: 2.5rem;
}

.circle h1 {
    font-size: 2rem;
    margin-bottom: 10px;
    color: #082160;
}

.text-animation-wel {
    font-family: 'EB Garamond', serif;
    font-size: 2rem;
    margin-bottom: 10px;
    color: #082160;
}

.text-animation-wel span {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    padding: 0;
    display: inline-block; /* Required for animations to work */
}


h2 {
    font-family: "DM Serif Display", serif;
    font-weight: 400;
    font-size: 4.5rem;
}

.circle h2 span {
    font-family: "DM Serif Display", serif;
    font-style: italic;
    font-size: 7rem;
    margin-bottom: 5px;
    color: #082160;
    font-weight: 500;
    
}

p {
    font-family: "M PLUS 1", sans-serif;
    font-weight: 400;
}

.circle p {
    font-size: 1.125rem;
    padding: 0 80px;
    color: #082160;
    font-family: "M PLUS 1", sans-serif;
    font-weight: 400;
    line-height: 2;
}

.text-animation {
    font-size: 1.125rem;
    padding: 0 10vw;
    color: #082160;
    font-family: "M PLUS 1", sans-serif;
    font-weight: 400;
}

.text-animation span {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    padding: 0;
    display: inline-block; /* Required for animations to work */
}

.text-animation strong,
.text-animation em {
    font-family: inherit;
    font-weight: bold;
    font-style: italic;
}

#close {
    margin-top: -20px;
}

/* loading */
#loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 1.5s ease-in-out;
    z-index: 9999; /* Ensures it's above everything */
}

#loading img {
    width: 50vw; /* Adjust size as needed */
    animation: pulse 1.5s infinite ease-in-out;
}

/* Logo animation */
@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.8;
    }
}



/* Optional: Style for emphasized text */
.circle p strong {
    font-weight: bold; /* Bold for <strong> */
}

.circle p em {
    font-style: italic; /* Italic for <em> */
}

/* Overlapping Image */
.overlap-img {
    position: absolute;
    bottom: -40px;
    left: 40px;
    width: 15vh;
}


/* Gradient Background */
.gradient-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #fff7db 0%, #EDFAFF 100%);
    z-index: 0; /* Ensure it stays behind everything */
    transform: translateY(-100%); /* Start above the viewport */
    animation: slideInFromTop 3s ease-out forwards; /* Slide in from the top */
    animation-delay: 1s;
    transition: background 1s ease-in-out; /* Smooth background transition */
}

.custom-section {
    background-color: #EDFAFF; /* Light blue background color */
    padding: 40px 80px; /* Space of 80px to the left and right */
    align-items: center; /* Center items vertically */
    color: #082160; /* Dark blue text color */
}

.custom-section-tablet {
    background-color: #EDFAFF; /* Light blue background color */
    padding: 20px 30px; /* Space of 80px to the left and right */
    align-items: center; /* Center items vertically */
    color: #082160; /* Dark blue text color */
    display: none;
}

.custom-section-tablet .grid-container div a {
    display: block;
    margin: 0 auto;
    padding: 16px;
    text-align: center;
}

.seatrack-padding {
    padding: 0 80px; /* Space of 80px to the left and right */
}


.questopia-padding {
    padding: 0 80px 40px 80px; /* Space of 80px to the left and right */
}

.healthpie-padding {
    padding: 80px 80px 0 80px;
}

/* insights section */
.q-insights-section {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Gap between insights */
    padding-top: 40px;
}

.insight {
    background-color: #FEFFFE; /* Insight background color */
    border: 2px solid #C6E0C5; /* Stroke color */
    border-radius: 10px; /* Optional: adds rounded corners */
    padding: 20px; /* Padding around each insight */
}

.insight h3 {
    font-weight: bold; /* Make the h3 bold */
    color: black; /* Text color for h3 */
}

.insight p {
    color: black; /* Text color for p */
}



.grid-container {
    display: grid;
    grid-template-columns: repeat(12, 1fr); /* Create 12 equal columns */
    align-items: center;
}

.content-left h1, .content-left p, .content-right h1, .content-right p {
    margin-bottom: 24px;
    line-height: 2;
}

.content-left strong, .content-right strong {
    font-weight: bold;
    font-family: "M PLUS 1", sans-serif;
}


.content-right {
    grid-column: 8/13;
    justify-self: right;
}

.content-left {
    grid-column: 1/6;
    margin-left: 80px;
}

.side-image {
    grid-column: 6 / 13;
    margin-left: 24px; /* Space between image and text section */
    transition: 0.5s ease;
    justify-self: center;
}

.side-image img {
    width: 100%;
}

.side-image-left {
    grid-column: 1 / 8;
    margin-right: 24px; /* Space between image and text section */
    transition: 0.5s ease;
    justify-self: center;
}

.side-image-left img {
    width: 100%;
}

.side-image:hover, .side-image-left:hover {
    transform: scale(1.05);
    transition: 0.5s ease;
    cursor: pointer, auto;
}

.side-image:hover {
    transform: scale(1.05);
    transition: 0.5s ease;
    cursor: pointer, auto;
}

.additional-works-section {
    background-color: #EDFAFF; 
    padding: 40px 80px;
}

.additional-works-section-t {
    background-color: #EDFAFF; 
    padding: 40px 80px;
    display: none;
}

/* i'm farwa animation */

.additional-works-section .additional-works-container .additional-works-content {
    width: 40%;
}

.additional-works-container {
    display: flex;
    align-items: flex-start;
    gap: 24px; /* Space between items */
    justify-content: space-between;
}

.additional-works-section img{
    transition: 0.5s ease;
}

.additional-works-section .additional-works-container .additional-works-image a {
    width: 60%;
}

.additional-works img {
    width: 100%; /* Make the image responsive */
    height: auto; /* Maintain aspect ratio */
}

.additional-works-section img:hover {
    transform: scale(1.05);
    transition: 0.5s ease;
    cursor: pointer, auto;
}


.tags {
    display: flex;
    flex-wrap: wrap; /* Allow tags to wrap if needed */
    gap: 12px; /* Space between tags */
    margin-bottom: 64px; /* Space below tags for the button */
}

.tag {
    background-color: #FFFAEA; /* Yellow background for tags */
    padding: 4px 12px; /* Padding for each tag */
    border-radius: 200px;
    font-family: "M PLUS 1", sans-serif;
    font-weight: 400;
}

.button {
    display: inline-block; /* Make the link behave like a button */
    padding: 16px 24px; /* Adjust padding for better spacing */
    font-family: "M PLUS 1", sans-serif;
    font-weight: 700;
    color: #082160;
    background-color: white; /* White background for the button */
    border: 1px solid #082160; /* Stroke/border for the button */
    text-align: center; /* Center text inside the button */
    text-decoration: none; /* Remove underline from link */
    border-radius: 12px; /* Optional: add border radius */
    box-shadow: 0 4px 4px rgba(8, 33, 96, 0.2);
    transition: 0.3s ease;
    font-size: 1.1rem;
}


.button:hover {
    color: white;
    background-color: #082160; /* White background for the button */
    border: 1px solid #082160; /* Stroke/border for the button */
    box-shadow: 0 8px 16px rgba(8, 33, 96, 0.2);
    transition: 0.3s ease;
    cursor: pointer, auto;
}

#accessichat-button {
    display: inline-block; /* Make the link behave like a button */
    padding: 16px 24px; /* Adjust padding for better spacing */
    font-family: "M PLUS 1", sans-serif;
    font-weight: 700;
    color: #486500;
    background-color: white; /* White background for the button */
    border: 1px solid #486500; /* Stroke/border for the button */
    text-align: center; /* Center text inside the button */
    text-decoration: none; /* Remove underline from link */
    border-radius: 12px; /* Optional: add border radius */
    box-shadow: 0 4px 4px rgba(8, 33, 96, 0.2);
    transition: 0.3s ease;
    font-size: 1.1rem;
}

#accessichat-button:hover {
    color: white;
    background-color: #486500; /* White background for the button */
    border: 1px solid #486500; /* Stroke/border for the button */
    box-shadow: 0 8px 16px rgba(8, 33, 96, 0.2);
    transition: 0.3s ease;
    cursor: pointer, auto;
}

#fcm-button {
    display: inline-block; /* Make the link behave like a button */
    padding: 16px 24px; /* Adjust padding for better spacing */
    font-family: "M PLUS 1", sans-serif;
    font-weight: 700;
    color: #BC412B;
    background-color: white; /* White background for the button */
    border: 1px solid #BC412B; /* Stroke/border for the button */
    text-align: center; /* Center text inside the button */
    text-decoration: none; /* Remove underline from link */
    border-radius: 12px; /* Optional: add border radius */
    box-shadow: 0 4px 4px rgba(8, 33, 96, 0.2);
    transition: 0.3s ease;
    font-size: 1.1rem;
}

#fcm-button:hover {
    color: white;
    background-color: #BC412B; /* White background for the button */
    border: 1px solid #BC412B; /* Stroke/border for the button */
    box-shadow: 0 8px 16px rgba(8, 33, 96, 0.2);
    transition: 0.3s ease;
    cursor: pointer, auto;
}


/* testimonials */
.testimonial-section {
    padding: 80px 80px 40px 80px;
    background: radial-gradient(ellipse at center, white 5%, #EDFAFF 100%);
    text-align: left;
}

.img-section {
    text-align: center;
    padding: 40px 30px;
}

.img-section-full {
    text-align: center;
    padding: 0px 80px 80px 80px;
}

.quote-section {
    text-align: center;
    margin-bottom: 80px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.5;
    max-width: 700px;
}

.quote-section a {
    color: #17726D;
    font-weight: 700;
    font-family: "eb garamond", serif;
    font-size: 1.5rem;
    text-decoration: none;
    cursor: pointer, auto;
}

.quote-section a:hover {
    background-color: #EAFAFD;
}

.quote-section h1 {
    font-weight: 400;
    font-size: 1.5rem;
}

/* fcm */
#fcmimg {
    border-radius: 10px;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
}

.bigblue {
    color: #17726D;
    font-weight: 700;
    font-family: "eb garamond", serif;
}

.bigwhite {
    color: #F4F4F8;
    font-weight: 700;
    font-family: "eb garamond", serif;
}

.bigbrown {
    color: #5c4c29;
    font-weight: 700;
    font-family: "eb garamond", serif;
}

.bigsea {
    color: #082160;
    font-weight: 700;
    font-family: "eb garamond", serif;
}

.biggreen {
    color: #1F6F50;
    font-weight: 700;
    font-family: "eb garamond", serif;
}

.testimonial-section h1 {
    color: #082160;
    margin-bottom: 20px;
}

em {
    font-style: italic;
    font-family: "Nunito Sans", sans-serif;
    color: #082160;
}

.testimonial-section p {
    color: #082160;
    /* font-style: italic; */
    font-family: "Nunito Sans", sans-serif;
}

.testimonial-slideshow {
    padding: 0 80px 40px;
    position: relative;
    text-align: center;
    background-color: #EDFAFF;
}

.cards-wrapper {
    display: block;
    position: relative;
    gap: 16px; /* Adjust the spacing between cards */
    overflow: hidden;
    border-radius: 20px;
    height: 667px;
    
}


.custom-pause-cursor {
    cursor: url('images/home/pause.svg'), auto; /* Custom cursor when paused */
}

.custom-hover-cursor {
    cursor: url('images/home/about\ to\ pause.svg'), auto; /* Custom hover cursor */
}

.card {
    
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid #A0C59E;
    border-radius: 20px;
    padding: 24px;
    height: 660px;
    width: 360px; /* Adjust width as needed */
    margin: 0 10px; /* Add horizontal margin for spacing */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: left;
}

.card-logo {
    width: 125px;
    height: 125px;
    border-radius: 10px;
}

.card h3 {
    margin: 20px 0 10px;
    font-size: 1.2rem;
    font-family: "M PLUS 1", sans-serif;
    color: black;
}

.additional-works-h3 {
    margin: 20px 0 10px;
    font-size: 1.4rem;
    font-family: "M PLUS 1", sans-serif;
}

.card p {
    margin: 0;
    font-size: 1rem;
    margin-bottom: 12px;
    font-family: "M PLUS 1", sans-serif;
    color: black;
}

#small {
    font-size: 0.8rem;
}

.card-footer {
    background: white;
    padding: 12px;
    border-radius: 10px;
    width: 100%;
    position: relative;
}

.footer-icon-left {
    position: absolute;
    top: 12px;
    left: 12px;
    height: 36px;
}

.footer-icon-right {
    position: absolute;
    bottom: 12px;
    right: 12px;
    height: 36px;
}

.card-footer p {
    margin: 0; /* Remove margin to prevent spacing issues */
    text-align: center;
    position: relative; /* Set position relative for stacking */
    padding: 0 12px; /* Add padding for aesthetics */
    margin-bottom: 52px;
}

.card em {
    margin-bottom: 20px;
    font-size: 0.8rem;
    font-family: "M PLUS 1", sans-serif;
    color: black;
}

/* New style for wrapping the text */
.card-footer .text-wrapper {
    display: flex;
    flex-direction: column; /* Stack text vertically */
    align-items: center; /* Center text horizontally */
    justify-content: center; /* Center text vertically */
    height: 100%; /* Allow wrapper to fill the space */
    position: relative; /* Needed for absolute positioning of icons */
    margin-top: 28px;
}

.text-wrapper p {
    text-align: left;
}

.cards-set {
    position: absolute; /* Stack all card sets on top of each other */
    top: 0;
    left: 0;
    display: none;
    width: 100%; /* Ensures that it occupies the full width */
    opacity: 0; /* Start with hidden sets*/
    transition: opacity 1.5s ease-in-out;
    display: flex; /* Show cards in flex layout */
    justify-content: center; /* Space between cards in a set */
}

.cards-set.active {
    display: flex;
    opacity: 1; /* Show active set */
    transition: opacity 1.5s ease-in-out;
}

/* awards section */
.awards-section {
    padding: 0 80px 40px;
    background-color: #EDFAFF;
    display: flex; /* Use flexbox to arrange items in a row */
    justify-content: center; /* Distribute space between awards */
    flex-wrap: wrap;
    margin: auto;
    gap: 20px; /* Space between awards */
}

.award-container {
    display: flex;
    background-color: rgba(255, 255, 255, 0.5); /* 50% opacity */
    padding: 20px;
    text-align: left; /* Center the link */
    flex-wrap: wrap;
    border-radius: 20px;
    width: 360px;
}

.award-container:last-child {
    margin-right: 0; /* Remove margin on the last award */
}

.award-container img {
    width: 100%; /* Set the image width to fill the container */
    height: auto; /* Maintain aspect ratio */
    border-radius: 10px;
}

.award-link {
    display: inline-block; /* To apply padding */
    margin-top: 12px; /* Space below the image */
    background-color: #FFFFFF; /* 100% opacity */
    border-radius: 20px;
    color: black;
    text-decoration: none;
    padding: 12px;
    cursor: pointer, auto;
    font-family: "M PLUS 1", sans-serif;
}

.award-link:hover {
    color: #082160;
    text-decoration: underline;
    cursor: pointer, auto;
}

/* Work Together Section */
.work-together-section {
    background-color: #EDFAFF;
    padding: 40px 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    color: #423D44;
    margin-top: 200px;
    
}

.accessichat-work-together-section {
    background-color: #FFFAEA;
    padding: 40px 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    color: #423D44;
    margin-top: 200px;
}

.h-work-together-section {
    background-color: white;
    padding: 40px 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    color: #010711;
    margin-top: 200px;
}

.work-together-container {
    position: relative;
    z-index: 1;
}

/* Radial Gradient */
.work-together-section::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, #FFFAEA 500%, #EDFAFF 70%);
    transform: translate(-50%, -50%);
    filter: blur(100px); /* Blur to fade out the edges */
    z-index: 0;
}

.accessichat-work-together-section::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, white 500%, #FFFAEA 70%);
    transform: translate(-50%, -50%);
    filter: blur(100px); /* Blur to fade out the edges */
    z-index: 0;
}

.h-work-together-section::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, #EAFAFD 500%, white 70%);
    transform: translate(-50%, -50%);
    filter: blur(100px); /* Blur to fade out the edges */
    z-index: 0;
}

.work-together-container h1 {
    font-size: 2.5rem;
    margin-bottom: 36px;
}

.work-together-container .button {
    margin-bottom: 64px;
    padding: 12px 24px;
    font-size: 1.2rem;
    background-color: #F46060; /* Adjust to your button styling */
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.work-together-container .button {
    display: inline-block; /* Make the link behave like a button */
    padding: 16px 24px; /* Adjust padding for better spacing */
    font-family: "M PLUS 1", sans-serif;
    font-weight: 700;
    color: #423D44;
    background-color: white; /* White background for the button */
    border: 1px solid #423D44; /* Stroke/border for the button */
    text-align: center; /* Center text inside the button */
    text-decoration: none; /* Remove underline from link */
    border-radius: 12px; /* Optional: add border radius */
    box-shadow: 0 4px 4px rgba(8, 33, 96, 0.2);
    transition: 0.3s ease;
    font-size: 1.1rem;
}

.work-together-container .button:hover {
    color: white;
    background-color: #423D44; /* White background for the button */
    border: 1px solid #423D44; /* Stroke/border for the button */
    box-shadow: 0 8px 16px rgba(8, 33, 96, 0.2);
    transition: 0.3s ease;
    cursor: pointer, auto;
}

/* lines */
.access-line {
    background-color: #e6c761;
    height: 1px;
    width: 100%;
}

.fcm-line {
    background-color: #E6E6EA;
    height: 1px;
    width: 100%;
}

.contact-details p {
    font-size: 1rem;
    margin-bottom: 12px;
}

.contact-details .icon {
    vertical-align: middle;
    margin-right: 12px;
    height: 20px;
}

.social-icons a {
    margin-top: 40px;
    cursor: pointer, auto;
}

.social-icons img {
    width: 30px;
    height: 30px;
    margin-right:8px;
    margin-left:8px;
}

.footer {
    background-color: #EDFAFF; /* Light blue */
    margin-top: 80px;
    padding: 80px 0px;
    text-align: center;
}

.q-footer {
    background-color: #F0FFF2; /* Light blue */
    padding: 80px 0;
    text-align: center;
    color:#423D44;
}

.accessichat-footer {
    background-color: #FFFAEA; /* Light yellow */
    padding: 80px 0;
    text-align: center;
}

.h-footer {
    background-color: white; /* Light yellow */
    padding: 80px 0;
    text-align: center;
}

.footer p {
    font-size: 1rem;
    color: #082160; /* Adjust the text color as needed */
    margin: 0;
}

/* accessichat */
/* Hero Section */
.accessichat-colors {
    background-color: #FFFAEA;
    color: #1A2400;
}

/* hero image */
/* Background Section */
.background-section {
    background-image: url("images/accessichat/accessiback\ 1.svg"); /* Replace with your background image */
    background-size: cover;
    background-position: center;
    width: 100%;
    padding: 50px 0; /* Adjust padding as needed */
    flex-direction: column;
    display: flex;
    justify-content: center;
}

.background-section-fcm {
    background-image: url("images/fcm/fcmred.svg"); /* Replace with your background image */
    background-size: cover;
    background-position: center;
    width: 100%;
    padding: 50px 0; /* Adjust padding as needed */
    flex-direction: column;
    display: flex;
    justify-content: center;
}

.top {
    flex: 1;
}

/* Image Container (Renamed to overlay-images) */
.overlay-images {
    display: flex;
    flex-wrap: wrap; /* Allows wrapping */
    gap: 10px; /* Space between images */
    justify-content: center;
    max-width: 100%;
}

/* Images */
.overlay-images img {
    width: auto;
    height: 60vh;
    image-rendering: crisp-edges;
}


.hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #FFFAEA; /* Light blue background */
}

.hero-image {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-content {
    text-align: center;
    color: #fff;
}

.hero h1 {
    font-size: 4rem;
    margin-bottom: 20px;
}

.hero p {
    font-size: 1.5rem;
}

/* Heading Section */
.heading-section {
    padding-top: 40px;
    text-align: center;
    
}

.about-heading-section {
    padding: 80px 80px 0px;
    text-align: center;
    background-color: #FFFAEA; /* Optional: adjust background color if needed */
    color: #423D44;
}

.dailyui-heading-section {
    padding: 80px 80px 40px;
    text-align: center;
    background-color: #EDFAFF; /* Optional: adjust background color if needed */
}

/* dailyui */

.dailyui-gallery {
    display: flex;
    flex-wrap: wrap; /* Allows images to wrap to the next line if they overflow */
    justify-content: space-between; /* Even spacing between images */
    margin: 40px 80px; /* Margin top/bottom 40px, left/right 80px */
    gap: 20px; /* Adjust the space between images */
}

.dailyui-gallery img {
    width: 200px;
    flex-grow: 1;
    height: auto; /* Maintain aspect ratio */
    object-fit: cover; /* Ensures image covers space without stretching */
    transition: 0.5s ease;
}

.practice {
    text-align: center;
}

.seatrack-heading-section {
    padding: 80px 80px 40px;
    text-align: center;
    background-color: #EDFAFF; /* Optional: adjust background color if needed */
    color: #010711;
}

.q-heading-section {
    padding: 80px 80px 40px;
    text-align: center;
    background-color: #F0FFF2; /* Optional: adjust background color if needed */
    color: #423D44;
}

.healthpie-heading-section {
    padding: 80px 80px 40px;
    text-align: center;
    background-color: white; /* Optional: adjust background color if needed */
    color: #010711;
}

.image-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* Spacing between images */
}
.image-container img {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    object-fit: cover; /* Ensures images maintain aspect ratio */
}

.bubble-container {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    width: 100%;
}
.bubble {
    background-color: #486500;
    color: white;
    padding: 10px 15px;
    border-radius: 10px 10px 0 10px;
    max-width: 60%;
    position: relative;
}

.bubble::after {
    content: "";
    position: absolute;
    right: -10px;
    top: 50%;
    transform: translateY(-50%);
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent transparent #486500;
}

.bignum {
    font-size: 5rem;
    font-family: 'M plus 1', sans-serif;
}

.mednum {
    font-size: 1.4rem;
    font-family: 'M plus 1', sans-serif;
}

.response {
    background-color: #CFF094;
    color: black;
    padding: 10px 15px;
    border-radius: 10px 10px 10px 0;
    max-width: 60%;
    position: relative;
    align-self: flex-start;
}
.response::after {
    content: "";
    position: absolute;
    left: -10px;
    top: 50%;
    transform: translateY(-50%);
    border-width: 10px;
    border-style: solid;
    border-color: transparent #CFF094 transparent transparent;
}

.heading-section h2, .seatrack-heading-section h2, .q-heading-section h2, .dailyui-heading-section h2, .about-heading-section h2, .healthpie-heading-section h2 {
    margin: 0;
    font-size: 6rem;
}


/* Project Overview Section */
.project-overview {
    display: flex;
    padding: 80px 160px 40px;
}

.one-third {
    flex: 1;
}

.two-thirds {
    flex: 1.5;
}


.seatrack-project-overview {
    display: flex;
    gap: 52px;
    padding: 80px 80px 40px;
    color:#010711;
}

.q-project-overview {
    display: flex;
    gap: 30px;
    padding: 80px 80px 40px;
    color:#423D44;
}




/* Columns */
.seatrack-project-overview .column, .q-project-overview .column {
    flex: 1;
}


/* Highlighted Section */
.highlighted {
    background-color: #FFFDF6; /* Light yellow */
    padding: 20px;
    margin-bottom: 40px;
    display: flex;
    flex-direction: column;
    gap: 20px; /* Space between h3 and p */
    border-radius: 20px;
    max-width: 700px;
}

.fcm-highlighted {
    background-color: #F4F4F8; /* Light yellow */
    padding: 20px;
    margin-bottom: 40px;
    display: flex;
    flex-direction: column;
    gap: 20px; /* Space between h3 and p */
    border-radius: 20px;
    max-width: 700px;
}

.seatrack-highlighted {
    background-color: #F8FDFF; /* Light yellow */
    padding: 20px;
    margin-bottom: 80px;
    display: flex;
    flex-direction: column;
    gap: 20px; /* Space between h3 and p */
    border-radius: 20px;
    color: #010711;
}

.q-highlighted {
    background-color: #FEFFFE; /* Light yellow */
    padding: 20px;
    margin-bottom: 80px;
    display: flex;
    flex-direction: column;
    gap: 20px; /* Space between h3 and p */
    border-radius: 20px;
    color: #423D44; 
}

.healthpie-highlighted {
    background-color: #EAFAFD; /* Light yellow */
    padding: 20px;
    margin-bottom: 80px;
    display: flex;
    flex-direction: column;
    gap: 20px; /* Space between h3 and p */
    border-radius: 20px;
    color: #010711;
}

.highlighted h3,.seatrack-highlighted h3, .q-highlighted h3, .healthpie-highlighted h3 {
    margin: 0;
    font-size: 1.4rem;
    font-family: "M PLUS 1", sans-serif;
}

.highlighted p, .seatrack-highlighted p, .q-highlighted p, .healthpie-highlighted p {
    margin: 0;
    font-size: 1rem;
}

/* Content Sections */
.content-section {
    margin-bottom: 40px;
}

.content-section h3 {
    margin-bottom: 20px;
    font-size: 1.4rem;
    font-family: "M PLUS 1", sans-serif;
}

.content-section p {
    font-size: 1rem;
}

/* Full Width Image */
.full-width-image {
    width: 80%;
    height: auto;
    margin-bottom: 12px;
}

/* Project Link */
.project-link {
    font-size: 1rem;
    text-decoration: none;
    display: block;
    font-family: "M PLUS 1", sans-serif;
    background-color: #FFFDF6;
    color: #1A2400;
    width: 80%;
    padding: 20px;
    border-radius: 20px;
}

.project-link strong {
    font-family: "M PLUS 1", sans-serif;
    font-weight: bold;
}

.project-link:hover {
    font-size: 1rem;
    text-decoration: underline;
    display: block;
    cursor: pointer, auto;
}

/* Chapter Section */
.chapter-section {
    padding: 0 80px;
    position: relative;
    margin-top: 80px;
    margin-bottom: 40px;
}

/* Top and Bottom Lines */
.top-line,
.bottom-line {
    border-top: 1px solid #C9CDBE;
    width: calc(100% - 320px); /* Subtracting left and right padding */
    position: absolute;
}

.seatrack-top-line,
.seatrack-bottom-line {
    border-top: 1px solid #ACE2FF;
    width: calc(100% - 320px); /* Subtracting left and right padding */
    position: absolute;
}

.q-top-line, .q-bottom-line {
    border-top: 1px solid #C6E0C5;
    width: calc(100% - 320px); /* Subtracting left and right padding */
    position: absolute;
}

.h-top-line, .h-bottom-line {
    border-top: 1px solid #ACE2FF;
    width: calc(100% - 320px); /* Subtracting left and right padding */
    position: absolute;
}

.accent-blue {
    background-color: #ACE2FF;
}

.top-line, .seatrack-top-line, .h-top-line {
    top: 0;
}

.bottom-line, .seatrack-bottom-line, .h-bottom-line {
    bottom: 0;
}

/* Chapter Content */
.chapter-content {
    padding: 40px 0 40px 0;
    position: relative;
}

/* Chapter Header */
.chapter-header {
    display: flex;
    align-items: center;
    gap: 16px; /* Space between 01 and text */
}

.chapter-number {
    font-size: 6rem;
    color: #C9CDBE;
    margin: 0;
}

.seatrack-chapter-number {
    font-size: 6rem;
    color: #ACE2FF;
    margin: 0;
}

.h-chapter-number {
    font-size: 6rem;
    color: #A2E4E0;
    margin: 0;
}

.q-chapter-number {
    font-size: 6rem;
    color: #C6E0C5;
    margin: 0;
}

.chapter-text {
    display: flex;
    flex-direction: column;
}

.seatrack-chapter-text {
    display: flex;
    flex-direction: column;
    color: #010711;
}

.q-chapter-text {
    display: flex;
    flex-direction: column;
    color: #423D44;
}

.chapter-text h1, .seatrack-chapter-text h1 {
    font-size: 2.5rem;
    margin: 0;
}

.chapter-text p, .seatrack-chapter-text p {
    margin: 8px 0 0 0; /* Space between h1 and p */
}

/* Flowchart */
.flowchart {
    display: flex;
    align-items: center;
    margin-top: 28px;
    gap: 12px;
}

.flowchart-element {
    /* border: 1px solid #C9CDBE; */
    text-align: center;
}




.seatrack-flowchart-element {
    padding: 20px;
    background-color: #F8FDFF; /* Light yellow */
    /* border: 1px solid #C9CDBE; */
    text-align: center;
    border-radius: 20px;
    color: #010711;
}

.h-flowchart-element {
    padding: 20px;
    background-color: #EAFAFD; /* Light yellow */
    /* border: 1px solid #C9CDBE; */
    text-align: center;
    border-radius: 20px;
    color: #010711;
}

.q-flowchart-element {
    padding: 20px;
    background-color: #FEFFFE; /* Light yellow */
    /* border: 1px solid #C9CDBE; */
    text-align: center;
    border-radius: 20px;
    color: #423D44;
}

.flowchart-element h3 a{
    margin: 0;
    font-size: 1.5rem;
    font-family: "M PLUS 1", sans-serif;
    text-decoration: none;
    color:#1A2400;
    padding: 20px;
    background-color: #FFFDF6; /* Light yellow */
    border-radius: 20px;
}

.flowchart-element h3 a:hover{
    background-color: #FFEABB; /* Light yellow */
}

.flowchart-line {
    width: 40px;
    height: 1px;
    background-color: #C9CDBE;
}

.seatrack-flowchart-line {
    width: 40px;
    height: 1px;
    background-color: #ACE2FF;
}

.h-flowchart-line {
    width: 40px;
    height: 1px;
    background-color: #A2E4E0;
}

.q-flowchart-line {
    width: 40px;
    height: 1px;
    background-color: #C6E0C5;
}

h3 {
    font-size: 1.5rem;
    font-family: "M PLUS 1", sans-serif;
}

/* Info Section */
.info-section {
    width: 100%;
    flex-wrap: wrap;
    display: flex;
    padding: 80px 80px; /* 80px top and bottom, 80px left and right */
    text-align: left; /* Center align text, optional */
}

.info-section-process {
    padding: 80px 80px; /* 80px top and bottom, 80px left and right */
    text-align: center; /* Center align text, optional */
}

.info-section-process .flowchart {
    justify-content: center;
}


.info-section h3,
.info-section p {
    max-width: 700px; /* Make both elements span the entire width */
}

.info-section p {
    margin-left: auto;
    font-size: 1rem;
    
}

.info-section p strong {
    font-weight: bold; /* Bold for <strong> */
    color: #1A2400;
    font-size: 1rem;
    font-family: "M PLUS 1", sans-serif;
    text-align: center;
}

.info-section button {
    margin-top: 20px;
}

.row {
    flex-wrap: wrap;
}

.row h3 p {
    margin-top: 10px;
}

.row strong {
    font-weight: bold; /* Bold for <strong> */
    font-family: "M PLUS 1", sans-serif;
}

.info-section div .row, .info-section .row {
    display: flex; /* Use flexbox to align the h3 elements horizontally */
    justify-content: space-between; /* Ensure space between each h3 */
    gap: 20px; /* 20px spacing between the h3s */
    flex-wrap: wrap;
    margin-top: 20px;

}

.info-section div .row  h3, .info-section .row  h3{
    flex: 1; /* Flex-grow each h3 equally */

}

/* scroll bar */
.scroll-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.image-wrapper {
    border-radius: 20px;
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none; /* Hide scrollbar for Firefox */
    -ms-overflow-style: none; /* Hide scrollbar for IE */
}

#image-wrapper {
    overflow-x: hidden;
}

.image-wrapper::-webkit-scrollbar {
    display: none; /* Hide scrollbar for Chrome, Safari */
}

.info-section .image-wrapper img {
    height: 50vh;
    width: auto;
    border-radius: 10px;
    object-fit: cover;
}

.scroll-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(72, 101, 0, 0.5);
    color: white;
    border: none;
    padding: 10px 15px;
    font-size: 24px;
    cursor: pointer;
    z-index: 10;
    border-radius: 50%;
}

.left-btn {
    left: 10px;
}

.right-btn {
    right: 10px;
}

.scroll-btn:hover {
    background: rgba(72, 101, 0, 0.8);

}

/* quotes */
.custom-img-quotes-container {
    display: flex;
    align-items: center;
    width: 100%;
    background: white;
    padding: 20px;
    border-radius: 40px;
    border: 1px solid #E6E6EA;
}

.custom-img-wrapper {
    flex: 1;
}

.custom-img-wrapper img {
    border-radius: 10px;
    height: 60vh;
}

.custom-quotes-section {
    flex: 2;
    margin-left: 20px;
    max-width: 700px;
}

.custom-quote-item {
    margin-bottom: 15px;
    font-style: italic;
    color: #333;
    border-left: 4px solid #A0C59E;
    padding-left: 10px;
}

/* brainstorming */
/* Container holding all categories */
.brainstorm-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
    padding: 20px;
    margin-top: 20px;
}

/* Category container */
.category {
    flex: 1 1 30%; /* This allows flexibility and responsive layout */
    padding: 40px;
    border-radius: 40px;
}

/* Idea category styles */
.idea-category {
    border: 1px solid #E6E6EA;
}

/* Feature category styles */
.feature-category {
    border: 1px solid #E6E6EA;
}

/* Page category styles */
.page-category {
    border: 1px solid #E6E6EA;
}

/* Heading for each category */
.category h2 {
    color: #BC412B;
    font-family: "M PLUS 1", sans-serif;
    font-weight: bold;
    margin-bottom: 15px;
    font-size: 1.5em;
}

/* Idea list */
.category ul {
    list-style: none;
}

/* Idea list item styling */
.category li {
    padding: 8px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    font-family: "M PLUS 1", sans-serif;
}

.category strong {
    font-weight: bold;
    font-family: "M PLUS 1", sans-serif;
}

/* Responsive Design */
@media (max-width: 768px) {
    .category {
        flex: 1 1 100%; /* Stack categories on smaller screens */
    }
}

#fcmborder {
    border-left: 4px solid #DC602E;
}

@media (max-width: 768px) {
    .custom-img-quotes-container {
        flex-direction: column;
        text-align: center;
    }

    .custom-quotes-section {
        margin-left: 0;
        margin-top: 20px;
    }

    .custom-quote-item {
        text-align: left;
    }
}

/* wireframes */
.wireframe-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Responsive columns */
    gap: 20px;
    padding: 20px;
}

.wireframe-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    border-radius: 10px;
}

.wireframe-item img {
    width: 100%;
    height: auto; /* Keeps aspect ratio */
    border-radius: 5px;
    border: 1px solid #E6E6EA;
}

.caption {
    margin-top: 10px;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    font-family: "M PLUS 1", sans-serif;
}

@media (max-width: 768px) {
    .wireframe-gallery {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* Adjusts for smaller screens */
    }
}




.img-title {
    width: 100%;
    height: auto;
    margin-top: 40px;
    text-align: left;
}

.info-section .img-title img {
    width: 100%;
    height: auto;
    margin-top: 20px;
    text-align: left;
    display: flex;
}

.info-section .img-title h3, .info-section .row h3 {
    font-size: 1.2rem;
    font-family: "M PLUS 1", sans-serif;
    margin-bottom: 20px;
    margin-top: 20px;
    padding: 40px;
    background-color: #FFFDF6;
    border-radius: 40px;
    font-weight: 400;
    line-height: 1.5;
}

#seatrack-light {
    background-color: #F8FDFF;
    color: #010711;
}

#h-light {
    background-color: #EAFAFD;
    color: #010711;
}

#h-light ul li {
    font-family: "M PLUS 1", sans-serif;
}

.info-section .img-title h3 strong {
    font-family: "M PLUS 1", sans-serif;
}

.no-margin {
    margin-top: 20px;
}

.info-section p em {
    font-style: italic; /* Italic for <em> */
    color: #1A2400;
}


.highlighted-info-section >  a > p {
    font-family: "M PLUS 1", sans-serif;
    font-weight: 400;
    color: #010711;
    text-decoration: underline;
    margin-bottom: 20px;
    display: inline-block;
}

.info-section .img-title .view-prototype {
    font-family: "M PLUS 1", sans-serif;
    font-weight: 400;
    color: #010711;
    text-decoration: underline;
    margin-bottom: 20px;
    display: inline-block;
    border-radius: 0%;
}
.view-prototype {
    font-family: "M PLUS 1", sans-serif;
    font-weight: 400;
    color: #010711;
    text-decoration: underline;
    margin-bottom: 20px;
    display: inline-block;
    border-radius: 0%;
    margin-top: 20px;
}

.view-prototype:hover {
    background-color: #F8FDFF;
    cursor: pointer, auto;
}

/* chapter navigation */
/* Chapter Navigation - Hidden by Default */
#chapter-nav {
    position: fixed;
    top: 64px; /* Adjust based on your main nav height */
    left: 50%;
    transform: translateX(-50%);
    background: #ffffff85;
    padding: 10px 20px;
    border: 1px solid #A0C59E;
    display: flex;
    gap: 10px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

/* Show the navigation when active */
#chapter-nav.active {
    opacity: 1;
    pointer-events: all;
    transform: translateX(-50%) translateY(0);
    z-index: 999;
}

/* Chapter Navigation Buttons */
#chapter-nav button {
    border: 1px solid #A0C59E;
    background-color: white;
    color: #082160;
    padding: 5px 15px;
    cursor: pointer;
    font-family: "M PLUS 1", sans-serif;
    font-size: 1rem;
    border-radius: 5px;
    transition: all 0.2s ease-in-out;
}

#chapter-nav button:hover {
    background-color: #082160;
    color: white;
}


.info-section .wireframe-section {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    text-align: left;
  }

  .info-section  .wireframe-section img {
    height: 50vh;
    transition: 1s ease-in-out;
    margin-bottom: 40px;
  }

  .info-section #update {
    width: 100%;
    flex: 1;
    margin-top: 80px;
    margin-bottom: -40px;
  }

  .info-section  .wireframe-section img:hover {
    transition: 1s ease-in-out;
    scale: 1.1;
  }



  .info-section .wireframe-section .text-content {
    max-width: 400px;
    font-size: 1.2rem;
    font-family: "M PLUS 1", sans-serif;
    margin-bottom: 20px;
    margin-top: 20px;
    padding: 40px;
    background-color: #FFFDF6;
    border-radius: 40px;
    font-weight: 400;
    line-height: 1.5;
  }

  .info-section .wireframe-section .text-content img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    object-fit: cover;
  }

.info-section .view-prototype {
    font-family: "M PLUS 1", sans-serif;
    font-weight: 400;
    color: #010711;
    text-decoration: underline;
    margin-bottom: 20px;
    display: inline-block;
    border-radius: 0%;
    margin-top: 20px;
}


.info-section .view-prototype:hover {
    background-color: #F8FDFF;
    cursor: pointer, auto;
}

.info-section .img-title .view-prototype:hover {
    background-color: #F8FDFF;
    cursor: pointer, auto;
}

.highlighted-info-section > a > p:hover {
    background-color: #F8FDFF;
    cursor: pointer, auto;
}



.info-section h3 {
    margin-bottom: 20px; /* Space between h3 and p */
}

.info-section img {
    margin-top: 40px; /* Space below the p and above the img */
    width: 100%; /* Ensure the image spans the entire width, optional */
    height: auto; /* Maintain aspect ratio of the image */
}

/* slideshow section */

.slideshow-container {
    position: relative;
    max-width: 100%;
    margin: auto;
    overflow: hidden;
}

.mySlides {
    display: none;
    width: 100%;
    transition: transform 1s ease-in-out;
}

.mySlides img {
    width: 100%;
    height: auto;
}

.dot-container {
    text-align: center;
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}

.dot {
    height: 15px;
    width: 15px;
    margin: 0 5px;
    background-color: #A0C59E;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.3s ease;
}

.dot:hover {
    background-color: #486500;
}

.active {
    background-color: #486500;
}

.fade {
    animation-name: fade;
    animation-duration: 1s;
}

@keyframes fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

.container-m {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 20px;
    gap: 20px;
}

.logo-s {
    flex: 1;
    max-width: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo-s img {
    width: 100%;
    max-width: 120px; /* Limit logo size */
    height: auto;
    border-radius: 20px;
}

.content {
    display: flex;
    flex: 2;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    width: 100%;
}

.main-image {
    flex: 1;
    max-width: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.main-image img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.pros-cons {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 400px;
    width: 100%;
}

.pros,
.cons {
    padding: 20px;
    border-radius: 20px;
}

.pros {
    background-color: #d4f7d4; /* Light Green */
}

.cons {
    background-color: #f7d4d4; /* Light Red */
}

.pros h3,
.cons h3 {
    margin-bottom: 10px;
    font-size: 1.2em;
    font-weight: bold;
}

.pros ul,
.cons ul {
    list-style-type: disc;
    margin-left: 20px;
}

.pros ul li, .cons ul li {
    font-family: 'M PLUS 1', sans-serif;
}

@media (max-width: 768px) {
    .container {
        flex-direction: column;
        align-items: center;
    }

    .content {
        flex-direction: column;
        align-items: center;
    }

    .main-image,
    .pros-cons {
        max-width: 100%;
    }
}

/* Highlighted Info Section */
.highlighted-info-section {
    padding: 80px 80px; /* 80px top and bottom, 80px left and right */
}

.highlighted-info-section h3 {
    font-size: 1.5rem;
    font-family: "M PLUS 1", sans-serif;
    margin-bottom: 20px;
}

.highlighted-info-section p {
    font-size: 1rem;
    margin-bottom: 40px;
}

.content-container {
    display: flex; /* Use flexbox for horizontal alignment */
    gap: 40px; /* Space between highlighted text and image */
}

/* Highlighted Text */
.highlighted-text {
    flex: 1; /* Take up remaining space */
    background-color: #FFFDF6; /* Highlighted background color */
    border-radius: 20px; /* Rounded corners */
    padding: 20px; /* Padding inside the highlighted section */
    height: fit-content;
}

.highlighted-text h3 {
    font-size: 1.5rem;
    font-family: "M PLUS 1", sans-serif;
}

.highlighted-text p {
    font-size: 1rem;
    margin: 0;
    font-family: "M PLUS 1", sans-serif;
}

.highlighted-text p strong {
    font-size: 1rem;
    margin: 0;
    font-weight: 700;
    font-family: "M PLUS 1", sans-serif;
}

.accessichat-colors p {
    font-size: 1rem;
}

.highlighted-text ul {
    margin: 40px;
}

.highlighted-text li {
    margin: 20px auto; /* Space between list items */
    font-family: "M PLUS 1", sans-serif;
}

.highlighted-info-section img {
    width: 50%; /* Image takes up 50% of the section width */
    height: auto; /* Maintain aspect ratio of the image */
}

/* Improvement Section Styles */
.improvement-section {
    width: 100%;
    background-color: #FFFDF6; /* Light yellow background */
    border-radius: 100px; /* Large border radius */
    padding: 80px 40px; /* Padding: 80px top/bottom, 40px left/right */
    border: 1px solid #FFEABB; /* Stroke border */
    text-align: center; /* Center the heading */
    margin-top: 20px;
}

.improvement-section h1 {
    margin-bottom: 48px; /* Space between h1 and the next section */
}

/* List Container */
.improvement-list-container {
    background-color: white;
    border: 1px solid #FFEABB; /* Stroke for the white section */
    border-radius: 20px; /* Rounded corners for the white section */
    padding: 20px; /* Padding inside the white section */
    text-align: left; /* Align list content to the left */
    margin-bottom: 48px; /* Space between the white section and the h3 */
}

/* Ordered List Styles */
.improvement-list-container ol {
    list-style: none; /* Remove default list styling */
    padding: 0;
    margin: 0;
}

.improvement-list-container li {
    display: flex; /* Use flexbox to align number and text */
    align-items: center; /* Align items at the top */
    margin-bottom: 16px; /* Spacing between list items */
    font-family: "M PLUS 1", sans-serif;
}

.improvement-list-container li:last-child {
    margin-bottom: 0; /* Remove margin from the last item */
}

/* List Number Styles */
.improvement-list-container li::before {
    content: counter(item) ". "; /* Show list numbers */
    counter-increment: item; /* Increment counter for each list item */
    font-size: 2rem; /* Large font size for the numbers */
    color: #816b3b; /* Color for the numbers */
    margin-right: 16px; /* Space between number and list content */
    font-family: 'EB Garamond', serif;
}

/* Start ordered list counter */
.improvement-list-container ol {
    counter-reset: item;
}

/* H3 Section Styles */
#improvement-h3 {
    padding: 40px; /* Padding around the h3 */
    border: 1px solid #D9B86E; /* Stroke around the h3 section */
    border-radius: 20px; /* Rounded corners */
    text-align: center; /* Center the text */
    background-color: #FFEABB;
}

/* flippers */
/* Styles for the flipping section */
.flipping-section {
    padding: 40px 80px; /* 40px top and bottom, 80px left and right */
    background-color: #FFEABB; /* Background hex color */
}
  
/* Existing flipper styles */
.flipper-container {
    display: flex;
    justify-content: space-between;
    perspective: 1000px; /* 3D perspective for the flipping effect */
}

.flipper {
    width: 100%;
    height: 700px;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 1s;
    text-align: center;
}

.flipper:hover {
    transform: rotateY(180deg); /* Flip the card */
}

.flipper .front, .flipper .back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}

.flipper .back {
    transform: rotateY(180deg);
}

.four-column-section {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Creates 4 equal-width columns */
    gap: 52px; /* Space between columns */
    
  }

/* Section container */
.two-column-section {
    display: flex;
    gap: 52px; /* Space between columns */
    align-items: flex-start; /* Align content to the left */
}
  
/* Individual column styling */
.info-section .img-title .two-column-section  .column, .info-section .img-title .three-column-section .column, .info-section .img-title .four-column-section  .column {
    flex: 1; /* Make both columns equal in width */
    display: flex;
    flex-direction: column;
    align-items: stretch; /* Make all items stretch to full height */
}

/* Image icon styling */
.info-section .img-title .two-column-section .icon, .info-section .img-title .three-column-section .icon, .info-section .img-title .four-column-section .icon {
    width: 100px;
    height: 100px;
    margin-bottom: 20px; /* Space between the image and h3 */
}

/* Heading (h3) styling */
.info-section .img-title .two-column-section .column h3, .info-section .img-title .three-column-section .column h3 {
    margin-bottom: 20px; /* Space between the h3 and paragraph */
    font-size: 1.2rem;
    font-family: "M PLUS 1", sans-serif;
    color: #1A2400;
    padding: 0px;
    background-color: #FFFAEA;
    font-weight: bold;
}

#seatrackh3 {
    background-color: #EDFAFF;
    color: #010711;
}

#hh3 {
    background-color: white;
    color: #010711;
}

#backturq {
    background-color: #EAFAFD;
    color: #010711;
}

.info-section .img-title .four-column-section .column h3 {
    margin-bottom: 20px; /* Space between the h3 and paragraph */
    font-size: 1.2rem;
    font-family: "M PLUS 1", sans-serif;
    color: #010711;
    padding: 0px;
    background-color: #EDFAFF;
    font-weight: bold;
}

/* Paragraph styling */
.info-section .img-title .two-column-section .column .column-text {
    padding: 20px; /* 20px padding on all sides */
    background-color: #FFFDF6;
    border-radius: 20px;
    flex-grow: 1; /* Fill available height of the column */
    box-sizing: border-box; /* Include padding in height/width calculations */
    display: flex;
    flex-direction: column; /* Stack contents in the paragraph if needed */
    justify-content: flex-start; /* Align content to the top */
}

.info-section .img-title .four-column-section .column .column-text {
    padding: 20px; /* 20px padding on all sides */
    background-color: #F8FDFF;
    border-radius: 20px;
    flex-grow: 1; /* Fill available height of the column */
    box-sizing: border-box; /* Include padding in height/width calculations */
    display: flex;
    flex-direction: column; /* Stack contents in the paragraph if needed */
    justify-content: flex-start; /* Align content to the top */
}
  
.three-column-section {
    display: flex;
    gap: 52px; /* Space between columns */
}

/* Section styling */
.header-section {
    padding: 80px 0; /* 80px padding top and bottom, 0 padding left and right */
    background-color: #FFFAEA; /* Optional: add a background color */
    text-align: center; /* Optional: center the text */
  }

.h-header-section {
padding: 80px 0; /* 80px padding top and bottom, 0 padding left and right */
background-color: white; /* Optional: add a background color */
text-align: center; /* Optional: center the text */
}
  
/* Heading styling */
.header-section h1 {
    margin: 0; /* Remove default margin */
}
  
/* Section styling */
.link-section {
    padding: 40px 80px; /* 40px padding top and bottom, 80px left and right */
    background-color: #FFFAEA; /* Optional: add a background color */
    text-align: right;
    margin-top: 100px;
  }

.h-link-section {
padding: 40px 80px; /* 40px padding top and bottom, 80px left and right */
background-color: white; /* Optional: add a background color */
text-align: right;
margin-top: 100px;
}

.a-link-section {
    padding: 40px 80px; /* 40px padding top and bottom, 80px left and right */
    background-color: #FFFAEA; /* Optional: add a background color */
    text-align: right;
    margin-top: 100px;

}

.s-link-section {
    padding: 40px 80px; /* 40px padding top and bottom, 80px left and right */
    background-color: #FFFAEA; /* Optional: add a background color */
    display: flex;
    justify-content: space-between;
    margin-top: 100px;

}

.q-link-section {
    padding: 40px 80px; /* 40px padding top and bottom, 80px left and right */
    background-color: #F0FFF2; /* Optional: add a background color */
    display: flex;
    justify-content: space-between;
    color: #423D44;
    margin-top: 100px;

}

.q-link {
    margin-top: 20px;
    color: #423D44;
    background-color: #F0FFF2;
    cursor: pointer, auto;
}

.q-link:hover {
    background-color: #F8FDFF;
    cursor: pointer, auto;
}

.h-link {
    margin-top: 20px;
    color: #010711;
    background-color: white;
    cursor: pointer, auto;
}

.h-link:hover {
    background-color: #EAFAFD;
    cursor: pointer, auto;
}


.home {
    background-color: #FFFAEA; /* Optional: add a background color */
    padding: 40px 80px; /* 40px padding top and bottom, 80px left and right */
    text-align: center;
}

.seatrack-home {
    background-color: #EDFAFF; /* Optional: add a background color */
    padding: 40px 80px; /* 40px padding top and bottom, 80px left and right */
    text-align: center;
}

.h-home {
    background-color: white; /* Optional: add a background color */
    padding: 40px 80px; /* 40px padding top and bottom, 80px left and right */
    text-align: center;
}
  
  /* Link styling */
.right-aligned-link {
    display: inline-block; /* Make the anchor a block element */
    text-align: right; /* Align the text to the right */
    color: #1A2400; /* Example link color, adjust as needed */
    text-decoration: underline; /* Remove underline */
    font-family: "M PLUS 1", sans-serif;
    font-weight: bold;
    flex: 1;
}

.centered-link {
    display: inline-block; /* Make the anchor a block element */
    text-align: center; /* Align the text to the right */
    color: #1A2400; /* Example link color, adjust as needed */
    text-decoration: underline; /* Remove underline */
    font-family: "M PLUS 1", sans-serif;
    font-weight: bold;
}
  
  /* Optional: Hover effect for the link */
.centered-link:hover, .right-aligned-link:hover {
    background-color: #FFFDF6;
    cursor: pointer, auto;
}

  /* Link styling */
.s-right-aligned-link {
    text-align: right; /* Align the text to the right */
    color: #010711; /* Example link color, adjust as needed */
    text-decoration: underline; /* Remove underline */
    font-family: "M PLUS 1", sans-serif;
    font-weight: bold;
}

.s-left-aligned-link {
    text-align: left; /* Align the text to the right */
    color: #010711; /* Example link color, adjust as needed */
    text-decoration: underline; /* Remove underline */
    font-family: "M PLUS 1", sans-serif;
    font-weight: bold;
}

.a-left-aligned-link {
    text-align: left; /* Align the text to the right */
    color: #423D44; /* Example link color, adjust as needed */
    text-decoration: underline; /* Remove underline */
    font-family: "M PLUS 1", sans-serif;
    font-weight: bold;
}

.a-right-aligned-link {
    text-align: right; /* Align the text to the right */
    color: #423D44; /* Example link color, adjust as needed */
    text-decoration: underline; /* Remove underline */
    font-family: "M PLUS 1", sans-serif;
    font-weight: bold;
}

.h-right-aligned-link {
    text-align: right; /* Align the text to the right */
    color: #010711; /* Example link color, adjust as needed */
    text-decoration: underline; /* Remove underline */
    font-family: "M PLUS 1", sans-serif;
    font-weight: bold;
}

.h-centered-link {
    display: inline-block; /* Make the anchor a block element */
    text-align: center; /* Align the text to the right */
    color: #010711; /* Example link color, adjust as needed */
    text-decoration: underline; /* Remove underline */
    font-family: "M PLUS 1", sans-serif;
    font-weight: bold;
}

.h-left-aligned-link:hover, .h-centered-link:hover {
    background-color: #EAFAFD;
    cursor: pointer, auto;
}

.a-left-aligned-link {
    text-align: left; /* Align the text to the right */
    color: #423D44; /* Example link color, adjust as needed */
    text-decoration: underline; /* Remove underline */
    font-family: "M PLUS 1", sans-serif;
    font-weight: bold;
}

.a-left-aligned-link:hover, .a-right-aligned-link:hover {
    background-color: #FFFDF6;
    cursor: pointer, auto;
}

.s-centered-link {
    display: inline-block; /* Make the anchor a block element */
    text-align: center; /* Align the text to the right */
    color: #010711; /* Example link color, adjust as needed */
    text-decoration: underline; /* Remove underline */
    font-family: "M PLUS 1", sans-serif;
    font-weight: bold;
}
  
  /* Optional: Hover effect for the link */
.s-centered-link:hover, .s-right-aligned-link:hover, .s-left-aligned-link:hover {
    background-color: #F8FDFF;
    cursor: pointer, auto;
}

/* Link styling */
.q-right-aligned-link {
    text-align: right; /* Align the text to the right */
    color: #423D44; /* Example link color, adjust as needed */
    text-decoration: underline; /* Remove underline */
    font-family: "M PLUS 1", sans-serif;
    font-weight: bold;
}

.q-left-aligned-link {
    text-align: left; /* Align the text to the right */
    color: #423D44; /* Example link color, adjust as needed */
    text-decoration: underline; /* Remove underline */
    font-family: "M PLUS 1", sans-serif;
    font-weight: bold;
}

.q-centered-link {
    display: inline-block; /* Make the anchor a block element */
    text-align: center; /* Align the text to the right */
    color: #423D44; /* Example link color, adjust as needed */
    text-decoration: underline; /* Remove underline */
    font-family: "M PLUS 1", sans-serif;
    font-weight: bold;
}
  
  /* Optional: Hover effect for the link */
.q-centered-link:hover, .q-right-aligned-link:hover, .q-left-aligned-link:hover {
    background-color: #FEFFFE;
    cursor: pointer, auto;
}

/* Initial styling for the orb icon in the bottom right */
.nav-orb {
    position: fixed;
    bottom: 10px;
    right: 10px;
    cursor: pointer, auto;
}
  
.orb-icon {
    width: 60px; /* Adjust the size of the orb */
    height: 60px;
    cursor: pointer;
    transition: opacity 0.3s ease;
    cursor: pointer, auto;
}
  
/* Hidden by default: the orb menu will appear on hover */
.orb-overlay {
    display: none;
    position: fixed;
    bottom: 10px;
    right: 10px;
    width: 250px;
    padding: 30px 30px 20px 30px;
    background-color: white;
    border: 1px solid #A0C59E;
    border-radius: 20px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Optional shadow for better visibility */
    opacity: 0;
    transition: opacity 0.5s ease, transform 0.5s ease;
    transform: scale(0.9); /* Start slightly smaller */
}

/* When the orb is hovered, display the overlay */
.nav-orb:hover .orb-overlay {
    display: block;
    opacity: 1;
    transform: scale(1); /* Grow to full size */
    transition: opacity 0.3s ease;
}

/* Orb menu item styling */
.orb-items {
    list-style: none;
    padding: 0;
    margin: 0;
}

.orb-items li {
    margin-bottom: 20px; /* Space between items */
}

.orb-items li:last-child {
    margin-bottom: 0;
}

.orb-items a {
    text-decoration: none;
    color: #082160; /* Adjust as needed */
    font-size: 1rem;
    font-weight: 600;
    font-family: "M PLUS 1", sans-serif;
    cursor: pointer, auto;
}

.orb-items a:hover {
    text-decoration: underline;
    text-decoration-color: #A0C59E;
    cursor: pointer, auto;
}

/* Close icon styling at the bottom */
.orb-exit {
    width: 30px;
    height: 30px;
    position: absolute;
    bottom: 20px;
    right: 30px;
    cursor: pointer;
    transition: opacity 0.3s ease;
    cursor: pointer, auto;
}
  
  /* Fade out the orb icon on hover */
.nav-orb:hover .orb-icon {
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* SeaTrack */
.seatrack-colours {
    background-color: #EDFAFF;
    color: #010711;
}

.seatrack-colours p strong {
    color: #010711;
}

#seatrack-h1 {
    color: #010711;
}
  
/* about me section */
.about-me {
    display: flex;
    justify-content: space-between; /* Create space between text and image */
    padding: 40px 80px; /* Padding of 40px top/bottom, 80px left/right */
    gap: 40px; /* Space between text and image */
}

.about-text {
    width: 60%; /* Text section takes 60% of the space */
}

.about-image {
    width: 40%; /* Image section takes 40% of the space */
}

.about-image img {
    width: 100%; /* Ensure the image fits within its container */
    height: auto; /* Maintain aspect ratio */
}

.about-text h1 {
    font-size: 2.5rem; /* Adjust heading size as needed */
    margin-bottom: 20px; /* Space between heading and paragraph */
}




.design-philosophy {
    padding: 40px 80px; /* Padding of 40px top/bottom, 80px left/right */
}

.design-philosophy h1 {
    font-size: 2.5rem; /* Adjust heading size as needed */
    margin-bottom: 20px; /* Space between heading and paragraph */
}



.container-m {
    overflow: hidden;
    
    border-radius: 20px;
}

.art-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    padding: 20px 0;
    width: 100%;
    box-sizing: border-box;
}

.flip-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    padding: 20px 0;
    width: 100%;
    box-sizing: border-box;
}

.art-container img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 20px;
    border: 2px solid #A0C59E;
}

p strong {
    font-family: "M PLUS 1", sans-serif;
    font-weight: bold;
}

.art-item {
    position: relative;
    overflow: hidden;
}

.art-item .title {
    position: absolute;
    bottom: 0;
    left: 0;
    border-radius: 20px;
    width: 100%;
    background: #c5e1c3;
    color: #082160;
    text-align: center;
    padding: 10px;
    opacity: 0;
    transition: opacity 0.3s ease;
    font-family: 'M PLUS 1', sans-serif;
}
.art-item:hover .title {
    opacity: 1;
}

/* Marquee container */
.marquee {
    display: flex;
    width: 200%;
    animation: marquee 15s linear infinite;
}

/* Marquee content */
.marquee-content {
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.marquee-content img {
    border-radius: 20px;
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-right: 20px;
    object-fit: cover;
}

.designed-for {
    padding: 40px 80px; /* Padding of 40px top/bottom, 80px left/right */
}

.designed-for h1 {
    font-size: 2.5rem;
    margin-bottom: 40px; /* Space between h1 and the resume section */
}

.resume-part {
    margin-bottom: 40px; /* Add space between multiple resume parts if needed */
}

.resume-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px; /* Space between row and the ul */
}

.resume-row h3 {
    margin-right: 20px; /* Space between company name and job title */
}

.designed-for .resume-part .resume-row .job-title strong{
    font-family: "M PLUS 1", sans-serif;
    margin: 0; /* Ensures the job title stays 20px from the company and doesn't overlap with the date */
}

.resume-row p {
    margin: 0; /* Remove default margin from p elements */
}

.job-date {
    margin-left: auto; /* Pushes the date to the right */
}

.designed-for .resume-part ul {
    margin: 0;
    padding-left: 20px; /* Indent the list */
    font-family: "M PLUS 1", sans-serif;
}


.c-marquee {
    display: flex;
    width: 200%;
    animation: c-box 20s linear infinite;
}

/* Marquee content */
.c-marquee-content {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.c-box {
    width: 100%;
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.5); /* 50% transparent white */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* Align content at the top */
    box-sizing: border-box; /* Ensure padding is included in width and height */
    border-radius: 20px;
    margin-right: 20px;;
}

.c-box img {
    width: 100%;
}

.design-philosophy .container-m .c-marquee .c-marquee-content .c-box .extra-box {
    height: 100%;
    width: auto;
}

.c-box-link {
    color: #423D44;
    text-decoration: underline;
    margin-bottom: 20px; /* 20px space below the link */
    transition: background-color 0.3s ease;
    cursor: pointer, auto;
    font-family: "M PLUS 1", sans-serif;
    font-weight: bold;
    text-align: left;
}

.c-box-link:hover {
    background-color: rgba(255, 255, 255, 1); /* Full opacity white on hover */
    cursor: pointer, auto;
}

/* health pie */
.center {
    text-align: center;
}

.phonepic {
    width: 700px;
}

.info-section .phonepic {
    width: 700px;
}

.backwhite {
    background-color: white;
}

@keyframes c-box {
    from { transform: translateX(0); }
    to { transform: translateX(-2690px); }
}

.container-m:hover .c-marquee {
    animation-play-state: paused;
}

/* Marquee animation */
@keyframes marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-2560px); }
}

/* Pause the marquee when hovered */
.container-m:hover .marquee {
    animation-play-state: paused;
}

/* Keyframes for moving the gradient in from the top */
@keyframes slideInFromTop {
    0% {
        transform: translateY(-100%); /* Gradient is off-screen at the top */
    }
    100% {
        transform: translateY(-20%); /* Gradient moves into place */
    }
}


/* medias */

@media (min-width: 1280px) {
    html {
        font-size: 18px; 
    }
}

@media (max-width: 1280px) {

    
}

@media (max-width: 992px) {

    .circle {
        width: 90vw;
        height: 90vw;
    }

    .nav-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 30px;
        width: 100%;
    }

    #chapter-nav {
        padding-left: 80px;
        width: 100%;
        border: 1px solid #A0C59E;
        position: fixed;
        top: 73px; /* Adjust based on your main nav height */
        left: 50%;
        transform: translateX(-50%);
        background: #ffffff;
        padding: 5px;
        display: flex;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    }

    #chapter-nav button {
        border: none;
        padding: 0;
    }

    .nav {
        display: none; /* Hide full navbar on small screens */
    }

    .hamburger-nav {
        display: flex; /* Show hamburger menu on small screens */
    }

    .nav-links {
        display: none; /* Hide the navigation links */
    }


    .grid-container {
        display: grid;
        grid-template-columns: repeat(12, 1fr); /* Create 12 equal columns */
        gap: 20px; /* Space between grid items */
        align-items: center;
    }
    
    .content-left h1, .content-left p, .content-right h1, .content-right p {
        margin-bottom: 24px;
    }
    
    .content-right {
        grid-column: span 13;
        margin: auto;

    }
    
    .content-left {
        grid-column: span 13;
        margin-left: 0;
    }
    
    .side-image{
        grid-column: span 13;
        transition: 0.5s ease;
        margin: auto;
    }

    .side-image img {
        width: 100%;
        height: 100%;
    }

    .side-image-left img {
        width: 100%;
        height: 100%;
    }
    
    .side-image-left {
        grid-column: span 13;
        transition: 0.5s ease;
        margin: auto;
    }

    .side-image-left img {
        width: 100%;
    }

    .custom-section-tablet {
        display: grid;
    }

    .custom-section {
        display: none;
    }
}


@media (max-width: 1280px){
    html {
        font-size: 14px; /* Adjusted size for devices under 992px */
    }

    .info-section .wireframe-section #update {
        width: 100%;
    }

    .circle {
        position: relative;
        border-radius: 50%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        border: 1px solid #A0C59E;
        background-color: white
    }


    .cards-set {
        position: absolute; /* Stack all card sets on top of each other */
        top: 0;
        left: 0;
        display: none;
        width: 100%; /* Ensures that it occupies the full width */
        opacity: 0; /* Start with hidden sets*/
        transition: opacity 1.5s ease-in-out;
        display: flex; /* Show cards in flex layout */
        flex-wrap: wrap;
        justify-content: center; /* Space between cards in a set */
    }

    .cards-wrapper {
        display: flex;
        flex-wrap: wrap;
        gap: 10px; /* Adjust the spacing between cards */
        overflow: hidden;
        border-radius: 20px;
        height: 1880px;
        justify-content: center;
        
    }

    .card {
        width: 360px;
        margin: auto;
        margin-bottom: 40px;
        margin-top: 20px;
        height: 580px;
    }

    .testimonial-slideshow {
        padding: 0 50px 40px;

    }

    .testimonial-section {
        padding: 80px 0px 40px 0px;
        margin: auto;
        background-color: #EDFAFF;
        text-align: center;
    }

    .yellow-circle {
        right: 30px;
        top: 50px;
        width: 100px;
        height: 100px;
    }

    .resume-wheel a {
        left: 30px;
        bottom: 20px;
        width: 150px;
    }

    .award-container {
        width: 360px;
    }

    .awards-section {
        padding: 0 40px 40px;
        flex-wrap: wrap;
        margin: auto;
    }

    .additional-works-section {
        display: none;
    }

    .additional-works-section-t {
        padding: 40px 30px;
        margin: auto;
        display: flex;
        width: 600px;
    }

    .additional-works-container {
        width: 600px;
        flex-direction: column;
    }

    .additional-works-content {
        width: 100%;
    }

    .additional-works-image img{
        width: 100%;
    }

    .work-together-section {
        padding: 40px 0;
        margin-top: 100px;
    }

    .work-together-section::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 300px;
        height: 300px;
        background: radial-gradient(circle, #FFFAEA 500%, #EDFAFF 70%);
        filter: blur(100px); /* Blur to fade out the edges */
        z-index: 0;
    }

    .additional-works-content button {
        display: block;
        margin: 0 auto; 
        text-align: center;
        padding: 16px;
        width: 100%;
    }

    .hero-image {
        width: 100%;
    }

    .hero {
        width: 100%;

    }
    
    #update {
        width: 100%;
    }

    .project-overview, .seatrack-project-overview, .q-project-overview {
        padding: 40px 30px 40px;
    }

    .chapter-section {
        padding: 0 30px;
    }

    .top-line, .bottom-line, .seatrack-bottom-line, .seatrack-top-line, .q-bottom-line, .q-top-line {
        width: calc(100% - 60px);
    }

    .info-section {
        padding: 40px 30px;
    }

    .highlighted-info-section {
        padding: 40px 30px;
    }

    .highlighted-text ul {
        margin: 20px
    }

    iframe {
        width: 100%;
        height: 80vh;
        margin: auto;
    }

    .flipping-section {
        padding: 40px 30px;
    }
    
    .flipper .front img, .flipper .back img{
        width: 90%;
        height: auto;
    }

    .flipper {
        height: 500px;
    }

    .link-section {
        margin-top: 100px;
        padding: 40px 30px;
    }

    .img-section-full {
        text-align: center;
        padding: 0px 30px 80px 30px;
    }

    .s-link-section, .q-link-section {
        padding: 40px 30px;
        margin-top: 100px;
    }

    .yellow-circle img.circle-icon {
        width: 40px;
        height: auto;
    }

    .dailyui-gallery {
        margin: 40px 30px;
    }

    .about-me {
        display: flex;
        flex-direction: column;
        padding: 40px 30px;
        justify-content: center;
    }

    .about-image {
        width: 80%;
        margin: auto;
    }

    .about-text {
        width: 100%;
        margin: auto;
    }

    .design-philosophy {
        padding: 40px 30px;
    }

    .designed-for {
        padding: 40px 30px;
    }

    .phonepic {
        width: 100%;
        height: auto;
    }

    .info-section .phonepic {
        width: 100%;
    }

    .topleft-img {
        max-width: 100%;
    }

    .topleft-img {
        max-width: 100%;
    }

    .bottomright-img {
        max-width: 100%;
    }


    
}

@media only screen and (max-width: 992px) and (max-height: 900px){
    html {
        font-size: 14px;
    }

    .circle h2 {
        font-size: 5rem;
    }

    .circle {
        position: relative;
        width: 70vw;
        height: 70vw;
        border-radius: 50%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        border: 1px solid #A0C59E;
    }

    .topleft-img {
        max-width: 50vw;
    }

    .bottomright-img {
        max-width: 50vw;
    }
    
    .side-image {
        width: 50vw; /* Make the image ressponsive */
        height: 50vw; /* Maintain aspect ratio */
        transition: 0.5s ease;
    }
    
    .side-image-left {
        width: 50vw; /* Make the image responsive */
        height: 50vw; /* Maintain aspect ratio */
        transition: 0.5s ease;
    }
}

@media only screen and (min-width: 992px) and (min-height: 992px){
    .circle {
        position: relative;
        width: 800px;
        height: 800px;
        border-radius: 50%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        border: 1px solid #A0C59E;
    }
    .side-image {
        width: 70vw; /* Make the image ressponsive */
        height: 70vw; /* Maintain aspect ratio */
        transition: 0.5s ease;
    }
    
    .side-image-left {
        width: 70vw; /* Make the image responsive */
        height: 70vw; /* Maintain aspect ratio */
        transition: 0.5s ease;
    }
    .content-left h1, .content-left p, .content-right h1, .content-right p {
        margin-bottom: 24px;
    }
    
    .content-right {
        width: 50vh; /* Make the image ressponsive */
        margin: auto;

    }
    
    .content-left {
        width: 50vh; /* Make the image ressponsive */
        margin: auto;
    }
    
    .side-image {
        width: 50vh; /* Make the image ressponsive */
        height: 50vh; /* Maintain aspect ratio */
        transition: 0.5s ease;
        margin: auto;
    }
    
    .side-image-left {
        width: 50vh; /* Make the image responsive */
        height: 50vh; /* Maintain aspect ratio */
        transition: 0.5s ease;
        margin: auto;
    }
/* 
    .custom-section-tablet {
        display: grid;
    }

    .custom-section {
        display: none;
    }

    .additional-works-section {
        display: none;
    }

    .additional-works-section-t {
        padding: 40px 10px;
        width: 100%;
        margin: auto;
        display: flex;
    }

    .additional-works-container {
        width: 50vh;
        flex-direction: column;
        margin:auto;
    } */
}


@media (max-width: 600px) {
    html {
        font-size: 12px; /* Further adjusted size for devices under 600px */
    }

    .nav {
        display: none; /* Hide full navbar on small screens */
    }

    .hamburger-nav {
        display: flex; /* Show hamburger menu on small screens */
    }

    #close {
        margin-top: 20px;
    }

    .circle {
        position: relative;
        width: 400px;
        height: 400px;
        border-radius: 50%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        border: 1px solid #A0C59E;
    }

    .circle p {
        padding: 0 20px;
    }

    .circle h2 span {
        font-size: 4.5rem;
    }

    .content-container {
        flex-direction: column;
    }

    .main-section {
        margin-bottom: 15vh;
        padding-bottom: 5vh;
        height: 60vh;
    }

    /* Top Left and Bottom Right Images */
    .topleft-img {
        position: absolute;
        top: 0;
        left: 0;
        max-width: 100%; /* Ensures the image scales proportionally */
        height: auto;
        width: auto;
        object-fit: cover;
    }

    .bottomright-img {
        position: absolute;
        bottom: -150px;
        right: 0;
        max-width: 100%; /* Ensures the image scales proportionally */
        height: auto;
        width: auto;
        object-fit: cover;
    }

    /* Main Section */
    .main-section {
        position: relative;
        height: 60vh;
        background-color: #EDFAFF;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* Overlapping Image */
    .overlap-img {
        position: absolute;
        bottom: -100px;
        left: 100px;
        width: 12vh;
    }

    .side-image {
        grid-column: span 13;
        width: 400px; /* Make the image ressponsive */
        height: 400px; /* Maintain aspect ratio */
        transition: 0.5s ease;
        margin: auto;
    }
    
    .side-image-left {
        grid-column: span 13;
        width: 400px; /* Make the image responsive */
        height: 400px; /* Maintain aspect ratio */
        transition: 0.5s ease;
    }

    .custom-section {
        background-color: #EDFAFF; /* Light blue background color */
        padding: 40px 30px; /* Space of 160px to the left and right */
        margin: auto;
        align-items: center; /* Center items vertically */
        color: #082160; /* Dark blue text color */
    }

    .additional-works-content button {
        display: block;
        margin: 0 auto; 
        text-align: center;
        padding: 10px;
        width: 100%;
    }

    .hero-image {
        width: 100vw;
        height: auto;
    }

    .hero {
        width: 100vw;
        height: 40vh;

    }

    .heading-section, .seatrack-heading-section, .q-heading-section, healthpie-heading-section {
        padding: 40px 10px;
    }

    .heading-section h2, .seatrack-heading-section h2, .q-heading-section h2, healthpie-heading-section h2 {
        font-size: 4rem;
    }

    .project-overview, .seatrack-project-overview, .q-project-overview {
        flex-direction: column;
        padding: 10px 30px 10px;
    }

    .flowchart {
        flex-direction: column;
        flex-wrap: wrap;
    }

    .chapter-header {
        flex-direction: column;
    }


    .chapter-section {
        padding: 0 30px;
    }

    .top-line, .bottom-line, .seatrack-bottom-line, .seatrack-top-line, .q-bottom-line, .q-top-line {
        width: calc(100% - 60px);
    }

    .info-section {
        padding: 40px 10px;
    }

    #heading {
        padding: 20px;
        text-align: center;
    }

    .quote-section {
        padding: 10px 10px;
    }

    .img-section-full {
        text-align: center;
        padding: 0px 10px 40px 10px;
    }

    .highlighted-info-section {
        padding: 40px 10px;
    }

    .highlighted-text ul {
        margin: 20px
    }

    .info-section div .row, .info-section .row {
        display: flex;
        flex-direction: column;
        gap: 20px;
        margin-top: 20px;
    }

    .info-section .img-title h3, .info-section .row h3 {
        margin: 0;
        margin-top: 20px;
    }

    iframe {
        width: 100%;
        height: 80vh;
        margin: auto;
    }

    .flipping-section {
        padding: 40px 10px;
    }
    
    .flipper .front img, .flipper .back img{
        width: 90%;
        height: auto;
    }

    .flipper {
        height: 100%;
    }

    .link-section {
        margin-top: 100px;
        padding: 40px 10px;
    }

    .four-column-section {
        display: flex;
        flex-direction: column;
    }

    .improvement-section {
        padding: 80px 10px;
    }

    .flipper-container {
        height: 250px;
    }

    .s-link-section, .q-link-section {
        padding: 40px 10px;
        margin-top: 100px;
    }

    .yellow-circle img.circle-icon {
        width: 40px;
        height: auto;
    }

    .dailyui-gallery {
        margin: 40px 10px;
    }

    .about-me {
        display: flex;
        flex-direction: column;
        padding: 40px 10px;
        justify-content: center;
    }

    .about-image {
        width: 100%;
        margin: auto;
    }

    .about-text {
        width: 100%;
        margin: auto;
    }

    .design-philosophy {
        padding: 40px 10px;
    }

    .designed-for {
        padding: 40px 10px;
    }

    .two-column-section, .three-column-section {
        gap: 20px;
        flex-wrap: wrap;
        flex-direction: column;
    }

    .info-section .img-title .two-column-section .column, .info-section .img-title .three-column-section .column, .info-section .img-title .four-column-section .column {
        width: 100%;
    }

    .accessichat-work-together-section::before {
        width: 100%;
        height: 100%;
    }

    .accessichat-work-together-section {
        padding: 40px 10px;
    }

    .home, .seatrack-home {
        padding: 40px 10px;
    }

    .dailyui-heading-section {
        padding: 40px 0;
    }

    .dailyui-gallery {
        margin: 40px 10px;
    }

    .about-heading-section {
        padding: 40px 10px;
    }

    .resume-row {
        flex-direction: column;
        gap: 20px;
        align-items: flex-start;
    }


    .design-philosophy .container-m .c-marquee .c-marquee-content .c-box .extra-box {
        width: 180px;
    }


    @keyframes c-box {
        from { transform: translateX(0); }
        to { transform: translateX(-1100px); }
    }

}

@media only screen and (max-width: 450px) and (min-height: 800px){ 
    html {
        font-size: 11px; /* Further adjusted size for devices under 600px */
    }

    .nav {
        display: none; /* Hide full navbar on small screens */
    }

    .nav-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 20px;
    }

    .hamburger-nav {
        display: flex; /* Show hamburger menu on small screens */
    }

    .circle {
        position: relative;
        width: 40vh;
        height: 40vh;
        border-radius: 50%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        border: 1px solid #A0C59E;
    }

    .content-left, .content-right {
        grid-column: span 13;
        width: 40vh; /* Make the image ressponsive */
        height: 40vh; /* Maintain aspect ratio */
        margin: auto;
    }

    .side-image {
        grid-column: span 13;
        width: 40vh; /* Make the image ressponsive */
        height: 40vh; /* Maintain aspect ratio */
        margin: auto;
        transition: 0.5s ease;
    }
    
    .side-image-left {
        grid-column: span 13;
        width: 40vh; /* Make the image responsive */
        height: 40vh; /* Maintain aspect ratio */
        transition: 0.5s ease;
    }

    .custom-section-tablet {
        background-color: #EDFAFF; /* Light blue background color */
        padding: 40px 10px; /* Space of 160px to the left and right */
        margin: auto;
        align-items: center; /* Center items vertically */
        color: #082160; /* Dark blue text color */
    }

    .custom-section-tablet .grid-container div a {
        display: block;
        margin: 0 auto;
        width: 100%;
        text-align: center;
        padding: 10px 0;
    }

    .yellow-circle {
        right: 10px;
        top: 10px;
        width: 80px;
        height: 80px;
    }

    .resume-wheel a {
        left: 10px;
        bottom: -30px;
        width: 120px;
    }

    .additional-works-section-t {
        padding: 40px 10px;
        width: 100%;
        margin: auto;
        display: flex;
    }

    .additional-works-image img {
        width: 100%;
    }

    .testimonial-section {
        padding: 40px 10px;
        width: 100%;
    }

    .work-together-section {
        padding: 40px 10px;
        width: 100%;
        margin: auto;
    }

    .awards-section {
        padding: 0 10px 40px;
        width: 100%;
        margin: auto;
    }

    .testimonial-slideshow {
        padding: 0 10px 40px;
        width: 100%;
        margin: auto;
    }
}

@media only screen and (max-width: 450px) and (max-height: 800px) {
    html {
        font-size: 11px; /* Further adjusted size for devices under 600px */
    }

    .nav {
        display: none; /* Hide full navbar on small screens */
    }

    .nav-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 20px;
    }

    .hamburger-nav {
        display: flex; /* Show hamburger menu on small screens */
    }

    .circle {
        position: relative;
        width: 50vh;
        height: 50vh;
        border-radius: 50%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        border: 1px solid #A0C59E;
    }

    .content-left, .content-right {
        grid-column: span 13;
        width: 40vh; /* Make the image ressponsive */
        height: 40vh; /* Maintain aspect ratio */
        margin: auto;
    }

    .side-image {
        grid-column: span 13;
        width: 40vh; /* Make the image ressponsive */
        height: 40vh; /* Maintain aspect ratio */
        margin: auto;
        transition: 0.5s ease;
    }
    
    .side-image-left {
        grid-column: span 13;
        width: 40vh; /* Make the image responsive */
        height: 40vh; /* Maintain aspect ratio */
        transition: 0.5s ease;
    }

    .custom-section-tablet {
        background-color: #EDFAFF; /* Light blue background color */
        padding: 40px 10px; /* Space of 160px to the left and right */
        margin: auto;
        align-items: center; /* Center items vertically */
        color: #082160; /* Dark blue text color */
    }

    .custom-section-tablet .grid-container div a {
        display: block;
        margin: 0 auto;
        width: 100%;
        text-align: center;
        padding: 10px 0;
    }

    .yellow-circle {
        right: 10px;
        top: 10px;
        width: 80px;
        height: 80px;
    }

    .resume-wheel a {
        left: 10px;
        bottom: -30px;
        width: 120px;
    }

    .additional-works-section-t {
        padding: 40px 0;
        width: 40vh;
        margin: auto;
        display: flex;
    }

    .additional-works-image img {
        width: 40vh;
    }

    .testimonial-section {
        padding: 40px 10px;
        width: 40vh;
    }

    .work-together-section {
        padding: 40px 10px;
        width: 40vh;
        margin: auto;
    }

    .awards-section {
        padding: 0 10px 40px;
        width: 40vh;
        margin: auto;
    }

    .testimonial-slideshow {
        padding: 0 10px 40px;
        width: 40vh;
        margin: auto;
    }

} 

@media (max-width: 380px) {
    html {
        font-size: 10px; /* Further adjusted size for devices under 600px */
    }

    .nav {
        display: none; /* Hide full navbar on small screens */
    }

    .hamburger-nav {
        display: flex; /* Show hamburger menu on small screens */
    }

    .circle {
        position: relative;
        width: 350px;
        height: 350px; 
        margin: 80px 10px auto 10px;
        border-radius: 50%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        border: 1px solid #A0C59E;
    }

    .circle h2 {
        font-size: 4.5rem;
    }
    

    .content-left, .content-right {
        width: 100%;
        margin: auto;
    }

    .side-image {
        width: 100%; /* Make the image ressponsive */
        height: auto;
        object-fit: cover;
        margin: auto;
        transition: 0.5s ease;
    }
    
    .side-image-left {
        grid-column: span 13;
        width: 100%; /* Make the image ressponsive */
        height: auto;
        object-fit: cover;
        margin: auto;
        transition: 0.5s ease;
    }

    .custom-section-tablet {
        background-color: #EDFAFF; /* Light blue background color */
        padding: 40px 10px; /* Space of 160px to the left and right */
        margin: auto;
        align-items: center; /* Center items vertically */
        color: #082160; /* Dark blue text color */
    }
}


@media only screen and (max-width: 380px) and (min-height: 800px) {
    .circle {
        position: relative;
        width: 35vh;
        height: 35vh; 
        margin: auto 10px;
        border-radius: 50%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        border: 1px solid #A0C59E;
    }

    .main-section {
        margin-bottom: 20px;
        background-color: #EDFAFF;
    }

    .content-left, .content-right {
        width: 100%;
        margin: auto;
    }

    .side-image {
        width: 100%; /* Make the image ressponsive */
        height: 100%;
        object-fit: cover;
        transition: 0.5s ease;
    }
    
    .side-image-left {
        width: 100%; /* Make the image ressponsive */
        height: 100%;
        object-fit: cover;
        transition: 0.5s ease;
    }
}



@media (max-height: 780px) {
    html {
        font-size: 14px; 
    }

}

@media (max-height: 630px) {
    html {
        font-size: 12px; /* Further adjusted size for devices under 600px */
    }

}