/* ================================================================== 
STRUCTURE & RESPONSIBILITIES
==================================================================== */
/*- animation
{- hero section 
- templates section
- features section
- about section
}
*/

/* ==================================================================== */

/* animation start */
.loadingCss {
  transform: translateY(70px);
  opacity: 0;
  transition: transform 0.6s ease, opacity 0.6s ease;
}

/* animation end */




/* hero section start */

.hero-section {
  background-color: white;
  padding: 0 2rem;
  height: auto;
  height: 53rem;
  border-bottom: 1px solid #CECECE;
  padding-bottom: 8rem;
  position: relative;
}

.hero-section-flex {
  border-radius: 1rem;
  height: 100%;
  max-width: 100%;
}

.hero-slide {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 3rem;
  width: 100%;
  background-color: #ffffff;
  border-radius: 1rem;
  max-width: 1200px;
  position: relative;
}

.hero-content {
  height: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: 2rem;
}


.hero-deals {
  font-size: 1.7rem;
  color: #9594B5;
  color: rgb(0, 0, 0);
  white-space: nowrap;
}

.hero-title {
  font-size: 3.8rem;
  font-weight: 500;
  color: rgb(0, 0, 0);
  display: flex;
  flex-direction: column;
  gap: 2rem;
  white-space: nowrap;
}

.hero-title span {
  font-family: "Platypi", serif;
}


.hero-buttons {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-top: 1.5rem;
  margin-top: 3rem;
}

.hero-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 12.5rem;
  height: 4.5rem;
  background-color: rgb(0, 0, 0);
  color: rgb(255, 255, 255);
  border-radius: 0.5rem;
  font-size: 1.4rem;
  transition: all 0.3s ease;
}

@media(pointer: fine) {
  .hero-button:hover {
    opacity: 0.8;
  }
}

@media(pointer: coarse) {
  .hero-button:active {
    opacity: 0.8;
  }
}

.hero-button span {
  display: flex;
  align-items: center;
  justify-content: center;
}

.hire-button {
  background-color: transparent;
  border: 1px solid #9A7878;
}

.hire-button {
  color: black;
  transition: all 0.3s ease;
}

@media(pointer: fine) {
  .hire-button:hover {
    background-color: #fbfcff;
    border: 1px solid #acadb3;
    color: rgb(0, 0, 0);
  }
}

@media(pointer: coarse) {
  .hire-button:active {
    background-color: #000000;
    color: white;
  }
}

.hero-img {
  width: fit-content;
  height: fit-content;
}

.hero-img img {
  width: 420px;
  height: auto;
}

.hero-skill-icons {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}

.hero-skill-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
  width: 6.1rem;
  height: 6.1rem;
  border-radius: 50%;
}

@media(max-width: 1200px) {
  .hero-slide {
    padding-left: 3rem;
    padding-right: 1rem;
  }
}

@media(max-width: 1110px) {
  .hero-img img {
    width: clamp(300px, calc(650 / 1200 * 100vw), 420px);
  }
}

@media(max-width: 1000px) {
  .hero-section {
    height: clamp(40rem, calc(530 / 1000 * 100vw + 5rem), 53rem);
  }
}

@media(max-width: 950px) {
  .hero-section {
    height: fit-content;
    padding-top: 3rem;
  }

  .hero-slide {
    flex-direction: column;
    gap: 7rem;
    text-align: center;
    padding: 0;
  }

  .hero-content {
    gap: 1.5rem;
  }

  .hero-buttons {
    justify-content: center;
  }
}

@media(max-width: 530px) {
  .hero-content {
    left: 0rem;
  }

  .hero-title {
    font-size: 3rem;
  }

  .hero-img {
    right: 0rem;
  }
}

/* hero section end */





/* templates section start */
.templates {
  margin-top: 10rem;
}

.templates-flex {
  gap: 3rem;
}

.templates-title {
  font-size: 2.3rem;
  font-weight: 500;
}

.templates-items {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.5rem;
  width: 100%;
}

.templates-item-col {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  row-gap: 3.5rem;
}

.templates-item-col2 {
  transform: translateY(70px);
}


.templates-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  transition: transform 0.3s ease;
}

@media(pointer: fine) {
  .templates-item:hover {
    transform: translateY(-10px);
  }
}

.templates-img {
  box-shadow: 0 0 7px rgba(128, 39, 245, 0.1);
  border-radius: 1.2rem;
}

.templates-img img {
  width: 100%;
  height: auto;
}

.templates-item-name {
  font-size: 1.7rem;
  font-weight: 500;
  color: black;
}


@media(max-width: 1000px) {
  .templates-items {
    flex-direction: column;
  }

  .templates-item-col {
    transform: translateY(0);
  }
}

/* templates section end */













/* features section start */
.features {
  margin-top: 10rem;
}

.features-flex {
  gap: 2.5rem;
}

.features-title {
  font-size: 2.3rem;
  font-weight: 500;
}

.features-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(0, 0, 0, .2);
  border-left: 1px solid rgba(0, 0, 0, .2);
}

.features-item {
  min-height: 20rem;
  max-width: 3orem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  background-color: white;
  border-right: 1px solid rgba(0, 0, 0, .2);
  border-bottom: 1px solid rgba(0, 0, 0, .2);
  -webkit-tap-highlight-color: transparent;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  transition: all 0.5s ease;
}

@media(pointer: fine) {
  .features-item:hover {
    background-color: rgba(69, 68, 68, 0.1);
    opacity: 0.8;
  }
}

@media(pointer: coarse) {
  .features-item:active {
    background-color: rgba(69, 68, 68, 0.1);
    opacity: 0.8;
  }
}

.features-item:nth-child(1) {
  grid-row: span 2;
}

.features-item span {
  display: flex;
  align-items: center;
  justify-content: center;
  color: black;
  font-size: 1.5rem;
  font-weight: 500;
}


.features-item:nth-child(6) {
  grid-column: span 2;
}

@media(max-width: 1050px) {
  .features-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .features-item:nth-child(4) {
    grid-column: span 2;
  }

  .features-item:nth-child(5) {
    grid-column: span 2;
  }

  .features-item:nth-child(6) {
    grid-column: span 1;
  }
}


@media(max-width: 800px) {
  .features-item:nth-child(5) {
    grid-column: span 1;
  }

  .features-item:nth-child(6) {
    grid-column: span 2;
  }
}


@media(max-width: 700px) {
  .features {
    margin-top: 5rem;
  }
}

@media(max-width: 670px) {
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .features-item:nth-child(2) {
    grid-column: span 1;
  }

  .features-item:nth-child(3) {
    grid-column: span 1;
  }

  .features-item:nth-child(4) {
    grid-column: span 2;
  }

  .features-item:nth-child(5) {
    grid-row: span 1;
    grid-column: 1;
  }

  .features-item:nth-child(6) {
    grid-column: span 1;
    grid-row: span 2;
  }
}

@media(max-width: 550px) {
  .features-grid {
    grid-template-columns: repeat(1, 1fr);
  }

  .features-item:nth-child(1) {
    grid-row: span 1;
  }

  .features-item:nth-child(4) {
    grid-column: span 1;
  }
}

/* features section end */


/* about section start */
.about {
  margin-top: 10rem;
}

.about-flex {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 5rem;
}

.about-image {
  width: 550px;
  height: 650px;
  background-color: #ECF8FF;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.about-image img {
  width: 100%;
  height: auto;
}

.about-content {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}

.about-title {
  font-size: 2.1rem;
  font-weight: 500;
  width: fit-content;
  position: relative;
}

.about-underline {
  position: absolute;
  bottom: -0.4rem;
  width: 50%;
  height: 1px;
  background-color: black;
}

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

.about-data-row {
  font-size: 1.6rem;
  color: #535353;
  line-height: 3.8rem;
}

@media(max-width: 900px) {
  .about-flex {
    flex-direction: column;
    align-items: center;
    gap: 3rem;
  }

  .about-image {
    max-width: 500px;
    width: 100%;
  }

  .about-content {
    max-width: 500px;
  }
}

@media(max-width: 700px) {
  .about {
    margin-top: 5rem;
  }
}

/* about section end */










/* contact page start */
.contact-section {
  margin-top: 10rem;
}



/* contact form */
.contact-form-container {
  display: flex;
  justify-content: space-between;
  gap: 6rem;
  width: 100%;
  background-color: #F2F4F7;
  padding: 6rem 4rem;
  border-radius: 1.5rem;
}

.contact-form,
.contact-form-iamge {
  flex: 1;
}


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

.contact-form-title {
  font-size: 2rem;
  font-weight: 500;
}

.contact-form-all-inputs-btns {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}

.input-groups {
  display: flex;
  justify-content: space-between;
  gap: 2rem;

}

.contact-input {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.contact-input label {
  font-size: 1.3rem;
}

.contact-input input,
.contact-input textarea {
  background-color: white;
  height: 4.5rem;
  width: 100%;
  padding: 2rem;
  font-size: 1.4rem;
  border-radius: 10rem;
}

.contact-input input:focus-within,
.contact-input textarea:focus-within {
  box-shadow: 0 0 2px rgb(8, 8, 193);
}

.contact-input textarea {
  border-radius: 0.6rem;
  resize: vertical;
  min-height: 9rem;
  max-height: 20rem;
}

.contact-form-btn {
  font-size: 1.4rem;
  height: 4.5rem;
  background-color: black;
  color: white;
  border-radius: 0.6rem;
  margin-top: 2rem;
  transition: all 0.3s ease;
}

.contact-form-iamge {
  background-color: rgb(255, 255, 255);
  display: flex;
  align-items: center;
  justify-content: center;
  border-top-right-radius: 3.5rem;
  border-bottom-left-radius: 3.5rem;
}

.contact-form-iamge img {
  width: 100%;
  height: auto;
  border-top-right-radius: 3.5rem;
  border-bottom-left-radius: 3.5rem;
}




@media(max-width: 1050px) {
  .contact-form-iamge {
    display: none;
  }
}

@media(max-width: 700px) {
  .contact-section {
    margin-top: 5rem;
  }
}

@media(max-width: 550px) {
  .contact-form-container {
    padding: 6rem 2rem;
  }
}

@media(max-width: 500px) {
  .contact-form-container {
    padding: 3rem 2rem;
  }
}

@media(max-width: 500px) {
  .input-groups {
    flex-direction: column;
    gap: 2rem;
  }
}