/*MOBILE AND ONWARD - max-width: 600px */
:root {
--primary-color: #38618C ;
--accent: #35A7FF;
--secondary-color: #FFE74C;
--highlight-color: #FF5964;
--background: #FFFFFF;
--font-primary: 'Roboto', 'Lato', sans-serif;
--font-secondary: 'Lato', 'Roboto', sans-serif;
}

html, body {
height: 100%;
font-family: var(--font-secondary);
margin: 0;
padding: 0;
}

*, *::before, *::after {
box-sizing: border-box;
}


h1, h2, h3 {
font-size: 1.5rem;
font-family: var(--font-secondary);
}

p, button, a, .cta-button {
font-size: 1.5rem;
font-style: var(--font-secondary);
}


@media screen and (max-width: 600px)  {
/* BODY */
body {
margin: 0;
padding: 0;
overflow-x: hidden;
}

/* LOGO */
.logo {
text-align: center;
padding: 15px 10px;
}

.logo-img {
max-width: 100px;
height: auto;
display: block;
margin-left: 10px;
}

.logo h1 {
font-size: 1.2rem;
margin: 12px 0 8px;
color: var(--primary);
position: relative;
display: inline-block;
}

.logo h1::after {
content: "";
display: block;
width: 100%;
height: 2px;
background-color: var(--primary);
margin-top: 6px;
}

/* HEADINGS */
h1, h2, h3 {
font-size: 1rem;
margin: 15px 0;
line-height: 1.4;
}


/* WELCOME SECTION */
.welcome {
text-align: center;
}
.welcome h1 {
font-size: 1.5rem;
white-space: normal; /* corrected from 'wrap' */
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
margin: 0;
position: relative; 
top: -2rem;
}

.welcome p {
font-size: 1rem;
margin: 0 0 0 0;
}

/* NAVBAR */
@media screen and (max-width: 600px) {
.navbar {
position: fixed;
top: 0;
right: -250px; /* Hidden off-screen */
width: 250px;
height: 100vh;
background-color: var(--background);
box-shadow: 2px 0 5px var(--primary);
overflow-y: auto;
transition: right 0.3s ease;
z-index: 1000;
display: flex;
flex-direction: column;
border-top: 1px solid var(--primary);
border-radius: 10px;
}

}

.navbar.active {
right: 0;  
display: flex;
width: 60%;  
max-width: none;
margin: 0;
padding-top: 1.5rem;
background-color: var(--primary-color);
flex-direction: column;
box-sizing: border-box;
font-weight: bold;
}

/* 
.navbar {
display: none;
} */

.navbar a {
display: block;
text-align: center;
padding: 8px 0;
font-size: 1.1rem;
color: var(--secondary-color);
text-decoration: none;
margin-right: 0 !important;
margin-left: 0 !important;

}


/* Hamburger menu button */
.hamburger {
margin-top: -1rem;
margin-right: .5rem;
display: block;
cursor: pointer;
font-size: 3rem;
background: none;
border: none;
color: var(--primary);
padding: 10px 20px;
}

.about-intro h1{
padding-top: .8rem !important;
}

/* GENERAL SECTIONS (welcome, hero, mission, cta, services) */
.welcome,
.hero,
.nested-hero,
.mission-vision,
.cta-cont,
.cta,
.services-overview,
.service-item {
max-width: 600px;
width: 100%;
margin: 0 auto;
padding: 10px;
box-sizing: border-box;
text-align: center;
}

/* Paragraphs and buttons */
p,
.cta-button {
font-size: 1rem;
line-height: 1.5;
}

.welcome_hero {
display: grid;
grid-template-columns: 1fr;
}

.services-overview {
display: grid;
grid-template-columns: 1fr;
}

/* Mission & Vision stacked vertically */
.mission-vision {
display: flex;
flex-direction: column;
gap: 15px;
padding-top: 20px;
padding-bottom: 20px;
}

.mission-vision > div {
padding: 10px;
border-radius: 8px;
text-align: center;
}

/* Hero image responsive */
.hero-img {
width: 100%;
max-width: 600px;
height: auto;
display: block;
margin: 0 auto;
margin-top: -3rem;
}

/* CTA Section */
.cta-cont {
width: 80%;
margin: 0 auto;
}


.cta {
padding: 30px 20px;
border-radius: 16px;
}

.cta-button-wrapper {
margin-top: 20px;
}

.cta-button {
padding: 12px 20px;
font-size: 1rem;
border-radius: 8px;
display: inline-block;
}

/* Services stacked in one column */
.services-overview {
display: flex;
flex-direction: column;
gap: 20px;
padding-bottom: 30px;
}

.service-item {
padding: 20px;
border-radius: 8px;
text-align: center;
box-shadow: 0 2px 6px var(--primary);
}

/* Services*/
.offers {
max-width: 600px;
box-sizing: border-box;
border-radius: 8px;
border: 2px solid var(--accent);
text-align: center;
background: var(--background);
}

.services-page h1 {
font-size: 2rem; 
margin-top: -1.2rem;
}

.services-page p{
font-size: 1rem;
margin: 0 1rem;
padding-bottom: 1rem;
}


.service-offers {
display: grid;
grid-template-columns: 1fr;
margin-left: .5rem;
margin-right: .5rem;
}

.service-offers p {
font-size: 1rem;
}

/* PORTFOLIO */
.heading-portfolio,
.portfolio-grid,
.project-card {
width: 100% !important;
max-width: 100% !important;
margin: 0 auto !important;
padding: 15px !important;
box-sizing: border-box !important;
text-align: center !important;
}

.project {
display: grid;
grid-template-columns: 1fr;
grid-gap: .1rem;
margin-top: -1rem;
}


.project-card h2 {
font-size: 1.2rem !important;
margin-bottom: 10px !important;
}

.heading-portfolio h1 {
font-size: 2rem !important;
margin-top: -2rem;
}

.heading-portfolio p,
.project-card p {
font-size: 1rem !important;
line-height: 1.5 !important;
margin-bottom: 15px !important;
}

.project-card img {
width: 100% !important;
height: auto !important;
display: block !important;
margin: 0 auto 10px auto !important;
max-width: 100% !important;
border-radius: 5px;
}

.project-card a {
display: inline-block !important;
font-size: 1rem !important;
margin-top: 10px !important;
color: var(--accent);
text-decoration: none !important;
}

.project-card a:hover {
text-decoration: underline !important;
}

.portfolio-grid {
display: block !important;
}

.project-card {
margin-bottom: 30px !important;
border: 1px solid var(--background);
border-radius: 8px;
background-color: var(--background);
}

/* ABOUT US PAGE */
main.about-page,
section.about-intro,
section.founder-section,
section.why-choose-us,
section.values-section {
max-width: 600px !important;
width: 100% !important;
margin: 0 auto !important;
padding: 0 15px !important;
box-sizing: border-box !important;
text-align: center !important;
overflow-wrap: break-word !important;
word-break: break-word !important;
}

main.about-page h1,
main.about-page h2,
main.about-page h3,
section,
section.founder-section h2,
section.why-choose-us h2,
section.values-section h2 {
font-size: 2rem !important;
margin: 15px 0 10px !important;
}

main.about-page p,
section.about-intro p,
section.founder-section p,
section.why-choose-us p,
section.values-section ul {
font-size: 1rem !important;
line-height: 1.4 !important;
max-width: 100% !important;
}

.values-section ul {
list-style-type: none !important;
padding-left: 0 !important; /* remove left padding */
margin-left: 0 !important;  /* remove left margin */
}

.values-section ul li {
text-align: center !important;
margin-left: -2rem !important;
}


.about-intro h1 {
font-size: 2rem;
margin-top: -2rem;
}

.founder-section h2,
.why-choose-us h2 {
padding-top: 10px;
}

.founder-section p,
.why-choose-us p {
padding-bottom: 10px;
}

section.values-section ul {
padding-left: 20px !important;
text-align: left !important;
margin: 0 auto 20px !important;
}

.values-section h2 {
padding-top: 30px;
padding-bottom: 10px;
}

.founder-section img.founder-photo {
max-width: 200px !important;
width: 80% !important;
height: auto !important;
margin: 15px auto 20px !important;
display: block !important;
border-radius: 50% !important;
object-fit: contain !important;
}

main.about-page * {
max-width: 100% !important;
box-sizing: border-box !important;
}

/* CONTACT PAGE */
.contact-page .contact-info {
padding-bottom: 2rem;
}

.contact-page .contact-info  h2 {
font-size: 1.8rem;
border-bottom: 1px solid var(--primary);
}

.contact-info p {
text-align: center;  
}


.get-in-touch h1 {
font-size: 2rem;
margin-top: -2rem;
}

.get-in-touch p {
margin: 0 1rem;
}

/*for the contact form setting*/
.contact-form {
width: 350px;          
margin: 0 auto !important;         
padding: 1rem;
background-color: var(--accent);
border-radius: 1rem;
border: 1px solid var(--primary);
box-sizing: border-box;
}

.contact-form h2 {
font-size: 1.5rem;
}


.contact-form fieldset {
border: none;
margin-bottom: 1rem;
padding: 0;
text-align: left;
}

.contact-form label {
display: block;
font-size: 1rem;
margin-bottom: 0.25rem;
text-align: left;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
max-width: 300px;     
padding: 0.75rem;
font-size: 1rem;
border: 1px solid var(--background);
border-radius: 0.25rem;
box-sizing: border-box;
margin-bottom: 1rem;
}

.reason label, select{
margin-left: -1.2rem;
}

#proj1 {
cursor: pointer;
}

#proj2 {
cursor: pointer;
}

#proj3 {
cursor: pointer;
}

#proj4 {
cursor: pointer;
}

#proj5 {
cursor: pointer;
}

#proj6 {
cursor: pointer;
}

.response1 p, .response2 p {
font-size: 1.2rem;
margin-left: 1rem;
margin-right: 1rem;
}

.hoy p {
border: 0.2rem solid var(--primary);  
margin-right: 1rem;
margin-left: 1rem;
border-radius: 1rem;
padding-top: 2rem;
padding-bottom: 2rem;
font-size: 1.2rem;
background-color: var(--secondary-color);
}



/* NEW FOOTER */
.newsletter form {
display: flex;
flex-direction: column;
gap: 10px;
align-items: center;
width: 100%;
max-width: 95%;  
margin: 0 auto;
}

.newsletter input,
.newsletter button {
width: 100%;         
max-width: 100%;     
padding: 10px;
border: none;
border-radius: 5px;
font-size: 1rem;
box-sizing: border-box;  
}

.privacy-container {
width: 100%;        
margin: 0 auto;       
padding-left: 1rem !important;   
padding-right: 1rem !important;
box-sizing: border-box;
max-width: 600px;
}

.privacy-container a {
word-break: break-word;
overflow-wrap: anywhere;
}


.privacy-container h1 {
font-size: 1.8rem;
}

.privacy-container h2 {
font-size: 1.4rem;
}

.privacy-container p,
.privacy-container li {
font-size: 1rem;
line-height: 1.6;
}

/*CLOSE BUTTON8*/
.close-btn {
display: block;
position: absolute;
top: 15px;
right: 15px;
background: var(--secondary-color);
border: 1px solid var(--background);
font-size: 20px;
cursor: pointer;
color: var(--primary);
z-index: 1001;
width: 2.3rem;
height: 2.3rem;
font-weight: bold;
}

/*ADDITIONAL IN NAV MENU OF MOBILE VIEW*/
.contact-info-mobile,
.social-links-mobile {
flex-direction: column;
margin-top: .2rem;
text-align: center;
color: var(--secondary-color);
}

/* Show only on mobile and when nav menu is active */
.navbar.active .contact-info-mobile,
.navbar.active .social-links-mobile {
display: flex;
}

.social-links-mobile {
flex-direction: column;
justify-content: center;
}

.navbar a.active .contact-info-mobile,
.navbar a.active .social-links-mobile {
display: flex;
}

/*FAQS*/
.faq-container {
margin-left: .5rem;
}

.faq-container h1 {
font-size: 1.7rem;
margin-left: .2rem;
}

.faq-item {
margin-bottom: 1rem; /* space  each FAQ block h2 */
}


.faq-item h2 {
display: inline;  
cursor: pointer;
user-select: none;
color: var(--primary-color);
font-weight: bold;
font-size: 1rem;
margin-left: .1rem;
}


.faq-item h2::after {
content: " ▼";
font-size: 1.2em;
display: inline-block;
transition: transform 0.3s ease;
color: var(--primary-color);
vertical-align: middle;
}


.faq-item.active h2::after {
transform: rotate(180deg);
}

.faq-item p {
display: none;
}

.faq-item.active p {
display: block;
text-align: left;
margin-top: -3px;
margin-left: .6rem;
}
}