/*
Theme Name: Astra Child
Theme URI: https://wpastra.com/
Description: Child theme for the Astra WordPress theme
Author: Your Name
Template: astra
Version: 1.0
*/

/* Child theme styles go below */

/* Proof the child theme is active (safe, subtle) */
/* CSS Document */



/*global fonts*/



/*dark green #111e18,  #0A3321

medium green #2c624a

gold - #c49e53

grey - #988e8a

brown - #6a451f
*/

* {

  margin: 0;

  padding: 0;

}

#section-h1 {
font-family: "Marcellus", serif;
font-weight: 600;
font-style: normal;
font-size: 3rem;
padding-bottom: 50px;
color: #c49e53;
}

.section-h2 { 
 	color: #0A3321;
font-family: "Marcellus", serif;
	font-size: 1.6rem;
  font-weight: 600;
	text-align: left;
}

.section-h3 {
  font-style: italic;
  color: #0A3321;
  font-size: 1.3rem;
  text-align: left;
   font-family: "Marcellus", serif;
   font-weight: 400;
}

.section-p {
font-family: "Raleway", sans-serif;
font-size: 1.125rem;
font-weight: 400;
font-style: normal;
color:#000

}
/* ================================================================================================================
   CUSTOM HEADER
================================================================================================================== */

/* ============================
   MAIN HEADER BAR
============================= */

.custom-header-bar {
  width: 100%;
  padding: 10px 38px;

  display: grid;
grid-template-columns: 1fr auto 1fr; /* logo | menu | phone */
  align-items: center;
  column-gap: 24px;
}


/* ============================
   LOGO
============================= */

.custom-logo-link {
  justify-self: flex-end;
}


.custom-logo-img {
  max-height: 100px;
  width: auto;
  padding-top: 20px;
  display: block;
}


/* ============================
   MENU WRAPPER
============================= */

.custom-main-nav {
  justify-self: center;
  align-self: center;
   transform: translateX(14px);
}

.custom-main-nav .custom-menu {
  list-style: none;
  margin: 0;
  padding: 0;

  display: flex !important;
  flex-direction: row;
  gap: 26px;
  align-items: center;
}

.custom-main-nav .custom-menu > li {
  margin: 0;
  padding: 0;
}

.custom-main-nav .custom-menu a {
  display: inline-block;
  padding: 10px 4px;

  text-decoration: none;
  color: #0A3321;

  font-family: "Raleway", sans-serif;
  font-weight: 600;
  font-size: 1.3rem;
  letter-spacing: 0.5px;

  transition: transform 0.2s ease, color 0.2s ease;
}

.custom-main-nav .custom-menu a:hover {
  color: #0A3321;
  transform: scale(1.06);
}

.custom-main-nav .custom-menu .current-menu-item > a,
.custom-main-nav .custom-menu .current_page_item > a,
.custom-main-nav .custom-menu .current-menu-ancestor > a {
  color: #c49e53;
}


/* ============================
   PHONE
============================= */

.header-phone{
  justify-self: flex-start;
  align-self: center;

  font-family: "Marcellus", serif;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.5px;

  color: #c49e53;
  background-color: #0A3321;

  text-decoration: none;
  white-space: nowrap;

  padding: 6px 14px;
  border-radius: 30px;

  display: inline-block;

  margin-bottom: 3px;
}

/* ============================
   MOBILE
============================= */

@media (max-width: 900px) {

 .custom-header-bar {
  grid-template-columns: 1.3fr 1fr;
  align-items: center;
  row-gap: 12px;
  padding: 16px 20px;
}

  .custom-logo-link {
    justify-self: start;
  }

  .custom-logo-img {
    max-width: 250px;
    max-height: none;
    padding-top: 0;
  }

  .custom-main-nav {
    justify-self: end;
    width: auto;
    align-self: center;
  }

  .custom-main-nav .custom-menu {
    flex-direction: column !important;
    align-items: flex-end;
    gap: 8px;
  }

  .custom-main-nav .custom-menu > li {
    width: auto;
    text-align: right;
  }

  .custom-main-nav .custom-menu a {
    width: auto;
    text-align: right;
    font-size: 1.4rem;
    padding: 2px 0;
  }

  .header-phone {
    grid-column: 1 / -1;
    justify-self: end;
    align-self: center;

    font-size: 1rem;
    margin-top: 4px;
    padding: 0;
    border-radius: 0;
    background: none;
    color: #c49e53 !important;
  }

  .header-phone:hover {
    background: none;
    color: #0A3321;
    transform: none;
  }
}

.custom-header-bar .header-phone {
  color: #c49e53 !important;
}

.custom-logo-img {
  width: 100%;
  max-width: 190px;
  height: auto;
  padding-top: 0;
}

/*-----------------------------------------------------------------------------------------------------------------
Footer
------------------------------------------------------------------------------------------------------------------*/
#site-footer-custom {
      background-color: #0A3321;
      width: 100%;
       padding: 60px 30px 30px;
      display: flex;
      flex-direction: column;
        flex-wrap: wrap;
  width: 100%;
  box-sizing: border-box;
}


.custom-footer {
    display: flex; 
    gap: 40px;
   max-width: 100%;
  margin: 0 auto;
  justify-content: space-between;
  
}

#site-footer-custom h3 {
  color: #c49e53;
  font-family: "Marcellus", serif;
  font-size: 1.2rem;
  margin-bottom: 10px;
}

#site-footer-custom p {
  color: #ffffff;
  font-family: "Raleway", sans-serif;
  font-size: 1rem;
  line-height: 1.6;
}

#site-footer-custom .footer-links a {
  color: #ffffff;
  text-decoration: none;
}

#site-footer-custom .footer-links a:hover {
  color: #c49e53;
}

#site-footer-custom .footer-links a:visited {
  color: #ffffff;
}

.footer-links {
  list-style: disc;
  color: #c49e53;
  padding-left: 0;
}

.footer-bottom {
color: #c49e53;
 box-sizing: border-box;
  text-align: center;
  padding: 20px 20px 26px;
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
 
}




/*=======================================================================================================================
hero
/*=======================================================================================================================*/

#hero{
 
  width: 100vw;
  



  background-image: linear-gradient(to top, rgba(0,0,0,.8), rgba(0,0,0,.3)),
    url("images/hero1600.jpg");

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  min-height: 500px;                  /* responsive height */
/*
  color: white;
*/
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  text-align: center;
  padding: 40px 20px;

/*linear-gradient(to top, rgba(0,0,0, .8), rgba(0, 0, 0, 0.3)), url("images/hero1.jpg");*/
}
#hero-section-h1 {
  color: white;
  font-family: "Marcellus", serif;
font-weight: 600;
font-style: normal;
font-size: 3rem;
padding-bottom: 10px;
}

#hero h2 {
    color: white;

	font-size: 1.5rem;

	padding: 40px 20px;
	max-width: 700px;
	margin: 0 auto;

}



/*mission*/

#mission {
  margin: 80px 60px;
}

.mission-inner {
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

.mission-text {
  width: 45%;
  min-width: 0;
}

.mission-images {
  display: flex;
  gap: 20px;
  width: 55%;
  min-width: 0;
  padding-left: 20px;
}

.mission-image-card {
  width: 50%;
  overflow: hidden;
  border-radius: 16px;
}

.mission-image-card img {
  width: 100%;
  height: 460px;
  object-fit: cover;
  object-position: top center;
  display: block;
  border-radius: 16px;
}

#mission p {
  padding: 10px 0px;
  font-weight: 400;
  font-size: .9rem;
  text-align: left;
}

/* cursor for example images */
.mission-image-card a img {
  cursor: pointer;
}

/* hover on example card */
.mission-image-card img {
  transition: transform .25s ease;
}

.mission-image-card a:hover img {
  transform: scale(1.03);
}

/* medium screens */
@media (max-width: 1000px) {
  .mission-inner {
    flex-direction: column;
  }

  .mission-text,
  .mission-images {
    width: 100%;
  }

  .mission-images {
    flex-direction: column;
    padding-left: 0;
    align-items: center;
    gap: 30px;
  }

  .mission-image-card {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
  }
}

@media (max-width: 500px) {
  #mission {
    margin: 60px 20px;
  }

  .mission-images {
    gap: 30px;
  }

  .mission-image-card {
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
  }

  .mission-image-card img {
    height: 400px;
  }
}

/* Mini About */
#mini-trial{
  background-color:#0A3321;
  width:100%;

  /* MORE vertical space */
  padding-top:100px;
  padding-bottom:100px;

  /* Keep side alignment */
  padding-left:60px;
  padding-right:60px;

  /* Space between sections */
  margin:40px 0;
}


#mini-trial .mini-inner{
  max-width:1100px;
  margin:0 auto;
  display:flex;
  gap:40px;
  align-items:center;
}

#mini-trial h2 {
    color: #c49e53;
}
#mini-trial h3 {
    color: #c49e53;
}
#mini-trial p {
    padding-top: 15px;
    color: white;
}


#mini-trial .corner {
    color: #c49e53;
    font-size: 2.2rem;
    font-style: italic;
}

#mini-trial .mini-text{
  flex:1;
  min-width:280px;
  color: white;
}

#mini-trial .mini-image{
  flex:1;
  min-width:280px;
}

#mini-trial .mini-image img{
  width:100%;
  height:auto;
  display:block;
  border-radius:12px;
}

/* Stack on mobile */
@media (max-width: 900px){
  #mini-trial .mini-inner{ flex-direction:column; }
}



/*commercial*/

#commercial .section-h2 {

	padding-bottom: 15px;

}

#commercial .section-h3 {

	text-align: left;

}


/* Commercial layout */
#commercial{
  padding: 80px 60px; /* matches your side spacing style */
}

/* Center + max width like your other sections */
#commercial .commercial-inner{
  max-width: 1100px;
  margin: 0 auto;
}

/* Points styling */
#commercial .commercial-points p{
  font-size: 1.3rem;
  color: #111e18;
  margin: 0 0 14px 0;

  display: flex;
  gap: 12px;
  align-items: flex-start;
}

/* Icon spacing */
#commercial .commercial-icon{
  line-height: 1.2;
}






/* ============================
   HOW IT WORKS
============================= */

#how-it-works{
  width:100%;

  background-image: url("images/flowercream.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;

  /* Match Mini section spacing */
  padding-top:100px;
  padding-bottom:100px;

  padding-left:60px;
  padding-right:60px;

  /* Space between sections */
  margin:40px 0;
}


/* Section Title */
#how-it-works .section-h2 {
  text-align: center;
  margin-bottom: 48px;
  font-weight: 900;
}


/* Steps Layout PARENT FLEX CONTAINER */
#how-it-works .how-steps{
  display: flex;
  flex-direction: row;
  gap: 32px;
  justify-content: space-evenly;
  max-width: 1200px;
  margin: 0 auto;
}


/* Individual Step Boxes CHILDREN FLEX ITEMS */
#how-it-works .how-step{
  background: #ffffff;

  max-width: 340px;
  width: 100%;
  padding: 32px 26px;

  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.1);

  display: flex;
  flex-direction: column;
  gap: 16px;

  text-align: center;
}


/* Icons */
#how-it-works .how-step i{
  font-size: 2.4rem;
  color: #c49e53;
}


/* Step Headings */
#how-it-works .how-step h3{
  font-family: "Marcellus", serif;
  font-size: 1.4rem;
  margin: 0;
  color: #1f3d2b;
}


/* Step Text */
#how-it-works .how-step p{
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
  color: #1f3d2b;
}

@media (max-width: 900px) {

  #how-it-works .how-steps{
    flex-direction: column;
    align-items: center;
  }

  #how-it-works .how-step{
    max-width: 420px;
  }

}

/* ============================
   SERVICES
============================= */
#services-packages{
  padding: 80px 60px;
  text-align: center;
}

/* Services Layout */
#services-packages .services-list{
  display: flex;
  justify-content: center;
  gap: 32px;
  max-width: 1100px;
  margin: 0 auto;
}

/* Individual Service Card */
#services-packages .service-item{
  background: #c49e53;

  max-width: 320px;
  width: 100%;

  padding: 28px 24px;

  border-radius: 16px;
  box-shadow: 0 8px 22px rgba(0,0,0,0.08);
  box-sizing: border-box;
}


/* Service Heading */
#services-packages .service-item h3{
  font-family: "Marcellus", serif;
  font-size: 1.4rem;
  font-weight: 600;
  color: #1f3d2b;
  margin: 0;
}


/* Service Text */
#services-packages .service-item p{
  font-size: 1rem;
  line-height: 1.6;
  color: #1f3d2b;
  margin: 0;
 
}

/*Removal of blue underline for everything inside the anchor text*/
#services-packages .service-item a { 
    text-decoration: none;
  color: inherit;
  display: block;
}


/* Subtle border for Service 1 & 3 */
#services-packages .service-item:nth-child(1),
#services-packages .service-item:nth-child(3){
  border: 1px solid rgba(31, 61, 43, 0.35); /* soft emerald */
}


/* Hover for normal cards */
#services-packages .service-item:hover{
  transform: translateY(-6px);
}

/* Featured card default */
#services-packages .service-item:nth-child(2){
  border: 2px solid #1f3d2b;
  background: #faf7f0;
/*
  transform: scale(1.08);*/
  z-index: 2;
}

/* Featured card hover = grow more */
#services-packages .service-item:nth-child(2):hover{
  transform: scale(1.19) translateY(-6px);
}


/* Optional: extra hover boost for featured card */
#services-packages .service-item:nth-child(2):hover{
  box-shadow: 0 18px 40px rgba(17,30,24,0.20);
}

@media (max-width: 900px) {

  #services-packages .services-list{
    flex-direction: column;
    align-items: center;
  }

  #services-packages .service-item{
    max-width: 420px;
  }

}

/* ============================
   CALL TO ACTION
============================= */

#call{
  padding: 80px 60px;
  background-color: #2c624a;
}

#call .call-wrapper{
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

#call h2{
 
  color: white;
  font-size: 1.6rem;
  text-align: center;
 }

#call .call-btn{
  display: inline-block;
  padding: 15px 40px;
  margin: 10px;

  background: #c49e53;
  color: #0A3321;

  font-family: "Marcellus", serif;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 1px;

  text-decoration: none;
  border-radius: 50px;

  transition: all 0.25s ease;
}

#call .call-btn:hover{
  background-color: #c49e53;
  color: #0A3321;
  transform: translateY(-3px);
}



/* Remove Astra container on Home page */
.page-template-home .site-content > .ast-container,
.page-template-home-php .site-content > .ast-container {
 display: block !important; /*removes astra's default display:flex class*/
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.page-template-home-php .site-content{
  padding-left: 0 !important;
  padding-right: 0 !important;
}



/*====================================================================---------------------------------------------------
SERVICES PAGE
====================================================================-----------------------------------------------------*/

/* Full width page area - Remove Astra's padding and margins */
.page-template-services .site-content > .ast-container,
.page-template-services-php .site-content > .ast-container {
  display: block !important; /*removes astra's default display:flex class*/
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.page-template-services .site-content,
.page-template-services-php .site-content {
  padding-left: 0 !important;
  padding-right: 0 !important;
}


/* Main page section */
#services-page {
      padding: 50px 30px;
  margin: 0px 0;
   background-color: #0A3321;
 
}


/* Intro area */
.services-page-div {
  max-width: 1000px;
  margin: 0 auto 50px;
 
}

.services-page-title {
  font-family: "Marcellus", serif;
  font-size: 3rem;
  font-weight: 600;
  color: #c49e53;;
  text-align: center;
  margin: 0 0 20px;
}

.services-page-intro {
  max-width: 900px;
  margin: 0 auto;
  font-size: 1.1rem;
  line-height: 1.6;
  color: #fff;
  text-align: left;
}
   

/* Each service section */
#service-block-1 {
  max-width: 1000px;
  margin: 40px auto 40px;
}

/*PARENT of flex box*/
.service-parent {
  display: flex;
  flex-direction: row;
  gap: 25px;
  align-items: center;
margin: 40px 40px;
  padding: 30px;
  border: 1px solid rgba(31, 61, 43, 0.15);
  border-radius: 22px;
}


/* CHILDREN FLEX ITEM Image column */
.service-image {
  width: 45%;
}

.service-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 18px;
}


/* CHILDREN FLEX ITEM Text column */
.service-content {
  width: 55%;
  text-align: left;
}

.service-content h3 {
  font-family: "Marcellus", serif;
  font-size: 1.8rem;
  font-weight: 600;
  color: #1f3d2b;
  margin: 0 0 16px;
}

.service-tag {
  display: block;
  margin-top: 6px;
  font-size: 1.05rem;
  font-style: italic;
  color: #c49e53;
}

.service-content p {
  font-size: 1.05rem;
  line-height: 1.7;
  color: #1f3d2b;
  margin: 0 0 18px;
}

.service-content .fit {
  font-weight: 600;
  margin-top: 20px;
}

.service-content ul {
  margin: 0;
  padding-left: 20px;
}

.service-content ul li {
  margin-bottom: 10px;
  font-size: 1rem;
  line-height: 1.6;
  color: #1f3d2b;
}


/* Mobile */
@media (max-width: 900px) {
  #services-page {
    padding: 50px 20px;
  }

  .service-parent {
    flex-direction: column;
    align-items: flex-start;
  }

  .service-image,
  .service-content {
    width: 100%;
  }

  .services-page-title {
    font-size: 2.3rem;
  }
}

#website-design,
#seo-strategy,
#ongoing-support {
  scroll-margin-top: 140px;
}


/*==============================================================================================================
Portfolio
OAR Project
===============================================================================================================*/
.page-template-portfolio .site-content > .ast-container,
.page-template-portfolio-php .site-content > .ast-container {
    display:block !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.page-template-portfolio .site-content,
.page-template-portfolio-php .site-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
}



#portfolio-page {
      padding: 80px 30px;
   background-color: #0A3321;
 
}
.portfolio-page-title {
     font-family: "Marcellus", serif;
  font-size: 3rem;
  font-weight: 600;
  color: #c49e53;;
  text-align: center;
  margin: 0 0 20px;
}

.portfolio-page-intro {
  max-width: 900px;
  margin: 0 auto;
  font-size: 1.1rem;
  line-height: 1.6;
  color: #fff;
  text-align: left;

    }
    
    
#oar-painting-1 {
         padding: 70px 60px;
  margin: 40px 0;
  background: #ffffff;
}

.project-oar h2 {
    color: #000;
  
    padding-bottom: 10px;
     font-family: "Marcellus", serif;

  font-weight: 600;

  font-style: italic;

	font-size: 2rem;
}


.project-oar h3 {
    color: #000;
    padding-bottom: 10px;
       font-weight: 300;
}
.project-oar img {
    max-width: 800px;
    text-align: center;
   
}


.project-oar p {
   padding-top: 30px;
}

/*------------------------------------------------------------------
extra images for project-oar
------------------------------------------------------------------*/

/*------------------------------------------------------------------
extra images for project-oar
------------------------------------------------------------------*/

.project-pages {
    margin-top: 60px;
}

.project-pages h3 {
    margin-bottom: 30px;
    text-align: left;
}



/* Screenshot row */
.page-previews {
    display: flex;
    gap: 20px;
  justify-content: space-between;
}



/* Individual preview container */
.page-preview {
    max-width: 300px;
    flex-shrink: 0;
}

/* Screenshot styling */
.page-preview img {
    width: 100%;
    height: auto;
    display: block;

    border-radius: 12px; /* rounded corners */
    border: 1px solid rgba(17,30,24,0.2); /* subtle border */
}

/* Mobile */
@media (max-width: 480px) {
    .page-previews {
      flex-direction: column;
      gap: 30px;
    }

}


/*==============================================================================================================
Portfolio
CARS Project
===============================================================================================================*/

#petes-car-signs-2 {
   padding: 100px 60px;
  margin: 40px 0;
  background-color: #0A3321;
    
}

.project-car h2 {
    color: #fff;
  
    padding-bottom: 10px;
     font-family: "Marcellus", serif;

  font-weight: 600;

  font-style: italic;

	font-size: 2rem;
}


.project-car h3 {
    color:#fff;
    padding-bottom: 10px;
    font-weight: 300;
}
.project-car img {
    max-width: 800px;
   width: 100%;
     border-radius: 20px;
    border: 1px solid rgba(17,30,24,0.2);
}

.car-text .section-h3 {
    color: white;
    padding: 20px 0;
}

.car-preview p {
    color: #fff;
    padding-top: 30px;
    
}


.examples-label {
    font-family: "Marcellus", serif;
    font-size: 1.35rem;
    color: #c49e53;

    margin-top: 50px;
    margin-bottom: 30px;

    border-top: 1px solid rgba(255,255,255,0.25);
    padding-top: 20px;
}
.car-image img {
    max-width: 600px;
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 20px;
    

    border-radius: 12px;
    border: 1px solid rgba(17,30,24,0.2);
}

#petes-car-signs-2 .section-h2 {
    color: white;
    font-family: raleway, sans-serif;
    padding-top: 50px;
    padding-bottom: 10px;
    font-weight: 500;
    font-size: 1.3rem;
}

/* =========================================================
Media queries
========================================================= */

/* Tablet */
@media (max-width: 1000px) {

  #portfolio-page {
    padding: 70px 30px;
  }

  #oar-painting-1,
  #petes-car-signs-2 {
    padding: 70px 30px;
  }

  .portfolio-page-intro {
    max-width: 700px;
  }

  .project-oar img,
  .project-car img {
    width: 100%;
    max-width: 100%;
  }

  /* Screenshot rows stack */
  .page-previews {
    flex-direction: column;
    align-items: center;
    gap: 30px;
  }

  .page-preview {
    max-width: 420px;
    width: 100%;
  }

  .car-image img {
    max-width: 100%;
  }

}


/* Mobile */
@media (max-width: 768px) {

  #portfolio-page {
    padding: 60px 20px;
  }

  #oar-painting-1,
  #petes-car-signs-2 {
    padding: 60px 20px;
  }

  .portfolio-page-title {
    font-size: 2.3rem;
  }

  .portfolio-page-intro {
    font-size: 1rem;
  }

  .project-oar h2,
  .project-car h2 {
    font-size: 1.7rem;
  }

  .project-oar h3,
  .project-car h3 {
    font-size: 1.1rem;
  }

  .project-pages {
    margin-top: 40px;
  }

  .page-previews {
    flex-direction: column;
    align-items: center;
    gap: 25px;
  }

  .page-preview {
    max-width: 100%;
    width: 100%;
  }

  .page-preview img {
    margin: 0 auto;
  }

  .car-image img {
    width: 100%;
    max-width: 100%;
  }

}


/* Small phones */
@media (max-width: 480px) {

  #portfolio-page {
    padding: 50px 20px;
  }

  #oar-painting-1,
  #petes-car-signs-2 {
    padding: 50px 20px;
  }

  .portfolio-page-title {
    font-size: 2rem;
  }

  .portfolio-page-intro {
    font-size: 0.95rem;
    line-height: 1.5;
  }

  .project-oar h2,
  .project-car h2 {
    font-size: 1.5rem;
  }

  .project-oar h3,
  .project-car h3 {
    font-size: 1rem;
  }

  .project-oar p,
  .car-preview p {
    padding-top: 20px;
  }

  .page-previews {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .page-preview {
    width: 100%;
    max-width: 100%;
  }

}
/*------------------------------------------------------------------------------
CTA on portfolio page 
------------------------------------------------------------------------------*/
#portfolio-call{
  padding: 80px 60px;
  background-color: white;
}

#portfolio-call .call-wrapper{
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

#portfolio-call .section-h2{
 
  color:#2c624a;
  font-size: 1.6rem;
  text-align: center;
 }

#portfolio-call .call-btn{
  display: inline-block;
  padding: 15px 40px;
  margin: 20px;

  background: #c49e53;
  color: #0A3321;

  font-family: "Marcellus", serif;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 1px;

  text-decoration: none;
  border-radius: 50px;

  transition: all 0.25s ease;
}

#portfolio-call .call-btn:hover{
  background-color: #c49e53;
  color: #0A3321;
  transform: translateY(-3px);
}



/*====================================================
ABOUT PAGE
====================================================*/


/* Hero section (green bar with title) */

#about{
  background-color: #0A3321;
  padding: 70px 30px;
  text-align: center;
}

.about-title{
  font-family: "Marcellus", serif;
  font-size: 3rem;
  font-weight: 600;
  color: #c49e53;
  margin: 0;
}



/* Content section */

.about-content{
  padding: 80px 60px;
}



/* 2 column layout */

.about-inner{
  max-width: 1100px;
  margin: 0 auto;

  display: flex;
  gap: 60px;
  align-items: center;
}



/* Text */

.about-text{
  flex: 1;
}

.about-text p{
  font-size: 1.1rem;
  line-height: 1.8;
  color: #1f3d2b;
}

.april{
  font-family: "Marcellus", serif;
  font-size: 2rem;
  color: #c49e53;
}



/* Image */

.about-image{
  flex: 1;
}

.about-image img{
  width: 100%;
  max-width: 520px;
  height: auto;
  display: block;
}



/* Mobile layout */

@media (max-width: 900px){

  .about-inner{
    flex-direction: column;
  }

}

/*=======================================================================================================================
404 page\
=====================================================================================================================*/

/* 404 Page Styling */

/* Force 404 container centering */
.error404 #primary.error-page-wrap{
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}


.error404 .site-content {
    margin-top: 40px;
    text-align: center;
}
.error-page-wrap{
  max-width: 1100px;
  margin: 0 auto;
  padding: 3rem 1.5rem;
  text-align: center;
  
}

.error-page-main{
  text-align: center;
}

.error-title{
  font-family: "Marcellus", serif;
  font-size: 2rem;
  color: #1f3d2b;
  margin-bottom: 1rem;
}

.error-text,
.error-help{
  font-family: "Raleway", sans-serif;
  font-size: 1.05rem;
  line-height: 1.6;
  color: #0A3321;
  max-width: 700px;
  margin: 0 auto 1.5rem;
}

/* Links */

.error-links{
  list-style: none;
  padding: 0;
  margin: 1.5rem auto 2rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

.error-links li{
  margin: 0;
}

.error-links a{
  font-family: "Raleway", sans-serif;
  text-decoration: none;
  color: #0A3321;
  border: 1px solid rgba(31,61,43,0.3);
  padding: 0.45rem 1rem;
  border-radius: 999px;
  transition: all 0.2s ease;
}

.error-links a:hover{
  background: rgba(31,61,43,0.08);
  text-decoration: none;
}



/*------------------------------------------------------------------------------
Contact Page 
-----------------------------------------------------------------------------*/

.page-template-page-contact .site-content > .ast-container,
.page-template-page-contact-php .site-content > .ast-container {
    display: block !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.page-template-page-contact .site-content,
.page-template-page-contact-php .site-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.page-template-page-contact #primary,
.page-template-page-contact-php #primary {
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
}

.page-template-page-contact #secondary,
.page-template-page-contact-php #secondary {
    display: none !important;
}


/* CONTACT FLEX LAYOUT */

#contact-flex-page {
    background-color: #0A3321;
    display: flex;
    flex-direction: row;
   padding-top: 40px;
      min-height: 100vh;  /* Full viewport height */
    align-items: flex-start;
    justify-content: flex-start;
}

.contact-left {
    width: 50%;
    background-color: #0A3321;
    padding: 50px 50px;
        margin-top: 20px;  /* Add top margin to push content down */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  
 
}

.contact-right {
    width: 50%;
    background-color: #ffffff;
    padding: 80px 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-page-title {
    font-family: "Marcellus", serif;
    font-size: 3rem;
    font-weight: 600;
    color: #c49e53;
      margin: 0 0 10px;  /* Adjust margin to pull heading closer to the intro text */
    text-align: left;  /* Ensure heading is left-aligned */
    align-self: flex-start;  /* Ensure heading is aligned to the left */
}

.contact-page-intro {
    max-width: 500px;
    font-size: 1.1rem;
    line-height: 1.6;
    color: #ffffff;
    margin: 0;
    text-align: left;
      margin-top: 0;  /* Remove margin-top to pull the text up */
}

/* CONTACT FORM */

.contact-form-wrapper {
    width: 100%;
    max-width: 500px;
}

.contact-form-wrapper input,
.contact-form-wrapper textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    margin-top: 5px;
}

.contact-form-wrapper textarea {
    height: 120px;
}

.contact-form-wrapper input[type="submit"] {
    background-color: #0A3321;
    color: #ffffff;
    border: none;
    padding: 12px 20px;
    cursor: pointer;
}

.contact-form-wrapper input[type="submit"]:hover {
    background-color: #134f33;
}

.contact-form-wrapper h3 {
    font-family: "Marcellus", serif;
    font-size: 3rem;
    font-weight: 600;
    color: #c49e53;
    margin: 0 0 10px;
    text-align: left;  /* Ensure the heading is left-aligned */
    padding-top: 20px;  /* Adjust the padding to move it down a bit */
    padding-bottom: 10px;  /* Add some space below the title */
}

@media (max-width: 768px) {
    #contact-flex-page {
        flex-direction: column;
    }

    .contact-left,
    .contact-right {
        width: 100%;
    }
}


/*removal of all Astra's rules for the header*/

@media (max-width: 900px) {

  body .custom-header-bar {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    align-items: center !important;
    row-gap: 12px !important;
  }

  body .custom-logo-link {
    justify-self: start !important;
  }

  body .custom-main-nav {
    justify-self: end !important;
  }

  body .custom-main-nav ul.custom-menu {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 8px !important;
  }

  body .custom-main-nav ul.custom-menu li {
    text-align: right !important;
  }

  body .header-phone {
    grid-column: 1 / -1 !important;
    justify-self: end !important;
    text-align: right !important;

    font-size: 1rem !important;
    color: #c49e53 !important;

    margin-top: 6px !important;
  }

}

/* ============================
   PHONE - FORCE BRAND STYLE
============================= */

body a.header-phone {
  background-color: #0A3321; /* green */
  color: #c49e53 !important; /* gold text */

  font-family: "Marcellus", serif;
  font-weight: 600;
  font-size: 1rem;

  padding: 6px 14px;
  border-radius: 30px;

  text-decoration: none;
  white-space: nowrap;

  display: inline-block;

  transition: all 0.25s ease;
}

/* HOVER */
body a.header-phone:hover {
  background-color: #0A3321; /* stay green */
  color: #c49e53 !important; /* stay gold */
  transform: scale(1.04);
}

/* VISITED */
body a.header-phone:visited {
  color: #c49e53 !important;
}


html {
  scroll-behavior: smooth;
}