/*


 Table Of Contents


 1.) Media Query for Tablet


 2.) Media Query for mobile


 ===============================================*/








/*


}

@media only screen and (min-width: 768px) and (max-width: 1200px) {
	.order-page .order-after {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
		gap: 30px;
		align-items: center;
		padding: 40px 35px;
		box-sizing: border-box;
	}
	.order-page .order-after__copy,
	.order-page .order-after__image { width: auto; min-width: 0; }
	.order-page .order-after__image img { width: 100%; height: 320px; object-fit: cover; }
}

@media only screen and (min-width: 768px) and (max-width: 1200px) {
	.order-page .order-after { gap: 30px; align-items: center; padding: 40px 35px; box-sizing: border-box; display: grid !important; grid-template-columns: minmax(0px, 1fr) minmax(0px, 1fr) !important; }
	.order-page .order-after__copy, .order-page .order-after__image { width: auto; min-width: 0px; }
	.order-page .order-after__image img { width: 100%; height: 320px; object-fit: cover; }
}

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





#footer{ padding: 25px 0; }


#footer .nav{ float: right; }


#footer .pay-by{ width: 100%; text-align: center; margin-top: 20px; }


#footer .pay-by li{ float: none; display: inline-block; }


.select-row{ height: 40px !important; }


.input{ height: 40px !important; }





}





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





.row .tool-tip{ width: 100%; max-width: 400px; }


.slidewrap{ margin-top: 100px; }


	


}





@media only screen and (min-width : 768px) and (max-width : 1024px) {





#header .logo{ margin-top: 7px; }


#header .logo img{ width: 50px; }


#header nav ul{ padding:20px 0;  }


#header nav li{ margin-left: 17px; }

#header nav li a{
	font-size: 16px;
}

.btn{ padding: 15px 20px 10px; }


.slider-content ul.slider-list li strong{ font-size: 50px; }





.process-info li{ padding: 10px; }


.process-info .box .info h4{ font-size: 16px; line-height: 20px; margin-top: 15px; }


.process-info .box .info p{ font-size: 14px; line-height: 18px; }





.order-contet ul li{ font-size: 40px; }





#footer{ padding: 25px 0; }


#footer .nav{ float: right; }


#footer .pay-by{ width: 100%; text-align: center; margin-top: 20px; }


#footer .pay-by li{ float: none; display: inline-block; }





/*order now page*/


.order-list li{ float: left; width: 50%; padding-left: 20px; margin: 10px 0;  }


.order-list li .para-coll{ min-height: 180px; max-height: 180px; overflow: auto; }





/*information Form Content*/


.row .tool-tip{ position: static; width: 100%; overflow: hidden; margin-top: 15px; float: left; }


/*.row small{ position: static; }*/





/*How it works*/


#owl-example .owl-stage { background: url(../images/scroll-slider-img.png) no-repeat 0 100px/100% auto; }


.slidewrap{ margin: 0; }


#owl-example .owl-item{  height: auto; }


#owl-example .owl-dots{ display: none !important; }


#owl-example .owl-nav{ display: block; width: 100%; text-align: center; bottom: -50px; }


#owl-example .owl-nav > div{ display: inline-block; }


#owl-example .owl-nav .pagination-wrap{ display: inline-block; margin: 0 5px; line-height: 48px; }


.forth-slide .slide-item{ margin: 50px 0 0 0; }





}








/*


 2.) Media Query for mobile


 ===============================*/


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





h2, .h2{ font-size: 26px; margin-bottom: 15px; padding-bottom: 15px; }


h3, .h3{ font-size: 26px; margin-bottom: 15px; padding-bottom: 15px; }


p{ font-size: 16px; line-height: 22px; }


.btn{ min-width: 150px; font-size: 16px; padding:10px 10px 6px; }





#header nav li a.btn{ padding: 5px 10px ; border-radius: 0; }





#header .page{ padding: 0; }


#header .logo{ width: 50px; margin: 10px 0 10px 15px; }


#header nav{ display: none; width: 100%; }


#header nav ul{ padding: 0; }


#header nav ul li{ float: none; display: block; margin: 0; border-top:1px solid #dddddd;  }


#header nav ul li:first-child{ }


#header nav ul li a{ display: block; padding: 5px 15px; font-size: 16px; }


#header nav ul li.active a,


#header nav ul li a:hover{ background: #ff0000 ; color: #fff; }


#header nav ul li a:before{ display: none; }


.menu-btn{ display: inline-block; float:right; margin: 26px 15px 0 0;  }





.slider-content ul.slider-list li strong{ font-size: 20px; letter-spacing: 2px; }


.slider-content ul.slider-list li a{ margin-top: 10px; padding: 5px 10px 3px; }


.slider-content .bx-pager{ display: none; }


.slider-content .bx-controls-direction .bx-prev{ width: 20px; height: 20px; font-size: 0; background-size:6px 12px;  }


.slider-content .bx-controls-direction .bx-next{ width: 20px; height: 20px; font-size: 0; background-size:6px 12px; }


.slider-content .bx-controls-direction .bx-prev:hover,


.slider-content .bx-controls-direction .bx-next:hover{ background-size:6px 12px; }


.slider-content .bx-controls-direction{ margin-top: -10px; }





.info-content{ padding: 30px 0; }





.process-info ul{ padding: 30px 0; margin-top: 5px; }


.process-info ul li{ padding: 0; width: 100%; margin: 10px 0; }


.process-info .box .info h4{ line-height: 1.5; margin-top: 15px; }


.process-info .box .info p{ line-height: 22px; }





.order-contet{ padding: 30px 0; }


.order-contet .btn{ margin-top: 20px; }


.order-contet ul li{ font-size: 20px; padding: 0 15px; }


.order-contet ul li:after{ width: 10px; height: 10px; bottom: 3px; }





.whyus-content .inner-content{ padding: 30px 0; }


.whyus-content p{ margin-bottom: 20px; }


.whyus-content ul{ width: 100%; }


.whyus-content ul li{ margin-bottom: 10px; }





#footer{ padding: 20px 15px; }


#footer .page{ padding: 0; }


#footer .copyright-row{ width: 100%; text-align: center; font-size: 13px;}


#footer .nav{ width: 100%; text-align: center; margin-left: 0; }


#footer .nav li{ float: none; display: inline-block; padding: 0 4px 0 8px; }


#footer .pay-by{ display: none; }

#footer .nav a{font-size: 13px;}



/*order now page*/


.order-list{ margin: 20px 0 30px; }


.order-list ul{ margin-left: 0; }


.order-list li{ float: left; width: 100%; padding-left: 0; margin: 10px 0;  }


/*.order-list li .para-coll{ min-height: 180px; max-height: 180px; overflow: auto; }*/

.order-list li .para-coll,
.app-lang-fr .order-list li .para-coll{ min-height: auto; max-height: none; overflow: auto; }

.order-list h4{ padding: 10px; }


.terms h3{ margin-bottom: 15px; }





/*order-payment-page*/


.order-payment-content{ margin: 20px 0 50px; }


.grey-box{ padding: 15px; }


.pay-type{ margin: 25px 0; }


.pay-type li{ padding: 5px 12px; }





/*information Form Content*/


.row-name > div{ width: 100%; margin-top: 5px; }


.dob-row{ margin-left: -10px; }


.dob-row > div{ padding-left: 10px; }


.other-persone{ padding: 10px; }


.row-card .coll-1,


.row-card .coll-2,


.row-card .coll-3,


.row-card .coll-4,


.row-card .or{ margin-top: 5px }


.row small{ position:static; line-height: 1.2; }


.contact-row > div.coll-2{ padding-left: 15px; }


.row .tool-tip{ position: static; width: 100%; overflow: hidden; margin-top: 15px; float: left; padding: 10px; }





/*FAQ content*/


.faq-content h4{ font-size: 14px; line-height: 20px; padding: 10px 30px 6px 10px; }


.faq-content h4 i{ right: 10px; top: 12px; }


.faq-content .data{ font-size: 14px; line-height: 20px; padding: 10px 15px;  }





.select-row{ height: 40px !important; }


.input{ height: 40px !important; }





/*Thank you page content*/


.thankyou-box{ width: 100%; max-width: 770px; border: 1px solid #dddddd; background: #f1f1f1; text-align: center; padding: 20px ; margin: 25px auto; }





/*How it work*/


.scroll-slider{ padding: 25px 0; }


#owl-example .owl-item{ height:auto; padding: 0 15px; }


#owl-example .owl-item, #scroll-wrapper{ height:auto !important; }


#owl-example .owl-stage{ background:none; padding-bottom: 20px; }


.slide-item,.app-lang-fr .slide-item, .app-lang-fr .forth-slide .slide-item { width: auto; margin: 0; float: none; }


.slidewrap{ min-height: 100px; margin-top: 0; }


#owl-example .owl-dots{ display: none !important; }


#owl-example .owl-nav{ display: block; position: static; text-align: center; width: 100%; }


.slide-item h3, .app-lang-fr .slide-item h3{ padding: 0; font-size: 30px; text-align: center; }


.slide-item p, .app-lang-fr .slide-item p{ padding: 0; text-align: center; }


#owl-example .owl-nav .pagination-wrap{ display:none ; line-height: 48px; padding: 0 5px; }


.forth-slide .slide-item{ margin: 0; }

.order-list .special-box .btn{margin-top: 0 !important;}


@media only screen and (max-width : 767px){
	.order-page-hero,
	.order-page-hero__overlay { min-height: 230px; }
	.order-page-hero h1 { font-size: 30px; }
	.order-page .order-list,
	.order-comparison,
	.order-legal,
	.order-after { margin-right: -15px; margin-left: -15px; }
	.order-page .order-comparison { margin-right: 0; margin-left: 0; }
	.order-page .order-list { padding-right: 15px; padding-bottom: 80px !important; padding-left: 15px; }
	.order-page .order-list > ul { display: block; width: 100%; min-width: 0; }
	.order-page .order-list > ul > li,
	.order-page .order-list > ul > li:last-child { display: flex; float: none; width: 100%; max-width: 650px; min-width: 0; margin-right: auto; margin-left: auto; padding-right: 0; padding-left: 0; }
	.order-page .order-list li .box { min-height: 0; }
	.order-page .order-list li .inner-box,
	.order-page .order-list li .para-coll { min-width: 0; overflow-wrap: anywhere; }
	.order-page .order-list li .para-coll { min-height: 0; }
	.order-comparison,
	.order-legal,
	.order-after { padding-right: 30px; padding-left: 30px; }
	.order-comparison__grid,
	.order-legal,
	.order-after { grid-template-columns: 1fr; }
	.order-legal__image,
	.order-after__image { order: 0; }
	.order-legal__image img,
	.order-after__image img { height: 300px; }
}

@media only screen and (min-width: 768px) and (max-width: 1200px) {
	.order-page .order-after { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 30px; align-items: center; padding: 40px 35px; box-sizing: border-box; }
	.order-page .order-after__copy,
	.order-page .order-after__image { width: auto; min-width: 0; }
	.order-page .order-after__image img { width: 100%; height: 320px; object-fit: cover; }
}

@media only screen and (max-width : 600px){
	.order-page-hero h1 { font-size: 30px; }
	.order-page-intro { padding: 35px 0; }
	.order-page-intro p,
	.order-comparison__grid p,
	.order-legal p,
	.order-after p { font-size: 16px; line-height: 24px; }
	.order-page .order-list h4 { font-size: 22px; line-height: 28px; }
	.order-comparison h2,
	.order-legal h2,
	.order-after h2 { font-size: 29px; line-height: 36px; }
	.order-comparison__grid h3 { font-size: 21px; line-height: 27px; }
	.order-comparison,
	.order-legal,
	.order-after { padding-top: 44px; padding-bottom: 44px; }
}





}







/* Give the shared footer a readable layout on phones. */
@media only screen and (max-width: 767px) {
    #footer { padding: 32px 20px; }
    #footer > .page { display: flex; flex-direction: column; align-items: center; gap: 18px; width: 100%; padding: 0; box-sizing: border-box; }
    #footer .page::before, #footer .page::after { display: none; }
    #footer .phoneno { display: block; float: none; }
    #footer .phoneno img { display: block; max-width: 120px; height: auto; }
    #footer .copyright-row { display: block; float: none; width: 100%; margin: 0; padding: 0; font-size: 13px; line-height: 1.6; text-align: center; }
    #footer .nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; float: none; width: 100%; max-width: 360px; margin: 0; padding: 0; }
    #footer .nav::before, #footer .nav::after { display: none; }
    #footer .nav li { display: block; float: none; margin: 0; padding: 0; border: 0; }
    #footer .nav a { display: flex; align-items: center; justify-content: flex-start; min-height: 44px; padding: 0 12px; text-align: left; font-size: 14px; line-height: 1.4; }
    #footer .pay-by { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; float: none; width: 100%; margin: 4px 0 0; padding: 0; }
    #footer .pay-by li { display: flex; align-items: center; justify-content: center; float: none; margin: 0; padding: 0; }
    #footer .pay-by img { display: block; width: auto; max-width: 55px; height: auto; max-height: 28px; }
}


/* Compact mobile header with a button-controlled navigation dropdown. */
@media only screen and (max-width: 767px) {
    #header > .page { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; width: 100%; padding: 12px 20px 16px; box-sizing: border-box; }
    #header .page::before, #header .page::after { display: none; }
    #header .header-top { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; padding: 0 0 10px; border-bottom: 1px solid #eee; }
    #header .add-detail { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; font-size: 12px; line-height: 1.5; text-align: center; }
    #header .header-top .header-right { margin: 0; max-width: 100%; }
    #header .header-top .header-right .user { margin: 0; }
    #header .header-top .header-right .user ul { white-space: normal; overflow-wrap: anywhere; }
    #header .header-top .header-right .user ul li a { font-size: 14px; }
    #header .logo, #header.fix .logo { float: none; width: 70px; margin: 0; }
    #header .logo img { display: block; width: 100%; height: auto; }
    #header .menu-btn { display: block; float: none; width: 44px; height: 44px; margin: 0; padding: 0; border: 1px solid #eee; border-radius: 6px; background: #fff; }
    #header .menu-btn span { top: 20px; left: 10px; right: 10px; }
    #header .menu-btn span::before { top: -7px; }
    #header .menu-btn span::after { bottom: -7px; }
    #header .menu-btn:focus-visible { outline: 2px solid #ed3939; outline-offset: 3px; }
    #header nav { display: none; grid-column: 1 / -1; float: none; width: 100%; padding: 8px 0 0; border-top: 1px solid #eee; }
    #header nav.is-open { display: block; }
    #header nav ul, #header.fix nav ul { display: block; margin: 0; padding: 0; }
    #header nav ul li { display: block; float: none; margin: 0; border: 0; }
    #header nav ul li a { display: block; padding: 12px; border-radius: 5px; font-size: 16px; line-height: 1.4; }
    #header nav ul li a::before { display: none; }
    #header nav ul li a.btn { margin-top: 8px; padding: 12px; border-radius: 5px; text-align: center; }
}


@media only screen and (max-width: 767px) {
    .order-page .order-comparison { width: 100%; margin-right: 0; margin-left: 0; padding-right: 12px; padding-left: 12px; box-sizing: border-box; }
    .order-page .order-comparison__grid { grid-template-columns: minmax(0, 1fr); gap: 24px; width: 100%; }
    .order-page .order-comparison__grid > * { min-width: 0; overflow-wrap: break-word; }
    .order-page .order-comparison__grid h3 { font-size: 18px; line-height: 24px; }
    .order-page .order-comparison__grid p { font-size: 15px; line-height: 23px; }
}


@media only screen and (max-width: 767px) {
    .order-page .order-after { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; width: 100%; margin: 0; padding: 28px 16px; box-sizing: border-box; }
    .order-page .order-after__copy { display: contents; }
    .order-page .order-after__copy > h2 { order: 0; margin-bottom: 0; }
    .order-page .order-after__copy > p,
    .order-page .order-after__copy > .btn { order: 2; }
    .order-page .order-after__image { order: 1; width: auto; min-width: 0; }
    .order-page .order-after h2 { font-size: 22px; line-height: 28px; overflow-wrap: break-word; }
    .order-page .order-after p { font-size: 15px; line-height: 23px; overflow-wrap: break-word; }
    .order-page .order-after__image img { width: 100%; height: auto; border-radius: 8px; }
    .order-page .order-after .btn { display: block; justify-self: center; width: 100%; min-width: 0; max-width: 360px; margin: 12px auto 0; padding: 16px 20px; box-sizing: border-box; white-space: normal; text-align: center; line-height: 1.5; border-radius: 7px; }
}

@media only screen and (max-width: 767px) {
    .order-page-intro p { font-size: 16px; line-height: 25px; }
}


@media only screen and (max-width: 767px) {
    .howto-hero__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .howto-hero__copy { display: contents; }
    .howto-hero__copy > .eyebrow { order: 0; margin: 0; }
    .howto-hero h1 { order: 1; margin: 0; font-size: 30px; line-height: 1.2; }
    .howto-hero__image { order: 2; width: 100%; min-width: 0; margin: 0; }
    .howto-hero__image img { display: block; width: 100%; height: auto; }
    .howto-hero__copy > p { order: 3; margin: 0; font-size: 16px; line-height: 25px; }
    .howto-hero .howto-cta-row { order: 4; display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; margin: 8px 0 0; }
    .howto-hero .howto-cta-row .btn { display: block; width: 100%; max-width: 360px; min-width: 0; margin: 0; padding: 16px 20px; box-sizing: border-box; white-space: normal; text-align: center; line-height: 1.5; }
}


@media only screen and (max-width: 767px) {
    .howto-learn__heading h2,
    .howto-audience__copy h2 { font-size: 26px; line-height: 33px; }
    .howto-learn__heading p { text-align: left; font-size: 16px; line-height: 25px; }
    .howto-learn__heading p br { display: none; }
}


@media only screen and (max-width: 767px) {
    .howto-benefits > .page { width: 100%; margin: 0 auto; padding-right: 20px; padding-left: 20px; box-sizing: border-box; }
    .howto-benefits > .page > h2 { font-size: 26px; line-height: 33px; }
    .howto-benefits .howto-steps { grid-template-columns: minmax(0, 1fr); width: 100%; margin: 0; padding: 0; box-sizing: border-box; }
    .howto-benefits .howto-step { flex-direction: column; align-items: flex-start; gap: 16px; padding: 22px; min-width: 0; }
    .howto-benefits .howto-step > div:not(.howto-step-number) { width: 100%; min-width: 0; }
    .howto-benefits .howto-step-number { flex: 0 0 54px; }
    .howto-benefits .howto-steps > li { display: block; width: 100%; min-width: 0; }
    .howto-benefits .howto-steps > li > .howto-step { width: 100%; max-width: none; }
    .howto-benefits .howto-step .btn { display: block; width: 100%; min-width: 0; box-sizing: border-box; white-space: normal; text-align: center; }
}


@media only screen and (max-width: 767px) {
    .howto-audience__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .howto-audience__copy { display: contents; }
    .howto-audience__copy > h2 { order: 0; margin: 0; }
    .howto-audience__image { order: 1; width: 100%; min-width: 0; margin: 0; }
    .howto-audience__image img { display: block; width: 100%; height: auto; }
    .howto-audience__copy > p,
    .howto-audience__copy > ul,
    .howto-audience__copy > .btn { order: 2; }
    .howto-audience__copy > p { margin: 0; }
}


/* Shared mobile content gutter. Keep carousel/banner spacing independent. */
@media only screen and (max-width: 767px) {
    :root { --mobile-content-gutter: 10px; }

    .content .page:not(.order-page),
    .howto-benefits > .page,
    #header > .page,
    #footer {
        padding-left: var(--mobile-content-gutter);
        padding-right: var(--mobile-content-gutter);
        box-sizing: border-box;
    }

    /* These sections already have a padded .page child. */
    .home-about, .home-benefits, .home-why, .home-faq-preview,
    .howto-hero, .howto-learn, .howto-audience, .howto-section,
    .howto-final-cta {
        padding-left: 0;
        padding-right: 0;
    }

    /* Order sections own their gutter instead of doubling the .page gutter. */
    .content .page.order-page { padding-left: 0; padding-right: 0; box-sizing: border-box; }
    .order-page .order-page-intro,
    .order-page .order-list,
    .order-page .order-comparison,
    .order-page .order-legal,
    .order-page .order-after,
    .faq-page-intro,
    .faq-page-list {
        padding-left: var(--mobile-content-gutter);
        padding-right: var(--mobile-content-gutter);
        box-sizing: border-box;
    }
    .order-page .order-list > ul > li { padding-left: 0; padding-right: 0; }
    .order-page .order-list h4 { padding-left: 10px; padding-right: 10px; }
    .order-page .order-list li .inner-box,
    .howto-benefits .howto-step { padding-left: 10px; padding-right: 10px; }

    /* Carousel gutters remain part of their existing slide geometry. */
    .content .scroll-slider .page { padding-left: 15px; padding-right: 15px; }
}


/* Matching, compact page banners on phones. */
@media only screen and (max-width: 767px) {
    .order-page-hero,
    .faq-page-hero { min-height: 0; }
    .order-page-hero .order-page-hero__overlay,
    .faq-page-hero .faq-page-hero__overlay {
        min-height: 150px;
        height: auto;
        padding: 20px 10px;
        box-sizing: border-box;
    }
    .order-page-hero .order-page-hero__overlay h1,
    .faq-page-hero .faq-page-hero__overlay h1 {
        margin: 0;
        font-size: 28px;
        line-height: 1.15;
    }
}


@media only screen and (max-width: 767px) {
    .home-hero .home-slide-copy { width: calc(100% - 20px); top: 46%; }
    .home-hero .home-slide-copy > span { margin-bottom: 12px; padding: 8px 24px; }
    .home-hero .home-slide-copy h2 { margin-bottom: 10px; font-size: 24px; line-height: 1.15; }
    .home-hero .home-slide-copy p { margin-bottom: 8px; }
    .home-hero .home-slide-copy .btn { margin-top: 0; }
    .home-hero .bx-pager { bottom: 12px; }
}


@media only screen and (max-width: 767px) {
    /* Override the desktop order-list padding shorthand marked !important. */
    .order-page .order-list {
        padding-left: 10px !important;
        padding-right: 10px !important;
        box-sizing: border-box;
    }
}


/* Shared mobile inner-page section heading size (How to Order reference). */
@media only screen and (max-width: 767px) {
    :root { --mobile-section-title-size: 26px; --mobile-section-title-line-height: 33px; }
    .order-page .order-comparison h2,
    .order-page .order-legal h2,
    .order-page .order-after h2,
    .faq-page .faq-page-intro h2,
    .faq-page-cta h2,
    .howto-learn .howto-learn__heading h2,
    .howto-audience .howto-audience__copy h2,
    .howto-section h2,
    .howto-benefits > .page > h2,
    .howto-final-cta h2 {
        font-size: var(--mobile-section-title-size);
        line-height: var(--mobile-section-title-line-height);
    }
}


/* Readable, near-full-width dialogs on phones. */
@media only screen and (max-width: 767px) {
    .popup .popup-content {
        width: calc(100% - 20px) !important;
        max-width: none;
        min-width: 0;
        box-sizing: border-box;
        padding: 48px 20px 24px;
        max-height: calc(100vh - 40px);
        max-height: calc(100dvh - 40px);
        overflow-y: auto;
        overflow-wrap: break-word;
    }
    .popup .popup-content h5 { width: auto; margin: 0; font-size: 18px; line-height: 1.5; }
    .popup .popup-content img { max-width: 100%; height: auto; }
    .modal .modal-dialog { width: calc(100% - 20px); max-width: none; margin: 20px auto; box-sizing: border-box; }
    .modal .modal-content { width: 100%; box-sizing: border-box; }
    .swal-modal { width: calc(100% - 20px); max-width: none; margin: 20px auto; box-sizing: border-box; }
    .fancybox-slide--html { padding: 20px 10px; }
    .fancybox-slide--html .fancybox-content { width: 100%; max-width: 100%; box-sizing: border-box; padding: 40px 20px 24px; }
}


/* Page-specific popup contents must also fit their mobile dialog. */
@media only screen and (max-width: 767px) {
    .popup .popup-content label,
    .popup .popup-content .btn,
    .popup .popup-content .select_pacgage {
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        white-space: normal;
        overflow-wrap: break-word;
    }
    .popup .popup-content h4 { font-size: 18px; line-height: 26px; }
    #correct-popup .popup-content > ul { display: flex; flex-direction: column; gap: 12px; margin: 20px 0 0; padding: 0; }
    #correct-popup .popup-content > ul > li { width: 100%; margin: 0; padding: 0; }
    #correct-popup .popup-content > ul > li > a { max-width: none; width: 100%; }
    .modal .modal-content,
    .swal-modal { max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); overflow-y: auto; overflow-wrap: break-word; }
}


@media only screen and (max-width: 767px) {
    .msg-panel-1 { left: 10px; right: 10px; bottom: 10px; bottom: max(10px, env(safe-area-inset-bottom)); z-index: 110; border: 1px solid #ed3939; border-radius: 6px; box-shadow: 0 2px 12px rgba(0,0,0,.15); }
    .msg-panel-1 .body-panel { width: auto; padding: 14px 48px 14px 14px; border: 0; font-size: 14px; line-height: 20px; }
    .msg-panel-1 .btn-panel { left: auto; right: 0; top: 0; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: #ed3939; font-size: 24px; }
    .msg-panel-1.hide { display: none; transform: none; }
    body:has(.msg-panel-1:not(.hide)) { padding-bottom: 90px; }
    #orderHistory { scroll-margin-top: 20px; }
    .order-list-table:has(.mobile-order-cards) { overflow-x: visible !important; }
    .my-order-content .mobile-order-cards { display: block; width: 100%; border: 0; white-space: normal; }
    .mobile-order-cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .mobile-order-cards tbody { display: block; width: 100%; }
    .my-order-content .mobile-order-cards tbody > tr { display: block; margin-bottom: 16px; padding: 8px 10px; border: 1px solid #ddd; border-radius: 8px; background: #fff; }
    .my-order-content .mobile-order-cards tbody > tr > td { display: block; width: auto; max-width: 100%; padding: 8px 0; border: 0; border-bottom: 1px solid #eee; white-space: normal; overflow-wrap: anywhere; text-align: left !important; }
    .mobile-order-cards td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 4px; font-weight: bold; color: #5b6b83; }
    .my-order-content .mobile-order-cards td:last-child { border-bottom: 0; }
    .mobile-order-cards .upload-download a { display: inline-block; min-width: 44px; min-height: 44px; padding: 10px; box-sizing: border-box; }
}


@media only screen and (max-width: 767px) {
    #contact { float: none; margin: 0 auto; }
    #contact .row-btn { display: flex; justify-content: center; }
    #contact .row-btn::before, #contact .row-btn::after { display: none; }
    #contact .row-btn .btn { float: none; margin-right: auto; margin-left: auto; text-align: center; }
    #contact .contact-recaptcha-frame { width: 100%; margin-bottom: 23px; }
    #contact .contact-recaptcha-frame .g-recaptcha { display: block; margin: 0; }
    .contact-map:not(:has(iframe, canvas, .gm-style)) { display: none; }
}


/* Center the contact layout on tablets as well as phones. */
@media only screen and (max-width: 1024px) {
    .contact-page > h3 { text-align: center; }
    .contact-page .information-content { box-sizing: border-box; }
    .contact-page .information-content #contact { float: none; width: 100%; max-width: 570px; margin: 0 auto; box-sizing: border-box; }
    .contact-page #contact .row-btn { display: flex; justify-content: center; }
    .contact-page #contact .row-btn::before,
    .contact-page #contact .row-btn::after { display: none; }
    .contact-page #contact .row-btn .btn { float: none; margin-right: auto; margin-left: auto; text-align: center; }
    .contact-page #contact .contact-recaptcha-frame { width: 100%; margin-bottom: 23px; }
    .contact-page #contact .contact-recaptcha-frame .g-recaptcha { margin-top: 0; margin-bottom: 0; }
    .contact-page .contact-address { float: none; width: 100%; max-width: 570px; margin: 0 auto; box-sizing: border-box; }
    .contact-map:not(:has(iframe, canvas, .gm-style)) { display: none; }
}


@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .howto-hero { padding-left: 0; padding-right: 0; }
    .howto-hero > .page { width: 100%; margin: 0 auto; padding-left: 10px; padding-right: 10px; box-sizing: border-box; }
    .howto-hero .howto-hero__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .howto-hero .howto-hero__copy { display: contents; }
    .howto-hero__copy > .eyebrow { order: 0; margin: 0; }
    .howto-hero h1 { order: 1; margin: 0; }
    .howto-hero__image { order: 2; width: 100%; min-width: 0; margin: 0; }
    .howto-hero__image img { display: block; width: 100%; max-width: none; height: auto; }
    .howto-hero__copy > p { order: 3; margin: 0; max-width: none; }
    .howto-hero .howto-cta-row { order: 4; justify-content: center; width: 100%; margin: 0; }
    .howto-hero .howto-cta-row .btn { text-align: center; }
}


@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .howto-audience__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .howto-audience__copy { display: contents; }
    .howto-audience__copy > h2 { order: 0; margin: 0; }
    .howto-audience__image { order: 1; width: 100%; min-width: 0; margin: 0; }
    .howto-audience__image img { display: block; width: 100%; height: auto; }
    .howto-audience__copy > p,
    .howto-audience__copy > ul,
    .howto-audience__copy > .btn { order: 2; }
    .howto-audience__copy > p { margin: 0; }
}


@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .howto-benefits > .page { width: 100%; padding-left: 15px; padding-right: 15px; box-sizing: border-box; }
    .howto-benefits .howto-steps { width: 100%; margin: 0; padding: 0; box-sizing: border-box; }
    .howto-benefits .howto-steps > li { min-width: 0; }
}


@media only screen and (min-width: 768px) {
    .order-comparison__grid > :last-child:nth-child(odd) {
        grid-column: 1 / -1;
        justify-self: center;
        width: calc((100% - 75px) / 2);
        min-width: 0;
    }
}


@media only screen and (max-width: 767px) {
    .order-page .order-after__body { order: 2; min-width: 0; }
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .order-page .order-after { grid-template-rows: auto auto auto auto; gap: 20px 30px; align-items: start; }
    .order-page .order-after__copy { display: contents; }
    .order-page .order-after h2 { grid-column: 1 / -1; grid-row: 1; margin: 0; text-align: center; }
    .order-page .order-after h2::after { display: none; }
    .order-page .order-after::before { content: ''; grid-column: 1 / -1; grid-row: 2; justify-self: center; width: 66px; height: 5px; border-radius: 3px; background: #ed3939; }
    .order-page .order-after__body { grid-column: 1; grid-row: 3; min-width: 0; }
    .order-page .order-after__image { grid-column: 2; grid-row: 3; align-self: center; width: 100%; min-width: 0; }
    .order-page .order-after__copy > .btn { grid-column: 1 / -1; grid-row: 4; justify-self: center; width: 100%; max-width: 420px; margin: 0; padding: 16px 20px; box-sizing: border-box; text-align: center; white-space: normal; }
}


/* Explicit footer rows prevent payment logos from floating alongside links. */
#footer .footer-identity { display: inline; }
@media only screen and (max-width: 1200px) {
    #footer > .page { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; justify-items: center; gap: 18px 24px; width: 100%; box-sizing: border-box; }
    #footer .page::before, #footer .page::after,
    #footer .nav::before, #footer .nav::after { display: none; }
    #footer .footer-identity { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 14px; width: 100%; min-width: 0; text-align: center; }
    #footer .footer-identity .phoneno,
    #footer .footer-identity .copyright-row { float: none; width: auto; margin: 0; padding: 0; }
    #footer .nav { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 10px; float: none; width: 100%; max-width: none; min-width: 0; margin: 0; padding: 0; text-align: center; }
    #footer .nav li { display: block; float: none; margin: 0; padding: 0; border: 0; }
    #footer .nav a { display: flex; justify-content: center; align-items: center; min-height: 44px; padding: 0 4px; }
    #footer .pay-by { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px; float: none; width: 100%; margin: 0; padding: 0; }
    #footer .pay-by li { display: flex; float: none; margin: 0; padding: 0; }
    #footer .pay-by img { display: block; width: auto; max-width: 55px; height: auto; max-height: 28px; }
}
@media only screen and (min-width: 1000px) and (max-width: 1200px) {
    #footer > .page { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    #footer .footer-identity { grid-column: 1; grid-row: 1; }
    #footer .nav { grid-column: 2; grid-row: 1; }
    #footer .pay-by { grid-row: 2; }
}