/* RESET
Removes default browser margin and padding and
makes width calculations easier */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}


/* --- BODY AND GLOW CURSOR ---
Main page styling and glowing cursor effect */
body{
    background: linear-gradient(135deg, #EBB4BF 40%, #4C1513 90%); /* gradient background */
    font-family:'Poppins', sans-serif; /* main font for page */
    padding:40px; 
    /* variables used to track cursor position */
}

/* --- TITLE SECTION ---
Container holding the cat image and title pill */
.title-container{
    display:flex; /* horizontal alignment */
    align-items:center; /* vertical center alignment */
    margin-bottom:40px; /* space below title */
    position:relative; /* allows positioning cat image */
}


/* CAT IMAGE BESIDE THE TITLE */
.cat{
    width:90px; /* size of cat image */
    position:absolute; /* positioned to title container */
    left:-20px; 
    top:-20px; 
}


/* TITLE PILL
Rounded title design */
.title-pill{
    background:#6b1414; /* dark red background */
    color:#fff; /* white text */
    padding:15px 40px; /* spacing inside */
    border-radius:50px; /* shape */
    font-size:28px; /* text size */
    margin-left:60px; 
    box-shadow:0 5px 15px rgba(0,0,0,0.2); 
}


/* --- GRID LAYOUT ---
Creates 3-column layout for cards */
.love-grid{
    display:grid; 
    grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
    gap:40px; /* spacing between cards */
}


/* --- CARD CONTAINER ---
Individual card styling */
.love-card{
    background:#6b1414; 
    padding:30px; 
    display:flex;
    flex-direction:column; 
    align-items:center; 
    border-radius:15px;
    position:relative;
    overflow:hidden; /* hides overflow elements */
}


/* --- CARD IMAGE ---
Image inside each card */
.love-card img{
    width:180px; 
    height:140px; 
    margin-bottom:20px; 
    border-radius:10px; 
}


/* --- TEXT BOX ---
Description text inside card */
.love-text{
    background:#e7b8bf; 
    color:#fff; 
    padding:20px; 
    border-radius:40px; 
    font-size:13px;
    text-align:center;
    line-height:1.5; 
}


/* --- HOVER EFFECT ---
Card lifts up when hovered */
.love-card:hover{
    transform: translateY(-12px) scale(1.05); /* move up and enlarge */
    box-shadow:0 25px 60px rgba(0,0,0,0.4); /* stronger shadow */
}


/* --- IMAGE HOVER EFFECT ---
Image slightly zooms in */
.love-card:hover img{
    transform: scale(1.08);
}


/* --- TEXT GLOW EFFECT ---
Adds glow around text box */
.love-card:hover .love-text{
    box-shadow:0 0 20px rgba(255, 182, 193, 0.7);
}


/* FLOAT ANIMATION
Cards move slightly up and down continuously */
.love-card{
    animation: float 6s ease-in-out infinite;
}


/* KEYFRAMES FOR FLOAT ANIMATION */
@keyframes float{
    0%,100%{ transform:translateY(0); } /* normal position */
    50%{ transform:translateY(-5px); } /* slight lift */
}


/* --- RESPONSIVE DESIGN ---
Adjusts layout for smaller screens */
@media(max-width:900px){

    /* changes grid to single column on mobile */
    .love-grid{
        grid-template-columns:1fr;
    }

}

/* --- FOOTER CONTAINER --- */
.footer {
  display: flex;
  align-items: center;   
  justify-content: center; 
  height: 80px;   
  color: #4C1513;        
  font-family: 'Rubik', sans-serif;
  font-weight: 500;
  letter-spacing: 2px;
  border-top: 2px solid #EBB4BF; 
  
}

/* --- THE TEXT & ICON WRAPPER --- */
.footer p {
  margin: 0;
  font-size: 14px;
  display: flex;        
  align-items: center;    
  gap: 8px;           
}

.footer-icon {
  font-size: 1.2em;    

}