/* ==========================================
   NAVAL KISHORE TANDON WEBSITE
   PART 2A
========================================== */

:root{

--primary:#6B0F1A;
--primary-dark:#470913;

--secondary:#D4AF37;

--text:#333333;

--light:#ffffff;

--grey:#f7f7f7;

--shadow:0 15px 35px rgba(0,0,0,.12);

--radius:16px;

}

*{

margin:0;

padding:0;

box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:'Noto Sans Devanagari',sans-serif;

background:#faf8f5;

color:var(--text);

line-height:1.8;

overflow-x:hidden;

}

/* ==========================================
CONTAINER
========================================== */

.container{

width:90%;

max-width:1250px;

margin:auto;

}

/* ==========================================
HEADINGS
========================================== */

h1{

font-size:64px;

font-weight:800;

line-height:1.1;

}

h2{

font-size:42px;

font-weight:700;

}

h3{

font-size:24px;

font-weight:700;

}

p{

font-size:18px;

}

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

a{

text-decoration:none;

transition:.35s;

}

/* ==========================================
NAVBAR
========================================== */

header{

position:fixed;

top:0;

left:0;

width:100%;

z-index:9999;

transition:.4s;

}

.navbar{

display:flex;

justify-content:space-between;

align-items:center;

padding:18px 8%;

background:rgba(70,9,19,.92);

backdrop-filter:blur(14px);

box-shadow:0 5px 25px rgba(0,0,0,.18);

}

.logo h2{

color:white;

font-size:30px;

font-weight:800;

letter-spacing:1px;

}

.navbar ul{

display:flex;

gap:35px;

list-style:none;

}

.navbar ul li a{

color:white;

font-weight:600;

font-size:17px;

position:relative;

}

.navbar ul li a::after{

content:"";

position:absolute;

left:0;

bottom:-8px;

width:0;

height:3px;

background:var(--secondary);

transition:.35s;

}

.navbar ul li a:hover::after{

width:100%;

}

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

.hero{

height:100vh;

position:relative;

display:flex;

align-items:center;

background-image:

linear-gradient(rgba(55,5,15,.82),

rgba(55,5,15,.82)),

url("../images/hero.jpg");

background-size:cover;

background-position:center;

background-attachment:fixed;

}

.hero-overlay{

display:none;

}

.hero-content{

display:flex;

align-items:center;

justify-content:space-between;

width:90%;

max-width:1300px;

margin:auto;

gap:70px;

z-index:2;

}

.hero-left{

flex:1;

color:white;

}

.hero-right{

flex:1;

display:flex;

justify-content:center;

}

.hero-right img{

width:420px;

border-radius:20px;

border:8px solid rgba(255,255,255,.15);

box-shadow:0 30px 60px rgba(0,0,0,.35);

}

.hero-badge{

display:inline-block;

padding:10px 20px;

background:var(--secondary);

color:var(--primary);

font-weight:700;

border-radius:40px;

margin-bottom:25px;

}

.hero h2{

margin-top:18px;

font-size:30px;

color:#F4E5B4;

font-weight:500;

}

.hero p{

margin-top:28px;

font-size:21px;

max-width:650px;

opacity:.95;

}

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

.hero-buttons{

display:flex;

gap:20px;

margin-top:45px;

flex-wrap:wrap;

}

.btn-primary{

padding:16px 34px;

background:var(--secondary);

color:var(--primary);

font-weight:700;

border-radius:50px;

box-shadow:var(--shadow);

}

.btn-primary:hover{

transform:translateY(-4px);

}

.btn-secondary{

padding:16px 34px;

border:2px solid white;

color:white;

border-radius:50px;

font-weight:700;

}

.btn-secondary:hover{

background:white;

color:var(--primary);

}

/* ==========================================
SECTIONS
========================================== */

section{

padding:110px 0;

}

.section-title{

text-align:center;

margin-bottom:60px;

}

.section-title h2{

display:inline-block;

position:relative;

padding-bottom:15px;

color:var(--primary);

}

.section-title h2::after{

content:"";

position:absolute;

left:50%;

transform:translateX(-50%);

bottom:0;

width:90px;

height:5px;

border-radius:30px;

background:var(--secondary);

}

/* ==========================================
COMMON CARD
========================================== */

.card{

background:white;

border-radius:var(--radius);

padding:35px;

box-shadow:var(--shadow);

transition:.35s;

}

.card:hover{

transform:translateY(-8px);

}

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

@media(max-width:1100px){

.hero-content{

flex-direction:column;

text-align:center;

padding-top:120px;

}

.hero-right img{

width:320px;

}

.hero h1{

font-size:48px;

}

.hero h2{

font-size:26px;

}

}

@media(max-width:768px){

.navbar{

flex-direction:column;

gap:15px;

}

.navbar ul{

flex-wrap:wrap;

justify-content:center;

gap:18px;

}

.hero{

height:auto;

padding:120px 0 80px;

background-attachment:scroll;

}

.hero-right img{

width:260px;

}

.hero h1{

font-size:38px;

}

.hero p{

font-size:18px;

}

.section-title h2{

font-size:34px;

}

}

/* =====================================================
   PART 2B
   ABOUT SECTION
===================================================== */

#about{

background:#ffffff;

}

.about-wrapper{

display:grid;

grid-template-columns:420px 1fr;

gap:70px;

align-items:center;

}

.about-image{

position:relative;

}

.about-image img{

width:100%;

border-radius:18px;

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

transition:.4s;

}

.about-image img:hover{

transform:scale(1.02);

}

.about-content p{

font-size:20px;

margin-bottom:22px;

text-align:justify;

}

.about-content p:last-child{

margin-bottom:0;

}

/* =====================================================
   STATISTICS
===================================================== */

.stats{

background:

linear-gradient(

135deg,

var(--primary),

var(--primary-dark)

);

padding:90px 0;

}

.stats .container{

display:grid;

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

gap:30px;

}

.stat{

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

backdrop-filter:blur(12px);

border-radius:18px;

padding:40px 25px;

text-align:center;

transition:.35s;

border:1px solid rgba(255,255,255,.08);

}

.stat:hover{

transform:translateY(-8px);

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

}

.stat h2{

font-size:58px;

color:var(--secondary);

margin-bottom:12px;

font-weight:800;

}

.stat p{

color:#ffffff;

font-size:18px;

}

/* =====================================================
   TIMELINE
===================================================== */

#journey{

background:#faf8f5;

}

.timeline{

position:relative;

max-width:900px;

margin:60px auto 0;

padding-left:45px;

}

.timeline::before{

content:"";

position:absolute;

left:8px;

top:0;

bottom:0;

width:4px;

background:var(--secondary);

border-radius:50px;

}

.timeline-item{

position:relative;

background:#ffffff;

padding:28px 30px;

margin-bottom:40px;

border-radius:18px;

box-shadow:var(--shadow);

transition:.35s;

}

.timeline-item:hover{

transform:translateX(10px);

}

.timeline-item::before{

content:"";

position:absolute;

left:-49px;

top:32px;

width:20px;

height:20px;

background:var(--primary);

border:5px solid var(--secondary);

border-radius:50%;

}

.timeline-item h3{

color:var(--primary);

margin-bottom:12px;

font-size:24px;

}

.timeline-item p{

font-size:18px;

}

/* =====================================================
   VISION
===================================================== */

#vision{

background:#ffffff;

}

.cards{

display:grid;

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

gap:35px;

}

.cards .card{

text-align:center;

padding:45px 30px;

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

}

.cards .card h3{

margin-bottom:18px;

color:var(--primary);

font-size:24px;

}

.cards .card p{

font-size:18px;

color:#555;

}

.cards .card:hover{

background:var(--primary);

}

.cards .card:hover h3,

.cards .card:hover p{

color:#ffffff;

}

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

@media(max-width:1100px){

.about-wrapper{

grid-template-columns:1fr;

text-align:center;

}

.about-image{

max-width:420px;

margin:auto;

}

.stats .container{

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

}

.cards{

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

}

}

@media(max-width:768px){

.stats .container{

grid-template-columns:1fr;

}

.timeline{

padding-left:30px;

}

.timeline-item::before{

left:-34px;

}

.cards{

grid-template-columns:1fr;

}

.about-content p{

font-size:18px;

}

}

/* =====================================================
   PART 2C
   GALLERY
===================================================== */

#gallery{
    background:#faf8f5;
}

.gallery-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:28px;
}

.gallery-grid img{
    width:100%;
    height:500px;
    object-fit:cover;
    border-radius:18px;
    box-shadow:var(--shadow);
    transition:.45s ease;
    cursor:pointer;
}

.gallery-grid img:hover{
    transform:translateY(-10px) scale(1.03);
    box-shadow:0 30px 55px rgba(0,0,0,.25);
}

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

#contact{

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

    color:#ffffff;

}

.contact-box{

    max-width:900px;

    margin:auto;

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

    backdrop-filter:blur(12px);

    border-radius:20px;

    padding:60px;

    text-align:center;

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

}

.contact-box h3{

    color:var(--secondary);

    font-size:34px;

    margin-bottom:15px;

}

.contact-box p{

    font-size:20px;

    margin:12px 0;

    opacity:.95;

}

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

footer{

    background:#25050b;

    color:#ffffff;

    text-align:center;

    padding:35px;

    font-size:17px;

}

/* =====================================================
   IMAGE EFFECTS
===================================================== */

img{

    display:block;

    max-width:100%;

}

.gallery-grid img,
.about-image img,
.hero-right img{

    user-select:none;

    -webkit-user-drag:none;

}

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

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#ececec;

}

::-webkit-scrollbar-thumb{

    background:var(--primary);

    border-radius:30px;

}

::-webkit-scrollbar-thumb:hover{

    background:#861726;

}

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

.fade-up{

    opacity:0;

    transform:translateY(35px);

    transition:.8s;

}

.fade-up.show{

    opacity:1;

    transform:translateY(0);

}

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

@media(max-width:992px){

.gallery-grid{

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

}

.contact-box{

padding:40px 30px;

}

}

@media(max-width:768px){

.gallery-grid{

grid-template-columns:1fr;

}

.gallery-grid img{

height:auto;

}

.contact-box h3{

font-size:28px;

}

.contact-box p{

font-size:18px;

}

footer{

font-size:15px;

}

}