{"id":1755,"date":"2026-04-02T12:11:11","date_gmt":"2026-04-02T06:41:11","guid":{"rendered":"https:\/\/kompassjuniorcollege.edu.in\/lp\/?page_id=1755"},"modified":"2026-04-02T14:36:11","modified_gmt":"2026-04-02T09:06:11","slug":"landing-page","status":"publish","type":"page","link":"https:\/\/kompassjuniorcollege.edu.in\/lp\/landing-page\/","title":{"rendered":"Landing Page"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1755\" class=\"elementor elementor-1755\" data-elementor-post-type=\"page\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-5cc5299 elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"5cc5299\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;ekit_has_onepagescroll_dot&quot;:&quot;yes&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-848ba99\" data-id=\"848ba99\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-4546f8d elementor-widget elementor-widget-shortcode\" data-id=\"4546f8d\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;ekit_we_effect_on&quot;:&quot;none&quot;}\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"> \r\n<meta charset=\"UTF-8\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n<title>Kompass Junior College \u2013 CLAT 2026\u201327 Admissions Open<\/title>\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:wght@400;700;900&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.0\/css\/all.min.css\">\r\n<style>\r\n  :root {\r\n    --blue:        #3d5aa3;\r\n    --blue-dark:   #2a3f7a;\r\n    --blue-mid:    #4a6bbf;\r\n    --blue-light:  #5575c5;\r\n    --blue-pale:   #eaeffa;\r\n    --yellow:      #f2a007;\r\n    --yellow-light:#ffc240;\r\n    --yellow-pale: #fff8e1;\r\n    --white:       #ffffff;\r\n    --off-white:   #f9fafb;\r\n    --text-dark:   #1a2540;\r\n    --text-muted:  #5a6a8a;\r\n    --border:      rgba(61,90,163,0.13);\r\n  }\r\n\r\n  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\r\n  html { scroll-behavior: smooth; }\r\n\r\n  body {\r\n    font-family: 'Plus Jakarta Sans', sans-serif;\r\n    background: var(--white);\r\n    color: var(--text-dark);\r\n    overflow-x: hidden;\r\n  }\r\n\r\n  ::-webkit-scrollbar { width: 5px; }\r\n  ::-webkit-scrollbar-track { background: var(--blue-pale); }\r\n  ::-webkit-scrollbar-thumb { background: var(--yellow); border-radius: 3px; }\r\n\r\n  \/* \u2500\u2500 TICKER \u2500\u2500 *\/\r\n  .ticker-wrap {\r\n    background: var(--yellow);\r\n    padding: 0.45rem 0;\r\n    overflow: hidden;\r\n    position: relative; z-index: 200;\r\n  }\r\n  .ticker { display: flex; gap: 2.5rem; white-space: nowrap; animation: tick 28s linear infinite; }\r\n  @keyframes tick { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }\r\n  .ticker span { color: var(--blue-dark); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; }\r\n  .ticker-sep { color: var(--blue); opacity: 0.5; }\r\n\r\n  \/* \u2500\u2500 NAV \u2500\u2500 *\/\r\n  nav {\r\n    position: fixed; top: 32px; left: 0; right: 0; z-index: 1000;\r\n    display: flex; align-items: center; justify-content: space-between;\r\n    padding: 0 5%;\r\n    height: 68px;\r\n    background: var(--blue);\r\n    box-shadow: 0 2px 24px rgba(0,58,140,0.18);\r\n    transition: padding 0.3s, box-shadow 0.3s;\r\n  }\r\n  .nav-brand { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; }\r\n  .nav-logo {\r\n    height: 46px; width: auto;\r\n    display: block; flex-shrink: 0;\r\n  }\r\n  .nav-brand-text { font-family: 'Playfair Display', serif; font-size: 1.05rem; font-weight: 700; color: var(--white); line-height: 1.1; }\r\n  .nav-brand-sub { font-size: 0.6rem; color: rgba(255,255,255,0.55); letter-spacing: 0.12em; text-transform: uppercase; }\r\n\r\n  .nav-links { display: flex; gap: 1.8rem; list-style: none; }\r\n  .nav-links a { color: rgba(255,255,255,0.8); text-decoration: none; font-size: 0.85rem; font-weight: 500; letter-spacing: 0.03em; transition: color 0.25s; }\r\n  .nav-links a:hover { color: var(--yellow); }\r\n\r\n  .nav-cta {\r\n    background: var(--yellow); color: var(--blue-dark);\r\n    border: none; padding: 0.55rem 1.4rem; border-radius: 8px;\r\n    font-weight: 700; font-size: 0.85rem; cursor: pointer; letter-spacing: 0.03em;\r\n    transition: background 0.2s, transform 0.2s;\r\n    text-decoration: none; white-space: nowrap;\r\n  }\r\n  .nav-cta:hover { background: var(--yellow-light); transform: translateY(-1px); }\r\n\r\n  \/* \u2500\u2500 HERO \u2500\u2500 *\/\r\n  .hero {\r\n    min-height: 100vh;\r\n    background: var(--blue);\r\n    position: relative; overflow: hidden;\r\n    display: flex; flex-direction: column; justify-content: center; align-items: center;\r\n    text-align: center;\r\n    padding: 7rem 5% 5rem;\r\n  }\r\n\r\n  \/* Geometric pattern bg *\/\r\n  .hero-pattern {\r\n    position: absolute; inset: 0; z-index: 0; overflow: hidden;\r\n  }\r\n  .hero-pattern svg {\r\n    position: absolute; width: 100%; height: 100%;\r\n    opacity: 0.06;\r\n  }\r\n\r\n  \/* Yellow accent shape *\/\r\n  .hero-accent {\r\n    position: absolute; right: -80px; top: -60px;\r\n    width: 480px; height: 480px; border-radius: 50%;\r\n    background: radial-gradient(circle, rgba(242,176,7,0.25) 0%, transparent 70%);\r\n    z-index: 0;\r\n  }\r\n  .hero-accent-2 {\r\n    position: absolute; left: -100px; bottom: -80px;\r\n    width: 400px; height: 400px; border-radius: 50%;\r\n    background: radial-gradient(circle, rgba(0,77,179,0.5) 0%, transparent 70%);\r\n    z-index: 0;\r\n  }\r\n\r\n  .hero-badge {\r\n    display: inline-flex; align-items: center; gap: 0.5rem;\r\n    background: rgba(242,176,7,0.15); border: 1.5px solid rgba(242,176,7,0.5);\r\n    border-radius: 50px; padding: 0.4rem 1rem;\r\n    font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em;\r\n    text-transform: uppercase; color: var(--yellow);\r\n    margin-bottom: 1.5rem; position: relative; z-index: 1;\r\n    animation: fadeUp 0.7s 0.2s ease both;\r\n  }\r\n  .badge-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--yellow); animation: pulse 1.5s infinite; }\r\n  @keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(242,176,7,0.7); } 50% { box-shadow: 0 0 0 6px rgba(242,176,7,0); } }\r\n\r\n  .hero h1 {\r\n    font-family: 'Playfair Display', serif;\r\n    font-size: clamp(2.2rem, 5.5vw, 4.5rem); font-weight: 900;\r\n    line-height: 1.1; color: var(--white);\r\n    position: relative; z-index: 1; max-width: 860px;\r\n    animation: fadeUp 0.7s 0.4s ease both;\r\n  }\r\n  .hero h1 .accent { color: var(--yellow); }\r\n\r\n  .hero-subtitle {\r\n    font-size: clamp(0.95rem, 1.8vw, 1.15rem); color: rgba(255,255,255,0.7);\r\n    max-width: 600px; margin: 1.5rem auto; line-height: 1.75;\r\n    position: relative; z-index: 1;\r\n    animation: fadeUp 0.7s 0.6s ease both;\r\n  }\r\n\r\n  @keyframes fadeUp { from { opacity:0; transform: translateY(28px); } to { opacity:1; transform: translateY(0); } }\r\n\r\n  .hero-actions {\r\n    display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center;\r\n    margin-top: 2.5rem; position: relative; z-index: 1;\r\n    animation: fadeUp 0.7s 0.8s ease both;\r\n  }\r\n\r\n  .btn-primary {\r\n    display: inline-flex; align-items: center; gap: 0.5rem;\r\n    background: var(--yellow); color: var(--blue-dark);\r\n    border: none; padding: 0.9rem 2.1rem; border-radius: 10px;\r\n    font-weight: 700; font-size: 0.95rem; cursor: pointer;\r\n    text-decoration: none; letter-spacing: 0.02em;\r\n    box-shadow: 0 6px 24px rgba(242,176,7,0.45);\r\n    transition: background 0.25s, transform 0.25s, box-shadow 0.25s;\r\n  }\r\n  .btn-primary:hover { background: var(--yellow-light); transform: translateY(-3px); box-shadow: 0 12px 32px rgba(242,176,7,0.55); }\r\n\r\n  .btn-outline {\r\n    display: inline-flex; align-items: center; gap: 0.5rem;\r\n    background: transparent; color: var(--white);\r\n    border: 1.5px solid rgba(255,255,255,0.35); padding: 0.9rem 2.1rem;\r\n    border-radius: 10px; font-weight: 500; font-size: 0.95rem; cursor: pointer;\r\n    text-decoration: none; transition: border-color 0.25s, background 0.25s, color 0.25s;\r\n  }\r\n  .btn-outline:hover { border-color: var(--yellow); color: var(--yellow); background: rgba(242,176,7,0.06); }\r\n\r\n  \/* Stats *\/\r\n  .hero-stats {\r\n    display: flex; gap: 2.5rem; flex-wrap: wrap; justify-content: center;\r\n    margin-top: 4rem; padding-top: 3rem;\r\n    border-top: 1px solid rgba(255,255,255,0.12);\r\n    position: relative; z-index: 1; width: 100%; max-width: 720px;\r\n    animation: fadeUp 0.7s 1s ease both;\r\n  }\r\n  .stat { text-align: center; }\r\n  .stat-num {\r\n    font-family: 'Playfair Display', serif; font-size: 2.4rem; font-weight: 900;\r\n    color: var(--yellow); line-height: 1;\r\n  }\r\n  .stat-label { font-size: 0.7rem; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.1em; margin-top: 0.4rem; }\r\n\r\n  \/* \u2500\u2500 COMMON SECTION \u2500\u2500 *\/\r\n  section { position: relative; }\r\n\r\n  .section-tag {\r\n    display: inline-flex; align-items: center; gap: 0.6rem;\r\n    color: var(--blue); font-size: 0.72rem; font-weight: 700;\r\n    text-transform: uppercase; letter-spacing: 0.15em; margin-bottom: 0.9rem;\r\n  }\r\n  .section-tag .tag-line { width: 28px; height: 2px; background: var(--yellow); border-radius: 2px; }\r\n\r\n  .section-title {\r\n    font-family: 'Playfair Display', serif;\r\n    font-size: clamp(1.8rem, 3.5vw, 2.8rem); font-weight: 900;\r\n    color: var(--text-dark); line-height: 1.15; margin-bottom: 1rem;\r\n  }\r\n  .section-title .accent { color: var(--blue); }\r\n\r\n  .section-desc { color: var(--text-muted); max-width: 520px; line-height: 1.8; font-size: 0.95rem; }\r\n\r\n  .divider-line { width: 50px; height: 3px; background: var(--yellow); border-radius: 2px; margin: 1rem auto 0; }\r\n\r\n  \/* \u2500\u2500 WHY CHOOSE US \u2500\u2500 *\/\r\n  .why { padding: 6rem 5%; background: var(--off-white); }\r\n  .why-inner { max-width: 1200px; margin: 0 auto; }\r\n  .why-header { text-align: center; margin-bottom: 4rem; }\r\n  .why-header .section-tag { justify-content: center; }\r\n\r\n  .cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; }\r\n\r\n  .card {\r\n    background: var(--white); border: 1.5px solid var(--border);\r\n    border-radius: 18px; padding: 2rem;\r\n    transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;\r\n    position: relative; overflow: hidden;\r\n  }\r\n  .card::after {\r\n    content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px;\r\n    background: var(--yellow); transform: scaleX(0); transform-origin: left;\r\n    transition: transform 0.35s ease;\r\n  }\r\n  .card:hover { transform: translateY(-6px); border-color: rgba(0,58,140,0.25); box-shadow: 0 12px 40px rgba(0,58,140,0.1); }\r\n  .card:hover::after { transform: scaleX(1); }\r\n\r\n  .card-icon {\r\n    width: 52px; height: 52px; border-radius: 14px;\r\n    background: var(--blue-pale);\r\n    display: flex; align-items: center; justify-content: center;\r\n    font-size: 1.3rem; color: var(--blue); margin-bottom: 1.2rem;\r\n    transition: background 0.3s;\r\n  }\r\n  .card:hover .card-icon { background: var(--yellow); color: var(--blue-dark); }\r\n  .card h3 { font-family: 'Playfair Display', serif; font-size: 1.1rem; font-weight: 700; color: var(--text-dark); margin-bottom: 0.55rem; }\r\n  .card p { color: var(--text-muted); font-size: 0.88rem; line-height: 1.75; }\r\n\r\n  \/* \u2500\u2500 DIFFERENT \u2500\u2500 *\/\r\n  .different { padding: 6rem 5%; background: var(--white); }\r\n  .different-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; }\r\n\r\n  .diff-visual { position: relative; border-radius: 20px; overflow: visible; }\r\n  .diff-img-wrap {\r\n    border-radius: 20px; overflow: hidden; aspect-ratio: 4\/5;\r\n    border: 3px solid var(--blue-pale);\r\n    position: relative;\r\n  }\r\n  .diff-img-wrap img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.85); }\r\n  .diff-img-wrap::after {\r\n    content: ''; position: absolute; inset: 0;\r\n    background: linear-gradient(180deg, transparent 50%, rgba(0,58,140,0.45) 100%);\r\n  }\r\n\r\n  \/* Yellow square accent *\/\r\n  .diff-sq {\r\n    position: absolute; width: 90px; height: 90px;\r\n    background: var(--yellow); border-radius: 12px; z-index: -1;\r\n    bottom: -18px; right: -18px;\r\n  }\r\n  .diff-sq-2 {\r\n    position: absolute; width: 60px; height: 60px;\r\n    border: 3px solid var(--blue); border-radius: 10px; z-index: -1;\r\n    top: -16px; left: -16px;\r\n  }\r\n\r\n  .diff-badge-float {\r\n    position: absolute; bottom: 1.5rem; left: 1.5rem; right: 1.5rem; z-index: 5;\r\n    background: var(--white); border: 2px solid var(--yellow);\r\n    border-radius: 14px; padding: 1rem 1.2rem;\r\n    display: flex; align-items: center; gap: 1rem;\r\n    box-shadow: 0 8px 32px rgba(0,58,140,0.15);\r\n  }\r\n  .float-icon { font-size: 2rem; flex-shrink: 0; }\r\n  .float-text strong { font-family: 'Playfair Display', serif; font-size: 1rem; color: var(--blue); display: block; }\r\n  .float-text span { font-size: 0.75rem; color: var(--text-muted); }\r\n\r\n  .diff-list { list-style: none; margin-top: 2rem; display: flex; flex-direction: column; gap: 0.9rem; }\r\n  .diff-list li {\r\n    display: flex; align-items: flex-start; gap: 1rem;\r\n    padding: 1rem 1.2rem; border-radius: 12px;\r\n    background: var(--off-white); border: 1.5px solid var(--border);\r\n    transition: background 0.3s, border-color 0.3s;\r\n  }\r\n  .diff-list li:hover { background: var(--blue-pale); border-color: rgba(0,58,140,0.25); }\r\n  .diff-list .icon { color: var(--yellow); font-size: 1rem; margin-top: 0.1rem; flex-shrink: 0; background: var(--blue); width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; }\r\n  .diff-list .text strong { display: block; font-weight: 600; font-size: 0.9rem; color: var(--text-dark); margin-bottom: 0.2rem; }\r\n  .diff-list .text span { font-size: 0.8rem; color: var(--text-muted); }\r\n\r\n  \/* \u2500\u2500 COURSES \u2500\u2500 *\/\r\n  .courses { padding: 6rem 5%; background: var(--blue); }\r\n  .courses-inner { max-width: 1200px; margin: 0 auto; }\r\n  .courses-header { text-align: center; margin-bottom: 4rem; }\r\n  .courses-header .section-tag { color: var(--yellow); justify-content: center; }\r\n  .courses-header .section-tag .tag-line { background: var(--yellow); }\r\n  .courses-header .section-title { color: var(--white); }\r\n  .courses-header .section-title .accent { color: var(--yellow); }\r\n  .courses-header .section-desc { color: rgba(255,255,255,0.65); margin: 0 auto; }\r\n  .courses-header .divider-line { background: var(--yellow); }\r\n\r\n  .courses-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1.2rem; }\r\n\r\n  .course-pill {\r\n    background: rgba(255,255,255,0.05); border: 1.5px solid rgba(255,255,255,0.12);\r\n    border-radius: 16px; padding: 2rem 1.5rem; text-align: center;\r\n    transition: transform 0.3s, background 0.3s, border-color 0.3s;\r\n    cursor: default; position: relative; overflow: hidden;\r\n  }\r\n  .course-pill::before {\r\n    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;\r\n    background: var(--yellow); transform: scaleX(0); transform-origin: left;\r\n    transition: transform 0.35s;\r\n  }\r\n  .course-pill:hover { transform: translateY(-6px); background: rgba(242,176,7,0.08); border-color: rgba(242,176,7,0.4); }\r\n  .course-pill:hover::before { transform: scaleX(1); }\r\n  .course-pill .cp-icon { font-size: 2.2rem; margin-bottom: 0.9rem; display: block; }\r\n  .course-pill h4 { font-family: 'Playfair Display', serif; font-size: 1rem; font-weight: 700; color: var(--yellow); margin-bottom: 0.45rem; }\r\n  .course-pill p { font-size: 0.78rem; color: rgba(255,255,255,0.5); line-height: 1.5; }\r\n\r\n  \/* \u2500\u2500 MISSION BANNER \u2500\u2500 *\/\r\n  .mission {\r\n    padding: 5.5rem 5%;\r\n    background: var(--yellow);\r\n    position: relative; overflow: hidden;\r\n  }\r\n  .mission-dots {\r\n    position: absolute; inset: 0; opacity: 0.08;\r\n    background-image: radial-gradient(var(--blue) 1px, transparent 1px);\r\n    background-size: 24px 24px;\r\n  }\r\n  .mission-inner { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; text-align: center; }\r\n  .mission-inner .section-tag { color: var(--blue); justify-content: center; }\r\n  .mission-inner .section-tag .tag-line { background: var(--blue); }\r\n  .mission-inner blockquote {\r\n    font-family: 'Playfair Display', serif;\r\n    font-size: clamp(1.3rem, 2.8vw, 2rem);\r\n    font-style: italic; line-height: 1.6; color: var(--blue-dark); margin: 1.5rem 0;\r\n  }\r\n  .mission-inner blockquote span { text-decoration: underline; text-decoration-color: var(--blue); text-decoration-thickness: 2px; }\r\n  .mission-inner cite { font-size: 0.85rem; color: rgba(0,34,102,0.65); font-style: normal; }\r\n  .mission-inner .btn-primary { margin-top: 2rem; display: inline-flex; background: var(--blue); color: var(--white); box-shadow: 0 6px 24px rgba(0,58,140,0.35); }\r\n  .mission-inner .btn-primary:hover { background: var(--blue-mid); }\r\n\r\n  \/* \u2500\u2500 LOCATIONS \u2500\u2500 *\/\r\n  .locations { padding: 6rem 5%; background: var(--off-white); }\r\n  .locations-inner { max-width: 1200px; margin: 0 auto; }\r\n  .locations-header { text-align: center; margin-bottom: 4rem; }\r\n  .locations-header .section-tag { justify-content: center; }\r\n\r\n  .loc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; }\r\n\r\n  .loc-card {\r\n    background: var(--white); border: 1.5px solid var(--border);\r\n    border-radius: 18px; overflow: hidden;\r\n    transition: transform 0.3s, box-shadow 0.3s;\r\n  }\r\n  .loc-card:hover { transform: translateY(-5px); box-shadow: 0 16px 48px rgba(0,58,140,0.12); }\r\n  .loc-img { height: 190px; overflow: hidden; position: relative; }\r\n  .loc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; filter: brightness(0.85) saturate(0.9); }\r\n  .loc-card:hover .loc-img img { transform: scale(1.06); }\r\n  .loc-img-label {\r\n    position: absolute; top: 1rem; left: 1rem;\r\n    background: var(--yellow); color: var(--blue-dark);\r\n    font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;\r\n    padding: 0.3rem 0.75rem; border-radius: 50px;\r\n  }\r\n  .loc-body { padding: 1.5rem; }\r\n  .loc-body h3 { font-family: 'Playfair Display', serif; font-size: 1.15rem; color: var(--blue); font-weight: 700; margin-bottom: 0.5rem; }\r\n  .loc-body p { font-size: 0.85rem; color: var(--text-muted); display: flex; align-items: center; gap: 0.5rem; }\r\n  .loc-body p i { color: var(--yellow); }\r\n\r\n  \/* \u2500\u2500 CONTACT \u2500\u2500 *\/\r\n  .contact { padding: 6rem 5%; background: var(--white); }\r\n  .contact-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.15fr; gap: 5rem; align-items: start; }\r\n\r\n  .contact-info { padding-top: 0.5rem; }\r\n  .contact-info h2 { font-family: 'Playfair Display', serif; font-size: clamp(1.8rem, 3.5vw, 2.6rem); font-weight: 900; color: var(--text-dark); margin-bottom: 1rem; line-height: 1.15; }\r\n  .contact-info h2 .accent { color: var(--blue); }\r\n  .contact-info p { color: var(--text-muted); line-height: 1.8; margin-bottom: 2rem; font-size: 0.95rem; }\r\n\r\n  .contact-items { display: flex; flex-direction: column; gap: 0.9rem; }\r\n  .contact-item {\r\n    display: flex; align-items: center; gap: 1rem;\r\n    padding: 0.9rem 1.1rem; border-radius: 12px;\r\n    background: var(--off-white); border: 1.5px solid var(--border);\r\n    transition: border-color 0.3s;\r\n  }\r\n  .contact-item:hover { border-color: var(--yellow); }\r\n  .ci-icon {\r\n    width: 40px; height: 40px; border-radius: 10px;\r\n    background: var(--blue); display: flex; align-items: center; justify-content: center;\r\n    color: var(--yellow); flex-shrink: 0; font-size: 0.9rem;\r\n  }\r\n  .ci-text strong { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 0.15rem; }\r\n  .ci-text span { font-size: 0.88rem; color: var(--text-dark); font-weight: 500; }\r\n\r\n  \/* Form *\/\r\n  .form-card {\r\n    background: var(--white); border: 2px solid var(--blue-pale);\r\n    border-radius: 22px; padding: 2.5rem;\r\n    box-shadow: 0 20px 60px rgba(0,58,140,0.1);\r\n    position: relative; overflow: hidden;\r\n  }\r\n  .form-card::before {\r\n    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px;\r\n    background: linear-gradient(90deg, var(--blue), var(--yellow), var(--blue));\r\n  }\r\n\r\n  .form-title { font-family: 'Playfair Display', serif; font-size: 1.45rem; font-weight: 700; color: var(--text-dark); margin-bottom: 0.3rem; margin-top: 0.5rem; }\r\n  .form-sub { font-size: 0.84rem; color: var(--text-muted); margin-bottom: 1.8rem; }\r\n\r\n  .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }\r\n  .form-group { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1rem; }\r\n  .form-group label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); font-weight: 600; }\r\n  .form-group input, .form-group select, .form-group textarea {\r\n    background: var(--off-white); border: 1.5px solid var(--border);\r\n    border-radius: 9px; padding: 0.78rem 1rem; color: var(--text-dark);\r\n    font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.9rem;\r\n    transition: border-color 0.3s, background 0.3s; outline: none; width: 100%;\r\n  }\r\n  .form-group input::placeholder, .form-group textarea::placeholder { color: #b0bdd0; }\r\n  .form-group select { cursor: pointer; }\r\n  .form-group select option { background: var(--white); color: var(--text-dark); }\r\n  .form-group input:focus, .form-group select:focus, .form-group textarea:focus {\r\n    border-color: var(--blue); background: var(--white);\r\n    box-shadow: 0 0 0 3px rgba(0,58,140,0.1);\r\n  }\r\n  .form-group textarea { resize: vertical; min-height: 90px; }\r\n\r\n  .form-submit {\r\n    width: 100%; padding: 1rem; border: none; border-radius: 11px;\r\n    background: var(--blue); color: var(--white);\r\n    font-weight: 700; font-size: 1rem; cursor: pointer; letter-spacing: 0.03em;\r\n    transition: background 0.25s, transform 0.25s, box-shadow 0.25s;\r\n    box-shadow: 0 6px 20px rgba(0,58,140,0.3);\r\n    display: flex; align-items: center; justify-content: center; gap: 0.5rem;\r\n    font-family: 'Plus Jakarta Sans', sans-serif;\r\n  }\r\n  .form-submit:hover { background: var(--blue-mid); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,58,140,0.4); }\r\n  .form-submit.success { background: #16a34a; box-shadow: 0 6px 20px rgba(22,163,74,0.35); }\r\n\r\n  .form-note { font-size: 0.74rem; color: var(--text-muted); text-align: center; margin-top: 0.8rem; }\r\n\r\n  \/* \u2500\u2500 FOOTER \u2500\u2500 *\/\r\n  footer { padding: 3.5rem 5% 2rem; background: var(--blue-dark); }\r\n  .footer-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 3rem; margin-bottom: 2.5rem; }\r\n\r\n  .footer-brand p { color: rgba(255,255,255,0.5); font-size: 0.84rem; line-height: 1.75; margin-top: 1rem; max-width: 280px; }\r\n\r\n  .footer-col h4 { color: var(--yellow); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; margin-bottom: 1rem; }\r\n  .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 0.55rem; }\r\n  .footer-col ul li a { color: rgba(255,255,255,0.55); text-decoration: none; font-size: 0.84rem; transition: color 0.3s; }\r\n  .footer-col ul li a:hover { color: var(--yellow); }\r\n\r\n  .footer-bottom {\r\n    border-top: 1px solid rgba(255,255,255,0.08); padding-top: 1.5rem;\r\n    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;\r\n    max-width: 1200px; margin: 0 auto;\r\n  }\r\n  .footer-bottom p { font-size: 0.76rem; color: rgba(255,255,255,0.35); }\r\n\r\n  .social-links { display: flex; gap: 0.65rem; margin-top: 1.2rem; }\r\n  .social-link {\r\n    width: 36px; height: 36px; border-radius: 9px;\r\n    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);\r\n    display: flex; align-items: center; justify-content: center;\r\n    color: rgba(255,255,255,0.5); font-size: 0.85rem;\r\n    transition: background 0.3s, color 0.3s; text-decoration: none;\r\n  }\r\n  .social-link:hover { background: var(--yellow); color: var(--blue-dark); border-color: var(--yellow); }\r\n\r\n  \/* Floating CTA *\/\r\n  .float-cta {\r\n    position: fixed; bottom: 1.8rem; right: 1.8rem; z-index: 900;\r\n    background: var(--yellow); color: var(--blue-dark);\r\n    border: none; border-radius: 50px; padding: 0.8rem 1.5rem;\r\n    font-weight: 700; font-size: 0.85rem; cursor: pointer;\r\n    display: flex; align-items: center; gap: 0.5rem;\r\n    box-shadow: 0 8px 28px rgba(242,176,7,0.5);\r\n    text-decoration: none; letter-spacing: 0.02em;\r\n    animation: floatBtn 3s ease-in-out infinite;\r\n  }\r\n  @keyframes floatBtn { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }\r\n\r\n  \/* Reveal *\/\r\n  .reveal { opacity: 0; transform: translateY(36px); transition: opacity 0.65s ease, transform 0.65s ease; }\r\n  .reveal.visible { opacity: 1; transform: translateY(0); }\r\n\r\n  \/* \u2500\u2500 RESPONSIVE \u2500\u2500 *\/\r\n  @media (max-width: 960px) {\r\n    .different-inner { grid-template-columns: 1fr; gap: 3rem; }\r\n    .diff-img-wrap { aspect-ratio: 16\/8; }\r\n    .contact-inner { grid-template-columns: 1fr; gap: 3rem; }\r\n    .footer-inner { grid-template-columns: 1fr 1fr; gap: 2rem; }\r\n    nav .nav-links { display: none; }\r\n  }\r\n  @media (max-width: 600px) {\r\n    .form-row { grid-template-columns: 1fr; }\r\n    .footer-inner { grid-template-columns: 1fr; }\r\n    .hero-stats { gap: 1.5rem; }\r\n    .float-cta .cta-text { display: none; }\r\n    .ticker-wrap { display: none; }\r\n    nav { top: 0; }\r\n  }\r\n<\/style>\r\n \r\n\r\n<!-- Floating CTA -->\r\n<a href=\"#apply\" class=\"float-cta\">\r\n  <i class=\"fas fa-pen-to-square\"><\/i>\r\n  <span class=\"cta-text\">Apply Now<\/span>\r\n<\/a>\r\n\r\n<!-- TICKER -->\r\n<div class=\"ticker-wrap\">\r\n  <div class=\"ticker\">\r\n    <span>\ud83c\udfdb\ufe0f Admissions 2026\u201327 Now Open<\/span><span class=\"ticker-sep\"> &nbsp;\u2726&nbsp; <\/span>\r\n    <span>\ud83c\udfaf Expert CLAT Preparation<\/span><span class=\"ticker-sep\"> &nbsp;\u2726&nbsp; <\/span>\r\n    <span>\ud83c\udfc6 Top NLU Results<\/span><span class=\"ticker-sep\"> &nbsp;\u2726&nbsp; <\/span>\r\n    <span>\ud83d\udccd Kompally | Himayat Nagar | Ashok Nagar<\/span><span class=\"ticker-sep\"> &nbsp;\u2726&nbsp; <\/span>\r\n    <span>\ud83c\udfdb\ufe0f Admissions 2026\u201327 Now Open<\/span><span class=\"ticker-sep\"> &nbsp;\u2726&nbsp; <\/span>\r\n    <span>\ud83c\udfaf Expert CLAT Preparation<\/span><span class=\"ticker-sep\"> &nbsp;\u2726&nbsp; <\/span>\r\n    <span>\ud83c\udfc6 Top NLU Results<\/span><span class=\"ticker-sep\"> &nbsp;\u2726&nbsp; <\/span>\r\n    <span>\ud83d\udccd Kompally | Himayat Nagar | Ashok Nagar<\/span><span class=\"ticker-sep\"> &nbsp;\u2726&nbsp; <\/span>\r\n  <\/div>\r\n<\/div>\r\n\r\n<!-- NAV -->\r\n<nav id=\"mainNav\">\r\n  <a href=\"#\" class=\"nav-brand\">\r\n    <img decoding=\"async\" src=\"\/mnt\/user-data\/uploads\/kompass-new-logo.png\" alt=\"Kompass Junior College\" class=\"nav-logo\">\r\n  <\/a>\r\n  <ul class=\"nav-links\">\r\n    <li><a href=\"#why\">Why Us<\/a><\/li>\r\n    <li><a href=\"#different\">Approach<\/a><\/li>\r\n    <li><a href=\"#courses\">Courses<\/a><\/li>\r\n    <li><a href=\"#locations\">Locations<\/a><\/li>\r\n    <li><a href=\"#apply\">Contact<\/a><\/li>\r\n  <\/ul>\r\n  <a href=\"#apply\" class=\"nav-cta\">Enroll Now<\/a>\r\n<\/nav>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n     HERO\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<section class=\"hero\" id=\"home\">\r\n  <div class=\"hero-pattern\">\r\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"100%\" height=\"100%\">\r\n      <defs>\r\n        <pattern id=\"grid\" x=\"0\" y=\"0\" width=\"60\" height=\"60\" patternUnits=\"userSpaceOnUse\">\r\n          <path d=\"M 60 0 L 0 0 0 60\" fill=\"none\" stroke=\"#ffffff\" stroke-width=\"0.5\"\/>\r\n        <\/pattern>\r\n      <\/defs>\r\n      <rect width=\"100%\" height=\"100%\" fill=\"url(#grid)\"\/>\r\n    <\/svg>\r\n  <\/div>\r\n  <div class=\"hero-accent\"><\/div>\r\n  <div class=\"hero-accent-2\"><\/div>\r\n\r\n  <div style=\"position:relative;z-index:1;margin-bottom:1.5rem;animation:fadeUp 0.7s 0.1s ease both;\">\r\n    <img decoding=\"async\" src=\"\/mnt\/user-data\/uploads\/kompass-new-logo.png\" alt=\"Kompass Junior College\" style=\"height:64px;width:auto;filter:brightness(0) invert(1);opacity:0.92;\">\r\n  <\/div>\r\n\r\n  <div class=\"hero-badge\">\r\n    <span class=\"badge-dot\"><\/span>\r\n    Admissions 2026\u201327 Now Open\r\n  <\/div>\r\n\r\n  <h1>Your Gateway to<br><span class=\"accent\">Top National Law<br>Universities<\/span><\/h1>\r\n\r\n  <p class=\"hero-subtitle\">\r\n    Kompass Junior College, powered by La Excellence, combines expert faculty, structured CLAT preparation, and personalized mentoring to help you secure a seat at India's most prestigious NLUs.\r\n  <\/p>\r\n\r\n  <div class=\"hero-actions\">\r\n    <a href=\"#apply\" class=\"btn-primary\">\r\n      <i class=\"fas fa-rocket\"><\/i> Apply for 2026\u201327\r\n    <\/a>\r\n    <a href=\"#why\" class=\"btn-outline\">\r\n      <i class=\"fas fa-play-circle\"><\/i> Discover More\r\n    <\/a>\r\n  <\/div>\r\n\r\n  <div class=\"hero-stats\">\r\n    <div class=\"stat\">\r\n      <div class=\"stat-num\" data-target=\"500\" data-suffix=\"+\">0<\/div>\r\n      <div class=\"stat-label\">Students Mentored<\/div>\r\n    <\/div>\r\n    <div class=\"stat\">\r\n      <div class=\"stat-num\" data-target=\"95\" data-suffix=\"%\">0<\/div>\r\n      <div class=\"stat-label\">NLU Selection Rate<\/div>\r\n    <\/div>\r\n    <div class=\"stat\">\r\n      <div class=\"stat-num\" data-target=\"22\" data-suffix=\"+\">0<\/div>\r\n      <div class=\"stat-label\">Expert Faculty<\/div>\r\n    <\/div>\r\n    <div class=\"stat\">\r\n      <div class=\"stat-num\" data-target=\"3\" data-suffix=\"\">0<\/div>\r\n      <div class=\"stat-label\">Centers in Hyderabad<\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n     WHY CHOOSE US\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<section class=\"why\" id=\"why\">\r\n  <div class=\"why-inner\">\r\n    <div class=\"why-header reveal\">\r\n      <div class=\"section-tag\"><span class=\"tag-line\"><\/span>Why Choose Us<span class=\"tag-line\"><\/span><\/div>\r\n      <h2 class=\"section-title\">Built to Produce <span class=\"accent\">Top CLAT Rankers<\/span><\/h2>\r\n      <div class=\"divider-line\"><\/div>\r\n      <p class=\"section-desc\" style=\"margin:1.2rem auto 0\">Everything we do is designed around one goal \u2014 your success in CLAT and a seat at a prestigious NLU.<\/p>\r\n    <\/div>\r\n    <div class=\"cards-grid\">\r\n      <div class=\"card reveal\">\r\n        <div class=\"card-icon\"><i class=\"fas fa-chalkboard-teacher\"><\/i><\/div>\r\n        <h3>Expert Faculty<\/h3>\r\n        <p>Specialized educators with deep experience in law entrance coaching who know exactly what CLAT demands from every student.<\/p>\r\n      <\/div>\r\n      <div class=\"card reveal\">\r\n        <div class=\"card-icon\"><i class=\"fas fa-brain\"><\/i><\/div>\r\n        <h3>Concept + Exam-Oriented<\/h3>\r\n        <p>We blend deep conceptual understanding with exam-focused strategies for maximum results in every section of CLAT.<\/p>\r\n      <\/div>\r\n      <div class=\"card reveal\">\r\n        <div class=\"card-icon\"><i class=\"fas fa-calendar-check\"><\/i><\/div>\r\n        <h3>Daily Practice & Grand Tests<\/h3>\r\n        <p>Daily problem sets and weekly All India Grand Tests build the exam confidence and time management skills you need.<\/p>\r\n      <\/div>\r\n      <div class=\"card reveal\">\r\n        <div class=\"card-icon\"><i class=\"fas fa-user-graduate\"><\/i><\/div>\r\n        <h3>Personalized Mentoring<\/h3>\r\n        <p>One-on-one doubt sessions and personalized support ensure no student is left behind in their preparation journey.<\/p>\r\n      <\/div>\r\n      <div class=\"card reveal\">\r\n        <div class=\"card-icon\"><i class=\"fas fa-university\"><\/i><\/div>\r\n        <h3>Focus on Top NLUs<\/h3>\r\n        <p>Targeted preparation for NLSIU, NALSAR, NUJS, and other premier National Law Universities across India.<\/p>\r\n      <\/div>\r\n      <div class=\"card reveal\">\r\n        <div class=\"card-icon\"><i class=\"fas fa-chart-line\"><\/i><\/div>\r\n        <h3>Proven Ranking System<\/h3>\r\n        <p>A time-tested methodology with performance tracking and data-driven improvements for every batch of students.<\/p>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n     WHAT MAKES US DIFFERENT\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<section class=\"different\" id=\"different\">\r\n  <div class=\"different-inner\">\r\n    <div class=\"diff-visual reveal\">\r\n      <div class=\"diff-img-wrap\">\r\n        <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1481627834876-b7833e8f5570?w=700&q=80\" alt=\"Students studying law\" loading=\"lazy\">\r\n        <div class=\"diff-badge-float\">\r\n          <div class=\"float-icon\">\u2696\ufe0f<\/div>\r\n          <div class=\"float-text\">\r\n            <strong>La Excellence Legacy<\/strong>\r\n            <span>Now under Kompass Junior College<\/span>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n      <div class=\"diff-sq\"><\/div>\r\n      <div class=\"diff-sq-2\"><\/div>\r\n    <\/div>\r\n\r\n    <div class=\"reveal\">\r\n      <div class=\"section-tag\"><span class=\"tag-line\"><\/span>Our Approach<\/div>\r\n      <h2 class=\"section-title\">What Makes Us <span class=\"accent\">Different<\/span><\/h2>\r\n      <p class=\"section-desc\">We go beyond textbooks to build well-rounded law aspirants ready for every challenge CLAT throws at them.<\/p>\r\n      <ul class=\"diff-list\">\r\n        <li>\r\n          <span class=\"icon\"><i class=\"fas fa-newspaper\"><\/i><\/span>\r\n          <div class=\"text\"><strong>Daily Newspaper Analysis<\/strong><span>Stay ahead in current affairs with guided editorial discussions every morning<\/span><\/div>\r\n        <\/li>\r\n        <li>\r\n          <span class=\"icon\"><i class=\"fas fa-gavel\"><\/i><\/span>\r\n          <div class=\"text\"><strong>Legal Aptitude Workshops<\/strong><span>Hands-on sessions to sharpen legal reasoning for real exam readiness<\/span><\/div>\r\n        <\/li>\r\n        <li>\r\n          <span class=\"icon\"><i class=\"fas fa-comments\"><\/i><\/span>\r\n          <div class=\"text\"><strong>Mock Interviews & Counseling<\/strong><span>Comprehensive career guidance and mock interview prep for NLU admissions<\/span><\/div>\r\n        <\/li>\r\n        <li>\r\n          <span class=\"icon\"><i class=\"fas fa-globe\"><\/i><\/span>\r\n          <div class=\"text\"><strong>All India Test Series<\/strong><span>Compete at a national level with real-time rankings and peer benchmarking<\/span><\/div>\r\n        <\/li>\r\n        <li>\r\n          <span class=\"icon\"><i class=\"fas fa-chart-bar\"><\/i><\/span>\r\n          <div class=\"text\"><strong>Performance Tracking System<\/strong><span>Individual dashboards and progress reports to monitor every student's growth<\/span><\/div>\r\n        <\/li>\r\n      <\/ul>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n     COURSES\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<section class=\"courses\" id=\"courses\">\r\n  <div class=\"courses-inner\">\r\n    <div class=\"courses-header reveal\">\r\n      <div class=\"section-tag\"><span class=\"tag-line\"><\/span>Complete Course Coverage<span class=\"tag-line\"><\/span><\/div>\r\n      <h2 class=\"section-title\">Master Every Section of <span class=\"accent\">CLAT<\/span><\/h2>\r\n      <div class=\"divider-line\"><\/div>\r\n      <p class=\"section-desc\" style=\"margin: 1.2rem auto 0\">Our structured program covers all five key sections with depth, practice, and exam strategy.<\/p>\r\n    <\/div>\r\n    <div class=\"courses-grid\">\r\n      <div class=\"course-pill reveal\">\r\n        <span class=\"cp-icon\">\ud83d\udcd6<\/span>\r\n        <h4>English Language<\/h4>\r\n        <p>Reading comprehension, grammar & vocabulary mastery<\/p>\r\n      <\/div>\r\n      <div class=\"course-pill reveal\">\r\n        <span class=\"cp-icon\">\ud83c\udf0d<\/span>\r\n        <h4>Current Affairs & GK<\/h4>\r\n        <p>Daily news analysis & general knowledge sessions<\/p>\r\n      <\/div>\r\n      <div class=\"course-pill reveal\">\r\n        <span class=\"cp-icon\">\u2696\ufe0f<\/span>\r\n        <h4>Legal Reasoning<\/h4>\r\n        <p>Principles, facts-based scenarios & legal aptitude<\/p>\r\n      <\/div>\r\n      <div class=\"course-pill reveal\">\r\n        <span class=\"cp-icon\">\ud83e\udde0<\/span>\r\n        <h4>Logical Reasoning<\/h4>\r\n        <p>Critical thinking & analytical problem solving<\/p>\r\n      <\/div>\r\n      <div class=\"course-pill reveal\">\r\n        <span class=\"cp-icon\">\ud83d\udd22<\/span>\r\n        <h4>Quantitative Techniques<\/h4>\r\n        <p>Basic maths & data interpretation skills<\/p>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n     MISSION BANNER\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<section class=\"mission\">\r\n  <div class=\"mission-dots\"><\/div>\r\n  <div class=\"mission-inner reveal\">\r\n    <div class=\"section-tag\"><span class=\"tag-line\"><\/span>Our Mission<span class=\"tag-line\"><\/span><\/div>\r\n    <blockquote>\r\n      \"To produce top CLAT rankers and help students secure seats in India's most prestigious <span>National Law Universities.<\/span>\"\r\n    <\/blockquote>\r\n    <cite>\u2014 Kompass Junior College | Powered by La Excellence<\/cite>\r\n    <br>\r\n    <a href=\"#apply\" class=\"btn-primary\">\r\n      <i class=\"fas fa-arrow-right\"><\/i> Start Your Journey\r\n    <\/a>\r\n  <\/div>\r\n<\/section>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n     LOCATIONS\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<section class=\"locations\" id=\"locations\">\r\n  <div class=\"locations-inner\">\r\n    <div class=\"locations-header reveal\">\r\n      <div class=\"section-tag\"><span class=\"tag-line\"><\/span>Find Us<span class=\"tag-line\"><\/span><\/div>\r\n      <h2 class=\"section-title\">Three Centers Across <span class=\"accent\">Hyderabad<\/span><\/h2>\r\n      <div class=\"divider-line\"><\/div>\r\n    <\/div>\r\n    <div class=\"loc-grid\">\r\n      <div class=\"loc-card reveal\">\r\n        <div class=\"loc-img\">\r\n          <span class=\"loc-img-label\">Center 1<\/span>\r\n          <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1524178232363-1fb2b075b655?w=500&q=80\" alt=\"Kompally Center\" loading=\"lazy\">\r\n        <\/div>\r\n        <div class=\"loc-body\">\r\n          <h3>Kompally<\/h3>\r\n          <p><i class=\"fas fa-map-marker-alt\"><\/i> Kompally, Hyderabad<\/p>\r\n        <\/div>\r\n      <\/div>\r\n      <div class=\"loc-card reveal\">\r\n        <div class=\"loc-img\">\r\n          <span class=\"loc-img-label\">Center 2<\/span>\r\n          <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1562774053-701939374585?w=500&q=80\" alt=\"Himayat Nagar Center\" loading=\"lazy\">\r\n        <\/div>\r\n        <div class=\"loc-body\">\r\n          <h3>Himayat Nagar<\/h3>\r\n          <p><i class=\"fas fa-map-marker-alt\"><\/i> Himayat Nagar, Hyderabad<\/p>\r\n        <\/div>\r\n      <\/div>\r\n      <div class=\"loc-card reveal\">\r\n        <div class=\"loc-img\">\r\n          <span class=\"loc-img-label\">Center 3<\/span>\r\n          <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1498243691581-b145c3f54a5a?w=500&q=80\" alt=\"Ashok Nagar Center\" loading=\"lazy\">\r\n        <\/div>\r\n        <div class=\"loc-body\">\r\n          <h3>Ashok Nagar<\/h3>\r\n          <p><i class=\"fas fa-map-marker-alt\"><\/i> Ashok Nagar, Hyderabad<\/p>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n     CONTACT \/ APPLY FORM\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<section class=\"contact\" id=\"apply\">\r\n  <div class=\"contact-inner\">\r\n    <div class=\"contact-info reveal\">\r\n      <div class=\"section-tag\"><span class=\"tag-line\"><\/span>Admissions Open<\/div>\r\n      <h2>Take the First Step<br>Toward Your <span class=\"accent\">Law Career<\/span><\/h2>\r\n      <p>Seats for 2026\u201327 are limited. Early enrollment means better preparation time, personalized attention, and a head start over the competition.<\/p>\r\n      <div class=\"contact-items\">\r\n        <div class=\"contact-item\">\r\n          <div class=\"ci-icon\"><i class=\"fas fa-map-marker-alt\"><\/i><\/div>\r\n          <div class=\"ci-text\">\r\n            <strong>Locations<\/strong>\r\n            <span>Kompally | Himayat Nagar | Ashok Nagar<\/span>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"contact-item\">\r\n          <div class=\"ci-icon\"><i class=\"fas fa-phone\"><\/i><\/div>\r\n          <div class=\"ci-text\">\r\n            <strong>Phone<\/strong>\r\n            <span>Call us to know more about admissions<\/span>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"contact-item\">\r\n          <div class=\"ci-icon\"><i class=\"fas fa-globe\"><\/i><\/div>\r\n          <div class=\"ci-text\">\r\n            <strong>Website<\/strong>\r\n            <span>Visit us online for more info<\/span>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"contact-item\">\r\n          <div class=\"ci-icon\"><i class=\"fas fa-clock\"><\/i><\/div>\r\n          <div class=\"ci-text\">\r\n            <strong>Office Hours<\/strong>\r\n            <span>Mon\u2013Sat: 9:00 AM \u2013 6:00 PM<\/span>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"form-card reveal\">\r\n      <div class=\"form-title\">Enroll for 2026\u201327 Batch<\/div>\r\n      <div class=\"form-sub\">Fill in your details \u2014 our counselor will reach out within 24 hours.<\/div>\r\n\r\n      <div class=\"form-row\">\r\n        <div class=\"form-group\">\r\n          <label>First Name<\/label>\r\n          <input type=\"text\" placeholder=\"Arjun\">\r\n        <\/div>\r\n        <div class=\"form-group\">\r\n          <label>Last Name<\/label>\r\n          <input type=\"text\" placeholder=\"Sharma\">\r\n        <\/div>\r\n      <\/div>\r\n      <div class=\"form-row\">\r\n        <div class=\"form-group\">\r\n          <label>Phone Number<\/label>\r\n          <input type=\"tel\" placeholder=\"+91 9XXXXXXXXX\">\r\n        <\/div>\r\n        <div class=\"form-group\">\r\n          <label>Email Address<\/label>\r\n          <input type=\"email\" placeholder=\"you@email.com\">\r\n        <\/div>\r\n      <\/div>\r\n      <div class=\"form-row\">\r\n        <div class=\"form-group\">\r\n          <label>Current Class<\/label>\r\n          <select>\r\n            <option value=\"\">Select Class<\/option>\r\n            <option>Class 11<\/option>\r\n            <option>Class 12<\/option>\r\n            <option>Passed 12th<\/option>\r\n          <\/select>\r\n        <\/div>\r\n        <div class=\"form-group\">\r\n          <label>Preferred Center<\/label>\r\n          <select>\r\n            <option value=\"\">Select Location<\/option>\r\n            <option>Kompally<\/option>\r\n            <option>Himayat Nagar<\/option>\r\n            <option>Ashok Nagar<\/option>\r\n          <\/select>\r\n        <\/div>\r\n      <\/div>\r\n      <div class=\"form-group\">\r\n        <label>Target NLU (Optional)<\/label>\r\n        <select>\r\n          <option value=\"\">Which NLU is your dream?<\/option>\r\n          <option>NLSIU Bangalore<\/option>\r\n          <option>NALSAR Hyderabad<\/option>\r\n          <option>NUJS Kolkata<\/option>\r\n          <option>NLU Delhi<\/option>\r\n          <option>Any Top NLU<\/option>\r\n        <\/select>\r\n      <\/div>\r\n      <div class=\"form-group\">\r\n        <label>Message<\/label>\r\n        <textarea placeholder=\"Tell us anything you'd like us to know about your preparation or queries...\"><\/textarea>\r\n      <\/div>\r\n\r\n      <button class=\"form-submit\" type=\"button\" id=\"submitBtn\">\r\n        <i class=\"fas fa-paper-plane\"><\/i> Submit Enrollment Request\r\n      <\/button>\r\n      <p class=\"form-note\">\ud83d\udd12 Your information is confidential. We'll never share your details.<\/p>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n     FOOTER\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<footer>\r\n  <div class=\"footer-inner\">\r\n    <div class=\"footer-brand\">\r\n      <div style=\"display:flex;align-items:center;gap:0.75rem\">\r\n        <img decoding=\"async\" src=\"\/mnt\/user-data\/uploads\/kompass-new-logo.png\" alt=\"Kompass Junior College\" style=\"height:40px;width:auto;filter:brightness(0) invert(1);\">\r\n      <\/div>\r\n      <p>Your gateway to top National Law Universities. Expert CLAT coaching in Hyderabad with proven results and dedicated mentoring.<\/p>\r\n      <div class=\"social-links\">\r\n        <a href=\"#\" class=\"social-link\"><i class=\"fab fa-instagram\"><\/i><\/a>\r\n        <a href=\"#\" class=\"social-link\"><i class=\"fab fa-facebook-f\"><\/i><\/a>\r\n        <a href=\"#\" class=\"social-link\"><i class=\"fab fa-youtube\"><\/i><\/a>\r\n        <a href=\"#\" class=\"social-link\"><i class=\"fab fa-whatsapp\"><\/i><\/a>\r\n      <\/div>\r\n    <\/div>\r\n    <div class=\"footer-col\">\r\n      <h4>Quick Links<\/h4>\r\n      <ul>\r\n        <li><a href=\"#why\">Why Choose Us<\/a><\/li>\r\n        <li><a href=\"#different\">Our Approach<\/a><\/li>\r\n        <li><a href=\"#courses\">Course Coverage<\/a><\/li>\r\n        <li><a href=\"#locations\">Our Centers<\/a><\/li>\r\n        <li><a href=\"#apply\">Apply Now<\/a><\/li>\r\n      <\/ul>\r\n    <\/div>\r\n    <div class=\"footer-col\">\r\n      <h4>Courses<\/h4>\r\n      <ul>\r\n        <li><a href=\"#\">English Language<\/a><\/li>\r\n        <li><a href=\"#\">Current Affairs<\/a><\/li>\r\n        <li><a href=\"#\">Legal Reasoning<\/a><\/li>\r\n        <li><a href=\"#\">Logical Reasoning<\/a><\/li>\r\n        <li><a href=\"#\">Quantitative Techniques<\/a><\/li>\r\n      <\/ul>\r\n    <\/div>\r\n  <\/div>\r\n  <div class=\"footer-bottom\">\r\n    <p>\u00a9 2026 Kompass Junior College. All rights reserved. Powered by La Excellence.<\/p>\r\n    <p>Designed for CLAT Aspirants of India \ud83c\uddee\ud83c\uddf3<\/p>\r\n  <\/div>\r\n<\/footer>\r\n\r\n<script>\r\n  \/* \u2500\u2500 Scroll Reveal \u2500\u2500 *\/\r\n  const reveals = document.querySelectorAll('.reveal');\r\n  const revealObs = new IntersectionObserver((entries) => {\r\n    entries.forEach((entry, i) => {\r\n      if (entry.isIntersecting) {\r\n        setTimeout(() => entry.target.classList.add('visible'), i * 80);\r\n        revealObs.unobserve(entry.target);\r\n      }\r\n    });\r\n  }, { threshold: 0.1, rootMargin: '0px 0px -50px 0px' });\r\n  reveals.forEach(el => revealObs.observe(el));\r\n\r\n  \/* \u2500\u2500 Nav shrink on scroll \u2500\u2500 *\/\r\n  const nav = document.getElementById('mainNav');\r\n  window.addEventListener('scroll', () => {\r\n    if (window.scrollY > 60) {\r\n      nav.style.boxShadow = '0 4px 30px rgba(0,34,102,0.25)';\r\n    } else {\r\n      nav.style.boxShadow = '0 2px 24px rgba(0,58,140,0.18)';\r\n    }\r\n  });\r\n\r\n  \/* \u2500\u2500 Counter animation \u2500\u2500 *\/\r\n  function animateCount(el, target, suffix) {\r\n    let start = 0;\r\n    const duration = 1800;\r\n    const step = target \/ (duration \/ 16);\r\n    const timer = setInterval(() => {\r\n      start += step;\r\n      if (start >= target) { el.textContent = target + suffix; clearInterval(timer); return; }\r\n      el.textContent = Math.floor(start) + suffix;\r\n    }, 16);\r\n  }\r\n\r\n  const statsObs = new IntersectionObserver((entries) => {\r\n    entries.forEach(entry => {\r\n      if (entry.isIntersecting) {\r\n        document.querySelectorAll('.stat-num').forEach(el => {\r\n          animateCount(el, parseInt(el.dataset.target), el.dataset.suffix);\r\n        });\r\n        statsObs.disconnect();\r\n      }\r\n    });\r\n  }, { threshold: 0.5 });\r\n  const statsEl = document.querySelector('.hero-stats');\r\n  if (statsEl) statsObs.observe(statsEl);\r\n\r\n  \/* \u2500\u2500 Form Submit \u2500\u2500 *\/\r\n  document.getElementById('submitBtn').addEventListener('click', function() {\r\n    this.innerHTML = '<i class=\"fas fa-spinner fa-spin\"><\/i> Submitting...';\r\n    this.disabled = true;\r\n    setTimeout(() => {\r\n      this.innerHTML = '<i class=\"fas fa-check-circle\"><\/i> Enrollment Request Sent!';\r\n      this.classList.add('success');\r\n    }, 1500);\r\n  });\r\n<\/script>\r\n \r\n<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t\n    <div class=\"xs_social_share_widget xs_share_url after_content \t\tmain_content  wslu-style-1 wslu-share-box-shaped wslu-fill-colored wslu-none wslu-share-horizontal wslu-theme-font-no wslu-main_content\">\n\n\t\t\n        <ul>\n\t\t\t        <\/ul>\n    <\/div> \n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"_coblocks_attr":"","_coblocks_dimensions":"","_coblocks_responsive_height":"","_coblocks_accordion_ie_support":"","content-type":"","postBodyCss":"","postBodyMargin":[],"postBodyPadding":[],"postBodyBackground":{"backgroundType":"classic","gradient":""},"hide_page_title":"","footnotes":""},"class_list":["post-1755","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/kompassjuniorcollege.edu.in\/lp\/wp-json\/wp\/v2\/pages\/1755","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kompassjuniorcollege.edu.in\/lp\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/kompassjuniorcollege.edu.in\/lp\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/kompassjuniorcollege.edu.in\/lp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kompassjuniorcollege.edu.in\/lp\/wp-json\/wp\/v2\/comments?post=1755"}],"version-history":[{"count":68,"href":"https:\/\/kompassjuniorcollege.edu.in\/lp\/wp-json\/wp\/v2\/pages\/1755\/revisions"}],"predecessor-version":[{"id":1832,"href":"https:\/\/kompassjuniorcollege.edu.in\/lp\/wp-json\/wp\/v2\/pages\/1755\/revisions\/1832"}],"wp:attachment":[{"href":"https:\/\/kompassjuniorcollege.edu.in\/lp\/wp-json\/wp\/v2\/media?parent=1755"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}