/* Normal desktop :1200px. */
@media (min-width: 1201px) and (max-width: 1500px) {

	.profile-image-card,
	.profile-video-card {
		height: 565px;
	}
}

@media (min-width:1801px) and (max-width:2400px) {

	.profile-image-card,
	.profile-video-card {
		height: 690px;
	}
}

@media (min-width: 1501px) and (max-width: 1800px) {

	.profile-image-card,
	.profile-video-card {
		height: 565px;
	}
}

/* Alternative: Targeting >= 1440px */
@media only screen and (min-width: 1440px) {

	.profile-image-card,
	.profile-video-card {
		height: 540px;
	}
}

/* Alternative: Targeting >= 2304px */
@media only screen and (min-width:2304px) {

	.profile-image-card,
	.profile-video-card {
		height: 900px;
	}
}

/* Alternative: Targeting >= 2880px */
@media only screen and (min-width:2880px) {

	.profile-image-card,
	.profile-video-card {
		height: 1140px;
	}
}

/* Normal desktop :992px. */
@media (min-width: 992px) and (max-width: 1200px) {}

/* Tablet */
@media (max-width: 991px) {
	.container-fluid {
		padding-left: 30px !important;
		padding-right: 30px !important;
	}

	.banner-content {
		position: relative;
		bottom: auto;
		max-width: 100%;
		padding: 60px 0 30px;
	}

	.banner-content h1,
	.banner-content h1 span {
		font-size: 42px !important;
	}

	.banner-content p {
		font-size: 16px !important;
	}

	.about-future h2 {
		font-size: 42px !important;
	}

	.about-future p {
		font-size: 16px !important;
		padding-bottom: 60px;
	}

	.about-future p::before {
		top: 55px;
	}

	.box-future h3 {
		font-size: 28px !important;
	}

	.box-future p {
		font-size: 14px !important;
	}

	.story-slid .owl-carousel .owl-nav .owl-next,
	.story-slid .owl-carousel .owl-nav .owl-prev {
		width: 22px;
		height: 45px;
		top: 32%;
	}

	.story-slid .owl-carousel .owl-nav .owl-prev::before {
		top: 21px;
	}

	.story-slid .owl-carousel .owl-nav .owl-next::before {
		top: 21px;
	}

	.whatwe-slids .owl-carousel .owl-nav .owl-next,
	.whatwe-slids .owl-carousel .owl-nav .owl-prev {
		width: 22px;
		height: 45px;
		top: 32%;
	}

	.whatwe-slids .owl-carousel .owl-nav .owl-prev::before {
		top: 21px;
	}

	.whatwe-slids .owl-carousel .owl-nav .owl-next::before {
		top: 21px;
	}

	.whatwe-slids .owl-dot {
		width: 40px;
		height: 5px;
		margin: 0 5px;
	}

	#section5 {
		padding-bottom: 40px;
	}

	#video-slids-sec .owl-nav {
		display: none;
	}

	#section3 {
		padding: 27px 0 50px;
	}

	#storybox {
		padding: 10px 0;
		border-radius: 20px;
		margin: 30px auto 0;
	}

	#storybox h3 {
		font-size: 28px !important;
		margin-bottom: 20px;
	}

	.about-people h2,
	.about-whatwe h2,
	.titlebar h2 {
		font-size: 36px !important;
	}

	.about-people p,
	.about-whatwe p,
	.titlebar p {
		font-size: 16px !important;
	}

	.video-title h2 {
		font-size: 28px !important;
	}

	.contact-content h2 {
		font-size: 28px !important;
	}

	.contact-forms {
		padding: 30px !important;
	}

	.box-people .row>div {
		margin-bottom: 20px;
	}

	.box1,
	.box2,
	.box3 {
		min-height: 250px;
	}
}

@media (min-width:768px) and (max-width:991px) {
	.logo img {
		max-width: 300px;
	}

	.profile-image-card,
	.profile-video-card {
		height: 245px;
	}

	.labo-text h2,
	.business-text h2 {
		font-size: 36px;
	}

	.labo-text h4,
	.business-text h4 {
		font-size: 16px;
		margin-bottom: 18.5px;
	}

	.labo-text p,
	.business-text p {
		font-size: 12px;
	}

	.cta-content h3 {
		font-size: 21px;
	}

	.cta-content p {
		font-size: 13px;
	}

	.cta-overlay {
		padding: 10px;
	}
}

@media (max-width: 768px) {
	.whatwe-slids p {
		font-size: 12px;
	}

	.values {
		flex-direction: column;
		gap: 40px;
	}

	.value-box {
		width: 100%;
		padding-top: 20px;
	}

	.values::before,
	.value-box::before,
	.value-box::after {
		display: none;
	}

	.box-future.box-future-bottom {
		padding-top: 20px;
	}

	.banner-content h1,
	.banner-content h1 span {
		font-size: 32px !important;
	}

	.about-future h2 {
		font-size: 32px !important;
	}

	.about-future p::after {
		height: 40px;
	}

	#storybox .row {
		flex-direction: column;
	}

	#storybox .col-xl-5,
	#storybox .col-xl-7 {
		max-width: 100%;
		flex: 0 0 100%;
	}

	.about-whatwe {
		text-align: left !important;
	}

	.boder-left-design.right-align {
		float: none;
	}

	.formsubmit {
		padding: 10px 60px !important;
		width: 100%;
	}

	.contact-forms h3 {
		font-size: 18px !important;
	}
}

/* small mobile :320px. */
@media (max-width: 767px) {
	.play-button::after {

		width: 9.6px;
		height: 11.7px;

		left: 2px;
	}

	.inner-banner-content h1 {
		font-size: 21px;
	}

	.business-tab {
		margin-bottom: 20px;
	}

	.business-text {
		padding-top: 20px;
	}

	.labo-text h2,
	.business-text h2 {
		font-size: 36px;
	}

	.carousel-divider {
		margin: 30px auto 0;
	}

	.labo-section {
		padding: 0;
	}

	.labo-text {
		padding-top: 20px;
	}

	.main-menu-area .col-xl-8.col-lg-9.col-md-10.col-sm-10 {
		display: none;
	}

	.main-menu-area img {
		max-width: 200px;
	}

	.main-menu-area {
		padding: 10px 0;
	}

	.main-menu-area .col-12 {
		padding: 0;
	}

	.labo-section {
		padding: 0 !important;
	}

	.cta-card {
		margin-bottom: 20px;
	}

	.cta-cards-section {
		padding-bottom: 30px;
	}

	#banner-right {
		order: 1;
	}

	#banner-left {
		order: 2;
	}

	#homes {
		margin-top: 48px;
		padding-bottom: 10px;
	}

	.container-fluid {
		padding-left: 15px !important;
		padding-right: 15px !important;
	}

	.box-future.box-future-bottom {
		display: none;
	}

	.banner-content {
		padding: 40px 0 20px;
	}

	.banner-content h1,
	.banner-content h1 span {
		font-size: 28px !important;
	}

	.banner-content span {
		font-size: 12px !important;
	}

	.banner-content p {
		font-size: 14px !important;
	}

	#banner-right {
		padding: 0;
	}

	.about-future h2 {
		font-size: 26px !important;
		padding-top: 20px;
	}

	.about-future p {
		font-size: 11px !important;
		padding-bottom: 55px;
	}

	.about-future p::before {
		top: 95px;
	}

	#line1 span,
	#line2 span,
	#line3 span,
	.line-number span {
		font-size: 14px !important;
	}

	.box-future h3 {
		font-size: 22px !important;
	}

	#storybox h3 {
		font-size: 22px !important;
	}

	.about-people h2,
	.about-whatwe h2,
	.titlebar h2 {
		font-size: 26px !important;
	}

	.video-title h2 {
		font-size: 22px !important;
	}

	.contact-content h2 {
		font-size: 22px !important;
	}

	.contact-forms {
		padding: 20px !important;
		border-radius: 10px;
	}

	.formsubmit {
		padding: 12px 30px !important;
	}

	.copyright p {
		font-size: 16px;
	}

	.hero-banner {
		margin-top: 72px;
		padding: 36px 15px 0;
	}

	.hero-banner {
		margin-top: 48px;
		padding: 36px 15px 0;
	}

	.inner-banner-content p {
		font-size: 12px;
	}

	.people-video-section {
		padding: 0 0;
	}

	.people-profile-section {
		padding: 40px 0;
	}

	.profile-header {
		flex-direction: inherit;
		gap: 0;
		display: block;
		text-align: center;
	}

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

	.profile-image-card,
	.profile-video-card {
		height: auto !important;
		border-radius: 0;
	}

	.profile-video-card {
		padding-top: 20px;
	}

	.play-button {
		top: 55%;
		width: 35px;
		height: 35px;
	}

	.people-profile-section {
		padding: 40px 0 !important;
	}

	.profile-divider {
		margin-top: 30px;
		margin-bottom: 30px;
	}

	.entry-image-wrapper {
		position: relative;
		border-radius: 0;
		overflow: hidden;
	}
}

/* Large Mobile :480px. */
@media only screen and (min-width: 480px) and (max-width: 767px) {
	.container {
		width: 450px
	}
}

/* =============================
   Responsive banner area for new template people page
============================= */
@media (max-width: 992px) {
	.people-banner-section {
		padding: 25px;
	}

	.people-banner-content {
		left: 40px;
	}

	.people-banner-content h1 {
		font-size: 40px;
	}
}

@media (max-width: 768px) {
	.people-banner-content {
		position: relative;
		top: auto;
		transform: none;
		padding: 30px;
	}

	.people-banner-content h1 {
		font-size: 28px;
	}
}

/* ========================================
   Responsive People Profile Section
======================================== */
@media (max-width: 992px) {
	.profile-header {
		flex-direction: column;
		gap: 15px;
	}

	.profile-media-row {
		flex-direction: column;
	}

	.profile-card {
		width: 100%;
	}
}

@media (max-width: 768px) {
	.people-profile-section {
		padding: 40px 20px;
	}

	.profile-name {
		font-size: 32px;
	}

	.profile-description h3 {
		font-size: 22px;
	}
}

@media (max-width: 992px) {
	.profile-media-row {
		flex-direction: column;
	}

	.profile-image-card,
	.profile-video-card {
		flex: 0 0 100%;
		width: 100%;
		height: 350px;
	}
}

/* =====================================
   Responsive for entry section
===================================== */
@media (max-width: 1200px) {
	.entry-title {
		font-size: 36px;
	}

	.entry-overlay {
		font-size: 60px;
	}
}

@media (max-width: 768px) {
	.entry-section {
		padding: 70px 20px;
	}

	.entry-overlay {
		font-size: 40px;
	}
}

/* =========================
   Responsive for what we do page
========================= */
@media (max-width: 992px) {
	.business-tabs {}

	.business-content {
		flex-direction: column;
	}

	.business-image,
	.business-text {
		flex: 0 0 100%;
		width: 100%;
	}
}

/* =========================
   Responsive for logo section
========================= */
@media (max-width: 1200px) {
	.logo-card {
		flex: 0 0 180px;
		height: 140px;
	}
}

@media (max-width: 992px) {
	.logo-card {
		flex: 0 0 150px;
		height: 120px;
	}
}

@media (max-width: 768px) {
	.logo-marquee-section {
		padding: 60px 0 40px;
	}

	.logo-card {
		flex: 0 0 120px;
		height: 100px;
	}
}

/* ===================================
   Responsive for labo section
=================================== */
@media (max-width: 992px) {
	.labo-content-row {
		flex-direction: column;
	}

	.labo-image,
	.labo-text {
		flex: 0 0 100%;
		width: 100%;
	}

	.logo-card {
		flex: 0 0 150px;
		height: 120px;
	}
}

@media (max-width: 768px) {
	.labo-section {}

	.carousel-divider {
		margin: 40.5px auto 0;
	}

	.logo-card {
		flex: 0 0 120px;
		height: 100px;
	}

	.labo-text h2 {
		font-size: 40px;
	}
}

/* ===================================
   Responsive for cta section
=================================== */
@media (max-width: 992px) {
	.cta-container {
		flex-direction: column;
	}
}