/* Import Fonts */
@font-face {
    font-family: Product-Regular;
    src: url(assets/fonts/Product-Sans-Regular.ttf);
}
@font-face {
    font-family: Product-Italic;
    src: url(assets/fonts/Product-Sans-Italic.ttf);
}
@font-face {
    font-family: Product-Bold;
    src: url(assets/fonts/Product-Sans-Bold.ttf);
}
@font-face {
    font-family: Product-Bold-Italic;
    src: url(assets/fonts/Product-Sans-Bold-Italic.ttf);
}

/* base default */
body {
    margin: 0;
    background-color: #010101;
}

a {
    color: inherit;
    text-decoration: none !important;
}

.active {
    color: red !important;
}

.show {
    display: block !important;
}

.center-image {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.right-image {
    display: block;
    margin-left: auto;
}

.left-image {
    display: block;
    margin-right: auto;
}

.bar-overlay {
    padding: 4.59375rem 0;
}

.show-flex {
    display: flex !important;
}

.seperate-container {
    display: none;
    flex-direction: row;
    margin: .5rem 0 2rem 0;
}

.seperate {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 20px solid white;
}

/* header */
.header-container {
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 9;
    position: absolute;
}

/* resize the container */
.main-header-container {
    background: transparent;
    padding: 3rem 10rem;
}

.sticky {
    position: fixed;
    background-color: white;
    border-radius: 0 0 1rem 1rem;
    padding: .5rem 10rem;
    top: -70px;
    left: 0;
    right: 0;
	transform: translateY(70px);
    -webkit-transition: transform 500ms ease, background 500ms ease;
}

.container-center {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.item-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center !important;
    -webkit-box-align: center;
    color: white;
}

.logo {
    position: relative;
    /* padding-left: 7rem; */
}

.menu {
    position: relative;
    text-align: center;
    font-family: Product-Bold;
    font-size: 1rem;
    margin-left: auto;
    transition: .4s;
}

.menu li {
    display: inline-block;
    color: inherit;
    padding: 0 1rem;
}

.menu ul li a:hover {
    transition: .5s;
    color: red;
}

.dropdown-btn {
    display: none;
    cursor: pointer;
    align-items: center;
    margin-left: auto;
    padding: .97rem 0;
}

.bar-color {
    background-color: white;
}

.bar1 {
    width: 1rem;
    height: .15rem;
    margin: .2rem 0;
    transition: .4s;
    border-radius: .1rem;
}

.bar2 {
    width: 1.5rem;
    height: .15rem;
    margin: .2rem 0;
    transition: .4s;
    border-radius: .1rem;
}

.bar3 {
    width: 2rem;
    height: .15rem;
    margin: .2rem 0;
    transition: .4s;
    border-radius: .1rem;
}

.dropdown-btn:hover .bar1 {
    width: 1.5rem;
    height: .15rem;
    margin: .2rem 0;
    transition: .4s;
    border-radius: .1rem;
}

.dropdown-btn:hover .bar2 {
    width: 1rem;
    height: .15rem;
    margin: .2rem 0;
    transition: .4s;
    border-radius: .1rem;
}

.dropdown-btn:hover .bar3 {
    width: .5rem;
    height: .15rem;
    margin: .2rem 0;
    transition: .4s;
    border-radius: .1rem;
}

.dropdown-menu-nav {
    display: none;
    right: 8.73rem;
    top: 4rem;
    position: absolute;
    background-color: white;
    color: black; 
    border-radius: 0 0 1.5rem 1.5rem;
    z-index: 1;
}

.dropdown-menu-nav a {
    float: none;
    color: inherit;
    display: block;
    text-align: right;
    margin: 0 1.2rem 1rem 1.2rem;
    font-family: Product-Bold;
    font-size: 1rem;
    /* background-color: red; */
}

.dropdown-menu-nav a:hover {
    color: red;
}

.dropdown-menu {
    display: none;
    right: 8.73rem;
    top: 6rem;
    position: absolute;
    background-color: black;
    color: white;
    border-radius: 0 0 1.5rem 1.5rem;
    z-index: 1;

}

.dropdown-menu a {
    float: none;
    color: inherit;
    display: block;
    text-align: right;
    margin: 0 1.2rem 1rem 1.2rem;
    font-family: Product-Bold;
    font-size: 1rem;
    /* background-color: red; */
}

.dropdown-menu a:hover {
    color: red;
}

/* anything about post */
.post-container {
    display: flex;
    margin-left: auto;
    margin-right: auto;
    padding: 0 5rem;
}

.post-img {
    display: block;
    margin: auto;
}

.post-img img {
    max-width: 585px;
    height: auto;
}

.slide-btn {
    text-align: center;
    /* box-sizing: border-box; */
}

.slide-btn a {
    font-family: Product-Bold;
    font-size: .8rem;
    padding: .5rem 1rem;
    margin: 0 1rem;
    background: transparent;
    cursor: pointer;
    /* border: 1px solid white; */
    /* border-radius: 10px; */
    color: white;   
}

.slide-btn a:hover {
    color: red;
    transition: .5s;
}

.post-desc {
    font-family: Product-Regular;
    color: white;
    text-align: justify;
    padding: 5rem;
    margin-top: auto;
    margin-bottom: auto;
}

.h1-container {
    display: flex;
    flex-direction: column;
}

.title-container {
    display: flex;
}

.flag-img {
    padding-top: 1rem;
    width: auto;
    height: auto;
    /* box-shadow: 0 .5rem 10rem .2rem white; */
}

.reverse-post {
    flex-direction: row-reverse !important;
}

.post-title {
    font-size: 2rem;
    margin-block-end: 0;
    text-align: left;
}

.post-country {
    font-size: .8rem;
    margin: 0;
    font-family: Product-Italic;
}

.post-par {
    font-size: 1rem;
}

.post-footer {
    font-family: Product-Bold;
    font-size: .8rem;
    /* color: red; */
}

.footer-container {
    display: flex;
    flex-direction: row;
    margin: 1rem 0;
}

.left-foot {
    width: 100%;
    /* background: red; */
}

.center-foot {
    font-family: Product-Bold;
    font-size: 1rem;
    text-align: center;
    padding: .5rem;
    color: black;
    background-color: white;
    border-radius: 0 0 1rem 1rem;
    max-width: 100%;
}

.right-foot {
    width: 100%;
    /* background: blue; */
}

/* about-me page */
.about-container {
    display: flex;
    flex-direction: row;
    padding: 0 5rem;
}

.about-img {
    display: block;
    margin: auto;
}

.about-img img {
    max-width: 585px;
    height: auto;
    border-radius: 2rem;
}

.about-desc {
    font-family: Product-Regular;
    color: white;
    text-align: justify;
    padding: 1rem 5rem;
    margin: auto 0;
}

.about-title {
    font-family: Product-Bold;
    font-size: 2rem;
    margin-block-end: 0;
    text-align: left;
}

.about-par {
    font-size: 1rem;
    margin-top: 1rem;
}

.about-par a:hover {
    color: red;
    transition: .5s;
}

/* Certif Page */
.certif-container {
    display: flex;
    flex-direction: row;
    padding: 0 5rem;
}

.certif-img {
    display: block;
    margin: auto;
}

.certif-img img {
    max-width: 585px;
    height: auto;
}

.certif-desc {
    padding: 1rem 5rem;
    margin: auto;
}

.certif-title {
    font-family: Product-Bold;
    font-size: 2rem;
    color: white;
    margin-block-end: 0;
    text-align: left;
}

.certif-par {
    font-family: Product-Italic;
    font-size: .8rem;
    color: white;
    text-align: left;
}

/* Contact page */
.contact-container {
    display: flex;
    flex-direction: row;
    padding: 0 5rem;
}

.contact-form {
    margin: 0 auto;
    width: 100%;
    text-align: center;
}

.form-container {
    display: flex;
    flex-direction: column;
}

.title-name {
    font-family: Product-Bold;
    font-size: 2rem;
    color: white;
    margin-bottom: 1rem;
}

::placeholder {
    font-family: Product-Regular;
    font-size: .8rem;
    color: black;
    opacity: 50%;
}

.box-msg, .box-subject {
    font-family: Product-Regular;
    font-size: .8rem;
    color: black;
    margin: .5rem auto;
    background: white;
    color: black;
    width: 40%;
    padding: 1rem;
    border-radius: 1rem;
}

.box-submit {
    margin: .5rem auto;
    width: 15%;
    padding: .5rem;
    cursor: pointer;
    border-radius: 1rem;
    background: white;
    font-family: Product-Regular;
    font-size: .8rem;
    color: black;
}

.socmed {
    width: 100%;
    margin: auto;
    padding: 1rem 5rem;
}

.socmed-container {
    flex-direction: row;
}

.socmed-container img {
    max-width: 40px;
    height: auto;
    margin: .5rem .5rem 0 0;
}

@media (max-width: 1100px) {
    .post-container, .about-container, .contact-container, .certif-container {
        flex-wrap: wrap;
        padding: 0;
    }

    .certif-title, .certif-par {
        text-align: center;
    }

    .socmed {
        text-align: center;
    }

    .post-desc, .about-desc {
        padding: 1rem 5rem 5rem 5rem
    }
}

@media (max-width: 920px) {
    .menu {
		display: none;
	}

	.dropdown-btn {
		display: block;
    }
}

/* iPhone 6/7/8 landscape */
@media (max-width: 600px) {
    /* .post-desc {
        padding: 1rem 3rem 4rem 3rem
    } */

    .post-img img {
        max-width: 500px;
        height: auto;
    }

    .about-img img {
        max-width: 500px;
        height: auto;
    }
}

/* iPhone 6/7/8+ */
@media (max-width: 414px) {
    .main-header-container {
        padding: 3rem 5rem;
    }

    .sticky {
        padding: .5rem 5rem;
    }

    .dropdown-menu-nav {
        right: 3.73rem;
    }

    .dropdown-menu-nav a{
        font-size: .8rem;
    }

    .dropdown-menu {
        right: 3.73rem;
    }

    .dropdown-menu a{
        font-size: .8rem;
    }

    .post-desc, .about-desc {
        padding: 1rem 4rem 2rem 4rem;
    }

    .post-img img {
        max-width: 350px;
        height: auto;
    }

    .about-img img {
        max-width: 350px;
        height: auto;
    }

    .certif-img img {
        max-width: 350px;
        height: auto;
    }
}

/* iPhone X/6/7/8 */
@media (max-width: 375px) {
    .post-desc, .about-desc {
        padding: 1rem 3rem 2rem 3rem;
    }

    .post-img img {
        max-width: 320px;
        height: auto;
    }

    .about-img img {
        max-width: 320px;
        height: auto;
    }

    .certif-img img {
        max-width: 320px;
        height: auto;
    }
}

@media (max-width: 320px) {
    .main-header-container {
        padding: 3rem 3rem;
    }

    .sticky {
        padding: .5rem 3rem;
    }

    .dropdown-menu-nav {
        right: 1.73rem;
    }

    .dropdown-menu {
        right: 1.73rem;
    }

    .post-desc, .about-desc {
        padding: 1rem 2rem 2rem 2rem;
    }

    .post-img img {
        max-width: 290px;
        height: auto;
    }

    .about-img img {
        max-width: 290px;
        height: auto;
    }

    .certif-img img {
        max-width: 290px;
        height: auto;
    }
}