/* Full background image */
@font-face {
  font-family: 'Fields';
  src: url('../content/Fields-SemiBold.otf') format('opentype');
  font-weight: 600; /* semibold */
  font-style: normal;
}
@font-face {
  font-family: 'Lora';
  src: url('../content/Lora-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

:root {
      --cream: #F7F1E4;
      --linen: #F7F1E4;
      --blush: #f4C5B4;
      --terracotta: #C6803D;
      --clay: #C6803D;
      --sage: #BAAF69;
      --olive: #68672B;
      --charcoal: #2E2A26;
      --text-soft: #5A504A;
      --text-muted: #8A7E78;
      --blue: #5985C4;
      --sky: #98B6DC;
    }


.about-wrapper {
    background-image: url("Light Sky.jpg"); 
	background-repeat:no-repeat; 
	background-position:center center;
	background-attachment: scroll !important;
    background-size: cover;
     border-radius: 18px; 
    padding: 20px;
}

.about-container {
    display: flex;
    max-width: 900px;
    height: auto !important;
    min-height: 610px;
    margin: auto;
    gap: 25px;
align-items: Flex-start;
}

.about-photo img {
    width: 400px;        /* reduced size */
    height: auto;
    border-radius: 12px;
    object-fit: cover;
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
align-items: flex-start;
display: block;
}

.about-wrapperL {
    background-image: url("Light Sky.jpg"); 
	background-repeat:no-repeat; 
	background-position:center center;
	background-attachment: fixed;
    background-size: cover;
     border-radius: 18px; 
    padding: 20px;
    overflow: hidden;        /* prevents inner box from spilling out */
  max-width: 100%;         /* ensures it never grows wider than the screen */
  position: relative;      /* keeps positioned children inside */
  padding-bottom: 20px; 
}

.about-containerL {
    display: flex;
    max-width: 1500px;
    min-height: 800px;  
    height: auto;        /* allows expansion on zoom */
    margin-left: 0;
    gap: 25px;
align-items: Flex-start;
}
.about-photoL img {
    width: 400px;        /* reduced size */
    height: auto;
    border-radius: 12px;
    object-fit: cover;
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
align-items: flex-start;
display: block;
margin-left: 10px;
Margin-top:30px;

}
.about-textL {
    width: 930px;
    display: block;
    align-items: flex-start;
    background: rgba(255, 255, 255, 0.85);
    padding: 5px;
    border-radius: 10px;
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--charcoal);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
      margin-top: 0 !important;
      font-family: 'Lora';
      font-size: 16px;
      font-weight: 400;
      letter-spacing: 1px;
}


.about-text {
    display: block;
    align-items: flex-start;
    background: rgba(255, 255, 255, 0.85);
    padding: 5px;
    border-radius: 10px;
    font-size: 1.1rem;
    line-height: 1.6;
    color:var(--charcoal);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
      margin-top: 0 !important;
       font-family: 'Lora';
      font-size: 16px;
      font-weight: 400;
      letter-spacing: 1px;
}



.about-text > :first-child {
  margin-top: 0 !important;
}


.about-text h1,
.about-text h2,
.about-text h3,
.about-text p {
  margin-top: 0 !important;
}

.contact-btn {
    margin-top: 15px;
    padding: 10px 20px;
    background-color: #5985c4;   /* blue*/
    color: black;
    border: 1.5px solid black;
    text-decoration: none;
    font-weight: bold;
    border-radius: 8px;
    font-size: 16px;
    transition: 0.3s ease;
    display: block;
    font-family: 'Fields', sans-serif; 
  font-weight: 600;
    margin: 15px auto 0 auto; /* centers the button */
    width: fit-content;       /* ensures auto margins work */
}

.contact-btn:hover {
    background-color: #9bb6dc;   /* ighter on hover to sky */
    color:white;/* text to stay white*/
}