Untitled
/* Base styles */ html { font-size: 62.5%; box-sizing: border-box; } /* Responsive font sizing */ @media (max-width: 1200px) { html { font-size: 56.25%; } } @media (max-width: 998px) { html { font-size: 55%; } } @media (max-width: 768px) { html { font-size: 45%; } } @media (max-width: 480px) { html { font-size: 40%; } } .home { font-family: 'Poppins', sans-serif; overflow-x: hidden; width: 100%; } /* Hero Section */ .hero { background-image: url('/public/images/Home.png'); display: flex; align-items: center; justify-content: center; background-size: cover; background-position: center; padding: 5rem 2rem 15rem; min-height: 60vh; width: 100%; flex-wrap: wrap; gap: 3rem; } @media (max-width: 768px) { .hero { flex-direction: column; padding: 3rem 1.5rem 10rem; } } .hero-left { flex: 1; margin: 3rem 2rem; min-width: 28rem; } @media (max-width: 768px) { .hero-left { margin: 2rem 1rem; text-align: center; width: 100%; } } .hero-right { flex: 1; min-width: 30rem; max-width: 50rem; margin: 2rem; padding: 2rem; background-color: #3C5C7B; color: #ffffff; border-radius: 3rem; box-shadow: 0 .8rem 1.6rem rgba(0, 0, 0, 0.25); } @media (max-width: 768px) { .hero-right { margin: 1rem; width: 90%; min-width: 28rem; } } /* Form Elements */ .form { width: 100%; max-width: 40rem; padding: 0 2rem 6rem; margin: 0 auto; } .hero-right input[type="text"], .hero-right input[type="email"], .hero-right input[type="phone"], .hero-right input[type="url"], .hero-right textarea { width: 100%; padding: 1.2rem; margin: 0.5rem 0; font-size: 1.6rem; border-radius: 0.8rem; border: none; outline: none; } .hero-right select { width: 100%; padding: 1.2rem; margin: 0.5rem 0; font-size: 1.6rem; border-radius: 0.8rem; background-color: #C6E894; color: #3C5C7B; border: none; outline: none; appearance: none; } /* White Section */ .White { width: 90%; max-width: 117rem; margin: -11rem auto 0; padding: 2rem; background-color: white; border-radius: 1.4rem; box-shadow: 0 0 .5rem rgba(14, 3, 3, 0.5); display: flex; flex-wrap: wrap; justify-content: space-around; gap: 2rem; } @media (max-width: 768px) { .White { width: 95%; margin: -8rem auto 0; flex-direction: column; align-items: center; padding: 1.5rem; } } .item { display: flex; align-items: center; gap: 1rem; margin: 1rem; } @media (max-width: 768px) { .item { margin: 1rem 0; justify-content: center; } } /* Pricing Table */ .pricingTable-firstTable { padding: 4rem 2rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem; background-size: cover; background-position: center; } .pricingTable-firstTable_table { flex: 1; min-width: 28rem; max-width: 32rem; margin: 1rem; background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(1rem); border-radius: 3rem; padding: 2rem; } @media (max-width: 768px) { .pricingTable-firstTable_table { width: 90%; margin: 1rem auto; } } /* Programs Section */ .programs-container { padding: 5rem 2rem; background-size: cover; background-position: center; } .program-section { display: grid; grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr)); gap: 2rem; padding: 2rem; } @media (max-width: 768px) { .program-section { grid-template-columns: 1fr; padding: 1rem; } } .program-card { width: 100%; max-width: 30rem; margin: 0 auto; padding: 2rem; } /* Text Styles */ .text-white2, .text-green { font-size: clamp(1.2rem, 2vw, 1.6rem); } .hero-heading { font-size: clamp(2rem, 3vw, 3rem); margin-bottom: 2rem; } .programs-heading { font-size: clamp(2.4rem, 4vw, 3rem); } /* Button */ .callback-btn { width: 80%; max-width: 25rem; padding: 1.2rem; font-size: 1.6rem; border-radius: 2.5rem; margin: 2rem auto; transform: none; } @media (max-width: 480px) { .callback-btn { width: 90%; font-size: 1.4rem; } } /* Additional Responsive Adjustments */ @media (max-width: 480px) { .text { font-size: 1.6rem; } .pricingTable-firstTable_table__options { padding: 1rem; } .pricingTable-title { font-size: 2.4rem; } .pricingTable-subtitle { font-size: 1.6rem; } } /* Reviews and Mentors Sections */ .reviews, .mentors { padding: 5rem 2rem; } @media (max-width: 768px) { .reviews, .mentors { padding: 3rem 1.5rem; } .review-card { width: 90%; margin: 0 auto; } .mentor-list li { margin: 1rem; } } /* Plans Section */ .home-plans { padding: 5rem 2rem; } .home-plans-grid { display: flex; flex-wrap: wrap; gap: 2rem; justify-content: center; } .home-plan-card { flex: 1; min-width: 28rem; max-width: 35rem; margin: 1rem; } @media (max-width: 768px) { .home-plans { padding: 3rem 1.5rem; } .home-plan-card { width: 90%; margin: 1rem auto; } }
Leave a Comment