:root {--primary: #0E6655; --primary-opa: rgba(14, 102, 85, 0.5); --secondary: #117A65; --secondary-light: #217866; --black: #080808; --white: #fff; --dark: #262626; --light: #ababab;}
:root {--Sans-serif: sans-serif; --Popping: 'Poppins', sans-serif; --Arial: Arial, Helvetica, sans-serif; --Time-new-roman: "Times New Roman", Times, serif;}
::selection {background-color: var(--primary-opa); color: var(--white);}
* {margin: 0; padding: 0; font-family: var(--Popping); box-sizing: border-box;}
body {background: var(--black); color: var(--white);}

/* ----------HEADER---------- */
#header {width: 100%; height: 100vh;}
#img {background-image: url(imgs/background.png); background-size: contain; background-repeat: no-repeat; background-position: center; position: absolute; 
    width: 100%; z-index: -100; height: 100%; filter: contrast(90%) brightness(50%);}

.container {padding: 10px 10%;}

nav {display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;}

.logo {width: 140px; font-size: 30px; font-weight: bold;}
.logo span {color: var(--primary);}

nav ul li {display: inline-block; list-style: none; margin: 10px 20px;}
nav ul li a {color: var(--white); text-decoration: none; font-size: 18px; position: relative;}
nav ul li a::after {content: ''; width: 0; height: 3px; background: var(--primary); position: absolute; left: 0; bottom: -6px; transition: 0.5s;}
nav ul li a:hover::after {width: 100%;}

.header-text {margin-top: 20%; font-size: 30px;}
.header-text h1 {font-size: 60px; margin-top: 20px; color: var(--white);}
.header-text p span {color: var(--primary);}

/* ----------ABOUT---------- */
#about {padding: 80px 0px; color: var(--light);}

.row {display: flex; justify-content: space-between; flex-wrap: wrap;}

.about-col-1 {flex-basis: 35%;}
.about-col-1 img {width: 100%; border-radius: 15px; background: var(--dark);}
.about-col-2 {flex-basis: 60%;}

.sub-title {font-size: 60px; font-weight: 600; color: var(--white);}

.tab-titles {display: flex; margin: 20px 0 40px;}
.tab-links {margin-right: 50px; font-size: 18px; font-weight: 500; cursor: pointer; position: relative;}
.tab-links::after {content: ''; width: 0; height: 3px; background: var(--primary); position: absolute;
 left: 0; bottom: -8px; transition: 0.5s;}

.tab-links:hover::after{width: 25%;} 
.tab-links.active-link::after {width: 85%;}
.tab-contents ul li {list-style: none; margin: 10px 0;}
.tab-contents ul li span {color: var(--secondary); font-size: 14px;}
.tab-contents {display: none;}
.tab-contents.active-tab {display: block;}

/* ----------SERVICES---------- */
#services {padding: 30px 0;}

.services-list {display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); grid-gap: 40px; margin-top: 50px;}
.services-list div {background: var(--dark); padding: 40px; font-size: 15px; font-weight: 300; border-radius: 10px; transition: background 0.5s, transform 0.5s;}
.services-list div i {font-size: 50px; margin-bottom: 30px;}
.services-list div h2 {font-size: 30px; font-weight: 500; margin-bottom: 15px;}
.services-list div p a {text-decoration: none; color: var(--primary);}
.services-list div:hover p a {color: var(--light); text-decoration: underline 1px;}
.services-link {text-decoration: none; color: var(--white); font-size: 14px; margin-top: 20px; display: flex; justify-content: end;}
.services-link:hover {color: var(--light); text-decoration: underline 2px;}
/* .services-list div a::after {content: ''; margin-top: 20px; width: 25%; height: 3px; background: var(--white); transition: 0.5s;} */
.services-list div:hover {background: var(--primary); transform: translateY(-10px);}

/* ----------PORTFOLIO---------- */
#portfolio {padding: 50px 0;}

.work-list {display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); grid-gap: 40px; margin-top: 50px;}
.work {border-radius: 10px; position: relative; overflow: hidden;}
.work img {width: 100%; height: 480px; border-radius: 10px; display: block; transition: transform 0.5s; object-fit: cover;}

.layer {width: 100%; height: 0; background: var(--primary); border-radius: 10px; position: absolute; left: 0; bottom: 0; overflow: hidden; display: flex;
    align-items: center; justify-content: center; flex-direction: column; padding: 0 40px; text-align: center; font-size: 16px; transition: height 0.5s;}
.layer h2 {margin-bottom: 30px;}
.layer a {margin-top: 30px; color: var(--black); text-decoration: none; font-size: 18px; line-height: 60px; background: var(--white); width: 60px; height: 60px; 
    border-radius: 50%; text-align: center;}

div:hover .link-works {color: var(--primary); transition: 5s;}

.work:hover img {transform: scale(1.1);}
.work:hover .layer {height: 100%;}

.btn {display: block; margin: 50px auto; width: fit-content; border: 1px solid var(--primary); padding: 14px 50px; border-radius: 0.375rem; color: var(--white); 
    text-decoration: none; transition: background 0.75s; color: var(--primary); cursor: pointer;}
.btn:hover {background: var(--primary); color: var(--white);}

a:disabled {opacity: 0.5!important;}

/* ----------CONTACT---------- */
.contact-left {flex-basis: 35%;}
.contact-right {flex-basis: 60%;}
.contact-left p {margin-top: 30px;}
.contact-left p i {color: var(--primary); margin-right: 15px; font-size: 25px;}

.social-icons {margin-top: 30px;}
.social-icons a {text-decoration: none; font-size: 30px; margin-right: 15px; color: var(--light); display: inline-block; transition: color 0.5s, transform 0.5s;}
.social-icons a:hover { color: var(--primary); transform: translateY(-5px);}

.btn.btn2 {display: inline-block}
.btn.btn3 {text-transform: uppercase; font-size: medium; background: var(--black); margin-top: 30px; transition: background 0.5;}
.btn.btn3:hover {background: var(--primary);}

.contact-right form {width: 100%;}

form input, form textarea {width: 100%; border: 0; outline: none; background: var(--dark); padding: 15px; margin: 15px 0; color: var(--white); font-size: 18px; border-radius: 6px;}

.copyright {width: 100%; text-align: center; padding: 25px 0; background: var(--dark); font-weight: 300; margin-top: 20px; position: absolute; bottom: 0;}
.copyright p span {color: var(--secondary);}
.copyright p span:hover {color: var(--primary);}

nav .fas {display: none;}

.decoration-none {text-decoration: none; color: unset;}

#Toast {background-color: var(--primary); color: var(--white); padding: 10px; border-radius: 5px; position: fixed; bottom: 10px; right: -115px; transform: translateX(-50%);
    z-index: 999; transition: opacity 0.5s ease;}
.hidden {opacity: 0;}

/* ----------CSS FOR SMALL SCREEN---------- */
@media only screen and (max-width: 600px) {
    /* Adjust the header image and text size for small screens */
    #header {background-image: url(imgs/phone-background.png);}
    .header-text {margin-top: 15%; font-size: 16px;}
    .header-text h1 {font-size: 30px;}

    /* Show the navigation menu on small screens */
    nav ul {display: none;}
    nav .fas {display: block; font-size: 25px;}
    nav ul {
        background: var(--secondary); position: fixed; top: 0; width: 200px;
        /* Increased the width to accommodate the menu items */
        right: 0; height: 100vh; padding-top: 50px; transform: translateX(200px);
        /* Off-canvas menu, initially hidden */
        transition: transform 0.3s ease-in-out;
    }
    nav ul.show {transform: translateX(0);}
    nav ul li {display: flex; margin: 25px;}

    /* .row {display: unset;} */
    .tab-links {margin-right: 24px;}
    .sub-title {font-size: 50px;}
    .card-project {grid-template-columns: repeat(1, minmax(250px, 1fr))!important;}

    .about-col-1 {flex-basis: 0;}
    .sm-hidden {visibility: hidden;}
    .about-col-2 {flex-basis: auto;}

    .contact-left {flex-basis: auto;}
    .contact-right {flex-basis: auto;}

    .copyright {position: unset; width: auto;}
}

/* ----------travaux.html---------- */
.card-project {display: grid; grid-template-columns: repeat(3, minmax(250px, 1fr)); grid-gap: 40px; margin-top: 50px;}
.card-project div {background: var(--dark); font-size: 15px; font-weight: 300; border-radius: 10px; border: var(--light) solid 1px;}
.card-project div img {width: 100%; height: 144px; border-radius: 10px 10px 0 0; object-fit: revert;}
.card-project div div {padding: 20px; width: auto; border: 0px;}
.card-project div div h3 {margin-bottom: 1em; display: flex; justify-content: space-between;}
.card-project div div h3 span {color: var(--secondary-light);}
.card-project div div p {color: var(--light);}
.card-project div div a {text-decoration: none; color: var(--secondary-light); justify-content: end; display: flex;}
.card-project div div div {margin-top: 1em; padding: 0; justify-content: space-between; align-items: center; display: flex;}
.card-project i {margin-right: 0.5em; display: flex; align-items: center;}
.card-project div div a:hover {color: var(--white);}