/* =====================================================
   INK & SNOW
   SERVICES & FEATURE CARDS
===================================================== */



/* =========================
   WHY US FEATURES
========================= */


.why-us{

background:

var(--light);

}





.features{


max-width:

1200px;

margin:auto;


display:grid;

grid-template-columns:

repeat(4,1fr);


gap:25px;


}





.feature-card{


background:white;


padding:40px 30px;


border-radius:

var(--radius);


box-shadow:

var(--shadow);


transition:

var(--transition);


position:relative;


overflow:hidden;


}





.feature-card::before{


content:"";


position:absolute;


width:120px;

height:120px;


right:-40px;

top:-40px;


background:

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


border-radius:50%;


transition:

var(--transition);


}




.feature-card:hover{


transform:

translateY(-15px);


}



.feature-card:hover::before{


transform:

scale(3);


}





.icon{


font-size:2.5rem;


margin-bottom:25px;


}





.feature-card h3{


font-size:1.4rem;


margin-bottom:15px;


color:

var(--navy);


}



.feature-card p{


font-size:.95rem;


}







/* =========================
   SERVICES SECTION
========================= */


.services{


background:white;


}





.services-grid{


max-width:

1200px;


margin:auto;


display:grid;


grid-template-columns:

repeat(4,1fr);


gap:25px;


}







.service-card{


background:


linear-gradient(
145deg,
#ffffff,
#f4f6f8
);


padding:40px 30px;


border-radius:

var(--radius);


box-shadow:

var(--shadow);


position:relative;


overflow:hidden;


transition:

var(--transition);


}





.service-card::after{


content:"";


position:absolute;


bottom:-100px;


right:-100px;


width:200px;


height:200px;


background:

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


border-radius:50%;


transition:

var(--transition);


}





.service-card:hover{


transform:

translateY(-15px);


box-shadow:

0 35px 70px rgba(0,0,0,.15);


}




.service-card:hover::after{


transform:

scale(2);


}





.service-number{


font-size:4rem;


font-weight:800;


color:

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


position:absolute;


top:15px;


right:20px;


}





.service-card h3{


font-size:1.5rem;


margin-bottom:20px;


position:relative;


z-index:2;


}




.price{


font-size:1.8rem;


font-weight:800;


color:

var(--gold);


margin-bottom:20px;


position:relative;


z-index:2;


}





.service-card p{


position:relative;


z-index:2;


}





.service-card a{


display:inline-block;


margin-top:25px;


color:

var(--gold);


font-weight:700;


transition:

var(--transition);


}



.service-card a:hover{


letter-spacing:1px;


}







/* =========================
   DOCUMENTS SECTION
========================= */


.documents{


background:

var(--navy);


}



.documents .section-title h2{


color:white;


}





.documents .section-title p{


color:

var(--gold);


}






.documents-grid{


max-width:

1000px;


margin:auto;


display:grid;


grid-template-columns:

repeat(4,1fr);


gap:20px;


}





.document{


background:

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


border:

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


backdrop-filter:

blur(15px);


border-radius:

20px;


padding:30px;


text-align:center;


color:white;


transition:

var(--transition);


}





.document:hover{


transform:

translateY(-10px);


background:

rgba(255,255,255,.15);


}





.document:first-letter{


font-size:2rem;


}







/* =========================
   UNIVERSITY CARDS
========================= */



.universities{


background:

#f8fafc;


}





.university-container{


max-width:

1100px;


margin:auto;


display:grid;


grid-template-columns:

repeat(3,1fr);


gap:30px;


}




.university-card{


background:white;


padding:45px 35px;


border-radius:

var(--radius);


box-shadow:

var(--shadow);


transition:

var(--transition);


text-align:center;


}





.university-card:hover{


transform:

translateY(-12px);


}





.university-card h3{


color:

var(--navy);


font-size:1.5rem;


margin-bottom:20px;


}







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



@media(max-width:1100px){



.features,
.services-grid{


grid-template-columns:

repeat(2,1fr);


}




.documents-grid{


grid-template-columns:

repeat(3,1fr);


}



.university-container{


grid-template-columns:

repeat(2,1fr);


}



}






@media(max-width:700px){



.features,
.services-grid,
.documents-grid,
.university-container{


grid-template-columns:

1fr;


}



}