/* ===============================
   GOOGLE FONTS
================================= */
@import url("https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;500;700&family=Montserrat:wght@300;400;500;600;700&display=swap");

/* ===============================
   VARIABLES
================================= */
:root{
  --header-height: 4rem;

  --first-color: hsl(184, 78%, 61%);
  --first-color-alt: hsl(184, 78%, 56%);
  --beige-color: hsl(40, 45%, 86%);
  --beige-color-alt: hsl(40, 35%, 72%);
  --brown-color: hsl(18, 15%, 24%);
  --title-color: hsl(0, 0%, 8%);
  --text-color: hsl(0, 0%, 25%);
  --white-color: #fff;

  --body-font: "Montserrat", sans-serif;
  --second-font: "Chakra Petch", sans-serif;

  --z-fixed: 100;
}

/* ===============================
   BASE
================================= */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  min-width:0;
}

html{
  scroll-behavior:smooth;
}

body{
  font-family:var(--body-font);
  color:var(--title-color);
  background:#fff;
  overflow-x:hidden;
}

img{
  max-width:100%;
  display:block;
}

a{
  text-decoration:none;
  color:inherit;
}

ul{
  list-style:none;
}

/* ===============================
   UTILITIES
================================= */
.container{
  width:100%;
  max-width:1120px;
  margin-inline:auto;
  padding-inline:1rem;
}

.grid{
  display:grid;
  gap:2rem;
}

.section{
  padding:5rem 0;
}

.section__title,
.section__title1,
.section__title2{
  font-family:var(--second-font);
  font-size:clamp(2rem, 4vw, 3rem);
  text-align:center;
  margin-bottom:1rem;
}

.button,
.nav__button{
  display:inline-block;
  background:var(--first-color);
  color:#000;
  padding:.9rem 1.4rem;
  border-radius:.6rem;
  font-weight:600;
}

/* ===============================
   HEADER / NAV
================================= */
.header{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:var(--z-fixed);
  background:rgba(0,0,0,.4);
  backdrop-filter:blur(8px);
}

.nav{
  height:var(--header-height);
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.nav__logo{
  color:#fff;
  font-family:var(--second-font);
  font-weight:700;
}

.nav__list{
  display:flex;
  gap:1.5rem;
}

.nav__link{
  color:#fff;
}

.nav__toggle,
.nav__close{
  display:none;
  background:none;
  border:none;
  color:#fff;
  font-size:1.4rem;
  cursor:pointer;
}

/* ===============================
   HOME
================================= */
.home{
  min-height:100vh;
  position:relative;
  display:flex;
  align-items:center;
}

.home__bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

.home__shadow{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.45);
}

.home__container{
  position:relative;
  z-index:2;
}

.home__data{
  color:#fff;
  text-align:center;
  max-width:700px;
  margin:auto;
}

.home__title{
  font-size:clamp(2.2rem, 5vw, 4rem);
  font-family:var(--second-font);
}

.home__description{
  margin:1rem 0 2rem;
  line-height:1.7;
}

/* ===============================
   ABOUT
================================= */
.about{
  background:var(--brown-color);
  color:#fff;
}

.about__container{
  grid-template-columns:repeat(2,1fr);
  align-items:center;
}

.about__description{
  line-height:1.8;
}

.about__img{
  width:100%;
  max-width:450px;
  margin:auto;
}

/* ===============================
   WORK / GALLERY
================================= */
.work__container{
  grid-template-columns:repeat(2,1fr);
  align-items:center;
}


.work__swiper {
  width: 100%;
  overflow: hidden;
}

.work__card {
  width: 100%;
}

.work__img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  border-radius: 1rem;
}
.swiper-button-next,
.swiper-button-prev {
  color: #fff !important;
  z-index: 9999;
  width: 45px;
  height: 45px;
}

.swiper-button-next::after,
.swiper-button-prev::after {
  font-size: 28px;
  font-weight: bold;
}
.work__swiper,
.service__swiper {
  position: relative;
}

.swiper-button-next,
.swiper-button-prev {
  top: 50%;
  transform: translateY(-50%);
}



.swiper-button-next,
.swiper-button-prev {
  color: #fff !important;
  width: 45px;
  height: 45px;
  background: rgba(0,0,0,0.4);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.swiper-button-next::after,
.swiper-button-prev::after {
  font-size: 20px;
  font-weight: bold;
  color: white;
}

.work__swiper,
.service__swiper {
  position: relative;
}
/* ===============================
   SERVICES
================================= */
.service{
  background:#fff;
}

.service__container{
  display:flex;
  flex-direction:column;
  gap:3rem;
}

.service__data{
  text-align:center;
}

.service__img{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:1.5rem;
  margin-top:2rem;
}

.service__plan{
  width:140px;
  text-align:center;
}

.service__icon-img{
  width:80px;
  height:80px;
  object-fit:cover;
  margin:0 auto .5rem;
}

.service__swiper{
  width:100%;
  overflow:hidden;
}

.service__testimonial{
  background:var(--beige-color);
  padding:2rem;
  border-radius:1rem;
}

.service__testimonial-description{
  line-height:1.8;
  white-space:normal;
  word-break:break-word;
}

/* ===============================
   PRICING
================================= */
.pricing{
  background:var(--beige-color);
}

.tab-filter{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:1rem;
  margin-bottom:2rem;
}

.filter-btn{
  border:none;
  background:#fff;
  padding:1rem;
  border-radius:1rem;
  cursor:pointer;
}

.filter-btn.active{
  background:var(--first-color);
}

.grid-list{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1.5rem;
}

.pricing-card{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  background:#fff;
  padding:1rem;
  border-radius:1rem;
  align-items:center;
}

.card-left{
  display:flex;
  gap:1rem;
  align-items:center;
}

.card-img{
  width:60px;
  height:60px;
  border-radius:50%;
  object-fit:cover;
}

.card-price{
  font-weight:700;
  white-space:nowrap;
}

/* ===============================
   TEAM
================================= */
.expert__content{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2rem;
}

.expert__card{
  background:var(--beige-color);
  border-radius:1rem;
  overflow:hidden;
}

.expert__img{
  width:100%;
  height:280px;
  object-fit:cover;
}

.expert__data{
  padding:1rem;
  text-align:center;
}

/* ===============================
   CONTACT
================================= */
.contact{
  background:var(--beige-color);
}

.contact__container{
  display:flex;
  flex-direction:column;
  gap:2rem;
}

.contact__data{
  text-align:center;
}

.contact__content{
  display:flex;
  flex-direction:column;
  gap:1rem;
}

.contact__card{
  display:flex;
  gap:1rem;
  align-items:flex-start;
  padding:1rem;
  background:#fff;
  border-radius:1rem;
}

.contact__icon{
  font-size:1.4rem;
  color:var(--first-color);
}

.contact__address{
  line-height:1.7;
}

/* ===============================
   FOOTER
================================= */
.footer{
  background:var(--brown-color);
  color:#fff;
  padding:4rem 0 2rem;
}

.footer__container{
  display:flex;
  flex-direction:column;
  gap:2rem;
}

.footer__content{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2rem;
}

.footer__title{
  margin-bottom:1rem;
  font-family:var(--second-font);
}

.footer__links{
  display:flex;
  flex-direction:column;
  gap:.6rem;
}

.contact__map iframe{
  width:100%;
  height:220px;
  border:0;
  border-radius:1rem;
}

.footer__copy{
  display:block;
  text-align:center;
  margin-top:2rem;
  color:var(--first-color);
}

/* ===============================
   MOBILE
================================= */
@media screen and (max-width:768px){

  .nav__toggle{
    display:block;
  }

  .nav__menu{
    position:fixed;
    top:0;
    right:-100%;
    width:80%;
    height:100%;
    background:var(--brown-color);
    padding:5rem 2rem;
    transition:.4s;
  }

  .nav__menu.show-menu{
    right:0;
  }

  .nav__list{
    flex-direction:column;
  }

  .nav__close{
    display:block;
    position:absolute;
    top:1rem;
    right:1rem;
  }

  .about__container,
  .work__container{
    grid-template-columns:1fr;
  }

  .grid-list{
    grid-template-columns:1fr;
  }

  .expert__content{
    grid-template-columns:1fr;
  }

  .footer__content{
    grid-template-columns:1fr;
  }

  .pricing-card{
    flex-direction:column;
    align-items:flex-start;
  }

  .card-left{
    width:100%;
  }

  .card-price{
    margin-top:.5rem;
  }

  .service__plan{
    width:110px;
  }
}