.header,
.lang, .less{
    font-size: 1rem;
    text-align: center
}/*font size for language selection, header and .less class of contacts page*/

.bold,
.lang,
.link:hover {
    font-weight: 700
}

.lang,
.navigation {
    background-color: #017677
}

.section-title, .heading{
    font-size: 3rem;
}/*index and services page respectively*/

.highlight{
    background-color: #015455;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
    padding: 0.5rem;
    border-radius: 0.32em;
}

.amazement,
.button,
.footer,
.header,
.lang,
.motto {
    text-align: center
}

html {
    scroll-behavior: smooth
}

body {
    background-color: #e1fffe;
    font-family: poppins, Tahoma, Geneva, Verdana, sans-serif;
    margin: auto;
    line-height: 1.5;
    font-size: min(1.5625rem, 5vw);/*general font size*/
    overflow-x: hidden;
}

.url {
    margin-bottom: .6rem
}

.header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: .625rem auto
}

.dot-collection-logo,.f-img {
    width: 40vw;
    max-width: 9rem;
}

.page-descriptor {
    display: block;
    width: 4.6rem;
    margin: 0 auto
}

.inline,
.nav.open,
.navLinks,
.navToggle,
.navigation {
    display: flex
}

.lang{
    width: 8rem;
    padding: .5rem;
    margin-bottom: .5rem;
    border-radius: .9rem;
    border: 3px solid #a3dbdc;
    color: #fff
}

.lang:focus,
.link {
    color: #017677
}

.lang:focus {
    background-color: #fff;
    border: 2px solid #017677;
    outline: none;
}

main {
    padding-top: 2rem;
    margin: auto 5vw
}

.link:visited {
    color: #0096ff
}

.p-link {
    padding: 0 4.6875rem;
    margin-bottom: 2.5rem;
}

.p-link:hover {
    color: #a9d9ff;
    transform: translateY(-10px)
}

.border {
    border-bottom: 2px solid #0096ff
}

.title1 {
    font-size: 2.3rem
}

.title2 {
    font-size: 1.8rem
}

.light-font {
    font-weight: 300;
    color: #444
}

.images {
    width: 70vw;
    min-width: 7rem;
}

.border-top {
    border-top: 2px solid #0096ff
}

.img-design {
    border: 5px solid #0096ff;
    border-radius: 10px;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, .3)
}

.slide{
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.slideUp{
    opacity: 0;
    transform: translateY(3.125rem);
}

.slide.active{
    opacity: 1;
    transform: translate(0,0);
}

.navigation {
    position: sticky;
    top: .625rem;
    z-index: 1000;
    margin: 1.8rem auto !important;
    align-items: center;
    font-weight: 1000;
    width: 6.25rem;
    max-width: 80vw;
    height: 100px;
    border-radius: 1.7rem;
    justify-content: center;
    opacity: .8;
    transition: width .7s, height .7s
}

.button:hover,
.line {
    background-color: #fff
}

.navLinks {
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: column
}

.navToggle {
    flex-direction: column;
    justify-content: left;
    align-items: center;
    padding-right: 2.5rem
}

.line {
    width: 6vw;
    max-width: 1.875rem;
    height: 3px;
    margin: .25rem 0
}

.inline {
    align-items: center;
    width: auto;
    margin-bottom: .625rem;
    justify-content: space-between
}

.nav {
    display: none;
    color: #fff;
    transition: .3s
}

.nav-img {
    width: 12vw;
    max-width: 3.75rem
}

.nav-link {
    list-style: none
}

.amazement,
.motto {
    font-family: Alkatra;
    margin: 0 auto
}

.button {
    background-color: #017677;
    border: 2px solid #0096ff;
    color: #fff;
    border-radius: 10px;
    display: block
}

.button:hover {
    border: 2px solid #017677;
    color: #017677
}

.contact-us {
    margin: 0 auto 2.5rem;
    transition: transform 1s;
    cursor: pointer;
}

.contact-us:hover {
    transform: scale(1.1)
}

.footer, .team{
    font-size: min(1.2rem,4vw);
}/*font size for footer and description of team members in index.html*/
.footer {
    padding: .1rem;
    border-top: 2px solid #017677;
    margin-top: 3.125rem
}

.f-img:hover {
    animation: 1s .2s 2 rotate360
}

.f-heading {
    margin: .1875rem auto;
    color: #000;
    font-weight: bold;
}

.f-detail {
    margin: .375rem auto
}

.address {
    margin-bottom: 1.875rem
}

.return-to-home {
    visibility: hidden;
    color: #0096ff
}

.return-to-home.showReturnToHome {
    visibility: visible;
    display: block
}

.changeSize {
    animation: 2s ease-in-out alternate changeSize
}

@keyframes rotate360 {
    from {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

@keyframes changeSize {

    0%,
    100% {
        scale: 1
    }

    25% {
        scale: 1.5
    }

    50% {
        scale: 0.5
    }
}

@media (min-width:768px) {
    .p-link {
        font-size: min(2vw, 1.5625rem);/*page links font size for large viewports*/
        margin-bottom: 0
    }

    .nav {
        padding-left: min(5vw, 4.6875rem);
        padding-right: min(5vw, 4.6875rem)
    }

    .navigation {
        max-width: 93.75rem
    }

    .nav-img {
        width: 5.3vw;
        max-width: 4.6875rem
    }

    .line {
        width: 3.4vw
    }

    .navLinks {
        flex-wrap: nowrap;
        flex-direction: row
    }

    .images {
        width: 40vw;
        max-width: 28.125rem
    }
}