@font-face {
    font-family: "Poppins-Regular";
    src: url("fonts/Poppins-Regular.ttf") format("truetype");
}

@font-face {
    font-family: "Poppins-Bold";
    src: url("fonts/Poppins-Bold.ttf") format("truetype");
}

/* Default font */
body {
    font-family: "Poppins-Regular", sans-serif;
}
/*====================================================
RESPONSIVE SCALE SYSTEM
====================================================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

:root{

    --primary:#A15AAD;
    --header1:#6B2C91;
    --header2:#B46BC1;
    --page:#F9F6FC;
    --white:#fff;
    --text:#333;
    --shadow:0 .75rem 1.875rem rgba(0,0,0,.12);
    --radius:1.75rem;

    /* Design Width (iPad) */
    --design-width:768;

    /* Default Scale */
    --scale:1;

}

/*====================================================
BODY
====================================================*/

body{

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

    display:flex;
    justify-content:center;
    align-items:center;

    background:#d7d7d7;

    overflow:hidden;

    font-family:"Poppins-Regular",sans-serif;

}

/*====================================================
DEVICE
====================================================*/

.device{

    width:min(100vw,calc(100vh * 9 / 16));

    aspect-ratio:9/16;

    background:#fff;

    display:flex;
    flex-direction:column;

    overflow:hidden;

    box-shadow:0 1.25rem 3.75rem rgba(0,0,0,.25);

    --scale:calc(width / var(--design-width));

}

/*====================================================
HEADER
====================================================*/

header{

    flex-shrink:0;

    display:flex;
    justify-content:center;
    align-items:center;

    text-align:center;

    color:#fff;

    font-weight:700;

    font-size:clamp(1.25rem,2.2vw,2.2rem);

    padding:clamp(1rem,2.5vw,1.9rem);

}

/*====================================================
MAIN
====================================================*/

main{

    flex:1;

    overflow:auto;

    background:#f7f7f7;

}

.content{

    padding:clamp(1rem,2.5vw,1.9rem);

}

/*====================================================
BODY CONTENT
====================================================*/

.body-content{

    width:100%;
    height:100%;

    background:#fff;

    padding:clamp(1rem,2vw,1.9rem);

}

/*====================================================
FOOTER
====================================================*/

footer{

    flex-shrink:0;

    display:flex;
    align-items:center;

    background:#fff;

    padding:clamp(.9rem,2vw,1.25rem);

    border-top:.0625rem solid #ececec;

}

.logo-container{

    width:63%;

    display:flex;
    justify-content:space-between;
    align-items:center;

}

.logo img{

    height:clamp(2rem,4vw,3.125rem);
    width:auto;

}

.footnote{

    width:37%;

    padding-left:.625rem;

    text-align:right;

    color:#000;

    line-height:1.5;

    font-size:clamp(.45rem,.8vw,.625rem);

}

/*====================================================
COMMON FLEX
====================================================*/

.d-fl-jc-ac{

    display:flex;
    justify-content:center;
    align-items:center;

}

.d-fl-jsb-ac{

    display:flex;
    justify-content:space-between;
    align-items:center;

}

.w-100{

    width:100%;

}

.gp-10{

    gap:clamp(.4rem,1vw,.7rem);

}

.gp-20{

    gap:clamp(.7rem,2vw,1.25rem);

}

/*====================================================
COMMON TEXT
====================================================*/

.ft-14{

    font-size:clamp(.75rem,1.5vw,.875rem);

}

sup,
sub{

    font-size:clamp(.65rem,1.3vw,1rem);

}

sup{

    cursor:pointer;
	font-size: 12px;

}
.foot-btn{

    cursor:pointer;
}

	/*====================================================
HERO
====================================================*/

.hero{
	width: 100%;
    display:flex;
    align-items:center;
    gap:clamp(.75rem,1.8vw,1rem);
    background:#F9F6FC;
    padding:clamp(.7rem,1.8vw,1.2rem) clamp(1rem,2vw,1.4rem);
    border-radius:clamp(.75rem,1.5vw,1rem);
	justify-content: center;
}

/*
.circle{
    width:clamp(3rem,6vw,4.4rem);
    height:clamp(3rem,6vw,4.4rem);
    border-radius:50%;
    background:var(--primary);
    color:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-shrink:0;
    font-size:clamp(.9rem,2vw,1.15rem);
    text-align:center;
}
*/
sub {
	cursor: pointer;
}
	.rectangle{
/*    width:clamp(3rem,6vw,4.4rem);*/
/*    height:clamp(3rem,6vw,4.4rem);*/
		min-width: 150px;
		padding: 15px;
    border-radius:10px;
    background:var(--primary);
    color:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-shrink:0;
    font-size:clamp(.9rem,2vw,1.15rem);
    text-align:center;
}
	
	.rectangle strong{
		font-size: 26px;
	}
	
#counter{
    font-size: 26px;
    font-weight: bold;
    display: inline-block;
    min-width: 2ch;              /* Reserve space for 2 digits */
    text-align: center;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}
.sub-title{
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    margin-bottom:clamp(.8rem,2vw,1.25rem);
}

.hero-text{
    flex:1;
}

.hero-text h2{
    color:#000;
    font-weight:700;
    line-height:1.35;
    font-size:clamp(1rem,2vw,1.15rem);
}

/*====================================================
CARD
====================================================*/

.card{

	width: 100%;
    position:relative;

    background:#fff;

    border-radius:clamp(.75rem,1.6vw,1rem);

    padding:clamp(.9rem,2vw,1rem);

    margin-bottom:clamp(2.6rem,4vw,3.2rem);

    box-shadow:0 .35rem .95rem rgba(0,0,0,.25);

}

.card-container{

    position:relative;

    display:flex;

    gap:clamp(.8rem,2vw,1.2rem);

    align-items:stretch;

}


.svg-holder img{

    width:100%;

    display:block;

}

/*====================================================
PILL TITLE
====================================================*/

.pill-title{

    width:60%;

    margin:0 auto clamp(1rem,2vw,1.4rem);

    padding:clamp(.75rem,1.8vw,1rem);

    border-radius:999px;

    background:linear-gradient(150deg,#0095A2 0%,#A15AAD 50%,#BC1318 100%);

    color:#fff;

    text-align:center;

    font-weight:700;

    font-size:clamp(.95rem,2vw,1.15rem);

}

/*====================================================
BOTTOM LABEL
====================================================*/

.card-bottom{

    position:absolute;

    left:50%;

    bottom:clamp(-1.7rem,3vw,1.45rem);

    transform:translateX(-50%);

    width:60%;

    min-height:clamp(3rem,5vw,3.2rem);

    padding:.6rem 1rem;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    border-radius:999px;

    border:.2rem solid transparent;

    background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(300deg,#0095A2 0%,#A15AAD 50%,#BC1318 100%) border-box;

    font-size:clamp(.95rem,2vw,1.15rem);

    font-weight:700;

}

/*====================================================
SUB HEADER
====================================================*/

.sub-header{

    color:#fff;

    text-align:center;

    padding:clamp(1rem,2.5vw,1.8rem);

/*    margin-bottom:clamp(.8rem,2vw,1rem);*/

    font-size:clamp(1rem,2vw,1.25rem);

}

/*====================================================
ICON
====================================================*/

.icon{

    width:clamp(6rem,13vw,7.5rem);

    height:auto;

    flex-shrink:0;

}

.icon-content{

    width:65%;
    min-width:65%;

    font-size:clamp(.95rem,2vw,0.8rem);

    line-height:1.45;
	text-align: left;

}

/*====================================================
ROWS
====================================================*/

.fr-row-container{

    display:flex;

    gap:clamp(.6rem,1.5vw,.9rem);

    margin-bottom:clamp(.75rem,2vw,1rem);

}

.sd-row-container{

    display:flex;

    gap:clamp(.6rem,1.5vw,.9rem);

    border:.125rem solid #B1BBC1;

    border-radius:.65rem;

}

.fr-row,
.sd-row{

    flex:1;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:clamp(.9rem,2vw,1.25rem);

}

.fr-row{

    border:.125rem solid #B1BBC1;

    border-radius:.65rem;

}

/*====================================================
UTILITY
====================================================*/

.ft-14{

    font-size:clamp(.75rem,1.5vw,.875rem);

}
	.ft-16{

    font-size:16px;);

}

.gp-10{

    gap:clamp(.5rem,1vw,.7rem);

}

.gp-20{

    gap:clamp(.8rem,2vw,1.2rem);

}

/*====================================================
BUTTONS
====================================================*/

.button-container{
    padding:clamp(1rem,2vw,1.8rem) clamp(1.2rem,2.5vw,2rem);
    display:flex;
    justify-content:center;
    align-items:center;
	background: #ffffff;
}

.btn-box{
    width:100%;
    display:flex;
    justify-content:space-around;
    align-items:center;
    gap:clamp(.8rem,2vw,1.5rem);
}

.left-btns{
    display:flex;
    gap:clamp(.6rem,1.8vw,0.9rem);
    flex-wrap:wrap;
}

.button{
    border-radius:999px;
    border:.125rem solid transparent;
    padding:clamp(.55rem,1.5vw,.8rem) clamp(1.2rem,2.8vw,1.9rem);
    font-size:clamp(.9rem,1.8vw,1.1rem);
    cursor:pointer;
	color:#fff;
    border-color:#fff;
    background:linear-gradient(150deg,#0095A2 0,#A15AAD 50%,#BC1318 100%);
	min-width: 140px;
    
}

.button:hover,
.button:active{
	color: #000000;
	border:.125rem solid transparent;
    transition:.25s;
    background:
        linear-gradient(#fff,#fff) padding-box,
        linear-gradient(300deg,#0095A2 0,#A15AAD 50%,#BC1318 100%) border-box;
}

.right-btn button{
    min-width:clamp(6rem,12vw,9.4rem);
}

/*====================================================
POPUP
====================================================*/

.popup{
    position:fixed;
    inset:0;
    display:none;
    justify-content:center;
    align-items:center;
    padding:clamp(1rem,2vw,2rem);
    background:rgba(0,0,0,.75);
    z-index:999;
}

.popup.show{
    display:flex;
    animation:fadeIn .3s ease;
}

.popup-content{

/*    width:min(900px,90%);*/
	 width: min(100vw, calc(100vh * 9 / 16));
    max-height:85vh;

    overflow:auto;

    background:#fff;

    border-radius:clamp(1rem,2vw,1.6rem);

    padding:clamp(1.2rem,2.5vw,2rem);

    position:relative;

    box-shadow:0 25px 55px rgba(0,0,0,.25);

    font-size:clamp(1rem,2vw,1.25rem);

    line-height:1.6;
	   

}

.popup-content h2{

    color:var(--primary);

    margin-bottom:1rem;

    font-size:clamp(1.3rem,2.5vw,1.8rem);

}

.popup-content ul,
.reference-box ol,
ul{

    padding-left:1.25rem;

}

.popup-content li,
.reference-box li{

    margin-bottom:.9rem;

    line-height:1.6;

    font-size:clamp(.9rem,1.8vw,1.1rem);

}

/*====================================================
CLOSE BUTTON
====================================================*/


.close{
    position:absolute;
    top:1rem;
    right:1rem;
    width:clamp(2.4rem,4vw,3.2rem);
    height:clamp(2.4rem,4vw,3.2rem);
    display:flex;
    justify-content:center;
    align-items:center;
    border-radius:50%;
    cursor:pointer;
    color:#fff;
    font-size:clamp(1.3rem,3.6vw,2rem);
    background:linear-gradient(150deg,#0095A2 0,#A15AAD 50%,#BC1318 100%);
}
/*====================================================
COMMON
====================================================*/

.gradient-bg{
    background:linear-gradient(300deg,#0095A2 0,#A15AAD 50%,#BC1318 100%);
}
	.gradient-bg-ani{
    background: linear-gradient(300deg, #0095A2 0%, #A15AAD 50%, #BC1318 100%);
    background-size: 300% 300%;
    animation: gradientFlow 6s ease infinite;
}

@keyframes gradientFlow{
    0%{
        background-position: 0% 50%;
    }
    50%{
        background-position: 100% 50%;
    }
    100%{
        background-position: 0% 50%;
    }
}
	

/*====================================================
ANIMATION
====================================================*/

@keyframes fadeIn{

    from{
        opacity:0;
        transform:scale(.97);
    }

    to{
        opacity:1;
        transform:scale(1);
    }

}

	
	/* ==========================================
   MODERN SCROLLBAR
========================================== */

/* Chrome, Edge, Safari */
::-webkit-scrollbar{
    width:8px;
    height:8px;
}

::-webkit-scrollbar-track{
    background:#f5f5f5;
    border-radius:999px;
}

::-webkit-scrollbar-thumb{
    background:linear-gradient(
        180deg,
        #0095A2 0%,
        #A15AAD 50%,
        #BC1318 100%
    );
    border-radius:999px;
    border:2px solid #f5f5f5;
}

::-webkit-scrollbar-thumb:hover{
    background:linear-gradient(
        180deg,
        #00838F 0%,
        #8E4AA0 50%,
        #A91016 100%
    );
}

/* Firefox */
*{
    scrollbar-width:thin;
    scrollbar-color:#A15AAD #f5f5f5;
}
	/*====================================================
1. LAPTOP / DESKTOP
1200px and above
====================================================*/

@media screen and (min-width:1200px){

    body{
        overflow-x:hidden;
        overflow-y:auto;
        align-items:flex-start;
        padding:2rem 0;
    }

    .device{
        width:1080px;
        min-height:1920px;
        height:auto;
        aspect-ratio:auto;
        overflow:visible;
    }
	.icon-content{
		font-size: 22px;
	}
	.button{
		font-size: 20px;
	}
    main{
        overflow:visible;
    }
	.sub-header{
		font-size: 22px;
	}
	.popup-content{
		width: 900px;
	}
	.fr-row{
		min-height: 172px;
	}
/*
    footer{
        flex-direction:column-reverse;
		
    }
*/

    .footnote,
    .logo-container{
        width:100%;
		font-size: 12px;
		
    }
	.logo-container{
       gap:20px;
		align-items: flex-end;
    }

    .footnote{
        margin:0 0 20px;
    }

}


/*====================================================
2. iPAD
Mini • Air • Pro
744px - 1199px
====================================================*/

@media screen and (min-width:744px) and (max-width:1199px){

    .device{
        width:min(100vw, calc(100vh * 9 / 16));
        aspect-ratio:9/16;
    }
	header{
		font-size: 30px;
	}

    .content,
    .body-content{
        padding:28px;
    }

    .button-container{
        padding:20px;
    }

    .btn-box{
        width:100%;
    }


    .fr-row{
        width:100%;
    }

    .card-bottom{
        width:80%;
        bottom:2vw;
    }

    footer{
        flex-direction:column-reverse;
    }

    .footnote,
    .logo-container{
        width:100%;
    }

    .footnote{
        margin:0 0 20px;
    }
	

}

/*====================================================
iPad Air
Portrait (820 × 1180)
====================================================*/
@media screen
and (min-width:820px)
and (max-width:1023px)
and (orientation:portrait){

    body{
        overflow-y:auto;
    }

    .device{
        width:min(100vw,calc(100vh * 9 / 16));
        aspect-ratio:9/16;
        overflow:visible;
    }
}

/*====================================================
iPad Pro 11"
Portrait (834 × 1194)
====================================================*/
@media screen
and (min-width:834px)
and (max-width:1023px)
and (orientation:portrait){

    body{
        overflow-y:auto;
    }

    .device{
        width:min(100vw,calc(100vh * 9 / 16));
        aspect-ratio:9/16;
        overflow:visible;
    }
}


/*====================================================
iPad Pro 11"
Landscape (1194 × 834)
====================================================*/
@media screen
and (min-width:1194px)
and (max-width:1279px)
and (orientation:landscape){

    body{
        overflow-y:auto;
        overflow-x:hidden;
        align-items:flex-start;
        padding:20px 0;
    }

    .device{
        width:834px;
        min-height:1194px;
        height:auto;
        aspect-ratio:auto;
        overflow:visible;
    }

    main{
        overflow:visible;
    }
}
/*====================================================
iPad Air
Landscape (1180 × 820)
====================================================*/
@media screen
and (min-width:1180px)
and (max-width:1199px)
and (orientation:landscape){

    body{
        overflow-y:auto;
        overflow-x:hidden;
        align-items:flex-start;
        padding:20px 0;
    }

    .device{
        width:820px;
        min-height:1180px;
        height:auto;
        aspect-ratio:auto;
        overflow:visible;
    }

    main{
        overflow:visible;
    }
}

/*====================================================
iPad Mini
Portrait (768 × 1024)
====================================================*/
@media screen
and (min-width:768px)
and (max-width:819px)
and (orientation:portrait){

    body{
        overflow-y:auto;
        overflow-x:hidden;
    }

    .device{
        width:min(100vw,calc(100vh * 9 / 16));
        aspect-ratio:9/16;
        overflow:visible;
    }
	.button{
		min-width: 116px;
	}
	 .fr-row-container,
    .sd-row-container{
        flex-direction:column;
    }

}


/*====================================================
iPad Mini
Landscape (1024 × 768)
====================================================*/
@media screen
and (min-width:1024px)
and (max-width:1099px)
and (orientation:landscape){

    body{
        overflow-y:auto;
        overflow-x:hidden;
        align-items:flex-start;
        padding:20px 0;
    }

    .device{
        width:768px;
        min-height:1024px;
        height:auto;
        aspect-ratio:auto;
        overflow:visible;
    }

    main{
        overflow:visible;
    }
}
/*====================================================
3. MOBILE
480px - 743px
====================================================*/

@media screen and (min-width:480px) and (max-width:743px){

    body{
        background:#fff;
    }

    .device{
        width:100vw;
        height:100vh;
        aspect-ratio:auto;
        box-shadow:none;
    }

    .button-container{
        padding:16px;
    }

    .btn-box{
        width:100%;
        flex-direction:column;
        gap:16px;
    }

    .left-btns{
        width:100%;
        justify-content:center;
    }

    .right-btn,
    .right-btn button{
        width:100%;
    }

    .popup-content{
        width:95%;
        max-height:90vh;
    }

}


/*====================================================
4. SMALL MOBILE
0px - 479px
====================================================*/

@media screen and (max-width:479px){

    body{
        background:#fff;
    }

    .device{
        width:100vw;
        height:100vh;
        aspect-ratio:auto;
        box-shadow:none;
    }

    header{
        padding:20px;
        font-size:24px;
    }

    .content,
    .body-content{
        padding:18px;
    }

    footer{
        padding:14px;
        flex-direction:column-reverse;
    }

    .button-container{
        padding:16px;
    }

    .button{
        min-width:140px;
    }

    .btn-box{
        width:100%;
        flex-direction:column;
        gap:16px;
    }

    .left-btns{
        width:100%;
        justify-content:center;
    }

    .right-btn,
    .right-btn button{
        width:100%;
    }

    .popup-content{
        width:95%;
        max-height:90vh;
    }

    .card-bottom{
        width:80%;
        bottom:2vw;
    }

    .fr-row-container,
    .sd-row-container{
        flex-direction:column;
    }

    .fr-row{
        width:100%;
    }

    .footnote,
    .logo-container{
        width:100%;
    }

    .footnote{
        margin:0 0 20px;
    }

}