* {
    box-sizing: border-box;
    scroll-behavior: smooth;
    font-family: 'Barlow', sans-serif;
    /* --primary-color-01: #162C46; */
    --primary-color-01: #162C46;
    --primary-color-01-shadow: hsla(212, 96%, 11%, 0.2);
    --primary-color-02: hsla(225, 74%, 21%, 1);
    --primary-color-03: hsla(212, 96%, 30%, 1);
    --primary-color-04: hsla(212, 79%, 56%, 1);
    --primary-color-05: hsla(213, 79%, 78%, 1);
    --primary-color-06: hsla(213, 79%, 89%, 1);
    --primary-color-07: hsla(213, 82%, 96%, 1);
    --secondary-color: hsla(51, 100%, 55%, 1);
    --grey: #677688;


}



body,
html {
    margin: 0;
    padding: 0;
    background-color: white;
    color: var(--primary-color-01);
    font-weight: 400;
    font-size: 16px;



}

ul,
ol {
    list-style: none;
    margin: 0px;
    padding: 0px;
}


h1,
h2,
h3,
h4,
h5 {
    margin-top: 0.5em;
    margin-bottom: 0.5em;


}

p {
    margin-top: 2rem;
    margin-bottom: 2rem;

}






a,
a:link {
    color: var(--primary-color-01);
    text-decoration: none;
    transition: 0.5s;

}

a:hover,
a:active {
    text-decoration: none;
}


.btn {
    text-transform: uppercase;
    font-weight: 500;
    border-radius: 2em;
    background-color: transparent;
    padding: 0.938rem 1.125rem 0.938rem 1.5rem;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 1rem;
    letter-spacing: 0.1em;
    background-color: var(--primary-color-02);
    color: #FFFFFF;
    /* border: 2px solid var(--primary-color-02); */


}


a.btn {
    color: white;
}


a.btn::after {
    font-family: 'Material Symbols Outlined';
    font-size: 1.25rem;
    content: "arrow_right_alt";
    vertical-align: -15%;
    padding: 0 0px 0 5px;
    transition: all .4s ease-in-out;

    /* background: url(assets/img/li-arrow-small.svg) no-repeat; */
}

a.btn:hover::after {
    content: "arrow_right_alt";
    padding: 0 0px 0 10px;


}


.btn-yel {
    border: 2px solid var(--secondary-color);
    background-color: var(--secondary-color);
    color: var(--primary-color-02);
    font-weight: 700;
}

.btn-yel:hover {
    background-color: #F3D30F;
    border: 2px solid #F3D30F;

}


.btn-light-blue {
    background-color: var(--primary-color-06);
    /* border: 2px solid var(--primary-color-02);   */
    color: var(--primary-color-02);
    font-weight: 700;

}

.btn-light-blue:hover {
    background-color: #B1D0F4;
    /* border: 2px solid var(--primary-color-02);  */

}



.btn-dark {
    border: 2px solid var(--secondary-color);
    background-color: var(--primary-color-03);
    box-shadow: 2px 3px 3px var(--primary-color-01-shadow);
}

.btn-dark:hover {
    background-color: var(--primary-color-02);

}


.container {

    max-width: 1200px;
    margin: auto;
    padding: 0 2rem;

}




section {
    scroll-margin-top: 100px;
    /* border-bottom: 1px solid var(--primary-color-06); */
}



.row {
    padding: 2rem 0;
}


.nowrap {
    white-space: nowrap;
}

.button-box {
    margin-top: 2.5rem;

}

.center {
    display: flex;
    justify-content: center;
    margin: 0 auto;
}







/****************************************************************************************** 
                                          HEADER 
*******************************************************************************************/


header {
    position: fixed;
    width: 100%;
    z-index: 1;
    background-color: white;
    box-shadow: 0px 3px 3px var(--primary-color-01-shadow);
}


nav .logo img {
    width: 95%;
}


nav {
    display: flex;
    justify-content: space-between;
    height: 100px;
    align-items: center;
    text-transform: uppercase;
    font-weight: 500;
    font-size: 1rem;
}

nav ul {
    display: flex;
    gap: 1.5rem;
}

nav ul a {
    color: var(--primary-color-01);
    background-color: white;
    font-weight: 500;

}

nav ul a:hover,
nav ul a:active {
    text-decoration: none;
    color: var(--primary-color-02);
    font-weight: 500;

}

i#nav-mobile-icon {
    display: none;
    cursor: pointer;
}


nav .secondary-color {
    color: var(--secondary-color);
}


nav .nav-contact a {
    margin-left: 3rem;
    /* margin-left: 2rem; */
    display: block;
    padding: 10px;
    margin-top: -10px;
    border-radius: 2em;
    background-color: var(--primary-color-06);

}




.nav-arrow {
    /* margin-left: -20px; */
}


nav .nav-arrow::before {
    font-family: 'Material Symbols Outlined';
    font-size: 1.25rem;
    line-height: 1rem;
    content: "arrow_forward";
    vertical-align: -30%;
    padding: 0px 0px 0px 0px;
    /* transition: all .4s ease-in-out; */
    color: var(--primary-color-05);

}



/****************************************************************************************** 
                                          HERO SECTION 
*******************************************************************************************/

#hero {
    background: url(assets/img/hero_bg2.jpg), linear-gradient(180deg, rgba(0, 0, 0, 0.3) 10%, rgba(0, 0, 0, 0) 50%), var(--primary-color-03);
    background-size: cover;

    background-repeat: no-repeat;
    background-position: left bottom;
    padding-top: 100px;
    font-size: 1rem;

}


#hero .row {
    display: flex;
    align-items: center;
    /* border-bottom: 4px solid var(--secondary-color); */

}

#hero .row div:nth-child(1) {
    width: 40%;

}

#hero img {
    max-width: 100%;
    max-height: 100%;
    animation: up-down 2s ease-in-out infinite alternate-reverse both;

}

@keyframes up-down {
    0% {
        transform: translateY(5px);
    }

    100% {
        transform: translateY(-5px);
    }
}

#hero .row div:nth-child(2) {
    width: 60%;
}


#hero h1 {
    font-size: 5em;
    padding: 0;
    margin: 0;
    font-weight: 700;
    color: var(--primary-color-07);


}

#hero h2 {
    font-size: 2.5em;
    padding: 0;
    margin: 0;
    margin-bottom: 1rem;
    font-weight: 400;
    color: var(--primary-color-07);
}

#hero h3 {

    font-size: 1em;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 400;
    padding: 0;
    margin: 0;
    margin-left: 5px;
    color: var(--secondary-color);
}


#hero button {
    margin-top: 3rem;
    ;
}

/****************************************************************************************** 
                                          INTRO SECTION 
*******************************************************************************************/



#intro {
    background-color: #FFFFFF;

}


#intro .row {
    display: flex;
    align-items: center;
    gap: 2rem;
    justify-content: space-between;
    /* border-top: 4px solid var(--secondary-color); */

}


#intro .intro-text {
    max-width: 700px;
    margin: 3rem 0;
    color: var(--primary-color-01);
    font-weight: 500;
    padding-left: 1.75rem;
}


.divider {
    border-left: 4px solid var(--secondary-color);
    padding-left: 1.75rem;

}



#intro h2 {
    /* font-size: 1.75rem; */
    font-size: 2rem;
    font-weight: 600;
    color: var(--primary-color-02);
}

#intro h3 {
    text-transform: uppercase;
    font-weight: 500;
    color: var(--primary-color-04);
}

#intro p {
    font-size: 1.25rem;
    font-weight: 400;


}

.img-shadow {
    -webkit-filter: drop-shadow(5px 5px 5px #222);
    filter: drop-shadow(5px 5px 5px #222);
}


/****************************************************************************************** 
                                          3 BOXES SECTION 
*******************************************************************************************/

#intro-boxes {
    background: url(assets/img/3boxy_bg.jpg);
    background-size: cover;

    background-repeat: no-repeat;
    background-color: var(--primary-color-02);
    color: var(--primary-color-07);
    font-weight: 300;
}

#intro-boxes .row {
    display: flex;
    /* align-items: center; */
    gap: 2rem;
    justify-content: space-between;
}

#intro-boxes .box {
    background-color: #034694;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    top: -45px;
    border-top: 12px solid var(--primary-color-04);
    box-shadow: 4px 4px 0px #0B1A45;
    width: 33%;

}

#intro-boxes .box .box-content {
    padding: 2rem;
    padding-top: 3rem;
    padding-bottom: 1rem;
}

#intro-boxes .box .box-ico {
    height: 95px;
    position: relative;

}

#intro-boxes .box .box-ico img {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;

}

#intro-boxes h2 {
    color: var(--secondary-color);
    font-weight: 400;
    margin-top: 2rem;
}

#intro-boxes p {
    margin-top: 1rem;
}

#intro-boxes img {

    /*resize img to fit the window*/
    max-height: 100%;
    max-width: 100%;
    object-fit: cover;
}




/****************************************************************************************** 
                                          SERVICE SECTION 
*******************************************************************************************/
#services {
    background: var(--primary-color-07);
    background-repeat: no-repeat;
    background-position: top -7vw right -20vw;
    background-size: contain;
    font-size: 1.25rem;
    color: var(--primary-color-02);

}

#services .row {
    padding-top: 2rem;
    padding-bottom: 2rem;
}



/********************************************************
                SERVICES-INTRO 
*********************************************************/


#services #services-intro {
    background-color: white;
}


#services #services-intro .intro-text {
    text-align: center;
    max-width: 700px;
    margin: auto;
    margin-top: 6rem;
    margin-bottom: 4rem;

}


#services #services-intro .service-number {
    font-size: 4rem;
    margin-bottom: 1rem;
}

#services #services-intro .intro-text p {
    font-size: 1.375rem;
    margin-top: 1rem;

}

#services #services-intro .intro-text h2 {
    font-size: 3.75rem;
    color: var(--primary-color-02);
    text-transform: uppercase;
    border-bottom: 3px solid var(--secondary-color);
    display: inline-block;
    font-weight: 700;
    margin-bottom: 4rem;

}

#services #services-intro .intro-text h3 {
    font-size: 2.25rem;
    color: var(--primary-color-02);
    margin: 0;


}

#services #services-intro .service-intro-icons {
    display: flex;
    flex-direction: row;
    gap: 48px;
    text-align: center;
    justify-content: center;
    margin-top: 4rem;

}

#services #services-intro .service-intro-icons img {
    width: 120px;
}


#services #services-intro .service-intro-plan-header {
    /* display: flex; */
    /* flex-direction: row; */
    gap: 24px;
    position: relative;
    color: var(--primary-color-02);
    font-weight: 700;
}




#services #services-intro .service-intro-box-caption {
    margin-top: 1.5em;
    width: 100%;
}

#services #services-intro .service-intro-box-caption span {

    text-transform: uppercase;
    border-bottom: 3px solid var(--secondary-color);

    font-size: 1.25rem;
}

#services #services-intro h4 {
    font-size: 2rem;
    font-weight: 900;
    margin-top: 0.25em;

}






/********************************************************
                SERVICES- BLUE HEADER  
*********************************************************/


#services .full-width-bg {
    width: 100%;
}



#services .full-width-bg.header-bg {

    background: var(--primary-color-02);
    /* border-top: 10px solid var(--secondary-color); */
    padding: 4rem 0 2rem 0;
    box-shadow: inset 0 12px 5px -7px rgba(0, 0, 0, 0.5);
    border-top: 12px solid var(--secondary-color);
}


#services .full-width-bg.footer-bg {

    background: var(--secondary-color);
    /* border-top: 10px solid var(--secondary-color); */
    padding: 4rem 0 2rem 0;
    /* box-shadow: inset 0 12px 5px -7px rgba(0,0,0,0.5); */
}

#services .full-width-bg.header-bg .triangle-container {
    width: 100px;
    margin: auto;
    text-align: center;
    position: relative;
    top: -4rem;
    margin-bottom: -4rem;
    /*reduces empty space*/
}

#services .full-width-bg.header-bg .triangle {
    fill: #ffffff;
}


#services .service-plan-header {
    display: flex;
    flex-direction: row;
    gap: 24px;
    position: relative;
    color: white;
}


#services .service-plan-header .box-caption {
    margin-top: 1.5em;
    width: 100%;
}

#services .service-plan-header .box-caption span {

    text-transform: uppercase;
    border-bottom: 3px solid var(--secondary-color);
    font-weight: 500;
    font-size: 1.25rem;
}

#services .service-plan-header h4 {
    font-size: 3rem;
    font-weight: 400;
    margin-top: 0.25em;

}


/********************************************************
                SERVICES-DESCRIPTION
*********************************************************/



#services #services-cryolibrary {
    background: url(assets/img/cryolibrary-background-white.jpg), white;
    background-repeat: no-repeat;
    background-position: top 290px right -100px;
    background-size: 60%;

    box-shadow: inset 0 50px 5px -7px rgba(0, 0, 0, 0.8);

}


#services #services-cryoexpert {
    background: url(assets/img/cryoexpert-backgorund-white.jpg), white;
    background-repeat: no-repeat;
    background-position: top 250px right;
    background-size: 60%;


}

#services #services-cryoresearch {
    background: url(assets/img/cryoresearch-background-white.jpg), white;
    background-repeat: no-repeat;
    background-position: top 250px right;
    background-size: 40%;


}




#services .service-description {
    max-width: 730px;
}

#services .service-description .service-description-box {
    /* background-color:white; */
    border-radius: 20px;
    /* padding: 16px 32px 16px 32px; */
    margin-bottom: 2rem;
}


#services .services-cryolibrary h2 {
    font-size: 2.5rem;

    margin-top: 6rem;


}


#services .service-description .service-description-box .service-description-box-list {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 16px;
    padding: 12px 0px 12px 0px;

}


#services .service-description .service-description-box .service-description-box-list .target-item {
    border-radius: 20px;
    background-color: var(--primary-color-07);
    padding: 10px 16px 10px 16px;
    font-size: 1.25rem;
    color: var(--primary-color-02);
    font-weight: 500;
    width: fit-content;
}

#services .service-description .service-description-box .protein-list {
    display: flex;
    row-gap: 2rem;
    ;
    text-align: center;
    flex-wrap: wrap;
    justify-content: space-between;

}

#services .service-description .service-description-box .protein-list div {
    max-width: 100px;
    text-transform: uppercase;
    text-align: center;
    font-size: 1rem;
    font-weight: 700;


}


#services .service-contact {
    padding: 2rem;
    /* background-color: var(--primary-color-07); */
    /* border-radius: 20px; */
    margin-top: 1rem;
    margin-bottom: 4rem;
    text-align: center;
    font-size: larger;



}

#services .service-contact ul {
    padding: 0px;
    margin: 0px;
}



#services .service-description ul {

    padding-left: 48px;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin: 2.5rem 0;
    line-height: 32px;
    width: fit-content;
}

#services .service-description ul.ico-check li:before {
    content: "";
    position: absolute;
    top: 1px;
    left: -48px;
    width: 34px;
    height: 34px;
    background: url(assets/img/li-circle.svg) no-repeat;

}

#services .service-description li {
    position: relative;
    list-style-type: none;

}

#services .service-description ul.ico-time {
    background-color: var(--secondary-color);
    border-radius: 20px;
    padding: 16px 16px 16px 52px;
    font-weight: 500;
}


#services .service-description ul.ico-time li:before {
    content: "";
    position: absolute;
    top: 1px;
    left: -40px;
    width: 34px;
    height: 34px;
    background: url(assets/img/icon-time.svg) no-repeat;
}


#services .service-description li.ico-project {
    margin-left: -36px;
    padding-top: 0.75rem;

}


#services .service-contact-bg {}


/********************************************************
                SERVICES-CASE-STUDIES
*********************************************************/

.service-case-studies {
    /* margin-top: 3rem; */
    /* margin-bottom: 2rem; */
}


.case-study-box {

    background: #FFFFFF;
    /* border: 1px solid var(--primary-color-06); */
    /* border-top: 12px solid  var(--secondary-color); */
    /* box-shadow: 4px 4px 0px #0B1A45; */

    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.1);
    /* border-radius: 19px; */
    font-size: 1.125rem;
    display: flex;
    flex-wrap: wrap;
    gap: 3rem;
    margin-bottom: 3rem;
    padding: 3rem;

}


.case-study-bg {

    background-color: var(--primary-color-07);



}


.case-study-box .case-study-img {
    flex: 1;
    /* border-left: 1px solid var(--secondary-color); */
    /* background-image: url(assets/img/Ellipse.svg)  ; */
    /* background-repeat: no-repeat; */
    /* background-position: center; */
    /* background-size: 100%; */
    /* position: relative; */
    /* top: 0px; */
}



.case-study-box .case-study-img img {
    max-width: 100%;
    max-height: 100%;
    /* background: cover; */
    /* background-color: #ffffff; */
    /* position: absolute; */


}

.case-study-box .case-study-text {
    flex: 1;

}


.case-study-box .button-box {
    width: 100%;
    margin: auto;
    text-align: left;
}


.case-study-box .box-caption {
    /* text-align: right; */
    margin-bottom: 0rem;
    margin-right: 48px;
    width: 100%;
    text-align: left;
    font-size: 1.25rem;
}

.case-study-box .box-caption span {
    color: var(--primary-color-02);
    text-transform: uppercase;
    border-bottom: 3px solid var(--secondary-color);
    font-weight: 700;

}

.case-study-box h3 {
    color: var(--primary-color-02);
    margin: 0;
    /* font-size: 1.5rem; */
    font-size: 2.25rem;
    font-weight: 500;
    width: 100%;
    text-align: left;

}

.case-study-box .case-study-content h4 {
    color: var(--primary-color-02);
    font-size: 1.5rem;
    font-weight: 700;
    margin-top: 0.25em;
}



.case-study-box p {
    margin: 0.5rem 0 0.75rem 0;
}




.service-case-studies h1 {
    font-size: 2.75rem;
    color: var(--primary-color-02);
    /* text-transform: uppercase; */
    /* border-bottom: 3px solid var(--secondary-color); */
    /* display: inline-block; */
    font-weight: 700;
    margin-bottom: 2rem;
    text-align: center;
}

.service-case-studies h1 span {
    border-bottom: 3px solid var(--secondary-color);

}

/****************************************************************************************** 
                                          ABOUT SECTION 
*******************************************************************************************/


#about {

    background: url(assets/img/AboutSection.png), var(--primary-color-02);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    color: var(--primary-color-06);
    font-size: 1.375rem;
    font-weight: 100;



}

#about .row {
    padding-top: 6rem;
    padding-bottom: 6rem;
    display: flex;
    flex-direction: column;
    gap: 4rem;
    ;

}


#about .about-text {
    max-width: 700px;
}

/* #about h2 {
    color: var(--secondary-color);
    font-size: 2.25rem;
    font-weight: 400;
    margin-top: 0;
    margin-bottom: 3rem;
} */


#about h2 {
    font-size: 1.75rem;
    text-transform: uppercase;
    border-bottom: 3px solid var(--secondary-color);
    display: inline-block;
    font-weight: 500;

}


#about h3 {
    /* color: var(--secondary-color); */
    /* text-transform: uppercase; */
    font-size: 1.4375rem;
    font-weight: 100;
    margin-top: 3rem;
    margin-bottom: 2rem;
}




#about .protein-list {
    display: flex;
    gap: 28px;
    text-align: center;

}

#about .protein-list div {
    max-width: 105px;
    text-transform: uppercase;
    text-align: center;
    font-size: 1.125rem;
    font-weight: 400;

}










/****************************************************************************************** 
                                          TESTIMONIALS SECTION 
*******************************************************************************************/




#testimonials {
    background-color: var(--primary-color-02);
    background: url(assets/img/AboutSection.png), var(--primary-color-02);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    color: var(--primary-color-06);
    font-size: 1.375rem;
    font-weight: 100;
    border-top: 12px solid var(--secondary-color);
}

#testimonials .row {
    /* padding: 4rem ; */
    padding-top: 6rem;
    padding-bottom: 6rem;
    /* max-width: 1000px; */

}

#testimonials .intro-text {
    text-align: center;
    max-width: 700px;
    margin: auto;
    margin-bottom: 4rem;
    color: var(--primary-color-07);

}


#testimonials .intro-text h2 {
    font-size: 3.75rem;
    color: white;
    text-transform: uppercase;
    border-bottom: 3px solid var(--secondary-color);
    display: inline-block;
    font-weight: 500;
    margin-bottom: 4rem;

}



#testimonials .intro-text h3 {
    font-size: 2.25rem;
    font-weight: 400;
    margin: 0;

}





#testimonials .testimonials-container {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    justify-content: center;
}


#testimonials .testimonials-box {

    padding: 48px;
    /* background: #FFFFFF; */
    background: rgba(0, 0, 0, 0.35);
    /* box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); */
    border-radius: 19px;
    font-size: 1.125rem;
    display: flex;
    flex-direction: column;
    gap: 3rem;
    /* margin: auto; */
    max-width: 500px;

    text-align: center;
    margin-bottom: 2rem;

}

#testimonials .full-width {
    flex-basis: 100%;
}



#testimonials .testimonials-text {
    display: flex;
    gap: 1rem;
    font-size: 1.25rem;
    /* color: var(--primary-color-02); */
    color: var(--primary-color-06);
    font-style: italic;
    /* font-weight: 400; */



}

#testimonials .quote-text {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

#testimonials .quote-end {
    align-self: flex-end;
}



#testimonials .name,
#testimonials .position,
#testimonials .company {
    /* color: var(--primary-color-02); */
    color: var(--primary-color-06);
    /* font-weight: 700; */

}

#testimonials .position {

    font-size: 1.125rem;
    /* font-weight: 500; */


}

#testimonials .company {
    font-size: 1.125rem;
    /* font-weight: 500;   */


}

#testimonials .name {
    margin-bottom: 0rem;
    font-size: 1.25rem;
    color: var(--secondary-color);
    font-weight: 500;
}

#testimonials .carousel .carousel-arrow-left {}

#testimonials .carousel .carousel-arrow-right {}


/****************************************************************************************** 
                                          CONTACT SECTION 
*******************************************************************************************/
#contact {
    background-color: var(--primary-color-07);
}

#contact .row {
    padding-top: 6rem;
    padding-bottom: 4rem;
}

#contact .intro-text {
    text-align: center;
    max-width: 700px;
    margin: auto;
    margin-bottom: 4rem;
}


#contact h2 {
    font-size: 3.75rem;
    color: var(--primary-color-02);
    text-transform: uppercase;
    border-bottom: 3px solid var(--secondary-color);
    display: inline-block;
    font-weight: 700;
    margin-bottom: 4rem;
}






/* #contact .intro-text h3 {
   font-size: 2.25rem;
   color: var(--primary-color-02);
   margin: 0;} */

#contact .intro-text p {
    font-size: 1.375rem;
    margin-top: 1rem;
}


#contact .email-box,
#contact .phone-box {
    background-color: var(--primary-color-02);
    color: white;
    font-weight: 300;
    padding: 3rem 2rem;
    border-radius: 19px;
    /* width: 50%; */


}

#contact .email-box {
    background: url(assets/img/contact-section/email-ico-big.png) no-repeat 24px, var(--primary-color-02);
    padding-left: 130px;
}

#contact .phone-box {
    background: url(assets/img/contact-section/phone-ico-big.png) no-repeat 24px, var(--primary-color-02);
    padding-left: 100px;
}


#contact .map {
    /* background-color: #677688; */
    width: 100%;
    /* height: 350px; */
    /* border-bottom: 12px solid var(--secondary-color); */
}

#contact .map img {
    width: 100%;
    /* height: 100%; */
}

#contact .address {
    /* width: 50%; */
    font-size: 1.125rem;
    line-height: 1.5rem;
    padding: 0px 3rem 3rem 3rem;
}

#contact .address p {
    font-weight: 700;
    text-transform: uppercase;
}

#contact h4 {
    font-weight: 400;
}



#contact .contact-boxes {
    display: flex;
    gap: 3rem;
    max-width: 600px;
    margin: auto;
    margin-bottom: 4rem;
    justify-content: center;
    font-size: 1.2rem;

}




#contact .contact-office-container {
    flex-wrap: wrap;
    display: flex;
    gap: 2rem;
}


#contact .contact-office-container h3 {
    font-size: 2.25rem;
    color: var(--primary-color-02);
    width: 100%;
    text-align: center;
}

#contact .contact-office-container .contact-office-box {
    border-top: 12px solid var(--primary-color-02);
    flex: 1;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.1);
    background-color: white;
    /* background: var(--primary-color-02); */
    /* color: white; */
    margin-bottom: 3rem;
    padding: 0px;
}


/****************************************************************************************** 
                                          FOOTER SECTION 
*******************************************************************************************/

footer {
    background-color: var(--primary-color-02);
    color: white;
    font-size: 1rem;
    font-weight: 100;


}


footer a, footer a:link,
footer a:active,
footer a:visited,
footer a:hover {
    color: white;
    text-decoration: none;
}

footer h5 {
    font-size: 1.25rem;
    font-weight: 400;
}

footer .row {
    display: flex;
    padding: 4rem 0px;
    gap: 6rem;
    flex-wrap: wrap;


}

footer .footer-box li {
    margin: 1rem 0;
}

footer .footer-about {
    flex: 2;
}

footer .footer-copy {
    width: 100%;
    text-align: center;

}





footer li.mail:before {
    font-family: 'Material Symbols Outlined';
    content: "mail";
    font-size: 1.25rem;
    vertical-align: -15%;
    padding: 0 5px 0 0px;
    color: var(--secondary-color);
}

footer li.phone:before {
    font-family: 'Material Symbols Outlined';
    content: "phone_in_talk";
    font-size: 1.25rem;
    vertical-align: -15%;
    padding: 0 5px 0 0px;
    color: var(--secondary-color);
}

footer li.arrow:before {
    font-family: 'Material Symbols Outlined';
    content: "arrow_right_alt";
    font-size: 1.25rem;
    vertical-align: -15%;
    padding: 0 5px 0 0px;
    color: var(--secondary-color);
}



/*******************************************************************************************
 MOBILE SIZE - media query 
 ******************************************************************************************/
@media(max-width: 1200px) {

    #services {
        background: none;
        background-color: var(--primary-color-07);


    }



}

@media(max-width:1000px) {




    #hero h2 {
        font-size: 2em;
    }


    /*********************************************************
mobile menu, invisible (max-height:0) without .active class
***********************************************************/
    nav ul {

        display: block;
        max-height: 0px;
        /*animated objects require height or opacity; display: "none" can not be animated*/
        flex-direction: column;
        gap: 0;
        position: absolute;
        top: 100px;
        left: 0px;
        width: 100%;
        background-color: white;
        box-shadow: 0px 3px 3px var(--primary-color-01-shadow);
        /*menu drop shadow*/
        transition: max-height 0.3s ease-in-out;
        /*animation closes menu*/
        overflow: hidden;
        /*hides text when div height:0px;*/
    }

    /********************************************************************************* 
.active class added on icon click by js, it makes mobile menu visible (max-height:500)
**********************************************************************************/
    nav ul.active {
        display: flex;
        max-height: 500px;
        /*animation requires height; if unknown set max-hight to big number*/
        transition: max-height 0.5s ease-in-out;
        /*animation opens menu*/
    }

    nav ul li {
        padding: 0.75rem 0;
        border-top: 1px solid var(--primary-color-06);
        margin: 0 2rem;
    }

    i#nav-mobile-icon {
        display: block;
        height: 32px;
        width: 32px;
        background: center no-repeat url(assets/img/hamburger_icon.svg);
        background-size: 100%;
    }

    .case-study-box {
        flex-direction: column;
        flex-wrap: nowrap;
    }


    #services #services-cryoexpert,#services #services-cryolibrary,#services #services-cryoresearch{
        background-image: none;
    }


}

@media(max-width: 900px) {


    html{
        font-size: 14px;
    }


    nav{
        font-size: 1.25rem;
    }

    nav .logo img {
        width: 80%;
    }

    #services .service-description ul.ico-time{
        line-height: 1.5rem;
    }

    #hero {
        font-size: 0.875rem;
    }


    #services .service-plan {

        display: flex;
        flex-direction: column;
        align-items: center;

    }

    #services .target-box {
        width: 100%;
        text-align: center;
    }


    #services .arrow div {
        width: 55px;
        height: 88px;
        background: url(assets/img/Arrow2.svg) center no-repeat;
    }


    #intro .intro-img {
        display: none;
    }

    #intro-boxes .row {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2rem;
        justify-content: space-between;
    }

    #intro-boxes .box {
        max-width: 400px;
        width: 100%;

    }

    #services #services-intro .service-intro-icons {
        display: flex;
        flex-direction: row;
        gap: 40px;
        text-align: center;
        justify-content: center;
        margin-top: 4rem;
    }


    #services #services-intro h4 {
        font-size: 1.5rem;
        font-weight: 900;
        margin-top: 0.25em;
    }



    #about .protein-list {
        display: flex;
        flex-direction: column;

    }

    #about .protein-list div {
        max-width: 100%;


    }


    #about .protein-item {
        display: flex;
        flex-direction: row;
        gap: 2rem;
        align-items: center;

    }





}


@media(max-width:750px) {

html{
    font-size: 14px;
}

    #hero {
        font-size: 0.7rem;
    }


    #contact .contact-office-container {
        flex-direction: column;

    }



    #contact .contact-boxes {
        flex-direction: column;
        justify-content: center;

    }


}


@media(max-width:650px) {

    html{
        font-size: 14px;
    }

    #hero {
        display: flex;
    }

    #hero .row {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2rem;
        padding: 2rem 1rem;
        height: 100%;
    }

    #hero .row div:nth-child(2) {
        width: 100%;
    }

    #hero .row div:nth-child(1) {
        width: 100%;
    }


    #services #services-intro .service-intro-icons img {
        width: auto;
    }

    #services #services-intro .service-intro-icon {
        gap: 24px;
    }

    #services #services-intro .service-number {
        font-size: 2rem;
        margin-bottom: 0.5rem;
        visibility: hidden;
    }

}

@media(max-width:500px) {

    html{
        font-size: 12px;
    }


    #services #services-intro .intro-text{
        margin: 2rem 0;
    }

    #services .service-plan-header h4 {
        font-size: 2.5rem;

        }

        #services .service-plan-header img{
            width: 90px;
        }    

    #services #services-intro .service-intro-icons {
       
        gap: 0.75rem;
        margin-top: 1rem;
    }

    #services #services-intro .service-intro-plan-header img{
        width: 90px;
    }

    #services #services-intro h4{
        font-size: 1.25rem;
    }


    #services .service-description ul.ico-time{
        line-height: 1.5rem;
    }

   

    #services #services-intro .intro-text h2 {
        font-size: 3rem;
        margin-bottom: 2rem;
    }

    #services #services-intro .intro-text h3 {
        font-size: 2rem;
    }

    #services #services-intro .intro-text p {
        font-size: 1.25rem;
        margin-top: 1rem;
    }



}