main .heading { font-weight: 700; letter-spacing: -1px; } .feature-card { border-radius: 1.5rem; color: white; min-height: 260px; position: relative; transition: transform 0.3s ease; } .feature-card:hover { transform: translateY(-5px); } .feature-icon { position: absolute; top: 1rem; right: 1rem; width: 2.5rem; height: 2.5rem; background: rgba(255,255,255,0.2); border-radius: 50%; } .feature-icon::after { content: "↗"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-weight: bold; } .bg-pink { background: #E03D5C; } .bg-purple { background: #5A06FF; } .bg-blue { background: #0464FF; } .bg-coral { background: #ED605A; } .bg-green { background: #3FBF89;; } .bg-yellow { background: #E1AB12; } .bg-indigo { background: #5A06FF; } .bg-cyan { background: #0464FF; } .card-1 {grid-area: card_1;} .card-2 {grid-area: card_2;} .card-3 {grid-area: card_3;} .card-4 {grid-area: card_4;} .card-5 {grid-area: card_5;} .card-6 {grid-area: card_6;} .card-7 {grid-area: card_7;} .card-8 {grid-area: card_8;} .card-9 {grid-area: card_9;} .features-section .row { display: grid; grid-gap: 1rem; grid-template-areas: "card_1 card_2 card_2" "card_1 card_4 card_5" "card_3 card_4 card_6" "card_7 card_8 card_9"; } @media screen and (max-width:767px) { .hero-content h2 { color: #fff; } .hero-content p { color: #fff !important; } .features-section .row { grid-template-areas: "card_1 card_1" "card_2 card_3" "card_4 card_5" "card_6 card_7" "card_8 card_9"; padding: 0.5em; grid-gap: 0.4rem; } .feature-card h3 { font-size: 1.2rem } .feature-card p { font-size: 14px; line-height: 20px; } }