.medicina-page{
	.topo{
		width: 100%;
		height: auto;
		img{
			display: block;
			width: 100%;
			height: auto;
		}
	}
	.inscricao{
		background-image: url(../medicina/img/modelo.png), url(../medicina/img/inscricao.jpg);
		background-position: left center, center;
		background-repeat: no-repeat, no-repeat;
		background-size: 85%, cover;
		padding: 160px 10%;
		color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 15px;
		.ctas {
			width: 300px;
			& h2{
				font-size: 5rem;
				text-transform: uppercase;
				font-weight: 300;
				line-height: 1;
				margin: 0;
				& span.high{
					color: #68D4DB;
				}
			}
			& p{
				font-size: 1.3rem;
				line-height: 1.5;
				margin: 50px 0 0;
			}
		}
		.informacoes {
			width: 500px;
			& h3 {
				color: #0A9A96;
				text-transform: uppercase;
				font-weight: 800;
				margin-bottom: 15px;
			}
			& .info{
				font-size: 1.1rem;
				line-height: 1.5;
			}
			& ul{
				margin-left: 30px;
				margin-right: 0;
				& strong{
					color: #68D4DB;	
				}
				& lI{
					&::marker{
						color: #68D4DB; 
					}
				}
			}
			button{
				border: 0;
				outline: 0;
				width: 100%;
				padding: 15px;
				text-align: center;
				transition: .3s;
				cursor: pointer;
				margin: 5px;
				border-radius: 8px;
				&:focus{
					border: 0;
					outline: 0
				}
			}
			button.incricoes{
				background: #0A9A96;
				color: #fff;
				&:hover{
					background: #68D4DB;
				}
			}
			button.ativo{
				background: #fff;
				color: #0A9A96;
				&:hover{
					background: #68D4DB;
					color: #fff;
				}
			}
			button.ativo.desativado{
				opacity: .8;
				pointer-events: none;
				cursor: default;
				&:hover{
					background: #fff;
					color: #0a9a96;
				}
			}
		}
	}
	.medicina{
		background: url(../medicina/img/medicina-unimar.jpg) center no-repeat;
		background-size: cover;
		padding: 100px 10%;
		color: #fff;
		& h2{
			font-weight: 800;
			font-size: 4rem;
			line-height: 1;
			margin: 0px;
			color: #0A9A96;
		}
		& p{
			width: 90%;
			font-size: 1.15rem;
			line-height: 1.5;
			margin: 20px 0;
		}
		& button.saiba{
			border: 0;
			outline: 0;
			padding: 15px 30px;
			background: #fff;
			border-radius:5px;
			color: #0A9A96;
			text-transform: uppercase;
			margin-top: 40px;
			transition: .3s;
			&:hover{
				background: #0A9A96;
				color: #fff;
			}
		}
		& #owl-galeria{
			img{
				border-radius: 15px;
			}
			.owl-nav {
				display: flex;
				gap: 15px;
				justify-content: center;
				margin-top: 30px;
				.owl-prev, .owl-next{
					width: 50px; 
					height: 50px;
					border-radius: 50%;
					display: flex; 
					justify-content: center;
					align-items: center;
					background: #fff;
					color: #000c1c;
					font-size: 25px;
					transition: .3s;
					&:hover{
						background: #0A9A96;
						color: #fff;
					}
				}
			}
		}
	}
	.estagio{
		background: url(../medicina/img/areas.jpg) center no-repeat;
		background-size: cover;
		padding: 100px 0 100px 10%;
		color: #fff;
		& h2{
			font-weight: 800;
			font-size: 3rem;
			line-height: 1;
			margin: 0px;
			color: #fff;
		}
		& p{
			width: 70%;
			font-size: 1.15rem;
			line-height: 1.5;
			margin: 20px 0;
		}
		& .owl-stage {
			padding-left: 0 !important;
			img{
				border-radius: 15px;
			}
		}
		& #owl-estagio{
			img{
				border-radius: 15px;
			}
			h4 {
				text-align: center;
				height: 150px;
				margin-top: -150px;
				display: flex;
				justify-content: center;
				align-items: end;
				padding: 0px 30px 40px;
				font-size: 1.3rem;
				text-shadow: 1px 1px 10px #000000;
			}
			.owl-nav {
				display: flex;
				gap: 15px;
				justify-content: center;
				margin-top: 30px;
				.owl-prev, .owl-next{
					width: 50px; 
					height: 50px;
					border-radius: 50%;
					display: flex; 
					justify-content: center;
					align-items: center;
					background: #fff;
					color: #000c1c;
					font-size: 25px;
					transition: .3s;
					&:hover{
						background: #0A9A96;
						color: #fff;
					}
				}
			}
		}
	}
	.modal-fullscreen {
		width: 100%;
		max-width: 100%;
		color: #000;
		padding: 100px 0 0;
		margin: 0;
		min-height: 100vh;
		.modal-content{
			border: 0;
			border-radius: 0;
			.modal-header {
				padding: 20px 10%;
				h5{
					font-weight: 700;
					color: var(--azul2);
					font-size: 1.8rem;
				}
				.close {
					float: right;
					font-size: 2.5rem;
					font-weight: 300;
					line-height: 1;
					color: var(--azul3);
					text-shadow: 0 1px 0 #fff;
					opacity: 1;
				}
			}
			.modal-body {
				padding: 30px 10% 60px;
				& p {
					width: 98%;
					font-size: 1rem;
					line-height: 1.5;
					margin: 10px 0;
					& strong{
						color: var(--azul2);
					}
				}
				.galeria{
					position: sticky;
					top: 30px;
				}
				& #owl-galeria-interna{
					img{
						border-radius: 15px;
					}
					.owl-nav {
						display: flex;
						gap: 15px;
						justify-content: center;
						margin-top: 30px;
						.owl-prev, .owl-next{
							width: 40px; 
							height: 40px;
							border-radius: 50%;
							display: flex; 
							justify-content: center;
							align-items: center;
							background: var(--azul2);
							color: #fff;
							font-size: 20px;
							transition: .3s;
							&:hover{
								background: #0A9A96;
								color: #fff;
							}
						}
					}
				}
				.chevron-icon {
					transition: transform 0.3s ease;
				}

				.collapse.show ~ .card-body .chevron-icon,
				button[aria-expanded="true"] .chevron-icon {
					transform: rotate(180deg);
				}
				#outerAccordion{
					.card-header{
						background: transparent;
						.btn.focus, .btn:focus{
							box-shadow: none;
						}
						.btn-link.focus, .btn-link:focus, .btn-link:hover{
							text-decoration: none;
						}
						h2{
							button{
								font-size: 1.5rem;
								font-weight: 700;
								color: var(--azul2);
							}
						}
					}
					.card-body{
						padding: 0;
					}

				}
				#matrizAccordion{
					.font-weight-bold{
						color: var(--azul2);
					}
					.card-header{
						background: #e0f3ff;
						.btn.focus, .btn:focus{
							box-shadow: none;
						}
						.btn-link.focus, .btn-link:focus, .btn-link:hover{
							text-decoration: none;
						}
						h2{
							button{
								font-size: 1rem;
								font-weight: 600;
								color: var(--azul2);
							}
						}
					}
					.card-body{
						padding: 1.25rem;
					}
				}

				.medicina__cards {
					display: flex;
					flex-direction: row;
					gap: 15px;
					margin: 30px 0;
					padding: 30px;
					background: #e0f3ff;
					border-radius: 15px;
				}

				.cards__card {
					width: calc(25% - 15px);
					display: flex;
					flex-direction: column;
					align-content: center;
					flex-wrap: wrap;
				}
				.card__icon {
					position: relative;
					z-index: 1;
					display: flex;
					justify-content: center;
					align-items: center;
					background: var(--azul2);
					border-radius: 50%;
					width: 60px;
					height: 60px;
					fill: #ffffff;
					margin: 0 auto 10px;
				}
				.card__desc {
					width: 100%;
					padding: 0;
					color: #333333;
					text-align: center;
				}
				.card__desc p{
					width: 100%;
					margin: 0px;
				}
				.card__desc p:first-child {
					font-weight: 700;
					color: var(--azul2);
				}
				h3 {
					font-size: 1.8rem;
					font-weight: 700;
					color: var(--azul2);
					margin: 0 0 15px;
				}
			}
		}
	}
	.historia{
		background: url(../medicina/img/video.png) center no-repeat;
		background-size: cover;
		padding: 100px 25%;
		color: #fff;
		& h2{
			font-weight: 400;
			font-size: 2rem;
			line-height: 1.3;
			margin: 0 0 50px;
			color: #fff;
			text-align: center;
			padding: 0 5%;
		}
		& strong{
			color: #0A9A96;
			font-weight: 700;
		}

		& iframe{
			border-radius: 15px;
		}
	}

	@media (max-width: 1441px){
		.inscricao {
			background-image: url(../medicina/img/modelo.png), url(../medicina/img/inscricao.jpg);
			background-position: left -40% bottom -85px, center;
			background-repeat: no-repeat, no-repeat;
			background-size: 90%, cover;
			padding: 90px 5%;
			& .ctas {
				width: 280px;
				& h2 {
					font-size: 4rem;
				}
				& p {
					font-size: 1.2rem;
					line-height: 1.5;
					margin: 30px 0 0;
				}
			}
			.informacoes {
				width: 460px;
				& .info {
					font-size: 1rem;
				}
			}
		}
		.medicina {
			padding: 80px 5%;
			& h2 {
				font-size: 3rem;
			}
			& p {
				width: 95%;
				font-size: 1rem;
			}
		}
		.estagio{
			padding: 80px 0 80px 5%;
			& p {
				width: 80%;
				font-size: 1.05rem;
			}
			& #owl-estagio {
				h4 {
					padding: 0px 20px 30px;
					font-size: 1.1rem;
				}
			}
		}
		.modal-fullscreen{
			padding: 75px 0 0;
			& .modal-content {
				.modal-header {
					padding: 20px 5%;
					h5 {
						font-size: 1.4rem;
					}		
				}
				.modal-body {
					padding: 30px 5% 50px;
					.medicina__cards{
						padding: 25px;
					}
					.card__desc p {
						font-size: .95rem
					}
				}
			}
		}
		.historia {
			padding: 80px 20%;	
			& h2 {
				padding: 0;
			}
		}
	}
	@media (max-width: 768px){
		.inscricao {
			flex-direction: column;
			padding: 60px 60px 40vh;
			background-image: url(../medicina/img/modelo.png), url(../medicina/img/inscricao.jpg);
			background-position: center bottom -85px, center;
			background-repeat: no-repeat, no-repeat;
			background-size: 110%, cover;
			& .ctas, .informacoes {
				width: 100%;
			}
			& .ctas {
				& h2{ 
					font-size: 3.5rem;
				}
			}
		}
		.medicina {
			padding: 60px;
			& button.saiba {
				margin: 10px 0 30px;
			}
			& p{
				width: 100%;
			}
		}
		& .estagio {
			& p {
				width: 90%;
			}
		}
		.historia {
			padding: 60px;
			& h2 {
				font-size: 1.6rem;
				margin: 0 0 30px;
			}
		}
	}
	@media (max-width: 480px) {
		.inscricao {
			flex-direction: column;
			padding: 40px 30px 40vh;
			background-image: url(../medicina/img/modelo.png), url(../medicina/img/inscricao.jpg);
			background-position: center bottom -85px, center;
			background-repeat: no-repeat, no-repeat;
			background-size: 160%, cover;
			& .ctas {
				& h2 {
					font-size: 2.5rem;
				}
				& p {
					font-size: 1rem;
					line-height: 1.5;
					margin: 10px 0 0;
				}
			}
			& .informacoes {
				& h3 {
					font-size: 1.2rem;
					color: #fff;
				}
				& .info {
					font-size: 1rem;
				}
				& ul {
					margin-left: 0px;
				}
				button {
					font-size: .9rem;
					padding: 15px 10px;
				}
			}
		}
		.medicina {
			padding: 40px 30px;
			& h2 {
				font-size: 2rem;
			}
		}
		.estagio {
			padding: 40px 0 40px 30px;
			& h2 {
				font-size: 2rem;
			}
			& p {
				width: calc(100% - 30px);
				font-size: .95rem;
				margin: 5px 0 20px;
			}
		}
		.historia {
			padding: 40px 30px;
			& h2 {
				font-size: 1.3rem;
				margin: 0 0 20px;
			}
		}
		.modal-fullscreen {
			padding: 70px 0 0;
			& .modal-content {
				& .modal-header {
					padding: 20px 30px;
					h5 {
						font-size: 1.2rem;
						line-height: 1.2;
					}
				}
				.modal-body {
					padding: 10px 30px 40px;
					.galeria {
						margin-top: 20px;
					}
					& p {
						width: 100%;
						font-size: .9rem;
						line-height: 1.5;
						margin: 10px 0;
					}
					.medicina__cards {
						padding: 25px;
						flex-direction: column;
					}
					.cards__card {
						width: 100%;
					}
					& #outerAccordion {
						& .card-header {
							& h2 {
								button {
									font-size: 1rem;}
							}
						}
					}
				}
			}
		}
	}
}