/* HERO SECTION */
.ortho-k-hero {
	background: url('https://s3.amazonaws.com/static.organiclead.com/Site-293c98a2-b126-47f8-834f-cca767f7273b/HomepageAssets/hero_img.jpg');
	background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
	
	position: relative;

    width: 100%;
    min-height: 100vh;

    display: flex;
	padding: 4rem 6rem;
}

.ortho-k-hero .hero-text {
	margin-top: auto;
}

.ortho-k-hero .hero-text .span-1 {
	font-size: 1.25rem;
	letter-spacing: 10px;
	text-transform: uppercase;
	color: #77a139;
	font-weight: 400;
	font-family: "Questrial";
}

.ortho-k-hero .hero-text h1 {
	font-size: 6rem;
	line-height: 1;
	text-transform: uppercase;
	color: #ffffff;
	font-weight: 400;
	font-family: "Playfair Display";
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.ortho-k-hero .hero-text p {
	font-size: 1rem;
	line-height: 1;
	color: #ffffff;
	font-weight: 400;
	font-family: "Questrial";
}

.ortho-k-hero .hero-text .hero-btn {
	display: flex;
	gap: 20px;
	margin: 2rem 0;
}

.ortho-k-section6 .text-wrapper .btn-wrapper {
	display: flex;
	gap: 20px;
	margin: 1.5rem 0;
}

.ortho-k-hero .hero-text .hero-btn .ry-btn.ry-btn-primary,
.ortho-k-section6 .text-wrapper .btn-wrapper .ry-btn.ry-btn-primary {
	width: 300px;
	height: 55px;
	border-radius: 27px;
	background-color: #266194;
	font-size: 1rem;
	padding: 0;
}

.ortho-k-hero .hero-text .hero-btn .ry-btn.ry-btn-primary:hover,
.ortho-k-section6 .text-wrapper .btn-wrapper .ry-btn.ry-btn-primary:hover {
	background-color: #77a139;
}

.ortho-k-banner {
	background-color: #77a139;
	display: flex;
	align-items: center;
	height: auto;
	padding: 1rem;
}

.ortho-k-banner p {
	width: 100%;
	font-size: 30px;
	line-height: 27px;
	color: #ffffff;
	font-family: "Playfair Display", serif;
	letter-spacing: 0.8px;
}

.ortho-k-routine {
	padding: 4rem 6rem 12rem 6rem;
	display: flex;
    flex-direction: column;
    gap: 2.5rem;
    align-items: center;
	position: relative;
    overflow: hidden;
	background: linear-gradient(
        to top,
        rgba(119,161,57,.14),
        rgba(119,161,57,.07),
        rgba(119,161,57,0)
    );

}

.ortho-k-routine::before {
    content: "";

    position: absolute;
    left: 0;
    bottom: 0;

    width: 100%;
    height: 180px;

    background: #f4f4f4;

    clip-path: polygon(
        0 20%,
        50% 100%,
        100% 20%,
        100% 100%,
        0 100%
    );
}

.ortho-k-routine h2,
.ortho-k-vision h2,
.ortho-k-section3 h2,
.orth0-k-section4 h2,
.ortho-k-section5 h2 {
	text-transform: uppercase !important;
	color: #77a139;
}
.ortho-k-routine p,
.ortho-k-vision p,
.ortho-k-section3 p,
.ortho-k-section4 p,
.ortho-k-section5 p{
	font-size: 1rem;
	line-height: 2;
	color: #333333;
	font-weight: 400;
	font-family: "Questrial";
}

.ortho-k-routine span,
.ortho-k-vision span,
.ortho-k-section3 span,
.ortho-k-section4 span,
.ortho-k-section5 span {
	letter-spacing: 10px;
	text-transform: uppercase;
	color: #333333;
	font-weight: 400;
	font-family: "Questrial";
}

.ortho-k-section4 h2,
.ortho-k-section4 p,
.ortho-k-section4 span {
	color: #fff !important;
}

.ortho-k-routine .ok-card-wrapper {
	display: flex;
	justify-content: center;
	gap: 46px;
}

.ortho-k-routine .ok-card-wrapper .ok-card {
	display: flex;
	flex-direction: column;
	width: fit-content;
}

.ortho-k-routine .ok-card-wrapper > *:not(:last-child) {
	border-right: 1px solid #77a139;
	width: 320px !important;
}

.ortho-k-routine .ok-card-wrapper .ok-card .card-header,
.ortho-k-section4 .item-group .item .header {
	display: flex;
	align-items: center;
	gap: 12px;
}

.ortho-k-routine .ok-card-wrapper .ok-card .card-header img {
	max-width: 32px;
}

.ortho-k-routine .ok-card-wrapper .ok-card .text p {
	padding-left: 44px;
	text-align: left !important;
}
.ortho-k-vision {
	background: #f4f4f4;
	display: flex;
	gap: 4rem;
	padding: 4rem 6rem;
}

.ortho-k-vision .cont-1 {
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
	max-width: 480px;
	padding-right: 2rem;
}


.ortho-k-vision .cont-1::after {
    content: "";
    position: absolute;

    top: 0;
    right: -20px;

    width: 20px;
    height: 100%;

    background: linear-gradient(
        to right,
        rgba(0,0,0,.25) 0%,
        rgba(0,0,0,.18) 20%,
        rgba(0,0,0,.10) 45%,
        rgba(0,0,0,.05) 70%,
        rgba(0,0,0,0) 100%
    );
	
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        black 15%,
        black 85%,
        transparent 100%
    );

    mask-image: linear-gradient(
		to bottom,
		transparent 0%,
		rgba(0,0,0,.2) 10%,
		rgba(0,0,0,.5) 20%,
		black 35%,
		black 65%,
		rgba(0,0,0,.5) 80%,
		rgba(0,0,0,.2) 90%,
		transparent 100%
	);

    pointer-events: none;
}

.ortho-k-vision .cont-1 img {
	max-width: 60px;
}

.ortho-k-vision .cont-2 {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	padding-left: 2rem;
}

.ortho-k-vision .cont-2 .check-group {
	display: flex;
	align-items: center;
	gap: 2rem;
	flex-wrap: wrap;
}

.ortho-k-vision .cont-2 .check-group .item {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 260px;
}

.ortho-k-section3 .item {
	display: flex;
	align-items: center;
	gap: 12px;
	width: fit-content;
}

.ortho-k-vision .cont-2 .check-group .item .check-icon,
.ortho-k-section3 .item .check-icon,
.ortho-k-section4 .item-group .item .header .icon {
	border-radius: 50%;
	min-width: 32px;
	min-height: 32px;
	background-color: #77a139;
	display: flex;
	justify-content: center;
	align-items: center;
}

.ortho-k-section4 .item-group .item .header .icon {
	background-color: #fff !important;
}

.ortho-k-vision .cont-2 .check-group .item .check-icon svg,
.ortho-k-section3 .item .check-icon svg {
	color: #fff;
	width: 1rem;
	height: 1rem;
}

.ortho-k-vision .cont-2 .check-group .item p,
.ortho-k-section3 .item p {
	text-wrap: nowrap;
}

.ortho-k-section3 {
	display: flex;
	padding: 4rem 8rem;
	gap: 4rem;
	justify-content: space-around;
	background-color: #fff;
}
.ortho-k-section3 .cont-1 {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	width: fit-content;
}

.ortho-k-section3 .cont-2 {
	display: flex;
	align-items: center;
	justify-content: center;
	width: fit-content;
}
.ortho-k-section3 .cont-2 img {
	max-width: 400px;
}

.ortho-k-section4 {
	display: flex;
	flex-direction: column;
	gap: 4rem;
	padding: 4rem 6rem;
	background-color: #77a139;
}

.ortho-k-section4 .item-group {
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
	gap: 4rem;
}

.ortho-k-section4 .item-group .item {
	display: flex;
	flex-direction: column;
	width: 280px;
}

.ortho-k-section4 .item-group .item .header .icon p {
	font-size: 1.2rem;
	line-height: 1;
	color: #77a139 !important;
	font-weight: 600;
}

.ortho-k-section4 .item-group .item .text {
	padding-left: 44px;
}

.ortho-k-section5 {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4rem;
	padding: 4rem 6rem;
}

.ortho-k-section5 .ry-accordion {
    border-radius: 10px;
    background: #fff;
    overflow: visible !important;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}

.ortho-k-section5 .ry-accordion .ry-heading {
    color: rgb(64, 63, 64);
    border: 1px solid transparent;
    background: #fff;
    border-radius: 10px;
    filter: none;
    box-shadow: none;
	padding: 1rem 2rem;
    transition: background-position 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                color 0.3s;
}

.ortho-k-section5 .ry-accordion .ry-heading.ui-state-active {
    margin-bottom: 0;
    border-radius: 10px 10px 0 0;
    border-color: #fff;
}

.ortho-k-section5 .ry-accordion .ry-content {
    padding: 10px 30px 30px 30px;
    background: #fff;
    border: none;
    border-radius: 0 0 10px 10px;
    box-shadow: none;
}

.ortho-k-section5 .ry-accordion .ry-content.ui-accordion-content-active {
    margin-bottom: 0;
    background: #fff;
    filter: none;
    box-shadow: none;
}

.ortho-k-section5 .ry-accordion .ry-heading::after {
    content: "\f107"; 
    float: right;
    font-weight: 200;
	font-size: 2rem;
    transition: transform 0.4s ease;
}

.ortho-k-section5 .ry-accordion .ry-heading.ui-state-active::after {
    transform: rotate(180deg);
}

.ortho-k-section6 {
	display: flex;
	background: #f4f4f4;
	margin-bottom: 8rem;
}

.ortho-k-section6 .img-wrapper {
	display: flex;
	align-items: center;
}

.ortho-k-section6 .text-wrapper {
	flex-direction: column;
    justify-content: center;
    display: flex;
    padding: 4rem;
}

.ortho-k-section6 .text-wrapper .small-text p {
	font-size: 0.9rem; 
	line-height: 1.5;
}


@media (max-width: 1280px) {
	.ortho-k-routine .ok-card-wrapper {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		gap: 2rem;
	}
	.ortho-k-routine .ok-card-wrapper > *:not(:last-child) {
		border-right: none !important;
		border-bottom: 1px solid #77a139;
	}
	.ortho-k-routine .ok-card-wrapper .ok-card {
		padding-bottom: 2rem;
		width: 320px !important;
	}
	.ortho-k-section6 {
		flex-direction: column;
		gap: 2rem;
		align-items: center;
		padding: 4rem 6rem;
	}
	.ortho-k-section6 .img-wrapper {
		max-width: 480px;
	}
	.ortho-k-section6 .text-wrapper {
		padding: 0;
	}
	.ortho-k-section6 .text-wrapper h2,
	.ortho-k-section6 .text-wrapper p {
		text-align: center;
	}
	.ortho-k-section6 .text-wrapper .btn-wrapper {
		justify-content: center;
	}
}

@media (max-width: 999px) {
	.ortho-k-vision {
		flex-direction: column;
	}
	.ortho-k-section3 {
		flex-direction: column-reverse;
		gap: 4rem;
	}
	.ortho-k-section3 .cont-1, .ortho-k-section3 .cont-2 {
		width: 100%;
		justify-content: center;
	}
	.ortho-k-section3 .cont-1 .item {
		width: 400px;
		margin: 0 auto;
		justify-content: flex-start;
	}
	.ortho-k-vision .cont-1, .ortho-k-vision .cont-2 {
		max-width: none;
		align-items: center;
		padding: 0;
	}
	.ortho-k-vision .cont-1::after {
		display: none;
	}
	.ortho-k-vision p, .ortho-k-vision h2, .ortho-k-vision span,
	.ortho-k-section3 p, .ortho-k-section3 h2, .ortho-k-section3 span {
		text-align: center !important;
	}
	.ortho-k-vision .cont-2 .check-group {
		justify-content: center;
	}
	.ortho-k-vision .cont-2 .check-group .item p,
	.ortho-k-section3 .item p {
		text-wrap: wrap;
	}
}

@media (max-width: 768px) {
	.ortho-k-hero, .ortho-k-routine, .ortho-k-vision, .ortho-k-section3, .ortho-k-section4, .ortho-k-section5, .ortho-k-section6 {
		padding: 4rem 2rem;
	}
	.ortho-k-section4 .item-group .item .text p {
		text-align: left !important;
	}
	.ortho-k-hero {
		background:
			linear-gradient(
				rgba(255, 255, 255, 0.5)
			),
			url('https://s3.amazonaws.com/static.organiclead.com/Site-293c98a2-b126-47f8-834f-cca767f7273b/HomepageAssets/hero_img.jpg');
		background-size: cover;
		background-position: right;
	}
	.ortho-k-hero .hero-text h1 {
		font-size: 4rem;
	}
	.ortho-k-hero .hero-text .hero-btn,
	.ortho-k-section6 .text-wrapper .btn-wrapper {
		flex-direction: column;
		align-items: center;
	}
}

@media (max-width: 496px) {
	.ortho-k-section3 .cont-1 .item {
		width: 100%
	}
	.ortho-k-section3 .cont-1 .item p {
		text-wrap: wrap;
	}
}