/* Temporary for development stage, recommend to copy these CSS code to frontend.css when production */
section[data-module="about-selection"] {}

  /* Section Layout */
  section[data-module="about-selection"] .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
	width: 1460px;
  }

  /* Left Content */
  section[data-module="about-selection"] .col-left {
    flex: 1;
    padding: 0px;
  }

  section[data-module="about-selection"] .success-left .subtitle {
    font-size: 15px;
    text-transform: capitalize;
    margin: -40px 0px 10px -10px;
    color: #ffffff;
    font-family: "lato";
  }


  section[data-module="about-selection"] .highlight-text{
    font-size: 100px;
    font-weight: bold;
    color: #fff;
    font-family: "lato";
    font-weight: 400;
    filter: blur(3px);
	line-height: 1.2;
    transition: .2s ease-in-out;
  }

  section[data-module="about-selection"] .highlight-text:hover,
  section[data-module="about-selection"] .highlight-text.active {
    font-family: "lato";
    font-weight: 400;
    text-shadow: 0 4px 15px rgba(255, 255, 255, 0.5);
    filter: none;
  }

   section[data-module="about-selection"] .fade-effect {
    opacity: 1;
    transform: translateX(0);
    transition: opacity 0.8s ease, transform 0.8s ease;
  }

   section[data-module="about-selection"] .fade-out {
    opacity: 0;
    transform: translateX(60px);
  }

  /* Right Content */
  section[data-module="about-selection"] .col-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
	margin-left: 220px;
  }

  /* Image Box */
  section[data-module="about-selection"] .image-box img {
    width: 100%;
    border-top-left-radius: 50px;
    border-top-right-radius: 20px;
	border-bottom-right-radius: 0px;
	border-bottom-left-radius: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	margin: 0px 60px 0px -60px;
  }

  /* Info Box */
  section[data-module="about-selection"] .info-box {
    background: rgba(255, 255, 255, 0.1);
    padding: 20px 20px 34px 20px;
    margin-top: 20px;
    border-top-left-radius: 0px;
    border-top-right-radius: 20px;
	border-bottom-right-radius: 50px;
	border-bottom-left-radius: 20px;
    backdrop-filter: blur(10px);
  }

  section[data-module="about-selection"] #dynamic-title {
  	display: none;
  }

  section[data-module="about-selection"] p {
    color: #fff;
	margin: 0px 0px 20px 0px;
	font-size: 17px;
  }

  /* Button */
  section[data-module="about-selection"] .btn-learn-more {
    margin: 8px 30px 0px 0px;
    padding: 12px 34px;
    border: none;
    border-radius: 20px;
    background: #ffffff;
    color: #8D2B22;
    text-decoration: none;
    transition: all 0.3s ease;
    float: right;
  }

  section[data-module="about-selection"] .btn-learn-more:hover {
    background: #e05c50;
	  color:#fff;
  }

/* Typical laptop screen size*/
@media (max-width: 1400px) {
	
}

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 980px) {
	
}

/* Mobile screen size - landscape view */
@media (max-width: 767px) {
   
}

/* Mobile screen size */
@media (max-width: 480px) {
     section[data-module="about-selection"] .container {
      flex-direction: column;
      padding: 10px;
    }
	
	section[data-module="about-selection"] .success-left {
  		margin-left: 155px;
	}
	
	section[data-module="about-selection"] .success-left .subtitle {
  		font-size: 15px;
 	 	margin: 0px 0px 10px 0px;
	}
	section[data-module="about-selection"] #dynamic-title {
  		font-size: 22px;
	}

	section[data-module="about-selection"] .success-right {
  		margin-right: 140px;
  		margin-left: -85px;
	}
	section[data-module="about-selection"] p {
  		font-size: 15px;
	}
	
    section[data-module="about-selection"] .col-left, section[data-module="about-selection"] .col-right {
      width: 100%;
    }

    section[data-module="about-selection"] .highlight-text {
      font-size: 48px;
      text-align: left;
    }

    section[data-module="about-selection"] .info-box {
      text-align: left;
    }

    section[data-module="about-selection"] .btn-learn-more {
      float: right;
      margin: 10px auto;
    }

    section[data-module="about-selection"] .image-box img {
      width: 100%;
      height: auto;
	  margin: 0px 0px 0px 0px;
    }
}