/* ---------- BASE STYLES ---------- */
a {
    text-decoration: none;
}

html,
body {
    margin: 0px;
    padding: 0px;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
}

body {
    padding-bottom: 100px;
}


/* ---------- NAVIGATION MENU STYLES ---------- */

.menu {
    grid-column: 2 / 7;
    margin: 80px 0 30px 0;
    height: 35px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 20px;
}

/* List styles */
.items-container {
    display: flex;
    flex-direction: row;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
}

/* List items and text styles  */
.items-container li {
    margin-right: 20px;
    font-family: "Myriad Pro";
    font-size: 12px;
    line-height: 35px;
    color: #606060;
    letter-spacing: 2;
    transition: .6s;
    white-space: nowrap;
}

.items-container li:hover {
    color: #3d3d3d;
    cursor: pointer;
    transition: .3s;
}


/* ---------- BUTTONS' STYLES ---------- */

/*  buttons' common styles */
.butt-body {
    height: 35px;
    border-radius: 20px;
    background-color: #627440;
    transition: .6s;
}

.butt-body:hover {
    background-color: rgb(75, 94, 39);
    cursor: pointer;
    transition: .4s;
}

.butt-text {
    font-family: "Myriad Pro";
    line-height: 35px;
    color: #FFFBF6;
    letter-spacing: 2;
}

/* Buttons' individual styles */
.butt-body.menu-butt {
    padding: 0 30px;
}

.butt-text.menu-butt {
    font-size: 12px;
}

.butt-body.cons-butt {
    padding: 0 10px;
    display: inline-block;
}

.butt-text.cons-butt {
    font-size: 13px;
}

/* ---------- DIVIDER STYLES ---------- */

.divider {
    height: 50px;
}


/* ---------- SECTIONS COMMON STYLES ---------- */

.wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.base-section {
    min-height: 300px;
    width: 100%;

    /* Creating 12 columns model */
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-column-gap: 10px;
}



/* ---------- HEADERS AND CONTENT STYLES ---------- */

/* Headers' common styles */
.header {
    font-family: "Myriad Pro";
    font-weight: 400;
    font-size: 21px;
    margin: 0 0 20px 0;
    text-transform: uppercase;
}

.mini-header {
    font-family: "Myriad Pro";
    font-weight: 400;
    font-size: 16px;
    margin: 16px 0 0 0;
    text-transform: uppercase;
}

.green {
    color: #627440;
}

.grey {
    color: #606060;
}

p {
    margin: 12px 0;
    font-family: "Myriad Pro";
    font-weight: 400;
    font-size: 13px;
    line-height: 1.5;
}


/* text "Olga Ignatovets" styles */
.oi-text {
    font-family: "Bikham Cyr Script";
    font-size: 36px;
}



/* ---------- SECTIONS INDIVIDUAL STYLES ---------- */

/* ----- FIRST (MAIN) SECTION ---------- */
/* Section backgroud color */
#main-section {
    background-color: #FFFBF6;
}

/* Main text styles */
#main-text {
    grid-column: 2 / 7;
}

#main-text p {
    color: #7A7A79;
}

/* Styles for block with button and text "Olga Ignatovets" */
.butt-text-container {
    min-height: 75px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

/* Main photo styles */
#main-photo-container {
    grid-column: 8 / 13;
    grid-row: 1 / 3;
    height: 100%;
}

#main-photo-container img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}


/* ----- SECOND (SERVICE) SECTION ----- */
#service {
    background-color: #FCE1E0;
    padding-top: 24px;
}

/* photos styles */
#service-photo-wrapper {
    grid-column: 2 / 5;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.service-photo-container {
    width: 100%;
    height: auto;
    object-fit: cover;
    margin: 0 auto 24 auto;
}

.service-photo-container img {
    width: 100%;
}

/* Text styles */

#service-text {
    grid-column: 6 / 12;
}

#service-text p {
    color: #606060;
    margin: 0 0 16px 0;
}

#service-text .butt-body.cons-butt {
    margin: 16px 0;
}


/* ----- THIRD (ABOUT) SECTION ----- */

#about {
    background-color: #FFFFFF;
}

/* Text styles */
#about p {
    color: #7A7A7A;
}

#about-text {
    grid-column: 7 / 12;
    padding-top: 40px;
}


/* Photo styles */
#about-photo-container {
    grid-column: 1 / 6;
    height: 100%;
}

#about-photo-container img {
    width: 100%;
    object-fit: cover;
}


/* ----- FOURTH (EDUCATION) SECTION ----- */

#edu {
    background-color: #C4CED3;
}

#edu-text {
    grid-column: 2 / 7;
    padding-top: 24px;
}

#edu-text p {
    color: #606060;
}

#edu-photo-container {
    grid-column: 8 / 13;
    height: 100%;
}

/* Photo styles */
#edu-photo-container img {
    width: 100%;
    object-fit: cover;
}


/* ----- FIFTH SECTION (FOOTER) ----- */

#footer {
    color: #7A7A7A;
}

#footer .header {
    color: #7A7A7A;
    text-transform: capitalize;
}

#form-container {
    margin-top: 50px;
    grid-column: 2 / 5;
}


#map-container {
    margin-top: 50px;
    grid-column: 6 / 12;
}

#map-container iframe {
    width: 100%;
    height: 100%;
}

/* Form styles */
#contact-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#contact-form input,
#contact-form textarea {
    width: 100%;
    max-width: 100%;
    margin: 9px 0;
    font-family: "Myriad Pro";
    font-size: 16px;
    padding: 8px;
    border-radius: 5px;
    border: solid black 1.5px;
}

#submit-container {
    margin-top: 24px;
    width: 100%;
    display: flex;
    justify-content: center;
}

#contact-form button {
    border: none;
    padding: 0 auto;
}

.form-message {
    display: block;
    width: 100%;
    text-align: center;
    padding: 7px;
    border: 2px solid rgb(255, 12, 61);
    background-color: rgb(255, 106, 136);
    border-radius: 10px;
    color: white;
    font-weight: 600;
    font-family: "Myriad Pro";
}

/* CV */
.cv-section {
    min-height: 300px;
    width: 100%;

    /* Creating 12 columns model */
    display: grid;
    grid-template-columns: repeat(13, 1fr);
    grid-column-gap: 10px;
}


#cv-text {
    padding: 64px 64px 120px 64px;
    grid-column: 4 / 11;
    background-color: #C4CED3;
}

#cv-text h1 {
    text-align: center;
}


.cv {
    display: inline-block;
}

/* Table */
#main-text table {
    text-align: left;
    font-size: 20px;
    border-spacing: 0;
    border-collapse: collapse;
    color: #7A7A79;

}

#main-text th {
    border: 1.5px solid rgb(65, 65, 65);
    font-family: "Myriad Pro";
    font-weight: 200;
    padding: 5px 6px;
}