/*=========================================================
  MAISHA BORA WEBSITE
  MASTER STYLESHEET
  PART 1
==========================================================*/


/*=========================================================
  COLOR PALETTE
==========================================================*/

:root{

--cream:#F8F2E8;
--green:#23452C;
--brown:#4A2F1B;
--gold:#B98A3A;
--text:#23452C;

}


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

*{

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

}


html{

scroll-behavior:smooth;

}


body{

background:var(--cream);

color:var(--text);

font-family:Arial, Helvetica, sans-serif;

line-height:1.8;

}


/*=========================================================
  BACKGROUND PATTERN
==========================================================*/

body::before{

content:"";

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

opacity:.05;

pointer-events:none;

background-image:

radial-gradient(circle at 25px 25px,#C9A227 2px,transparent 2px),

radial-gradient(circle at 75px 75px,#7A4A8A 2px,transparent 2px);

background-size:100px 100px;

z-index:-1;

}


/*=========================================================
TYPOGRAPHY
==========================================================*/


h1,h2,h3,h4{

font-family:Georgia, serif;

font-weight:normal;

color:#23452C;

}


h1{

font-size:60px;

}


h2{

font-size:40px;

margin-bottom:25px;

}


h3{

font-size:28px;

margin-bottom:15px;

}


p{

font-size:18px;

margin-bottom:18px;

}


a{

text-decoration:none;

transition:.3s;

}


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


.container{

width:94%;

max-width:1450px;

margin:auto;

}


/*=========================================================
HEADER
==========================================================*/


header{

background:white;

padding:20px 0;

position:sticky;

top:0;

z-index:999;

box-shadow:0 2px 10px rgba(0,0,0,.05);

}


/*=========================================================
TOP NAVIGATION
==========================================================*/

header{

padding:15px 0;

}

nav{

    display:flex;

    justify-content:space-between;

    align-items:center;

    flex-wrap:nowrap;

    background:var(--green);

    padding:14px 20px;

    border-radius:8px;

}

.logo{

flex-shrink:0;

}

.logo-image{
    height:125px;
    width:auto;
}.logo{

    background:#FFFFFF;

    padding:8px 14px;

    border-radius:6px;

    display:flex;

    align-items:center;

}

.menu{

display:flex;

justify-content:flex-end;

align-items:center;

gap:38px;

list-style:none;

margin:0;

padding:0;

flex-wrap:nowrap;

flex:1;

}

.menu li{

white-space:nowrap;

}

.menu a{

    color:var(--cream);

    text-decoration:none;

    font-weight:700;

    font-size:16px;

}

transition:.3s;

}

.menu a:hover{

    color:var(--gold);

}


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


.button-primary{
    background:#23452C;
    color:white;
}

.button-primary:hover{
    background:#1A3521;
}

.button-secondary{
    background:#F8F2E8;
    color:#23452C;
    border:2px solid #B98A3A;


}.button{

    display:inline-block;

    padding:14px 28px;

    font-size:17px;

    font-weight:bold;

    text-decoration:none;

    border-radius:8px;

    cursor:pointer;

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

.hero{

padding:45px 0;

}


.hero-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:50px;

align-items:center;

}

.hero-text h1{

 color:#23452C;
    font-size:64px;
    line-height:1.05;
    font-family:Georgia, serif;
    font-weight:bold;

}


.hero-text p{

font-size:20px;

margin-bottom:30px;

max-width:520px;

}


.hero-image img{

width:100%;

border-radius:25px;

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

}


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

section{

padding:35px 0;

}


.section-title{

text-align:center;

margin-bottom:20px;

}


.section-intro{

text-align:center;

max-width:760px;

margin:auto;

margin-bottom:60px;

}


/*=========================================================
 GOLD DIVIDER
=========================================================*/

.divider{

width:100px;

height:4px;

background:var(--gold);

margin:20px auto 50px;

border-radius:20px;

}


/*=========================================================
 THREE COLUMN GRID
=========================================================*/

.grid-3{

display:grid;

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

gap:35px;

}


/*=========================================================
 FEATURE CARDS
=========================================================*/

.card{

    background:#F1E5D4;

    border:1px solid #D6C09B;

    border-top:4px solid #B98A3A;

    padding:30px;

    border-radius:12px;

    box-shadow:0 8px 20px rgba(74,47,27,.08);

}

.card h3{

    color:#23452C;

    font-size:22px;

    margin-bottom:12px;

}

.card p{

    color:#4A2F1B;

    line-height:1.7;

}
.cards{

    display:flex;

    justify-content:center;

    gap:25px;

    margin:40px 0;

}

}.card{

    width:100%;

    max-width:350px;

}


/*=========================================================
 IMAGE + TEXT SECTION
=========================================================*/

.split{

display:grid;

grid-template-columns:1fr 1fr;

gap:70px;

align-items:center;

}


.split img{

width:100%;

border-radius:22px;

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

}


/*=========================================================
 QUOTE SECTION
=========================================================*/

.quote{

background:white;

border-left:8px solid var(--gold);

padding:45px;

border-radius:18px;

box-shadow:0 12px 30px rgba(0,0,0,.08);

font-family:Georgia,serif;

font-size:28px;

line-height:1.6;

color:var(--darkgreen);

}


/*=========================================================
 CHAI TABLE SECTION
=========================================================*/

.chai{

background:#F5EFE2;

border-radius:30px;

padding:60px;

}


.chai-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:50px;

align-items:center;

}


.chai img{

width:100%;

border-radius:25px;

}


/*=========================================================
CALL TO ACTION
==========================================================*/

.cta{

background:#23452C;

color:white;

text-align:center;

padding:60px 50px;

border-radius:20px;

margin:0px auto;

}

.cta h2{

color:white;

font-family:Georgia, serif;

font-size:42px;

margin-bottom:20px;

}

.cta p{

color:#F8F2E8;

font-size:18px;

max-width:850px;

margin:0 auto 30px;

line-height:1.8;

}

.cta .button-primary{

background:#B98A3A;

color:white;

}

.cta .button-primary:hover{

background:#9C742F;

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

footer{

    background:linear-gradient(to bottom,#3D2818,#4A2F1B);

    color:#FFFFFF;

    padding:35px 0 20px;

    border-top:6px solid #B98A3A;

}

.footer-grid{
    display:grid;
    grid-template-columns:2fr 1fr 1fr;
    gap:35px;
    align-items:start;
}

.footer-grid h3{
    color:#E8C06A;
    font-family:Georgia, serif;
    font-size:22px;
    margin-bottom:20px;
}

.footer-grid p{
    line-height:1.8;
    margin-bottom:15px;
}

.footer-grid ul{
    list-style:none;
    padding:0;
    margin:0;
}

.footer-grid li{
    margin-bottom:12px;
}

.footer-grid a{
    color:#FFFFFF;
    text-decoration:none;
}

.footer-grid a:hover{
    color:#E8C06A;
}

.footer-bottom{
    margin-top:40px;
    padding-top:20px;
    border-top:1px solid rgba(255,255,255,.25);
    text-align:center;
}



/*=========================================================
IMAGES
=========================================================*/

img{

display:block;

max-width:100%;

}


.round-image{

border-radius:25px;

box-shadow:0 20px 45px rgba(0,0,0,.10);

}


.shadow{

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

}


/*=========================================================
HOVER EFFECTS
=========================================================*/

.card img{

transition:.45s;

}


.card:hover img{

transform:scale(1.05);

}


.button{

transition:.35s;

}


.button:hover{

transform:translateY(-3px);

}


/*=========================================================
UTILITY CLASSES
=========================================================*/

.text-center{

text-align:center;

}


.text-left{

text-align:left;

}


.mt-20{

margin-top:20px;

}


.mt-40{

margin-top:40px;

}


.mt-60{

margin-top:60px;

}


.mb-20{

margin-bottom:20px;

}


.mb-40{

margin-bottom:40px;

}


.mb-60{

margin-bottom:60px;

}


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

@media(max-width:1100px){

.hero-grid,
.split,
.chai-grid{

grid-template-columns:1fr;

}

.grid-3{

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

}

.footer-grid{

grid-template-columns:1fr;

}

}


@media(max-width:768px){

header{

position:relative;

}

nav{

flex-direction:column;

gap:20px;

}

.menu{

flex-direction:column;

align-items:center;

gap:15px;

}

.hero{

padding:60px 0;

}

.hero-text h1{

font-size:42px;

}

.hero-text p{

font-size:18px;

}

.grid-3{

grid-template-columns:1fr;

}

.split{

gap:40px;

}

.chai{

padding:40px 25px;

}

.cta{

padding:60px 25px;

}

section{

padding:70px 0;

}

.footer-grid{

gap:30px;

}

}/* Logo */

.logo-image{
    height:100px;
    width:auto;
    display:block;
}
/* TIGHTEN HOME PAGE FEATURE SECTIONS */

section h2{

    margin-top:10px;

    margin-bottom:15px;

}

section p{

    margin-bottom:15px;

}

/* TIGHTER HOME PAGE SPACING */

section + section{

    padding-top:20px;

}
/*=========================================================
MISSION & VISION
=========================================================*/

.mission-card,
.vision-card{

    text-align:center;

}
/* FOUNDER PAGE BOXES */

.founder-cards{

    display:grid;

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

    gap:25px;

}

.founder-cards .card{

    width:100%;

}


/* FEATURED FOUNDER BUTTON */

.founder-button{

    display:inline-block;

    background:#B98A3A;

    color:white;

    padding:16px 32px;

    font-size:18px;

    font-weight:bold;

    text-decoration:none;

    border-radius:10px;

    margin:25px 0 40px;

    box-shadow:0 6px 15px rgba(74,47,27,.15);

}

.founder-button:hover{

    background:#23452C;

    color:white;

}