.heroMockup {
    width: 100%;
    overflow: hidden;     
    position: relative;
    border-radius: 30px;
}

.heroMockup img {
  width: 100%;          /* make it stretch */
  transform: translateY(0);
  transition: transform 0.1s linear;
  border-radius: 30px;
}
.otherPhoto {
    width: 60%;
    height: auto;
    overflow: hidden;     
    position: relative;
    border-radius: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-inline: auto;
}

.otherPhoto img {
  width: 100%;
  transition: transform 0.3s linear;
}
.otherPhoto:hover img {
    transform: scale(1.05);
}
.otherPhotoD3{
    width: 100%;
}
.titleSection h2{
    margin-bottom: 0;
}
.titleSection h1{
    margin-bottom: 0;
    font-size: var(--fs2);
}
.titleSection{
    color: var(--white);
    margin-bottom: 40px;
}

footer{
    background-color: var(--Black);
    color: var(--white);
    display: flex;
    justify-content: center;
}
footer p{
    margin-block: 12px !important;
}
.titleSection a{
    color: var(--PrimaryAccent);
    transition: 0.3s;
}
.titleSection a:hover{
    color: var(--SecondaryAccent);
    font-size: var(--fs5);
}