/********** PAGE 0 : GENERAL **********/
/* general rules & my own library */
:root {
  --mainColor:#1f4a40;
  --secondaryColor: #51a995;
  --white:#fff;
  --grey:#9e9e9e;
  --backgroundGrey:#f2f2f2;
  --paragraphGrey:#888;
  --border: 2px solid #1f4a40;
  --secondaryBorder: 2px solid #51a995;
  --borderWhite: 2px solid #fff;
  --boxShadow: 0 0 20px 0 rgba(34, 34, 34, 0.2);
  --transition:.25s cubic-bezier(0.4, 0, 0.2, 1);
}

* {margin: 0;padding: 0;font-family: "Alan Sans", sans-serif;scroll-behavior: smooth;box-sizing: border-box;}

::-webkit-scrollbar {width: 15px;}

::-webkit-scrollbar-track {background: var(--secondaryColor);}

::-webkit-scrollbar-thumb {background: #222;}

::-webkit-scrollbar-thumb:hover {background: #555;}

::selection {color: var(--white);background-color: var(--secondaryColor) ;}

form , input , textarea , button {caret-color: var(--secondaryColor);outline: none;}

:where(input , textarea)::placeholder {color: var(--grey);transition: var(--transition);}

:where(input , textarea):focus::placeholder {color: var(--secondaryColor);transform: translateX(10px);}

:is(input,textarea):hover {box-shadow: 0 0 20px rgba(81,169,149,.25);}

:is(input,textarea):focus {box-shadow: 0 0 20px rgba(81,169,149,.5);}

h1 {font-size: 3rem;}

h2 {font-size: 2rem;}

h3 {font-size: 1.2rem;padding: .5rem 0;}

ul , li , a {text-decoration: none;list-style: none;}

section{padding: 100px 0;text-align: center;}

section h2 + p {font-weight: 300;margin: 20px 0;color: var(--paragraphGrey);}

@media (max-width: 576px) {
  section h2 {margin: 20px 10px;} 
  
  section p {padding: 5px;} 
}

section h2 {font-weight: 600;color: var(--secondaryColor);}

.row {display: grid;grid-template-columns: repeat(4,auto);gap:20px;}

@media (max-width: 1024px) {.row {grid-template-columns: repeat(2,auto);}}

@media (max-width: 576px) {.row {grid-template-columns: auto;}}

.button{
  border-radius: 30px;
  border: var(--secondaryBorder);
  background-color: var(--secondaryColor);
  color: #090909;
  cursor: pointer;
}

.container {max-width: 80%;margin: 0 auto;}

@media (max-width:991px) {.container{max-width: 92%;}}
/* general rules & my own library */
/* scroll to top button */
.scroll-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 10px;
  width: 45px;
  height: 45px;
  border-radius: 10px;
  color: var(--mainColor);
  background-color: var(--white);
  border: var(--border);
  text-align: center;
  z-index: 10000;
  transition: var(--transition);
}

.scroll-to-top:hover {background-color: var(--mainColor);color: var(--white);border: var(--borderWhite)}
/* scroll to top button */
/********** PAGE 0 : GENERAL **********/
/********** PAGE 1 : MAIN PAGE **********/
/* Nav */
nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
  padding: 20px;
  z-index: 100;
  background-color: rgba(31, 74, 64, .8);
}

nav a img {width: 200px;}

nav ul {display: flex;justify-content: flex-end;align-items: center;text-transform: uppercase;}

nav ul li {padding: 10px;transition: var(--transition);}

nav ul li a {
  display: inline-block;
  color: var(--white);
  border: 2px solid transparent;
  padding-bottom: 5px;
  transition: var(--transition);
  font-size: 1.2rem;
}

nav ul li a:hover {transform: translateY(-10px);border-bottom: var(--borderWhite);}

nav ul li button {
  background-color: var(--white);
  color: var(--mainColor);
  border: var(--border);
  border-radius: 10px;
  width: 100px;
  height: 50px;
  transition: var(--transition);
  font-weight: bold;
  text-transform: uppercase;
  cursor: pointer;
}

nav ul li button:hover {
  color: var(--white);
  background-color: var(--mainColor);
  border: 2px solid var(--white);
  transform: scale(1.1);
}

nav .fa-bars {display: none;color: var(--white);}

@media (max-width:992px) {
  nav ul {   
    display: none;
    width: 225px;
    padding: 10px;
    background-color: var(--white);
    position: absolute;
    top: 75px;
    right: 15px;
    border-radius: 10px;
    z-index: 10;
    box-shadow: var(--boxShadow);
  }

  nav ul.active {display: block;}
  
  nav ul li a {color: var(--mainColor); }

  nav ul li:hover a {transform: translateY(-5px);border-bottom: var(--border);}   

  nav .fa-bars {display:block;font-size: 2rem;cursor: pointer;}
}
/*Nav */
/* Hero */
header {background-color: var(--mainColor);color: var(--white);}

header .container{
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  height: calc(100vh - 100px);
  margin-top: 100px;
  padding: 20px;
}

header :is(.hero-text , .hero-img) {width: 50%;color: var(--white);}

header .hero-text p {padding: 1rem 0;font-weight: 300;margin: 10px 0;}

header .hero-text .search {display: flex;justify-content: space-between;align-items: center;}

header .hero-text .search :is(input , a) {height: 2rem;border-radius: 10px;}

header .hero-text .search input {
  padding: 10px;
  margin-right: 10px;
  border: none;
  transition: var(--transition);
  width: 80%;
}

header .hero-text .search a {
  width: 20%;
  padding: 5px 0;
  text-align: center;
  background-color: var(--white);
  color: var(--secondaryColor);
}

header .hero-img img {width: 100%;}

@media (max-width:768px)  {
  header .container{flex-direction: column;}

  header :is(.hero-text , .hero-img) {width: 100%;text-align: center;}

  header .hero-text .search {flex-direction: column;}
  
  header .hero-text {margin-bottom: 30px;}

  header .hero-text .search input {margin: 0 0 10px 0;}

  header .hero-text .search :is(input , a) {width: 100%;}
}
/* Hero */
/* Features */
.features .row .item img {width: 25%;}

.features .row .item h3 {color: var(--secondaryColor);margin: 20px 0 5px;}

.features .row .item p {color:var(--paragraphGrey)}

@media (max-width:576px) {.features {margin-top: 200px;}}

@media (max-width:768px) {.features {margin-top: 400px;}}
/* Features */
/* Job listing */
.jobs .filter {
  box-shadow: var(--boxShadow);
  margin: 50px;
  text-transform: capitalize;
  cursor: pointer;
  font-weight: 300;
  transition: var(--transition);
  gap: 0;
}

.jobs .filter :is(li:hover , li.checked) {color: var(--white);}

.jobs ul li {padding: 20px 40px;transition: var(--transition);}

.jobs ul li:hover {background-color: rgba(81,169,149,.5);}

.jobs ul li.checked {background-color: var(--secondaryColor);}

.jobs-container li {
  width: calc(100% - 40px);
  border: 2px solid var(--grey);
  margin: 30px 20px;
  padding: 20px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  text-transform: capitalize;
  transition: var(--transition);
  position: relative;
  opacity: 1;
  transform: rotate(0) scale(1);
}

.jobs-container li:hover {background-color: #ecf1ee;}

.jobs-container :is(li.delete , details.delete) {opacity: 0;position: absolute;transform: rotate(3deg) scale(.95);}

.jobs-container li img {width: 50px;height: 50px;}

.jobs-container li h3 {width: 20%;font-size: 1.5rem;text-align: left;color: var(--secondaryColor);}

.jobs-container li p {color: var(--paragraphGrey);}

.jobs-container li p sub {color: var(--mainColor);}

.jobs-container li span {
  background-color: #edcfee;
  padding: 10px;
  text-align: center;
  border-radius: 30px;
  font-weight: 400;
}

@media (max-width: 768px) {
  .jobs-container li {flex-direction: column;justify-content: center;align-items: center;text-align: center;}

  .jobs-container li h3 {width: auto;margin: 20px 0;font-size: 1.25rem;}

  .jobs-container li p {margin: -20px 0 10px;}
}
/* Job listing */
/* Trust */
.trust .img-container {grid-template-columns: repeat(6, auto);justify-content: center;align-items: center;}

.trust .img-container img {width: 125px;padding: 20px;}

@media (max-width: 1200px) {.trust .img-container{grid-template-columns: repeat(3, auto);}}

@media (max-width: 576px) {.trust .img-container{grid-template-columns: repeat(2, auto);}}
/* Trust */
/* Team */
.team .team-container .member {
  border-radius: 10px;
  padding: 20px;
  margin: 20px;
  border: 2px solid var(--grey);
  transition: var(--transition);
}

.team .team-container .member:hover {box-shadow: var(--boxShadow);}

.team .team-container .member img {border-radius: 50%;border: var(--border);}

.team .team-container .member h3 {text-transform: capitalize;}

.team .team-container .member .skills {margin: 10px 0 30px;}

.team .team-container .member .skills span {padding: 10px;border-radius: 20px;background-color: #edcfee;font-weight: 400;}

.team .team-container .member button {padding: 15px 30px;text-transform: capitalize;transition: var(--transition);}

.team .team-container .member button:hover {box-shadow: var(--boxShadow);}
/* Team */
/* Footer */
footer {color: var(--white);background-color: var(--mainColor);padding: 50px 25px;}

footer .footer-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  margin: 25px 0;
}

footer .footer-top .footer-left img {width: 200px;margin-bottom: 20px;}

footer .footer-top .footer-left p {font-weight: 300;font-size: 1.5rem;}

footer .footer-top .footer-right i {margin: 10px;cursor: pointer;}

footer .footer-bottom .column p {font-weight: 300;margin-bottom: 10px;}

@media (max-width: 576px) {
  footer .footer-top {flex-direction: column;text-align: center;}

  footer .footer-bottom {grid-template-columns: repeat(2,auto);}
}
/* Footer */
/********** PAGE 1 : MAIN PAGE **********/
/********** PAGE 2 : JOB SEARCHING **********/
/* Search Interface */
.search-interface {margin: 25px 0;}

.search-interface form {position: relative;}

.search-interface form i {
  color: var(--secondaryColor);
  cursor: pointer;
  position: relative;
  right: -20px;
  z-index: 2;
  background-color: #ecf1ee;
  width: 30px;
  height: 30px;
  padding: 5px;
  border-radius: 50%;
  border: var(--secondaryBorder);
}

.search-interface form input {
  border: var(--secondaryBorder);
  background-color: #ecf1ee;
  padding: 15px;
  border-radius: 5px;
  width: 50%;
  transition: var(--transition);
  text-indent: 5px;
}

.search-interface details {text-align: left;margin-left: 25px;}

.search-interface details summary {color: var(--secondaryColor);font-size: 1.5rem;cursor: pointer;}

.search-interface details .details .detail {margin: 20px 0;}

.search-interface details .details .detail img {width: 100px;height: 100px;}

.search-interface p {color: var(--paragraphGrey);}

.search-interface p sub {color: var(--secondaryColor);}

.search-interface details h4 {color: var(--secondaryColor);font-size: 1.25rem;margin-bottom: 10px;}

.search-interface details .job-description p {padding: 10px;}

.search-interface details .job-description p span {margin-left: -10px;}

.search-interface details button {padding: 10px;margin: 10px 0;}

@media (max-width:576px) {.search-interface details .details {text-align: center;}}
/* Search Interface */
/********** PAGE 2 : JOB SEARCHING **********/
/********** PAGE 3 : CONTACT **********/
/* Contact */
.contact {
  padding-top: 150px;
  display: flex;
  justify-content: space-around;
  flex-direction: row;
  align-items: center;
  text-align: left;
}

.contact :is(h2 , p) {text-align: center;}

.contact .contact-text img{width: 500px;height: 100%;}

.contact form .labelled-input label {font-size: 20px;color: var(--secondaryColor);cursor: pointer;}

.contact form .labelled-input .space {margin-bottom: 10px;}

.contact form .labelled-input :is(input , textarea) {
  width: 100%;
  padding: 10px;
  border-radius: 5px;
  transition: var(--transition);
  border: var(--secondaryBorder);
}

.contact form button {width: 100%;margin: 20px 0;padding: 10px;}


@media (max-width:768px) {
  .contact {flex-direction: column;}

  .contact .contact-text img {width:320px;height: 320px;}
}

@media (max-width:576px) {.contact .contact-text img {width: 250px;height: 250px;position: relative;left: 40px;} }
/* Contact */
/* Location */
.location iframe {border: var(--secondaryBorder);}
/* Location */
/********** PAGE 3 : CONTACT **********/