/*
Theme Name: BREYNE + THOREY
Theme URI:  https://example.com/breyne-thorey
Author:      Your Name
Author URI:  https://example.com
Description: A custom theme replicating the BREYNE + THOREY design
Version:     1.0
Text Domain: breyne-thorey
*/

/* Reset and base styles */
html, body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'EKNoticeSans', sans-serif;
  color: #333;
  background: #fff;
  display: flex;
  flex-direction: column;
  


  
  
  align-items: center;
  justify-content: center;
}

a { text-decoration: none; color: inherit; }
@font-face {
  font-family: 'EKNoticeSans';
  src: url('./assets/fonts/EKNoticeSans-Regular.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}


/*  =========HEADER======== */
.site-header
{
  margin : 0;
  padding : 0;
  max-width: 100vw;
  
  display: flex;
  flex-direction: column;
  

  text-align: center;
  
  
  align-items: center;
  justify-content: center;

}
.logo
{
  margin : 0;
  padding : 0;
  max-width: 40vw;

}

.pHeader
{
  font-size: x-large;
  font-style: italic;
  letter-spacing: 0.2rem;
  margin: 2 0;

}

    /* SEPARATOR */
.top-separator {
  width: 90vw;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 1rem;
  gap: 0rem;
}

.line {
  width: 90vw;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 1rem;
  gap: 0rem;
  margin-top: 1.4rem;
  flex-grow: 1;
  height: 1px;
  background-color: #000; /* Customize color */
}

.cross {
  font-size: 4.2rem; /* Adjust size */
  font-weight: bold;
  user-select: none;
}



/*  ====================== */

/*  ==============MAIN=============== */

.site-home
{
  margin:0; 
  padding:0;
  display: flex;
  flex-direction: column;
  align-items: center;

}

.hero
{

}

.hero img
{
    margin: 0;
    padding: 0;
    max-width: 18vw;  
    border-radius: 3%;
}



/*  ============ Services Section: four columns ========== */




.services
{
  width: 75vw;
  display: flex;
  flex-direction: row;

  margin : 1rem 0rem;
  padding: 0rem 0rem;/*  Bind to .site-footer > margin: 0 2rem; */

  justify-content: space-between;

}



.service
{
  margin : 0 0rem;
  padding : 0 0rem;
  text-align: justify;

}
.service h2 
{

  font-size: 1.4rem;
  letter-spacing: 0.05rem;
  margin-bottom: 0.5rem; 
}

.service p
{
  max-width: 12vw;
}





/*  ====================== */

/*  ==============FOOTER================= */



.site-footer {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* 4 columns to match your services */
  width: 75vw;
  gap: 0;
  text-align: justify;
}

/* Make .contact span the first two columns of the footer grid,
   then lay out its two children side‑by‑side in a 2‑column subgrid */
.contact {
  grid-column: 1 / 4;            /* occupy columns 1 & 2 */
  display: grid;                 
  grid-template-columns: 1fr 1fr;/* two equal columns */

}

/* No need for nth-child here—each .contact-content will auto‑flow
   into column 1 and column 2 of the .contact grid */
.contact .contact-content {
  /* any common styles here */
}

/* Place .social in the third column of the footer */
.social {

  margin: 0;
  padding: 0;
  grid-column: 4;
  font-style: italic;
               
}

.social h4{
    
    margin-bottom: 0;
}


.social p{
    margin: 0;
}






.contact-content h3
{
    font-weight: bold;
}
.contact-content h4
{
  color: #ababab;
  font-weight: lighter;
  
}

.contact-content p
{
  
}


              /*  ===SOCIAL==== */




/*  ====================== */

@media (max-width: 768px) {
/*   .services, .site-footer { flex-direction: column; align-items: center; } */
}


/* 📱 Mobile: ≤ 480px (phones) */
@media screen and (max-width: 480px) {
  /* Small phones (portrait) */


  .logo
{
  min-width: 100vw;
}

.pHeader
{
  font-size: x-small;
}


.top-separator {
  width: 60vw;
/
}

.top-separator .line {
  flex-grow: 1;
  height: 1px;
  background-color: #000; /* Customize color */
}



.hero img
{
    margin: 0;
    padding: 0;
    min-width: 50vw;  
    border-radius: 3%;
}



/*  ============ Services Section: four columns ========== */




.services
{
  width: 75vw;
  display: flex;
  flex-direction: column;

  margin : 1rem 0rem;
  padding: 0rem 0rem;/*  Bind to .site-footer > margin: 0 2rem; */


}



.service
{

  margin : 0 0rem;
  padding : 0 0rem;
  text-align: justify;
  align-items: center;

}
.service h2 
{

  text-align: center;
  font-size: 1.4rem;
  letter-spacing: 0.05rem;
  margin-bottom: 0.5rem; 
}

.service p
{ 
  max-width: 100%;

}


.site-footer {
  display: flex;
  flex-direction: column;

}


.contact
{
  display: flex;
  flex-direction: column;
  text-align: center;
  margin: 0;
  padding: 0rem 0;
}
.contact p
{
  margin: 0;
  padding: 1 0;
}

.contact h3
{
  margin-bottom: 0;
  margin-top: 2rem;
}

.contact h4
{
  margin-top:  0;
  margin-bottom: 0.5rem;

  font-size: smaller;
}




/* Place .social in the third column of the footer */
.social {

  margin: 0;
  padding: 0;
  font-style: italic;
  text-align: center;

}

.social h4{
    
    margin-bottom: 0;
    font-size: large;
}


.social p{
    margin: 0;
    
}



}

/* 📱 Mobile Landscape & Small Tablets: 481px – 768px */
@media screen and (min-width: 481px) and (max-width: 768px) {
  /* Phones in landscape & small tablets */
}

/* 💊 Tablets: 769px – 1024px */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  /* iPads and mid-sized tablets */
}

/* 💻 Small Laptops: 1025px – 1280px */
@media screen and (min-width: 1025px) and (max-width: 1280px) {
  /* Small laptops */
}

/* 🖥️ Large Screens (desktops, full HD): 1281px and up */
@media screen and (min-width: 1281px) {
  /* Big desktops or 4K monitors */
}