/*==========================================
        GOVT EXAM PREP
        SCIENCE
==========================================*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

:root{

--primary:#800000;

--primary-dark:#5d0000;

--gold:#D4AF37;

--gold-light:#F8E7B3;

--white:#ffffff;

--bg:#f6f7fb;

--text:#333;

--light:#666;

--shadow:0 18px 45px rgba(0,0,0,.08);

--transition:.35s;

}

*{

margin:0;

padding:0;

box-sizing:border-box;

}

body{

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

background:var(--bg);

color:var(--text);

line-height:1.8;

}

a{

text-decoration:none;

color:inherit;

}

.container{

width:min(1200px,92%);

margin:auto;

}



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

.hero{

background:linear-gradient(135deg,var(--primary),var(--primary-dark));

padding:120px 0;

text-align:center;

position:relative;

overflow:hidden;

}

.hero::before{

content:"";

position:absolute;

width:320px;

height:320px;

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

border-radius:50%;

right:-120px;

top:-120px;

}

.hero::after{

content:"";

position:absolute;

width:220px;

height:220px;

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

border-radius:50%;

left:-60px;

bottom:-60px;

}

.hero-content{

position:relative;

z-index:2;

width:min(900px,92%);

margin:auto;

color:#fff;

}

.hero-tag{

display:inline-block;

padding:10px 28px;

background:var(--gold);

color:var(--primary);

border-radius:50px;

font-weight:700;

margin-bottom:25px;

}

.hero h1{

font-size:4rem;

font-weight:800;

margin-bottom:20px;

}

.hero p{

max-width:760px;

margin:auto;

font-size:1.08rem;

color:rgba(255,255,255,.92);

}



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

.subject-section{

padding:90px 0;

}

.section-title{

text-align:center;

margin-bottom:60px;

}

.section-title h2{

font-size:2.7rem;

color:var(--primary);

margin-bottom:15px;

}

.section-title p{

color:var(--light);

max-width:650px;

margin:auto;

}

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

.subject-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

gap:35px;

}



/*==================================
        SUBJECT CARD
==================================*/

.subject-card{

background:#fff;

padding:40px 30px;

border-radius:25px;

text-align:center;

box-shadow:var(--shadow);

transition:var(--transition);

position:relative;

overflow:hidden;

border:2px solid transparent;

}



/* Golden Top Border */

.subject-card::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:6px;

background:linear-gradient(90deg,var(--gold),#f6dd82);

}



/* Background Circle */

.subject-card::after{

content:"";

position:absolute;

width:180px;

height:180px;

border-radius:50%;

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

right:-70px;

top:-70px;

transition:.35s;

}



.subject-card:hover{

transform:translateY(-12px);

border-color:var(--gold);

box-shadow:0 25px 55px rgba(128,0,0,.15);

}



.subject-card:hover::after{

transform:scale(1.2);

}



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

.subject-icon{

width:95px;

height:95px;

margin:auto;

margin-bottom:28px;

border-radius:24px;

display:flex;

justify-content:center;

align-items:center;

background:linear-gradient(

135deg,

var(--primary),

var(--primary-dark)

);

color:#fff;

font-size:2.4rem;

position:relative;

z-index:2;

transition:.35s;

}



.subject-card:hover .subject-icon{

background:linear-gradient(

135deg,

var(--gold),

#f8df84

);

color:var(--primary);

transform:rotate(-8deg) scale(1.08);

}



/*==================================
        CARD TEXT
==================================*/

.subject-card h3{

font-size:2rem;

color:var(--primary);

margin-bottom:18px;

position:relative;

z-index:2;

}



.subject-card p{

color:#666;

font-size:.97rem;

margin-bottom:30px;

position:relative;

z-index:2;

min-height:90px;

}



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

.subject-card span{

display:inline-flex;

align-items:center;

gap:10px;

padding:14px 28px;

background:linear-gradient(

135deg,

var(--primary),

var(--primary-dark)

);

color:#fff;

border-radius:50px;

font-weight:600;

transition:.35s;

position:relative;

z-index:2;

}



.subject-card:hover span{

background:linear-gradient(

135deg,

var(--gold),

#f7de7d

);

color:var(--primary);

}



.subject-card span i{

transition:.35s;

}



.subject-card:hover span i{

transform:translateX(6px);

}



/*==================================
        FADE ANIMATION
==================================*/

.subject-card{

animation:fadeUp .7s ease;

}



@keyframes fadeUp{

from{

opacity:0;

transform:translateY(30px);

}

to{

opacity:1;

transform:translateY(0);

}

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

.feedback-section{

padding:90px 0;

background:#ffffff;

}



.feedback-card{

max-width:900px;

margin:auto;

background:#fff;

padding:50px;

text-align:center;

border-radius:28px;

box-shadow:var(--shadow);

border-top:6px solid var(--gold);

position:relative;

overflow:hidden;

}



.feedback-card::before{

content:"";

position:absolute;

width:180px;

height:180px;

border-radius:50%;

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

top:-70px;

right:-70px;

}



.feedback-icon{

width:90px;

height:90px;

margin:auto;

margin-bottom:25px;

display:flex;

justify-content:center;

align-items:center;

border-radius:50%;

background:linear-gradient(

135deg,

var(--primary),

var(--primary-dark)

);

color:#fff;

font-size:2.3rem;

position:relative;

z-index:2;

}



.feedback-card h2{

font-size:2.2rem;

color:var(--primary);

margin-bottom:18px;

position:relative;

z-index:2;

}



.feedback-card p{

max-width:700px;

margin:auto;

color:#666;

margin-bottom:35px;

position:relative;

z-index:2;

}



/*==================================
        CONTACT BUTTON
==================================*/

.contact-btn{

display:inline-flex;

align-items:center;

gap:12px;

padding:16px 36px;

border-radius:50px;

background:linear-gradient(

135deg,

var(--primary),

var(--primary-dark)

);

color:#fff;

font-weight:600;

transition:.35s;

box-shadow:0 12px 25px rgba(128,0,0,.20);

position:relative;

z-index:2;

}



.contact-btn:hover{

background:linear-gradient(

135deg,

var(--gold),

#f7df81

);

color:var(--primary);

transform:translateY(-5px);

}



.contact-btn i{

font-size:1rem;

}



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

.footer{

background:linear-gradient(

135deg,

var(--primary),

var(--primary-dark)

);

padding:70px 0 35px;

text-align:center;

color:#fff;

}



.footer-content{

max-width:800px;

margin:auto;

}



.footer h2{

font-size:2.3rem;

font-weight:800;

margin-bottom:18px;

}



.footer p{

color:rgba(255,255,255,.90);

line-height:1.9;

}



.footer-divider{

width:120px;

height:4px;

background:var(--gold);

margin:30px auto;

border-radius:50px;

}



.copyright{

color:#f4d77a;

font-size:.95rem;

}



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

::-webkit-scrollbar{

width:11px;

}



::-webkit-scrollbar-track{

background:#efefef;

}



::-webkit-scrollbar-thumb{

background:linear-gradient(

var(--primary),

var(--primary-dark)

);

border-radius:50px;

}



::-webkit-scrollbar-thumb:hover{

background:var(--gold);

}



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

::selection{

background:var(--gold);

color:var(--primary);

}



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

@media(max-width:992px){

.hero h1{

font-size:3rem;

}

}



@media(max-width:768px){

.hero{

padding:90px 0;

}



.hero h1{

font-size:2.5rem;

}



.section-title h2{

font-size:2rem;

}



.feedback-card{

padding:35px 25px;

}



.feedback-card h2{

font-size:1.8rem;

}



.contact-btn{

width:100%;

max-width:320px;

justify-content:center;

}



.subject-grid{

grid-template-columns:1fr;

}

}



@media(max-width:480px){

.hero h1{

font-size:2rem;

}



.hero p{

font-size:.95rem;

}



.subject-icon{

width:75px;

height:75px;

font-size:2rem;

}



.subject-card h3{

font-size:1.6rem;

}



.feedback-icon{

width:70px;

height:70px;

font-size:1.8rem;

}



.footer h2{

font-size:1.8rem;

}

}



/*==================================
        OPTIONAL DARK MODE
==================================*/

body.dark{

background:#111;

color:#fff;

}



body.dark .subject-section,

body.dark .feedback-section{

background:#111;

}



body.dark .subject-card,

body.dark .feedback-card{

background:#1e1e1e;

border-color:#333;

}



body.dark .subject-card h3,

body.dark .feedback-card h2{

color:#fff;

}



body.dark .subject-card p,

body.dark .feedback-card p{

color:#ccc;

}



body.dark .footer{

background:#000;

}