.hero {
    min-height: 700px;
    overflow: hidden;
}

.hero p {
    text-align: start;
}

.hero.content {
    padding: 2.5rem 0;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.big-logo {
    max-width: 700px;
    max-height: 200px;
    animation: fadeIn 0.4s ease-out forwards;
}

.big-logo img {
    width: 100%;
    display: block; /* Removes unwanted bottom whitespace */
}

.hero {
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 1; 
}

.index.hero {
    background-image: url(../images/hero/index.webp);
}

.t100-bifolds.hero {
    background-image: url(../images/hero/t100.webp);
}

.a350-sliders.hero {
    background-image: url(../images/hero/a350.webp);
}

.t350-sliders.hero {
    background-image: url(../images/hero/t350.webp);
}

.a100-bifolds.hero {
    background-image: url(../images/hero/a100.webp);
}

.platform-integrated-bifolds.hero {
    background-image: url(../images/hero/platform-integrated.webp);
}

.design-inspirations.hero {
    background-image: url(../images/hero/design-inspiration.webp);
}

.about-titan.hero {
    background-image: url(../images/hero/about-titan.webp);
}

.titan-sliders.hero {
    background-image: url(../images/hero/titan-sliders.webp);
}

.titan-bifolds.hero {
    background-image: url(../images/hero/titan-bifolds.webp);
}

.doorware.hero {
    background-image: url(../images/hero/doorware.webp);
}

.contact.hero {
    background-image: url(../images/hero/contact-hero.webp);
}

.locking.hero {
    background-image: url(../images/hero/locking.webp);
}

.index.hero::before,
.t100-bifolds.hero::before,
.a100-bifolds.hero::before,
.a350-sliders.hero::before,
.t350-sliders.hero::before,
.platform-integrated-bifolds.hero::before,
.design-inspirations.hero::before,
.about-titan.hero::before,
.titan-sliders.hero::before,
.titan-bifolds.hero::before,
.doorware.hero::before,
.contact.hero::before,
.locking.hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.8) 20%, rgba(0,0,0,0.5) 60%, rgba(0,0,0,0.1) 100%);
    z-index: -1;
}

.hero.content {
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
    gap: 2rem;
    align-items: flex-start;
}

.hero.content.center {
    align-items: center;
    justify-content: center;
}

.hero.content ul {
    gap: 1rem;
    display: flex;
    flex-flow: column;
    text-align: start;
}

.hero.index-pg.content {
    gap: 8rem;
}

.dropdown .entry {
    border-top: 1px solid #fff;
    cursor: pointer;
    padding: 2rem;
    display: flex;
    flex-flow: column;
    gap: 1rem;
}

.entry p {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.entry.open p {
    grid-template-rows: 1fr;
}

.entry p span {
    min-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.entry.open p span {
    opacity: 1;
}

.collapse .dropdown-arrow {
    transition: transform 0.3s ease;
}

.entry.open .dropdown-arrow {
    transform: rotate(180deg);
    padding-top: 0.2rem;
}

.dropdown .entry:last-of-type {
    border-bottom: 1px solid #fff;
}

.dropdown {
    width: 700px;
}

.image-container {
  width: 100%;
  max-width: 1600px;
  height: 300px;
  position:absolute;
  z-index: -1;
}

.img-top-left {
  position: absolute;
  top: -45.5%;
  right: 7%;
  rotate: 25deg;
  width: 35%;
  animation: popIn 0.6s cubic-bezier(0.26, 0.53, 0.74, 1.48) forwards;
  opacity: 0;
}

.img-bottom-right {
  position: absolute;
  top: -45%;
  right: 20%;
  rotate: -25deg;
  width: 20%;
  animation: popIn 0.6s cubic-bezier(0.26, 0.53, 0.74, 1.48) 0.2s forwards;
  opacity: 0;
}

.big-family-img {
  position: absolute;
  top: 50%;
  right: 0%;
  width: 50%;
}

@keyframes popIn {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  70% {
    transform: scale(1.05);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@media screen and (max-width: 1500px) {
    .img-bottom-right {
        top: -148%;
        right: 25%;
    }
    .img-top-left {
        top: -38.5%;
        right: 1%;
    }
    .big-family-img {
        top: 80%;
        right: 10%;
    }
}
@media screen and (max-width: 1250px) {
    .big-family-img {
        top: 100%;
        width: 60%;
    }
}

@media screen and (max-width: 1120px) {
    .big-logo {
        max-width: 400px;
    }
    .hero.index-pg.content {
        gap: 4rem;
    }
    .dropdown {
        width: 50%;
    }
}

@media screen and (max-width: 900px) {
    .image-container {
        display: none;
    }
    .dropdown {
        width: 100%;
    }
    .big-family-img {
        display: none;
    }
    .doorware.hero .image-container {
        display: none;
    }
    .hero.content .row.design-points {
        flex-flow: column;
        display: none;
        gap: 0;
    }
    .hero.content ul {
        padding-inline-start: 0.2rem;
    }
}

@media screen and (max-width: 600px) {
    .hero {
        min-height:400px;
    }
    .row.dropdown {
        display: none;
    }
    .hero.content .row {
        gap: 2.5rem;
    }
}