body {
    margin: 0;
    background-color: white;
  }
.top-bar {
            background-color: white;
            height: 80px;
            width: 100%;
            position: fixed; /* set position to fixed */ 
            top: 0; /*Pin it to the top of the screen */
            overflow: hidden;
            white-space: nowrap; /* Prevent the text from wrapping to the next line */
            color: black;
            font-family: "IBM Plex Mono","Poppins", sans-serif;
            font-size: 45px;
            margin-top: 0; 
            z-index: 1;
        }

        .top-bar-text-wrapper {
            position: absolute;
            animation: marquee 30s linear infinite;
            display: flex;
            justify-content: space-between;
            width: 200%; /* Double the width to create a continuous motion effect */
            left: 0;
            margin-top: 15px; 
            padding-right: 100%; /* Add padding to the right side */
        }


        @keyframes marquee {
    0% { transform: translate3d(0, 0, 0); } 
    100% { transform: translate3d(-50%, 0, 0); }

        }

  .container {
    flex: 0 1 33%;  /* Initially set to take up 33% of the container's width */
    display: flex;
    flex-wrap: wrap;  /* Allow the columns to wrap onto the next line */
    justify-content: space-between;
    margin: 10px;
    margin-top: 80px; 
    margin-bottom: 0px;
  }

  .column {
    width: 33%;
    margin-bottom: 0px; 
  }

/* 2-column layout for screens smaller than 1300px */
@media (max-width: 1300px) {
    .column {
        flex: 0 1 49.5%;  /* Adjusted for 2-column layout */
    }
    body .box {
        height: 650px; 
    }
    body .top-text {
        font-size: 2em;
    }
    body .bottom-text {
        font-size: 1.4em;
    }
    body .intro-text {
        font-size: 1.3em;
        padding-right: 20%;
    }
    body .footer-names {
       margin-left: 5%; 
       margin-top: 360px; 
}
    body .IG-link{
      margin-left: 65%; 
}
}


/* 1-column layout for screens smaller than 750px */
@media (max-width: 750px) {
    .column {
        flex: 0 1 100%;  /* Adjusted for 1-column layout */
    }
    body .box {
        height: relative;  
    }
    body .top-text {
        font-size: 2em;
    }
    body .bottom-text {
        font-size: 1.4em;
    }
    body .intro-text {
        font-size: 1em;
        padding-right: 5%;
    }
   body .IG-link{
     color: transparent; 
}
   body .IG-link a {
   border-bottom: 2px solid transparent; 
    }
}

  .box {
    background-color: #f0f0f0;
    border-radius: 20px;
    height: 700px;
    transition: border-radius 0.3s ease; /* Transition for the border-radius */
    position: relative; /* Relative positioning for text positioning */
    padding-top: 75px; /* 45px font size + 30px margin */
    padding-bottom: 75px; /* 35px font size + 40px margin */
    box-sizing: border-box; /* Ensures padding is included in the height */
    transition: opacity 0.3s ease; 
    margin-bottom: 10px; 

  }
.box:hover {
    border-radius: 270px; /* Rounded corners on hover */
  }
.box-text {
    position: absolute;
    font-family: 'Poppins', sans-serif;
    color: black;
    width: 100%;
    text-align: center;
    transition: opacity 0.3s ease, color 0.3s ease;
  }
  .top-text {
    top: 35px;
    font-size: 2.4em;
  }
  .bottom-text {
    bottom: 50px;
    font-size: 1.6em;
  }
/* Different colors for each box */
  #box1 { background-color: #F7472F; }
  #box2 { background-color: #936057;}
  #box3 { background-color: #C3FF55;}
  #box4 { background-color: #C0BEA7;}
  #box5 { background-color: #C3FF55; }
  #box6 { background-color: #F7CDF4;}
  #box7 { background-color: #330BF9;}
  #box8 { background-color: #21AA72;}
  #box9 { background-color: #C0BEA7; }
  #box10 { background-color: #21AA72; }
  #box11 { background-color:  #F7472F; }
  #box12 { background-color: #F7CDF4; }

.box:hover {
    background-color: transparent; /* Transparent background on hover */
    border-radius: 270px; /* Adjusted border-radius on hover */
    background-color: transparent; /* Adjusted transition on hover */

  }
  .box:hover .box-text {
    opacity: 0;
    color: transparent;
}
  .box-preview iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: inherit; /* Inherit border-radius from parent element */
  }
  .box:hover .box-preview iframe {
    opacity: 1; /* Show iframe on hover */
    border-radius:270px;
  }

.intro-text {
    font-family: 'Poppins', sans-serif;
    font-size: 1.3em;
    color: black;
    padding-left: 3%;
    padding-right: 50%;
    padding-top: 100px; 
    padding-bottom: 0;
    opacity: 1;
    transition: opacity 0.2s ease 0.2s;  /* 0.2s delay */ 
}
.footer {
    position: fixed;
    bottom: -1000px; /* Initial position off-screen */
    left: 0;
    width: 100%;
    height: 1000px;
    background-color: #C3FF55;
    transition: bottom 0.3s ease-in-out; /* Transition for smooth appearance */
}
.footer-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;  /* Adjusted from flex-end to flex-start */
    height: 100%;
    padding: 0 10px; /* Adjusted to have no padding at the top and bottom */
}

.footer-logo {
    width: 300px; /* Sets the width of the logo */
    margin-left: 5%; /* Left margin */
    margin-bottom: 50px; /* Bottom margin */
    align-self: flex-start; /* Align to the left */
    position: absolute; /* Absolute positioning */
    bottom: 50px; /* Set bottom position */
}
    .footer-text {
font-family: "Poppins", sans-serif;
font-size: 1.2em; 
color: black; 
margin-left: 5%; 
position: fixed;
}
 .footer-names {
font-family: "Poppins", sans-serif;
font-size: 1.2em; 
color: black; 
margin-left: 30%;
position: fixed; 
}
    .IG-link {
font-family: "Poppins", sans-serif;
font-size: 1.2em; 
color: black; 
margin-left: 80%;
position: fixed; 
}

.footer-text,
.footer-names,
.IG-link {
    margin-top: 280px; /* New rule to add top margin */
}
.IG-link a {
    text-decoration: none; /* Removes the default underline */
    border-bottom: 2px solid black; /* Adds a 2px black underline */
    color: inherit; /* Ensures the link inherits the text color from the parent element */
}

#box10 {
align-content: center; 
}