/* =====================================================
   INK & SNOW
   PACKAGES - TIMELINE - TESTIMONIALS - FAQ - FORM
===================================================== */



/* =========================
   PACKAGES SECTION
========================= */


.packages{

background:#f8fafc;

}



.packages-grid{


max-width:1200px;

margin:auto;


display:grid;

grid-template-columns:

repeat(3,1fr);


gap:30px;


}




.package-card{


background:white;


padding:45px 35px;


border-radius:

var(--radius);


box-shadow:

var(--shadow);


position:relative;


overflow:hidden;


transition:

var(--transition);


}





.package-card::before{


content:"";


position:absolute;


width:180px;

height:180px;


right:-80px;

top:-80px;


background:

rgba(198,155,60,.12);


border-radius:50%;


}




.package-card:hover{


transform:

translateY(-15px);


}




.package-card.featured{


background:

linear-gradient(
145deg,
#1C2533,
#111821
);


color:white;


transform:

scale(1.05);


}





.package-card.featured:hover{


transform:

scale(1.08)
translateY(-10px);


}





.badge{


position:absolute;


top:20px;


right:20px;


background:

var(--gold);


color:white;


padding:8px 18px;


border-radius:50px;


font-size:.75rem;


font-weight:700;


letter-spacing:1px;


}





.package-card h3{


font-size:1.7rem;


margin-bottom:25px;


}





.package-price{


font-size:3rem;


font-weight:800;


color:

var(--gold);


margin-bottom:30px;


}





.package-card ul{


margin-bottom:30px;


}





.package-card li{


margin:15px 0;


}





.package-card a{


display:inline-block;


padding:14px 25px;


background:

var(--gold-gradient);


color:white;


border-radius:50px;


font-weight:600;


}







/* =========================
   PROCESS TIMELINE
========================= */



.process{


background:white;

}




.timeline{


max-width:1100px;


margin:auto;


display:flex;


justify-content:space-between;


position:relative;


}





.timeline::before{


content:"";


position:absolute;


top:35px;


left:0;


width:100%;


height:3px;


background:

var(--gold);


}





.step{


width:18%;


text-align:center;


position:relative;


z-index:2;


}





.step span{


width:70px;


height:70px;


display:flex;


align-items:center;


justify-content:center;


margin:auto;


border-radius:50%;


background:

var(--navy);


color:white;


font-size:1.3rem;


font-weight:700;


border:

5px solid white;


box-shadow:

0 0 0 3px var(--gold);


}





.step h3{


margin:25px 0 10px;


color:

var(--navy);


}





/* =========================
   TESTIMONIALS
========================= */



.testimonials{


background:

var(--navy);


}



.testimonials .section-title h2{


color:white;


}





.testimonial-grid{


max-width:1100px;


margin:auto;


display:grid;


grid-template-columns:

repeat(3,1fr);


gap:30px;


}





.testimonial-card{


background:

rgba(255,255,255,.08);


border:

1px solid rgba(255,255,255,.15);


backdrop-filter:

blur(20px);


padding:35px;


border-radius:

var(--radius);


color:white;


text-align:center;


}





.student-photo{


font-size:3rem;


margin-bottom:20px;


}





.testimonial-card h3{


color:

var(--gold);


margin-bottom:15px;


}





.testimonial-card p{


color:#e5e7eb;


}





.stars{


color:

var(--gold);


margin-top:20px;


}





/* =========================
   CONTENT SECTION
========================= */



.content-grid{


max-width:1100px;


margin:auto;


display:grid;


grid-template-columns:

repeat(4,1fr);


gap:25px;


}




.content-card{


padding:35px;


background:white;


box-shadow:

var(--shadow);


border-radius:

var(--radius);


text-align:center;


transition:

var(--transition);


}





.content-card:hover{


transform:

translateY(-10px);


}





.content-icon{


font-size:2.5rem;


margin-bottom:20px;


}






/* =========================
   FAQ
========================= */



.faq{


background:

#f8fafc;


}





.faq-container{


max-width:900px;


margin:auto;


}





.faq-item{


background:white;


padding:25px 30px;


margin-bottom:20px;


border-radius:20px;


box-shadow:

var(--shadow);


}





.faq-item h3{


display:flex;


justify-content:space-between;


color:

var(--navy);


cursor:pointer;


}





.faq-item span{


color:

var(--gold);


}




.faq-item p{


margin-top:15px;


}







/* =========================
   APPOINTMENT FORM
========================= */



.appointment{


background:

var(--navy);


}



.appointment .section-title h2{


color:white;


}



.appointment-form{


max-width:700px;


margin:auto;


}





.input-group{


margin-bottom:20px;


}



.input-group input,
.input-group textarea,
.input-group select{


width:100%;


padding:18px 20px;


border-radius:15px;


border:none;


outline:none;


font-size:1rem;


}





.input-group textarea{


height:150px;


resize:none;


}





.appointment-form button{


width:100%;


font-size:1rem;


}







/* =========================
   RESPONSIVE
========================= */



@media(max-width:1000px){


.packages-grid,
.testimonial-grid{


grid-template-columns:

1fr;


}



.package-card.featured{


transform:none;


}



.timeline{


flex-direction:column;


gap:50px;


}



.timeline::before{


width:3px;


height:100%;


left:50%;


top:0;


}



.step{


width:100%;


}



.content-grid{


grid-template-columns:

repeat(2,1fr);


}


}




@media(max-width:600px){


.content-grid{


grid-template-columns:

1fr;


}


}
.appointment-cta{

max-width:700px;

margin:auto;

text-align:center;

background:white;

padding:60px;

border-radius:30px;

box-shadow:var(--shadow);

}

.appointment-cta h3{

font-size:2rem;

color:var(--navy);

margin-bottom:20px;

}

.appointment-cta p{

margin-bottom:35px;

font-size:1.1rem;

}

.appointment-cta .primary-btn{

font-size:1rem;

padding:18px 40px;

}