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


/* BODY STYLE
Sets the main font, background color, and page spacing */
body{
    font-family:'Poppins',sans-serif;
    background:#EBB4BF;
    padding:60px 20px; 
}


/* TITLE
Main heading style for "What I Do" */
.title{
    text-align:center; 
    font-family:'Playfair Display',serif; 
    font-size:70px; 
    color:#4C1513; 
    margin-bottom:70px; 
}


/* FLEX CONTAINER
Holds all the service / do cards */
.do-container{
    display:flex; 
    justify-content:center; 
    flex-wrap:wrap; 
    gap:60px; 
}


/* DO CARD
Container for each individual card */
.do-card{
    width:260px; 
    display:flex;
    flex-direction:column; 
    align-items:center;
    position:relative;
}


/* IMAGE RECTANGLE
Top image section of the card */
.circle{
    width:260px;     
    height:150px;     
    border-radius:0; 
    overflow:hidden; 
    position:relative;
    z-index:2; 
}


/* IMAGE STYLE */
.circle img{
    width:100%;
    height:100%;
  
}


/* CARD BODY
Text content area under the image */
.card{
    background:#4C1513; /* dark red background */
    color:#EBB4BF; /* pink text */
    margin-top:-80px; /* moves card up under the image */
    padding:90px 20px 30px 20px; /* top padding creates space for image */
    border-radius:15px; /* rounded card corners */
    text-align:center;
    box-shadow:0 10px 20px rgba(0,0,0,0.2); /* soft shadow */
}


/* CARD TITLE */
.card h3{
    margin-bottom:10px;
    font-weight:500;
}


/* CARD DESCRIPTION */
.card p{
    font-size:13px;
    line-height:1.6; /* improves readability */
}


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

    .do-container{
        flex-direction:column; /* stack cards vertically */
        align-items:center;
    }

    .title{
        font-size:50px; /* smaller title for mobile */
    }
}


/* TITLE WITH IMAGE
Allows an image beside the title */
.title-wrapper{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px; /* space between title and image */
    margin-bottom:70px;
}


/* TITLE IMAGE STYLE */
.title-img{
    width:120px;
    height:auto;
    transition:0.3s; /* smooth animation */
}


/* TITLE IMAGE HOVER
Image slightly grows and rotates */
.title-img:hover{
    transform:scale(1.2) rotate(10deg);
}


/* REMOVE EXTRA SPACE FROM TITLE */
.title{
    margin-bottom:0;
}


/* IMAGE STYLE (duplicate rule for consistency) */
.title-img{
    width:120px;
    height:auto;
    transition:0.3s;
}


/* HOVER EFFECT (duplicate rule) */
.title-img:hover{
    transform:scale(1.2) rotate(10deg);
}


/* SPACE ABOVE THE CARD SECTION */
.do-container {
    margin-top: 50px; 
}


/* CARD HOVER EFFECT
Card moves slightly upward and shadow increases */
.do-card:hover .card {
    transform: translateY(-10px);
    box-shadow: 0 15px 25px rgba(0,0,0,0.3);
    transition: all 0.3s ease;
}


/* IMAGE HOVER EFFECT
Image slightly zooms when card is hovered */
.do-card:hover .circle img {
    transform: scale(1.05);
    transition: transform 0.3s ease;
}


/* CARD TRANSITION
Smooth animation when hovering */
.card {
    transition: all 0.3s ease;
}


/* IMAGE SPACING IN TITLE */
.title-wrapper img {
    margin-right: 15px;
}


/* WHAT I DO WRAPPER
Alternative layout for images beside the title */
.what-i-do-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px; /* space between images and title */
    margin-bottom: 50px;
}


/* IMAGE STYLE FOR TITLE DECORATION */
.what-i-do-wrapper img {
    width: 100px;
    height: auto;
}


/* TITLE STYLE INSIDE WRAPPER */
.what-i-do-wrapper .what-i-do-title {
    font-size: 50px;
    font-family:'Playfair Display', serif;
    color: #4C1513;
    text-align: center;
}

/* --- FOOTER --- */
.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;    

}