/* RESET */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td{background: transparent; border: 0; margin: 0; padding: 0; list-style: none;} img{max-width: 100%; image-rendering: -webkit-optimize-contrast;}
.cf{zoom: 1;} .cf:before, .cf:after{content: ""; display: table;} .cf:after{clear: both;} .clear{clear: both;} *, *:before, *:after{box-sizing: border-box;}

html, body{background: #000; font-family: "Inter", sans-serif; line-height: 1.5; height: 100%; width: 100%;}
body{display: flex; min-height: 100vh; flex-direction: column;}
hr{display: block; margin: 35px 0; border: none; border-top: 1px #eee solid;}
::-moz-selection{background: #D1AB42; color: #0C1A29; text-shadow: none} ::selection{background: #D1AB42; color: #0C1A29; text-shadow: none}

.main{background: #fff; flex: 1; padding: 50px 0;}
.grey-bg{background: #f5f5f5;}
.container{max-width: 1700px; margin: 0 auto; padding: 0 50px;}

.flex-row{display: flex; flex-wrap: wrap; gap: 25px 50px;}
.flex-row .flex-col{flex: 1;}

.col-4{max-width: 33.3333%;}

/* TYPOGRAPHY */

h1, h2, h3, h4, h5, h6{font-family: "Special Gothic Condensed One", sans-serif; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; line-height: 1.25;}
h2{font-size: 32px; margin-bottom: 15px;}
h3{font-size: 20px; font-weight: 400; margin-bottom: 5px;}
p{margin-bottom: 20px;}
a{text-decoration: none; color: inherit; cursor: pointer; transition: all .2s ease-in-out;} a:hover{color: inherit;}

.btn-container{display: flex; align-items: center; gap: 4px 6px; margin: 20px 0;}

.btn{display: flex; align-items: center; justify-content: center; gap: 10px; position: relative; background: #0C1A29; padding: 10px 30px; font-family: "Special Gothic Condensed One", sans-serif; font-size: 16px; text-transform: uppercase; letter-spacing: 1px; text-align: center; color: #fff; border: 1px #0C1A29 solid; border-radius: 50px; overflow: hidden; transition: all .2s ease-in-out; z-index: 1;}
.btn svg{width: 16px; height: 16px;}
.btn:before{content: ""; position: absolute; inset: 0; background: #fff; transform: translateX(-110%); transition: transform .3s ease; z-index: -1;}
.btn:hover{color: #0C1A29;}
.btn:hover:before{transform: translateX(0);}

.yellow-btn{background: #D1AB42; color: #0C1A29; border: none;}
.yellow-btn:hover{color: #0C1A29;}

.bullet-list{margin-bottom: 20px; padding: 0;}
.bullet-list > li{position: relative; list-style: none; padding: 5px 0 5px 30px;}
.bullet-list > li:before{content: "\f058"; position: absolute; left: 0; top: 6px; font-family: "Font Awesome 6 Free"; font-weight: 400; color: #D1AB42; }
.bullet-list ul{margin-top: 5px; padding-left: 20px;}
.bullet-list ul li{list-style: disc;}
.bullet-list ul li:before{content: none;}

.social ul li{margin: 10px 0;}
.social ul li a{display: inline-flex; align-items: center; gap: 12px;}
.social ul li a:hover{color: #D1AB42;}
.social ul li a svg{display: flex; align-items: center; justify-content: center; background: #0C1A29; width: 40px; height: 40px; padding: 10px 0; color: #fff; border: 1px #eee solid; border-radius: 50px;}
.social ul li a span{font-weight: 500;}

.sub-heading{font-family: "Special Gothic Condensed One", sans-serif; font-size: 18px; text-transform: uppercase; letter-spacing: 4px; color: #D1AB42;}
.main .sub-heading{color: #8B6D23;}

/* HEADER */

.header{position: fixed; top: 0; left: 0; width: 100%; transform: translateY(0); transition: transform .5s ease-in-out, background .5s ease-in-out, box-shadow .5s ease-in-out; will-change: transform;  z-index: 99999;}
.header .container{display: flex; align-items: center; gap: 0 25px;}
.header .logo{width: 120px;}
.header .logo img{position: relative; top: 4px; filter: brightness(0) invert(1); transition: all .2s ease-in-out;}
.header .navigation{flex: 1; color: #0C1A29;}
.header .btn{background: none; border: 1px #fff solid;}

.header .navicon{display: none;}
.header .navicon a{display: block; padding: 5px; font-size: 20px; color: #fff;}

.header-up{transform: translateY(-100%);}
.header-down{transform: translateY(0); background: rgba(255,255,255,.85); color: #0C1A29; backdrop-filter: blur(5px) saturate(75%);}

.header-down .logo img{filter: none;}
.header-down .phone a{color: #0C1A29;}
.header-down .navigation ul li a{color: #0C1A29;}
.header-down .navicon a{color: #0C1A29;}
.header-down .btn{color: #0C1A29; border: 1px #0C1A29 solid;}

/* NAVIGATION */

.navigation ul{display: flex;}
.navigation ul li{position: relative;}
.navigation ul li a{display: flex; align-items: center; gap: 8px; padding: 30px 15px; color: #fff;}
.navigation ul li a i{position: relative; top: 2px; font-size: 10px;}
.navigation ul li a:before{content: ''; position: absolute; top: calc(100% - 3px); height: 3px; left: 0px; right: 100%; background: #D1AB42; animation: underlineOut 0.2s;}
.navigation ul li:hover > a:before{animation: underlineIn 0.4s; animation-fill-mode: forwards;}
.navigation ul li:hover > ul{display: block;}

.navigation ul ul{display: none; background: #fff; position: absolute; top: 100%; left: 0; padding: 10px 0; box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.1); border-radius: 0 0 5px 5px;}
.navigation ul ul li a{display: flex; align-items: center; background: #fff; width: 250px; padding: 10px 15px; font-size: 13px; text-align: left; color: #0C1A29;}
.navigation ul ul li:hover > a{opacity: .75;}
.navigation ul ul li a:before{display: none;}

/* HERO */

.hero{position: relative; background: #0C1A29; padding: 40vh 0; text-align: center; color: #fff;}
.hero h1{font-size: 72px; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; line-height: 1;}
.hero p{display: block; margin: 5px 0 25px; font-size: 20px; font-weight: 300;}
.hero .container{position: relative; z-index: 99;}
.hero .btn{max-width: 300px; background: none; margin: auto; padding: 12px; font-size: 18px; border: 1px #fff solid;}

.hero .hero-bg{position: absolute; inset: 0; overflow: hidden; z-index: 9; opacity: .35;}
.hero .hero-bg video{width: 100%; height: 100%; object-fit: cover; transform: scale(1.45);}

.hero .scroll-down{position: absolute; left: 0; right: 0; bottom: 20px; margin: auto; z-index: 99;}
.hero .scroll-down a{display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.1); width: 40px; height: 40px; margin: auto; font-size: 14px; text-align: center; color: #fff; border-radius: 50px; box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.05); backdrop-filter: blur(8px);}
.hero .scroll-down a:hover{background: rgba(255, 255, 255, 0.2); box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.1);}

/* CARDS */

.card-container{display: flex; gap: 15px; margin: 25px 0;}
.card-container .card{flex: 1; display: flex; justify-content: flex-end; flex-direction: column; gap: 20px; position: relative; background: #0C1A29; height: 550px; padding: 25px; color: #fff; border-radius: 10px; overflow: hidden;}
.card-container .card:before{content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(12,26,41,.98) 0%, rgba(12,26,41,.85) 25%, rgba(12,26,41,.1) 75%, transparent 100%); z-index: 1;}
.card-container .card h3{margin-bottom: 5px; font-size: 22px; font-weight: 700;}
.card-container .card p{margin: 0;}
.card-container .card .btn i{flex: 1; text-align: right;}

.card-container .card-image{position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0;}
.card-container .card-image img{display: block; width: 100%; height: 100%; object-fit: cover;}
.card-container .card-text{position: relative; z-index: 9;}

/* SUB PAGES */

.banner{background: #0C1A29 url(../siteart/banner.jpg) center center no-repeat; background-size: cover; padding: 150px 0 50px; color: #fff;}
.banner h1{font-size: 48px;}

.breadcrumbs{background: #f5f5f5; padding: 10px 0; font-size: 12px;}
.breadcrumbs ul{display: flex; align-items: center; flex-wrap: wrap; max-width: 1700px; margin: auto; padding: 0 50px; border-radius: 5px;}
.breadcrumbs ul li a{font-weight: 700; color: #0C1A29;}
.breadcrumbs ul li:has(> a):after{content: "/"; padding: 0 10px; color: #ddd;}

.styled-image{display: block; border-radius: 10px; box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.1);}
.styled-iframe{display: block; width: 100%; height: 800px; border: none;}

/* IMAGE MAP */

.flex-row:has(.course-map){align-items: flex-start;}
.flex-col:has(.course-map){position: sticky; top: 0;}

.hole-container{display: none;}

.course-container{display: flex; gap: 10px; margin: 25px 0;}
.course-container .course-box{flex: 1; background: #fff; text-align: center; border-radius: 10px; box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.1); overflow: hidden;}
.course-container .course-box h3{background: #000; margin: 0; padding: 10px 20px; color: #fff;}
.course-container .course-box p{margin: 0; padding: 15px 20px;}

.course-container .course-box .blue{background: #000066;}
.course-container .course-box .white{background: #fff; color: #0C1A29; border-bottom: 1px #eee solid;}
.course-container .course-box .gold{background: #996633;}
.course-container .course-box .red{background: #FF0000;}
.course-container .course-box .starter{background: #0066FF;}

.course-map{position: relative;}
.course-map img{display: block; width: 100%; margin-bottom: 25px;}
.course-map button{position: absolute; width: 40px; height: 40px; background: #0C1A29; font-family: "Inter", sans-serif; font-size: 16px; font-weight: 700; color: #fff; border: 0; border-radius: 50%; cursor: pointer; transform: translate(-50%, -50%); transition: .3s; box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.5); z-index: 9;}
.course-map button:hover{transform: translate(-50%, -50%) scale(1.15); z-index: 999;}

.course-map button.active{background: #fff; color: #0C1A29; transform: translate(-50%, -50%) scale(1.25); z-index: 999;}

/* TABLE */

.table{margin: 25px 0; font-size: 14px; border: 1px #eee solid;}
.table:has(.table-subhead) .table-head{background: #fff;}

.table-head{background: #fafafa; font-weight: 700;}
.table-subhead{background: #fafafa; font-weight: 700;}
.table-row{display: flex; border-bottom: 1px #eee solid;}
.table-row:last-child{border: none;}

.table-col{flex: 1; padding: 4px 12px; border-right: 1px #eee solid;}
.table-col:last-child{border: none;}
.table-col a{text-decoration: underline;}
.table-col a:hover{text-decoration: none;}

/* FORM */

.form .flex-row{gap: 10px; margin-bottom: 10px;}

.form{background: #f5f5f5; padding: 25px; border-radius: 10px;}
.form h2{text-align: center;}
.form label{display: block; font-size: 13px; font-weight: 500;}
.form input, .form select, .form textarea{display: block; width: 100%; margin: 2px 0; padding: 12px 10px; font-family: "Inter", sans-serif; border: 1px #eee solid; border-radius: 3px;}
.form textarea{height: 100px;}

.form button{display: flex; align-items: center; justify-content: center; position: relative; background: #D1AB42; width: 100%; margin-top: 20px; padding: 12px; font-family: "Special Gothic Condensed One", sans-serif; font-size: 17px; text-transform: uppercase; letter-spacing: 1px; text-align: center; color: #0C1A29; border: none; border-radius: 50px; cursor: pointer; overflow: hidden; transition: all .2s ease-in-out; z-index: 1;}
.form button:before{content: ""; position: absolute; inset: 0; background: #fff; transform: translateX(-110%); transition: transform .3s ease; z-index: -1;}
.form button:hover{color: #0C1A29;}
.form button:hover:before{transform: translateX(0);}

/* FOOTER */

.footer{background: #0C1A29 url(../siteart/footer.jpg) center center no-repeat; background-size: cover; line-height: 1.65; color: #fff;}
.footer a:hover{opacity: .75;}
.footer .flex-row{padding: 50px 0 75px;}
.footer .flex-col strong{display: block; font-family: "Special Gothic Condensed One", sans-serif;  font-size: 20px; text-transform: uppercase; letter-spacing: 1px;}
.footer .logo{width: 100px;}

.footer .copyright{padding: 15px 0; font-size: 12px; text-transform: uppercase; text-align: center; letter-spacing: 1px; opacity: .75;}

/* ANIMATION */

@keyframes underlineIn{
	0%{left: 0; right: 100%;}
	100%{left: 0; right: 0;}
}

/* RESPONSIVE */

nav.mobile{display: none; flex-direction: column; position: fixed; top: 0; left: 0; width: 80vw; height: 100%; background: #fff; border-radius: 0 10px 10px 0; overflow-y: auto; box-shadow: 5px 0px 10px 0px rgba(0, 0, 0, 0.1); transform: translateX(-100%); transition: transform 325ms ease; -webkit-overflow-scrolling: touch; z-index: 999999;}
nav.mobile.open{transform: translateX(0);}

nav.mobile .mobile-top{display: flex; position: sticky; top: 0; background: #fff; padding: 20px; z-index: 9;}
nav.mobile .mobile-top .logo img{max-width: 100px;}
nav.mobile .mobile-top .menu-toggle{display: flex; align-items: center; justify-content: center; margin-left: auto; width: 40px; height: 40px; border: 1px #eee solid; border-radius: 50px;}
nav.mobile .mobile-nav{flex: 1;}

nav.mobile ul{flex: 1;}
nav.mobile ul li{position: relative; border-bottom: 1px #eee solid;}
nav.mobile ul li:has(> a.btn){margin: 5px 10px; border: none;}
nav.mobile ul li a{display: flex; align-items: center; gap: 10px; position: relative; padding: 15px; font-size: 14px; font-weight: 600;}
nav.mobile ul li a i{margin-left: auto;}

nav.mobile ul ul{display: none; background: #fafafa; padding: 6px 0; border-top: 1px #eee solid;}
nav.mobile ul ul li{border: none;}
nav.mobile ul ul li a{font-size: 13px; font-weight: 500; text-transform: none; color: #444;}

nav.mobile .social{margin: 25px 0;}
nav.mobile .social span{display: none;}
nav.mobile .social ul{display: flex; align-items: center; justify-content: center; gap: 15px;}
nav.mobile .social ul li{margin: 0; border: none;}
nav.mobile .social ul li a{padding: 0;}

@media screen and (max-height: 1000px){
	.hero{padding: 35vh 0;}
}
@media screen and (max-width: 1200px){
	nav.mobile{display: flex;}

	.header{padding: 10px 20px;}
	.header .container{gap: 15px; padding: 0;}
	.header .navigation{display: none;}
	.header .navicon{display: block;}
	.header .cta{margin-left: auto;}

	.main{padding: 30px 0;}
	.container{padding: 0 20px;}
	.breadcrumbs ul{padding: 0 20px;}

	.hero{padding: 20vh 0;}
}
@media screen and (max-width: 1024px){
	.card-container{flex-wrap: wrap;}
	.card-container .card{flex: 1 1 calc(50% - 15px); height: 400px;}
	
	.course-container{flex-wrap: wrap;}
	.course-container .course-box{flex: 1 1 calc(50% - 15px);}
}
@media screen and (max-width: 768px){
	.header .logo{width: 85px;}
	.header .btn{padding: 10px 22px 9px; font-size: 14px;}
	
	.flex-row{gap: 20px;}
	.flex-row .flex-col{flex: none; width: 100%;}
	.flex-row .img-col{order: 9;}
	.col-4{max-width: 100%;}
	hr{margin: 25px 0;}

	.btn-container{flex-direction: column;}
	.btn-container .btn{width: 100%;}

	.hero h1{font-size: 56px;}

	.banner{padding: 100px 0 35px;}
	.banner h1{font-size: 36px;}

	.footer{text-align: center;}
	.footer .logo{display: block; margin: auto;}
	.footer .flex-row{padding: 50px 0 25px;}
	.footer .flex-row .flex-row{padding: 0;}
}
@media screen and (max-width: 480px){
	.hero h1{font-size: 50px; text-wrap: pretty;}
	.hero p{font-size: 16px; text-wrap: pretty;}

	.card-container .card{flex: none; width: 100%; height: 300px;}
}