/* RESET */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

@font-face {
  font-family: 'Road Rage';
  src:
       url('fonts/Road_Rage.otf') format('woff'),
  font-display: swap;
}

/* FADE IN */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: all .6s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* BODY */
body {
    background: url(img/bg1.jpg) center/cover no-repeat fixed;
    display: flex;
    justify-content: center;
    padding-top: 20px;
    font-family: "Questrial", sans-serif;
}

/* MAIN CONTAINER */
.main-div {
    width: 100%;
    max-width: 460px;  
    margin: 0 auto;
    text-align: center;
}

/* TOP IMAGE */
.main-div img {
    width: 100%;
    max-width: 280px;
    margin: 20px auto;
    display: block;
}

/* PRODUCT GRID */
.products {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    padding: 0 20px;       /* <-- THIS FIXES iPHONE EDGE PROBLEM */
    margin-bottom: 20px;
}

/* PRODUCT BOX */
.product-box {
    display: block;
    text-decoration: none;
}

.product-img {
    width: 100%;
    aspect-ratio: 1 / 1.1;   /* perfect mobile shape */
    background-size: cover;
    background-position: center;
    border-radius: 12px;
    border: 4px solid white;
    box-shadow: 0 0 18px white;
    transition: transform .35s ease;
}

.product-img:hover {
    transform: scale(1.05);
}

/* SOCIAL ICONS */
.socials {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin: 20px 0 25px;
}

.socials a {
    color: white;
    transition: .3s ease;
    text-decoration: none;
}

.socials a:hover {
    transform: scale(1.12);
    color: #FF92EB;
}

/* BUTTONS */
.button {
    width: 100%;
    max-width: 300px;
    height: 42px;
    margin: 6px auto;
    border-radius: 30px;
    border: none;
    color: white;
    font-size: 14px;
    cursor: pointer;
    font-family: "Questrial";

    background: linear-gradient(120deg, #E172D2, #C693B8, pink);
    background-size: 300% 300%;
    animation: moveGradient 4s ease infinite;

    transition: transform .2s ease;
}

.button:hover {
    transform: scale(1.05);
    box-shadow: 0 0 20px white;
}

/* BUTTON GRADIENT ANIMATION */
@keyframes moveGradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* FOOTER TEXT */
p {
    color: #FF92EB;
    margin: 20px 0;
    font-family: 'Road Rage';
}

/* MOBILE FIXES */
@media (max-width: 600px) {
    .products {
        padding: 0 20px;  /* ensures spacing on iPhone */
        gap: 14px;
    }

    .main-div img {
        max-width: 260px;
    }
}