/*
    File: styles/index.css
    Purpose: Styles for the landing (index) page hero and form layout.
*/

.main-section {
    padding: 90px 60px 60px;
    background: #f4f6fb;
    flex: 1; 
}

/* Layout: two-column hero */
.hero-wrapper {
    max-width: 1200px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
}

/* Column: left content (branding) */
.left-content {
    flex: 1;
    text-align: center;
}

 
/* Circle Logo with Yellow Border */



/* ===== PERFECT DOUBLE RING CIRCLE ===== */

.hero-circle {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    
    background: #e5e7eb;      /* light grey outer ring */
    padding: 10px;            /* gap between rings */

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0 auto 30px;
    box-shadow: 0 15px 35px rgba(215, 223, 58, 0.15);
    animation: shakeLogo 3s infinite ease-in-out;
}

.hero-circle img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;

    border: 6px solid #111c44;   /* thick white inner ring */
}


.left-content h1 {
    font-size: 42px;
    font-weight: 700;
    color:  #0b1f3a;
    margin-bottom: 10px;
    text-align: center;
}

.left-content h2 {
    font-size: 36px;
    font-weight: 700;
    color: #2563eb;
    margin-bottom: 10px;
    text-align: center;
}

/* Center All Text */
.left-content h1,
.left-content h2,
.left-content h3,
.left-content p {
    text-align: center;
}


.highlight {
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 15px;
}

.tagline {
    letter-spacing: 4px;
    font-size: 14px;
    color: #777;
}

/* Column: right content (registration form) */
.form-section {
    flex: 1;
    display: flex;
    justify-content: center;
}

.contact-form {
    width: 100%;
    max-width: 450px;
    background: #ffffff;
    padding: 40px;
    border-radius: 20px;
    background: transparent;  
    box-shadow: none;         
    padding: 20px;
    animation: fadeUp 1s ease forwards;
}

.form-title {
    font-weight: 700;
    margin-bottom: 25px;
    
    text-align: center;
}


.contact-form input,
.contact-form select,
.contact-form textarea {
    width: 100%;
    padding: 14px;
    margin-bottom: 18px;
    border-radius: 8px;
    border: 1px solid #ddd;
    font-size: 14px;
     background: #ffffff;
    border: 1px solid #ccc;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
    border-color: #2563eb;
    outline: none;
}

.contact-form button {
    width: 100%;
    padding: 14px;
    background:#111c44;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.4s ease;
}

.contact-form button:hover {
    transform: scale(1.05);
    background:#ffd60a;
    color:#111c44;
}

/* RESPONSIVE */
@media (max-width: 900px) {
    .hero-wrapper {
        flex-direction: column;
        text-align: center;
    }
.hero-circle {
    width: 220px;
    height: 220px;
}
    .form-section {
        width: 100%;
    }

    .left-content h1 {
        font-size: 32px;
    }

    .left-content h2 {
        font-size: 26px;
    }
}
 
/* Shake Animation */
@keyframes shakeLogo {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(2deg); }
    50% { transform: rotate(0deg); }
    75% { transform: rotate(-2deg); }
    100% { transform: rotate(0deg); }
}
 
/* Form Animation */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

 /* ===== FULL WIDTH MOBILE FIX ===== */
@media (max-width: 768px) {

    .main-section {
        padding: 40px 0;   /* remove left-right padding */
    }

    .hero-wrapper {
        padding: 0;
    }

    .form-section {
        width: 100%;
        padding: 0;
    }

    .contact-form {
        width: 100%;
        max-width: 100%;
        padding: 25px 15px;   /* small inner padding only */
        border-radius: 0;     /* optional: remove rounded corners */
    }

    .contact-form input,
    .contact-form select,
    .contact-form textarea,
    .contact-form button {
        width: 100%;
    }
}


/* =========================
ANNOUNCEMENT SECTION
========================= */
.announcement-header {
    margin: 20px 0;          /* top & bottom gap */
    text-align: center;      /* center align text */
}

.announcement-header h2 {
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 10px;     /* gap between heading & text */
}

.announcement-header p {
    font-size: 16px;
    color: #666;
}
.announcement{
padding:30px 40px;
background:#f4f6fb;
overflow:hidden;
}

/* =========================
SCROLL WRAPPER
========================= */
.scroll-wrapper{
width:100%;
overflow:hidden;
position:relative;
border-top:2px solid #0b1f3a;
border-bottom:2px solid #0b1f3a;
background:#fff;
}

/* =========================
SCROLL TRACK
========================= */
.scroll-track{
display:flex;
gap:50px;
white-space:nowrap;

/* RIGHT ➜ LEFT */
animation:scrollText 20s linear infinite;
}

/* PAUSE ON HOVER */
.scroll-wrapper:hover .scroll-track{
animation-play-state:paused;
}

/* =========================
TEXT ITEM
========================= */
.scroll-item{
display:flex;
align-items:center;
gap:10px;
font-size:15px;
color:#333;
padding:12px 0;
flex-shrink:0;
}

/* TITLE */
.announcement-text strong{
color:#2563eb;
}

/* DATE */
.announcement-date{
color:#888;
font-size:13px;
}

/* LINK */
.view-link{
color:#fff;
background:#2563eb;
padding:5px 10px;
border-radius:4px;
text-decoration:none;
font-size:13px;
transition:.3s;
}

.view-link:hover{
background:#0b1f3a;
}

/* =========================
ANIMATION
========================= */
@keyframes scrollText{
0%{
transform:translateX(100%);
}
100%{
transform:translateX(-100%);
}
}

/* =========================
MOBILE
========================= */
@media(max-width:768px){

.scroll-track{
animation:scrollText 15s linear infinite;
gap:30px;
}

.scroll-item{
font-size:14px;
}

}