/**
 * Theme Name: Twenty Twenty Child
 * Template: twentytwenty
 */

/*---CSS RESET---*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
main, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, main, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
table { border-collapse: collapse; border-spacing: 0; }

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

/*---typography---*/
body, p, a, h1, h2, h3 {
  font-family: 'Lexend', sans-serif;
}
p { line-height: 1.6; }
a {
  color: #d14232;
  text-decoration: none;
}

h2 {
font-weight: 700;
}

grid-container-3 a {
margin-top: 1rem;	
}

.entry-content h2 {
white-space: nowrap; 
overflow: hidden;    
text-overflow: ellipsis;
}


/*---banner---*/
.banner {
background: url("https://cameronlabontedesign.com/wp-content/uploads/2025/10/bannerimagecfilm.png") center/cover no-repeat;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
min-height: 250px;
color: white;
text-shadow: 4px 4px 4px rgba(0,0,0,0.5);
border-radius: 15px;
font-family: "Helvetica", sans-serif;
}

.banner-title {
  font-family: 'Lexend', sans-serif;
  font-size: clamp(2rem, 8vw, 6.5rem);
  text-transform: uppercase;
  width: 100%;
}

/*---layout---*/
.entry-content > :not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}

.post-inner {
  padding-top: 2rem;
}

.singular .entry-header {
  display: none;
}

/*---grid-system---*/
.grid-container-2, .grid-container-3, .grid-container-4, .grid-container-5, .grid-container-6 {
  display: grid;
  gap: 10px;
  padding: 2%;
  border-radius: 15px;
}


.grid-container-2 div,
.grid-container-3 div,
.grid-container-4 div,
.grid-container-5 div,
.grid-container-6 div {
background-color: #e4d7b4;
padding: 20px;
text-align: center;
border-radius: 15px;
}


.grid-container-4,
.grid-container-5,
.grid-container-6 {
  justify-items: center;  
  align-items: center;   
  text-align: center;    
}

.grid-container-4 div,
.grid-container-5 div,
.grid-container-6 div {
  display: flex;
  flex-direction: column;
  justify-content: center;   
  align-items: center;       
  min-height: 300px;        
  background-color: #e4d7b4;
  padding: 20px;
  text-align: center;
  border-radius: 15px;
}


.grid-container-4 p,
.grid-container-5 p,
.grid-container-6 p {
margin-bottom: 20px
}

.blog-title {
display: flex;
justify-content: center;
font-weight: 600;
font-size: 1.7rem;
}

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

.grid-container-5 {
margin-bottom: none;
}

.grid-container-6 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch; 
  gap: 20px;
  width: 100%;
  padding: 2%;
}

#oow-text, #oow-img {
  flex: 1 1 50%; 
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #e4d7b4;
  border-radius: 15px;
  padding: 20px;
  box-sizing: border-box;
  min-height: 300px; 
}


#oow-img img {
  max-width: 100%;
  height: auto;
  border-radius: 15px;
  display: block;
  object-fit: contain; 
}

.post-meta {
display: none;
}

/*---about-us---*/
#about {
padding: 2%;
}
.banner2 {
  
  padding: 2%;
}
.banner2 > div {
 
  margin: 2%;
}

#about h1 {
text-align: center;
  font-size: clamp(2rem, 6vw, 3.5rem);
  font-weight: 700;
  margin: 2rem 0;
  padding: 0;
}

#oow-text, #oow-img {
width: 50%
}
/*---contact---*/
#contact .grid-container-8 {
  grid-template-columns: 1fr 1fr;
  padding: 2%;
}
#contact .grid-container-8 > div {
  
  margin: 2%;
}


input[type="text"], input[type="email"],  textarea {
border-radius: 25px;
}

input[type="submit"] {
border-radius: 25px;
margin: 1rem ;
	align-self: center;
}

#contact .grid-container-8 > div {
align-content: center;
justify-items: center;
}

#contact label {
margin: 5px;
}

.grid-container-8 > div {
max-width: 50rem;
justify-self: center;
display: inline;
}

#contact h1 {
text-align: center;
  font-size: clamp(2rem, 6vw, 3.5rem);
  font-weight: 700;
  margin: 2rem 0;
  padding: 0;
}

/*---blog-posts---*/

#blog-p, #blog-h1 {
margin-bottom: 30px;
}

#blogimg {
margin-top: 3rem;
margin-bottom: 3rem;
}

#blog-credit {
margin-bottom: 30px;
font-size: 25px
}

/*---responsive-layouts---*/

/*---phones---*/
@media (max-width: 600px) {
  .banner {
    min-height: 300px;
    font-size: 1.2rem;
    padding: 2rem 1rem;
  }

  .grid-container-2,
  .grid-container-3,
  .grid-container-4,
  .grid-container-5,
  .grid-container-6 {
    grid-template-columns: 1fr;
  }

  #contact .grid-container-2 {
    grid-template-columns: 1fr;
  }
}



@media (max-width: 768px) {
  .grid-container-6 {
    flex-direction: column;
  }
  #oow-text, #oow-img {
    flex: 1 1 100%;
    width: 100%;
  }
}

/*---tablet---*/
@media (min-width: 601px) and (max-width: 1024px) {
  .banner {
    min-height: 400px;
  }

  .grid-container-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-container-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  #contact .grid-container-2 {
    grid-template-columns: 1fr 1fr;
  }
}

/*---desktop---*/
@media (min-width: 1025px) {
  .banner {
    min-height: 500px;
  }

  .grid-container-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-container-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.grid-container-6 {
  display: flex !important;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: stretch;
  width: 100%;
  gap: 20px;
  padding: 2%;
}

#oow-text,
#oow-img {
  flex: 1 1 50%;
  max-width: 50%;
  background-color: #e4d7b4;
  border-radius: 15px;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  box-sizing: border-box;
}

#oow-img img {
  max-width: 100%;
  height: auto;
  border-radius: 15px;
  object-fit: contain;
  display: block;
}

@media (max-width: 768px) {
  .grid-container-6 {
    flex-direction: column;
  }

  #oow-text,
  #oow-img {
    max-width: 100%;
    flex: 1 1 100%;
  }
}
/* ---mtc-about-us--- */
.grid-container-4 {
  display: flex !important;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: stretch; 
  gap: 20px;
  width: 100%;
  padding: 2%;
  box-sizing: border-box;
}

.mtc-img,
.mtc-text {
  flex: 1 1 50%;
  max-width: 50%;
  background-color: #e4d7b4;
  border-radius: 15px;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
}

.mtc-img img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 15px;
}

/* ---mobile-mtc--- */
@media (max-width: 768px) {
  .grid-container-4 {
    flex-direction: column;
    gap: 15px;
  }

  .mtc-img,
  .mtc-text {
    flex: 1 1 100%;
    max-width: 100%;
    padding: 15px;
  }
}


.mtc-text {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: center !important;
  text-align: center !important;
}

.mtc-text h1 {
  margin-bottom: 1rem !important;
}

.grid-container-4 {
margin-bottom: 2rem;
}

@media (max-width: 1250px) {
#blog-h1, #blog-p, #blog-credit, #blogimg {
padding: 4%;	
}
	
}
input[type="text"], input[type="email"], textarea {
border-radius:15px	
}