* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

:root {
  --fontNunito: "Nunito", sans-serif;
  --fontMontserrat: "Montserrat", sans-serif;
  --white-color: #fff;
  --black-color: #000;
  --footer-bgColor: #212121;
  --section-bgColor:#F8F9FA;
  --mainText-color: #6c757d;
  --mainTitle-color: #212529;
  --subtitle-color: #e65f78;
  --button-color: #d8576f;
  --footer-color: #ababab;
  --formBorder-color: #e0e0e0;
  --placeholder-color: #b1b4b8;
}

body {
  font-family: var(--fontMontserrat), var(--fontNunito);
}

::selection{
background: rgba(166, 175, 189, 0.3);
}

.typed-cursor,
.typed-cursor--blink {
  display: none;
  opacity: 0;
}

.lookUp-button{
  position: fixed;
  bottom: 2%;
  right: 2%;
  z-index: 3;
  transform: translate(-5%,-5%);
  border: 1px solid var(--subtitle-color);
  background-color: var(--subtitle-color);
  border-radius:.25rem;
}

.settings-button{
  position: fixed;
  top: 25%;
  left: 0;
  z-index: 11;
  border: 1px solid var(--mainTitle-color);
  border-radius:0 0.25rem 0.25rem 0 ;
}

nav{
  background-color: var(--white-color); 
  box-shadow: 0 1px 8px 3px rgba(0 ,0 ,0 ,0.2);;
}

.navbar-brand{
  font-size: 1.25rem;
  font-weight: 800;
  font-family: var(--fontNunito);
}

.navbar-light .navbar-nav .nav-link{
  color:var(--black-color);
  font-size: .9375rem;
}

.navbar-light .navbar-nav .nav-link.active ,.navbar-light .navbar-nav .nav-link:hover {
  color:var(--subtitle-color);
} 

.home-container {
  background-image: linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.788000700280112) 0%,
      rgba(0, 0, 0, 0.7707457983193278) 1%
    ),
    url("../images/header-bg.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  height: 100vh;
  /* margin-top: 55px; */
  font-family: var(--fontNunito);
  z-index: 5;
}

.home-hello {
  font-family: var(--fontMontserrat);
  font-size: clamp(10px, calc(10px + 1.5vw), 24px);
  line-height: 1.8125rem;
  color: var(--white-color);
}

.home-title {
  font-weight: 700;
  font-family: var(--fontMontserrat);
  font-size: clamp(22px, calc(22px + 3vw), 54px);
  line-height: 4.0625rem;
  color: var(--white-color);
  border-right: 4px solid var(--white-color);
}

.home-caption .home-desc {
  max-width: 500px;
  line-height: 1.8;
  font-family: var(--fontNunito);
  font-weight: 500;
}

a.home-button {
  cursor: pointer;
  color: var(--white-color);
  background-color: transparent;
  font-weight: 600;
  border: 2px solid var(--white-color);
  padding: 12.8px 41.6px;
  margin: 8px 0;
  font-size: 1rem;
  text-decoration: none;
  border-radius: 800px;
  transition: all 1s ease;
}

.home-button:hover {
  background-color: var(--white-color);
  color: var(--black-color);
}

a.home-button:hover {
  color: var(--black-color);
}

.up-down{
    width: 30px;
    height: 50px;
    position: absolute;
    bottom: 0;
    left: 50%;
    border: 0.125rem solid white;
    border-radius: 40px;
    margin-bottom: 10px;
    animation: up-down 1s ease infinite alternate;
    transform: translate(-50%);
    -webkit-transform: translate(-50%);
    -moz-transform: translate(-50%);
    -ms-transform: translate(-50%);
    -o-transform: translate(-50%);
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    -ms-border-radius: 40px;
    -o-border-radius: 40px;
    -webkit-animation: up-down 1s ease infinite alternate;
}

.up-down::before{
    content: '';
    position: absolute;
    width: 4px;
    height: 10px;
    border-radius: 40px;
    background-color: white;
    bottom: 10px;
    left: 50%;
    transform: translate(-50%);
    -webkit-transform: translate(-50%);
    -moz-transform: translate(-50%);
    -ms-transform: translate(-50%);
    -o-transform: translate(-50%);
}

@keyframes up-down {
    0% {
        transform: translateY(0);
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
}

    100%{
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
}
}

#about{
  padding-block: 6.25rem;
}
.about-container .subtitle-title{
font-size: calc(13px + 2.3vw);
}

.about-container .about-subtitle{
font-size: calc(10px + 1.6vw);
}

.about-subtitle span{
  color: var(--subtitle-color);
}

.about-container .about-icon{
  cursor: pointer;
  display: inline-block;
  text-align: center;
}

.aboutIcons-container .about-icon{
  width: 40px;
  height: 40px;
  transition: all 500ms ease;
  border:2px solid var(--formBorder-color);
}

.about-icon:hover i{
  color: var(--subtitle-color);
} 

.about-icon:hover {
  border: 2px solid var(--subtitle-color); ;
}

#services, #blog, #client{
  padding-top:6.25rem ;
  background-color: var(--section-bgColor);
}

.subtitle-title{
  color:var(--mainTitle-color);
  font-family: var(--fontMontserrat);
  font-size: calc(14px + 2vw);
}

.subtitle-title span{
  font-weight: 600;
}

.subtitle-desc{
  font-size: 1rem;
  max-width: 31.25rem;
  color: var(--mainText-color);
  font-weight: 400;
  font-family: var(--fontNunito);
}

.services-container .card-title{
font-size: 1.25rem;
font-family: var(--fontMontserrat);
font-weight: 600;
color:var(--mainTitle-color);
}

.services-line{
  width: 40px;
  height: 3px;
  background-color: var(--subtitle-color);
  margin: 0 auto;
  transition: width 400ms linear;
}

.services-container .card i {
color: var(--subtitle-color);
}

.services-container .card:hover .services-line{
  width:60px;
}

.services-container .card .card-text{
color:var(--mainText-color);
font-size: 1rem;
font-family: var(--fontNunito);
}

.hireMe-container{
  background-color: var(--white-color);
  padding-block: 4.5rem;
}

.hireMe-container h2{
  font-family: var(--fontMontserrat);
  font-weight: 600;
  font-size: calc(14px + 1.5vw);
}

.services-button , .form-button{
  cursor: pointer;
  border: 2px solid var(--button-color);
  background-color: var(--button-color);
  padding: 12.8px 41.6px;
  font-size: 16px;
  border-radius: .25rem;
  transition: 1s ease;
}

.services-button:hover ,.form-button:hover{
  background-color: #a8364b;
  border-color:#a8364b ;
}

.services-button a , .form-button a{
  text-decoration: none; 
  color:var(--white-color);
  font-weight: 500;
  font-size: .875rem;
  font-family: var(--fontNunito);
}

#portfolio{
  padding-block: 6.25rem;
}

.portfolio-container .nav-link{
  all:unset;
  cursor: pointer;
  padding:6px 16px;
  background-color: transparent;
  font-family: var(--fontNunito);
  font-size: .875rem;
  font-weight: 700;
  border: unset;
  color:var(--black-color);
}

.portfolio-container .nav-link.active{
  color:var(--white-color);
  background-color: var(--subtitle-color);
  border-radius: 50rem;
}

.portfolio-container .card.card-img{
  cursor: pointer;
  border: unset;
  overflow: hidden;
}

.portfolio-container .card.card-img img{
  transition: filter 500ms linear ;
}

.portfolio-container .card.card-img:hover img{
  filter: brightness(.3);
  transition-delay:0.15s;
}

.portfolio-container .layer .text{
  position:absolute;
  top:150%;
  left: calc(50%);
  transform: translateX(-50%);
  color: var(--white-color);
  transition: all 800ms linear ;
}

.portfolio-container .card-img:hover .layer .text{
  top:35%;
  transform: translateY(-50%);
  transform: translateX(-50%);
}

.carousel-indicators [data-bs-target]{
  all:unset;
  border-radius: 20px;
  width:12px;
  height: 6px;
  margin:5px 4px;
  background-color: rgba(216, 87, 111,0.5);
  cursor: pointer;
  transition: width 500ms linear;
  }
  
  .carousel-indicators .active{
    background-color: #d8576f;
    border-radius: 20px;
    width:22px;
  }

  .carousel-indicators {
    position: absolute;
    right: 0;
    bottom: 75px;
    left: 0;
  }

  .slide-item {
    height: 550px;
  }
  
  .slide-img {
    height: 100%;
    object-fit: cover;
    opacity: 0;
  }

  .review-card > i{
    color:var(--subtitle-color);
  }

  .review-card {
    font-family: var(--fontNunito);
    border: unset;
  }

  .testimonial-container .carousel-item .review-card > i,
  .testimonial-container .carousel-item img,
  .testimonial-container .carousel-item blockquote,
  .testimonial-container .carousel-item figcaption{
    transform: scale(0);
    transition: 0.80s;
  }

  .testimonial-container .carousel-item blockquote{
    transition-delay:0.30s;
  }

  .testimonial-container .carousel-item .review-card > i,.testimonial-container .carousel-item figcaption{
    transition-delay:0.50s;
  }

  .testimonial-container .carousel-item.active .review-card > i,
  .testimonial-container .carousel-item.active img,
  .testimonial-container .carousel-item.active blockquote,
  .testimonial-container .carousel-item.active figcaption{
    transform: scale(1);
  }


#blog{
  padding-bottom: 6.25rem;
}

.blog-container .card a.card-title {
font-size: 1.25rem;
font-family: var(--fontMontserrat);
font-weight: 600;
text-decoration: none;
}

.blog-container .card .post-date{
  font-family: var(--fontNunito);
  font-size: 1rem;
}

.blog-container .card .post-date span{
  color:var(--subtitle-color);
  font-weight: 800;
}

.blog-container .card  .card-text{
  font-size: 1rem;
}

.blog-container .card a.read-more{
font-size: 1rem;
}


#contact{
  padding-block:6.25rem ;
}

.contact-container .card i{
  color:var(--subtitle-color);
}

.contact-container .card .card-title{
  font-size: 1.125rem;
  font-family: var(--fontMontserrat);
  font-weight: 600;
} 

.contact-container .card .card-text{
  font-size: 1rem;
  font-family: var(--fontNunito);
  font-weight: 300;
}

.form-input{
  border: 2px solid var(--formBorder-color);
}

.form-input:focus {
  outline: none;
  border: 2px solid var(--button-color);
  box-shadow: unset;
}

::placeholder {
  color: var(--placeholder-color);
  font-weight: 500;
  font-family: var(--fontNunito);
}

a.form-button{
  position: absolute;
  right: 0%;
  padding: 12.8px;
}

#footer {
  padding-block: 3.75rem;
  background-color: var(--footer-bgColor);
  font-family: var(--fontNunito);
  color: var(--footer-color);
  font-size: 1rem;
}

.social-container a {
  background-color: rgba(241, 241, 241, 0.08);
  text-decoration: none;
}

.social-icon {
  display: inline-block;
  text-align: center;
}

.social-icon i {
  width: 15px;
  height: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
  transition: color 500ms ease;
}

.social-icon:hover i {
  color: var(--subtitle-color);
}