/*******************/
/*  General Style  */
/*******************/
::selection {
    background-color: #212529;
    color: #FFF;
}

* {
    scroll-behavior: smooth;
}

body {
    font-family: 'Oswald', sans-serif;
    background-color: #A7A6AC;
}

p {
    font-family: 'Raleway', sans-serif;
}

a {
    color: #2e2e2e;
    font-weight: 400;
}

a:hover {
    text-decoration: none;
    color: #000;
}

.btn-ily-mode {
    background-color: #212529;
    color: #FFF;
    padding: 0.5rem 1rem;
    border-radius: 0;
    border: 2px solid #212529;
}

.btn-ily-mode:hover {
    background-color: #FFF;
    color: #212529;
}

.btn:focus, .btn.focus {
    box-shadow: none;
}

h1 {
    font-weight: 600;
}

h2.primary-h {
    position: relative;
    font-size: 1.7rem;
    font-weight: 600;
}

h2.primary-h span {
    position: relative;
    display: inline-block;
    padding-right: 75px;
    margin-right: 25px;
    line-height: 1.75;
    color: #2e2e2e;
}

h2.primary-h span:before {
    content: "";
    position: absolute;
    display: block;
    top: 50%;
    right: 0;
    width: 50px;
    height: 0;
    margin-top: -1px;
    border-top: 2px solid #2e2e2e;
}


/* end of General Style */

/*******************/
/*    Icon Bar     */
/*******************/
.icon-bar {
    position: fixed;
    right: 2rem;
    bottom: 1.5rem;
    z-index: 99999;
}
  
  .icon-bar a {
    display: block;
    text-align: center;
    margin-top: 1rem;
    transition: all 0.3s ease;
    color: #212529;
    font-size: 20px;
  }


/* Icon Bar */


/*******************/
/*     Navbar      */
/*******************/
.navbar {
    transition: all 0.4s ease;
    width: 100%;
    position: fixed;
    padding: 2rem 5rem;
    z-index: 999;
}

.navbar-light .navbar-nav .nav-link {
    color: #FFF;
    margin-left: 1rem;
}

.navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus {
    color: rgba(255, 255, 255, 0.7);
}

.nav-collapse .navbar-nav .nav-link {
    color: #2e2e2e;
}

.nav-collapse .navbar-nav .nav-link:hover , .nav-collapse .navbar-nav .nav-link:focus {
    color: #000;
}

.nav-collapse {
    background: white;
    padding: 1rem 5rem;
    box-shadow: 0px 0px 5px #ccc;
    z-index: 9999;
}

.navbar-brand img {
    width: 40px;
}

.navbar-toggler {
    padding: 0;
    font-size: 1.3rem;
}

/* end of Navbar */


/******************/
/*     Header     */
/******************/
.header {
    background: url('../images/cover-bg.jpg') no-repeat;
    background-size: cover;
    background-attachment: fixed;
    height: 100vh;
    position: relative;
}

.header-content {
    position: absolute;
    top: 10rem;
    margin: 0 5%;
}

.header-content .hi {
    margin-bottom: 0;
}

.header-content .first-name {
    font-size: 7rem;
}
.header-content .last-name {
    font-weight: 300;
    letter-spacing: 1.5rem;
}

.header-content .job-name {
    margin-top: 1rem;
    background: #212529;
    color: #FFF;
    padding: 10px 15px;
    width: fit-content;
    font-size: 24px;
}


/* end of Header*/


/******************/
/*     About      */
/******************/
.about {
    display: flex;
    background-color: #FFF;
}

.img-area {
    width: 50%;
    background: url(../images/about.jpg) center center no-repeat;
    background-size: cover;
}

.disc-area {
    height: 100%;
    width: 50%;
}

.disc-area .about-infos {
    padding: 2rem;
}

.about-infos h3 {
    font-size: 2.5rem;
}

.about-infos h2 {
    font-size: 26px;
    font-weight: 400;
    margin-top: 1.5rem;
}

/* end of About Us */


/****************/
/*    Skills    */
/****************/
.skills {
    background-color: #F5F5F5;
    padding-top: 4rem;
}

.skills .item-content {
    margin-bottom: 3rem;
}

.skills .item-title {
    margin-bottom: 1rem;
}

.skills .item-title i {
    display: inline-block;
    margin-right: 1rem;
    font-size: 28px;
}
.skills .item-title h4 {
    display: inline-block;
}




/**************************/
/*     Projects Slide     */
/**************************/
.slider-1 {
	padding-top: 4rem;
	padding-bottom: 5rem;
	background-color: #F5F5F5;
}

.slider-1 .btn-ily-mode {
	width: 100%;
}

.slider-1 .slider-container {
	position: relative;
}

.slider-1 .swiper-container {
	position: static;
	width: 90%;
	text-align: center;
}

.slider-1 .swiper-button-prev:focus,
.slider-1 .swiper-button-next:focus {
	/* even if you can't see it chrome you can see it on mobile device */
	outline: none;
}

.slider-1 .swiper-button-prev {
	left: -0.5rem;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2028%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23777b7e'%2F%3E%3C%2Fsvg%3E");
	background-size: 1.125rem 1.75rem;
}

.slider-1 .swiper-button-next {
	right: -0.5rem;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2028%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23777b7e'%2F%3E%3C%2Fsvg%3E");
	background-size: 1.125rem 1.75rem;
}

.slider-1 .card {
	position: relative;
	border: none;
	background-color: transparent;
}

.slider-1 .card-image {
	width: 90%;
	margin-right: auto;
	margin-bottom: 0.25rem;
	margin-left: auto;
    box-shadow: 0px 0px 5px #33333340;
}

.slider-1 .card-body {
	padding-bottom: 0;
}

/* Projects Slide */


/*******************/
/*     Contact     */
/*******************/
.contact {
    padding-top: 3rem;
    padding-bottom: 3rem;
    background-color: #FFF;
}

.form-control {
    border-radius: 0;
}

.form-control:focus {
    box-shadow: none;
    border-color: #ced4da;
    border-bottom: 1.5px solid #212529;
}

.contact-info {
    padding-left: 0.5rem;
}

.contact-info ul {
    padding: 0;
}

.contact-info li {
    list-style: none;

}

.contact-info i {
    font-size: 28px;
    padding-right: 1.8rem;
}
/* Validation Form */
.help-block .list-unstyled li {
    font-weight: 400;
    font-size: 14px;
    margin-top: 3px;
    color: #c70000;
    font-family: 'Raleway', sans-serif;
}

.form-message {
    margin-left: 1rem;
    margin-top: 1rem;
}

/* end of contact */


/*****************/
/*   Copyright   */
/*****************/

.copyright {
    background: #2e2e2e;
    color: #ced4da;
    text-align: center;
    padding: 1.3rem;
}

.copyright p {
    margin: 0;
    font-size: 13px;
}

.copyright p span {
    font-weight: 700;
}

/* end of Copyright */


/******************************/
/*     Details Lightboxes     */
/******************************/
.lightbox-basic {
	margin-top: 3rem;
}

.lightbox-basic img {
	display: block;
	margin-right: auto;
	margin-bottom: 3rem;
	margin-left: auto;
}

.lightbox-basic h3 {
	margin-bottom: 0.625rem;
}

.lightbox-basic hr {
	width: 3.75rem;
	height: 0.125rem;
	margin-top: 0.125rem;
	margin-bottom: 1.125rem;
	margin-left: 0;
	border: 0;
	background-color: #000;
	text-align: left;
}

.lightbox-basic h4 {
	margin-top: 1.75rem;
	margin-bottom: 0.75rem;
}

.lightbox-basic table {
	margin-top: 1rem;
	margin-bottom: 1.5rem;
}

.lightbox-basic table tr {
	line-height: 1.75em;
}

.lightbox-basic table .icon-cell {
	width: 2rem;
	padding-right: 0.25rem;
	color: #000;
	text-align: center;
}

.lightbox-basic a.mfp-close.as-button {
	position: relative;
	width: auto;
	height: auto;
	margin-left: 0.375rem;
	color: #000;
	opacity: 1;
}

.lightbox-basic a.mfp-close.as-button:hover {
	color: #f1f1f8;
}

.lightbox-basic button.mfp-close.x-button {
	position: absolute;
	top: -0.375rem;
	right: -0.375rem;
	width: 2.75rem;
	height: 2.75rem;
	color: #717489;
}

.modal .modal-header {
	position: absolute;
	top: 0px;
	right: 5px;
	border-bottom: none;
	z-index: 1;
}

.modal {
    padding-top: 5rem;
}


/*******************/
/*   Media Query   */
/*******************/
/* Max With 768px */
@media (max-width: 768px) {
    /* Navbar */
    .navbar {
        padding: 1rem 1rem;
        background-color: #FFF;
    }

    .navbar-light .navbar-toggler {
        border-color: transparent;
        outline: none;
    }

    .navbar-light .navbar-nav .nav-link {
        color: #2e2e2e;
    }

    .navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus {
        color: #000;
    }

    div#navbar6 {
        margin-top: 1rem;
    }
    /* end of Navbar */

    /* Header */
    .header {
        background-position-x: 55%;
    }
    
    .header-content {
        margin: 0;
    }
    /* end of Header */


    /* Icon Bar */
    .icon-bar {
        background-color: #212529;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 11%;
        padding-top: 15px;
    }

    .icon-bar a {
        display: inline;
        color: #FFF;
    }
    
    .icon-bar a i {
        width: 19%;
    }
    /* end of Icon Bar */

    /* About */
    .about {
        display: block;
    }

    .img-area {
        width: 100%;
        height: 27rem;
    }

    .disc-area {
        width: 100%;
    }

    .disc-area .about-infos {
        padding: 1rem;
    }
    /* end of About */

    /* Contact */
    .contact .contact-info {
        padding-top: 2rem;
    }
    /* end of Contact */

}
/* end of Max With 768px */




/*************************/
/*     Media Queries     */
/*************************/	
/* Min-width width 768px */
@media (min-width: 768px) {

    /* Projects Slide */
	.slider-1 .swiper-button-prev {
		left: 1rem;
		width: 1.375rem;
		background-size: 1.375rem 2.125rem;
	}
	
	.slider-1 .swiper-button-next {
		right: 1rem;
		width: 1.375rem;
		background-size: 1.375rem 2.125rem;
	}
	/* end of Projects Slide */
}