@charset "utf-8";
/* Smart Christmas Tree Lights landing (SELL-1637). The PDP's css/style.css as delivered (akshay-mohunta.com,
   Smart_Christmas_Light-Tree), with these changes only: the design's 7 font files replaced by the 3 latin subsets
   below, no red top strip or timer (the <promo-banner> replaces them), image paths under images/landing/, and the
   stray "]" in the 1021px block removed (it swallowed the .reason_bx_hdng rule after it). The CPK port rules (POD
   CTA colours, logo, buttons, menu and sticky states driven by js/landing.js, reserved promo strip height, contrast)
   are at the end. SELL-1861 (2026-11-05): the "Light Up the Magic" cards (.glow_*) are gone, a banner video replaces
   them (.modes_video at the end). */

/*==============Fonts (2026-10-20)==============
  Latin subsets from Google Fonts, self-hosted and preloaded in base-landing.html: Inter as one variable file for
  400 to 800 (the design used 400, 500, 600, bold and 800), PT Serif Bold for the headings, and PT Serif Regular cut
  down to the 4 glyphs of the comparison's "VS" (2 KB instead of 33 KB). "Inter Fallback" is Arial sized to Inter's
  metrics, so the text keeps its line breaks if Inter is late. */
@font-face{ font-family: 'Inter'; src: url('../fonts/inter-latin-var.woff2') format('woff2'); font-weight: 400 800; font-style: normal; font-display: swap;}
@font-face{ font-family: 'PT Serif'; src: url('../fonts/ptserif-latin-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap;}
@font-face{ font-family: 'PT Serif'; src: url('../fonts/ptserif-vs-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0053, U+0056, U+0073, U+0076;}
@font-face{ font-family: 'Inter Fallback'; src: local('Arial'); ascent-override: 90.44%; descent-override: 22.52%; line-gap-override: 0%; size-adjust: 107.12%;}

body {
	top:0;
	bottom:0;
	left:0;
	right:0;
	margin:auto;
	padding:0;
	background:#fff;
	text-align:center;
	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
	font-smoothing: antialiased;
	font-family: 'Inter';
	font-weight:normal;
	letter-spacing:-0.3px;
	}
div, ul, h1, h2, h3, h4, h5, li, p, img, form, input, textarea {margin:0;padding:0;}
header, section, footer, aside, nav, main, article, figure {display: block;}
table, tr, td {border:0;}
a{outline: none; color:#333; text-decoration:none;}
a:hover {outline: none; text-decoration:none;}
img {border:none; height:auto; max-width:100%;}
li {list-style:none;}
*{box-sizing:border-box;}
.clearall{
	clear:both;
	font-size:1px;
	line-height:1px;
	height:1px;
	}
	
/*-----------------------
MAIN CSS START
------------------------*/
.container{
	width:1170px;
	margin:0 auto;
	padding:0;
	position:relative;
	}
	
/*-----------------------
CSS FOR NAV BAR
------------------------*/	
.top-fix-bar{
	float: left;
	width: 100%;
	margin-bottom: 70px;
	}
.nav-sec{
	float:left;
	width:100%;
	height:70px;
	
	margin-top:-70px;
	top:70px;
	position:relative;
	background:#fff;
	-webkit-box-shadow: 0 3px 4px 0 rgba(0,0,0,0.1);
    box-shadow: 0 3px 4px 0 rgba(0,0,0,0.1);	
	}
.fixed-nav .nav-sec{
	position: fixed;
	z-index: 10;
	transition: margin .3s ease-out;
	-webkit-transition: margin .3s ease-out;
	margin-top:0;
	top:0;			
	}
	
.logo{
	float:left;
	width:167px;
	margin-top:20px;
	}				
ul.menu-list{
	display:inline-block;
	vertical-align:top;
	margin:27px 0 0 0;
	}
ul.menu-list li{
	float: left;
	position:relative;
	border-right:1px solid #363636;
	}
ul.menu-list li:last-child{ border:none;}	
ul.menu-list li a{
	float:left;
    color: #363636;
    font-size: 16px;
    line-height: 16px;
	padding:0 18px;
	}	
ul.menu-list li a:hover{ color:#000;}
ul.menu-list li a.active{ color:#000;}
a.nav-btn{
	float: right;
    background: #ffce0b;
    color: #000;
    font-size: 16px;
    text-align: center;
    width: 155px;
    height: 40px;
    letter-spacing: 0.5px;
    line-height: 40px;
    border-radius: 35px;
    font-weight: bold;
    margin-top: 14px;
	}
	
/*=====Menu=====*/
.mob-mnu-ic{
	cursor: pointer;
    position: absolute;
    right: 0;
    top: 24px;
    z-index: 16;
    height: 30px;
	}
.mob-mnu-ic button{
	outline: none;
    -webkit-appearance: none;
	background: none;
	padding:0;
    cursor: pointer;
	border: none;
	}
.mob-mnu-ic span{
	color:#000;
	display:inline-block;
	vertical-align:top;
	font-size:13px;
	margin-top:4px;
	margin-right:5px;
	}
.bar1, .bar2, .bar3{
	width: 30px;
	height: 3px;

	background-color: #000;
	transition: 0.4s;
	-webkit-border-radius: 2px 2px 2px 2px;
	border-radius: 2px 2px 2px 2px;
	}
.bar2{margin: 6px 0;}

.dl-active .bar1 {
	-webkit-transform: rotate(-45deg) translate(-6px, 5px);
	transform: rotate(-45deg) translate(-6px, 5px);
	background:#000;
	}
.dl-active .bar2 {opacity: 0;}
.dl-active .bar3 {
	-webkit-transform: rotate(45deg) translate(-7px, -7px);
	transform: rotate(45deg) translate(-7px, -7px);
	background:#000;
	}	
.mobilemenu{
	left:0;
	position:fixed;
	top:125px;
	background:rgba(255,255,255,1);
	z-index:10;
	right:0;
	bottom:0;
	overflow:scroll;
	display:none;
	border-top:1px solid #ddd;
	}
.mobimenu-top{ top:70px;}	
.mobilemenu li{
	float:left;
	width:100%;
	text-align:left;
	border-bottom:1px solid #ddd;
	}
.mobilemenu li a{
	float:left;
	width:100%;
	padding:17px 20px;
	font-size:16px;
	color:#000;
	}	
.mobilemenu li a:hover{color:#000;}	

/*-----------------------
		BANNER
------------------------*/	
.banner_section{
    background: url(../images/landing/banner-bg.webp)#fffbf7 no-repeat center top;
	background-size:cover;
    float: left;
    width: 100%;
    overflow: hidden;
	padding:55px 0 60px;
	}
.banner_inner_wrap{
    margin: 0 auto 0;
    width: 100%;
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
	}		
.banner_left{
	width:48%;
	}	
.hero_prod{
	margin:0 auto 0;
	display:block;
	width:553px;
	}	
		
.banner_content{
	width:51%;
	text-align:left;
	position:relative;
	z-index:2;
	}
.banner_ratting{
	font-size:15px;
	line-height:15px;
	color:#000;
	}
.banner_ratting img{
	display:inline-block;
	vertical-align:middle;
	width:89px;
	margin:-5px 10px 0 0;
	}		
.banner_heading{
    font-size: 46px;
    line-height: 56px;
	color:#950203;
	font-family: 'PT Serif';
	font-weight: bold;
	margin-top:15px;
	}
.banner_heading span{ color:#950203;}	
.banner_text{
    font-size: 17px;
    line-height: 27px;
	color:#000;
	margin-top:12px;
	}

ul.bnr_list{
	width: 100%;
	display:inline-block;
	vertical-align:top;
    margin-top: 10px;
	}	
ul.bnr_list li{
	display:inline-block;
	vertical-align:top;
	background:url(../images/landing/bnr-list-tike.webp) no-repeat left 0;
	background-size:22px;
	width:100%;
	font-size: 19px;
    line-height: 25px;
	color:#000;
	font-weight:bold;
	text-align:left;
	padding-left:35px;
	margin-top:12px;
	}	

	
/*Button*/
.button_box{
    display:inline-block;
	vertical-align:top;
	width:100%;
	margin-top:50px;
	}
.banner_section .button_box{ margin-top:35px;}	
.button_width{
	display: inline-block;
    vertical-align: top;
    width: 100%;
    max-width: 420px;
    text-align: center;
	position: relative;
    z-index: 1;
	}			
.common_button{
    width: 100%;
    display: flex;
	display: -webkit-flex;
    align-items: center;
    justify-content: center;
    height: 65px;
    border-radius: 40px;
    color: #000;
    font-size: 24px;
    font-weight: 800;
	background: #ffce0b;
	}
.common_button img{
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    margin-left: 17px;
	}	

.button__top{
	display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
	width:100%;
	margin-bottom:10px;
	}
.button_stock{
  	font-size:14px;
  	line-height:14px;
  	color:#000;
	font-weight:500;
  	}
.button_stock span{
	color:#f10002;
	font-weight:bold;
	text-transform: uppercase;
	}	
.button_stock span.yellow{ color:#ffe07a;}	
.btn-clock-img{
    display: inline-block;
    vertical-align: middle;
    margin: -1px 6px 0 0;
    width: 16px;
	}	
.common_button_btm{
    width: 100%;
    margin: 10px auto 0;
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
    justify-content:center;
    align-items: center;
	}
.common_button_btm li{
  	font-size:14px;
  	line-height:14px;
  	color:#000;
	font-weight:500;
	
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
	padding:0 12px;
	}
.common_button_btm li img{
	display:inline-block;
	vertical-align:middle;
	width:15px;
	margin:0 5px 0 0;
	}
.common_button_btm li.white_text img{ filter: brightness(0) invert(1);}	
	
/*====featured_sec====*/
.featured_sec{
    float: left;
    width: 100%;
    padding: 20px 0;
    background: #fff;
    border-bottom: 1px solid #eaeaea;
	}	
.featured_text{
	font-size:15px;
	line-height:15px;
	color:#000;
	}
ul.featured_logoList{
	display: flex;
	display: -webkit-flex;
    flex-wrap: nowrap;
    -webkit-box-align: center;
    align-items: center;
    justify-content: center;
	column-gap:50px;
	margin-top:20px;
	}
ul.featured_logoList li{
	display: flex;
    align-items: center;
    justify-content: center;
	position:relative;
	}
ul.featured_logoList li img{
	display:inline-block;
	vertical-align:middle;
	width:auto;
	height:30px;
	max-width: none;
	filter: grayscale(100%) opacity(60%);
	}

/*-----------------------
Section 1
------------------------*/
.section_1{
    background: #fff;
	float:left;
	width:100%;
	padding:60px 0 70px;
	}
.common_sub_heading{
	font-size:16px;
	line-height:20px;
	color:#000;
	text-transform:uppercase;
	letter-spacing:1px;
	margin-bottom:15px;
	}		
.common_heading{
	font-size: 50px;
    line-height: 56px;
    color: #000;
    font-family: 'PT Serif';
    font-weight: bold;
	}
.common_heading span{ color:#950203;}			
.common_text{	
    font-size: 17px;
    line-height: 27px;
    color: #000;
    margin-top: 20px;
	}
.white_text{ color:#fff !important;}

/*-----------------------
Section 2
------------------------*/
.section_2{
    background: #fffcf7;
	float:left;
	width:100%;
	padding:60px 0 70px;
	position:relative;
	overflow:hidden;
	}
.reason_block{
	display:-webkit-flex;
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	
	row-gap:45px;
	width:100%;
	max-width:1035px;
	margin:50px auto 0;
	}
.reason_box{
	display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
	align-items: center;

    width: 100%;
    background: #fff;
    padding: 33px 32px 40px;
	border:1px solid #e6c1bf;
    border-radius: 24px;
    box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);
	position: relative;
    z-index: 2;
	}
.box_reverse{flex-direction: row-reverse;}
.reason_bx_left{
	width:46%;
	}
.reason-box-img{
	display:block;
	margin:0 auto;
	border-radius:15px;
	}
.reason_bx_right{
	width:50%;
	text-align:left;
	}
.reason_bx_hdng{
	font-size:30px;
	line-height:38px;
	color:#000;
    font-weight: bold;
	}
.reason_bx_txt{
    font-size: 17px;
    line-height: 26px;
    color: #000;
    margin-top: 17px;
	}
ul.reason_bx_list{
	display:inline-block;
	vertical-align:top;
	width:100%;
	margin-top:15px;
	}
ul.reason_bx_list li{
	display:inline-block;
	vertical-align:top;
	width:100%;
	font-size:19px;
	line-height:27px;
	color:#000;
	font-weight:bold;
	position:relative;
	padding-left:20px;
	margin-top:12px;
	}
ul.reason_bx_list li:before{
	content:'';
	position:absolute;
	top:10px;
	left:0;
	width:5px;
	height:5px;
	border-radius:50%;
	background:#970809;
	}
.s2-bg-img1{
	position:absolute;
	top:0;
	right:0;
	width:446px;
	}	
.s2-bg-img2{
	position:absolute;
	bottom:-40px;
	left:0;
	width:406px;
	}		

/*-----------------------
Section 3
------------------------*/
.section_3{
    background: #fff;
	float:left;
	width:100%;
	padding:60px 0 20px;
	position:relative;
	overflow:hidden;
	}
.steps_wrap{
	margin:55px auto 0;
	width:100%;
	display: -webkit-flex;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	}
.steps_box{
	width:30.5%;
	text-align:center;
	position:relative;
	z-index:1;
	}	
.steps_box:before{
	content:'';
	position:absolute;
	top:9px;
	left:180px;
	width:418px;
	height:67px;
	}	
.steps_box:nth-child(1):before{
	background:url(../images/landing/step-line1.webp) no-repeat;
	}	
.steps_box:nth-child(2):before{
	background:url(../images/landing/step-line2.webp) no-repeat;
	top:17px;
	}			
.steps{
	margin:0 auto 0;
	display:block;
	width:94px;
	position:relative;
	z-index:2;
	}
.step-bx-imgs{
	display:inline-block;
	vertical-align:top;
	border:2px solid #950203;
	border-radius:12px;
	box-sizing: content-box;
	margin-top:34px;
	}
.steps_bx_heading{
	font-size: 24px;
    line-height: 28px;
    color: #000;
    font-weight: bold;
	margin-top:20px;
	}
.steps_bx_text{
    font-size: 17px;
    line-height: 26px;
    color: #000;
    padding: 0 25px;
    margin-top: 10px;
	}	
	
.s3-bg-img1{
	position:absolute;
	top:-220px;
	left:0;
	width:310px;
	}	
.s3-bg-img2{
	position:absolute;
	top:-195px;
	right:0;
	width:442px;
	}

/*-----------------------
Section 4
------------------------*/
.section_4{
    background: #fff;
	float:left;
	width:100%;
	padding:60px 0 70px;
	}
.lightshow_box{
	width:100%;
	margin:0 auto 0;
	background:#950203;
	border-radius:14px;
	padding:45px;
	display: -webkit-flex;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	flex-direction: row-reverse;
	}
.lightshow_box_content{
	width:50%;
	text-align:left;
	}
ul.lightshow_bx_list{
	display:inline-block;
	vertical-align:top;
	width:100%;
	margin-top:8px;
	}
ul.lightshow_bx_list li{
	display:inline-block;
	vertical-align:top;
	width:100%;
	font-size:18px;
	line-height:26px;
	color:#fff;
	font-weight:600;
	position:relative;
	padding-left:20px;
	margin-top:12px;
	}
ul.lightshow_bx_list li:before{
	content:'';
	position:absolute;
	top:10px;
	left:0;
	width:6px;
	height:6px;
	border-radius:50%;
	background:#fff;
	}
.lightshow_box_content .button_box{ margin-top:40px;}

.lightshow_video_wrap{
	width: 38.3%;
	}
.lightshow_video_box{
	display:inline-block;
	vertical-align:top;
	width:100%;
	cursor:pointer;
	overflow:hidden;
	position:relative;
	}
.lightshow_video_box video{
	margin:0 auto 0;
	display:block;
	border-radius:10px;
	}	
.lightshow-vdo-img{
	margin:0 auto 0;
	display:block;
	border-radius:10px;
	}
.play-btn{
	position:absolute;
	top:50%;
	left:50%;
	width:75px;
	margin:-37px 0 0 -37px;
	}

/*-----------------------
Section 5
------------------------*/
.section_5{
	background:#fffbf7 url(../images/landing/s5-bg.webp) no-repeat center top;
	background-size:cover;
	float:left;
	width:100%;
	padding:60px 0 90px;
	}
.s5_decoration_blk{
	display:-webkit-flex;
	display:flex;
	flex-wrap: wrap;
	justify-content:space-between;
	width:100%;
	margin:100px auto 70px;
	position:relative;
	}
.s5_decoration_left{
	display:-webkit-flex;
	display:flex;
	flex-wrap: wrap;
	justify-content:space-between;
	flex-direction: column;
    row-gap: 100px;
	width: 39.65%;
	position: relative;
    z-index: 1;
	}
.s5_decoration_inr{
	display:-webkit-flex;
	display:flex;
	align-items: flex-start;
	width:100%;
	}
.s5_decoration_inr_cont{
	text-align:left;
	position:relative;
	}
.number_count{
	width:50px;
	height:50px;
	border-radius:50%;
	background:#950203;
	
	display:-webkit-flex;
	display:flex;
	flex-wrap: wrap;
	justify-content:center;
	align-items:center;
	
	font-size:31px;
	line-height:31px;
	color:#fff;
	font-weight:bold;
	font-family:'PT Serif';
	text-align:center;
	position: relative;
    z-index: 1;
	}
.number_line{
	position: absolute;
	top:25px;
	left:0;
	width:100%;
	border-top:1px solid #950203;
	}
.number_line:before{
	content:'';
	position:absolute;
	top:-5px;
	right:0;
	width:8px;
	height:8px;
	background:#950203;
	border-radius:50%;
	}
.s5_decoration_head{
	display:inline-block;
	vertical-align:top;
	width:100%;
	
	font-size:24px;
	line-height:30px;
	color:#000;
	font-weight:bold;
	margin-top:12px;
	}
.s5_decoration_text{
	font-size:17px;
	line-height:25px;
	color:#000;
	margin-top:12px;
	}
.s5_decoration_inr_img{
	flex-shrink: 0;
	}
.s5_decoration_img{
	display:block;
	margin:0 auto;
	width:194px;
	border-radius:50%;
	border:2px solid #efe1d3;
	box-sizing: content-box;
	}

.s5_decoration_right .s5_decoration_inr{ flex-direction: row-reverse;}
.s5_decoration_right .number_line:before{ display:none;}
.s5_decoration_right .s5_decoration_inr_cont{ text-align: right;}
.s5_decoration_right .number_count{ float: right;}

.s5_decoration_right .number_line:after{
	content:'';
	position:absolute;
	top:-5px;
	left:0;
	width:8px;
	height:8px;
	background:#950203;
	border-radius:50%;
	}
.box_3{
    padding-right: 105px;
	}
.box_4{
    padding-left:90px;
	}
.s5_christmas_tree {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 412px;
    transform: translate(-50%, -50%);	
	}
	
/*-----------------------
Section 6
------------------------*/
.section_6{
	background:#fff;
	float:left;
	width:100%;
	padding:60px 0 70px;
	}
.tree_light_wrap{
	display:-webkit-flex;
	display:flex;
	flex-wrap: wrap;
	justify-content:space-between;
	align-items:center;
	width:100%;
	margin:50px auto 0;
	}
.tree_light_content{
	width:23%;
	}
.tree_light_cont_hdng{
	font-size:24px;
	line-height:32px;
	color:#000;
	font-weight:bold;
	}
ul.tree_light_list{
	display:inline-block;
	vertical-align:top;
	width:100%;
	margin-top:15px;
	}
ul.tree_light_list li{
	display: flex;
    display: -webkit-flex;
    align-items: center;
    column-gap: 12px;
	
	width:100%;
	border-bottom:1px solid #d7d7d7;
	padding-bottom:16px;
	margin-top:16px;
	}	
ul.tree_light_list li:last-child{
	border-bottom:none;
	padding-bottom:0;
	}
ul.tree_light_list li img{
	width:45px;
	}
.tree_light_list_cont{
	text-align:left;
	}
.tree_light_list_cont h3{
	font-size:19px;
	line-height:24px;
	color:#000;
	font-weight:bold;
	}
.tree_light_list_cont p{
	font-size:17px;
	line-height:20px;
	color:#000;
	margin-top:5px;
	}
.tree_light_mid{
	width:50%;
	}
.tree_light_compare_bx{
	display:-webkit-flex;
	display:flex;
	justify-content:space-between;
	width:100%;
	position:relative;
	}
.vs_text{
	position: absolute;
    top: 50%;
    left: 50%;
	
    width: 60px;
    height: 60px;
    background: #fff;
    border-radius: 50%;
	
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    align-items: center;
	
    font-size: 25px;
    line-height: 25px;
    color: #000;
    font-family: 'PT Serif';
    font-weight: 400;
    z-index: 1;
    transform: translate(-50%, -50%);
	}
.tree_light_comp_imgbx{
	width:49%;
	position:relative;
	}
.tree_light_compare_img{
	display:block;
	margin:0 auto;
	width:285px;
	border-radius:20px;
	}
.tree_light_compare_icn{
	position:absolute;
	top: 15px;
    right: 15px;
	width:37px;
	}

/*-----------------------
Section 7
------------------------*/
.section_7{
	background:#fffbf7;
	background-size:cover;
	float:left;
	width:100%;
	padding:60px 0 70px;
	}
.review_text{
	font-size:18px;
	line-height:22px;
	color:#000;
	font-weight:bold;
	margin-top:25px;
	}
.review_text span{
	font-weight:normal;
	font-size:16px;
	}	
.revw_star{
	display:inline-block;
	vertical-align:middle;
	width:90px;
	margin:-2px 8px 0;
	}
	
.testi_sec{
	width:100%;
	margin-top:15px;
	display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
	}
.testi_row{
	width:23%;
	}
.testi_col{
	float:left;
	width:100%;
	background:#fff;
	border-radius:8px;
	overflow:hidden;
	box-shadow:0 0 2px 1px rgba(0,0,0,0.1);
	-webkit-box-shadow:0 0 2px 1px rgba(0,0,0,0.1);
	margin-top:30px;
	}
.testi_col_imgbx{
	display:inline-block;
	vertical-align:top;
	width:100%;
	}
.testi_col_imgbx img{
	display:block;
	margin:0 auto;
	width:269px; 
	}
.testi_col_contbx{
	display:inline-block;
	vertical-align:top;
	width:100%;
	padding:22px 14px 25px;
	text-align:left;
	}
.testi_hdng{
    font-size: 19px;
    line-height: 25px;
	color:#000;
	font-weight:bold;
	}
.testi_star{
	width:88px;
	margin-top:12px;
	}
.testi_para{
    font-size: 16px;
    line-height: 22px;
	color: #000;
	margin-top:12px;
	}

.testi_verify{
	float:left;
	width:100%;
	margin:30px auto 0;
    text-align: left;
	}
.testi_verify_name{
	font-size:16px;
	line-height:20px;
	color:#000;
	font-weight:600;
	}
.testi_verify_text{
    display: inline-block;
    vertical-align: middle;
	font-size:12px;
	line-height:13px;
	color:#00a075;
	font-weight:400;
	margin-top:-2px;
	}
.testi_verify_text img{
	display:inline-block;
	vertical-align:middle;
	width:12px;
	margin:-2px 5px 0;
	}
	
/*-----------------------
Section 8
------------------------*/
.section_8{
	background:#fff;
	float:left;
	width:100%;
	padding:60px 0 70px;
	}
.s8_inner{
	display:-webkit-flex;
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	width:100%;
	margin:40px auto 0;
	}
.s8_inr_imgbx{
	width:51%;
	}
.s8_christmas_tree{
	display:block;
	margin:0 auto;
	width:594px;
	}
.s8_inr_cont{
	width:47%;
	text-align:left;
	}
.faq-container{
	display:inline-block;
	vertical-align:top;
	width:100%;
	}
.up-slide-dwn{
	width: 100%;
    float: left;
    margin-top:15px;
    padding: 0 25px;
	background:#fff;
	border-radius:8px;
	border:1px solid #f8ece1;
	}
.accordion{
	text-align:left;
	background:url(../images/landing/close-btn.webp) no-repeat right center;
	background-size:13px !important;
	padding:22px 24px 22px 0;
	font-size:18px;
	line-height:24px;
	font-weight:600;
	color:#000;
	cursor:pointer;
	position:relative;
	}
.acdn-heading.accordion-open{
	background:url(../images/landing/open-btn.webp) no-repeat right center;
	}
.acdn-content{
	text-align:left;
	padding:0 5px 10px 0;
	margin-top:-8px;
	}
.acdn-para {
    font-size: 16px;
    line-height: 24px;
    color: #000;
    margin-bottom:10px;
	}

/*-----------------------
CSS FOR FOOTER
------------------------*/
.footer{
	float:left;
    width:100%;
	background:#fbf8f5;
    padding:50px 0;
	}
.footer_logo{
	display:block;
	margin:0 auto 10px;
	width:167px;
	}
.ftr-txt{
    float:left;
	width:100%;
	font-size:16px;
	line-height:22px;
	color:#000;
	margin-top:12px;
	}	
.footer .ftr-txt a{
    padding:0 15px;
    color:#000;
	}	

/*=========Media Query=========*/
.show-mob, .show-tab {display: none;}
.fl{ float:left;}
.fr{ float:right;}	

@media only screen and (max-width:1200px){
.container{width:1004px;}

.banner_heading{ font-size: 40px; line-height: 50px;}
ul.bnr_list li{ font-size:18px; line-height:24px;}

ul.featured_logoList{ column-gap:20px;}
ul.featured_logoList li img{ height:25px;}

.common_heading{ font-size: 48px; line-height: 52px; position:relative; z-index:1;}

.s2-bg-img1{ width:256px;}
.s2-bg-img2{ left:-50px;}
.s3-bg-img1{ top:-170px; width:210px;}
.s3-bg-img2{ width:330px;}

.steps_box:before{ width:328px;}
.lightshow_box_content{ width: 57%;}
.lightshow_box{ align-items: flex-start;}

.s5_decoration_blk{ margin: 60px auto 0;}
.s5_decoration_img{ width: 160px;}
.s5_decoration_head{ font-size: 22px; line-height: 28px;}
.s5_christmas_tree{ width: 375px;}
.box_3{ padding-right: 80px;}
.box_4{ padding-left: 75px;}
		
.tree_light_wrap{ align-items: flex-end;}
.tree_light_content{ width: 24%;}
.tree_light_list_cont h3{ font-size: 17px; line-height:23px;}
.tree_light_list_cont p{ font-size: 16px; line-height: 20px; margin-top: 3px;}
ul.tree_light_list li{ column-gap: 7px;}
ul.tree_light_list li img{ width: 38px;}

.revw_box_content{ padding: 20px 15px 30px;}	
.testi_hdng{ font-size: 18px; line-height: 24px;}
	
}

@media only screen and (max-width:1021px){
.container{width:750px;}
.show-desk {display: none;}
.show-tab {display: block;}

ul.menu-list{ display:none;}
a.nav-btn{ margin-right:45px;}

.banner_left{ width: 44%;}
.banner_content{ width: 53%;}
.banner_heading{ font-size: 38px; line-height: 48px;}
ul.bnr_list li{ font-size: 17px; line-height: 23px; background-size: 20px; padding-left: 30px; background-position-y: 1px;}

.section_1{ padding:50px 0 60px;}
.common_heading{ font-size: 40px; line-height: 46px;}

.section_2{ padding:50px 0 60px;}
.s2-bg-img1{ top:-36px;}
.reason_bx_hdng{ font-size: 26px; line-height: 32px;}
ul.reason_bx_list li{ font-size: 18px; line-height: 26px;}

.section_3{ padding:50px 0 10px;}
.s3-bg-img1{ left:-50px;}
.steps{ width:80px;}
.steps_bx_heading{ font-size: 22px; line-height: 26px; margin-top: 16px;}
.steps_bx_text{ padding: 0 6px;}
.steps_box:before{ width: 272px; left: 100px;}
.steps_box:nth-child(2):before{ top:2px;}

.section_4{ padding:50px 0 60px;}
.lightshow_box{ border-radius: 10px; padding: 35px 30px 40px;}
ul.lightshow_bx_list li{ font-size:17px; line-height:25px;}
.play-btn{ width: 64px; margin: -32px 0 0 -32px;}

.section_5{ padding: 50px 0 60px;}
.s5_decoration_blk{ margin: 45px auto 0;}
.s5_christmas_tree{ width: 270px;}
.s5_decoration_left{ row-gap: 30px;}
.number_count{ width: 40px; height: 40px; font-size: 22px; line-height: 22px;}
.s5_decoration_head{ font-size: 20px; line-height: 25px;}
.s5_decoration_img{ width: 110px;}
.s5_decoration_text{ font-size: 16px; line-height: 22px; margin-top: 10px;}
.number_line{ top: 20px;}
.box_3{ padding-right: 35px;}
.box_4{ padding-left: 35px;}

.section_6{ padding: 50px 0 60px;}
.tree_light_wrap{ max-width: 590px; margin: 25px auto 0; row-gap: 20px; align-items: flex-start;}
.tree_light_content{ width: 45%;}
.tree_light_mid{ width: 100%;}
.vs_text{ width: 45px; height: 45px; font-size: 20px; line-height: 20px;}
.tree_light_compare_img{ width: 285px; border-radius: 12px;}
.tree_light_compare_icn{ top: 18px; right: 18px; width: 30px;}
.tree_light_cont_hdng{ font-size: 22px; line-height: 28px;}
ul.tree_light_list li{ align-items: flex-start; column-gap: 14px; padding-bottom: 14px; margin-top: 14px;}
	
.section_7{ padding: 50px 0 60px;}
.testi_col{ margin-top: 20px;}
.testi_row{ width: 24%;}
.testi_col_imgbx img{ object-fit: cover; height: 175px;}
.testi_col_contbx{ padding: 18px 10px 20px;}
.testi_hdng{ font-size: 17px; line-height: 23px;}
.testi_star{ width: 70px;}
.testi_para{ font-size: 15px; line-height: 20px;}
.testi_verify_name{ font-size: 15px; line-height: 18px;}
		
.section_8{ padding: 50px 0 60px;}
.s8_inr_imgbx{ width: 42%;}
.s8_inr_cont{ width: 57%;}
.accordion{ font-size: 17px; line-height: 23px;}
.up-slide-dwn{ padding: 0 20px;}
	
.footer{ padding: 45px 0;}
.footer_logo{ margin: 0 auto 20px; width: 130px;}
}

@media only screen and (max-width:767px){
.container{width:100%; padding:0 15px; max-width:600px; box-sizing:border-box;}
.show-mob{display:block;}
.hide-mob{display:none;}







	


.top-fix-bar{ margin-bottom:50px;}
.nav-sec{ height:50px; margin-top: -50px; top: 50px;}
.logo{width: 110px; margin-top:15px;}
.mob-mnu-ic{ top:15px; right:15px;}
.mobilemenu{ top:100px;}
.mobimenu-top{ top: 50px;}
.mobilemenu li a{ font-size:15px;}

.banner_section{ background:#fffbf7; padding:24px 0 30px;}
.banner_left{ width:100%; margin-top:15px;}
.banner_content{ width:100%; margin-top:0; text-align:center;}
.banner_ratting img{ width: 65px; margin: -5px 7px 0 0;}
.banner_ratting{ font-size: 13px; line-height: 13px;}
.banner_heading{ font-size: 28px; line-height: 36px; margin-top: 10px;}
.banner_text{ font-size: 16px; line-height: 23px; margin-top: 10px;}
ul.bnr_list{ margin-top:8px;}
ul.bnr_list li{ font-size: 16px; line-height: 22px; background-size: 16px; padding-left: 25px; background-position-y: 2px;}
	
.button_box{ margin-top:30px;}
.banner_section .button_box{ margin-top:25px;}
.button__top{ margin-bottom:8px;}
.button_stock{ font-size: 12px; line-height: 12px;}
.btn-clock-img{ margin: -2px 6px 0 0; width: 14px;}
.common_button_btm{ margin: 8px auto 0;}
.common_button_btm li{ font-size: 12px; line-height: 12px;}
.common_button_btm li img{ width: 13px; margin: -1px 5px 0 0;}	
.common_button{ height: 56px; font-size: 20px;}
.common_button img{ width: 16px; margin-left: 14px;}

.featured_sec{ padding:20px 0 15px;}
.featured_text{ font-size:13px; line-height:13px;}
ul.featured_logoList li{ padding:0;}
.brand_strip_scroller{
	width: 100%;
	overflow: hidden;
	display: flex;
	flex-wrap: nowrap;
	margin-top:15px;
	}
ul.scroll_brand_list{
	display: flex;
	flex-wrap: nowrap;
	-webkit-box-align: center;
	align-items: center;
	-webkit-box-pack: center;
	justify-content: center;
	flex-shrink: 0;
	animation: marquee-horizontal 15s linear infinite;
	}
ul.scroll_brand_list li {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 15px;
	position: relative;
	}
ul.scroll_brand_list li img {
	max-width:none;
	filter: grayscale(100%) opacity(60%);
	height: 25px;
	width: auto;
	}

@keyframes marquee-horizontal {
from {transform: translateX(0);}
to {transform: translateX(-100%);}
}

.section_1{ padding: 25px 0 35px;}
.common_sub_heading{ font-size: 14px; line-height: 18px; letter-spacing: 0.5px; margin-bottom: 10px;}
.common_heading{ font-size: 30px; line-height: 36px;}
.common_text{ font-size: 16px; line-height: 24px; margin-top: 15px;}

.section_2{ padding: 25px 0 35px;}
.s2-bg-img1, .s2-bg-img2{ display:none;}
.section_2 .common_text{ padding:0 10px;}
.reason_block{ row-gap:25px; margin: 25px auto 0;}
.reason_box{ padding: 12px 12px 20px; border-radius: 15px; max-width: 460px; margin: 0 auto 0;}
.reason_bx_left{ width: 100%;}
.reason_bx_right{ width: 100%; padding:0 10px; margin-top:17px;}
.reason_bx_hdng{ font-size: 22px; line-height: 28px;}
.reason_bx_txt{font-size: 16px; line-height: 23px;  margin-top: 10px;}
ul.reason_bx_list{ margin-top:12px;}
ul.reason_bx_list li{ font-size: 17px; line-height: 25px; padding-left: 16px; margin-top: 6px;}

.section_3{ padding: 25px 0 10px;}
.steps_wrap{ margin: 30px auto 0; row-gap:78px; max-width: 400px;  padding: 0 30px;}
.steps_box{ width:100%;}
.steps_box:before{ display:none;}
.steps_box:after{  content: ''; position: absolute; left: 50%; bottom: -67px; border-left: 2px dotted #d62c37; height: 50px;}
.steps_box:last-child:after{ display:none;}	
.steps{ width: 70px;}
.step-bx-imgs{ margin-top:12px;}
.steps_bx_heading{ font-size: 22px; line-height:28px;}
.steps_bx_text{ font-size: 16px; line-height: 24px; padding: 0 10px; margin-top: 10px;}
.s3-bg-img1, .s3-bg-img2{ display:none;}

.section_4{ padding: 25px 0 35px;}
.lightshow_box{ padding: 25px 20px 30px;}
.lightshow_box_content{ width:100%;}
ul.lightshow_bx_list li{ font-size: 16px; line-height: 23px;}
.lightshow_video_wrap{ width:100%;}
.lightshow_video_box{ margin-top:17px;}
.play-btn{ width: 54px; margin: -27px 0 0 -27px;}

.section_5{ background:#fffbf7; padding: 25px 0 35px;}
.s5_decoration_blk{ margin:20px auto 0; flex-direction: column; row-gap: 0;}
.s5_christmas_tree{ position: static; transform: none; margin: 0 auto; width: 363px;}
.s5_decoration_left{ row-gap: 0; width: 100%;}
.s5_decoration_inr{ border-bottom: 1px solid #950203; padding-bottom: 22px; margin-top: 22px;}
.number_count{ width: 35px; height: 35px; font-size: 20px; line-height: 20px;}
.s5_decoration_right .s5_decoration_inr{ column-gap: 0; flex-direction: row;}
.box_3{ padding-right: 0;}
.box_4{ padding-left: 0; border-bottom:none; padding-bottom:0;}
.number_line{ display:none;}
.s5_decoration_img{ width: 135px;}
.s5_decoration_right .number_count{ float: left;}
.s5_decoration_right .s5_decoration_inr_cont{ text-align: left;}

.section_6{ padding: 25px 0 35px;}
.tree_light_wrap{ margin: 25px auto 0; row-gap: 15px; align-items: flex-start;}
.tree_light_content{ width: 49%;}
.tree_light_mid{ width: 100%;}
.vs_text{ width: 40px; height: 40px; font-size: 17px; line-height: 17px;}
.tree_light_compare_img{ width: 285px; border-radius: 12px;}
.tree_light_compare_icn{ width: 22px;}
.tree_light_cont_hdng{ font-size: 20px; line-height: 26px;}
ul.tree_light_list{ margin-top:5px;}
ul.tree_light_list li img{ width: 25px;}
ul.tree_light_list li{ align-items: flex-start; column-gap: 5px; padding-bottom: 12px; margin-top: 12px;}
.tree_light_list_cont h3{ font-size: 13px; line-height: 17px;}
.tree_light_list_cont p{ font-size: 12px; line-height: 17px; margin-top: 2px;}

.section_7{ padding: 25px 0 35px;}
.review_text{ font-size: 17px; line-height: 20px; margin-top: 15px;}
.review_text span{ font-size: 16px;}
.revw_star{ width: 80px;}
.testi_sec{ max-width: 560px; margin: 10px auto 0;}
.testi_row{ width:49%;}
.testi_col{ margin-top: 15px;}
.testi_verify{ margin: 20px auto 0;}
.testi_col_contbx{ padding: 12px 8px 15px;}
.testi_col_imgbx img{ height: 155px;}
.testi_hdng{ font-size: 15px; line-height: 20px;}
.testi_para{ font-size: 14px; line-height: 20px; margin-top: 10px;}
.testi_verify_name{ font-size: 14px; line-height: 16px;}
.testi_verify_text { font-size: 12px; line-height: 12px;}
.testi_verify_text img{ width: 11px; margin: -2px 3px 0;}
	
.section_8{ padding: 25px 0 35px;}
.s8_inner{ margin: 10px auto 0;}
.s8_inr_cont{ width: 100%;}
.up-slide-dwn{ margin-top: 12px; padding: 0 12px;}
.accordion{ font-size: 16px; line-height: 22px; background-size: 10px !important; padding: 16px 18px 16px 0;}
.acdn-content{ padding: 0 0 6px 0; margin-top: -4px;}
.acdn-para{ font-size: 15px; line-height: 21px;}

.footer{ padding: 0 0 20px; background:#fff}
.footer_logo{ margin: 20px auto 10px; width: 110px;}
.ftr-txt{ font-size: 15px; line-height: 21px; margin-top:8px;}
.footer .ftr-txt a{ padding: 0 5px;}

#call-btn{
	background:#fff;
	padding:12px 10px;
	position: fixed;
	bottom:0%;
	left: auto;
	z-index: 99;
	transition: bottom 1s;
	display: table;
	width:100%;
	box-shadow: 0 -3px 6px -1px rgba(0, 0, 0, 0.1);
	}
}

@media only screen and (max-width:375px){
.common_heading{ font-size: 29px; line-height: 35px;}
.lightshow_box .common_heading{ font-size:28px; line-height:36px;}
.lightshow_box_content .button_box{ margin-top: 30px;}
.lightshow_box_content .button_stock{ font-size: 11px; line-height: 11px;}
}

/*=========CPK port (SELL-1637)=========*/
body{ font-family: 'Inter', 'Inter Fallback', Arial, sans-serif;}
.banner_heading, .common_heading, .number_count, .vs_text{ font-family: 'PT Serif', Georgia, serif;}

/* Logo: the Claus' Keepsakes lockup (352 x 108) in place of the design's "Logo Here" (334 x 66). */
.logo{ width: auto; height: 54px; margin-top: 8px;}
.footer_logo{ width: 190px;}

/* POD CTA colours on every order button (AdsBranded rule, Atlas design-specs.md): yellow #ffd431, border #d5ac10,
   black text. The design's #ffce0b had no border. */
.common_button, a.nav-btn{ background: #ffd431; border: 2px solid #d5ac10; color: #000;}
a.nav-btn{ line-height: 36px;}

/* Pulse on the order buttons, as on the Christmas Memory Bottle landing (Tez, SELL-1637 comment of 2026-10-22): the
   Bottle's lp-button-pulse keyframes and timing (velinsleep's .order-btn-pulse). Every .common_button pulses, the phone's
   sticky one included; the header "Order Now" (a.nav-btn) does not, as on the Bottle (Nemanja, 2026-10-23). A transform
   adds no layout shift. */
.common_button{
	animation: lp-button-pulse 2s ease-in-out infinite;
	transform-origin: center;
	will-change: transform;
	backface-visibility: hidden;
	}
@keyframes lp-button-pulse{ 0%{ transform: scale(1);} 50%{ transform: scale(1.05);} 100%{ transform: scale(1);} }
@media (prefers-reduced-motion: reduce){ .common_button{ animation: none;} }

/* The design's divs are buttons here (keyboard and screen readers): reset the browser button look. */
.dl-trigger .bar1, .dl-trigger .bar2, .dl-trigger .bar3{ display: block;}
.accordion{ display: block; width: 100%; border: 0; font-family: inherit; letter-spacing: inherit;}
.acdn-content[hidden]{ display: none;}

/* Phone menu: js/landing.js sets top under the nav and toggles .is-open (the design used jQuery slideToggle). */
.mobilemenu.is-open{ display: block;}

/* The app video fills its box. */
.lightshow_video_box video{ width: 100%; height: auto;}

/* "Light Up the Magic" banner video (SELL-1861) in place of the design's 4 light-mode cards: container width, the
   cards' 14px corners, the size held by aspect-ratio so nothing shifts while the poster and video load. 16:9 from
   768px up, 4:5 on phones (the other one is display:none, so js/landing.js never plays or loads it). */
.modes_video{ margin: 45px auto 0;}
.modes_video video{ display: block; width: 100%; height: auto; border-radius: 14px; background: #0c1027;}
.modes_video_desk{ aspect-ratio: 16 / 9;}
.modes_video_mob{ aspect-ratio: 4 / 5; display: none !important;}

/* The promo strip draws itself when js/promo-banner.js runs (deferred), so until then its height is held here; the
   page under it no longer jumps down (Lighthouse CLS 0.2 on a phone before). Heights measured on the 2-row strip:
   103px from 768px up, 164px below, 154px at 360px and under. */
promo-banner:not(:defined){ display: block; min-height: 103.4px;}

/* Contrast (WCAG AA 4.5:1 on the cream and white backgrounds): "HURRY!" #f10002 -> #e00002 (4.3 -> 4.9), the reviews'
   "Verified" #00a075 -> #008560 (3.3 -> 4.6). */
.button_stock span{ color: #e00002;}
.testi_verify_text{ color: #008560;}

/* Phone sticky order button: hidden until the hero button scrolls away (js/landing.js). */
#call-btn[hidden]{ display: none;}
#call-btn.is-docked{ position: relative; box-shadow: none;}

@media only screen and (max-width:767px){
promo-banner:not(:defined){ min-height: 163.8px;}
.modes_video{ margin-top: 25px;}
.modes_video_desk{ display: none !important;}
.modes_video_mob{ display: block !important;}
.logo{ height: 40px; margin-top: 5px;}
.footer_logo{ width: 150px;}
a.nav-btn{ line-height: 32px;}
}
@media only screen and (max-width:360px){
promo-banner:not(:defined){ min-height: 154.2px;}
}

/* Hero video (2026-11-05): replaces the hero_prod.webp photo. A video gets no max-width / height:auto from the img
   reset above, so give it the photo's sizing; the background is the video's own cream (#fffcf8), so the box matches
   while the poster loads. */
video.hero_prod{ max-width:100%; height:auto; aspect-ratio:1106/1270; background:#fffcf8; }