:root {
  --color1: #B8625D;
  --color2: #364a33;
  --color3: #FCF3CF;
  --color4: #fbeee6;
  --color5: #d4efdf;
}

body {margin: 0; padding: 0; overflow-y: auto; overflow-x: hidden; font-family: "Montserrat", sans-serif;}

.top_nav {position: relative; margin: auto; width: max-content; padding: 20px 18px; text-align: center; background-color: var(--color1); border-radius: 0 0 20px 20px; box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);}
.top_nav h5, .top_nav h6 {color: #fff;}

.heading_1 {color: #333; font-size: 32px; font-weight: 700; text-transform: capitalize;}
.heading_2 {font-size: 25px; font-weight: 500;}

.button_1 {display: inline-block; width: max-content; background-color: var(--color1); border: none; border-radius: 25px; font-size: 17px; font-weight: 700; padding: 10px 24px; text-align: center; text-decoration: none; color: #fff; box-shadow: 0px 0px 10px 0px rgb(54 74 51 / 37%); transition: all 0.5s;}
.button_1:hover {color: #fff; box-shadow: 0px 0px 10px 0px rgb(48 84 42 / 58%); background-color: #cb7d78;}

.button_2 {display: inline-block; width: max-content; background-color: var(--color2); border: none; border-radius: 25px; font-size: 22px; font-weight: 700; padding: 10px 24px; text-align: center; text-decoration: none; color: #fff; box-shadow: 0px 0px 10px 0px rgb(54 74 51 / 37%); transition: all 0.5s;}
.button_2:hover {color: #fff; box-shadow: 0px 0px 10px 0px rgb(48 84 42 / 58%); background-color: #456640;}

.color_text1 {color: #B8625D;}
.color_text2 {color: #364a33;}
.color_text3 {color: #FCF3CF;}
.color_text4 {color: #fbeee6;}
.color_text5 {color: #d4efdf;}

/*/Content/*/
.content_sec {padding: 30px 0; background-color: #fff;}

.iframe {width: 100%; height: 300px; overflow: hidden; border: 4px solid var(--color5);}
.iframe iframe {width: 100%; height: 300px; object-fit: contain;}

.user_box {background-color: var(--color1); box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.29); padding: 15px; border-radius: 10px; display: flex; align-items: center;}
.user_img {height: 125px; width: 125px; overflow: hidden; border-radius: 50%; border: 3px solid #fff;}
.user_img img {height: 100%; width: 100%; object-fit: cover;}
.user_info {width: calc(100% - 125px); padding-left: 20px;}

.check_ul {list-style: none; margin: 0; padding: 0; display: grid; grid-gap: 15px;}
.check_ul li {display: flex; grid-gap: 10px; padding: 15px; border-radius: 10px; background-color: var(--color3);}
.check_ul li img {height: 22px; width: 22px; object-fit: contain; position: relative; top: 4px;}
.check_ul li span {font-size: 18px; font-weight: 400;}

.wwlit3how {display: flex; align-items: center; flex-wrap: wrap; grid-gap: 20px; padding: 15px; border-radius: 10px; background-color: #364a33ad;}
.wwlit3how .img {height: 100px; width: 100px; border-radius: 8px; background-color: var(--color2);}
.wwlit3how .img img {height: 100%; width: 100%; object-fit: contain; padding: 12px;}
.wwlit3how .info {width: calc(100% - 120px);}
.wwlit3how .info p {margin-bottom: 0; color: #fff; font-weight: 500;}

.tcbyl {box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.27); border-radius: 10px; overflow: hidden; height: 100%; background-color: var(--color5);}
.tcbyl .img {width: 100%; height: 250px; margin-bottom: 5px;}
.tcbyl .img img {width: 100%; height: 100%; object-fit: cover;}
.tcbyl .info {padding: 15px;}
.tcbyl .info h6 {color: var(--color2); font-size: 22px; font-weight: 600; margin-bottom: 7px;}
.tcbyl .info p {font-weight: 500; color: #666;}

.gbwr {display: flex; align-items: center; flex-wrap: wrap; padding: 15px; border-radius: 10px; background-color: #364a33ad;}
.gbwr .img {height: 80px; width: 80px; border-radius: 8px 0 0 8px; background-color: var(--color2);}
.gbwr .img img {height: 100%; width: 100%; object-fit: contain; padding: 12px;}
.gbwr .info {width: calc(100% - 80px); border-radius: 0 8px 8px 0; height: 80px; display: grid; align-items: center; padding-left: 10px; background-color: var(--color2);}
.gbwr .info p {margin-bottom: 0; color: #fff; font-weight: 500;}

.tm_box {padding: 15px; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2); border-radius: 12px; height: 100%; display: grid; align-content: space-between;}
.tm_box p {font-size: 16px; font-weight: 500;}
.tm_box .tm_user {background-color: var(--color2); padding: 20px 15px; border-radius: 10px;}

.coach_img {width: 100%; object-fit: contain; border: 4px solid var(--color5); border-radius: 10px;}

.faq_qa {border-radius: 3px; border: 1px solid #ccc; overflow: hidden; position: relative;}
.faq_q {background-color: transparent; padding: 10px 15px; display: flex; align-items: center; justify-content: space-between; transition: all 0.5s; cursor: pointer;}
.faq_q h6 {color: #333; font-weight: 700;}
.faq_qa .tm_toogle {height: 17px; width: 17px; border-radius: 3px; background-color: #333; position: relative; transition: all 0.5s;}
.faq_qa .tm_toogle:after {content: ''; width: 12px; height: 1px; background-color: #fff; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); transition: all 0.5s;}
.faq_qa .tm_toogle:before {content: ''; height: 12px; width: 1px; background-color: #fff; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); transition: all 0.5s;}

.faq_a {padding: 10px 15px; border-top: 1px solid #ccc; height: auto; display: none;}

.faq_qa.active .faq_q {background-color: var(--color2);}
.faq_qa.active .faq_q h6 {color: #fff;}
.faq_qa.active .faq_q .tm_toogle {background-color: var(--color3);}
.faq_qa.active .tm_toogle:before {height: 1px;}
.faq_qa.active .tm_toogle:after {background-color: #333;}
/*.faq_qa.active .faq_a {padding: 10px 15px; height: auto;}*/

.fg_tab {background-color: #ffffff42; padding: 10px 15px; display: flex; align-items: center; border-radius: 10px; grid-gap: 10px;}
.fg_tab span {font-size: 30px; color: #fff;}
.fg_tab h6 {font-size: 16px; color: #fff;}

.ratings {display: flex; align-items: center; grid-gap: 5px; list-style: none; margin: 0; padding: 0;}
.ratings i {color: #ffb300;}

.timer {display: flex; justify-content: center; align-items: center; grid-gap: 5px;}
.timer span.ms {display: grid; text-align: center; font-size: 18px; font-weight: 700; background-color: var(--color2); color: var(--color1); border-radius: 3px; width: 38px; line-height: 16px; padding: 4px 6px 0px; border: 3px solid #b8625d63;}
.timer span.ms span {font-size: 10px; color: #fff; font-weight: 400;}

.footer_section {padding: 15px; background-color: #fff; box-shadow: 0px 0px 18px 0px rgba(0, 0, 0, 0.24); position: sticky; bottom: 0; z-index: 999;;}


/*/BGS/*/
.bg_1 {position: relative; z-index: 9;}
.bg_1:after {content: ''; position: absolute; left: 0; right: 0; top: 0; height: 100%; background-image: url('../images/bg_1.webp'); z-index: -1;}

.bg_2 {position: relative; z-index: 9;}
.bg_2:after {content: ''; position: absolute; left: 0; right: 0; top: 0; height: 100%; background-image: url('../images/bg_2.webp'); z-index: -1; opacity: 0.7;}

.bg_3 {position: relative; z-index: 9;}
.bg_3:after {content: ''; position: absolute; left: 0; right: 0; top: 0; height: 100%; background-image: url('../images/bg_3.webp'); z-index: -1; opacity: 0.08;}

.bgc_1 {background-color: var(--color1);}
.bgc_2 {background-color: var(--color2);}
.bgc_3 {background-color: var(--color3);}
.bgc_4 {background-color: var(--color4);}
.bgc_5 {background-color: var(--color5);}


/*/FONT-SIZE/*/
.fs_10 {font-size: 10px !important;}
.fs_11 {font-size: 11px !important;}
.fs_12 {font-size: 12px !important;}
.fs_13 {font-size: 13px !important;}
.fs_14 {font-size: 14px !important;}
.fs_15 {font-size: 15px !important;}
.fs_16 {font-size: 16px !important;}
.fs_17 {font-size: 17px !important;}
.fs_18 {font-size: 18px !important;}
.fs_19 {font-size: 19px !important;}
.fs_20 {font-size: 20px !important;}
.fs_22 {font-size: 22px !important;}
.fs_24 {font-size: 24px !important;}
.fs_26 {font-size: 26px !important;}
.fs_28 {font-size: 28px !important;}
.fs_30 {font-size: 30px !important;}
.fs_32 {font-size: 32px !important;}
.fs_34 {font-size: 34px !important;}
.fs_36 {font-size: 36px !important;}
.fs_38 {font-size: 38px !important;}
.fs_40 {font-size: 40px !important;}
.fs_50 {font-size: 50px !important;}
.fs_60 {font-size: 60px !important;}
.fs_70 {font-size: 70px !important;}
.fs_80 {font-size: 80px !important;}
.fs_90 {font-size: 90px !important;}
.fs_100 {font-size: 100px !important;}

.fw_400 {font-weight: 400;}
.fw_500 {font-weight: 500;}
.fw_600 {font-weight: 600;}
.fw_700 {font-weight: 700;}
.fw_800 {font-weight: 800;}
.fw_900 {font-weight: 900;}

.clip_1 {-webkit-line-clamp: 1; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical; display: -webkit-box;}
.clip_2 {-webkit-line-clamp: 2; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical; display: -webkit-box;}
.clip_3 {-webkit-line-clamp: 3; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical; display: -webkit-box;}
.clip_4 {-webkit-line-clamp: 4; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical; display: -webkit-box;}
.clip_5 {-webkit-line-clamp: 5; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical; display: -webkit-box;}
.clip_6 {-webkit-line-clamp: 6; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical; display: -webkit-box;}
.clip_7 {-webkit-line-clamp: 7; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical; display: -webkit-box;}
.clip_8 {-webkit-line-clamp: 8; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical; display: -webkit-box;}

/*//////////Responsive//////////*/
@media only screen and (max-width: 991px){ 
	
}

@media only screen and (max-width: 767px){
	.heading_1 {font-size: 24px; line-height: 34px;}
	.heading_2, .tcbyl .info h6 {font-size: 18px;}
	.check_ul li span {font-size: 16px;}
}

@media only screen and (max-width: 576px){

}

@media only screen and (max-width: 480px){ 
	.top_nav {width: 100%; padding: 15px 10px;}
	.top_nav h5, .top_nav h6 {font-size: 16px;}
	.user_box {display: block;}
	.user_img {height: 90px; width: 90px; margin: auto; margin-bottom: 10px;}
	.user_info {width: 100%; text-align: center;}
	.ratings {justify-content: center;}
	.heading_1 {font-size: 20px; line-height: inherit;}
	.wwlit3how {display: grid; justify-content: center; text-align: center; grid-gap: 10px;}
	.wwlit3how .img {margin: auto; height: 80px; width: 80px;}
	.wwlit3how .info {width: 100%; text-align: center;}
	.tcbyl .img {height: 200px;}
	.gbwr {display: grid; justify-content: center; text-align: center;}
	.gbwr .img {width: 100%; text-align: center; border-radius: 8px 8px 0 0}
	.gbwr .info {width: 100%; text-align: center; height: auto; border-radius: 0 0 8px 8px; padding-bottom: 15px;}
	.datetime {font-size: 13px;}
	.button_1, .button_2 {font-size: 18px; padding: 5px 15px; font-weight: 600;}
	.footer_section .button_2 {font-size: 15px !important;}
	.footer_section {padding: 10px 0;}
}

