/* Template: Leno - Mobile App HTML Landing Page Template
   Author: Inovatik
   Created: Mar 2019
   Description: Master CSS file
*/

/*****************************************
Colors:

- Text, navbar links - white #f1f1f8 --> B1B4BE -->
- Buttons, bullets, icons - turquoise #00c9db --> 12afd8 --> CCE4EA --> A58542 --> fcd739
- Navbar - navy #4633af --> 282d35 --> 144A5E -- > 396289 --> 88a9c3
- Backgrounds - dark denim #262431 --> 1D4553 --> 00596D --> 2b4257
- Backgrounds - denim #2f2c3d --> 53616E --> 446171 --> 88a9c3 --> 345e7d
- small highlights - 990228 --> D20337 --> B7352D --> fcd739
- rotating text - 40e0ee --> B7352D --> B7352D --> fcd739
******************************************/


/****************/
/*     Cards    */
/****************/
.tabs {
	padding-top: 3.5rem;
	padding-bottom: 3rem;
	background-color: #345e7d;
}

.tabs h2 {
	margin-bottom: 1.125rem;
	text-align: center;
}

.tabs .p-heading {
	margin-bottom: 3.125rem;
}

.tabs .tab-content {
	width: 100%; /* for proper display in IE11 */
}

.tabs .card {
	border: none;
	background: transparent;
}

.tabs .card-body {
	padding: 1rem 0 1.25rem 0;
}

.card-center {
  text-align: center;
}

.card-lecture {
  margin-bottom: 0.5rem;
}

.card-header {
  background-color: rgba(0,0,0,0);
}

.accordion .card {
  margin-bottom: 0.5rem;
}

/* .card-lecture-body {
  margin-bottom: 2rem;
} */

#features .col-md-12 {
  margin-bottom: 1rem;
}
.tabs .card-title {
	margin-bottom: 0rem;
}

.tabs .card .card-icon {
	display: inline-block;
	width:  4.5rem;
	height: 4.5rem;
	border-radius: 50%;
	/* background-color: #00c9db; */
	text-align: center;
	vertical-align: top;
}

.card-icon img,
.card-icon video {
  width: 98%; /* Ensure both have the same width */
  border-radius: 50%; /* Make both circular */
  border-width: 2px; /* Make the borders the same thickness */
  border-color: white; /* Match border color */
  border-style: solid; /* Ensure consistent border style */
}

.tabs .card .card-icon .fas,
.tabs .card .card-icon .far {
	color: #fff;
	font-size: 1.75rem;
	line-height: 4.5rem;
}

.tabs #tab-1 .card.left-pane .text-wrapper {
	display: inline-block;
	width: 75%;
}

.tabs #tab-1 .card.left-pane .card-icon {
	float: left;
	margin-right: 1rem;
}

.tabs #tab-1 img {
	display: block;
	margin: 2rem auto 3rem auto;
}

.tabs #tab-1 .card.right-pane .text-wrapper {
	display: inline-block;
	width: 75%;
}

.tabs #tab-1 .card.right-pane .card-icon {
	margin-right: 1rem;
}

.tabs #tab-2 img {
	display: block;
	margin: 0 auto 2rem auto;
}

.tabs #tab-2 .text-area {
	margin-top: 1.5rem;
}

.tabs #tab-2 h3 {
	margin-bottom: 0.75rem;
}

.tabs #tab-2 .icon-cards-area {
	margin-top: 2.5rem;
}

.tabs #tab-2 .icon-cards-area .card {
	width: 100%; /* for proper display in IE11 */
}

.tabs #tab-3 .icon-cards-area .card {
	width: 100%; /* for proper display in IE11 */
}

.tabs #tab-3 .text-area {
	margin-top: 0.75rem;
	margin-bottom: 4rem;
}

.tabs #tab-3 h3 {
	margin-bottom: 0.75rem;
}

.tabs #tab-3 img {
	margin: 0 auto 3rem auto;
}

.card-modal {
  background-color: transparent;
}

.card-lecture a {
  color: #fcd739;
  font-weight:bold;
}

.custom-modal-header {
  background-color: #2b4257;
}

.custom-modal-body {
  background-color: #2b4257;
}

@media (max-width: 768px) {
  .card-lecture {
    text-align: center;
		width: 100%;
  }

	.card-lecture-description {
    text-align: center;
		margin-right: 0px;
		margin-left: 0px;
  }

  .card-icon {
    margin-left: auto;
    margin-right: auto;
  }

	/* Features */
	.tabs .card .card-icon {
		width: 4.5rem;
		height: 4.5rem;
	}

	.tabs .card .card-icon .fas,
	.tabs .card .card-icon .far {
		font-size: 2.25rem;
		line-height: 4.5rem;
	}

	.tabs #tab-1 .card.left-pane .text-wrapper {
		width: 85%;
	}

	.tabs #tab-2 img {
		margin-bottom: 0;
	}

	.tabs #tab-2 .text-area {
		margin-top: 0;
	}

	.tabs #tab-2 .icon-cards-area .card {
		display: inline-block;
		width: 44%;
		margin-right: 2.5rem;
		vertical-align: top;
	}

	.tabs #tab-2 div.card:nth-child(2n+2) {
		margin-right: 0;
	}

	.tabs #tab-3 .text-area {
		margin-bottom: 0;
	}

	.tabs #tab-3 .icon-cards-area .card {
		display: inline-block;
		width: 44%;
		margin-right: 2.5rem;
		vertical-align: top;
	}

	/* .tabs #tab-3 div.card:nth-child(2n+2) {
		margin-right: 1rem;
	} */

	.tabs #tab-3 img {
		margin-bottom: 0;
	}
	/* end of features */

}


/* Min-width width 992px */
@media (min-width: 992px) {

	/* Features */
	.tabs .card-body {
		padding: 1rem 0 1.5rem 0;
	}

	.tabs #tab-1 .card.left-pane {
		text-align: right;
	}

	.tabs #tab-1 .card.left-pane .text-wrapper,
	.tabs #tab-1 .card.right-pane .text-wrapper {
		width: 68%;
	}

	.tabs #tab-1 .card.left-pane .card-icon {
		float: none;
		margin-right: 0;
		margin-left: 1rem;
	}

	.tabs #tab-1 img {
		margin-top: 0;
		margin-bottom: 0;
	}

	.tabs #tab-2 .icon-cards-area {
		margin-top: 2.25rem;
	}

	.tabs #tab-2 .icon-cards-area .card {
		width: 45%;
		margin-right: 3.5rem;
	}

	.tabs #tab-2 .icon-cards-area .card p {
		margin-bottom: 0.5rem;
	}

  .tabs #tab-3 .icon-cards-area .card {
		width: 31%;
		margin-right: 3.5rem;
	}

	.tabs #tab-3 .icon-cards-area .card p {
		margin-bottom: 0.5rem;
	}
	/* end of features */

}

/* Min-width width 1200px */
@media (min-width: 1200px) {

	/* Features */
	.tabs {
		padding-bottom: 3rem;
	}

	.tabs #tab-1 .card.first {
		margin-top: 4.25rem;
	}

	.tabs #tab-1 .card {
		margin-bottom: 0.75rem;
	}

	.tabs #tab-1 .card.left-pane .text-wrapper,
	.tabs #tab-1 .card.right-pane .text-wrapper {
		width: 73%;
	}

	.tabs #tab-1 img {
		margin-top: 0;
	}

	.tabs #tab-2 .container {
		padding-right: 2.5rem;
		padding-left: 2.5rem;
	}

	.tabs #tab-2 .text-area {
		margin-top: 1.5rem;
		margin-right: 1rem;
		margin-left: 1rem;
	}

	.tabs #tab-2 .icon-cards-area {
		margin-right: 1rem;
		margin-left: 1rem;
	}

	.tabs #tab-2 .icon-cards-area .card {
		margin-right: 3.875rem;
	}

	.tabs #tab-3 .container {
		padding-right: 2.5rem;
		padding-left: 2.5rem;
	}

	.tabs #tab-3 .icon-cards-area {
		margin-top: 2rem;
		margin-left: 1rem;
	}

	.tabs #tab-3 .icon-cards-area .card {
		margin-right: 1rem;
	}

	.tabs #tab-3 .text-area {
		margin-right: 1.5rem;
		margin-left: 1rem;
	}
	/* end of features */
}