/*==========================================================
                INDIAN FIBRE SHEETS
                ABOUT.CSS
==========================================================*/

/*==========================================================
                    ABOUT SECTION
==========================================================*/

.about {
  background: #ffffff;
}

/*==========================================================
                    ABOUT GRID
==========================================================*/

.about-grid {
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 70px;

  align-items: center;
}

/*==========================================================
                    ABOUT IMAGE
==========================================================*/

.about-image {
  position: relative;
}

.about-image img {
  width: 100%;

  border-radius: 25px;

  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}

/* Decorative Shape */

.about-image::after {
  content: "";

  position: absolute;

  width: 150px;

  height: 150px;

  background: #f58220;

  opacity: 0.15;

  border-radius: 50%;

  bottom: -40px;

  right: -40px;

  z-index: -1;
}

/*==========================================================
                    ABOUT CONTENT
==========================================================*/

.about-content h3 {
  font-size: 40px;

  color: #0b3d91;

  margin-bottom: 20px;

  font-weight: 700;
}

.about-content p {
  color: #555;

  line-height: 1.8;

  margin-bottom: 35px;
}

/*==========================================================
                    ABOUT FEATURES
==========================================================*/

.about-features {
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 18px;
}

.about-features div {
  padding: 18px;

  background: #f5f5f5;

  border-radius: 12px;

  font-weight: 600;

  color: #333;

  transition: 0.35s ease;
}

.about-features div:hover {
  background: #0b3d91;

  color: #ffffff;

  transform: translateY(-6px);
}

.about-features i {
  color: #f58220;

  margin-right: 10px;
}

.about-features div:hover i {
  color: #ffffff;
}

/*==========================================================
                    EXPERIENCE BOX
==========================================================*/

.about-experience {
  margin-top: 35px;

  display: flex;

  align-items: center;

  gap: 20px;

  background: #f8fafc;

  padding: 20px;

  border-radius: 15px;
}

.about-experience h2 {
  color: #f58220;

  font-size: 42px;
}

.about-experience p {
  margin: 0;

  color: #555;
}

/*==========================================================
                    ABOUT RESPONSIVE
==========================================================*/

@media (max-width: 992px) {
  .about-grid {
    grid-template-columns: 1fr;

    gap: 50px;
  }

  .about-image {
    order: 1;
  }

  .about-content {
    order: 2;
  }
}

@media (max-width: 768px) {
  .about-content h3 {
    font-size: 30px;
  }

  .about-features {
    grid-template-columns: 1fr;
  }

  .about-experience {
    flex-direction: column;

    text-align: center;
  }
}

@media (max-width: 480px) {
  .about-content h3 {
    font-size: 26px;
  }

  .about-experience h2 {
    font-size: 34px;
  }
}