/* font-family: 'Roboto Slab', serif;
font-family: 'Rubik', sans-serif; */

/* ===========================================
Table of Content:
    1.GLOBAL 
        1.1.Body Size, paddings
        1.2.Font Colors
            - Buttons
            - Hover Effects
        1.3.Typography
        1.4.Z-Index
        1.5.Layout
    2.HERO
    3.ABOUT
    4.SERVICES
    5.GALLERIES
    6.TESTIMONIAL
    7.NEWS
    8.FOOTER
*/


/* ===========================================
1.GLOBAL 
*/
/* 1.1.Body Size, main paddings and margins */
body {
    max-width: 144rem;
    margin: 0 auto;
}

header {
    padding: 1.8% 9.4% 0 9.4%;
}

.hero {
    padding: 8.3% 9.4% 0 9.4%;
}

.hero-info {
    padding-bottom: 92.6%;
}

.about {
    padding: 0 10.4% 8.3% 13.9%;
}

.galleries {
    margin-top: 8.34%;
    padding: 0 9.7% 8.3% 0;
}

.testimonial {
    margin: 0 9%;
} 

.news {
    padding: 4.9% 9% 13.9% 9%;
}

footer {
    padding: 0 9% 5.6% 9%;
}

/* 1.2.Font Colors */
.title,
.logo p,
option,
.service,
.testimonial-text,
.news-item-text,
address p {
    color: #0f1c49;
}

p,
input,
.news-item-category,
.footer-link {
    color: #878da4;
}

/* ------ Buttons */
/* font-size for EM units is set on class .btn in 1.3.Typography */
.btn {
    color: #fab91c;
    text-decoration: underline;
}

.header-btn {
    text-decoration: none;
    padding: 1.1em 2.7em;
    border-radius: 0.28em;
    border: solid 0.07rem #fab91c;
}

.hero-form-btn {
    text-decoration: none;
    color: #ffffff;
    padding: 1.1em 0em;
    border-radius: 0.28em;
    background-color: #fab91c;
    cursor: pointer;
}

/* ------ Hover Effects */
a:hover,
.logo p:hover,
.header-btn:hover,
.hero-form-btn:hover,
.news-item:hover {
    transition: all 0.2s ease-out;
}

a:hover {
    color: #0f1c49;
}

.logo p:hover {
    color: #fab91c;
}

.header-btn:hover {
    color: #ffffff;
    background-color: #fab91c;
}

.hero-form-btn:hover {
    transform: scale(1.03);
    background-color: #e2a619;
}

.news-item:hover {
    transform: scale(1.06);
    cursor: pointer;
    box-shadow: 0.3rem 0.3rem 1.5rem #878da4;
    border-radius: 1rem;
}

/* 1.3.Typography */
/*
--> coded in reset-mini.css:
Main font family - Rubik,
Main font-size: 62.5% -> 10px=1rem,
Main font weight: 400,
Main line-height: 2.8rem;
*/

/* CLAMP is calculated for min vw 300px and max vw 1440px */

.title,
.testimonial-author,
.testimonial-text {
    font-family: "Roboto Slab";
}

.footer-quick-link-title,
.footer-department-title {
    font-family: 'Rubik', sans-serif; 
}

.title {
    font-size: clamp(2.2rem, 1.5158rem + 2.2807vw, 4.8rem);
    font-weight: 300;
    line-height: 140%;
}

.hero-title {
    font-size: clamp(2.9rem, 2.1895rem + 2.3684vw, 5.6rem);
    line-height: 130%;
}

.hero-form-title {
    font-size: clamp(2.2rem, 1.9368rem + 0.8772vw, 3.2rem);
}

.hero-form {
    font-size: clamp(1.2rem, 1.0947rem + 0.3509vw, 1.6rem);
}

p,
.footer-link {
    font-size: clamp(1.4rem, 1.3474rem + 0.1754vw, 1.6rem);
}

.logo p,
.services-text {
    font-size: clamp(1.6rem, 1.3895rem + 0.7018vw, 2.4rem);
    font-weight: 500;
}

.testimonial-text {
    font-size: clamp(1.2rem, 0.8842rem + 1.0526vw, 2.4rem);
    line-height: 160%;
    font-weight: 300;
}

.testimonial-author {
    font-size: clamp(1.2rem, 1.0947rem + 0.3509vw, 1.6rem);
}

.btn {
    font-size: clamp(1.2rem, 1.1474rem + 0.1754vw, 1.4rem);
    font-weight: 500;
}

.news-item-category {
    font-size: clamp(1.2rem, 1.1474rem + 0.1754vw, 1.4rem);
}

.footer-quick-link-title,
.footer-department-title {
    font-size: clamp(1.5rem, 1.3684rem + 0.4386vw, 2rem);
    font-weight: 500
}

.news-item-text {
    font-size: clamp(1rem, 0.7368rem + 0.8772vw, 2rem);
    line-height: 160%;
}

address {
    font-style: normal;
}

.footer-link {
    line-height: 220%;
}

/* 1.4.Z-Index */
.hero-form,
.services-information,
.galleries-title,
.galleries-images,
.testimonial-information,
.about-info {
    z-index: 1;
}

/* 1.5.Layout */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.logo {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.hero,
.about {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8%;
}

.hero-form fieldset,
.galleries-images {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.galleries-images {
    padding-left: 5.4%;
    gap: 2rem;
}

.galleries-wrapper {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}

.testimonial-information {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 84rem;
    margin: 0 auto;
    padding: 8.5% 5%;
    text-align: center;
}

.news-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-bottom: 7.63%;
}

.news-items,
.footer-right {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.news-items {
    gap: 2%;
}

footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
}


/* ===========================================
3.HERO
*/
header {
    width: 100%;
    height: 100%;
    min-height: 8rem;
}

.logo img {
    width: 4.2rem;
}

.logo p {
    padding-left: 0.85em;
}

.hero-title {
    padding-bottom: 2.4rem;
}

.hero-info {
    min-width: 29rem;
    max-width: 40rem;
}

.hero-form {
    position: relative;
    width: 100%;
    min-width: 28rem;
    max-width: 50rem;
    height: 100%;
    max-height: 74.5rem;
    padding: 2.5em;
    border-radius: 10rem 1rem 1rem 1rem;
    border: solid 0.1rem #eeeeee;
    background: #ffffff;
    box-shadow: 0px 3rem 6rem rgba(0,0,0,0.06);
}

.hero-form fieldset {
    border: none;
}

select,
input {
    width: 100%;
    height: 100%;
    max-height: 5.6rem;
    border-radius: 0.4rem;
    border: solid 0.1rem #eeeeee;
    margin-bottom: 1.6rem;
    padding-top: 1.3em;
    padding-bottom: 1.3em;
    padding-left: 1.6em;
}

select {
    cursor: pointer;
    height: 100%;
    max-height: 6.3rem;
    appearance: none;
    background-image: url(../images/select-arrow.png);
    background-repeat: no-repeat;
    /* 39 rem from the left on the X coordinate  */
    background-position: 94%;
    background-size: 1rem;
}

input[type="date"]:in-range::-webkit-datetime-edit-year-field, input[type="date"]:in-range::-webkit-datetime-edit-month-field, input[type="date"]:in-range::-webkit-datetime-edit-day-field, input[type="date"]:in-range::-webkit-datetime-edit-text { 	
    color: transparent; 
}

input[name="birthdaydate"]:before {
    content: attr(placeholder) !important;
}

input[name="birthdaydate"]:focus:before,
input[name="birthdaydate"]:valid:before {
    content: "";
}

input[name="message"] {
    height: 100%;
    max-height: 14rem;
    padding-bottom: 6.3em;
}

.hero-form-title {
    padding-bottom: 0.64em;
    margin: 0 auto;
}

/* remove the default calendar icon from the date type input form field*/
.hero-form-date-input::-webkit-inner-spin-button,
.hero-form-date-input::-webkit-calendar-picker-indicator {
    display: none;
    appearance: none;
}

.hero-bg {
    position: absolute;
    top: 42rem;
    left: 0;
    /* width: 100%;
    height: 80rem; */
}


/* ===========================================
4.ABOUT
*/
.about-img-bg {
    position: absolute;
    top: 0;
    left: 0;
}

.about-img {
    min-width: 27rem;
}

.about-info {
    max-width: 38.5rem;
}

.about-text-first {
    padding: 4.1em 0 3.2em 0;
}

.about-text-second {
    padding-bottom: 5em;
}


/* ===========================================
5.SERVICES
*/
.services {
    position: relative;
    padding-bottom: 2.1%;
}

.services-img {
    position: absolute;
    top: 0;
    right: 0;
}

.services-information {
    position: relative;
    max-width: 43%;
    padding: 16% 0 0 16%;
}

.services-text {
    padding: 2em 0 4.6em 0;
}


/* ===========================================
6.GALLERIES
*/
.galleries {
    position: relative;
}

.galleries-img-bg {
    position: absolute;
    top: 0;
    left: 0;
}

.galleries-title,
.galleries-images {
    position: relative;
}

.galleries-title {
    margin-bottom: 7.26%;
    text-align: right;
}

.galleries-images img {
    min-width: 30rem;
}


/* ===========================================
7.TESTIMONIAL
*/

.testimonial {
    position: relative;
} 

.testimonial-bg {
    position: absolute;
    top: 0;
    left: 0;
}

.testimonial-author {
    padding: 5em 0 1.9em 0;
}

.testimonial-avatar {
    width: 4.9rem;
}


/* ===========================================
8.NEWS
*/
.news-item {
    position: relative;
    min-width: 20.5rem;
}

.news-item-information {
    position: absolute;
    top: 66.8%;
    left: 18%;
    max-width: 19rem;
}

.news-item-text {
    padding-top: 0.55em;
}



/* ===========================================
9.FOOTER
*/
.footer-left {
    max-width: 37rem;
}

.footer-text {
    padding: 3.15em 0 1.9em 0;
}

.address-field {
    display: flex;
}

.address-icon {
    width: auto;
    padding-right: 1rem;
    padding-bottom: 2rem;
}

.footer-right {
    max-width: 38.5rem;
}

.footer-quick-link {
    padding-right: 9.7em;
}

.footer-quick-link-title,
.footer-department-title {
    padding-bottom: 2rem;
}


/* FIREFOX issues with clamp and text align for the form */