@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cardo&display=swap');

/* Root */
:root {
    --primaryFont: 'Roboto', sans-serif;
    --secondaryFont: 'Cardo', serif;
    --primaryColor: #333;
    --secondaryColor: #808080;
    --thirdColor: #7a7a7a;
    --fourthColor: #b8b8b8;
}

.main-primary-text {
    color: var(--primaryColor);
}

* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

    *::after,
    *::before {
        content: '';
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
sub,
sup,
tt,
var,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
input,
select,
textarea,
button,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    vertical-align: baseline;
}

html {
    overflow-x: hidden;
}

body {
    margin: 0;
    padding: 0;
    list-style-type: none;
    outline: 0;
    border: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    font-size: 14px;
    vertical-align: baseline;
    background: #fff;
    font-weight: 400;
    font-family: var(--primaryFont);
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

a {
    text-decoration: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

ol,
ul {
    list-style: none;
}

img {
    border: 0;
}

:focus {
    outline: 0;
}

/* main class */
.z-index-0 {
    z-index: -1;
}

.z-index-1 {
    z-index: 1;
}

.z-index-2 {
    z-index: 2;
}

/* main class */

/* Header Menu */
.index-header {
    width: 100%;
    height: 10vh;
    padding-left: 90px;
    padding-right: 90px;
    padding-bottom: 10px;
}

.page-header {
    width: 100%;
    height: 10vh;
    padding-left: 90px;
    padding-right: 90px;
    padding-bottom:10px;
}

.header-bg {
    width: 100%;
    height: 60vh;
    padding-bottom: 10px;
}

.header-bg-index-main {
    width: 100%;
    height: 90vh;
}

.header-bg-index {
    width: 90%;
    position: fixed;
    bottom: 40%;
}

.header-bg-arrow {
    position: fixed;
    bottom: 5%;
}

header ul li a {
    color: var(--secondaryColor);
    margin-right: 20px;
    transition: .1s;
    position: relative;
}

    header ul li a:hover {
        color: var(--primaryColor);
    }

    header ul li a.active {
        color: black;
    }

        header ul li a.active:before {
            position: absolute;
            top: 120%;
            width: 100%;
            height: 2px;
            background: var(--secondaryColor);
            opacity: 1;
            transition: .1s;
        }

        header ul li a.active:hover:before {
            color: var(--primaryColor);
        }

    header ul li a:before {
        position: absolute;
        top: 120%;
        width: 100%;
        height: 2px;
        background: var(--secondaryColor);
        opacity: 0;
        transition: .1s;
    }

    header ul li a:hover:before {
        color: var(--primaryColor);
        opacity: 1;
    }

.header-content {
    background-attachment: fixed;
    position: absolute;
    top: 0;
    transition: .3s;
    color: black;
    padding-left: 90px;
    padding-right: 90px;
}

    .header-content h1 {
        font-size: 18vh;
        font-family: var(--secondaryFont);
    }

    .header-content p {
        color: var(--secondaryColor);
        font-size: 18px;
    }

@media only screen and (max-width: 1500px) {
    .header-content h1 {
        font-size: 16vh;
    }
}

@media only screen and (max-width: 1400px) {
    .header-content h1 {
        font-size: 15vh;
    }
}

@media only screen and (max-width: 992px) {
    .header-content h1 {
        font-size: 12vh;
    }
}

@media only screen and (max-width: 768px) {
    header {
        padding-left: 30px;
        padding-right: 30px;
        padding-top: 60px;
    }

    .header-content h1 {
        font-size: 10vh;
    }

    .header-content {
        padding-left: 30px;
        padding-right: 30px;
    }
}

@media only screen and (max-width: 567px) {
    .header-content h1 {
        font-size: 8vh;
    }
}

/* Header Menu */




/* contact-box */
.contact-box {
    padding: 60px 0;
}

    .contact-box h2 {
        font-size: 44px;
        color: black;
        font-weight: 900;
    }

@media only screen and (max-width: 567px) {
    .contact-box h2 {
        font-size: 30px;
    }
}

.contact-box input,
textarea {
    width: 100%;
    border-bottom: 1px solid var(--fourthColor);
    padding: 16px 0;
    color: var(--primaryColor);
}

    .contact-box input:focus,
    textarea:focus {
        border: 1px solid #3898ec;
    }

.contact-box button {
    padding: 22px 50px;
    background: black;
    border: 2px solid black;
    color: white;
    transition: .2s;
}

    .contact-box button:hover {
        color: black;
        background: transparent;
    }

/* contact-box */


/* about-box */

.about-box {
    background: url(../img/up5.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    font-family: var(--secondaryFont);
}

.about-bg1 {
    background-color: rgba(0, 0, 0, 0.75);
}

.about-box h2 {
    font-size: 24px;
    color: white;
}

.about-box p {
    font-size: 60px;
    color: white;
}

@media only screen and (max-width: 567px) {
    .about-box p {
        font-size: 30px;
    }
}

/* about-box */

.about-info h2 {
    font-size: 44px;
    font-weight: 900;
    color: var(--primaryColor);
}

.about-info h4 {
    font-size: 18px;
    font-weight: 700;
    color: var(--primaryColor);
}

.about-info p {
    font-size: 18px;
    color: var(--secondaryColor);
    font-weight: 300;
}

.about-content {
    padding-top: 10vh;
    padding-bottom: 5vh;
}

.about-logo {
    margin-top: 100px;
}

.about-biz {
    background: url(../img/pnbiz.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 194px;
    width: 885px;
}

@media only screen and (max-width: 567px) {
    .about-info h2 {
        font-size: 30px;
        font-weight: 900;
        color: var(--primaryColor);
    }
}
/* about-box */

/* admin-page */
.admin-page img {
    width: 256px;
    height: 256px;
}

.admin-page input {
    display: block;
    width: 100%;
    border: 1px solid var(--fourthColor);
    padding: 10px 12px;
}

    .admin-page input:focus {
        border: 1px solid #3898ec;
    }

.admin-page button {
    display: block;
    color: white;
    width: 100%;
    background: #3898ec;
    padding: 10px 12px;
    text-align: center;
}

.admin-page h2 {
    color: var(--primaryColor);
    font-weight: 900;
}

/* password-page */

/* 404-page */
.page-404 img {
    width: 256px;
    height: 256px;
}

.page-404 h2 {
    color: var(--primaryColor);
    font-weight: 900;
}

.page-404 p {
    color: var(--primaryColor);
}

/* 404-page */


/* index */

.banner-1 {
    width: 100%;
    height: 100vh;
    background: url(../img/banner1.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
}

.banner-2 {
    width: 100%;
    height: 100vh;
    background: url(../img/banner2.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
}

.banner-3 {
    width: 100%;
    height: 100vh;
    background: url(../img/banner4.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
}

.index-banner h2:nth-child(1) {
    color: var(--secondaryColor);
    font-size: 70px;
    font-weight: 400;
    font-family: var(--secondaryFont);
}

.index-banner h2:nth-child(2) {
    color: white;
    font-weight: 900;
    font-size: 24px;
    margin-top: 10px;
    margin-bottom: 28px;
}

@media only screen and (max-width: 567px) {
    .index-banner h2:nth-child(2) {
        font-size: 30px;
    }
}

.index-banner p {
    color: var(--thirdColor);
    font-size: 16px;
    font-weight: 300;
}

.index-bg-1 {
    background: url(../img/banner3.png);
    background-size: 200%;
    background-position-y: center;
    background-position-x: center;
}

.index-bg-2 {
    background: #efe3b7;
}

@media only screen and (max-width: 768px) {
    .banner-1, .banner-2, .banner-3 {
        height: 50vh;
    }
}
/* index */


/* Footer */
footer {
    background: #fafafa;
    padding: 90px;
}

@media only screen and (max-width: 768px) {
}

@media only screen and (max-width: 567px) {
    footer {
        background: #fafafa;
        padding: 90px 0;
    }
}

footer ul li {
    margin-right: 20px;
    font-size: 16px;
}

    footer ul li a {
        color: var(--secondaryColor);
        transition: .1s;
        position: relative;
    }

        footer ul li a:hover {
            color: black;
        }

        footer ul li a:before {
            position: absolute;
            top: 120%;
            width: 100%;
            height: 2px;
            background: var(--secondaryColor);
            transition: .1s;
        }

        footer ul li a:hover:before {
            background: black;
        }

footer p {
    color: var(--fourthColor);
    font-weight: 400;
}

@media only screen and (max-width: 567px) {
    footer {
        background: #fafafa;
        padding: 90px 60px;
    }
}
/* Footer */