/* google fonts
----------++---------- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap');


/* css variables to reuse same color 
----------++---------- */
:root {
  --clr-primary: #2c541d;
  --clr-secondary: #74a84a;

  --clr-white: #fefefe;
  --clr-black: #000000;
}

::selection {
  background-color: #74a84a;
  color: #000000;
}

/* base style 
----------++---------- */
body {
  font-family: 'Poppins', sans-serif;

  position: relative;
  overflow-x: hidden;
}

i {
  vertical-align: middle;
}

/* reused styles 
----------++---------- */
.container {
width: 1180px;
max-width: 95%;
margin: 0 auto;
padding: 0 10px;
}

.btn-fill {
  background-color: var(--clr-secondary);
  color: var(--clr-white);
  padding: 10px 48px;
  /* border-radius: 35px; */
  text-transform: uppercase;
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 1px;
  transition: 0.3s background-color;
}

.btn-fill:is(:focus, :hover) {
  background-color: var(--clr-primary);
}

/* header section style 
----------++----------  */
header {
  width: 100%;
  padding: 32px 0;

  position: fixed;
  top: 0px;
  right: 0px;
  left: 0px;
  z-index: 4;

  transition-duration: .3s;
  transition-property: padding background-color box-shadow;
}

header.sticky {
  padding: 24px 0;
  background-color: #dbdbdb2b;

  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

header .container {
  display: flex;
  gap: 32px;
  align-items: center;
  justify-content: space-between;
}

header .logo img {
  width: 100px;
}

header .right, header nav {
  display: flex;
  gap: 32px;
}

header nav a {
  color: var(--clr-black);

}

header nav a:is(:focus, :hover) {
  color: var(--clr-secondary);

}

header .hamb,
.nav-mobile {
display: none;
}

/* adding internal media queries so that it will be easier to understand for you :) */

@media screen and (max-width: 650px) {
  header .hamb,
    .nav-mobile {
      display: block;
    }

  header .hamb #icon {
      font-size: 2rem;
      cursor: pointer;
    }

    header .nav-desktop {
      display: none;
    }

  .nav-mobile{
      display: grid;
      gap: 32px;

      background-color: var(--clr-secondary);
      padding: 100px 50px;
      width: 80%;

      position: fixed;
      right: -100%;
      top: 100px;
      z-index: 5;

      transition: 0.3s right;

    }
  
  .nav-mobile.active {
    right: 0px;
  }

  .nav-mobile a {
      font-size: 1.2rem;
      font-weight: 500;
      letter-spacing: 1px;
      color: var(--clr-white);
      
      transition: .3s color;
    }

  .nav-mobile a:is(:focus, :hover) {
      color: var(--clr-black);
    }
}

/* hero section style 
----------++---------- */
.hero {
  width: 100%;
  height: 100vh;
  padding-top: 260px;

  background-color: var(--clr-secondary);
  background-image: url(../img/Banner.jpg);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;

  background-attachment: fixed;
}

.hero .container{
  text-align: center;
}

.hero .title {
  font-size: 5rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--clr-primary);
}

.hero .subtitle {
  font-size: 2.5rem;
  font-weight: 400;
  text-transform: uppercase;
  margin: 16px 0 32px;
}


/* services section style 
----------++---------- */
.services {
  padding: 100px 0;
}

.services .container {
  display: grid;
  gap: 32px;
  justify-items: center;
  grid-template-columns: repeat(3, 1fr);
}

@media screen and (max-width: 750px) {
  .services .container {
    grid-template-columns: 1fr;
  }
}

.services .card {
  max-width: 350px;
}

.services img {
  transition: .3s transform;
}

.services img:hover {
  transform: scale(0.9);
}

/* about us section style 
----------++---------- */
.about .container {
  display: flex;
  gap: 32px;
  align-items: center;
  justify-content: space-between;
}

@media screen and (max-width: 850px) {
  .about .container {
      flex-wrap: wrap;
      justify-content: center;
    }
}

.about {
  padding: 100px 0;
  background-color: #f8f8f8;
}

.about .content {
  width: 480px;
  max-width: 100%;
}

.about img {
  width: 580px;
}

.about h3 {
  font-size: 2rem;
  font-weight: 500;
  text-transform: uppercase;
  margin-bottom: 12px;
}

/* contact us section style 
----------++---------- */
.contact {
  padding: 150px 0 200px;

  background-color: var(--clr-secondary);
  background-image: url(../img/Call-to-action.jpg);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
}

.contact .container {
  max-width: 530px;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

.contact h3 {
  font-size: 3rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 1px;
  word-spacing: 3px;
  color: var(--clr-primary);
}

.contact p {
  margin: 12px 0 32px;

}

/* footer style 
----------++---------- */
footer {
  padding: 40px 0;

}

footer .container {
  display: flex;
  gap: 32px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;

}

footer img {
  width: 100px;
}

footer .end {
  display: flex;
  gap: 32px;
  align-items: center;
}

footer .end .to-top{
  font-size: 2rem;
  color: var(--clr-primary);

  transition-duration: .3s;
  transition-property: color transform;
}

footer .end .to-top:is(:focus, :hover) {
  color: var(--clr-secondary);
  transform: translateY(-5px);
}