/* ===================================== */
/* RESET */
/* ===================================== */

*{

margin:0;

padding:0;

box-sizing:border-box;

scroll-behavior:smooth;

}

html,
body{

width:100%;

overflow-x:hidden;

}

body{

font-family:'Segoe UI',sans-serif;

background:

linear-gradient(

135deg,

#020617,

#0f172a,

#1e293b

);

color:#ffffff;

line-height:1.8;

position:relative;

min-height:100vh;

}

/* ===================================== */
/* PREMIUM GALAXY BACKGROUND */
/* ===================================== */

.stars{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

z-index:0;

pointer-events:none;

overflow:hidden;

}

.stars::before{

content:"";

position:absolute;

width:100%;

height:100%;

background-image:

radial-gradient(circle,#ffffff 1.6px,transparent 1.6px),

radial-gradient(circle,#38bdf8 1.3px,transparent 1.3px),

radial-gradient(circle,#ffffff 2px,transparent 2px);

background-size:

120px 120px,

200px 200px,

300px 300px;

opacity:.45;

animation:starMove 80s linear infinite;

}

@keyframes starMove{

0%{

transform:translateY(0);

}

100%{

transform:translateY(-700px);

}

}

/* ===================================== */
/* GLOW EFFECT */
/* ===================================== */

body::after{

content:"";

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background:

radial-gradient(

circle at top,

rgba(56,189,248,.12),

transparent 70%

);

pointer-events:none;

z-index:0;

}

/* ===================================== */
/* LINKS */
/* ===================================== */

a{

text-decoration:none;

color:inherit;

transition:.3s;

}

img{

max-width:100%;

display:block;

}

/* அனைத்து Sections Stars-க்கு மேலே */

.navbar,
.hero,
section,
.job-details,
.footer{

position:relative;

z-index:2;

}
/* ===================================== */
/* PREMIUM NAVBAR */
/* ===================================== */

.navbar{

position:fixed;

top:0;

left:0;

width:100%;

padding:18px 28px;

display:flex;

justify-content:space-between;

align-items:center;

background:

rgba(2,6,23,.88);

backdrop-filter:blur(18px);

-webkit-backdrop-filter:blur(18px);

border-bottom:1px solid rgba(56,189,248,.20);

box-shadow:

0 0 25px rgba(56,189,248,.18);

z-index:9999;

transition:.35s;

}

/* ===================================== */
/* LOGO */
/* ===================================== */

.logo{

font-size:30px;

font-weight:700;

color:#38bdf8;

letter-spacing:1px;

text-shadow:

0 0 15px rgba(56,189,248,.8);

}

/* ===================================== */
/* NAV LINKS */
/* ===================================== */

.nav-links{

display:flex;

align-items:center;

gap:22px;

}

.nav-links a{

padding:10px 18px;

border-radius:10px;

font-size:16px;

font-weight:600;

transition:.35s;

}

.nav-links a:hover{

background:#38bdf8;

color:#000;

transform:translateY(-3px);

box-shadow:

0 0 20px rgba(56,189,248,.8);

}

/* ===================================== */
/* MENU BUTTON */
/* ===================================== */

.menu-btn{

display:none;

font-size:34px;

cursor:pointer;

color:#38bdf8;

}

/* ===================================== */
/* MOBILE MENU */
/* ===================================== */

@media(max-width:768px){

.menu-btn{

display:block;

}

.nav-links{

display:none;

position:absolute;

top:75px;

left:0;

width:100%;

background:#020617;

flex-direction:column;

padding:20px;

border-top:1px solid rgba(56,189,248,.25);

box-shadow:

0 10px 25px rgba(0,0,0,.4);

}

.nav-links.active{

display:flex;

}

.nav-links a{

width:100%;

text-align:center;

}

}
/* ===================================== */
/* PREMIUM HERO SECTION */
/* ===================================== */

.hero{

padding-top:150px;

padding-bottom:80px;

text-align:center;

max-width:1200px;

margin:auto;

}

/* ===================================== */
/* HERO LOGO */
/* ===================================== */

.hero-logo{

width:220px;

margin:auto;

margin-bottom:30px;

border-radius:50%;

border:4px solid #38bdf8;

box-shadow:

0 0 35px rgba(56,189,248,.8),

0 0 70px rgba(56,189,248,.45);

transition:.4s;

}

.hero-logo:hover{

transform:scale(1.06) rotate(3deg);

}

/* ===================================== */
/* HERO TITLE */
/* ===================================== */

.hero h1{

font-size:58px;

font-weight:700;

color:#38bdf8;

margin-bottom:18px;

text-shadow:

0 0 20px rgba(56,189,248,.9),

0 0 45px rgba(56,189,248,.55);

}

/* ===================================== */
/* HERO SUB TITLE */
/* ===================================== */

.hero h2{

font-size:30px;

font-weight:600;

margin-bottom:25px;

color:#ffffff;

}

/* ===================================== */
/* HERO DESCRIPTION */
/* ===================================== */

.hero p{

max-width:900px;

margin:auto;

font-size:21px;

line-height:1.9;

color:#cbd5e1;

}

/* ===================================== */
/* HERO STATS */
/* ===================================== */

.hero-stats{

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:18px;

margin-top:40px;

}

.hero-stats span{

padding:14px 22px;

border-radius:14px;

background:

rgba(15,23,42,.9);

border:1px solid #38bdf8;

font-weight:bold;

box-shadow:

0 0 18px rgba(56,189,248,.30);

transition:.35s;

}

.hero-stats span:hover{

transform:translateY(-6px);

box-shadow:

0 0 28px rgba(56,189,248,.8);

}

/* ===================================== */
/* HERO BUTTONS */
/* ===================================== */

.hero-buttons{

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:18px;

margin-top:40px;

}

.btn{

display:inline-block;

padding:15px 30px;

border-radius:12px;

font-size:17px;

font-weight:700;

transition:.35s;

}

.btn-primary{

background:#38bdf8;

color:#000;

}

.btn-home{

background:#22c55e;

color:#fff;

}

.btn:hover{

transform:translateY(-6px);

box-shadow:

0 0 28px rgba(56,189,248,.85);

}

/* ===================================== */
/* MOBILE HERO */
/* ===================================== */

@media(max-width:768px){

.hero{

padding-top:120px;

}

.hero-logo{

width:170px;

}

.hero h1{

font-size:38px;

}

.hero h2{

font-size:24px;

}

.hero p{

font-size:17px;

padding:0 15px;

}

.hero-buttons{

flex-direction:column;

align-items:center;

}

.btn{

width:90%;

text-align:center;

}

}
/* ===================================== */
/* JOB DETAILS */
/* ===================================== */

.job-details{

max-width:1200px;

margin:50px auto;

padding:35px;

background:

rgba(30,41,59,.92);

border-radius:25px;

border:1px solid rgba(56,189,248,.20);

box-shadow:

0 0 30px rgba(56,189,248,.20);

backdrop-filter:blur(15px);

}

/* ===================================== */
/* PAGE TITLE */
/* ===================================== */

.job-title{

font-size:46px;

text-align:center;

margin-bottom:35px;

color:#38bdf8;

text-shadow:

0 0 18px rgba(56,189,248,.8);

}

/* ===================================== */
/* HIGHLIGHT BOX */
/* ===================================== */

.highlight-box{

background:

linear-gradient(

135deg,

#0f172a,

#1e293b

);

padding:28px;

border-left:5px solid #38bdf8;

border-radius:18px;

margin-bottom:35px;

box-shadow:

0 0 20px rgba(56,189,248,.25);

}

.highlight-box p{

font-size:18px;

margin:14px 0;

color:#ffffff;

}

/* ===================================== */
/* SECTION TITLE */
/* ===================================== */

.section-title{

font-size:40px;

text-align:center;

margin-bottom:35px;

color:#38bdf8;

text-shadow:

0 0 18px rgba(56,189,248,.7);

}

/* ===================================== */
/* SECTION BOX */
/* ===================================== */

.section-box{

background:

linear-gradient(

135deg,

#0f172a,

#162033

);

padding:30px;

border-radius:20px;

margin-bottom:28px;

border:1px solid rgba(56,189,248,.18);

box-shadow:

0 0 22px rgba(56,189,248,.18);

transition:.35s;

}

.section-box:hover{

transform:translateY(-6px);

box-shadow:

0 0 35px rgba(56,189,248,.45);

}

.section-box h2{

font-size:30px;

color:#38bdf8;

margin-bottom:20px;

}

.section-box p{

font-size:18px;

line-height:1.9;

color:#dbeafe;

margin-bottom:18px;

}

.section-box ul,

.section-box ol{

padding-left:28px;

line-height:2;

}

.section-box li{

font-size:17px;

margin-bottom:12px;

color:#cbd5e1;

}

/* ===================================== */
/* RESPONSIVE */
/* ===================================== */

@media(max-width:768px){

.job-details{

padding:20px;

margin:25px 12px;

}

.job-title{

font-size:30px;

}

.section-title{

font-size:30px;

}

.section-box{

padding:22px;

}

.section-box h2{

font-size:24px;

}

.section-box p,

.section-box li{

font-size:16px;

}

}
/* ===================================== */
/* PREMIUM BUTTON GROUP */
/* ===================================== */

.button-group{

display:flex;

justify-content:center;

align-items:center;

flex-wrap:wrap;

gap:18px;

margin-top:40px;

}

.job-btn{

display:inline-block;

padding:15px 28px;

background:linear-gradient(
135deg,
#38bdf8,
#0ea5e9
);

color:#000;

font-size:17px;

font-weight:700;

border-radius:12px;

transition:.35s;

box-shadow:

0 8px 20px rgba(56,189,248,.35);

}

.job-btn:hover{

transform:translateY(-6px);

box-shadow:

0 0 30px rgba(56,189,248,.9);

}

.back-btn{

background:linear-gradient(
135deg,
#22c55e,
#16a34a
);

color:#fff;

}

/* ===================================== */
/* PREMIUM CARD GRID */
/* ===================================== */

.card-grid{

display:grid;

grid-template-columns:

repeat(auto-fit,minmax(300px,1fr));

gap:28px;

max-width:1250px;

margin:auto;

padding:20px;

}

/* ===================================== */
/* PREMIUM CARD */
/* ===================================== */

.card{

background:

linear-gradient(
145deg,
#0f172a,
#1e293b
);

padding:30px;

border-radius:22px;

border:1px solid rgba(56,189,248,.18);

box-shadow:

0 0 20px rgba(56,189,248,.20);

transition:.35s;

text-align:center;

overflow:hidden;

position:relative;

}

.card::before{

content:"";

position:absolute;

top:-60px;

right:-60px;

width:140px;

height:140px;

border-radius:50%;

background:

rgba(56,189,248,.08);

}

.card:hover{

transform:translateY(-8px);

box-shadow:

0 0 35px rgba(56,189,248,.7);

}

/* ===================================== */
/* CARD TITLE */
/* ===================================== */

.card h3{

font-size:25px;

color:#38bdf8;

margin-bottom:18px;

}

/* ===================================== */
/* CARD CONTENT */
/* ===================================== */

.card p{

font-size:17px;

line-height:1.9;

color:#cbd5e1;

margin-bottom:25px;

}

/* ===================================== */
/* CARD BUTTON */
/* ===================================== */

.learn-btn{

display:inline-block;

padding:13px 24px;

border-radius:12px;

background:#38bdf8;

color:#000;

font-weight:700;

transition:.35s;

}

.learn-btn:hover{

background:#ffffff;

transform:scale(1.06);

box-shadow:

0 0 25px rgba(56,189,248,.8);

}

/* ===================================== */
/* COMMUNITY SECTION */
/* ===================================== */

.community-section{

padding:70px 20px;

text-align:center;

}

.community-section p{

max-width:850px;

margin:20px auto 40px;

font-size:19px;

line-height:1.8;

color:#cbd5e1;

}

/* ===================================== */
/* RESPONSIVE */
/* ===================================== */

@media(max-width:768px){

.card-grid{

grid-template-columns:1fr;

padding:15px;

}

.card{

padding:24px;

}

.card h3{

font-size:22px;

}

.card p{

font-size:16px;

}

.job-btn{

width:90%;

text-align:center;

}

}
/* ===================================== */
/* GOOGLE TRANSLATE */
/* ===================================== */

.translate-section{

padding:70px 20px;

text-align:center;

}

.translate-box{

display:flex;

justify-content:center;

margin-top:30px;

}

#google_translate_element{

padding:20px 30px;

background:

linear-gradient(
135deg,
#0f172a,
#1e293b
);

border-radius:18px;

border:1px solid #38bdf8;

box-shadow:

0 0 25px rgba(56,189,248,.35);

}

.goog-te-combo{

padding:10px !important;

border-radius:8px !important;

border:1px solid #38bdf8 !important;

background:#0f172a !important;

color:#fff !important;

}

/* ===================================== */
/* PREMIUM FOOTER */
/* ===================================== */

.footer{

padding:80px 20px;

background:#020617;

border-top:2px solid #38bdf8;

text-align:center;

position:relative;

overflow:hidden;

}

.footer::before{

content:"";

position:absolute;

top:-150px;

left:50%;

transform:translateX(-50%);

width:600px;

height:600px;

background:

radial-gradient(

rgba(56,189,248,.18),

transparent 70%

);

pointer-events:none;

}

.footer h2{

font-size:42px;

color:#38bdf8;

margin-bottom:18px;

text-shadow:

0 0 18px #38bdf8,

0 0 40px rgba(56,189,248,.8);

}

.footer-tagline{

font-size:22px;

font-weight:600;

margin-bottom:35px;

color:#ffffff;

}

.footer-links{

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:15px;

margin:35px 0;

}

.footer-links span{

padding:10px 18px;

border-radius:30px;

background:#0f172a;

border:1px solid #38bdf8;

box-shadow:

0 0 15px rgba(56,189,248,.25);

}

.footer-contact{

margin:35px 0;

}

.footer-contact p{

margin:14px 0;

font-size:18px;

}

.footer-contact a{

color:#38bdf8;

font-weight:bold;

}

.footer-contact a:hover{

color:#ffffff;

}

/* ===================================== */
/* SOCIAL ICONS */
/* ===================================== */

.social-icons{

display:flex;

justify-content:center;

gap:22px;

flex-wrap:wrap;

margin:40px 0;

}

.social-icons a{

width:68px;

height:68px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

font-size:28px;

color:#fff;

transition:.35s;

box-shadow:

0 0 20px rgba(56,189,248,.35);

}

.social-icons a:hover{

transform:translateY(-8px) scale(1.12);

box-shadow:

0 0 35px rgba(56,189,248,.9);

}

.facebook{

background:#1877F2;

}

.youtube{

background:#FF0000;

}

.telegram{

background:#229ED9;

}

.whatsapp{

background:#25D366;

}

.instagram{

background:linear-gradient(

45deg,

#F58529,

#DD2A7B,

#8134AF,

#515BD4

);

}

/* ===================================== */
/* FOOTER DIVIDER */
/* ===================================== */

.footer-divider{

width:85%;

height:2px;

margin:35px auto;

background:#38bdf8;

box-shadow:

0 0 18px #38bdf8;

}

.footer-copy{

font-size:18px;

line-height:1.9;

color:#cbd5e1;

margin-top:15px;

}

/* ===================================== */
/* SCROLLBAR */
/* ===================================== */

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#020617;

}

::-webkit-scrollbar-thumb{

background:#38bdf8;

border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

background:#0ea5e9;

}

::selection{

background:#38bdf8;

color:#000;

}
.highlight-box p{

display:flex;

align-items:flex-start;

gap:8px;

margin:18px 0;

font-size:19px;

line-height:1.8;

}

.highlight-box b{

width:180px;

display:inline-block;

color:#ffffff;

}

.label-colon{

width:15px;

font-weight:bold;

color:#38bdf8;

text-align:center;

}

.label-value{

flex:1;

color:#cbd5e1;

}
.table-box{
    width:100%;
    overflow-x:auto;
    margin-top:25px;
}

.table-box table{
    width:100%;
    border-collapse:collapse;
    border-radius:15px;
    overflow:hidden;
}

.table-box th{
    background:#38bdf8;
    color:#000;
    padding:15px;
    text-align:center;
    font-size:17px;
    font-weight:bold;
}

.table-box td{
    padding:15px;
    border:1px solid rgba(255,255,255,.12);
    color:#fff;
    text-align:center;
    background:#1f2937;
}

.table-box tr:nth-child(even) td{
    background:#111827;
}

.table-box tr:hover td{
    background:#0f172a;
}