@charset "utf-8";
/* CSS Document */
/* change font-weight from 'bold' to 'normal' */
* {
  box-sizing: border-box;
}
h1, h2, h3, p {
  font-weight: normal;
}
/* @font-face rule */
@font-face {
  font-family: 'h1_Font';
  font-weight: 400;
  font-style: normal;
  src: local('Lexend Peta'), url('../fonts/lexendpeta-variablefont_wght-webfont.woff2') format('woff2'), url('../fonts/lexendpeta-variablefont_wght-webfont.woff') format('woff');
}
/* @font-face rule */
@font-face {
  font-family: 'p_Font';
  font-weight: 400;
  font-style: normal;
  src: local('Roboto'), url('../fonts/roboto-regular-webfont.woff2') format('woff2'), url('../fonts/roboto-regular-webfont.woff') format('woff');
}
/* @font-face rule */
@font-face {
  font-family: 'h2_h3_Font';
  font-weight: 400;
  font-style: normal;
  src: local('Kaushan Script'), url('../fonts/kaushanscript-regular-webfont.woff2') format('woff2'), url('../fonts/kaushanscript-regular-webfont.woff') format('woff');
}
/* add style to body */
body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background: #696969;
}
/* style block .container */
.container {
  width: 1200px;
  height: 100%;
  margin: 0 auto;
}
/* style block .wrapper */
.wrapper {
  background-image: url("../images/olgadurham.jpg"), url("../images/cover.jpg");
  background-position: right top, left top;
  background-repeat: no-repeat, no-repeat;
  background-size: 10%, cover;
  background-attachment: fixed, scroll;
  padding: 15px;
}
.wrapper-about, .wrapper-gallery, .wrapper-services, .wrapper-contact {
  background-image: url("../images/cover.jpg");
  background-position: left top;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: scroll;
  padding: 15px;
}
/*-------------------------------------------------------------------------*/
/* style the header and its elements: <h1>, <nav>, <ul>, <li>, and <a> */
header {
  text-align: center;
  background: linear-gradient(to left, transparent, white 50%, transparent);
}
/* style the header's heading <h1> */
h1 {
  font-family: 'h1_Font', sans-serif;
  font-weight: 800;
  font-size: 5rem;
  margin: 0;
  padding-bottom: 20px;
  text-transform: uppercase;
  color: #f5f5f5;
  text-shadow:
    1px 1px 1px rgba(3, 78, 104, 1.00), 1px 2px 1px rgba(3, 78, 104, 1.00), 1px 3px 1px rgba(3, 78, 104, 1.00), 1px 4px 1px rgba(3, 78, 104, 1.00), 1px 5px 1px rgba(3, 78, 104, 1.00), 1px 6px 1px rgba(3, 78, 104, 1.00), 1px 7px 1px rgba(3, 78, 104, 1.00), 1px 8px 1px rgba(3, 78, 104, 1.00), 1px 9px 1px rgba(3, 78, 104, 1.00), 1px 10px 1px rgba(3, 78, 104, 1.00), 2px 20px 5px rgba(3, 78, 104, .4), 3px 25px 10px rgba(3, 78, 104, .2), 4px 30px 20px rgba(3, 78, 104, .3), 5px 35px 50px rgba(3, 78, 104, .4);
}
/* style the unordered list */
ul {
  list-style: none;
  display: flex;
  padding-inline-start: 0;
  padding-bottom: 15px;
  justify-content: space-between;
}
/* style list items */
li {
  flex: 1;
  text-align: center;
}
/* style links */
/* rollover effect */
 a:link {
  padding: .6rem 1.2rem;
  color: #B0D5FD;
    border-radius: 5px;
  text-decoration: none;
  font-family: sans-serif;
  font-size: 1.1rem;
  background-color: rgba(3, 78, 104, 1.00);
  transition:
    border-bottom .5s ease-in-out, border-top .5s ease-in-out, border-left .5s ease-in-out, border-right .5s ease-in-out, color .5s ease-in-out;
}

.social a:link, .email a:link {
  color: #B0D5FD;
  font-family: none;
  font-size: 2rem;
    border: none;
  background-color: rgba(3, 78, 104, 1.00);
  text-decoration: none;
  
  transition: color .5s ease-in-out;
  box-shadow: none;

}
.email a:link {
  padding: 0;
  background-color: initial;
  font-family: none;
  font-size: 1.3rem;
    border: none;
  text-decoration: underline;
  
  transition: color .5s ease-in-out;
  box-shadow: none;

}
a:visited {
    border-bottom: 10px solid #B0D5FD;
  color: #B0D5FD;
  
  border-top: 5px solid #B0D5FD;
  border-left: 5px solid #045CBC;
  border-right: 5px solid #045CBC;

}
.social a:visited, .email a:visited {
    border: none;
  color: #B0D5FD;
}

 .btn a:hover {
    border-bottom: 10px solid #FAA4A4;
  color: #FAA4A4;
  
  border-top: 5px solid #FAA4A4;
  border-left: 5px solid #FB0771;
  border-right: 5px solid #FB0771;

}
.social a:hover, .email a:hover {
    border: none;
  color: #FAA4A4;
}
.btn a:active {
    border-bottom: 10px solid #FFFF9D;
  color: #FFFF9D;
  
  border-top: 5px solid #FFFF9D;
  border-left: 5px solid #9F9F00;
  border-right: 5px solid #9F9F00;

}
.social a:active, .email a:active {
    border: none;
  color: #FFFF9D;
}
/*-------------------------------------------------------------------------*/
/* style the main and its elements: <section>, <h2>, and <p> */
main {
  width: 73.5%;
  float: right;
  margin: 1rem 0;
  background: linear-gradient(to left, rgba(255, 255, 255, .5), rgba(255, 255, 255, 1.00), rgba(255, 255, 255, .5));
}
.main-home p {
  font-size: 1.45rem;
}
.main-about, .main-gallery, .main-services, .main-contact {
  width: 100%;
  height: 100%;
}
.grid-container {
  display: grid;
  gap: 50px 100px;
  grid-template-columns: auto auto auto;
  background-color: rgba(3, 78, 104, .5);
  padding: 10px;
}
.grid-item {
  background-color: #f5f5f5;
  padding: 20px;
}
.img-grid {
  width: 100%;
  height: auto;
}
.main-services {
  display: flex;
}
.main-services img {
  width: 50%;
  height: auto;
}
main section h2 {
  -webkit-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}
main section h2:hover {
  color: #DE69F7;
}
.sec-first-wrapper {
  width: 100%;
  padding-right: 20px;
}
.sec-second-wrapper {
  width: 100%;
  padding-left: 20px;
}
.section-office-hours, .section-contact, .section-contact-form {
  background-color: rgba(3, 78, 104, .7);
  height: auto;
  margin: 0 auto;
  padding: 15px;
}
.book-service {
  display: flex;
}
.book-date {
  display: block;
}
::placeholder {
  color: rgba(255, 255, 255, .7);
  padding-left: 5px;
}
.contact-wrapper {
  width: 40%;
}
.section-contact {
  margin-bottom: 30px;
}
.email a {
  font-size: 1.1;
}
.section-contact-form {
  width: 55%;
}
.section-office-hours h2, .section-contact h2, .section-contact-form h2 {
  font-family: "Segoe", "Segoe UI", "DejaVu Sans", "Trebuchet MS", "Verdana", "sans-serif";
  font-size: 1.7rem;
  color: #f5f5f5;
  margin-top: 0;
}
.section-office-hours p, .section-contact p, .section-contact-form p {
  font-size: 1.1rem;
  color: #f5f5f5;
}
.main-contact {
  display: flex;
}
.last-home-p {
  padding-bottom: 27px;
}
span {
  font-weight: bold;
}
/* add padding to <header>, <main>, <sidebar>, <footer> */
header, main, aside, footer {
  padding: 1rem;
  color: rgba(3, 78, 104, 1.00);
}
/* style the heading <h2> */
h2 {
  font-family: 'h2_h3_Font', cursive;
  font-weight: 550;
  text-align: center;
}
.h2-title {
  font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif";
  font-size: 2.5rem;
  text-transform: uppercase;
  color: rgba(3, 78, 104, 1.00);
}
.page-title {
  background: linear-gradient(to left, rgba(255, 255, 255, .5), rgba(255, 255, 255, 1.00), rgba(255, 255, 255, .5));
}
/* style paragraph <p> */
p {
  font-family: 'p_Font', sans-serif;
  font-weight: 500;
}
.main-about p, .main-services p {
  font-size: 1.45rem;
}
.main-about img {
  width: 25%;
  height: auto;
  margin-top: 10px;
}
.img-left {
  float: left;
  margin-right: 1.5rem;
  margin-bottom: 1.5rem;
}
.img-right {
  float: right;
  margin-left: 1.5rem;
  margin-bottom: 1.5rem;
}
.h2-left {
  text-align: left;
}
.h2-right {
  text-align: right;
}
.section-about-second p {
  text-align: right;
}

/*-------------------------------------------------------------------------*/
/* style the sidebar */
aside {
  width: 25%;
  float: left;
  margin: 1rem 0;
  background: linear-gradient(to left, rgba(255, 255, 255, .5), rgba(255, 255, 255, 1.00), rgba(255, 255, 255, .5));
  border: 3px solid rgba(255, 255, 255, .5);
  border-radius: 15px;
  padding-bottom: .6rem;
}
/* style the sidebar's heading <h3> */
h3 {
  font-family: 'h2_h3_Font', cursive;
  font-weight: 500;
  text-align: right;
}
aside img {
  border: 3px solid rgba(255, 255, 255, 1.00);
  /*  width: 238px;*/
  height: 336px;
  width: 100%;
}
aside p {
  font-family: 'p_Font', sans-serif;
  font-weight: 300;
  font-style: italic;
  font-size: 80%;
}
/*-------------------------------------------------------------------------*/
/* style the footer */
footer {
  clear: both;
  background: linear-gradient(to left, rgba(255, 255, 255, .5), rgba(255, 255, 255, 1.00), rgba(255, 255, 255, .5));
  text-align: center;
  padding-bottom: 30px;
}
.foot-ul {
  width: 30%;
  height: auto;
  float: left;
}
/*-------------------------------------------------------------------------*/
.container aside h3 {
  -webkit-transition: all 1s ease-in-out 0s;
  -o-transition: all 1s ease-in-out 0s;
  transition: all 1s ease-in-out 0s;
}
.container aside h3:hover {
  color: #FFFFFF;
  background-color: #4B8ADF;
  text-align: center;
}
.highlight {
  -webkit-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}
.highlight:hover {
  color: #C54FF9;
}
.blue li {
  display: flex;
}
.blue label {
  width: 200px;
}.w-75 {
}