:root {
    --main-fwht:#ffffff;
    --main-whte:#e6deda;
    --main-ltbn:#dfa175;
    --main-ltb2:#5a3b25;
    --main-mdb1:#3f2513;
    --main-mdb2:#2d1b0e;
    --main-dkb1:#1a0f0a;
    --main-dkb2:#110906;
    --main-blck:#000000;

    --ma1n-dkb1:#39261E;
    --ma1n-dkb2:#2C1810;
    --ma1n-mdb1:#B85C38;
    --ma1n-ltb1:#F7F3EE;
    --ma1n-ltb2:#E5DCCF;
    --ma1n-ltb3:#B6ADA6;
}

.bgnd-whte {background-color:var(--main-whte);}
.bgnd-ltbn {background-color:var(--ma1n-ltb1);}
.bgnd-mdb1 {background-color:var(--main-mdb1);}
.bgnd-mdb2 {background-color:var(--main-mdb2);}
.bgnd-dkb1 {background-color:var(--main-dkb1);}
.bgnd-dkb2 {background-color:var(--main-dkb2);}
.bgnd-blck {background-color:var(--main-blck);}

.color-fwht {color:var(--main-fwht);}
.color-whte {color:var(--main-whte);}
.color-ltbn {color:var(--main-ltbn);}
.color-ltb1 {color:var(--ma1n-ltb1);}
.color-ltb2 {color:var(--main-ltb2);}
.color-mdb1 {color:var(--main-mdb1);}
.color-mdb2 {color:var(--main-mdb2);}
.color-dkb1 {color:var(--main-dkb1);}
.color-dkb2 {color:var(--main-dkb2);}
.color-blck {color:var(--main-blck);}

.bld {font-weight:bold;}

* {margin: 0; padding: 0; box-sizing: border-box;}
html {scroll-behavior:smooth; /*scroll-padding-top:0;*/}
body {font-family:'Georgia', serif; line-height: 1.6; letter-spacing:1px; color:var(--ma1n-mdb1);}
.container {width:90%; max-width: 1100px; margin: 0 auto;}
section.title-section h1 {font-size:2.2em;}
h2 {margin:1em 0 0 0;}
a {color:var(--main-ltbn); text-decoration: none; transition: color 0.3s ease;}
a:hover {color:var(--main-ltb1);}
img {max-width: 100%; display: block; height: auto;}
.main-header {background-color:var(--ma1n-ltb1); padding:20px 0; border-bottom: 1px solid var(--main-ltbn); position:fixed; z-index:100; width:100%; height:80px; top:0; font-family:'Open Sans', sans-serif;}
.nav-container {display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:15px; margin-top:5px;}
.logo {font-size:1.3rem; font-weight:normal; letter-spacing:0px; color:var(--ma1n-mdb1);}
.nav-links a {font-size: 0.9rem; margin-left:15px; color:var(--ma1n-dkb2); text-transform:uppercase; /*font-family:'Open Sans', sans-serif;*/}
.nav-links a.active, .nav-links a:hover {color:var(--main-ltbn);}
.hero-section {position:initial; background:linear-gradient(rgba(17, 9, 6, 0), rgba(17, 9, 6, 0.9)), url('images/peter-harrington.jpg'); background-size: cover; background-position: center center; background-repeat: no-repeat; padding: 40px 0; /*min-height:450px;*/ display: flex; align-items: center; margin-top:80px;}
.hero-text-block {max-width:900px; padding: 40px;}
.main-title {font-size: 3.5rem; font-weight: normal; color:var(--main-fwht); line-height: 1.1; margin-bottom:150px; letter-spacing:1px; text-shadow:1px 1px 1px rgba(0,0,0,0.37);}
.intro-content p, .intro-content-mobile p {margin-bottom: 18px; font-size: 1.05rem;}
p.welcome-tag {font-size:1.5em;}
section.hero-section-mobile {display:none;}

section.title-section {background-color:var(--ma1n-ltb2); margin:80px 0 0 0; padding:0.5em 0em 1em 0em;}

.services-section {/*background-color:var(--ma1n-ltb1);*/ background-color:var(--ma1n-ltb1); margin:2em 0 2em 0.1em; padding:2em 0;}
.classes-section {background-color:var(--ma1n-ltb2); margin:4em 0; padding:2em 0;}

a.topanchr {float:right; font-family:'Open Sans', sans-serif;}

.grid-container {display:flex; justify-content:space-between; gap:30px;}
.card {flex:1; background-color:var(--ma1n-mdb1); border: 1px solid var(--main-dbn2); display: flex; flex-direction:column;}
.card-image {width:100%; height:220px; overflow:hidden;}
.card-image img {width:100%; height:100%; object-fit:cover;}
.card-content {padding: 25px; display: flex; flex-direction: column; flex-grow: 1;}
.card-content h3 {font-size: 1.4rem; font-weight: normal; color:var(--ma1n-ltbn); margin-bottom: 10px;}
.card-content p {font-size: 0.95rem; color:var(--ma1n-dkb2); margin-bottom: 15px; flex-grow: 1;}
.card-content .price {color:var(--main-fwht); font-weight: bold; margin-bottom: 5px;}
.image-zoom {overflow:hidden;}
.image-zoom img {object-fit:cover; transition:transform 0.6s ease; border-radius:0.3em 0.3em 0 0;}
.image-zoom:hover img {transform:scale(1.1);}
.explore-btn {font-size: 0.85rem; letter-spacing: 1px; font-weight: bold; margin-top: auto; color:var(--ma1n-ltbn); display: inline-block; font-family:'Open Sans', sans-serif;}

.main-footer {background-color:var(--ma1n-ltb2); padding:20px 0 40px 0; text-align: center; border-top: 1px solid var(--main-ltbn); font-family:'Open Sans', sans-serif; color:var(--ma1n-mdb1);}
.main-footer h2 {font-size: 1.8rem; font-weight: normal; margin-bottom: 5px;}
.main-footer a {color:var(--ma1n-mdb1);}
.main-footer a:hover {color:var(--ma1n-dkb1);}
.footer-subtitle {font-size: 0.95rem; var(--main-whte); letter-spacing: 1px; margin-bottom:20px;}
.footer-meta {border-top: 1px solid var(--main-ltb2); display:inline-block; text-wrap:pretty; padding-top:10px; font-size: 0.85rem; /*color:var(--main-ltb2);*/}
.footer-meta p {margin-bottom: 8px;}

.pbold {font-weight:bold;}
.ctr {text-align:center;}
div.classes, div.gallery, div.mosaics {width:80%; margin:10px auto;}
div.classes p, div.gallery p, div.mosaics p {margin-top:12px;}
/*div.classes {margin-top:100px;}*/
div.classes p {margin:0.7em 0 0 0;}
/*div.mosaics {margin-top:100px;}*/
div.info-container {width:80%; gap:2em;}
div.imgs-container {width:100%; gap:4em;}
div.msc-container {width:100%; gap:2em;}
/*div.gallery {margin:100px auto;}*/
p.classttl {color:var(--main-whte); text-transform:uppercase; padding:0 1em;}
div.classinfo, div.mscinfo {display:flex; justify-content:space-between; align-items:center; margin:1em auto 2em auto;}
div.classesinfo {display:flex; justify-content:space-between; align-items:center; margin:0; align-items:flex-start;}
div.times, div.cost {background-color:var(--main-mdb1); color:var(--main-whte); padding:1em 1.4em; border-radius:0 0 0.5em 0.5em; white-space:nowrap;}
div.cost {text-align:center; padding-top:0.5em;}
div.cost p:first-of-type {font-size:1.4em;}
p.classttl {font-weight:bold; text-align:center; font-family:'Open Sans', sans-serif;}
div.times p, div.cost p {margin:0px 0;}

div.classes hr {border:1px dotted #000;}
div.classtxt div.address {text-align:center; text-align:center; padding-top:1em; font-family:'Open Sans', sans-serif;}
div.address p.addlsn {line-height:120%; margin-top:0; padding-top:0;}
div.address img {display:inline-block; margin-top:0.5em;}

.gallery-container {max-width:1200px; margin:40px auto;}
.gallery-container h1 {text-align:center; margin-bottom:30px; font-size:2em; font-weight:700;}
.gallery-grid {display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:10px;}
.gallery-item {overflow:hidden; transition:transform 0.3s ease, box-shadow 0.3s ease; display:flex; flex-direction:column; justify-content:space-between;}
.gallery-item:hover {transform: scale(1.05); box-shadow:0 6px 20px rgba(0, 0, 0, 0.15);}
.gallery-item img {width:100%; /*height:200px;*/ object-fit:cover; display:block;}
.gallery-item-caption {padding:15px; text-align:center; font-size:1.1em; color:#555; font-weight:500;}
.load-more-container {text-align:center; margin-top:40px;}
.load-more-button {background-color:var(--main-orng); color:white; padding:12px 25px; border:none; border-radius:5px; cursor:pointer; font-size:1em; transition:background-color 0.3s ease, transform 0.2s ease; box-shadow:0 4px 8px rgba(0, 0, 0, 0.2); background-color:var(--main-ltbn); color:var(--main-dkb1);}
.load-more-button:hover {transform:translateY(-2px); color:#fff;}
.load-more-button:disabled {background-color:#cccccc; cursor:not-allowed; box-shadow:none;}

@media (max-width:1100px) {
    .main-header {height:120px;}
    section.title-section {margin:120px 0 0 0;}
    section.title-section h1 {font-size:2em; line-height:110%;}
    .nav-container {flex-direction:column; text-align:center; height:70px;}
    .container {width:100%;}
    .nav-container {display:block;}
    nav.nav-links {display:flex; margin-top:12px; justify-content:space-evenly;}
    .nav-links a {margin: 0 10px; font-weight:bold;}
    .hero-section {margin-top:120px;}
}

@media (max-width:1160px) {
    div.classinfo {width:90%; gap:1em;}
    div.mscinfo {width:100%; gap:1em;}
    div.imgs-container {width:98% !important; gap:2em !important;}
    div.msc-container {gap:2em !important;}
}

@media (max-width:900px) {
    div.classes, div.mosaics {width:90%;}
    div.classinfo {flex-direction:column; gap:2em;}
    div.classesinfo {width:90%; gap:1em;}
    .grid-container {gap:20px;}
}

@media (max-width:900px) {
    .gallery-grid {grid-template-columns:repeat(auto-fill, minmax(250px, 1fr));}
}
@media (max-width:900px) {
    div.classinfo {width:100%;}
    .hero-section {position:initial; background:0, url('images/peter-harrington.jpg'); background-size: contain; background-position:top center; background-repeat: no-repeat; padding-top:170px; margin-top:80px;}
    .main-title {margin-bottom:10px; margin-left:10px; text-shadow:1.5px 1.5px 1.5px rgba(0,0,0,0.9);}
    div.intro-content {display:none;}
    section.hero-section-mobile {display:block; padding:2em; color:var(--ma1n-mdb1);}
    .services-section {margin-top:0em;}
}
@media (max-width: 900px) {
    .hero-section {padding:20% 0;}    
    .hero-text-block {padding:50px 20px 0 20px; margin: 0 auto;}    
}
@media (max-width:900px) {
    .hero-container {flex-direction: column;}
    .grid-container {gap:10px;}
    .card-content {padding:15px;}
    /*.card-image {height:350px;}*/
}
@media (max-width:800px) {
    .hero-section {padding:19% 0;}
    section.hero-section-mobile {padding:0 2em 2em 2em;}
}
@media (max-width:700px) {
    .hero-section {padding:18% 0;}
    .card-content h3 {line-height:120%;}
    .card-content p {line-height:130%;}
    div.classesinfo {flex-direction:column; gap:0em !important;}
    div.mscinfo {flex-direction:column; gap:2em;}
    .main-title {font-size:2.4rem;}
}
@media (max-width:570px) {
    .main-header {height:140px;}
    section.title-section {margin:140px 0 0 0;}
    .hero-section {margin-top:140px;}
}
@media (max-width:600px) {
    /*div.classes, div.gallery, div.mosaics {margin-top:160px;}*/
    .hero-section {padding:17% 0;}
    .hero-text-block {font-size:1.6rem;}
    .grid-container {gap:3px;}
    .card-content {padding:10px 5px;}
    .explore-btn {text-align:center;}
}
@media (max-width:500px) {
    .card-image {height:250px;}
}
@media (max-width:480px) {
    .gallery-grid {grid-template-columns:1fr; gap:15px;}
    .gallery-container {padding:15px; margin:20px auto;}
    .gallery-container h1 {font-size:1.8em;}
    .card-content h3 {font-size:1.1rem;}
}
@media (max-width:400px) {
    .logo {font-size:1.15rem;}
    /*.main-header {height:155px; padding-top:10px;}
    div.classes, div.gallery, div.mosaics {margin-top:170px;}*/
}