/* =========================
   HOMEPAGE HERO
========================= */


.hero{

background:linear-gradient(
135deg,
#ffffff,
#fff7f5
);

padding:70px 35px;

margin:35px 0;

border-radius:24px;

text-align:center;

box-shadow:
0 8px 30px rgba(0,0,0,.06);

}



.hero h1{

font-size:46px;

line-height:1.2;

max-width:900px;

margin:0 auto 20px;

color:#222;

}



.hero p{

font-size:19px;

max-width:850px;

margin:auto;

color:#555;

}



.button{

background:linear-gradient(
135deg,
#ff6b6b,
#ff8e53
);

color:white;

padding:14px 32px;

border-radius:30px;

font-weight:600;

display:inline-block;

margin-top:25px;

box-shadow:

0 8px 20px rgba(255,107,107,.25);

transition:.25s;

}



.button:hover{

transform:translateY(-3px);

}



/* =========================
   FEATURE MESSAGE GRID
========================= */


.message-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(280px,1fr));

gap:25px;

}



/* MESSAGE CARD */


.message-card{

background:white;

padding:25px;

border-radius:20px;

box-shadow:

0 6px 20px rgba(0,0,0,.07);

transition:.25s;

}



.message-card:hover{

transform:translateY(-5px);

box-shadow:

0 12px 30px rgba(0,0,0,.12);

}



.message-card h3{

font-size:21px;

margin-top:0;

color:#222;

}



/* =========================
   MESSAGE ITEMS
========================= */


.message-card .message{

display:flex;

align-items:center;

justify-content:space-between;

gap:12px;

background:#f7f9fc;

padding:14px;

border-radius:12px;

margin:12px 0;

min-height:60px;

}



.message-card .message span{

flex:1;

font-size:16px;

line-height:1.5;

color:#333;

word-break:normal;

overflow-wrap:break-word;

}



/* =========================
   COPY BUTTON
========================= */


.copy-btn{

background:linear-gradient(
135deg,
#ff6b6b,
#ff8e53
);

color:white;

border:none;

padding:8px 16px;

border-radius:22px;

font-size:14px;

font-weight:600;

cursor:pointer;

display:flex;

align-items:center;

gap:6px;

white-space:nowrap;

flex-shrink:0;

box-shadow:

0 4px 12px rgba(255,107,107,.25);

transition:.25s;

}



.copy-btn::before{

content:"📋";

}



.copy-btn:hover{

transform:translateY(-2px);

box-shadow:

0 7px 18px rgba(255,107,107,.35);

}



.copy-btn.copied{

background:linear-gradient(
135deg,
#4caf50,
#66bb6a
);

}



.copy-btn.copied::before{

content:"✓";

}



/* =========================
   CATEGORY CARDS
========================= */


.category-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(240px,1fr));

gap:22px;

}



.card{

background:#fff;

padding:25px;

border-radius:18px;

box-shadow:

0 5px 18px rgba(0,0,0,.06);

transition:.25s;

}



.card:hover{

transform:translateY(-4px);

box-shadow:

0 10px 25px rgba(0,0,0,.1);

}



/* =========================
   CONTENT SECTIONS
========================= */


.content-section{

margin:45px 0;

}



.content-section h2{

font-size:30px;

color:#222;

}



/* =========================
   MOBILE
========================= */


@media(max-width:700px){


.hero{

padding:45px 20px;

}


.hero h1{

font-size:32px;

}


.message-grid{

grid-template-columns:1fr;

}



.message-card .message{

padding:12px;

}



.copy-btn{

padding:7px 12px;

font-size:13px;

}


}

.section-style {

    margin: 40px auto;
    padding: 35px 40px;
    background: linear-gradient(135deg, #ffffff, #f8faff);
    border-radius: 20px;
    border: 1px solid #e8ecf5;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
}

.section-style:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.09);
}

.section-style h2 {
    font-size: 2rem;
    font-weight: 700;
    color: #222;
    text-align: center;
    margin-bottom: 20px;
    position: relative;
}

.section-style h2::after {
    content: "";
    display: block;
    width: 70px;
    height: 4px;
    margin: 12px auto 0;
    background: linear-gradient(90deg, #667eea, #764ba2);
    border-radius: 10px;
}

.section-style p {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #555;
    margin-bottom: 18px;
    text-align: justify;
}



/* Mobile Responsive */
@media (max-width: 768px) {
    .section-style {
        margin: 25px 15px;
        padding: 25px 20px;
        border-radius: 16px;
    }

    .section-style h2 {
        font-size: 1.5rem;
    }

    .section-style p {
        font-size: 0.95rem;
        text-align: left;
    }
}