/* Navigation & Global */
nav {background-color : #FFF9F0; padding : 15px;}
nav a {color : #263238; text-decoration : none; margin : 50px;}
body {background-color : #FFF9F0;}
.main-heading {color : #24324A; font-size : 56px; font-weight : 700; text-align : center;}
.main-heading span {color : #A8C9B0;}
h3 {color : #356859; font-size : 30px; margin-top : 0; text-align : center;}
p {color : #263238; font-size : 30px; text-align : center;}
img {width : 550px; height : 550px; object-fit : contain; display : block; margin : 0 auto;}

/* Hero Buttons */
.hero-buttons {display : flex; justify-content : center; align-items : center; gap : 20px; width : 100%; margin : 0 auto;}
.explore-btn, .join-btn {width : 180px; padding : 14px 24px; border : none; border-radius : 50px; font-size : 16px; font-weight : 600; text-decoration : none; text-align : center; display : inline-block; cursor : pointer; transition : all 0.3s ease; box-sizing : border-box;}
.explore-btn {background-color : #356859; color : #FFFFFF;}
.explore-btn:hover {background-color : #2B5548; color : #FFFFFF;}
.join-btn {background-color : #FFE29A; color : #356859;}
.join-btn:hover {background-color : #FFD979; color : #356859;}

/* Spark Section */
.spark-section {background-color : #FFFFFF; padding : 90px 8%; text-align : center;}
.spark-section h2 {color : #356859; font-size : 42px; font-weight : 700; margin : 0 auto 50px; line-height : 1.3;}
.spark-section h2 span {color : #356859;}
.spark-section h2 b {color : #FFE29A; font-weight : 400;}
.spark-cards {display : flex; justify-content : center; align-items : stretch; gap : 28px; max-width : 1000px; margin : 0 auto;}
.spark-card {width : 280px; min-height : 190px; padding : 30px 25px; border-radius : 24px; box-sizing : border-box; display : flex; flex-direction : column; align-items : center; justify-content : center; transition : transform 0.3s ease, box-shadow 0.3s ease;}
.spark-card:hover {transform : translateY(-8px); box-shadow : 0 12px 30px rgba(38, 50, 56, 0.10);}
.explore-card {background-color : #EAF4E8;}
.learn-card {background-color : #FFF4D6;}
.grow-card {background-color : #FCE7EC;}
.spark-icon {font-size : 38px; margin-bottom : 14px;}
.explore-card .spark-icon {color : #356859;}
.learn-card .spark-icon {color : #D49B00;}
.grow-card .spark-icon {color : #D4778A;}
.spark-card h3 {color : #356859; font-size : 24px; margin : 0 0 10px; font-weight : 700;}
.spark-card p {color : #263238; font-size : 17px; margin : 0; line-height : 1.5;}

/* Join / Contact Section */
.join-section {background-color : #EAF4E8; padding : 90px 8%;}
.join-container {max-width : 1150px; margin : 0 auto; display : grid; grid-template-columns : 1fr 0.85fr; gap : 70px; align-items : start;}
.join-content h1 {color : #356859; font-size : 44px; line-height : 1.2; margin : 0 0 18px;}
.join-content h1 span {color : #FFE29A;}
.join-description {color : #263238; font-size : 18px; line-height : 1.7; margin : 0 0 35px; max-width : 600px;}
.skill-form {display : flex; flex-direction : column; gap : 20px;}
.form-group {display : flex; flex-direction : column; gap : 8px;}
.form-group label {color : #356859; font-size : 16px; font-weight : 600;}
.form-group input, .form-group select, .form-group textarea {width : 100%; box-sizing : border-box; background-color : #FFFFFF; border : 1px solid #D8E3D5; border-radius : 12px; padding : 14px 16px; color : #263238; font-family : inherit; font-size : 16px; outline : none; transition : border-color 0.25s ease, box-shadow 0.25s ease;}
.form-group input::placeholder, .form-group textarea::placeholder {color : #7D8985;}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {border-color : #A8CFA8; box-shadow : 0 0 0 3px rgba(168, 207, 168, 0.25);}
.form-group textarea {resize : vertical; min-height : 120px;}
.think-option {color : #356859;}
.create-option {color : #E58B62;}
.express-option {color : #D4778A;}
.discover-option {color : #5798B5;}
.build-option {color : #D49B00;}
.join-submit {width : 100%; margin-top : 8px; padding : 15px 25px; border : none; border-radius : 50px; background-color : #356859; color : #FFFFFF; font-size : 17px; font-weight : 700; cursor : pointer; transition : background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;}
.contact-side {padding-top : 10px;}
.contact-item {display : flex; align-items : center; gap : 18px; margin-bottom : 28px;}
.contact-icon {width : 52px; height : 52px; border-radius : 50%; display : flex; align-items : center; justify-content : center; font-size : 23px; flex-shrink : 0;}
.visit-icon {background-color : #A8CFA8;}
.call-icon {background-color : #FFC6A5;}
.email-icon {background-color : #A9DDF5;}
.contact-item h3 {color : #356859; margin : 0 0 5px; font-size : 20px;}
.contact-item p {color : #263238; margin : 0; font-size : 16px;}
.contact-item a {color : #263238; text-decoration : none;}
.contact-item a:hover {color : #356859;}
.map-container {width : 100%; height : 300px; margin-top : 35px; overflow : hidden; border-radius : 20px; border : 5px solid #FFFFFF; box-shadow : 0 10px 30px rgba(38, 50, 56, 0.10);}
.map-container iframe {width : 100%; height : 100%; border : 0;}

/* Footer */
.footer {background-color : #356859; color : #FFFFFF; padding : 65px 8% 25px;}
.footer-container {max-width : 1150px; margin : 0 auto; display : grid; grid-template-columns : 1.5fr 1fr 1fr; gap : 60px;}
.footer-brand h2 {color : #FFFFFF; font-size : 30px; margin : 0 0 12px;}
.footer-brand p {color : #EAF4E8; font-size : 16px; margin : 0;}
.footer-column {display : flex; flex-direction : column; gap : 12px;}
.footer-column h3 {color : #FFFFFF; font-size : 18px; margin : 0 0 8px;}
.footer-column a {color : #FFFFFF; text-decoration : none; font-size : 15px; transition : color 0.25s ease, transform 0.25s ease;}
.footer-bottom {max-width : 1150px; margin : 50px auto 0; padding-top : 22px; border-top : 1px solid rgba(234, 244, 232, 0.25); text-align : center;}
.footer-bottom p {color : #C8E0D4; font-size : 14px; margin : 0;}
@media (max-width : 850px) {.join-section {padding : 70px 6%;} .join-container {grid-template-columns : 1fr; gap : 50px;} .join-content h1 {font-size : 36px;} .footer-container {grid-template-columns : 1fr 1fr; gap : 40px;} .footer-brand {grid-column : 1 / -1;}}
@media (max-width : 550px) {.join-content h1 {font-size : 31px;} .join-description {font-size : 16px;} .footer-container {grid-template-columns : 1fr;} .footer-brand {grid-column : auto;} .map-container {height : 250px;}}

/* Philosophy (About.html) */
.philosophy {background-color : #FFF9F0; padding : 60px 40px; text-align : center;}
.philosophy h1 {color : #356859; font-size : 36px; margin-bottom : 20px;}
.philosophy > p {color : #263238; font-size : 17px; line-height : 1.6; max-width : 750px; margin : auto;}
.philosophy h2 {color : #356859; font-size : 26px; margin-top : 40px; margin-bottom : 30px;}
.flow {display : flex; justify-content : center; align-items : center; gap : 15px;}
.step {width : 160px; padding : 25px 15px; border-radius : 20px;}
.step h3 {color : #356859; margin-top : 0;}
.step p {color : #263238;}
.curiosity {background-color : #FFE29A;}
.exploration {background-color : #FFC6A5;}
.skill {background-color : #A9DDF5;}
.confidence {background-color : #A8CFA8;}
.arrow {color : #356859; font-size : 30px; font-weight : bold;}

/* Discover Section (About.html) */
.discover-section {background-color : #FFFFFF; padding : 80px 8%; text-align : center;}
.discover-section h2 {color : #356859; font-size : 42px; margin-bottom : 45px;}
.discover-cards {display : flex; justify-content : center; align-items : stretch; gap : 28px; max-width : 1000px; margin : 0 auto;}
.discover-cards .discover-card {background-color : #FFFFFF; width : 280px; min-height : 200px; padding : 30px 25px; border : 1px solid #E8E1D6; border-radius : 20px; box-sizing : border-box; display : flex; flex-direction : column; align-items : center; justify-content : center; transition : transform 0.3s ease, box-shadow 0.3s ease;}
.discover-cards .discover-card:hover {transform : translateY(-8px); box-shadow : 0 12px 30px rgba(38, 50, 56, 0.10);}
.discover-cards .discover-icon {width : 60px; height : 60px; border-radius : 50%; display : flex; align-items : center; justify-content : center; font-size : 30px; margin-bottom : 18px; background-color : #A9DDF5;}
.discover-cards .develop-icon {background-color : #FFC6A5;}
.discover-cards .express-icon {background-color : #F4B6C2;}
.discover-cards .discover-card h3 {color : #356859; font-size : 24px; margin : 0 0 10px;}
.discover-cards .discover-card p {color : #263238; font-size : 17px; line-height : 1.5; margin : 0;}
@media (max-width : 850px) {.discover-cards {flex-wrap : wrap;}}
@media (max-width : 550px) {.discover-section {padding : 60px 6%;} .discover-section h2 {font-size : 32px;} .discover-cards {flex-direction : column; align-items : center;} .discover-cards .discover-card {width : 100%; max-width : 350px;}}

/* Skill Zone Section (Services.html) */
.skill-zone {background-color : #FFFFFF; padding : 80px 8% 30px; text-align : center;}
.skill-zone h2 {color : #356859; font-size : 42px; font-weight : 700; margin : 0 0 20px;}
.skill-zone h2 span {color : #C8B6E8;}
.skill-zone p {color : #263238; font-size : 18px; line-height : 1.6; margin : 0 auto;}
.skill-zone-section {background-color : #FFFFFF; padding : 30px 8% 90px; display : flex; justify-content : center;}
.skill-cards-container {display : flex; flex-wrap : wrap; justify-content : center; gap : 30px; max-width : 1200px; margin : 0 auto; width : 100%;}
.skill-zone-card {width : 350px; padding : 35px; border-radius : 24px; box-sizing : border-box; display : block; border : none; text-align : left; transition : transform 0.3s ease, box-shadow 0.3s ease; cursor : pointer;}
.skill-zone-card:hover {transform : translateY(-8px); box-shadow : 0 16px 36px rgba(38, 50, 56, 0.12);}
.skill-zone-card h2 {color : #356859; font-size : 18px; margin : 0 0 8px; letter-spacing : 2px; text-align : left;}
.skill-zone-card h3 {color : #356859; font-size : 27px; margin : 0 0 12px; text-align : left;}
.skill-zone-card p {color : #263238; font-size : 17px; line-height : 1.5; text-align : left; margin : 0 0 25px;}
.skill-zone-card h4 {color : #356859; font-size : 17px; margin : 20px 0 10px; text-align : left;}
.skill-zone-card ul {color : #263238; padding-left : 20px; margin : 0; text-align : left;}
.skill-zone-card li {font-size : 16px; margin-bottom : 8px;}
.skill-icon, .create-icon, .express-icon, .discover-icon, .build-icon {width : 65px; height : 65px; border-radius : 50%; display : flex; align-items : center; justify-content : center; font-size : 34px; margin-bottom : 18px;}
.accent-line, .create-accent, .express-accent, .discover-accent, .build-accent {width : 50px; height : 5px; border-radius : 5px; margin-bottom : 20px;}
.skills-tags {display : flex; flex-wrap : wrap; gap : 8px;}
.skills-tags span {padding : 7px 12px; border-radius : 20px; font-size : 14px; font-weight : 600; color : #356859; transition : transform 0.2s ease;}
.skills-tags span:hover {transform : translateY(-2px);}

/* Skill Zone Palettes */
.think-card {background-color : #FFF4D6;}
.think-card .skill-icon, .skill-icon {background-color : #FFE29A;}
.think-card .accent-line, .accent-line {background-color : #FFE29A;}
.think-card .skills-tags span {background-color : #FFE29A;}

.create-card {background-color : #FFF0E8;}
.create-icon {background-color : #FFC6A5; color : #E58F62;}
.create-accent {background-color : #FFC6A5;}
.create-card .skills-tags span {background-color : #FFC6A5;}

.express-card {background-color : #FCE7EC;}
.express-icon {background-color : #D4778A;}
.express-accent {background-color : #F4B6C2;}
.express-card .skills-tags span {background-color : #F4B6C2;}

.discover-card {background-color : #E8F6FC;}
.discover-icon {background-color : #4FA8CF;}
.discover-accent {background-color : #A9DDF5;}
.discover-card .skills-tags span {background-color : #A9DDF5;}

.build-card {background-color : #F0EBFA;}
.build-icon {background-color : #8065B0;}
.build-accent {background-color : #C8B6E8;}
.build-card .skills-tags span {background-color : #C8B6E8;}

/* Testimonials Section (Testimonials.html) */
.testimonials-section {background-color : #FFFFFF; padding : 80px 5%; text-align : center;}
.testimonials-header h2 {color : #356859; font-size : 38px; font-weight : 700; margin : 0 0 12px;}
.testimonials-header p {color : #263238; font-size : 16px; margin : 0 0 50px;}
.testimonials-container {max-width : 1100px; margin : 0 auto; display : flex; justify-content : center; align-items : stretch; gap : 25px;}
.testimonial-card {background-color : #FFF9F0; width : 31%; min-height : 270px; padding : 40px 30px; border-radius : 20px; text-align : left; position : relative; box-sizing : border-box; display : flex; flex-direction : column; justify-content : center; transition : transform 0.3s ease, box-shadow 0.3s ease; cursor : pointer;}
.testimonial-card:hover {transform : translateY(-8px); box-shadow : 0 16px 36px rgba(38, 50, 56, 0.12);}
.testimonial-accent {position : absolute; top : 0; left : 0; width : 100%; height : 7px; border-radius : 20px 20px 0 0;}
.accent-orange {background-color : #FFC6A5;}
.accent-blue {background-color : #A9DDF5;}
.accent-green {background-color : #A8CFA8;}
.testimonial-stars {color : #F2B84B; font-size : 22px; letter-spacing : 4px; margin-bottom : 20px;}
.testimonial-text {color : #263238; font-size : 15px; line-height : 1.7; margin : 0 0 25px;}
.testimonial-author {color : #356859; font-size : 14px; font-weight : 600; margin : 0;}
.testimonial-navigation {margin-top : 35px; display : flex; justify-content : center; align-items : center; gap : 18px;}
.testimonial-arrow {width : 40px; height : 40px; border : 2px solid #356859; border-radius : 50%; background-color : #FFFFFF; color : #356859; font-size : 20px; display : flex; justify-content : center; align-items : center; cursor : pointer; transition : 0.3s ease;}
.testimonial-page {color : #356859; font-size : 15px; font-weight : 600;}
.active-number {color : #356859;}
.testimonial-indicators {display : flex; justify-content : center; align-items : center; gap : 8px; margin-top : 15px;}
.indicator {width : 8px; height : 8px; border-radius : 50%; background-color : #D9D9D9;}
.indicator.active {width : 10px; height : 10px; background-color : #A8CFA8;}
@media (max-width : 900px) {.testimonials-container {flex-wrap : wrap;} .testimonial-card {width : 45%;} .testimonial-card:last-child {width : 45%;}}
@media (max-width : 600px) {.testimonial-card {width : 100% !important;}}

/* Why Skill Nest Section (Reason.html) */
.why-skill-nest {background-color : #FFF9F0; padding : 80px 5%; text-align : center;}
.why-skill-header {max-width : 750px; margin : 0 auto 50px;}
.why-skill-header h2 {color : #356859; font-size : 38px; font-weight : 700; margin : 0 0 15px;}
.why-skill-header p {color : #263238; font-size : 16px; line-height : 1.7; margin : 0;}
.why-skill-cards {max-width : 1150px; margin : 0 auto; display : flex; justify-content : center; align-items : stretch; gap : 25px; flex-wrap : nowrap;}
.why-skill-card {background-color : #FFFFFF; width : 25%; min-height : 270px; padding : 35px 25px; border-radius : 20px; box-sizing : border-box; display : flex; flex-direction : column; align-items : center; justify-content : flex-start; text-align : center; transition : transform 0.3s ease, box-shadow 0.3s ease; cursor : pointer;}
.why-skill-card:hover {transform : translateY(-8px); box-shadow : 0 16px 36px rgba(38, 50, 56, 0.12);}
.why-skill-icon {width : 65px; height : 65px; border-radius : 50%; display : flex; align-items : center; justify-content : center; font-size : 30px; margin-bottom : 25px;}
.icon-green {background-color : #A8CFA8;}
.icon-purple {background-color : #C8B6E8;}
.icon-blue {background-color : #A9DDF5;}
.icon-yellow {background-color : #FFE29A;}
.why-skill-content h3 {color : #356859; font-size : 20px; font-weight : 700; margin : 0 0 12px;}
.why-skill-content p {color : #263238; font-size : 14px; line-height : 1.7; margin : 0;}
@media (max-width : 1000px) {.why-skill-cards {flex-wrap : wrap;} .why-skill-card {width : 45%;}}
@media (max-width : 600px) {.why-skill-nest {padding : 60px 20px;} .why-skill-header {margin-bottom : 35px;} .why-skill-header h2 {font-size : 30px;} .why-skill-header p {font-size : 14px;} .why-skill-cards {flex-direction : column; align-items : center; gap : 20px;} .why-skill-card {width : 100%; max-width : 380px; min-height : auto; padding : 30px 25px;}}