/*
Theme Name: LN WEB
Theme URI: https://lnweb-services.com
Author: Loane Nguyen
Author URI: https://lnweb-services.com
Description: Thème pour le site LN WEB
Requires at least: WordPress 6.3
Version: 1.5.7
*/

/* global variables */
:root {
    --beige: #fffdfa;
    --dark-beige: #FFF7EF;
    --corail: #DC5354;
    --green: #245D52;
    --dark-green: #2C443A;
    --dark-grey: #444444;
    --grey: #717270;
    --light-grey: #a6a6a6;
}


/* fonts */

@font-face {
    font-family: Spinwerad;
    src: url(fonts/spinwerad.ttf);
    font-weight: normal;
}

@font-face {
    font-family: NightWindSent;
    src: url(fonts/NightWindSentSample.ttf);
    font-weight: normal;
}

@font-face {
    font-family: Poppins;
    src: url(fonts/Poppins-Light.ttf);
}


/* colors */
.txt-beige-color		{color:				var(--beige);}
.bg-beige-color			{background-color:	var(--beige);}
.border-beige-color		{border-color:		var(--beige);}

.txt-dark-beige-color		{color:				var(--dark-beige);}
.bg-dark-beige-color			{background-color:	var(--dark-beige);}
.border-dark-beige-color		{border-color:		var(--dark-beige);}

.txt-corail-color		{color:				var(--corail);}
.bg-corail-color		{background-color:	var(--corail);}
.border-corail-color	{border-color:		var(--corail);}

.txt-green-color		{color:				var(--green);}
.bg-green-color		    {background-color:	var(--green); color: white}
.border-green-color	    {border-color:		var(--green);}

.txt-grey-color		    {color:				var(--grey);}
.bg-grey-color		    {background-color:	var(--grey);}

.txt-white-color        {color: white;}

/* flex */
.container{
    max-width: 100vw;
    margin: 0;
    padding: 0;
}

.section{
    width: 100vw;
    margin: 0 auto;
    padding: 40px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

.d-row{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    padding: 0 100px;
}

.d-col{
    display: flex;
    flex-direction: column;
    gap: 5vh;
    padding: 100px 50px;
}

.pr-30 {
    padding-right: 30px;
}

.pr-100 {
    padding-right: 100px;
}

.p-20 {
    padding: 20px;
}

.p-40 {
    padding: 40px;
}

.pe-100 {
    padding: 0 100px;
}

.pt-60 {
    padding: 60px 0;
}

.p-100 {
    padding: 100px 0;
}



/* body */
html, body {
    font-family: "Poppins", Futura, "Trebuchet MS", sans-serif;
    color: var(--dark-grey);
    background-color: var(--beige);
    display: block;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    font-size: 17px;
    line-height: 1.6em;
}

/* containers */ 
.inner-section{
    display: flex;
    flex-wrap: wrap;
    width: 90vw;
}

.container-50 {
    width: 50%;
    padding: 2% 5%;
}


.container-35 {
    width: 35%;
    padding: 2% 5%;
}

.container-25 {
    width: 25%;
}

.green-container{
    display: flex;
    flex-direction: column;
    background-color: var(--green);
    border-radius: 10px;
    padding: 80px;
    color: white;
    width: 50%;
    gap: 10px;
}

.green-container2{
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: var(--green);
    border-radius: 10px;
    padding: 30px 50px 30px 100px;
    color: white;
    width: 70%;
    gap: 10px;
    margin-left: -50px;
}

/* titles */
h1 {
    font-family: "Spinwerad", Didot, sans-serif;
    font-size: 3em;
    color: var(--dark-grey);
    margin: 0;
    padding: 30px 0;
}

h2 {
    font-family: "Spinwerad", Didot, sans-serif;
    font-size: 2em;
}

h3 {
    font-weight: bold;
    font-size: 1.5em;
}

h4 {
    font-family: "Spinwerad", Didot, sans-serif;
    font-size: 1.4em;
    color: var(--dark-green);
}

.subtitle1{
    font-size: 1.2em;
}

.subtitle2{
    font-family: "Spinwerad", Helvetica, sans-serif;
    font-size: 2em;
}

.subtitle3{
    font-size: 1em;
    font-weight: bold;
}

.highlight1{
    font-family: "NightWindSent", Helvetica, sans-serif;
    font-weight: normal;
    font-size: 2em;
    background: linear-gradient(to top, var(--dark-beige) 50%, transparent 50%);
}

.highlight2{
    font-family: "NightWindSent", Helvetica, sans-serif;
    font-weight: normal;
}

.txt-thin{
    font-weight: lighter;
}

p {
    padding: 10px;
    margin: 0;
}


/* lists and links */

ul li {
    position: relative;
    padding-bottom: 20px;
    font-family: "Poppins", Futura, "Trebuchet MS", sans-serif;
}
  
ul {
    list-style: none;
    padding: 20px 30px;
    margin-bottom: 0;
}

ol li{
    font-weight: lighter;
}

a {
    text-decoration: none;
    color: #DC5354;
}

a:hover {
    opacity: 0.9;
}

.services-list li:before{
    content: '';
    position: absolute;
    border-right: 3px solid var(--corail);
    border-bottom: 3px solid var(--corail);
    width: 20px;
    height: 20px;
    top: calc(20%);
    left: -40px;
    transform: translateY(-50%) rotate(-45deg);
}

/* images */
.icon-container{
    border: 1px solid var(--grey);
    border-radius: 50%;
    padding: 30px;
}

.illustration{
    width: 100%;
    height: auto;
}

/* header */
#site-header .container{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    background-color: var(--beige);
}

.navbar {
    display: flex;
    flex-direction: column;
}

.menu{
    display: flex;
    flex-direction: row;
    padding: 0;
}

.logo-header{
    height: auto;
    width: 200px;
    padding: 10px;
}

.nav-link, .menu-item a {
    padding: 10px 50px;
    font-weight: normal;
    text-decoration: none;
    text-transform: uppercase;
    color: var(--grey);
}

.nav-link:hover, .menu-item a:hover {
    font-weight: bold;
    color: var(--corail);
    transition: all 0.5s ease;
}

/* Highlight using list element */
li.current_page_item{
    color:var(--corail);
}
 
/* Highlight using link element */
li.current_page_item a{
    color: var(--corail);
}

/* footer */
#site-footer .container{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background-color: var(--green);
    color: var(--beige);
}

.footer-link {
    font-weight: lighter;
    text-decoration: none;
    color: var(--beige);
}
.footer-link:hover {
    font-weight: lighter;
}

.logo-footer{
    height: auto;
    width: 100px;
}

.sm-link {
    height: auto;
    width: 2rem;
}

.copyright{
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding: 5px;
    background-color: #dddddd;
    color: var(--grey);
    margin: 0;
    font-size: 15px;
}

.footer-left{
    display: flex;
    flex-direction: column;
    width: 30%;
    padding-left: 50px;
    font-size: 16px;
}

.footer-right{
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 20%;
    font-size: 16px;
}

.button-top {
    position: fixed;
    bottom: 10px;
    right: 10px;
    z-index: 100;
    width: 50px;
    height: 50px;
    border: 0;
    border-radius: 50%;
    box-shadow: none;
    background: var(--dark-green);
    color: #fff;
    cursor: pointer;
    pointer-events: none;
    opacity: 0;
    transition: opacity .18s ease;
}

.button-top-visible {
opacity: 1;
pointer-events: auto;
}

/* underlay */
/* .underlay{
    position: absolute;
    z-index: -1;
    width: 100vw;
    min-height: 100vh;
}

.illustration-1{
    position: absolute;
    content: url(/../wp-content/themes/lnweb/public/img/illustration-abstraite-lnweb-1.svg);
    top: 0px;
    width: 75vw;
}

/* buttons */
.btn-container {
    padding: 40px;
}

.btn-1 {
    background-color: var(--corail);
    color: var(--beige);
    padding: 10px 30px;
    text-decoration: none;
    text-align: center;
    border-radius: 10px;
}

.btn-2{
    background-color: transparent;
    color: var(--dark-green);
    padding: 10px 30px;
    text-decoration: none;
    text-align: center;
    border-radius: 10px;
    border: 1px solid var(--grey);
}

.btn-1:hover {
    background-color: var(--green);
}

.btn-2:hover {
    background-color: var(--green);
    color: white;
}

.btn-green-border {
    border:	1px solid var(--green); 
    border-radius: 5px;
}

.btn-green-border:hover{
    background-color: var(--green);
    color: var(--beige);
}

/* hero banners */
.main-banner{
    width: 90vw;
    height: 600px;
    background-color: var(--green);
    border-radius: 10px;
    padding: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 40px;
}

.txt-banner{
    width: 50%;
    padding: 0 50px;
}


/* illustrations */
.illustration-container-100{
    width: 100%;
}

.illustration-container-35{
    display: flex;
    justify-content: center;
    width: 35%;
    margin-right: -50px;
    z-index: 10;
}

.illustration-banner{
    display: flex;
    width: 70%;
    height: auto;
    justify-content: center;
    z-index: 1;
}

/* homepage */
.services{
    border: 1px solid;
    border-radius: 10px;
    width: 30%;
    padding: 30px;
    box-shadow: 10px 10px var(--dark-grey);
    background-color: white;
}

.services:hover{
    box-shadow: 10px 10px var(--green);
}

#prospects .inner-section{
    flex-direction: row;
    background-color: white;
    border-radius: 10px;
    padding: 100px;
}

/* homepage ils mont fait confiance */
@keyframes slide {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-100%);
  }
}

.section-logos {
  overflow: hidden;
  padding: 40px 0;
  white-space: nowrap;
  position: relative;
}

.section-logos:before,
.section-logos:after {
  position: absolute;
  top: 0;
  width: 250px;
  height: 100%;
  content: "";
  z-index: 2;
}

.section-logos:hover .slider-logos {
  animation-play-state: paused;
}

.slider-logos {
  display: inline-block;
  animation: 45s slide infinite linear;
}

.logo-clients {
  height: 100px;
  margin: 0 20px;
  filter: saturate(0);
}

#clients {
    gap: 0;
}

/* end ils mont fait confiance */

.overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .5s ease;
    background-color: #000000b5;
    border-radius: 10px;
}
  
.text {
    color: white;
    font-size: 15px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
    width: 100%;
  }

.homepage-a-propos-container{
    background-image: url("img/background-dots.svg");
    background-repeat: repeat;
    background-size: contain;
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding: 50px;
}


/* Services */

.divider {
    width: 50%;
    margin: 1em 0; 
    border-top: 1px solid var(--light-grey);
}

.service-title {
    padding: 0 25%;
    text-align: center;
    font-size: 3em;
}

.maintenance-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 0 40px;
}

.pros-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 25%;
    gap: 10px;
    padding: 10px;
}

.number {
    font-family: "Spinwerad", Helvetica, sans-serif;
    font-size: 150px;
    font-weight: bolder;
    opacity: 0.15;
    text-align: center;
}

.visuel-services {
    background-image: url("../../themes/lnweb/public/img/homepage-seen-laptop-screen-freepik.jpg");
}

/* A Propos */

.a-propos-photo {
    display: flex;
    justify-content: center;
    align-items: center;
}

.a-propos-photo img {
    width: 100%;
    border-radius: 10px;
}

.a-propos-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 50%;
}

.a-propos-title {
    z-index: 1;
    margin-left: 40%;
}

.a-propos-text {
    width: 90%;
    border-radius: 10px;
    background-color: var(--dark-beige);
    padding: 80px;
    margin-top: -10%;
}

.margin-left-10-container{
    margin-left: -10% ;
}

.z-index{
    z-index: 1;
}
.section-stack {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 20px;
    padding: 20px;
}

.logo-stack{
    width: auto;
    max-height: 100px;
    filter: saturate(0);
}

.logo-stack:hover{
    filter:none;
}

/* FAQ */

.accordion {
    background-color: transparent !important;
}

.accordion-button{
    background-color: white;
}

.accordion-button:not(.collapsed) {
    color: var(--beige);
    background-color: var(--green);
}


.accordion {
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.accordion-body {
    padding: 50px;
}

/* call to actions */
.cta-container{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 100px 50px;
}

/* animations */
.lineUp {
    animation: 2s anim-lineUp ease-out 1;
  }
  @keyframes anim-lineUp {
    0% {
      opacity: 0;
      transform: translateY(80%);
    }
    20% {
      opacity: 0;
    }
    50% {
      opacity: 1;
      transform: translateY(0%);
    }
    100% {
      opacity: 1;
      transform: translateY(0%);
    }
  }

.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
text-align: left;
border: none;
outline: none;
transition: 0.4s;
}

.parallax {
    /* Set a specific height */
    min-height: 600px;
  
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}


/* Contact */
.section-text{
    display: flex;
    flex-direction: column;
    width: 40%;
    padding: 50px;
}

.section-form{
    display: flex;
    flex-direction: column;
    width: 60%;
}

/* Eco-conception */
.eco-photo {
    width: 400px;
}

.eco-list {
    padding: 0 100px;
}
.eco-list li:before{
    content: '';
    position: absolute;
    border-right: 3px solid var(--corail);
    border-bottom: 3px solid var(--corail);
    width: 20px;
    height: 20px;
    top: calc(20%);
    left: -40px;
    transform: translateY(-50%) rotate(-45deg);
}

#eco-text {
    align-items: start;
}


/* Portfolio */

.visuel-portfolio {
    background-image: url("../../themes/lnweb/public/img/765053-freepik.jpg");
    width: 100%;
}

.attachment-post-thumbnail {
    width: 100%;
    height: auto;
}

.portfolio-archive {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 60px;
    justify-content: center;
}

.portfolio-archive-item {
    display: flex;
    flex-direction: column;
    width: 45%;
    text-align: center;
    position: relative;
}

.portfolio-propositions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

.portfolio-proposition-item {
    display: flex;
    flex-direction: column;
    width: 40%;
    text-align: center;
}

.portfolio-archive-item:hover .overlay {
    opacity: 1;
}

/* desktop (rem) base size */
@media ( min-width: 1467px ) {
}

/* laptop (rem) base size */
@media ( max-width: 1466px ) {
     /* A propos */ 
    .section-stack { flex-wrap: wrap;}
}

/* tablets and mobile (rem) base size */
@media ( max-width: 991px  ) { 
    /* header nav */
    #navbarToggler { min-height: 50vh;}
    .menu { flex-direction: column; align-items: center; padding: 40px 0; font-size: 25px; gap: 30px}
    .navbar{ gap:20px;}
    /* titles */
    h1 { padding: 20px 0;}
    .subtitle2 { text-align: center;}
    .p-100{ padding: 60px}
    /* section */
    .d-row{ flex-direction: column; padding: 40px; align-items: center; gap: 10px}
    /* footer */
    .footer-left{ width: 50%;}
    .footer-right{ width: 40%;}
    /* homepage */
    .main-banner{ height: auto; flex-direction: column; text-align: center;}
    .txt-banner{
        width: 100%;
        padding: 0 30px;
    }
    .inner-section{ width: 90vw; flex-direction: column; align-content: center; gap: 30px; padding: 40px;}
    .services{ width: 100%;}
    .services-list {
        padding-right: 0;
    }
    .container-50{ width: 100%; padding: 5% 5%}
    .container-35{ width: 100%; padding: 5% 5%}
    .container-25 { width: 100%;}
    #prospects .inner-section{ padding: 50px; }
    .homepage-a-propos-container{ flex-direction: column; align-items: center;}
    .illustration-container-35{ width: 90%; margin-right: 0;}
    .green-container{ width: 100%; padding: 50px; margin-top: -20px;}
    /* services */
    .pros-container { width: 100%; padding: 20px 0;}
    /* contact */
    .section-form { width: 100%; padding: 0;}
    .section-text { width: 100%; padding: 30px;}
    /* FAQ */
    .green-container2 {width: 100%; padding: 30px; margin-left: 0; margin-top: -50px;}
    /* A propos */
    .a-propos-container { width: 100%;}
    .margin-left-10-container { margin-left: 0;}
    /* Eco-conception */
    #eco-title { text-align: center; padding-right: 0;}
    .pe-100 { padding: 0 40px;}
}

@media ( max-width: 576px  ) { 
    h1{ font-size: 2em;}
    h2 { text-align: center; font-size: 1.7em;}
    h3 { font-size: 1.3em; }
    .highlight1 { background: none;}
    .btn-1 { padding: 10px 20px}
    .section { gap: 0;}
    .inner-section {padding: 10px;}
    .p-100{ padding: 30px}
    /* Footer */
    #site-footer .container { flex-direction: column;}
    .footer-left, .footer-right { width: 100%; padding: 20px}
    /* Homepage*/
    .green-container { padding: 30px;}
    .main-banner{ justify-content: center;}
    .txt-banner { padding: 10px;}
    #prospects .inner-section { padding: 40px;}
    .homepage-a-propos-container { padding: 30px;}
    /* Services */
    .illustration-banner { margin-top: 0}
    .service-title { text-align: start; padding: 20px 40px;}
    .service-container { align-items: start}
    /* A propos */
    .a-propos-text { width: 100%; padding: 30px }
    .a-propos-title { margin-left: 0;}
    .logo-stack { max-height: 80px; }
    .cta-container { align-items: start; text-align: start}
    #subtitle {text-align: start;}
    /* Contact */
    #contact { padding: 10px;}
    /* Eco-conception */
    #eco-text, .eco-list { padding: 30px}
    /* Portfolio */
    .portfolio-archive-item, .portfolio-proposition-item { width: 80%;}
    #visuel-portfolio img { width: 200%}
}