.fixed-banner {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 75px;
    background: #FFFFFF;
    display: flex;
    justify-content: space-between; /* left vs right */
    align-items: center;
    padding: 0 120px;
    color: #1C1C1C;
    font-size: 17px;
    font-family: 'inter';
    box-sizing: border-box;
    z-index: 1000;
}

.left-items {
    display: flex;          /* keeps link + button in one row */
    align-items: center;
    gap: 15px;              /* space between link and button */
}

.right-items {
    display: flex;          /* right side links, if multiple */
    align-items: center;
}

.bb {
    width: 40px;
    height: 40px;
    background: #FFFFFF;
    color: #1C1C1C;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    display: flex;          /* centers the SVG inside button */
    align-items: center;
    justify-content: center;
    padding: 0;
}

#moon-icon {
    width: 20px;
    height: 20px;
    fill: currentColor;
    display: block;       /* removes inline whitespace */
    margin: 0;            /* ensure no extra margin */
}

#sun-icon {
    display: none;
}

.bb:hover {
    background: #f0f0f0;
}

.dark{
    display: none;
}

/* Add padding to the body to prevent content from being hidden behind the fixed banner */
body {
    margin: 0;              /* remove default spacing */
    background: #f6f9fc;
    padding-top: 75px;      /* same as banner height */
    font-family: 'inter';
}

/* p {
    padding-left: 105px; 
    padding-right: 105px; 
}*/

.custom-link1 {
    color: #000000;       /* Makes it the same color as surrounding text */
    text-decoration: none; /* Removes underline */
    padding: 0 15px; /* Adds space between links */
    /* Optional hover effect */
    /* transition: color 0.2s; */
}

.custom-link2 {       /* Makes it the same color as surrounding text */
    text-decoration: none; /* Removes underline */
    /* Optional hover effect */
    color: #f2f4f5;
    transition: color 0.2s;
}

.custom-link2:hover {
    color: #9b9b9b;       /* Changes color on hover*/
}

.custom-link3 {       /* Makes it the same color as surrounding text */
    text-decoration: none; /* Removes underline */
    /* Optional hover effect */
    color: #212124;
    transition: color 0.2s;
}

.custom-link3:hover {
  color: #5f5f65;       /* Changes color on hover*/
}

.back1 {
    height: 120vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    /* stacked radial gradients near center */
    background: 
        radial-gradient(circle at 44% 29%, #b0eeff -2%, transparent 20%),
        radial-gradient(circle at 62% 32%, #ffa8dc -2%, transparent 20%),
        radial-gradient(circle at 45% 65%, #fdd8b9 -2%, transparent 20%),
        radial-gradient(circle at 58% 73%, #ccadff -2%, transparent 20%),
        radial-gradient(circle at 50% 50%, #b0fab9 -2%, transparent 20%),
        radial-gradient(circle at 60% 10%, #ace7f8 -2%, transparent 20%),
        radial-gradient(circle at 14% 20%, #faa7d9 -2%, transparent 20%),
        radial-gradient(circle at 84% 20%, #fad9a7 -2%, transparent 20%),
        radial-gradient(circle at 50% 10%, #f7cda7 -2%, transparent 20%),
        radial-gradient(circle at 85% 70%, #b5ecfb -2%, transparent 20%),
        radial-gradient(circle at 20% 70%, #b4fadb -2%, transparent 20%);
    
    min-height: 100%; 
    background-color: #f6f9fc; /* edges stay white */
    color: black;
}

.titlelayout {
    position: absolute;
    left: 10%;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
}

.title-text {
    display: flex;
    flex-direction: column;
    align-items: flex-end;  /* Right-align text */
    margin-right: 20px;
    font-weight: bold;
}

.line {
    font-size: 50px;
    margin: 6px 0;
}

/* Vertical pipe */
.pipe {
    width: 3px;
    height: 200px; /* Extend as needed */
    background-color: black;
}

.black-cube {
    width: 300px;   /* adjust size */
    height: auto;   /* keep proportions */
    margin-left: 20px; /* space between pipe and cube */
}

.white-cube {
    display: none;
}

.fly-in-left {
    opacity: 0;
    transform: translateX(100px);
    transition: opacity .8s ease-out, transform .8s ease-out;
    will-change: opacity, transform;
}

.fly-in-left.visible {
    opacity: 1;
    transform: translateX(0);
}

.fly-in-right {
    opacity: 0;
    transform: translateX(-100px);
    transition: opacity .8s ease-out, transform .8s ease-out;
    will-change: opacity, transform;
    margin-left: auto; /* push to right */
}

.fly-in-right.visible {
    opacity: 1;
    transform: translateX(0);

}

.banner-section {
    position: relative;
    background: #0a2540;        /* background color */
    clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 100%);
    padding-top: 5px;      /* padding inside section */
    padding-bottom: 5px;
    color: #f2f4f5;
    overflow-x: hidden;
}

.project-section{
    position: relative;
    background: #f6f9fc;        /* background color */
    clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 100%);
    padding-top: 50px;      /* padding inside section */
    padding-bottom: 50px;
    color: #212124;
    overflow-x: hidden;
}

.project-text {
    max-width: 800px;  /* keeps text readable */
    font-size: 18px;
    line-height: 1.6;
}

.qualification-text {
    max-width: 90vw;  /* keeps text readable */
    font-size: 18px;
    padding: 50px 50px;
    line-height: 1.6;
}

.slanted-section {
    position: relative;
    background: #0a2540;        /* background color */
    clip-path: polygon(0 12%, 100% 0%, 100% 100%, 0 100%);
    padding-top: 250px;      /* padding inside section */
    padding-bottom: 300px;
    color: #f2f4f5;
    /* margin-top: -100px; */
    overflow-x: hidden;
}

.slanted-section.alt {
    background: #f6f9fc;        /* alternate color */
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    color: #212124;
    padding-top: 250px;      /* padding inside section */
    padding-bottom: 300px;
}

.imgtxt-section-left {
    display: flex;
    align-items: center;   /* vertically align text with image */
    justify-content: flex-start;
    padding-left: 105px;   /*pace around section*/
    padding-right: 105px;
    gap: 40px;             /* space between image and text */
}

.imgtxt-section-right {
    display: flex;
    align-items: center;   /* vertically align text with image */
    justify-content: flex-end;
    padding-left: 105px;   /*pace around section*/
    padding-right: 105px;
    gap: 40px;             /* space between image and text */
}

.section-image img {
    width: 250px;  /* adjust size */
    height: auto;
    border-radius: 10px; /* optional: rounded corners */
}

.section-text {
    max-width: 600px;  /* keeps text readable */
    font-size: 18px;
    line-height: 1.6;
}

.service-banner {
    display: block;                     /* Make it clickable like a block */
    position: relative;
    width: calc(100% + 15px);           /* Leave 40px gap on right */
    margin-top: 20px;           /* Top/Bottom + gap on right */
    margin-left:-50px;
    background: url('images/lightandsalt.png') center/cover no-repeat;
    background-color: rgba(0,0,0,0.4);  /* fallback tint */
    background-blend-mode: overlay;     /* make image translucent */
    color: white;
    text-decoration: none;              /* remove underline */
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.3s ease, margin 0.3s ease;
}

.service-banner:hover {
    transform: translateX(40px);        /* Shift to the right on hover */
    margin-right: 0;                    /* so it touches right edge */
}

.service-banner-content {
    display: flex;
    justify-content: space-between;     /* space between text and arrow */
    align-items: center;
    padding-top: 100px;
    padding-bottom: 100px;
    padding-left: 100px;
}

.service-banner h2 {
    margin: 0;
    font-size: 2rem;
}

.service-banner p {
    padding-left: 10px;
    padding-right: 100px;
    font-size: 1rem;
}

.arrow {
    font-size: 4rem;
    /* font-weight: bold; */
}