.modal-wrap {position: fixed; width: 100%; height: 100%; z-index: 18000; left: 0; top: 0; display: none; overflow-y: auto; -webkit-overflow-scrolling: touch;}
.modal-wrap-inner{width: 100%; height: 100%; margin-top: 80px; position: relative;}
.modal-overlay-bg{position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000000; backdrop-filter: blur(4px); opacity: 0.75; z-index: 1750; }
.modal-access{padding: 56px; max-width: 900px; margin: 0 auto; top: 0; left: 0; right: 0; position: absolute; background-color: #ffff; border-radius: 16px; z-index: 1800;} 

.modal-close-btn{right: 35px; top: 24px; position: absolute; font-size: 32px; color: #002942; opacity: 0.5; cursor: pointer; transition: all 0.5s ease-in-out; }
.modal-close-btn:hover{color: #0061A0;}

.feed-tab{display: none;}
.feed-tab.active{display: block;}

.modal-title{text-align: center; color: #646464; margin-bottom: 9px;}
span.optional-text{padding-bottom: 16px; font-size: 16px; line-height: 24px; letter-spacing: 3.2px; font-weight: 800; display: block; color: #63b5d8; text-transform: uppercase;}
.modal-title h3{padding-bottom: 16px;}

.modal-option{justify-content: center; margin-bottom: 73px;}
.modal-label-radio {  width: 245px; height: 245px; margin: 0 27px;  border: 2px solid #63B5D8; border-radius: 50%; position:relative; display: flex;  justify-content: center; overflow:hidden; padding: 15px; flex-direction: column; cursor: pointer; }
.modal-label-radio input {width: 100%; height: 100%; top: 0; left: 0; font-size: 0; line-height: 0; opacity: 0; position:absolute; cursor: pointer; z-index: 1;}
.modal-label-radio .label { font-size:18px; line-height:22px; font-weight: 700; font-family: 'Lexend'; padding: 10px 30px 0; }
.modal-label-radio.active { border-color: #115E67; }
.modal-label-radio.active img.default, .modal-label-radio img.hover { display:none; }
.modal-label-radio img.default, .modal-label-radio.active img.hover { display:block; }

.modal-product-line{margin-bottom: 33px;}
.modal-btns{justify-content: space-between;}
.modal-btns a.btn{min-width: 128px;}
.modal-btns a.btn.disabled{pointer-events: none; opacity: 0.3; color: #646464; border-color: #646464;}
.modal-next{order: 3;}
ul.modal-dots{padding: 0; justify-content: center;}
ul.modal-dots li{padding: 0; margin: 4px; width: 16px; height: 16px;}
ul.modal-dots li::before{display: none;}
ul.modal-dots li a { border:none; font-size:0; background:#646464; opacity:0.2; width:16px; height:16px; border-radius: 50%; position:absolute; top:0; cursor: pointer; left:0; }
ul.modal-dots li.active a { opacity:1; background-color: transparent; color: #0061A0;}
ul.modal-dots li.active a:before { content: "\f0e7"; font-weight: 900; font-family: "Font Awesome 6 Pro"; top: -4px; height: 16px; left: 0; font-size: 18px; position: absolute;}

/*-- Results --*/
.result-list{ padding: 0 16px 16px; position: relative;}
.result-list::before {top: 18px; left: 0; width: 100%; height: calc(100% - 20px); border: 2px solid #63b5d8; border-radius: 16px; content: ""; display: block; position: absolute; z-index: -1; }
.result-list::after {top: 34px; left: 16px; width: calc(100% - 30px); height: calc(100% - 48px); content: ""; display: block; border-radius: 8px; background-color: rgba(99, 181, 216, 0.1); position: absolute; z-index: -1; }
.h2{padding: 0 0 24px; margin: 0; font-size: 32px; line-height: 40px; font-family: 'Lexend', sans-serif; font-weight: 700; color: #002942; }
.result-text-btns .btn{margin-right: 24px;}
.result-list.no-image{padding: 50px 50px 40px;}
.home .seperator.modal-product-line{display: inline-block; margin: 0 0 33px;}

/*-- media css starts here --*/
@media only screen and (min-width: 1024px){
	.result-image {flex-basis: 375px; margin: 0; }
    .result-text {flex: 1; padding: 32px;}
}
@media only screen and (max-width: 1023px) and (min-width: 768px){
	.modal-access{max-width: calc(100% - 40px);}
	.result-list {padding: 30px 16px 16px; gap: 20px; } 
	.result-image.object-fit {flex: 0 0 300px; margin: 0; }
	.result-text {flex: 1; padding: 32px; }
}
@media only screen and (max-width: 767px) and (min-width: 200px){
	.modal-access{padding: 56px 20px; max-width: 100%;}
	.modal-close-btn {right: 20px; top: 15px; }
	.modal-option{display: block;}
	.modal-label-radio{margin: 0 auto 20px;}
	.modal-btns a.btn{font-size: 0; line-height: 0; min-width: 54px; height: 54px;}
	.modal-btns a.btn:after{font-family: "Font Awesome 6 Pro"; font-weight: 900; content: "\f061"; font-size: 18px; line-height: 24px; color: #fff; }
	.modal-btns a.btn.dark-blue-bordered:after{color: #0061A0; content: "\f060";}
	.modal-btns a.btn.disabled:after{color: #646464; content: "\f060";}
	.modal-btns .modal-next a.btn.disabled:after{content: "\f061";}
	.result-list{display: block; padding:30px 40px 40px;}
	.result-list::before {top: 0; height: 100%; } 
	.result-list::after {top: 20px; height: calc(100% - 30px); } 
	.result-text-btns{gap: 20px; flex-direction: column;}
	.result-text-btns .btn{margin: 0;}
}