/* =======================================================
   SUNIA ZAIN ARCHITECTS CAREERS
   Premium Warm Architectural Theme
=======================================================*/

:root{

--yellow:#E3C85F;
--yellow-soft:#F2E5AE;

--bg:#FCFCFA;
--bg-alt:#F7F6F2;

--white:#FFFFFF;

--black:#161616;
--heading:#1D1D1D;

--text:#5F5F5F;
--muted:#888888;

--border:#E8E4DC;

--shadow:
0 10px 40px rgba(0,0,0,.04);

}



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

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{

scroll-behavior:smooth;

}

body{

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

background:var(--bg);

color:#111;

line-height:1.7;

overflow-x:hidden;

}

img{

max-width:100%;

display:block;

}

a{

text-decoration:none;

color:inherit;

}

ul{

list-style:none;

}

.container{

width:90%;

max-width:1400px;

margin:auto;

}



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

.navbar{

position:fixed;

top:0;
left:0;

width:100%;

z-index:999;

padding:24px 0;

background:

rgba(252,252,250,.92);

backdrop-filter:blur(15px);

border-bottom:

1px solid rgba(0,0,0,.04);

transition:.4s;

}

.nav-inner{

display:flex;

justify-content:space-between;

align-items:center;

}

.logo img{

height:56px;

}

nav ul{

display:flex;

gap:42px;

}

nav a{

font-family:'Montserrat';

font-size:13px;

font-weight:600;

letter-spacing:1px;

text-transform:uppercase;

transition:.3s;

color:var(--heading);

}

nav a:hover{

color:var(--yellow);

}

.active{

color:var(--yellow);

}

.btn-nav{

padding:

14px 28px;

background:

var(--yellow);

color:

var(--heading);

font-family:'Montserrat';

font-size:13px;

font-weight:700;

transition:.3s;

}

.btn-nav:hover{

transform:translateY(-2px);

box-shadow:

0 12px 25px rgba(0,0,0,.08);

}



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

.hero{

height:100vh;

display:flex;

align-items:center;

position:relative;

background:

linear-gradient(

rgba(252,252,250,.72),

rgba(252,252,250,.88)

),

url('/img/hero.jpg');

background-size:cover;

background-position:center;

}

.hero-content{

max-width:850px;

}

.hero-tag{

display:inline-block;

padding:

10px 18px;

background:

rgba(227,200,95,.12);

border:

1px solid rgba(227,200,95,.25);

font-family:'Montserrat';

font-size:12px;

font-weight:700;

letter-spacing:2px;

color:var(--yellow);

margin-bottom:30px;

}

.hero h1{

font-family:'Montserrat';

font-size:88px;

font-weight:800;

line-height:1.05;

color:var(--heading);

margin-bottom:25px;

}

.hero h1 span{

display:block;

color:var(--yellow);

}

.hero p{

font-size:21px;

max-width:620px;

color:var(--text);

margin-bottom:45px;

}

.hero-buttons{

display:flex;

gap:18px;

}

.btn-primary{

padding:

18px 40px;

background:

var(--yellow);

color:

var(--heading);

font-family:'Montserrat';

font-weight:700;

transition:.3s;

}

.btn-primary:hover{

transform:translateY(-3px);

}

.btn-secondary{

padding:

18px 40px;

border:

1px solid var(--border);

background:white;

font-family:'Montserrat';

font-weight:600;

transition:.3s;

}

.btn-secondary:hover{

border-color:

var(--yellow);

color:

var(--yellow);

}

.scroll-indicator{

position:absolute;

bottom:35px;

left:50%;

transform:translateX(-50%);

font-size:12px;

font-family:'Montserrat';

letter-spacing:4px;

color:#999;

}



/*=========================
SECTION SPACING
=========================*/

section{

padding:

140px 0;

}

.intro{

background:var(--bg);

}

.stats{

background:var(--bg-alt);

}

.jobs{

background:var(--bg);

}

.culture{

background:var(--bg-alt);

}

.benefits{

background:var(--bg);

}

.internship{

background:var(--bg-alt);

}

.cta{

background:var(--bg);

}



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

.section-heading{

margin-bottom:70px;

}

.section-heading span{

font-family:'Montserrat';

font-size:12px;

font-weight:700;

letter-spacing:2px;

color:var(--yellow);

}

.section-heading h2{

font-family:'Montserrat';

font-size:54px;

color:var(--heading);

margin-top:12px;

}



/*=========================
INTRO
=========================*/

.intro-grid{

display:grid;

grid-template-columns:

1fr 1fr;

gap:90px;

align-items:center;

}

.intro-text h2{

font-family:'Montserrat';

font-size:56px;

line-height:1.1;

color:var(--heading);

margin:

20px 0;

}

.intro-text p{

font-size:18px;

max-width:600px;

}

.intro-image{

overflow:hidden;

}

.intro-image img{

transition:1s;

}

.intro-image:hover img{

transform:scale(1.05);

}



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

.stats-grid{

display:grid;

grid-template-columns:

repeat(4,1fr);

gap:25px;

}

.stat{

padding:55px;

background:

var(--bg);

border:

1px solid var(--border);

transition:.3s;

}

.stat:hover{

transform:

translateY(-4px);

box-shadow:

var(--shadow);

}

.stat::before{

content:"";

display:block;

width:60px;

height:3px;

background:

var(--yellow);

margin-bottom:20px;

}

.stat h3{

font-size:70px;

font-family:'Montserrat';

color:

var(--heading);

margin-bottom:10px;

}

.stat p{

font-size:13px;

letter-spacing:2px;

text-transform:uppercase;

color:var(--muted);

}



/*=========================
JOBS
=========================*/

.job-item{

display:flex;

justify-content:space-between;

align-items:center;

padding:42px 0;

border-bottom:

1px solid var(--border);

transition:.35s;

}

.job-item:hover{

padding-left:18px;

}

.job-left h3{

font-family:'Montserrat';

font-size:30px;

color:var(--heading);

margin-bottom:8px;

}

.job-left p{

color:var(--muted);

}

.job-meta{

display:flex;

gap:30px;

}

.job-meta span{

font-size:14px;

color:var(--muted);

}

.job-action a{

font-family:'Montserrat';

font-weight:700;

position:relative;

color:var(--heading);

}

.job-action a:after{

content:"";

position:absolute;

left:0;

bottom:-5px;

width:0;

height:2px;

background:

var(--yellow);

transition:.3s;

}

.job-action a:hover:after{

width:100%;

}



/*=========================
CULTURE
=========================*/

.culture-grid{

display:grid;

grid-template-columns:

repeat(4,1fr);

gap:20px;

}

.culture-grid img{

height:420px;

object-fit:cover;

transition:1s;

}

.culture-grid div{

overflow:hidden;

}

.culture-grid img:hover{

transform:scale(1.06);

}



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

.benefits-grid{

display:grid;

grid-template-columns:

repeat(4,1fr);

gap:25px;

}

.benefit{

padding:45px;

background:var(--bg);

border:

1px solid var(--border);

transition:.3s;

}

.benefit:hover{

box-shadow:var(--shadow);

transform:translateY(-4px);

}

.benefit h4{

font-family:'Montserrat';

font-size:24px;

color:var(--heading);

margin-bottom:15px;

}



/*=========================
INTERNSHIP
=========================*/

.internship-box{

padding:90px;

background:

var(--yellow-soft);

text-align:center;

}

.internship-box span{

font-family:'Montserrat';

font-size:12px;

font-weight:700;

letter-spacing:2px;

}

.internship-box h2{

font-family:'Montserrat';

font-size:56px;

color:var(--heading);

margin:

20px 0;

}

.internship-box p{

max-width:700px;

margin:auto;

margin-bottom:40px;

font-size:18px;

}

.internship-box a{

display:inline-block;

padding:

18px 38px;

background:

var(--heading);

color:white;

font-family:'Montserrat';

font-weight:700;

transition:.3s;

}

.internship-box a:hover{

background:black;

}



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

.cta{

text-align:center;

}

.cta h2{

font-family:'Montserrat';

font-size:64px;

color:var(--heading);

margin-bottom:20px;

}

.cta p{

font-size:20px;

margin-bottom:40px;

}

.cta a{

padding:

18px 40px;

background:

var(--yellow);

font-family:'Montserrat';

font-weight:700;

color:

var(--heading);

display:inline-block;

}



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

footer{

padding:

90px 0 30px;

background:

var(--bg);

border-top:

1px solid var(--border);

}

.footer-inner{

display:flex;

justify-content:space-between;

gap:60px;

}

.footer-logo{

width:180px;

}

.footer-inner p{

color:var(--muted);

}

.copyright{

text-align:center;

padding-top:35px;

margin-top:35px;

border-top:

1px solid var(--border);

font-size:13px;

color:#999;

}



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

@media(max-width:1100px){

.stats-grid{

grid-template-columns:

repeat(2,1fr);

}

.benefits-grid{

grid-template-columns:

repeat(2,1fr);

}

.culture-grid{

grid-template-columns:

repeat(2,1fr);

}

}


@media(max-width:900px){

nav{

display:none;

}

.hero h1{

font-size:58px;

}

.hero-buttons{

flex-direction:column;

}

.intro-grid{

grid-template-columns:1fr;

}

.stats-grid{

grid-template-columns:1fr;

}

.benefits-grid{

grid-template-columns:1fr;

}

.culture-grid{

grid-template-columns:1fr;

}

.job-item{

flex-direction:column;

align-items:flex-start;

gap:20px;

}

.footer-inner{

flex-direction:column;

}

}


@media(max-width:600px){

.hero h1{

font-size:42px;

}

.section-heading h2{

font-size:36px;

}

.intro-text h2{

font-size:40px;

}

.cta h2{

font-size:40px;

}

.internship-box{

padding:60px 30px;

}

.internship-box h2{

font-size:40px;

}

}