/* ==========================================
           REV YOU SCHOLARSHIPS
         LUXURY GOLD EDITION
========================================== */

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:'Poppins',sans-serif;

background:#08110B;

color:#ffffff;

overflow-x:hidden;

}


/* ==========================================
        GOLD VARIABLES
========================================== */

:root{

--gold:#D4AF37;

--gold-light:#F6D365;

--gold-dark:#9C7A16;

--glass:rgba(255,255,255,.05);

--glass-border:rgba(212,175,55,.15);

--white:#ffffff;

--text:#d8d8d8;

}


/* ==========================================
          HERO SECTION
========================================== */

.scholar-hero{

position:relative;

padding:170px 8% 120px;

text-align:center;

overflow:hidden;

background:

radial-gradient(circle at top,

rgba(212,175,55,.18),

transparent 55%),


linear-gradient(

180deg,

#08110B,

#0B120D,

#08110B);

}


/* ==========================================
        GOLD GLOW
========================================== */

.hero-glow{

position:absolute;

width:650px;

height:650px;

background:

radial-gradient(circle,

rgba(212,175,55,.22),

transparent 70%);

left:50%;

top:-300px;

transform:translateX(-50%);

filter:blur(50px);

animation:heroGlow 6s ease-in-out infinite;

}

@keyframes heroGlow{

50%{

transform:

translateX(-50%)

scale(1.12);

opacity:.9;

}

}


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

.scholar-hero h1{

font-size:72px;

font-weight:800;

margin-bottom:20px;

background:

linear-gradient(

135deg,

#ffffff,

#F6D365,

#D4AF37);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

animation:titleUp 1.2s ease;

}

@keyframes titleUp{

from{

opacity:0;

transform:translateY(60px);

}

to{

opacity:1;

transform:translateY(0);

}

}


/* ==========================================
        HERO TEXT
========================================== */

.scholar-hero p{

max-width:850px;

margin:auto;

font-size:19px;

line-height:1.9;

color:#d4d4d4;

animation:fadeUp 1.5s ease;

}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(30px);

}

to{

opacity:1;

transform:translateY(0);

}

}


/* ==========================================
        SEARCH
========================================== */

.search-section{

padding:40px 8%;

display:flex;

justify-content:center;

}

#searchBox{

width:100%;

max-width:720px;

padding:18px 28px;

border-radius:60px;

outline:none;

border:1px solid rgba(212,175,55,.25);

background:rgba(255,255,255,.04);

backdrop-filter:blur(18px);

color:white;

font-size:16px;

transition:.4s;

}

#searchBox::placeholder{

color:#bdbdbd;

}

#searchBox:focus{

border-color:var(--gold);

box-shadow:

0 0 25px rgba(212,175,55,.35);

}


/* ==========================================
        GRID
========================================== */

.scholarship-grid{

padding:80px 8%;

display:grid;

grid-template-columns:

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

gap:35px;

}
/* ==========================================
        SCHOLARSHIP CARD
========================================== */

.scholar-card{

position:relative;

overflow:hidden;

padding:35px;

border-radius:28px;

background:rgba(255,255,255,.045);

backdrop-filter:blur(20px);

border:1px solid rgba(212,175,55,.12);

transition:.45s cubic-bezier(.22,1,.36,1);

cursor:pointer;

box-shadow:

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

}


/* ==========================================
        TOP GOLD LINE
========================================== */

.gold-line{

position:absolute;

top:0;

left:0;

width:100%;

height:3px;

background:

linear-gradient(

90deg,

transparent,

#D4AF37,

#F6D365,

#D4AF37,

transparent);

opacity:.9;

}


/* ==========================================
        GOLD SHINE
========================================== */

.scholar-card::before{

content:"";

position:absolute;

top:-50%;

left:-120%;

width:70%;

height:220%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.15),

transparent);

transform:rotate(25deg);

transition:1s;

}

.scholar-card:hover::before{

left:180%;

}


/* ==========================================
        HOVER EFFECT
========================================== */

.scholar-card:hover{

transform:

translateY(-14px)

scale(1.02);

border-color:#D4AF37;

box-shadow:

0 0 25px rgba(212,175,55,.20),

0 20px 60px rgba(0,0,0,.45);

}


/* ==========================================
        ICON
========================================== */

.scholar-icon{

width:82px;

height:82px;

margin-bottom:25px;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

font-size:34px;

background:

linear-gradient(

135deg,

rgba(212,175,55,.18),

rgba(246,211,101,.08));

border:1px solid rgba(212,175,55,.25);

color:#F6D365;

transition:.4s;

}

.scholar-card:hover .scholar-icon{

transform:

rotate(8deg)

scale(1.08);

box-shadow:

0 0 25px rgba(212,175,55,.35);

}


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

.scholar-card h2{

font-size:28px;

font-weight:700;

margin-bottom:16px;

color:#ffffff;

line-height:1.4;

}


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

.scholar-card p{

font-size:15px;

line-height:1.9;

color:#d2d2d2;

margin-bottom:25px;

}


/* ==========================================
        INFO TAGS
========================================== */

.scholar-info{

display:flex;

flex-wrap:wrap;

gap:12px;

margin-bottom:30px;

}

.scholar-info span{

padding:10px 18px;

border-radius:50px;

background:rgba(212,175,55,.08);

border:1px solid rgba(212,175,55,.18);

color:#F6D365;

font-size:13px;

font-weight:600;

transition:.3s;

}

.scholar-card:hover .scholar-info span{

background:rgba(212,175,55,.12);

border-color:#D4AF37;

}


/* ==========================================
        APPLY BUTTON
========================================== */

.apply-btn{

display:inline-flex;

align-items:center;

justify-content:center;

width:100%;

padding:16px;

border-radius:60px;

text-decoration:none;

font-size:15px;

font-weight:700;

letter-spacing:.5px;

color:#08110B;

background:

linear-gradient(

135deg,

#F6D365,

#D4AF37);

transition:.35s;

position:relative;

overflow:hidden;

}

.apply-btn:hover{

transform:translateY(-3px);

box-shadow:

0 0 30px rgba(212,175,55,.45);

}


/* ==========================================
      BUTTON SHINE
========================================== */

.apply-btn::before{

content:"";

position:absolute;

top:0;

left:-120%;

width:60%;

height:100%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.6),

transparent);

transition:.8s;

}

.apply-btn:hover::before{

left:180%;

}
/* ==========================================
        FEATURED SECTION
========================================== */

.featured-section{

padding:120px 8%;

}

.featured-card{

position:relative;

overflow:hidden;

padding:70px;

border-radius:35px;

background:

linear-gradient(
135deg,
rgba(212,175,55,.08),
rgba(255,255,255,.03));

border:1px solid rgba(212,175,55,.18);

backdrop-filter:blur(25px);

text-align:center;

box-shadow:

0 20px 60px rgba(0,0,0,.35);

}

.featured-card::before{

content:"";

position:absolute;

top:-250px;

right:-250px;

width:500px;

height:500px;

border-radius:50%;

background:

radial-gradient(circle,

rgba(212,175,55,.18),

transparent 70%);

animation:rotateGlow 12s linear infinite;

}

@keyframes rotateGlow{

from{

transform:rotate(0deg);

}

to{

transform:rotate(360deg);

}

}

.featured-badge{

display:inline-block;

padding:10px 24px;

border-radius:50px;

background:rgba(212,175,55,.12);

border:1px solid rgba(212,175,55,.25);

color:#F6D365;

font-weight:600;

margin-bottom:25px;

}

.featured-card h2{

font-size:52px;

margin-bottom:20px;

background:

linear-gradient(
135deg,
#ffffff,
#F6D365,
#D4AF37);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.featured-card p{

max-width:850px;

margin:auto;

font-size:18px;

line-height:1.9;

color:#d4d4d4;

margin-bottom:40px;

}

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

.featured-buttons{

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

}

.gold-btn{

display:inline-flex;

justify-content:center;

align-items:center;

padding:18px 38px;

border-radius:60px;

text-decoration:none;

font-weight:700;

background:

linear-gradient(
135deg,
#F6D365,
#D4AF37);

color:#08110B;

transition:.4s;

}

.gold-btn:hover{

transform:translateY(-5px);

box-shadow:

0 0 30px rgba(212,175,55,.45);

}

.outline-btn{

display:inline-flex;

justify-content:center;

align-items:center;

padding:18px 38px;

border-radius:60px;

text-decoration:none;

font-weight:700;

border:1px solid #D4AF37;

color:#F6D365;

transition:.4s;

}

.outline-btn:hover{

background:#D4AF37;

color:#08110B;

}

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

.stats-section{

padding:110px 8%;

display:grid;

grid-template-columns:

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

gap:30px;

}

.stat-card{

padding:40px;

border-radius:25px;

text-align:center;

background:rgba(255,255,255,.04);

border:1px solid rgba(212,175,55,.15);

transition:.45s;

backdrop-filter:blur(18px);

}

.stat-card:hover{

transform:

translateY(-10px);

border-color:#D4AF37;

box-shadow:

0 0 35px rgba(212,175,55,.18);

}

.stat-card i{

font-size:45px;

margin-bottom:20px;

color:#F6D365;

}

.stat-card h2{

font-size:42px;

color:#ffffff;

margin-bottom:12px;

}

.stat-card p{

color:#cfcfcf;

}

/* ==========================================
      BENEFITS SECTION
========================================== */

.benefits-section{

padding:120px 8%;

text-align:center;

}

.benefits-section h2{

font-size:54px;

margin-bottom:60px;

background:

linear-gradient(
135deg,
#ffffff,
#F6D365);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.benefits-grid{

display:grid;

grid-template-columns:

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

gap:30px;

}

.benefit-card{

padding:40px;

border-radius:25px;

background:

rgba(255,255,255,.04);

border:1px solid rgba(212,175,55,.12);

transition:.45s;

backdrop-filter:blur(18px);

}

.benefit-card:hover{

transform:

translateY(-12px);

border-color:#D4AF37;

box-shadow:

0 0 35px rgba(212,175,55,.2);

}

.benefit-card i{

font-size:42px;

margin-bottom:20px;

color:#F6D365;

}

.benefit-card h3{

font-size:24px;

margin-bottom:15px;

}

.benefit-card p{

line-height:1.8;

color:#cfcfcf;

}
/* ==========================================
        HELP SECTION
========================================== */

.help-section{

padding:120px 8%;

}

.help-card{

position:relative;

overflow:hidden;

padding:70px;

text-align:center;

border-radius:35px;

background:

linear-gradient(
135deg,
rgba(212,175,55,.08),
rgba(255,255,255,.03));

border:1px solid rgba(212,175,55,.18);

backdrop-filter:blur(25px);

box-shadow:

0 20px 60px rgba(0,0,0,.35);

}

.help-card::before{

content:"";

position:absolute;

left:-180px;

bottom:-180px;

width:420px;

height:420px;

border-radius:50%;

background:

radial-gradient(circle,
rgba(212,175,55,.18),
transparent 70%);

filter:blur(20px);

}

.help-card h2{

font-size:48px;

margin-bottom:20px;

background:

linear-gradient(
135deg,
#ffffff,
#F6D365,
#D4AF37);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.help-card p{

max-width:800px;

margin:auto;

line-height:1.9;

font-size:18px;

color:#d0d0d0;

margin-bottom:35px;

}


/* ==========================================
        CTA
========================================== */

.scholar-cta{

padding:140px 8%;

text-align:center;

}

.scholar-cta h2{

font-size:56px;

margin-bottom:20px;

background:

linear-gradient(
135deg,
#ffffff,
#F6D365,
#D4AF37);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.scholar-cta p{

max-width:850px;

margin:auto;

line-height:1.9;

font-size:18px;

color:#cfcfcf;

margin-bottom:40px;

}


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

.scholar-footer{

padding:70px 8%;

text-align:center;

border-top:

1px solid rgba(212,175,55,.12);

background:#050905;

}

.scholar-footer h3{

font-size:34px;

letter-spacing:3px;

margin-bottom:15px;

background:

linear-gradient(
135deg,
#ffffff,
#F6D365);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.scholar-footer p{

margin-top:8px;

color:#9d9d9d;

}


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

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#08110B;

}

::-webkit-scrollbar-thumb{

background:

linear-gradient(
180deg,
#D4AF37,
#F6D365);

border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

background:#D4AF37;

}


/* ==========================================
      SELECTION
========================================== */

::selection{

background:#D4AF37;

color:#08110B;

}


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

@media(max-width:992px){

.featured-card,
.help-card{

padding:45px;

}

.featured-card h2,
.help-card h2,
.scholar-cta h2{

font-size:38px;

}

.stats-section{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:768px){

.scholar-hero{

padding:140px 8% 90px;

}

.scholar-hero h1{

font-size:42px;

}

.scholar-hero p{

font-size:16px;

}

#searchBox{

font-size:15px;

padding:16px 22px;

}

.scholarship-grid{

grid-template-columns:1fr;

gap:25px;

}

.featured-card{

padding:35px 25px;

}

.featured-card h2{

font-size:30px;

}

.featured-buttons{

flex-direction:column;

}

.gold-btn,
.outline-btn{

width:100%;

}

.stats-section{

grid-template-columns:1fr;

}

.benefits-grid{

grid-template-columns:1fr;

}

.help-card{

padding:35px 25px;

}

.help-card h2{

font-size:30px;

}

.scholar-cta h2{

font-size:34px;

}

.scholar-footer h3{

font-size:26px;

}

}

@media(max-width:480px){

.scholar-card{

padding:25px;

}

.scholar-card h2{

font-size:22px;

}

.scholar-icon{

width:65px;

height:65px;

font-size:28px;

}

.stat-card h2{

font-size:30px;

}

.benefits-section h2{

font-size:34px;

}

}