/* ========================================================= AIMT — HOME PAGE ONLY Every rule is scoped under `.page-home` (set on ), so nothing here can leak into / override other pages. ========================================================= */ /* =================== HERO =================== */ .page-home .hero { position: relative; overflow: hidden; min-height: 460px; /* Hero-only colours (blue + orange). Sirf hero pe lagte hain, baaki site green/gold rehti hai */ --hero-bg: #4a6384; --hero-bg-dark: #3a5173; --hero-bg-light: #6a82a2; --gold-600: #d9660a; --gold-500: #f47b20; --gold-400: #f79a4a; --green-900: #1b2f4b; background: linear-gradient(100deg, var(--hero-bg-dark) 0%, var(--hero-bg) 45%, var(--hero-bg-light) 100%); color: var(--white); } /* diagonal light + orange stripes (left side) */ .page-home .hero::before, .page-home .hero::after { content: ""; position: absolute; z-index: 0; pointer-events: none; left: -12%; width: 46%; transform: rotate(24deg); transform-origin: left center; } .page-home .hero::before { top: 18%; height: 120px; background: rgba(255, 255, 255, .07); } .page-home .hero::after { top: 56%; height: 34px; background: linear-gradient(90deg, var(--gold-500), rgba(244, 123, 32, .35)); border-radius: 0 40px 40px 0; } .page-home .hero-slide>.container { position: relative; z-index: 3; display: flex; align-items: center; min-height: 480px; } .page-home .hero-content { max-width: 470px; padding: 50px 0 70px; } .page-home .hero-eyebrow { color: var(--gold-400); letter-spacing: .28em; font-size: 12.5px; font-weight: 600; text-transform: uppercase; } .page-home .hero .hero-title { color: var(--white); font-size: clamp(40px, 5.2vw, 62px); margin: 14px 0 20px; line-height: 1.02; } .page-home .hero .hero-title .text-gold { display: block; color: var(--gold-500); } .page-home .hero p { font-size: 14.5px; color: rgba(255, 255, 255, .88); margin-bottom: 30px; max-width: 440px; } .page-home .hero-actions { display: flex; gap: 14px; flex-wrap: wrap; } .page-home .hero-visual { position: absolute; inset: 0; z-index: 1; } .page-home .hero-student { position: absolute; z-index: 2; bottom: 0; left: max(37%, calc(50% - 130px)); height: 100%; width: auto; max-width: 300px; object-fit: cover; object-position: top; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 78%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 78%, transparent 100%); } .page-home .hero-campus { position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; width: 44%; border-top-left-radius: 70% 100%; border-left: 6px solid var(--gold-500); border-top: 6px solid var(--gold-500); overflow: hidden; background: #cfe3f3; } .page-home .hero-campus img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; } .page-home .hero-campus-wave { position: absolute; left: 0; right: 0; bottom: -2px; width: 100%; height: 120px; } .page-home .hero-script { position: absolute; z-index: 3; top: 18px; right: 18px; text-shadow: 0 0 12px rgba(255, 255, 255, .9), 0 0 4px rgba(255, 255, 255, .9); font-family: var(--font-script); color: var(--green-900); font-size: 34px; line-height: 1.05; text-align: left; transform: rotate(-6deg); } .page-home .hero-script span { display: block; padding-left: 24px; } .page-home .hero-script span:last-child { padding-left: 44px; } .page-home .hero-script::after { content: ""; display: block; width: 110px; height: 3px; margin: 4px 0 0 60px; background: var(--gold-500); border-radius: 3px; transform: rotate(-4deg); } .page-home .hero-badge { position: absolute; z-index: 3; right: 30px; bottom: 16px; width: 140px; height: 64px; display: grid; place-items: center; text-align: center; color: var(--white); line-height: 1.2; } .page-home .hero-badge strong { display: block; font-size: 20px; font-weight: 600; } .page-home .hero-badge small { font-size: 12px; } .page-home .hero-badge svg { position: absolute; top: 50%; width: 26px; height: 60px; transform: translateY(-50%); } .page-home .hero-badge svg.l { left: -2px; } .page-home .hero-badge svg.r { right: -2px; transform: translateY(-50%) scaleX(-1); } /* ---------- Hero slider ---------- */ .page-home .hero-slides { display: grid; } .page-home .hero-slide { grid-area: 1 / 1; position: relative; opacity: 0; visibility: hidden; transition: opacity .9s var(--ease), visibility .9s; } .page-home .hero-slide.is-active { opacity: 1; visibility: visible; z-index: 1; } .page-home .hero-visual--wide .hero-campus { width: 52%; } /* text + image entrance on each slide change */ .page-home .hero-content>* { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); } .page-home .hero-slide.is-active .hero-content>* { opacity: 1; transform: none; } .page-home .hero-slide.is-active .hero-content>*:nth-child(1) { transition-delay: .15s; } .page-home .hero-slide.is-active .hero-content>*:nth-child(2) { transition-delay: .28s; } .page-home .hero-slide.is-active .hero-content>*:nth-child(3) { transition-delay: .41s; } .page-home .hero-slide.is-active .hero-content>*:nth-child(4) { transition-delay: .54s; } .page-home .hero-campus img { transform: scale(1.08); transition: transform 7s linear; } .page-home .hero-slide.is-active .hero-campus img { transform: scale(1); } .page-home .hero-student { transform: translateX(30px); opacity: 0; transition: transform 1s var(--ease) .2s, opacity 1s var(--ease) .2s; } .page-home .hero-slide.is-active .hero-student { transform: none; opacity: 1; } /* controls */ .page-home .hero-controls { position: absolute; left: 0; right: 0; bottom: 22px; z-index: 5; pointer-events: none; } .page-home .hero-controls .container { display: flex; align-items: center; gap: 14px; } .page-home .hero-controls button { pointer-events: auto; } .page-home .hero-arrow { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: var(--white); font-size: 13px; border: 1.5px solid rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .06); transition: background .2s var(--ease), border-color .2s, color .2s; } .page-home .hero-arrow:hover { background: var(--gold-500); border-color: var(--gold-500); color: var(--green-900); } .page-home .hero-dots { display: flex; gap: 8px; } .page-home .hero-dot { width: 10px; height: 10px; border-radius: 999px; background: rgba(255, 255, 255, .4); transition: width .35s var(--ease), background .35s var(--ease); } .page-home .hero-dot:hover { background: rgba(255, 255, 255, .75); } .page-home .hero-dot.is-active { width: 30px; background: var(--gold-500); } .page-home .hero-progress { position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; z-index: 5; background: rgba(255, 255, 255, .08); } .page-home .hero-progress span { display: block; height: 100%; width: 0; background: var(--gold-500); } .page-home .hero-progress span.run { width: 100%; transition: width linear; transition-duration: var(--hero-delay, 6s); } @media (prefers-reduced-motion: reduce) { .page-home .hero-slide, .page-home .hero-content>*, .page-home .hero-campus img, .page-home .hero-student { transition: none !important; } } /* ---------- Hero blue/orange details ---------- */ .page-home .hero .btn-gold { box-shadow: 0 8px 20px rgba(244, 123, 32, .35); } .page-home .hero .hero-campus { background: var(--hero-bg); } .page-home .hero .hero-campus-wave path:first-child { fill: var(--hero-bg-light); } .page-home .hero .hero-campus-wave path:last-child { stroke: #dfe6ee; } .page-home .hero .hero-badge svg g { fill: var(--gold-500); } .page-home .hero .hero-badge svg path { stroke: var(--gold-500); } .page-home .hero .hero-script::after { background: var(--gold-500); } /* =================== FEATURES STRIP =================== */ .page-home .features { padding: 14px 0 26px; } .page-home .features-card { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--green-50); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px 10px; } .page-home .feature { display: flex; align-items: center; gap: 16px; padding: 4px 28px; } .page-home .feature+.feature { border-left: 1px solid #d6dde8; } .page-home .feature-icon { font-size: 34px; color: var(--green-700); flex-shrink: 0; width: 48px; text-align: center; } .page-home .feature h3 { font-family: var(--font-body); font-size: 13.5px; font-weight: 600; color: var(--ink-900); line-height: 1.3; } .page-home .feature p { font-size: 11.5px; color: var(--ink-500); margin-top: 4px; } /* =================== PROGRAMS =================== */ .page-home .programs { padding: 10px 0 30px; } .page-home .programs-head { display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: 60px; margin-bottom: 22px; } .page-home .programs-head p { font-size: 13.5px; color: var(--ink-500); max-width: 420px; } .page-home .programs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .page-home .program-card { --accent: var(--green-600); --tint: var(--green-50); position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: 206px; padding: 16px 18px 0; border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--tint) 0%, #fff 70%); border: 1px solid rgba(0, 0, 0, .04); transition: transform .3s var(--ease), box-shadow .3s var(--ease); } .page-home .program-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); } .page-home .program-card--orange { --accent: var(--orange-600); --tint: var(--orange-50); } .page-home .program-card--blue { --accent: var(--blue-600); --tint: var(--blue-50); } .page-home .program-card--purple { --accent: var(--purple-600); --tint: var(--purple-50); } .page-home .program-top { display: flex; align-items: center; gap: 12px; position: relative; z-index: 2; } .page-home .program-num { font-family: var(--font-body); font-size: 30px; font-weight: 500; color: var(--accent); opacity: .35; line-height: 1; } .page-home .program-icon { font-size: 24px; color: var(--accent); } .page-home .program-card h3 { position: relative; z-index: 2; font-size: 18px; margin: 14px 0 10px; max-width: 60%; } .page-home .program-card p { position: relative; z-index: 2; font-size: 11.5px; color: var(--ink-500); max-width: 56%; line-height: 1.55; } .page-home .program-card .link-arrow { position: relative; z-index: 2; color: var(--accent); font-size: 13px; margin: 14px 0 16px; } .page-home .program-tag { position: relative; z-index: 2; margin: auto -18px 0; padding: 9px 12px; text-align: center; font-size: 9.5px; font-weight: 500; letter-spacing: .25em; text-transform: uppercase; color: var(--accent); background: rgba(255, 255, 255, .55); border-top: 1px solid rgba(0, 0, 0, .04); } .page-home .program-img { position: absolute; z-index: 1; right: -4px; top: 44px; width: 50%; height: 130px; object-fit: cover; object-position: left center; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30%); mask-image: linear-gradient(90deg, transparent 0, #000 30%); transition: transform .5s var(--ease); } .page-home .program-card:hover .program-img { transform: scale(1.06); } /* =================== STATS =================== */ .page-home .stats { background: var(--green-50); padding: 16px 0; margin: 10px 0 20px; } .page-home .stats .container { display: grid; grid-template-columns: 170px repeat(4, 1fr); align-items: center; } .page-home .stats-title { font-family: var(--font-script); color: var(--green-900); font-size: 25px; line-height: 1.1; transform: rotate(-6deg); } .page-home .stats-title span { display: block; padding-left: 16px; } .page-home .stats-title::after { content: ""; display: block; width: 120px; height: 2px; background: var(--gold-500); margin: 2px 0 0 20px; } .page-home .stat { display: flex; align-items: center; gap: 16px; padding: 10px 24px; border-left: 1px solid #d6dde8; } .page-home .stat-icon { width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; background: var(--green-100); color: var(--green-700); font-size: 20px; } .page-home .stat strong { display: block; font-size: 28px; font-weight: 600; color: var(--green-900); line-height: 1.1; } .page-home .stat>div>span { font-size: 13px; color: var(--ink-500); white-space: nowrap; } /* =================== ABOUT =================== */ .page-home .about { padding: 16px 0 30px; } .page-home .about .container { display: grid; grid-template-columns: .9fr 1.7fr .95fr; align-items: center; gap: 24px; } .page-home .about h2 { font-size: clamp(28px, 3vw, 34px); margin-bottom: 18px; } .page-home .about h2 .text-gold { color: var(--gold-500); } .page-home .about-text p { font-size: 11.5px; line-height: 1.75; margin-bottom: 20px; text-align: justify; hyphens: auto; } .page-home .about-visual { position: relative; height: 230px; clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%); overflow: hidden; } .page-home .about-visual img { width: 62%; height: 100%; object-fit: cover; } .page-home .about-panel { position: absolute; top: 0; right: 0; bottom: 0; width: 46%; background: linear-gradient(160deg, var(--green-700), var(--green-900)); clip-path: polygon(22% 0, 100% 0, 78% 100%, 0 100%); display: flex; flex-direction: column; justify-content: center; padding-left: 16%; color: var(--white); font-weight: 600; font-size: 15px; letter-spacing: .06em; line-height: 1.75; } .page-home .about-panel span:nth-child(2) { padding-left: 6px; } .page-home .about-panel span:nth-child(3) { padding-left: 0; } .page-home .about-panel span:last-child { color: var(--gold-400); margin-left: -8px; } .page-home .about-stripe { position: absolute; bottom: 0; right: 18%; width: 34%; height: 45%; background: var(--gold-500); clip-path: polygon(70% 0, 100% 0, 80% 100%, 0 100%); opacity: .95; } .page-home .about-list li { display: flex; gap: 14px; align-items: center; margin-bottom: 18px; } .page-home .about-list li:last-child { margin-bottom: 0; } .page-home .about-list .ico { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; background: var(--green-100); color: var(--green-700); display: grid; place-items: center; font-size: 17px; } .page-home .about-list h4 { font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--ink-900); } .page-home .about-list p { font-size: 11.5px; color: var(--ink-500); } /* =================== TESTIMONIALS + CTA =================== */ .page-home .voices { padding: 10px 0 40px; } .page-home .voices .container { display: grid; grid-template-columns: 1.95fr 1fr; gap: 26px; align-items: stretch; } .page-home .voices-left { display: grid; grid-template-columns: 200px 1fr; gap: 20px; align-items: center; background: linear-gradient(90deg, #fff, var(--green-50)); border-radius: var(--radius-lg); } .page-home .slider-arrows { display: flex; gap: 12px; margin-top: 14px; } .page-home .slider-arrows button { width: 30px; height: 30px; border-radius: 50%; background: var(--white); border: 1px solid var(--border); box-shadow: var(--shadow-sm); color: var(--green-800); font-size: 11px; transition: all .2s var(--ease); } .page-home .slider-arrows button:hover { background: var(--green-700); color: var(--white); } .page-home .testimonial-viewport { position: relative; overflow: hidden; } .page-home .testimonial-track { display: flex; transition: transform .5s var(--ease); } .page-home .testimonial { flex: 0 0 100%; display: flex; align-items: center; gap: 0; } .page-home .testimonial-avatar { width: 68px; height: 68px; border-radius: 50%; flex-shrink: 0; object-fit: cover; margin: 10px; border: 3px solid var(--white); box-shadow: var(--shadow); position: relative; z-index: 2; margin-right: -4px; } .page-home .testimonial-card { flex: 1; background: var(--white); border-radius: var(--radius); padding: 14px 22px 14px 26px; box-shadow: var(--shadow-sm); position: relative; margin-left: 30px; } .page-home .testimonial-card .quote { color: var(--green-700); font-size: 16px; } .page-home .testimonial-card p { font-size: 12px; color: var(--ink-700); line-height: 1.65; margin: 4px 0 10px; } .page-home .testimonial-meta { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; } .page-home .testimonial-meta strong { display: block; font-size: 12px; color: var(--ink-900); } .page-home .testimonial-meta small { font-size: 10.5px; color: var(--ink-500); } .page-home .stars { color: var(--gold-500); font-size: 12px; letter-spacing: 2px; } .page-home .cta-card { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--green-700), var(--green-900)); border-radius: var(--radius-lg); color: var(--white); padding: 24px 28px; min-height: 140px; } .page-home .cta-card::before { /* gold diagonal sweep */ content: ""; position: absolute; right: -40px; bottom: -60px; width: 300px; height: 150px; background: var(--gold-500); transform: rotate(-22deg); border-radius: 40px 0 0 0; } .page-home .cta-card>* { position: relative; z-index: 2; } .page-home .cta-card h3 { color: var(--white); font-size: 18px; font-weight: 500; } .page-home .cta-card h3 strong { display: block; font-size: 26px; font-weight: 700; } .page-home .cta-card p { font-size: 13.5px; margin: 4px 0 12px; } .page-home .cta-cap { position: absolute; z-index: 1; right: 6px; bottom: 16px; width: 44%; mix-blend-mode: normal; -webkit-mask-image: radial-gradient(circle at 60% 50%, #000 55%, transparent 72%); mask-image: radial-gradient(circle at 60% 50%, #000 55%, transparent 72%); } /* =================== RESPONSIVE (home only) =================== */ @media (max-width: 1100px) { .page-home .programs-grid { grid-template-columns: repeat(2, 1fr); } .page-home .about .container { grid-template-columns: 1fr 1.4fr; } .page-home .about-list { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .page-home .about-list li { margin: 0; } .page-home .voices .container { grid-template-columns: 1fr; } } @media (max-width: 991px) { .page-home .hero { min-height: auto; } .page-home .hero-slide>.container { min-height: auto; flex-direction: column; align-items: flex-start; } .page-home .hero-content { max-width: 100%; padding: 44px 0 26px; } .page-home .hero-visual { position: relative; inset: auto; height: 340px; } .page-home .hero-student { left: 0; max-width: 55%; } .page-home .hero-campus { position: absolute; width: 60%; } .page-home .hero-script { font-size: 26px; } .page-home .hero-visual--wide .hero-campus { width: 100%; border-top-left-radius: 40% 60%; } .page-home .hero { padding-bottom: 60px; } .page-home .hero-controls { bottom: 12px; } .page-home .hero-controls .container { justify-content: center; } .page-home .hero .hero-arrow { background: rgba(27, 47, 75, .55); } .page-home .features-card { grid-template-columns: repeat(2, 1fr); row-gap: 18px; } .page-home .feature:nth-child(3) { border-left: 0; } .page-home .programs-head { grid-template-columns: 1fr; gap: 10px; } .page-home .stats .container { grid-template-columns: repeat(2, 1fr); row-gap: 8px; } .page-home .stats-title { grid-column: 1 / -1; text-align: center; transform: none; margin-bottom: 8px; } .page-home .stats-title span { display: inline; padding: 0; } .page-home .stats-title::after { margin: 4px auto 0; } .page-home .stat:nth-child(odd) { border-left: 0; } } @media (max-width: 720px) { .page-home .about .container { grid-template-columns: 1fr; } .page-home .about-list { grid-template-columns: 1fr; } .page-home .voices-left { grid-template-columns: 1fr; padding: 0; background: none; } } @media (max-width: 600px) { .page-home .features-card { grid-template-columns: 1fr; } .page-home .feature+.feature { border-left: 0; border-top: 1px solid #d6dde8; padding-top: 16px; } .page-home .programs-grid { grid-template-columns: 1fr; } .page-home .stats .container { grid-template-columns: 1fr; } .page-home .stat { border-left: 0; border-top: 1px solid #d6dde8; } .page-home .hero-visual { height: 280px; } .page-home .hero-script { display: none; } .page-home .testimonial { flex-direction: column; align-items: flex-start; } .page-home .testimonial-avatar { margin: 0 0 -20px 20px; } .page-home .testimonial-card { padding-top: 26px; } }