/* =======================================================
   THE CRUSADERS WEBSITE
   STYLE SHEET
   PART 1
======================================================= */

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

html{
scroll-behavior:smooth;
}

body{

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

font-size:18px;

line-height:1.7;

background:#f4f6f9;

color:#23354d;

overflow-x:hidden;

}

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

.container{

width:92%;

max-width:1300px;

margin:auto;

}

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

.site-header{

position:relative;

top:0;

left:0;

width:100%;

z-index:1000;

padding:20px 0;

background:#173d6b;

}

.nav-container{

display:flex;

justify-content:space-between;

align-items:center;

}

/* ==========================================
LOGO
========================================== */

.logo h2{

color:white;

font-size:34px;

letter-spacing:2px;

font-weight:bold;

}

.gold-cross{

color:#c9a646;

margin-right:8px;

}

.logo-subtitle{

margin-top:5px;

font-size:15px;

color:white;

opacity:.95;

}

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

nav ul{

display:flex;

list-style:none;

gap:35px;

}

nav a{

text-decoration:none;

color:white;

font-size:17px;

font-weight:600;

transition:.3s;

}

nav a:hover{

color:#d3ae48;

}

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

.hero{

position:relative;

min-height:100vh;

display:flex;

align-items:center;

background-image:url("ken-hero.png");

background-size:cover;

background-position:70% center;

background-repeat:no-repeat;

}

.hero-overlay{

background:transparent;

width:100%;

min-height:100vh;

display:flex;

align-items:center;

}

.hero-grid{

display:grid;

grid-template-columns:

1fr
1fr;

gap:40px;

align-items:center;

}

.hero-left{

color:white;

}

.hero-left h1{

font-size:52px;

line-height:1.1;

font-weight:700;

margin-bottom:25px;

}

.hero-large{

display:block;

font-size:60px;

letter-spacing:2px;

}

.hero-left h2{

font-size:34px;

color:#d5b354;

margin-bottom:30px;

font-weight:600;

}

.hero-left p{

font-size:24px;

max-width:560px;

margin-bottom:45px;

}

.hero-right{

text-align:center;

}

.hero-image{

width:100%;

max-width:520px;

border-radius:18px;

box-shadow:

0 20px 60px

rgba(0,0,0,.45);

}

/* ==========================================
PART 2 STARTS HERE
HERO BUTTONS
========================================== *//* =======================================================
   HERO ACTION BUTTONS
   PART 2
======================================================= */

.hero-buttons{

display:grid;

grid-template-columns:

repeat(2,1fr);

gap:22px;

max-width:760px;

margin-top:20px;

}

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

.hero-button{

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

text-align:center;

padding:26px 18px;

border-radius:14px;

text-decoration:none;

font-size:22px;

font-weight:bold;

color:white;

transition:

transform .30s,

box-shadow .30s,

background .30s;

box-shadow:

0 12px 30px

rgba(0,0,0,.22);

min-height:125px;

}

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

.watch{

background:#173d6b;

}

.watch:hover{

background:#204d84;

transform:translateY(-6px);

}

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

.register{

background:#3f7d34;

}

.register:hover{

background:#4f9542;

transform:translateY(-6px);

}

/* ==========================================
MEET KEN BUTTON
========================================== */

.meet{

background:#204a77;

}

.meet:hover{

background:#2b6198;

transform:translateY(-6px);

}

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

.primary-button{

display:inline-block;

margin-top:30px;

padding:

18px
34px;

background:#173d6b;

color:white;

text-decoration:none;

font-size:18px;

font-weight:bold;

border-radius:8px;

transition:.3s;

}

.primary-button:hover{

background:#285489;

transform:translateY(-3px);

}

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

.secondary-button{

display:inline-block;

margin-top:30px;

padding:

18px
34px;

background:#b08d2f;

color:white;

text-decoration:none;

font-size:18px;

font-weight:bold;

border-radius:8px;

transition:.3s;

}

.secondary-button:hover{

background:#c89d2f;

transform:translateY(-3px);

}

/* ==========================================
TWO COLUMN LAYOUT
========================================== */

.two-column{

display:grid;

grid-template-columns:

1fr
1fr;

gap:70px;

align-items:center;

padding:

90px
0;

}

.reverse{

direction:rtl;

}

.reverse
.text-column{

direction:ltr;

}

.reverse
.image-column{

direction:ltr;

}

/* ==========================================
PART 3 STARTS HERE

WELCOME
MEET KEN
LATEST MESSAGES

========================================== *//* =======================================================
   CONTENT SECTIONS
   PART 3
======================================================= */

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

section{

padding:90px 0;

}

.welcome-section{

background:#ffffff;

}

.meet-ken{

background:#f7f9fc;

}

.latest-messages{

background:#ffffff;

}

.contact-section{

background:#173d6b;

color:white;

text-align:center;

}

/* ==========================================
TEXT COLUMNS
========================================== */

.text-column h2{

font-size:46px;

color:#173d6b;

margin-bottom:18px;

font-weight:700;

}

.contact-section h2{

color:white;

}

.text-column p{

font-size:20px;

margin-bottom:22px;

color:#4b5565;

line-height:1.9;

}

.contact-section p{

color:white;

max-width:850px;

margin:

0 auto
35px;

font-size:21px;

}

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

.gold-divider{

width:90px;

height:5px;

background:#c9a646;

margin-bottom:35px;

border-radius:10px;

}

.gold-divider.center{

margin:

0 auto
35px;

}

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

.image-column{

text-align:center;

}

.section-image{

width:100%;

max-width:560px;

border-radius:18px;

box-shadow:

0 18px 45px

rgba(0,0,0,.18);

transition:.35s;

}

.section-image:hover{

transform:scale(1.03);

}

/* ==========================================
LATEST MESSAGES
========================================== */

.section-header{

text-align:center;

margin-bottom:70px;

}

.section-header h2{

font-size:48px;

color:#173d6b;

margin-bottom:20px;

}

.section-header p{

font-size:22px;

max-width:800px;

margin:auto;

color:#555;

}

.message-card{

display:grid;

grid-template-columns:

1fr
1fr;

gap:70px;

align-items:center;

}

.message-text h3{

font-size:34px;

margin-bottom:22px;

color:#173d6b;

}

.message-text p{

font-size:20px;

margin-bottom:20px;

color:#555;

line-height:1.8;

}

.message-image{

text-align:center;

}

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

.contact-buttons{

display:flex;

justify-content:center;

gap:30px;

flex-wrap:wrap;

margin-top:45px;

}

/* ==========================================
PART 4 STARTS HERE

FOOTER
RESPONSIVE DESIGN

========================================== *//* =======================================================
   FOOTER
   PART 4
======================================================= */

.site-footer{

background:#0f2340;

color:white;

padding:70px 0 25px;

}

.footer-grid{

display:grid;

grid-template-columns:

2fr
1fr
1fr;

gap:60px;

}

.site-footer h3{

font-size:32px;

margin-bottom:18px;

color:#d5b354;

}

.site-footer h4{

font-size:22px;

margin-bottom:18px;

color:#d5b354;

}

.site-footer p{

line-height:1.8;

color:#d8d8d8;

margin-bottom:12px;

}

.site-footer ul{

list-style:none;

padding:0;

}

.site-footer li{

margin-bottom:12px;

}

.site-footer a{

color:white;

text-decoration:none;

transition:.25s;

}

.site-footer a:hover{

color:#d5b354;

}

.copyright{

margin-top:50px;

padding-top:25px;

border-top:1px solid rgba(255,255,255,.15);

text-align:center;

font-size:15px;

color:#cccccc;

}

/* ==========================================
TABLET
========================================== */

@media (max-width:1000px){

.hero-grid{

grid-template-columns:1fr;

text-align:center;

}

.hero-left p{

margin-left:auto;

margin-right:auto;

}

.hero-buttons{

grid-template-columns:1fr 1fr;

margin-left:auto;

margin-right:auto;

}

.two-column{

grid-template-columns:1fr;

gap:45px;

text-align:center;

}

.reverse{

direction:ltr;

}

.message-card{

grid-template-columns:1fr;

text-align:center;

}

.footer-grid{

grid-template-columns:1fr;

text-align:center;

}

.gold-divider{

margin-left:auto;

margin-right:auto;

}

}

/* ==========================================
PHONE
========================================== */

@media (max-width:768px){

.site-header{

position:relative;

padding:20px;

background:#173d6b;

}

.nav-container{

flex-direction:column;

gap:20px;

}

nav ul{

flex-wrap:wrap;

justify-content:center;

gap:18px;

}

.logo h2{

font-size:28px;

text-align:center;

}

.logo-subtitle{

text-align:center;

}

.hero{

min-height:auto;

}

.hero-overlay{

min-height:auto;

padding:80px 0;

}

.hero-left h1{

font-size:48px;

}

.hero-large{

font-size:58px;

}

.hero-left h2{

font-size:28px;

}

.hero-left p{

font-size:20px;

}

.hero-buttons{

grid-template-columns:1fr;

max-width:420px;

}

.hero-button{

min-height:100px;

font-size:20px;

padding:22px;

}

.text-column h2{

font-size:36px;

}

.section-header h2{

font-size:36px;

}

.message-text h3{

font-size:28px;

}

.section-image{

max-width:100%;

}

.container{

width:94%;

}

.contact-buttons{

flex-direction:column;

align-items:center;

}

.primary-button,
.secondary-button{

width:100%;

max-width:360px;

text-align:center;

}

}

/* ==========================================
SMALL PHONES
========================================== */

@media (max-width:480px){

.hero-left h1{

font-size:40px;

}

.hero-large{

font-size:48px;

}

.hero-left h2{

font-size:24px;

}

.hero-left p{

font-size:18px;

}

.text-column h2{

font-size:30px;

}

.section-header h2{

font-size:30px;

}

.hero-button{

font-size:18px;

padding:20px;

}

.site-footer{

padding:50px 0 20px;

}

}