: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, input, button, label {
height: 100%;
font-family: var(--font-secondary);
margin: 0;
padding: 0;
/* overflow-x: hidden; pastilan, this fixed all the problem of horizontal swiping */
}



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

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

p {
align-items: center;
}

.header {
display: flex;
align-items: center;
justify-content: space-between; /* Logo left, nav & hamburger right */
padding-top: 1rem !important;
background-color: var(--accent);
padding-bottom: 1rem !important;
margin-bottom: 1rem ;
}


.logo {
display: flex;
align-items: center;
gap: 0.75rem;

}

.logo-img {
max-width: 100px;
height: auto;
border-radius: 50%;
margin-left: 5rem;

}


.hamburger {
display: none;
font-size: 2rem;
background: none;
border: none;
cursor: pointer;
}

/* Nav links */
.navbar {
display: flex;
gap: 1rem;
}

.navbar a {
text-decoration: none;
color: var(--background);
font-weight: bold;
padding: 0.5rem 0;
margin-right: 5rem;
margin-left: -3rem;
text-align: center;
}


.contact-link {
background-color:var(--highlight-color);
border: 2px solid var(--primary-color);
border-radius: 4px;
box-shadow: 0 4px 6px var(--primary-color);
}

nav a.contact-link {
color: var(--background);
padding-right: 1rem;
padding-left: 1rem;
font-size: 1.2rem;
font-weight:bold;
}


.navbar a.active {
font-weight: 700;
color: var(--secondary-color);
}


.navbar a:hover {
color: var(--secondary-color);  
}


.welcome_hero {
display: grid;
padding-top: 2rem;
grid-template-columns: 1fr 1fr;  
gap: 20px;                      
margin-left: 1rem;
margin-right: 1rem;
align-items: center;            
box-sizing: border-box;
padding-bottom: 1rem;
}


.hero-img {
width: 100%;
height: auto;
display: block;
border-radius: 10px;   
}

.welcome h1 {
font-size: 2rem;
margin-bottom: 1rem;
text-align: center;
}

.welcome p {
font-size: 1.3rem;
line-height: 1.5;
text-align: justify;
}

.welcome p::first-letter {
font-size: 3rem;        
font-weight: bold;      
float: left;            
line-height: 1;         
margin-right: 0.1em;    
color: var(--accent);   
}




.mission-vision {
display: grid;
grid-template-columns: repeat(2, 1fr);  
gap: 20px;  
margin-left: 1rem;
margin-right: 1rem;
padding-bottom: 2rem;
}

.mission-vision > div {
flex: 1;
padding: 10px;
background-color: var(--accent);
border-radius: 8px;
text-align: center;  
}

.mission-vision > div p {
text-align: justify;  
margin-top: 10px;
}

.cta-cont {
border: 1rem solid var(--accent);
width: 60vw;                      
margin: 0 auto;                   
background-color: var(--secondary-color);
display: flex;
justify-content: center;         
align-items: center;             
box-sizing: border-box;
padding-bottom: 3rem;             
border-radius: 1rem;
margin-bottom: 1rem; 
padding-top: 1rem;
}


.cta {
text-align: center;
border-radius: 20px;
font-family: var(--font-primary); 
}

.cta-button {
background-color: var(--background);
border-radius: .5rem;
padding-left: 2rem;
padding-right: 2rem;
padding-bottom: .5rem;
padding-top: .5rem;

}


.cta-button:hover {
background-color: var(--accent);
color: var(--background);
}

.services-overview {
display: grid;
gap: 1rem;
grid-template-columns: repeat(3, 1fr);  
margin: 1rem auto;
padding: 20px;
box-sizing: border-box;
}

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


footer {
margin-top: 10px;
text-align: center;          
display: flex;               
flex-direction: column;       
align-items: center;         
justify-content: center;
padding: 20px;
background-color: var(--background);
}


/* Default desktop */
h1 {
font-size: 2.5rem;
}
.services-page p {
text-align: center;
font-size: 1.5rem;
justify-content: center;
}

/* PORTFOLIO */
.heading-portfolio h1, p {
text-align: center;
}

.project-card h2, p {
text-align: center;
font-size: 1.4rem;
}

.project-card p{
margin-top: -1rem;
}

.project-card a {
display: block;        
margin: 1rem auto 0; 
width: max-content;     
text-align: center; 
font-size: 1.2rem;    
margin-top: -1.5rem;
}

.project {
width: 100%;   
max-width: 100vw;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
box-sizing: border-box;
padding: 1rem;
overflow-x: hidden;  
}

.project img {
width: 100%;      
height: auto;     
border-radius: 8px;  
object-fit: cover;  
border: .2rem solid var(--accent) ;
}

/* ABOUT PAGE */
.about-intro {
text-align: center;
font-size: 1.5rem;  
}

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

.about-intro p {
text-align: center;       
width: 1060px;          
margin: 0 auto;          
}


.about-intro h1 {
text-align: center;
}


.values-section {
padding-top: 20px;
text-align: justify;
text-align: center;
font-size: 1.5rem;  
}

.values-section ul {
max-width: 800px;       
margin: 0 auto;         
padding: 0 20px;        
list-style-position: inside; 
padding-bottom: 20px;

}

.values-section ul li {
padding-left: 10px; 
text-indent: 3rem;   
text-align: left;
margin-bottom: 12px;
}


.why-choose-us{
text-align: center;
font-size: 1.5rem;  
padding-top: 1rem;
padding-bottom: 1rem;
}

.why-choose-us p {
text-align: center;      
width: 1060px;           
margin: 0 auto;          
padding-bottom: 1rem;
}


.founder-section {
background-color: var(--accent); 
color: var(--primary);  
padding: 20px;
border-radius: 8px;
max-width: 1200px;
margin: 40px auto;
text-align: center;
box-shadow: 0 4px 10px var(--primary-color);
font-family: var(--font-secondary, sans-serif);
}

.founder-section h2 {
font-size: 2rem;
margin-bottom: 15px;
}

.founder-section p {
font-size: 1.2rem;
line-height: 1.6;
margin-top: 20px;
}

.founder-photo {
max-width: 200px;
width: 100%;
height: auto;
border-radius: 50%;
object-fit: cover;
margin-bottom: 20px;
border-radius: 50%;
}

/* CONTACT US SECTION */
.get-in-touch {
font-size: 1.5rem;
text-align: center;
}

.get-in-touch h1 {

font-size: 2.5rem;
text-align: center;
}


.contact-info {
padding-top: 20px;
font-size: 1.5rem;
text-align: center;
}

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

}

fieldset{
border: none;
display: block;
width: 50%;
padding-right: 2rem;
margin: 0 auto 1.5rem;  
box-sizing: border-box;
padding-bottom: 2rem;
background-color: var(--accent);
}

label {
display: block;
margin-bottom: 0.5rem;
font-weight: bold;
text-align: left;
}

input {
display: block;
height:  44px;
font-size: 1.2rem;
padding: 0 1rem; 
width: 550px;
border: none;
}
textarea {
display: block;
width: 550px;
font-size: 1rem;
box-sizing: border-box;
resize: vertical;
}
.contact-form  {
display: block;
font-size: 1.5rem;
max-width: 550px;
margin: 0 auto;
border: none;
text-align: center;  
padding-top: .5rem;
background-color: var(--accent);
max-width: 650px;
padding-bottom: 2rem;
border-radius: 1rem;
border: 1rem solid var(--primary);  
}


.reason {
text-align: left ;
margin-left: 1.6rem !important;
display: block;
}

.reason select {
display: block;
font-size: 1.2rem;
width: 550px;
height: 44px;
}

.contact-page {
padding-top: .6rem;
}


.contact-form button {
display: inline-block;
margin-top: 1rem;
padding-bottom: 2rem;
padding: 10px 20px;
font-size: 1.5rem;
background-color: var(--secondary-color);
border: none;
border-radius: 5px;
cursor: pointer;
}

button:hover {
background-color: var(--background);  
color: var(--primary);            
transition: background-color 0.3s ease, color 0.3s ease;  
}


/* SERVICES SECTION*/
.service-offers {
display: grid;
grid-template-columns: repeat(2, 1fr);
}

.offers {
max-width: 100%;
margin: 20px; 
padding: 15px;
border-radius: 8px;
border: 2rem solid var(--primary-color);
box-sizing: border-box;
background: var(--background);
text-align: center;
}

.services-page h1 {
text-align: center;
}

.why-choose-us {
background-color: var(--accent);          
width: 1200px;
margin: 20px auto;                   
border-radius: 8px;
text-align: center;
box-sizing: border-box;
}

#proj1 {
cursor: pointer;
}

#proj2 {
cursor: pointer;
}

#proj3 {
cursor: pointer;
}

#proj4 {
cursor: pointer;
}

#proj5 {
cursor: pointer;
}

#proj6 {
cursor: pointer;
}


.response1 p, .response2 p {
font-size: 2rem;
}

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

/*FOOTER*/

.footer {
background-color: var(--primary-color);
color: var(--background);
padding: 40px 20px;
font-family: var(--font-secondary);
}

.footer-container {
display: flex;
flex-wrap: wrap;
gap: 30px;
justify-content: space-between;
max-width: 1200px;
margin: 0 auto;
}

.footer-section {
flex: 1 1 220px;
min-width: 220px;
}

.footer-section h3 {
font-size: 1.2rem;
margin-bottom: 15px;
font-weight: bold;
color: var(--secondary-color);
}

.footer-section p,
.footer-section ul {
font-size: 1rem;
line-height: 1.6;
color: var(--background);
}

.footer-section ul {
list-style: none;
padding: 0;
}

.footer-section ul li {
margin-bottom: 8px;
}

.footer-section ul li a {
color: var(--background);
text-decoration: none;
}

.footer-section ul li a:hover {
color: var(--secondary-color);
}
.social-icons {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;  
margin-top: 1rem;
}

.social-icons a {
display: inline-block;
transition: transform 0.3s ease;
}

.social-icons a:hover {
transform: scale(1.1); 
}

.social-icons img {
width: 40px;             
height: 40px;
object-fit: contain;
border-radius: 6px;       
background-color: var(--background);  
padding: 5px;             
box-shadow: 0 5px 6px var(--primary-color);  
}


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


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

.bebet {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}



.newsletter button {
background-color: var(--highlight-color);
color: var(--background);
padding: 10px;
border: none;
border-radius: 5px;
font-weight: bold;
cursor: pointer;
font-size: 1rem;
width: 100%;          
max-width: 100%;
box-sizing: border-box;
}


.newsletter button:hover {
background-color: var(--highlight-color);
}

.footer-bottom {
text-align: center;
border-top: 1px solid var(--secondary-color);
padding-top: 20px;
margin-top: 40px;
font-size: 0.5rem;
}

.footer-bottom a {
color: var(--secondary-color);
text-decoration: none;
}


/*PRIVACY*/
.privacy-container {
background-color: var(--background);
width: 100%;
margin: 0 auto;
padding: 2rem;
font-family: var(--font-secondary);
color: var(--primary-color);
box-sizing: border-box;
}



.privacy-container h1 {
font-size: 2rem;
text-align: center;
margin-bottom: 1rem;
color: var(--primary-color);
}

.updated-date {
text-align: center;
font-size: 1.2rem;
color: var(--primary-color);
margin-bottom: 2rem;
font-style: italic;
}

.privacy-container section {
margin-bottom: 3rem;
}

.privacy-container h2 {
font-size: 1.6rem;
margin-bottom: 1rem;
color: var(--accent);
}

.privacy-container p {
font-size: 1.3rem;
margin-bottom: 1rem;
text-align: justify;
color: var(--primary-color);
}

.privacy-container ul {
padding-left: 1.5rem;
margin-bottom: 1rem;
}

.privacy-container li {
font-size: 1.3rem;
margin-bottom: 0.75rem;
list-style-type: disc;
}

.privacy-container a {
color: var(--highlight-color);
text-decoration: none;
}

.privacy-container a:hover {
color: var(--accent);
}


/*CLOSE BUTTON*/
.close-btn
{
display: none;
}

/*NAV MENU ADDITIONAL*/
.contact-info-mobile,
.social-links-mobile {
display: none;
}

/*FAQS*/

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

.faq-container {
margin: 2rem auto;
font-family: var(--font-secondary);
color: var(--primary-color);
}

.faq-item {
border-bottom: 1px solid var(--primary-color);
padding: 1rem 0;
}

.faq-item h2 {
margin-left: 1rem;
cursor: pointer;
font-size: 1.5rem;
}

.faq-item p {
margin-left: 1.5rem;
text-align: left;
}