/* ============================== */
/* ! Layout for desktop version   */
/* ============================== */
	
	body {background: url("../images/webbackground.png")no-repeat; background-size:cover; background-attachment: fixed;background-color: #2b1612; font-family: "bodoni-std", sans-serif;}

div.header {background:#ddb9a5;}
div.header a img {display: flex;padding: 5px 0 5px 0;}
div.header div.twocol a {display: flex; color: #4c2707;text-decoration: none;font-family:"bodoni-std", sans-serif;font-size: 20px;padding-top: 25px;}
div.header span {display: none}
div.header .eightcol p{color: #4c2707;}
div.container-gallery{border-image-width: 30px;}

/*e9d2b8*/

.overlay {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0, 0.9);
  overflow-x: hidden;
  transition: 0.5s;
}

.overlay-content {
  position: relative;
  top: 25%;
  width: 100%;
  text-align: center;
  margin-top: 30px;
}

.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #4c2707;
  display: block;
  transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
  color: #e9d2b8;
}

.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}

@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  .overlay .closebtn {
  font-size: 40px;
  top: 15px;
  right: 35px;
  }
}

/***Home***/
.logo {
    width: 140px;  
	height: auto;}
div.home div.content img {display: block;margin: 0 auto;margin-top: 100px;padding-bottom: 30px;}
div.home div.content p {font-family: "bodoni-std", sans-serif;text-align: center;font-size: 40px;padding-bottom: 30px;line-height: 50px;}
div.home div.cta a {display: block;text-decoration: none;font-size: 20px;text-align: center;line-height: 30px;border: 2px solid #4c2707;border-radius: 8px;background-color:#ddb9a5; color: #4c2707;padding: 14px 28px;cursor: pointer;}
div.home div.cta a:hover {background-color: #4c2707;opacity: 90%;color:#ddb9a5;}
div.home div.container{font-family: "bodoni-std", sans-serif;color:#ddb9a5;font-size: 25px;}
.home {text-align:center;
display:flex;
flex-direction:column;
align-items: center; 
justify-content: center;
gap: 15px;
min-height: 80vh;
}

.galbtn {
padding:12px 28px;
background: #ddb9a5;
color:#4c2707;
text-decoration: none;
font-size:18px;
border-radius:6px;
transition:0.3s ease;
}
.galbtn:hover{
background:#4c2707;	
color:#ddb9a5
}














/***about***/
.about .fivecol img {
    width: 350px !important;
    height: auto !important;
}
.container.resume.cta .fivecol img{
    width: 320px !important;
    height: auto !important;
	padding-bottom:100px!important;
}
.resume-btn {
    display: inline-block;
    background-color: #ddb9a5;  /* button background */
    color: #4c2707;               /* text color */
    padding: 12px 24px;         /* size */
    font-size: 18px;
    text-decoration: none;      /* remove underline */
    border-radius: 6px;         /* rounded corners */
    font-weight: 600;
	margin-top: 150px;
	margin-left: 60px;
}

.resume-btn:hover {
    background-color: #4c2707;
		color:#ddb9a5;  /* hover effect */
	
}



div.about div.content img {float: left;width: 90%;}
div.about div.content h1 {font-family: bodoni-std, sans-serif;color:#ddb9a5;text-align: center;font-size: 45px;margin-top: 80px;}
div.about div.content p {font-family: bodoni-std, sans-serif;font-size: 20px;color:#ddb9a5}
div.about div.content {margin-top: 130px;}
div.about div.content div.threecol img {resize: 20px;}

/***Gallery***/
div.title h1 {font-family: bodoni-std, sans-serif;color:#ddb9a5;font-size:40px;text-align: center;}
div.title p {font-family: bodoni-std, sans-serif;color:#ddb9a5;padding-bottom: 10px;font-size: 25px;text-align: center;}
div.design img {padding-bottom: 30px;}

/***Contact***/
.social-icon {
  width: 45px;   /* adjust size */
  height: auto;
  transition: 0.3s ease;
  cursor: pointer;

	
}

.social-icon:hover {
  opacity: 0.7;
  transform: scale(1.05);
}

.insta-icon {
  width: 40px;   /* adjust size */
  height: auto;
  transition: 0.3s ease;
  cursor: pointer;
  margin-top: 20px;
}

.insta-icon:hover {
  opacity: 0.7;
  transform: scale(1.05);
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 18px;     /* space between icon and text */
  margin-bottom: 40px; /* spacing between the two contact rows */
  margin-right: 200px;
}


.contact-item h2 {
  color: #d8b89c;  /* Change to your brand color */
  font-size: 20px; /* optional */
  margin: 10px;       /* remove default margin pushing it down */
}




div.contact a.btn {display: block; background-color: #4c2707;color: #ddb9a5;padding: 14px 20px;margin: 8px 0;border: none;border-radius: 4px;cursor: pointer;text-decoration: none;font-size: 30px;font-family: bodoni-std, sans-serif;text-align: center;margin-bottom: 50px;}
div.contact div.btn {width:150px;float: right;}
div.contact div.eightcol p {font-family: "the-seasons", sans-serif;font-size: 28px;text-align: center;padding-bottom: 30px;margin-top: 70px;color: #ddb9a5;}

label[for="name"] {
  color: #ddb9a5;
}

label[for="lname"] {
  color: #ddb9a5;
}

label[for="subject"] {
  color: #ddb9a5;
}



input[type=text], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddb9a5;
  border-radius: 4px;
  resize: vertical;
}

label {
  padding: 12px 12px 12px 0;
  display: inline-block;
}

.container {
  border-radius: 5px;
  padding: 20px;
}

.col-25 {
  float: left;
  width: 25%;
  margin-top: 6px;
}

.col-75 {
  float: left;
  width: 75%;
  margin-top: 6px;
}

.row::after {
  content: "";
  display: table;
  clear: both;
}


/***modal***/
.modal-window {
  position: fixed;
  background-color: rgba(255, 255, 255, 0.25);
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s;
  &:target {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }
  & > div {
    width: 400px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 2em;
    background: #ddb9a5;text-align: center;
  }
  header {
    font-weight: 400;text-align: center;
  }
  h1 {
    font-size: 150%;
    margin: 0 0 15px;text-align: center;font-family: "itc-avant-garde-gothic-pro",sans-serif;
  }
	p {font-family: barlow,sans-serif;}
	small {font-family: barlow,sans-serif;}
	small a {text-decoration: none;color:#ddb9a5;}
}

.modal-close {
  color: #aaa;
  line-height: 50px;
  font-size: 80%;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0;
  width: 70px;
  text-decoration: none;
  &:hover {
    color: black;
  }
}



/* ============================= */
/* ! Layout for mobile version   */
/* ============================= */

@media handheld, only screen and (max-width: 767px) {

	body {background: url("../images/webbackground.png")top center repeat-y; background-size:100%; background-attachment: fixed;background-color: #2b1612;}
	
	div.home div.container{font-family: "bodoni-std", sans-serif;color:#ddb9a5;font-size: 15px;}
	div.header a img {margin: 0 auto;}
	div.header div.twocol a {display: none}
	div.header span {display: inline-block;float: left;margin-top: 20px;}
	div.overlay {font-family:"bodoni-std", sans-serif;line-height: 60px;}	
	div.about div.content h1 {line-height: 80px;}
	div.about div.content p {line-height: 30px}
	div.about div.content {margin-top: 20px}
	.about .fivecol img {
    width: 390px !important;
    height: auto !important;}
	div.contact div.btn {width:150px;float: right;padding-right: 80px;}
	div.contact div.eightcol p {line-height: 30px;padding-right: 40px;}
	div.home div.content p {line-height: 80px;}
	
	
	div.design .twocol img {width:40%;padding: 10px;}
	h1 {line-height: 40px;font-size: 40px;}
	p {line-height: 40px;font-size: 40px;padding-top: 10px;}
	
.resume-btn {
    display: inline-block;
    background-color: #ddb9a5;  /* button background */
    color: #4c2707;               /* text color */
    padding: 12px 24px;         /* size */
    font-size: 18px;
    text-decoration: none;      /* remove underline */
    border-radius: 6px;         /* rounded corners */
    font-weight: 600;
	margin-top: 10px;
	margin-left: 85px;
}

.resume-btn:hover {
    background-color: #4c2707;
		color:#ddb9a5;  /* hover effect */
	
}

	
	.col-25, .col-75, input[type=submit] {
    width: 100%;
    margin-top: 0;
  }
	input[type=text], select, textarea {
		width: 80%
			
}


/* ========================================== */
/* ! Provide higher res assets for iPhone 4   */
/* ========================================== */

@media only screen and (-webkit-min-device-pixel-ratio: 2) { 

/*	.logo {
		background: url(logo2x.jpg) no-repeat;
		background-size: 212px 303px;
	}*/

}