/*====================================================* HOME WELCOME SECTION ====================================================*/ .home-welcome { width: 100%; background: #ffffff; box-sizing: border-box; overflow: hidden; } /*====================================================* COMMON CONTAINER ====================================================*/ .home-welcome-container { width: 100%; max-width: 1540px; margin: 0 auto; padding: 0 120px; box-sizing: border-box; } /*====================================================* QUICK ACTION AREA ====================================================*/ .home-welcome-actions { width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 23px; margin-top: 12px; } /*====================================================* ACTION CARD ====================================================*/ .home-welcome-action { min-height: 130px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border-radius: 11px; text-decoration: none; box-sizing: border-box; transition: transform 0.3s ease, box-shadow 0.3s ease; } /*====================================================* ACTION HOVER ====================================================*/ .home-welcome-action:hover { transform: translateY(-4px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12); } /*====================================================* ACTION COLORS ====================================================*/ .home-welcome-events { background: #bd2c2f; } .home-welcome-enquiry { background: #f2a400; } .home-welcome-admission { background: #b4d56b; } .home-welcome-fee { background: #ed6b63; } /*====================================================* ACTION ICON ====================================================*/ .home-welcome-icon { width: 55px; height: 55px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; border: 3px solid #ff5b5b; border-radius: 50%; background: #ffffff; box-sizing: border-box; } /*====================================================* ACTION ICON FONT ====================================================*/ .home-welcome-icon i { color: #ff5555; font-size: 24px; } /*====================================================* ACTION TITLE ====================================================*/ .home-welcome-action h3 { margin: 0; color: #ffffff; font-family: "Poppins", sans-serif; font-size: 19px; font-weight: 600; line-height: 1.2; } /*====================================================* WELCOME CONTENT ====================================================*/ .home-welcome-content { width: 100%; max-width: 1200px; margin: 100px auto 0; text-align: center; } /*====================================================* WELCOME TITLE ====================================================*/ .home-welcome-content h2 { margin: 0; color: #ce292c; font-family: "Poppins", sans-serif; font-size: 39px; font-weight: 500; line-height: 1.25; } /*====================================================* WELCOME SUBTITLE ====================================================*/ .home-welcome-content h4 { margin: 8px 0 0; color: #151515; font-family: "Poppins", sans-serif; font-size: 18px; font-weight: 400; line-height: 1.4; } /*====================================================* WELCOME DESCRIPTION ====================================================*/ .home-welcome-content p { width: 88%; max-width: 1140px; margin: 27px auto 0; color: #777777; font-family: "Poppins", sans-serif; font-size: 14px; font-weight: 400; line-height: 1.65; } /*====================================================* FEATURES ====================================================*/ .home-welcome-features { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 50px; margin: 58px auto 0; padding-bottom: 45px; } /*====================================================* FEATURE ====================================================*/ .home-welcome-feature { width: 100%; display: flex; align-items: flex-start; gap: 28px; } /*====================================================* FEATURE ICON ====================================================*/ .home-welcome-feature-icon { flex: 0 0 45px; width: 45px; height: 50px; display: flex; align-items: flex-start; justify-content: center; } /*====================================================* FEATURE ICON FONT ====================================================*/ .home-welcome-feature-icon i { color: #d52b2e; font-size: 43px; line-height: 1; } /*====================================================* FEATURE CONTENT ====================================================*/ .home-welcome-feature-content { flex: 1; min-width: 0; } /*====================================================* FEATURE TITLE ====================================================*/ .home-welcome-feature-content h3 { margin: 8px 0 4px; color: #222222; font-family: "Poppins", sans-serif; font-size: 23px; font-weight: 400; line-height: 1.25; } /*====================================================* FEATURE DESCRIPTION ====================================================*/ .home-welcome-feature-content p { margin: 0; color: #777777; font-family: "Poppins", sans-serif; font-size: 15px; font-weight: 400; line-height: 1.7; } /*====================================================* TABLET ====================================================*/ @media (max-width: 1100px) { .home-welcome-container { padding: 0 25px; } .home-welcome-actions { gap: 18px; } .home-welcome-action h3 { font-size: 16px; } .home-welcome-content { margin-top: 90px; } .home-welcome-content h2 { font-size: 34px; } .home-welcome-features { gap: 30px; } .home-welcome-feature { gap: 18px; } .home-welcome-feature-content h3 { font-size: 19px; } .home-welcome-feature-content p { font-size: 14px; } } /*====================================================* TABLET / SMALL DESKTOP ====================================================*/ @media (max-width: 900px) { .home-welcome-actions { grid-template-columns: repeat(2, 1fr); gap: 18px; } .home-welcome-action { min-height: 120px; } .home-welcome-content { margin-top: 75px; } .home-welcome-content h2 { font-size: 31px; } .home-welcome-content h4 { font-size: 16px; } .home-welcome-content p { font-size: 14px; } .home-welcome-features { grid-template-columns: 1fr; gap: 35px; max-width: 700px; } } /*====================================================* MOBILE ====================================================*/ @media (max-width: 768px) { .home-welcome-container { padding: 0 18px; } /*---------------------------------------------- ACTION CARDS ----------------------------------------------*/ .home-welcome-actions { grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; } .home-welcome-action { min-height: 115px; border-radius: 9px; } .home-welcome-icon { width: 45px; height: 45px; margin-bottom: 9px; border-width: 2px; } .home-welcome-icon i { font-size: 19px; } .home-welcome-action h3 { font-size: 13px; } /*---------------------------------------------- WELCOME CONTENT ----------------------------------------------*/ .home-welcome-content { margin-top: 65px; } .home-welcome-content h2 { font-size: 27px; line-height: 1.3; } .home-welcome-content h4 { margin-top: 7px; font-size: 14px; } .home-welcome-content p { margin-top: 20px; font-size: 13px; line-height: 1.7; } /*---------------------------------------------- FEATURES ----------------------------------------------*/ .home-welcome-features { margin-top: 42px; gap: 30px; padding-bottom: 35px; } .home-welcome-feature { gap: 18px; } .home-welcome-feature-icon { flex: 0 0 38px; width: 38px; height: 45px; } .home-welcome-feature-icon i { font-size: 35px; } .home-welcome-feature-content h3 { margin-top: 3px; font-size: 18px; } .home-welcome-feature-content p { font-size: 13px; line-height: 1.65; } } /*====================================================* SMALL MOBILE ====================================================*/ @media (max-width: 480px) { .home-welcome-container { padding: 0 15px; } /*---------------------------------------------- ACTION CARDS ----------------------------------------------*/ .home-welcome-actions { gap: 10px; } .home-welcome-action { min-height: 105px; } .home-welcome-icon { width: 42px; height: 42px; margin-bottom: 8px; } .home-welcome-icon i { font-size: 17px; } .home-welcome-action h3 { font-size: 11px; } /*---------------------------------------------- WELCOME ----------------------------------------------*/ .home-welcome-content { margin-top: 55px; } .home-welcome-content h2 { font-size: 23px; } .home-welcome-content h4 { font-size: 12px; } .home-welcome-content p { margin-top: 17px; font-size: 12px; line-height: 1.65; } /*---------------------------------------------- FEATURES ----------------------------------------------*/ .home-welcome-features { margin-top: 35px; gap: 28px; } .home-welcome-feature { gap: 15px; } .home-welcome-feature-icon { flex: 0 0 34px; width: 34px; } .home-welcome-feature-icon i { font-size: 31px; } .home-welcome-feature-content h3 { font-size: 16px; } .home-welcome-feature-content p { font-size: 11px; } } /*====================================================* VERY SMALL MOBILE ====================================================*/ @media (max-width: 360px) { .home-welcome-container { padding: 0 12px; } .home-welcome-actions { gap: 8px; } .home-welcome-action { min-height: 98px; } .home-welcome-icon { width: 38px; height: 38px; } .home-welcome-icon i { font-size: 15px; } .home-welcome-action h3 { font-size: 10px; } .home-welcome-content { margin-top: 48px; } .home-welcome-content h2 { font-size: 20px; } .home-welcome-content h4 { font-size: 11px; } .home-welcome-content p { font-size: 11px; } .home-welcome-feature-content h3 { font-size: 14px; } .home-welcome-feature-content p { font-size: 10px; } }