@charset "utf-8";

/* Font  */
.gowun-dodum-regular {
font-family: "Gowun Dodum", sans-serif;
font-weight: 400;
font-style: normal;
}

body {
font-family: "Gowun Dodum", sans-serif;
font-weight: 400;
font-style: normal;
line-height: 1.5;
background: #fff;
}

.wrapper {
max-width: 1000px;
margin: 0 auto;
}

/* Banner / Header */
#banner {
position: relative;
width: 100%;
text-align: left;
}

#banner-img {
width: 100%;
height: auto;
display: block;
}

#logo {
position: absolute;
top: 7%;
left: 1%;
height: 85%;
width: auto;
}

#banner h1 {
position: absolute;
top: 12%;
left: 33%;
font-size: clamp(0rem, 8vw, 5rem);
line-height: 1.1;
height: 50%;
margin: 0;
text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}

/* Navigation */
.main-nav {
background: #61C0BF;
text-align: center;
}

.main-nav ul {
list-style: none;
display: flex;
flex-wrap: wrap;
justify-content: center;
}

.main-nav li {
margin: 0 15px;
}

.main-nav a {
text-decoration: none;
color: #000;
font-weight: 800;
padding: 10px 0;
display: inline-block;
}

.main-nav a:hover {
text-decoration: underline;
}

.main-nav a:visited {
color: #FFFFFF;
}

/* Main Content */
main {
padding: 20px;
background: #FAE3D9;
}

/* Introduction  */
.introduction {
text-align: center;
margin-bottom: 40px;
}

.introduction h2 {
font-size: 1.8em;
font-weight: 800;
margin-bottom: 20px;
}

.intro-box {
background: #BBDED6;
padding: 20px;
border-radius: 5px;
max-width: 800px;
margin: 0 auto;
font-size: clamp(1rem, 2vw, 1.25rem);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/*   Featured Kitty Section */
.featured-kitty {
text-align: center;
margin-bottom: 40px;
padding: 40px 0;
}

.featured-kitty h2 {
font-size: 1.8em;
font-weight: 800;
margin-bottom: 20px;
}

.feature-content {
display: flex;
align-items: stretch;
gap: 20px;
max-width: 800px;
margin: 0 auto;
}

.feature-text {
flex: 0 0 50%;
background: #BBDED6;
padding: 20px;
border-radius: 5px;
font-size: clamp(1rem, 2vw, 1.25rem);
line-height: 1.4;
text-align: center;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.feature-image {
flex: 1;
display: flex; 
align-items: center; 
justify-content: center; 
overflow: hidden;
border-radius: 5px;
background: #FAE3D9;
}

.feature-image img {
width: 100%;
height: 100%;
object-fit: contain;
background: #FAE3D9;
}

/* Two Column Layout   */
.two-column-layout {
display: flex;
gap: 20px;
margin: 0 auto;
}

.column {
flex: 1;
background: #FAE3D9;
padding: 20px;
border-radius: 5px;
text-align: center;
}

.column h2 {
font-size: 1.5em;
font-weight: bold;
margin-bottom: 10px;
}

.text-box {
background: #BBDED6;
padding: 15px;
border-radius: 5px;
font-size: 1em;
line-height: 1.5;
text-align: justify;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Weekly Cats Page */
#weekly-cats-main {
display: flex;
flex-direction: column;
justify-content: flex-start;
min-height: 920px;
padding: 20px;
background: #FAE3D9;
}

#weekly-cats-main .del-slider img {
width: 30%;
height: auto;
margin: 0 auto;
display: block;
}

/* Subscribe Section */
.subscribe-section {
margin-top: auto;
text-align: center;
background: #BBDED6;
padding: 30px 20px;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.subscribe-section h2 {
font-size: 2rem;
color: #000;
margin-bottom: 10px;
}

.subscribe-section p {
font-size: 1.2rem;
color: #333;
margin-bottom: 20px;
}

/* Subscribe Button */
.subscribe-button {
background: #2545E7;
color: #fff;
font-size: 1.1rem;
font-weight: bold;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background 0.3s ease;
}

.subscribe-button:hover {
background: #4da6a6;
}

/* Subscribe Form */
.subscribe-main {
background: #FAE3D9;
padding: 40px 20px;
text-align: center;
}

.subscribe-title {
font-size: 2rem;
font-weight: 800;
margin-bottom: 20px;
color: #333;
}

.subscribe-container {
display: flex;
flex-wrap: wrap;
gap: 20px;
max-width: 900px;
margin: 0 auto;
align-items: center;
justify-content: center;
}

.subscribe-form {
background: #BBDED6;
padding: 30px;
border-radius: 8px;
flex: 1;
min-width: 280px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.subscribe-form h3 {
font-size: 1.2rem;
margin-bottom: 15px;
color: #333;
}

.form-group {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 15px;
}

.form-group input {
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 1rem;
}

.subscribe-note {
margin-top: 10px;
font-size: 0.9rem;
color: #333;
}

/* Subsribe Image */
.subscribe-image {
flex: 1;
display: flex; 
align-items: center; 
justify-content: center; 
overflow: hidden;
border-radius: 5px;
background: #FAE3D9;
}

.subscribe-image img {
width: 100%;
height: 100%;
object-fit: contain;
background: #FAE3D9;
}

/* Than You Page */
.thankyou-main {
padding: 40px 20px;
background: #FAE3D9;
text-align: center;
}

.thankyou-container {
max-width: 900px;
margin: 0 auto;
}

.thankyou-header {
font-size: 2.5rem;
font-weight: bold;
background: #FFB6C1;
color: #fff;
padding: 20px 10px;
border-radius: 8px;
margin-bottom: 30px;
}

.thankyou-content {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: center;
align-items: stretch;
}

.thankyou-message {
flex: 1;
background: #FFB6C1;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
font-size: 1.1rem;
line-height: 1.6;
color: #fff;
text-align: center;
}

.thankyou-image {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

.thankyou-image img {
max-width: 100%;
height: auto;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Call to Action */
.landing-intro {
text-align: center;
padding: 20px;
background: #BBDED6;
}

.landing-intro h2 {
font-size: 1.8rem;
font-weight: bold;
margin-bottom: 15px;
}

.landing-box {
background: #FFB6C1;
padding: 15px 20px;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
color: #fff;
font-size: 1.1rem;
line-height: 1.5;
}

.featured-cats h3 {
text-align: center;
padding-top: 20px;
font-size: 1.5rem;
font-weight: bold;
margin-bottom: 15px;
}

.cats-gallery {
display: flex;
gap: 10px;
justify-content: center;
flex-wrap: wrap;
}

.cats-gallery img {
width: 30%;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
object-fit: cover;
}

/* Footer */
footer {
background: #61C0BF;
text-align: center;
padding: 20px;
font-size: 0.9em;
}

footer a {
color: #000;
text-decoration: none;
}

footer a:hover {
text-decoration: underline;
}