<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">

    @media (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1500px;
		}
	}
	
	.sec-section, .sec-container {
		background: #e3f2fd !important;
		padding:0 60px;
	}

  .feature-section {
    padding-bottom: 25px;
    background-color: #fff;
  }

  .feature-heading {
    font-size: 2.2rem;
    font-weight: 700;
  }

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

  .feature-text h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #333;
    text-decoration: underline;
  }

  .feature-text p {
    font-size: 0.95rem;
    color: #000;
    line-height: 1.6;
  }

  @media (max-width: 768px) {
    .feature-text .w-50 {
      width: 100% !important;
    }
	  
	  .parallax-text.left {
		  margin-top: 30px;
	  }
  }
  .page-wrapper, .page-wrapper_1 {
      display: flex;
      justify-content: center;
      align-items: start;
      padding-top: 30px;
    }

    .mobile-frame, .mobile-frame_1 {
/* 	  width: 90%; */
      border-radius: 30px;
      overflow: hidden;
      position: relative;
    }

    /* Drawer inside the mobile */
    .drawer {
      position: absolute;
      top: 0;
      left: -384px;
      height: 100%;
      color: white;
      box-sizing: border-box;
      transition: left 0.4s ease;
      z-index: 2;
    }
	
	.drawer_1 {
	  position: absolute;
	  top: 0;
	  left: -250px;
	  height: 100%;
	  color: white;
	  box-sizing: border-box;
	  transition: left 0.4s ease;
	  z-index: 2;
	}

    .drawer.open {
      left: 0;
    }
	
	.drawer_1.open {
		left: 0;
	}

    .drawer img, .drawer_1 img {
      width: 100%;
      border-radius: 8px;
	  height: 100%;
    }

    .slider-container, .slider-container_1 {
      width: 100%;
      height: 100%;
      display: flex;
      transition: transform 0.5s ease-in-out;
      position: relative;
      z-index: 1;
    }
	
	.parallax-text {
		transform: translateY(50px); 
		transition: transform 0.4s ease, opacity 0.5s ease;
		will-change: transform, opacity;
	}
	
	.detail-title {
		margin-bottom: 90px;
	}

	@media screen and (max-width: 768px) {
	   .page-wrapper, .page-wrapper_1 {
		  margin-top: 10% !important;
		  height: 70% !important;
		  width: 70% !important;
		  margin-left: 15% !important;
	  }
		
	  .page-wrapper {
		  padding-top: 0 !important;
	  }
		
	  .detail-title {
		   margin-bottom: 0px;
	   }
	}
	
	.parallax-text > * {
	  opacity: 0;
	  transform: translateX(100%);
	  transition: transform 1.2s ease-out, opacity 1.2s ease-out;
	}

	.parallax-text.slide-in > * {
	  opacity: 1;
	  transform: translateX(0);
	}

	.parallax-text.slide-out > * {
	  opacity: 0;
	  transform: translateX(100%);
	}
	
	.parallax-text.right > * {
	  opacity: 0;
	  transform: translateX(-100%);
	  transition: transform 1s ease-out, opacity 1s ease-out;
	}

	.parallax-text.right.slide-in > * {
	  opacity: 1;
	  transform: translateX(0);
	}

	.parallax-text.left > * {
	  opacity: 0;
	  transform: translateX(100%);
	  transition: transform 1s ease-out, opacity 1s ease-out;
	}

	.parallax-text.left.slide-in > * {
	  opacity: 1;
	  transform: translateX(0);
	}

	.hr-line
 	{
    	background-color: #877474 !important;
   	border: 0;
	height: 1px;
	margin-bottom: 3.5em;	}

	/* Animated Image Styles */
    	.animated-image {
          opacity: 0;
          transform: scale(0.9);
          transition: all 1s ease-out;
    	}

    	.animated-image.show {
          opacity: 1;
          transform: scale(1);
    	}

  .profile-image {
    width: 97% !important;
    margin-left: 14px !important;
    height: 96% !important;
    margin-top: 15px !important;
    border-radius: 48px !important;
}
  .profile-text {
      cursor: pointer;
  }

@media (max-width: 1024px) {
    /* Hides the mobile frame and its content */
    .col-md-4.order-md-2 {
        display: none !important;
    }

    /* Adjusts the feature text columns to stack */
    .col-md-4.feature-text {
        flex: 0 0 100%; 
        max-width: 100%; 
        text-align: left !important;
    }

    /* Ensures the inner padding is consistent */
    .feature-text .p-2 {
        padding: 10px !important;    }

    .profile-text.p-2 {
        margin-bottom: 15px;
    }

    
    p.text-black.detail-title {
        margin-bottom: 60px;
    }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.slide-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: all 1s ease;
}

.slide-right {
  opacity: 0;
  transform: translateX(50px);
  transition: all 1s ease;
}

.slide-left.show,
.slide-right.show {
  opacity: 1;
  transform: translateX(0);
}