*,
*::before,
*::after {
    box-sizing: border-box;
}
*{
	margin: 0;
	padding: 0;
}
:root {
  --black: #000;
  --white: #ffffff;
  --grey:#1d1d1b;
  --brown:#8d3a43;
  --dark-brown:#280f0b;
  --lightgrey:#f7f7f7;
  --yellow:#843614;
  --darkbrown2:#2f1415;

  --h1:32px;
  --h2:30px;
  --h3:24px;
  --h4:23px;
  --h5:18px;
  --h6:18px;
}
@font-face {
    font-family: 'Libertad';
    src: url('../fonts/Libertad-Bold.woff2') format('woff2'),
        url('../fonts/Libertad-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Segoe UI This';
    src: url('../fonts/SegoeUIThis.woff2') format('woff2'),
        url('../fonts/SegoeUIThis.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


body {
    /*font-family: 'Libertad', sans-serif;*/ /* fallback optional */
    font-family: 'Segoe UI This', 'Segoe UI', Arial, sans-serif;
    font-weight: bold; /* must match your loaded font weight */
    color: var(--grey);
   /* display: flex;
    justify-content: center;*/
    
}

h1{
	font-size: var(--h1);
	font-weight: bold;
	margin: 0;
}
h2{
	font-size: var(--h2);
	font-weight: bold;
	margin: 0;
}
h3{
	font-size: var(--h3);
	font-weight: bold;
	margin: 0;
}
h4{
	font-size: var(--h4);
	font-weight: bold;
	margin: 0;
}
h5{
	font-size: var(--h5);
	font-weight: bold;
	margin: 0;
}
h6{	font-size: var(--h6);
	font-weight: bold;
	margin: 0;
}

img{
	max-width: 100%;
}
section {
   /* min-height: 100dvh; 
    height: auto;*/        
    padding: 20px;
}


/* --- GRID TEMPLATE SYSTEM --- */

.grid {
    display: grid;
    gap: 20px;
    width: 100%;
}

/* Desktop layout: 1400px container */
.container-wide {
    /*max-width: 1400px;*/
    width: 100%;
    margin: 0 auto;
}

/* Example: full-width */
.grid-1 {
    grid-template-columns: 1fr;
}

/* Example: two-column layout */
.grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

/* Example: three */
.grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

/* Example: four */
.grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

/* Responsive breakpoints */
@media (max-width: 1024px) {
    .grid-4 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
    .grid-2 { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .grid-4,
    .grid-3 {
        grid-template-columns: 1fr;
    }
}
/*
.screen-1-pro-list{

}
.screen-1-pro-list ul{
	list-style-type: none;
	padding-left: 0;
	display: flex;
    flex-wrap: nowrap;
    gap: 20px;
    margin: 0;
}
.screen-1-pro-list ul li{
	display: inline-block;
    width: 20%;
}*/

.screen-1-pro-list ul {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 90px;
    list-style: none;
    padding: 0;
    margin-top: 10px;
}
.screen-1-pro-list ul li{
	text-align: center;
}
.screen-1-pro-list ul li img{
	width: 75%;
}
 .screen-2-pro-list ul{
	/*display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 120px;*/
    display: flex;
    gap:60px;
    list-style: none;
    padding: 0;
    justify-content: center;
 }
 .screen-2-pro-list ul li img{
	height: 130px;
 }

@media(max-width: 768px) {
    .screen-1-pro-list ul {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media(max-width: 480px) {
    .screen-1-pro-list ul {
        grid-template-columns: repeat(4, 1fr);
        gap:10px;
    }
}
.screen-3-pro-list ul{
	display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
    list-style: none;
    padding: 0;
}
.screen-3-pro-list ul li img{
	width: 100%;
}

@media (max-width: 768px) {
    .screen-3-pro-list ul {
        grid-template-columns: repeat(6, 1fr);
    }
}

/* Mobile (reduce to 2 images per row) */
@media (max-width: 480px) {
    .screen-3-pro-list ul {
        grid-template-columns: repeat(3, 1fr);
    }
}

.screen-1-contentarea{
	border: 3px solid var(--dark-brown);
	border-radius: 30px;
	padding: 10px 40px 10px 60px;
	/*margin-top: 20px;*/
}

.screen-1-contentarea h1{
	text-align: center;
	color: var(--brown);
	text-transform: uppercase;
	margin-bottom: 25px;

}
.screen-1-contentarea ul{
	list-style-type: none;
	padding-left: 0;
	margin-top: 0;
	margin-bottom: 30px;

}
.screen-1-contentarea ul li{
	font-size: 22px;
	margin-bottom: 8px;
}

.screen-1-contentarea ul li span{
	float: right;
} 
.screen-1-contentarea p{
	font-size: 18px;
	margin-top: 0;
	margin-bottom: 0px;
	padding-left: 40px;
}
.screen-1-contentarea p span{
	color: var(--brown);
}
.screen-1-contentarea p:last-child{
	margin-bottom: 20px;
}

.screen-2-contentarea h1{
	margin-bottom: 10px;
}
.screen-2-contentarea ul{
	margin-bottom: 15px;
}
.screen-2-contentarea .highlighter-text{
	margin-left: unset !important;
	display: flex;
	width: 72%;
}
.screen-2-contentarea .highlighter-text strong{
	 width: 22%;
}
.brown-text{
	color: var(--brown);
}
.highlighter-text{
	padding: 0;
	margin: 0;
	width: 70%;
	display: table;
	margin: 0 auto !important;
	font-size: 18px !important;
}
.height-100{
	height: 100%;
}
.min-h-300{
	min-height: 300px;
}

/* ---------- GRID FOR VIDEO SECTION ---------- */
.video-grid {
    display: grid;
    grid-template-columns: 1fr;
  gap:20px;
}

/*video area*/

.video-container {
  /*width: 800px;
  max-width: 90%;*/
  position: relative;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

video {
  width: 100%;
  display: block;
}

.video-controls {
  display: flex;
  align-items: center;
  padding: 10px;
  background: var(--dark-brown);
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.video-container:hover .video-controls {
  transform: translateY(0);
}

button {
  background: none;
  border: none;
  color: white;
  font-size: 16px;
  cursor: pointer;
  padding: 5px 10px;
  margin: 0 5px;
  outline: none;
}

button:hover {
  color: var(--brown);
}

.progress {
  flex-grow: 1;
  height: 10px;
  margin: 0 10px;
  cursor: pointer;
  background: #444;
  border-radius: 5px;
  appearance: none;
}

.progress::-webkit-slider-thumb {
  appearance: none;
  width: 15px;
  height: 15px;
  background: var(--brown);
  border-radius: 50%;
  cursor: pointer;
}

.volume {
  width: 80px;
  height: 6px;
  margin: 0 10px;
  cursor: pointer;
  background: #444;
  border-radius: 3px;
  appearance: none;
}

.volume::-webkit-slider-thumb {
  appearance: none;
  width: 12px;
  height: 12px;
  background: var(--brown);
  border-radius: 50%;
  cursor: pointer;
}

.time {
  font-size: 14px;
  margin: 0 10px;
  color: var(--white);
  white-space: nowrap;
}

/* Subtitles styling */
video::cue {
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 16px;
  text-shadow: 1px 1px 2px black;
}

/* Fullscreen styles */
.video-container.fullscreen {
  width: 100%;
  height: 100%;
  max-width: none;
  border-radius: 0;
}

/* Active button state */
button.active {
  color:var(--brown);
}

/**/

/*
.screen6-pro{
	text-align: center;
}
.screen6-pro img{
	margin-bottom: 10px;
}
.screen6-pro h2{
	margin: 0;
	text-transform: uppercase;
}
.screen-maintitle{
	text-align: center;
	align-content: center;
	height: 100%;
}
.screen-maintitle h1{
	margin: 0;
	text-transform: uppercase;
	font-size: 45px;
}

.screen-6-maincontent-area{
	border: 3px solid var(--dark-brown);
    border-radius: 30px;
    padding: 10px 35px 0 35px;
    margin-top: 15px;
    position: relative;
}
.screen-6-maincontent-area h3{
	text-align: center;
	color: var(--brown);
	text-transform: uppercase;
}

.trin-area{
	background-color: var(--white);
	font-size: 25px;
	font-weight: bold;
	border: 3px solid var(--dark-brown);
	border-radius: 100%;
	height: 110px;
	width: 110px;
	line-height: 110px;
	text-align: center;
	position: absolute;
	top: -55px;
	left: -15px;
}
.screen-items-list{
	margin-top: 20px;
	border-right: 3px solid var(--dark-brown);
}
.screen-items-list h3{
	text-align: left;
}
.screen-items-list ul{
	list-style-type: none;
	padding-left: 0;
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 0;
}
.screen-items-list ul li{
	margin-bottom: 12px;
	font-size: 22px;
	    width: 50%;
    display: inline-block;
}
.screen-items-list ul li:last-child{
	margin-bottom: 0;
}
.screen-items-list-2{
	margin-top: 20px;
	padding-left: 20px;
}
.screen-items-list-2 h3{
	text-align: left;
}
.screen-items-list-2 ul{
	list-style-type: none;
	padding-left: 0;
	margin-bottom: 0;
}
.screen-items-list-2 ul li{
	margin-bottom: 12px;
	font-size: 22px;
}
.screen-7-list{
	margin-top: 20px;
}
.screen-7-list ul{
	list-style-type: none;
	padding-left: 0;
	padding-left: 20px;
}
.screen-7-list ul li{
	margin-bottom: 12px;
	font-size: 22px;
}
.hide-desktop{
	display: none;
}

*/

/* --------------------------------------- */
/* ==== HEADER GRID (DESKTOP + MOBILE) ==== */
/* --------------------------------------- */

.header-mobile {
	display: none;
}

.header-desktop {
	display: grid;
	grid-template-columns: 1fr 200px 9fr 200px 1fr;
	align-items: center;
	text-align: center;
	padding: 0px 0 10px 0;
}


/* MOBILE RESPONSIVE */
@media(max-width: 768px) {
	.header-mobile {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto auto;
		gap: 15px;
		text-align: center;
		padding: 10px;
	}

	.header-mobile .screen-maintitle {
		grid-column: 1 / 3;
	}

	.header-desktop {
		display: none;
	}
}

/* --------------------------------------- */
/* ==== MAIN CONTENT GRID ==== */
/* --------------------------------------- */

.content-grid {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 20px;
	margin-top: 20px;
}


/* STACK ON MOBILE */
@media(max-width: 768px) {
	.content-grid {
		grid-template-columns: 1fr;
	}

	.screen-items-list {
		border-right: 0;
		border-bottom: 3px solid var(--dark-brown);
		padding-bottom: 20px;
		margin-bottom: 20px;
	}
}

/* --------------------------------------- */
/* ==== ELEMENT STYLES ==== */
/* --------------------------------------- */

.screen6-pro {
	text-align: center;
}

.screen6-pro img {
	margin-bottom: 10px;
	/*width: 70%;*/
	max-width: 160px;
}

.screen6-pro h2 {
	margin: 0;
	/*text-transform: uppercase;*/
	font-family: 'Libertad', sans-serif;
}

.screen-maintitle {
	text-align: center;
}

.screen-maintitle h1 {
	margin: 0;
	text-transform: uppercase;
	font-size: 45px;
}
.screen6-maintitle h1{
	font-size: 28px !important;
	font-family: 'Libertad', sans-serif;
}

/* --------------------------------------- */
/* ==== MAIN CONTENT BOX ==== */
/* --------------------------------------- */

.screen-6-maincontent-area {
	border: 3px solid var(--dark-brown);
	border-radius: 30px;
	padding: 20px 35px 20px 35px;
	/*margin-top: 15px;*/
	position: relative;
	text-align: center;
}

.screen-6-maincontent-area h3 {
	color: var(--brown);
	text-transform: uppercase;
	font-family: 'Libertad', sans-serif;
	color: var(--yellow);
}
.screen-6-maincontent-area h3 span{
	text-transform: initial;
}
.screen-6-maincontent-area .screen-items-list ul{
	font-family: 'Libertad', sans-serif;
}
.screen-6-maincontent-area .content-grid{
	margin-top: unset;
}
.screen-6-maincontent-area .content-grid .screen-items-list h3, .screen-6-maincontent-area .content-grid .screen-items-list-2 h3{
	margin-bottom: 20px;
}
.screen6-maintitle img{
	/*width: 60%;*/
}
.screen-6-maincontent-area .screen-items-list ul, .screen-6-maincontent-area .screen-items-list-2 ul{
	color: var(--darkbrown2);
}
/* --------------------------------------- */
/* ==== TRIN CIRCLE ==== */
/* --------------------------------------- */

.trin-area {
	background-color: var(--white);
	font-size: 25px;
	font-weight: bold;
	border: 3px solid var(--dark-brown);
	border-radius: 50%;
	height: 110px;
	width: 110px;
	line-height: 110px;
	text-align: center;
	position: absolute;
	top: -55px;
	left: -15px;

}

/* --------------------------------------- */
/* ==== LEFT LIST ==== */
/* --------------------------------------- */

.screen-items-list {
	margin-top: 20px;
	border-right: 3px solid var(--dark-brown);
	padding-right: 20px;
	text-align: left;
}

.screen-items-list h3 {
	text-align: left;
}

.screen-items-list ul {
	list-style-type: none;
	padding-left: 0;
	margin-bottom: 0;

	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px 0;
}

.screen-items-list ul li {
	font-size: 22px;
}

/* --------------------------------------- */
/* ==== RIGHT LIST ==== */
/* --------------------------------------- */

.screen-items-list-2 {
	margin-top: 20px;
	padding-left: 20px;
	text-align: left;
}

.screen-items-list-2 h3 {
	text-align: left;
}

.screen-items-list-2 ul {
	list-style-type: none;
	padding-left: 0;
	margin: 0;
}

.screen-items-list-2 ul li {
	margin-bottom: 12px;
	font-size: 22px;
}
/*
.chousos-images{
	text-align: center;
}
.chousos-images ul {
	list-style-type: none;
	padding-left: 0;
	margin-top: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.chousos-images ul li{
	display: inline-block;

}
.screen-9-maincontent-area{
	border: 3px solid var(--dark-brown);
    border-radius: 30px;
    padding: 20px 35px ;
    margin-top: 15px;
    position: relative;
}
.screen-9-maincontent-area h2{
	text-align: center;
	color: var(--brown);
	text-transform: uppercase;
	margin-bottom: 30px;
}
.choros-items-list{
	color: var(--grey);
	height: 100%;
	position: relative;
	padding-bottom: 25px;
}
.choros-items-list h3{
	margin-bottom: 25px;
}
.choros-items-list ul{
	list-style-type: none;
	padding-left: 0;
}
.choros-items-list ul li{
	margin-bottom: 12px;
	font-size: 22px;
}
.choros-items-list2{
	display: table;
	margin: 0 auto;
}

.price-circle{
	background-color: var(--black);
	color: var(--white);
	font-size: 16px;
	font-weight: bold;
	width: 50px;
	height: 50px;
	line-height: 50px;
	border-radius: 100%;
	text-align: center;
	box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
	position: absolute;
	right: 0;
	bottom: 0;
}*/

/* IMAGE STRIP */
.chousos-images {
	
}
.chousos-images ul {
	list-style-type: none;
	padding-left: 0;
	display: flex;
	justify-content: center;
	gap: 60px;
}
.chousos-images ul li img {
	/*max-width: 150px;*/
	height: 195px;
}

/* MAIN BOX */
.screen-9-maincontent-area {
	/*border: 3px solid var(--dark-brown);
	border-radius: 30px;*/
	padding: 20px 35px;
	/*margin-top: 25px;*/
}

.screen-9-maincontent-area h2 {
	text-align: center;
	color: var(--brown);
	/*text-transform: uppercase;*/
	margin-bottom: 30px;
	font-size: 90px;
	letter-spacing: 2px;

}
.screen-9-maincontent-area .items-grid{
	gap:100px;
}
.choros-items-list2 {
	text-align: left !important;
}
.choros-items-list2 h2{
	text-align: center;
}
.choros-items-list2 img{
	display: table;
	margin: 0 auto;
}
.responsive-heading{
	display: none;
}
.choros-items-list2 h2{
	margin-bottom: 10px;
}
/* ⭐ GRID SYSTEM ⭐ */
.items-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 60px;
}


/*screen7*/


.header-mobile2 {
	display: none;
}

.header-desktop2 {
	display: grid;
	grid-template-columns: 1fr 200px 9fr 200px 1fr;
	align-items: center;
	text-align: center;
	padding: 0px 0 10px 0;
}

/* MOBILE RESPONSIVE */
@media(max-width: 768px) {
	.header-mobile2 {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto auto;
		gap: 15px;
		padding: 10px;
		text-align: center;
	}

	.header-mobile2 .screen-maintitle {
		grid-column: 1 / 3;
	}

	.header-desktop2 {
		display: none;
	}
}

/* --------------------------------------- */
/* MAIN CONTENT BOX */
/* --------------------------------------- */

.screen-7-maincontent-area {
    border: 3px solid var(--dark-brown);
    border-radius: 30px;
    padding: 20px 85px 20px 85px;
    /*margin-top: 20px;*/
    /*text-align: center;*/
    position: relative;
}

.screen-7-maincontent-area h3 {
	/*text-transform: uppercase;*/
	color: var(--brown);
	font-family: 'Libertad', sans-serif;
	color: var(--yellow);
	text-align: center;
}
.screen-7-maincontent-area .boba-grid{
	gap:300px;
}
.screen-7-maincontent-area .screen-7-list ul{
	color: var(--darkbrown2);
}
/* TRIN CIRCLE */
.trin-area{
	background-color: var(--white);
	font-size: 25px;
	font-weight: bold;
	border: 3px solid var(--dark-brown);
	border-radius: 50%;
	height: 110px;
	width: 110px;
	line-height: 110px;
	text-align: center;
	position: absolute;
	top: -55px;
	left: -15px;
	font-family: 'Libertad', sans-serif;
	color: var(--darkbrown2);
}

/* --------------------------------------- */
/* PRODUCT BLOCKS */
/* --------------------------------------- */

.screen7-pro {
	text-align: center;
}

.screen7-pro img {
	/*width: 70%;*/
    max-width: 160px;
	margin-bottom: 10px;
}

.screen7-pro h2 {
	/*text-transform: uppercase;*/
	margin: 0;
	font-family: 'Libertad', sans-serif;
}
.screen7-maintitle h1{
	font-size: 28px !important;
    font-family: 'Libertad', sans-serif;
}
/* Title */
.screen-maintitle h1 {
	margin: 0;
	font-size: 45px;
	text-transform: uppercase;
}

/* --------------------------------------- */
/* BOBA LIST GRID */
/* --------------------------------------- */

.boba-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-top: 30px;
}

/* Stack on mobile */
@media(max-width: 768px) {
	.boba-grid {
		grid-template-columns: 1fr;
	}
}

/* List styling */
.screen-7-list ul {
	list-style-type: none;
	padding-left: 0;
	margin: 0;
}

.screen-7-list ul li {
	font-size: 22px;
	margin-bottom: 10px;
}


/* ITEM BLOCKS */
.choros-items-list {
	color: var(--grey);
	position: relative;
	padding-bottom: 50px; /* space for price circle */
}

.choros-items-list h3 {
	margin-bottom: 25px;
	color: var(--brown);
	font-size: 30px;
}

.choros-items-list ul {
	list-style-type: none;
	padding-left: 0;
}

.choros-items-list ul li {
	margin-bottom: 5px;
	font-size: 22px;
}

/* Center 2nd item */
.choros-items-list2 {
	text-align: center;
}
.screen-9-maincontent-area .choros-items-list .price-circle{
	width: 90px;
	height: 90px;
	line-height: 90px;
	font-size: 25px;
}
.screen-9-maincontent-area .choros-items-list2 h3, .screen-9-maincontent-area .choros-items-list2 ul{
	margin-left: 40px;
}
/* PRICE CIRCLE */
.price-circle {
	background-color: var(--grey);
	color: var(--white);
	font-size: 16px;
	font-weight: bold;
	width: 50px;
	height: 50px;
	line-height: 50px;
	border-radius: 50%;
	text-align: center;

	position: absolute;
	bottom: 0;
	right: 0;

	box-shadow: rgba(0, 0, 0, 0.25) 0px 3px 8px;
}

/* RESPONSIVE (optional) */
@media(max-width: 768px) {
	.items-grid {
		grid-template-columns: 1fr;
		gap: 25px;
	}

	.price-circle {
		right: 10px;
		bottom: 10px;
	}
	.screen-2-contentarea .highlighter-text{
		display: block;
		width: 100%;
	}
}


.screen-10-maincontent-area{
	padding: 20px 95px 20px 95px;
}
.screen-10-maincontent-area h2{
	color: var(--brown);
	font-size: 45px;
	margin-bottom: 30px;
}
.screen-10-maincontent-area .screen-items-list{
	border-right: unset;
}
.screen-10-maincontent-area .screen-items-list ul li{
	font-size: 26px;
	font-family: 'Segoe UI This', 'Segoe UI', Arial, sans-serif;
}
.screen-10-maincontent-area .screen-10-price{
	width: 120px;
    height: 120px;
    line-height: 120px;
    font-size: 25px;
    background-color: var(--grey);
    border-radius: 100%;
    text-align: center;
    color: var(--white);
    margin-bottom: 15px;
}
.screen-10-maincontent-area .screen-10-price:last-child{
	margin-bottom: 0;
}
.screen-10-pricearea{
	display: table;
	margin-left: auto;
}
.screen-10-maincontent-area .screen-items-list ul{
	    gap: 10px 130px;
}
.screen-9-maincontent-area .choros-items-list img{
	margin-bottom: 30px;
}
@media only screen and (max-width : 1024px){
	:root {
	  --h1:30px;
	}
}
@media only screen and (max-width : 768px){
	:root {
	  --h1:30px;
	  --h2:28px;
	}
	.screen-maintitle h1{
		font-size: 40px;
	}
	.chousos-images ul{
		gap:10px;
	}
	.chousos-images ul li{
		width: calc(33.33% - 10px);
	}
	.screen-1-contentarea ul li{
		font-size: 19px;
	}
	.screen-6-maincontent-area .screen-items-list{
		border-right: unset;
		margin-bottom: 0;
	}
	.screen-7-maincontent-area .boba-grid{
		gap:20px;
	}
	.desktop-heading{
		display: none;
	}
	.responsive-heading{
		display: block;
	}
	.screen-9-maincontent-area h2{
		font-size: 45px;
	}
	.screen-9-maincontent-area .items-grid{
		gap:20px;
	}
	.screen-9-maincontent-area .choros-items-list img{
		display: table;
		margin: 0 auto;
		margin-bottom: 15px;
	}
	.screen-9-maincontent-area .choros-items-list2 h3, .screen-9-maincontent-area .choros-items-list2 ul{
		margin-left: unset;
	}
	.screen-10-maincontent-area .screen-items-list{
		border-bottom: unset;
	}
	.screen-10-maincontent-area .screen-items-list ul{
		gap:10px;
	}
	.screen-10-pricearea{
		display: unset;
		margin: unset;
		display: flex;
        gap: 30px;
        margin: 0 auto;
	}
	.screen-10-maincontent-area .screen-10-price{
		font-size: 22px;
	}
	.screen-10-maincontent-area{
		margin-top: unset !important;
		padding: 20px 35px 20px 35px;
	}
}
@media only screen and (max-width : 767px){
	.hide-desktop{
		display: block;
	}
	.hide-mobile{
		display: none;
	}
	.screen-maintitle h1{
		font-size: 30px;
		margin-top: 20px;
	}
	.screen-6-maincontent-area h3{
		margin-top: 50px;
	}
	.trin-area{
		    top: -55px;
	    left: 50%;
	    transform: translate(-50px, 0);
	}
	.screen-6-maincontent-area{
		margin-top: 65px;
	}
	.col-8, .col-4{
		width: 100%;
	}
	.screen-items-list{
		border-right: unset;
		border-bottom: 3px solid var(--dark-brown);
		padding-bottom: 20px;
	}
	.screen-items-list h3, .screen-items-list-2 h3{
		margin-top: unset;
	}
	.screen-items-list ul li{
		width: 100%;
	}
	.screen-items-list-2{
		padding-bottom: 20px;
		padding-left: unset;
	}
	.screen-7-list ul{
		padding-left: unset;
	}
	.col-2, .wos-col-6{
		width: 100%;
	}
	.choros-items-list{
		padding-bottom: unset;
		margin-bottom: 30px;
		height: unset;
	}
	.choros-items-list2{
		margin: unset !important;
		margin-top: 30px !important;
        display: block;
		
	}
	.choros-items-list3{
		margin-top: 30px !important;
	}
	.screen-1-contentarea ul li{
		font-size: 16px;
	}
	.screen-1-contentarea p{
		font-size: 16px;
	}
	.screen-2-contentarea .highlighter-text{
		font-size: 16px !important;
	}
	.screen-maintitle h1, .screen6-pro h2{
		font-size: 26px;
	}
	.screen-6-maincontent-area .content-grid{
		gap:0px;
	}
	.screen-7-maincontent-area{
		margin-top: 60px;
		padding: 20px 35px 20px 35px;
	}
	.screen-7-maincontent-area h3{
		margin-top: 50px;
	}
	.screen-7-maincontent-area .boba-grid{
		margin-top: 20px;
	}
	.screen-10-maincontent-area h2{
		font-size: 26px;
		margin-bottom: 15px;
	}
}
@media only screen and (max-width : 420px){
	.screen-1-contentarea ul li{
		font-size: 18px;
		margin-bottom: 15px;
	}
	.screen-maintitle h1{
		font-size: 28px;
	}
	:root {
	  --h1:30px;
	  --h2:24px;
	  --h3:22px;
	}
	.screen-1-contentarea{
		padding: 10px 22px;
	}
	.screen-1-contentarea h1{
		font-size: 21px;
	}
	.screen-2-pro-list ul li img{
		height: unset;
	}
	.screen-maintitle h1, .screen6-pro h2{
		font-size: 22px;
	}
	.screen-6-maincontent-area .screen-items-list ul li, .screen-6-maincontent-area .screen-items-list-2 ul li{
		font-size: 18px;
	}
	.screen-6-maincontent-area .screen-items-list ul{
		    grid-template-columns: repeat(1, 1fr)
	}
	.screen-9-maincontent-area{
		padding: 0;
	}
	.screen-9-maincontent-area h2{
		font-size: 35px;
	}
	.choros-items-list h3{
		font-size: 25px;
	}
	.screen-9-maincontent-area .items-grid{
		gap:0px;
	}
	.screen-9-maincontent-area .choros-items-list .price-circle {
	    width: 60px;
	    height: 60px;
	    line-height: 60px;
	    font-size: 20px;
	}
	.screen6-pro img, .screen7-pro img{
		width: 70%;
	}
	.screen-10-maincontent-area .screen-10-price{
		width: 100px;
		height: 100px;
		line-height: 100px;
		font-size: 18px;
	}
}