/* General Styling */

a {
    text-decoration: none;
}

h1{
    font-size: 65px;
    font-weight:bold;
    margin-bottom: 0px;
    margin-top: 0px;
    color: rgb(255 255 255 / 0.8);
    line-height: 75px;
}
h2{
    font-size: 30px;
    font-weight: 600;
}

li {
  list-style: none;
}
.section-title{
  font-size: 46px;
  font-weight: 600;
  text-align: center;
}
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
  word-break: normal;
}

.content {
  margin: 0px 10vw;
}

.section-heading {
  top: 0px;
  position: relative;
}

/* Top Section Styling */

.top-section {
    position: relative;
    background: 
        radial-gradient(circle at 10% 10%, rgba(191, 71, 255, 0.5), transparent 50%),
        radial-gradient(circle at 90% 10%, rgba(60, 179, 113, 0.5), transparent 50%),
        radial-gradient(circle at 30% 95%, rgba(65, 105, 225, 0.5), transparent 50%),
        radial-gradient(circle at 90% 90%, rgba(202, 79, 202, 0.5), transparent 50%);
    background-blend-mode: screen;
    mask-image: linear-gradient(to bottom, black 70%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent); /* For Safari */

    padding-bottom: 250px;
    margin-bottom: -50px;
    margin-top: 0px;
  }
  
  .top-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
  }
  

  .top-container {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    white-space: nowrap;
  }
  
  .title-container {
    background-color: transparent;
    padding: 40px 20px;
    margin-top:100px;
    text-align: center;
  }

  #animation-container{
    display: inline-block;
    position: relative; /* Define positioning context */
  }

  .main-heading{
    margin: 0;
    position: relative;
    display: inline-block;
    font-weight: 900;
    overflow: hidden;
    white-space: nowrap;
    transition: color 0.3s ease;}

  #problems-heading{
    animation: disappear 12s forwards infinite; /* Apply the disappear animation */
  }

  #problems-heading::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 45%;
    height: 10px;
    background-color: white;
    transform: scaleX(0); /* Start with no width */
    transform-origin: right; /* Set the origin to the right */
    animation: strikethrough 12s forwards infinite;
}

#apps-heading{
  opacity: 0; /* Start as invisible */
  position: absolute; /* Position it over the old word */
  top: 0; /* Align with the old word */
  left: 0; /* Align with the old word */
  right: 0;
  animation: appear 12s forwards infinite; /* Apply the appear animation */
}

@keyframes strikethrough {
  8%{
      transform: scaleX(0);
      opacity: 1;
  }
  15% {
      transform: scaleX(1);
      opacity: 1;
  }
  25% {
    opacity: 1;
  }
  35%{
    transform: scaleX(1);
    opacity: 0;
  }
}

/* Animation to make the text disappear */
@keyframes disappear {
  8% {
      opacity: 1; /* Fully visible */
  }
  25% {
      opacity: 1; /* Fully visible */
  }
  35% {
      opacity: 0; /* Stay visible until almost done */
  }
  90%{
    opacity: 0;
  }
  100%{
    opacity: 0;
  }
}

/* Animation to make the new text appear */
@keyframes appear {
  35%{
      opacity: 0; /* Start invisible */
  }
  55% {
      opacity: 1;
  }
  75% {
      opacity: 1;
  }
} 

/* shapes */
.shape {
  position: absolute;
  width: 100px;
  height: 100px;
  transform-origin: center center;
  z-index: 1;
}

.shape circle,
.shape polygon,
.shape rect,
.shape path {
  fill: transparent;
  stroke-width: 10px;
  -webkit-backdrop-filter: blur(10px) brightness(1.15);
  backdrop-filter: blur(10px) brightness(1.15);
  stroke: rgb(255 255 255 / .3);
  box-shadow: 0 4px 8px rgb(0 0 0 / .01);
}

.shape circle{
  stroke-width: 25px;
}

.shapeFilled circle,
.shapeFilled polygon,
.shapeFilled rect,
.shapeFilled path {
  fill: transparent;
  stroke-width: 0px;
  -webkit-backdrop-filter: blur(10px) brightness(1.15);
  backdrop-filter: blur(10px) brightness(1.15);
  fill: rgb(255 255 255 / .3);
  box-shadow: 0 4px 8px rgb(0 0 0 / .01);
}

.shape-container{
  overflow: hidden;
}

#circle1 {
  top: 50px;
  left: 20vw;
  animation: float1 30s infinite alternate ease-in-out,
             spin 120s linear infinite;
}

#diamond1 {
  top: 300px;
  left: 30vw;
  animation: float2 30s infinite alternate ease-in-out,
             spin 140s linear infinite;
}

#zigzag1 {
  top: 250px;
  left: calc(80vw - 100px);
  animation: float3 30s infinite alternate ease-in-out,
             spinReverse 160s linear infinite;
}

#zigzag2 {
  top: 150px;
  left: 5vw;
  animation: float4 30s infinite alternate ease-in-out,
             spinReverse 180s linear infinite;
}

#x1 {
  top: 380px;
  left: calc(25vw - 150px);
  animation: float5 30s infinite alternate ease-in-out,
             spin 200s linear infinite;
}

#semi1 {
  top: 90px;
  left: 65vw;
  animation: float6 30s infinite alternate ease-in-out,
             spin 160s linear infinite;
}

#rhombus1 {
  top: 350px;
  left: calc(50vw + 100px);
  animation: float7 30s infinite alternate ease-in-out,
             spin 140s linear infinite;
}

/* Slow Spin Animation */
@keyframes spin {
  0%   { transform: rotate(0deg); }
  50%  { transform: rotate(90deg); }
  100% { transform: rotate(0deg); }
}
@keyframes spinReverse {
  0%   { transform: rotate(0deg); }
  50%  { transform: rotate(-90deg); }
  100% { transform: rotate(0deg); }
}
/* Keyframe Set 1 */
@keyframes float1 {
  0% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(20px, -10px) scale(1.1); }
  50% { transform: translate(-30px, 15px) scale(0.9); }
  75% { transform: translate(10px, -20px) scale(1.05); }
  100% { transform: translate(0, 0) scale(1); }
}

/* Keyframe Set 2 */
@keyframes float2 {
  0% { transform: translate(0, 0) scale(1); }
  20% { transform: translate(-15px, 25px) scale(1.1); }
  40% { transform: translate(25px, -15px) scale(0.95); }
  60% { transform: translate(-20px, 20px) scale(1.05); }
  80% { transform: translate(15px, -25px) scale(0.9); }
  100% { transform: translate(0, 0) scale(1); }
}

/* Keyframe Set 3 */
@keyframes float3 {
  0% { transform: translate(0, 0) scale(1); }
  30% { transform: translate(10px, 30px) scale(0.95); }
  50% { transform: translate(-25px, -10px) scale(1.1); }
  70% { transform: translate(20px, -20px) scale(0.9); }
  90% { transform: translate(-15px, 15px) scale(1.05); }
  100% { transform: translate(0, 0) scale(1); }
}

/* Keyframe Set 4 */
@keyframes float4 {
  0% { transform: translate(0, 0) scale(1); }
  15% { transform: translate(-20px, 10px) scale(1.05); }
  35% { transform: translate(15px, -25px) scale(0.9); }
  55% { transform: translate(-10px, 30px) scale(1.1); }
  75% { transform: translate(20px, -15px) scale(0.95); }
  100% { transform: translate(0, 0) scale(1); }
}

/* Keyframe Set 5 */
@keyframes float5 {
  0% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(30px, 15px) scale(0.95); }
  50% { transform: translate(-20px, -20px) scale(1.1); }
  75% { transform: translate(10px, 25px) scale(0.9); }
  100% { transform: translate(0, 0) scale(1); }
}

/* Keyframe Set 6 */
@keyframes float6 {
  0% { transform: translate(0, 0) scale(1); }
  20% { transform: translate(-25px, -15px) scale(1.05); }
  40% { transform: translate(15px, 20px) scale(0.9); }
  60% { transform: translate(-10px, 30px) scale(1.1); }
  80% { transform: translate(20px, -10px) scale(0.95); }
  100% { transform: translate(0, 0) scale(1); }
}

/* Keyframe Set 7 */
@keyframes float7 {
  0% { transform: translate(0, 0) scale(1); }
  10% { transform: translate(15px, -20px) scale(1.05); }
  40% { transform: translate(-30px, 10px) scale(0.9); }
  60% { transform: translate(20px, -30px) scale(1.1); }
  80% { transform: translate(-15px, 25px) scale(0.95); }
  100% { transform: translate(0, 0) scale(1); }
}

@media screen and (max-width: 1000px) {
  h1 {
     font-size: 55px;
  }
  .title-container {
    padding: 40px 10px;
  }
  #circle1 {
    display: none;
  }
  #diamond1{
    display: none;
  }
  #zigzag1{
    display: none;
  }
  .our-app-container {
    display: block;
  }
  #screenshotCol2{
    display: none;
  }
  #semi1{
    top:70px;
  }
  .top-section {
    background: 
        radial-gradient(circle at 10% 10%, rgba(191, 71, 255, 0.5), transparent 50%),
        radial-gradient(circle at 90% 10%, rgba(60, 179, 113, 0.5), transparent 50%),
        radial-gradient(circle at 30% 95%, rgba(65, 105, 225, 0.5), transparent 50%),
        radial-gradient(circle at 90% 90%, rgba(202, 79, 202, 0.5), transparent 50%);
  }
        

  .top-section {
    background: 
        radial-gradient(circle at 10% 10%, rgba(191, 71, 255, 0.5), transparent 50%),
        radial-gradient(circle at 30% 95%, rgba(65, 105, 225, 0.5), transparent 50%),
        radial-gradient(circle at 90% 10%, rgba(60, 179, 113, 0.3), transparent 50%),
        radial-gradient(circle at 60% 70%, rgba(238, 130, 238, 0.5), transparent 50%);
  }
}

/* Apps Made to stand out */

#crowd-section {
  padding: 50px 10vw;
  display: flex;          /* Use flexbox for layout */
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;        /* Allow wrapping on small screens */
  height: auto;           /* Let height adjust automatically */
}

#crowd-title-container {
  width: 45%;
  padding: 0 2.5%;
  text-align: right;
}

#crowd-title {
  font-size: 50px;
}

#crowdImageContainer {
  width: 45%;
  padding: 0 2.5%;
  height: auto; 
  overflow: hidden;
  position: relative;
  border-radius: 20px;
  mask-image: radial-gradient(ellipse, rgba(0,0,0,1) 80%, rgba(0,0,0,0) 100%);
  -webkit-mask-image: radial-gradient(ellipse, rgba(0,0,0,1) 80%, rgba(0,0,0,0) 100%);
}

/* Responsive for screens less than 1000px */
@media screen and (max-width: 1000px) {
  #crowd-section {
    flex-direction: column; /* Stack vertically */
    align-items: center;
    text-align: center;
  }

  #crowd-title-container,
  #crowdImageContainer {
    width: 90%;          /* Full width on smaller screens */
    padding: 20px 0;
    text-align: center;
  }

  #crowd-title {
    font-size: 40px;     /* Slightly smaller on mobile */
  }

  #crowdImageContainer img {
    width: 100%;         /* Make image responsive */
    height: auto;
  }
}

/* Our Apps Section */
.our-app-container {
  display: flex;
  align-items: flex-start;
  padding: 10px 10vw;
}

#our-apps-title {
  font-size: 30px;
  padding-top: 40px;
  text-align: center;
}

.app-screenshots {
  flex: 2;
  display: flex;
}

.app-details h2 {
  font-size: 40px;
}

#screenshotCol1 {
  flex: 1;
  margin-right: 100px;
}

#screenshotCol2 {
  flex: 1;
  margin-top: 100px;
}

.app-screenshots img {
  width: 300px;
  height: auto;
  display: flex;
  margin-bottom: 80px;
}

#appScreenshot2 {
  margin-top: 20px;
  margin-right: 20px;
}

.app-details {
  flex: 1;
  padding-right: 10vw;
}

/* Download Container Styling inside app-details */
.download-container {
  padding: 30px 20px;
  background: black;
  border-radius: 30px;
  text-align: center;
  margin-top: 30px; /* spacing from app description */
}

.download-container h2 {
  font-size: 30px;
  color: white;
  margin-bottom: 20px;
}

.download-links {
  display: flex;
  justify-content: center;
  gap: 15px;
}

.download-button img {
  height: 50px;
  display: inline-block;
}
.app-divider {
  width: 80%;        
  margin-top: 0px;  
  margin-bottom: 70px;  
  margin-left: auto;
  margin-right: auto;
  height: 5px;     
  background-color: var(--primary-color);; 
  border-radius: 50px;  
}

/* Reverse layout (DoneIt!) */
.our-app-container.reverse-layout {
  flex-direction: row-reverse;
}

.our-app-container.reverse-layout .app-details {
  padding-left: 10vw; /* swap padding to left */
  padding-right: 0;
}

.our-app-container.reverse-layout #screenshotCol1 {
  margin-right: 100px;
}

.our-app-container.reverse-layout #screenshotCol2 {
  margin-top: 100px;
}


@media (max-width: 768px) {
.our-app-container {
flex-direction: column;
padding: 20px 5vw;
align-items: center;
}
.app-details {
padding: 0 !important; /* reset any left/right padding */
margin-bottom: 30px;
text-align: center;
}
.app-screenshots {
display: none; /* hide all screenshots on mobile */
}
.download-container {
padding: 20px 10px;
text-align: center;
}
.download-container h2 {
font-size: 24px;
}
}