* { margin: 0; padding: 0; box-sizing: border-box; font-family: "Albert Sans", sans-serif; letter-spacing: -.5px; }
body { font-family: "Albert Sans", sans-serif; color: #2b2b2b; overflow-x: hidden; position: relative; }
.body_bg_01{background:#7d4517 url(../img/body_bg_01.jpg) no-repeat center; background-size: cover;}
.header { width: 100%; height: auto; display: contents; }
.logo { position: relative; height: auto; }
.logo img { width: auto; height: auto; max-width: 100%; }
.search_area { display: block; margin: 0 4rem 0; padding: 0; }
.search_area p{font-size: 1.13rem; margin: 1rem 0;}
.search_area p a {color: #342E2E; text-decoration: none; padding-left: 1em;}
.menu-toggle { position: absolute; top: 1rem; right: 2rem; cursor: pointer; font-size: 2rem; z-index: 1001; }
.close-menu { align-self: flex-start; font-size: 2rem; cursor: pointer; margin: -.4em 0 0; }
.login-box { position: absolute; right: 0; top: 70%; transform: translateY(-50%); display: block; align-items: center; gap: 1rem; z-index: 2000; }
.login-box span { color: #2b2b2b; font-size: 14px; text-align: center; display: block; }
.login-box a { background: none; border: 1px solid #494643; border-right: none !important; padding: 1rem 3rem; border-radius: 1rem 0 0 1rem; z-index: 2000; text-decoration: none; color: #2b2b2b; font-size: 1.2em; display: block; }
.side-menu { position: absolute; top: 0; right: 0em; opacity: 0; height: 86vh; width: 300px; background-color: #DBD5D0; border-radius: 0 2em 2em 0; padding: 2rem; display: flex; flex-direction: column; z-index: 1000; transition: right 0.4s ease, opacity 0.4s ease;}
.side-menu.open { right: 0; opacity: 1; display: flex; z-index: 10001;}
.side-menu a { margin: 1rem 0; text-transform: lowercase; font-size: 0.9rem; letter-spacing: 1px; text-decoration: none; color: #2b2b2b; cursor: pointer; }
.howitworks-overlay-left { display: none; position: absolute; height: 76vh; top: 0; left: 0; width: calc(100% - 320px); background-color: #F5F1F0; border-radius: 2em 0 0 2em; padding: 2rem; z-index: 998;}
.howitworks-overlay-left.active { display: block; }
.howitworks-overlay-left.active .logo img {height: 42px !important;}
.ofy-scroll{overflow-y: auto; height: 43vh;}
.ofy-scroll::-webkit-scrollbar-track{-webkit-box-shadow: inset 0 0 6px rgba(245,241,240,0.3); background-color: #F5F5F5;}
.ofy-scroll::-webkit-scrollbar{width: 6px; background-color: #F5F1F0;}
.ofy-scroll::-webkit-scrollbar-thumb{background-color: #7A7877;}
.ofy-scroll img{width: auto; height: auto; max-width: 100%; border: none; margin: 0 auto; display: block;}

.highlight-overlay-left { display: none; position: absolute; height: 76vh; top: 0; left: 0; width: calc(100% - 310px); background-color: #F5F1F0; border-radius: 2em 0 0 2em; padding: 2rem; z-index: 998;}
.highlight-overlay-left.active { display: block; }
.highlight-overlay-left.active .logo img {height: 42px !important;}
.ofy-scroll_01{overflow-y: auto; height: 43vh;}
.ofy-scroll_01::-webkit-scrollbar-track{-webkit-box-shadow: inset 0 0 6px rgba(245,241,240,0.3); background-color: #F5F5F5;}
.ofy-scroll_01::-webkit-scrollbar{width: 6px; background-color: #F5F1F0;}
.ofy-scroll_01::-webkit-scrollbar-thumb{background-color: #7A7877;}
.ofy-scroll_01 img{width: auto; height: auto; max-width: 100%; border: none; margin: 0 auto; display: block;}

#videoThumbnail{max-width: 34vh;margin: 0 auto;cursor: pointer;display: grid;place-items: center;height: 67vh;}

.login-box-1 { position: relative; right: 0; top: 2%; align-items: center; gap: 1rem; z-index: 9; margin: 0 auto; display: block;}
.login-box-1 span { color: #2b2b2b; font-size: 14px; text-align: center; display: block; }
.login-box-1 .login_btn {width: 180px; background: none; border: 1px solid #494643; padding: .7rem 2rem; border-radius: 1rem; text-decoration: none; color: #2b2b2b; font-size: 1.2em; margin: 0 auto; display: block; }
.login-box-1 a{color: #342E2E; text-decoration: none; font-size: 26px; text-align: center; font-weight: 500; margin: 0 auto; display: block;}
.login-box-1 a img{width: auto; height: 20px; max-width: 100%; display: inline-block;}

.howitworks-overlay-right { display: none; position: absolute; top: 0; right: 0; width: 320px; height: 86vh; background-color: #DBD5D0; border-radius: 0 2em 2em 0; padding: 1rem; z-index: 2002;}
.howitworks-overlay-right.active { display: block; }
.howitworks-overlay-right .back-button { cursor: pointer; font-size: 1.2rem; color: #342E2E; margin-bottom: 1rem; text-align: center;}
.howitworks-overlay-right img { width: 100%; height: auto; border: #FFFFFF 5px solid; border-radius: 2em; margin: 0 auto; display: block;}
.lf_arrow {width: 15px !important; height: auto !important; max-width: 100%; border: none !important; border-radius: 0 !important; margin: 0; padding: 0; float: left;}
.btn_vclose{width: 24px !important; height: 24px !important; border: none !important; border-radius: 0 !important; display: none !important;}
button { background-color: transparent; border: none; font-size: 1rem; cursor: pointer; }
#howItWorksRight p { font-size: 0.9rem; margin-top: 1rem; color: #342E2E; text-align: center; }
#howItWorksRight p b{color: #5E4D40; display: block;}
#howItWorksRight h4 { font-size: 1.5rem; margin-bottom: 1rem; color: #2b2b2b; text-align: center; }
.container { max-width: 90%; margin: 3em auto; padding: 2rem; position: relative; z-index: 1; background: #F5F1F0; border-radius: 2em; height: 86vh; display: block; }
.container h1 {font-size: 6rem; color: #5E4D40; text-align: left; font-weight: 600;}
.container h1 span {color: #D32128;}
.container h3{font-size: 1.6rem; font-weight: normal; color: #342E2E;}
h6 { font-size: 1.2rem; margin-bottom: 1rem; }
h6 span { color: #D32128; font-size: 4rem; font-weight: 600; }
h6 label { font-size: 4rem; color: #5E4D40; }
.highlight { color: #E5603C; font-weight: 600; }
.main_serach1 { width: auto !important; filter: drop-shadow(0px 2px 10px rgba(0, 0, 0, 0.05)); }
.main_serach1 textarea { padding: 8px; }
.main_serach1 .input-box { border-radius: 1.5rem !important; }
.main_serach1 .collaborate-text { border-radius: 0 0 1.5rem 1.5rem !important; }
.input-box { position: relative; display: block; align-items: center; margin-top: 2em; border-radius: 1rem; padding: 8px 12px; background: #F4F6FA; border: #A29285 1px solid; }
.ap_store_btns img { height: 40px; max-width: 100%; margin: .5em auto; display: block; }
.typed-response ul { list-style-type: disc; list-style-position: inside; padding: 0 0 1em 2em; margin: 0; display: list-item; font-family: "Beiruti", sans-serif !important; font-size: 14px; }
.typed-response li, .typed-response ul li { font-family: "Beiruti", sans-serif !important; font-size: 14px; font-weight: normal; text-align: left; list-style: none; list-style-position: inside; padding: 0.5em 0; clear: both; }
.typed-response ol { list-style-type: decimal; list-style-position: inherit; padding: 0 0 1em 2em; margin: 0; display: list-item; font-family: "Beiruti", sans-serif !important; font-size: 14px; }
.typed-response ol li { font-family: "Beiruti", sans-serif !important; font-size: 14px; text-align: left; list-style-position: initial; padding: 0.5em 0; clear: both; }
.reply-box1 pre ol { list-style-position: inside; display: block; }
.reply-box1 pre ol li { font-family: "Beiruti", sans-serif !important; font-size: 14px; text-align: left; padding: .5em 0; clear: both; content: ''; display: block; }
.response-html { display: block; }
.reply-box1 { font-family: "Beiruti", sans-serif !important; display: block; margin-bottom: 15px; padding: 10px; background: #e3f2fd; border-radius: 10px; font-size: 14px; color: #333; text-align: left; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); width: auto; margin: 1em 0 0; float: left; clear: both; }
.output-box { display: none; margin-bottom: 15px; padding: 10px; background: #FFEEEE; border-radius: 10px; font-size: 14px; color: #333; text-align: right; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); width: auto; max-width: 90%; margin: 2em 0 0 5em; float: right; clear: both; word-wrap: break-word; }
.reply-box { font-family: "Beiruti", sans-serif !important; display: none; margin-bottom: 15px; padding: 10px; background: #e3f2fd; border-radius: 10px; font-size: 14px; color: #333; text-align: left; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); width: auto; max-width: 90%; margin: 2em 0 0; }
.main_serach textarea { background: none; border: none; outline: none; resize: none; height: auto; padding: 0; font-size: 14px; width: 90%; display: inline-block; }
.mic-icon, .send-icon { font-size: 18px; cursor: pointer; color: #777; margin: 0; float: right; }
.collaborate-text { background: #DBD5D0; border-radius: 0 0 1rem 1rem; margin-top: -2em; height: 55px; padding: 1.5em 1.5em; }
.collaborate-text p { font-size: 14px; color: #666; padding: .3em 0; display: none; }
.collaborate-text .bold-text { font-weight: 600; color: #000; }
.collaborate-text .icons { float: right; display: none; }
.collaborate-text .icons img { width: auto; height: auto; max-width: 100%; margin-left: 2em; }
.search-box { margin: 2rem 0; background: #f6f9fe; border-radius: 1rem; padding: 1rem 1.5rem; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 4px 0 #ddd; }
.search-box input { border: none; outline: none; font-size: 1rem; background: transparent; flex: 1; }
.search-box i { font-size: 1.2rem; margin-left: 0.5rem; cursor: pointer; }
.pb_logo {width: auto; height: auto; max-width: 100%; left: 2em; bottom: 2em; position: absolute;}
.cbf5{color: #000 !important; font-weight: 500 !important;}
.about_app{width: 100%; padding: 0; display: block;}
.about_app h2{font-size: 42px; color: #AF5757; font-weight: 400; display: block;}
.about_app h2 label{font-size: 18px; color: #AF5757; text-transform: uppercase; font-weight: normal; display: block;}
.about_app img{width: auto; height: 42px; max-width: 100%; border: none; margin: .5em 0 !important; display: inline-block;}
.about_app p{font-size: 18px; color: #342E2E; font-weight: normal; display: block;}
#micButton{display: none !important;}
.video_container{left: 0; width: 100%; height: 83%; position: relative;}
#closeVideo {display:none; position:absolute; top:-2em; right:0; z-index:10000;}

@media only screen and (min-width: 1200px)  and (max-width: 1366px){
h6 {font-size: 1.1rem; margin-top: -.5em;}
.main_serach textarea {height: 80px;}
.logo img {height: 56px;}
.search_area p {margin: -.5rem 0 1rem;}
.main_serach1 {margin-bottom: 1em;}
.container {margin: 2.5em auto;}
.container h1 {font-size: 4rem}
.pb_logo {height: 46px;}
.howitworks-overlay-left {height: 72vh;}
#videoThumbnail {height: 62vh;}
#howItWorksRight p {margin-top: 0rem;}
.highlight-overlay-left {height: 72vh;}
}

@media only screen and (min-width: 720px) and (max-width: 1024px) {
    .logo {left: 2rem; top: 2em;}
    .howitworks-overlay-left.active .logo {left: 0; top: 0;}
    .highlight-overlay-left.active .logo {left: 0; top: 0;}
    .menu-toggle {position: absolute; top: 1rem; right: 2rem;}
    .menu-toggle img{width: 55px;}
    .pb_logo {width: auto; height: 46px; max-width: 100%; left: 2em; bottom: 1em; position: absolute;}
    .logo img {width: auto; height: 62px; max-width: 100%;}
    .container {margin: 3.15em auto; padding: 0; height: 86vh; width: 92%;}
    .container h1 {font-size: 2.4rem;}
    .container h3 {font-size: 1.2rem;}
    h6 {font-size: 1.1rem; margin-bottom: 1rem; line-height: 16px;}
    h6 span {font-size: 2rem;}
    h6 label {font-size: 3rem;}
    p {font-size: 0.9rem;}
    .about_app p{font-size: 0.9rem !important;}
    .highlight {clear: right; display: inline-flex;}
    .search-box input { font-size: 0.7rem; }
    .search_area { display: block; margin: 4rem 2rem; padding: 0; } 
    .login-box { position: absolute; right: 0; top: 70%; transform: translateY(-50%); display: block; align-items: center; gap: 1rem; z-index: 2000; }
    .login-box span { color: #2b2b2b; font-size: 14px; text-align: center; display: block; }
    .login-box a { background: none; border: 1px solid #494643; border-right: none !important; padding: 1rem 3rem; border-radius: 1rem 0 0 1rem; z-index: 2000; text-decoration: none; color: #2b2b2b; font-size: 1.2em; display: block; }
    .side-menu {width: 28%; height: 86vh;}
    .howitworks-overlay-right img {height: 400px;}
    .ofy-scroll {height: 54vh;}
    .ofy-scroll_01 {height: 54vh;}
    #videoThumbnail{height: 62vh;}
    .video_container {height: 96%;}

    
}
@media only screen and (min-width: 320px) and (max-width: 480px) {
    .body_bg_01 {background-size: auto;}
    .logo {left: 1em; top: 2em;}
    .menu-toggle {position: absolute; top: 1rem; right: 1rem;}
    .menu-toggle img{width: 55px;}
    .pb_logo {width: auto; height: 42px; max-width: 100%; right: 1em; position: absolute; margin: 0; display: block; top: 4em; left: auto;}
    .logo img {width: auto; height: 62px; max-width: 100%;}
    .container {margin: 1em auto; padding: 0; height: 96vh; width: 92%;}
    .container h1 {font-size: 2rem;}
    .container h3 {font-size: 1.4rem;}
    h6 {font-size: 1rem; margin: 1rem .5rem 1rem; line-height: 16px;}
    h6 span {font-size: 2rem;}
    h6 label {font-size: 3rem;}
    p {font-size: 1.03rem;}
    .search_area p {font-size: 1rem; margin: 1rem .5rem;}
    .highlight {clear: right; display: inline-flex;}
    .search-box input { font-size: 0.7rem; }
    .search_area { display: block; margin: 5rem 1rem 3rem; padding: 0; } 
    .main_serach textarea{width: 88%; font-size: 12px;}
    .login-box {position: relative; right: 0; top: 2%; display: block; align-items: center; gap: 1rem; z-index: 9; margin: 0 auto;}
    .login-box a {background: none; border: 1px solid #494643 !important; padding: 1rem 3rem; border-radius: 1rem; z-index: 2000; text-decoration: none; color: #2b2b2b; font-size: 1.2em; display: block; width: 190px; margin: 0 auto;}
    .side-menu {width: 64%; height: 96vh; border-radius: 0 2em 2em 0; display: none;}
    
    .howitworks-overlay-left {display: none; width: 100%; z-index: 1001; position: absolute; border-radius: 0 0 2em 2em; top: 50%; height: 407px;}
    .howitworks-overlay-left.active .logo img {display: none;}
    .howitworks-overlay-right {display: none; height: 83vh; overflow:hidden; position: absolute; top: 7em; right: 0; width: 100%; background-color: #DBD5D0; border-radius: 0 0 2em 2em; padding: 1.5rem; z-index: 1001; box-shadow: none;}

    .highlight-overlay-left {display: none; height: 82vh; position: absolute; z-index: 999; top: 7em; width: 100%; border-radius: 0 0 2em 2em; padding: 1.5rem;}
    .highlight-overlay-left.active .logo img {display: none;}
    .ofy-scroll {height: 37vh;}
    .ofy-scroll_01 {height: 72vh;}
    .ofy-scroll_01 img {margin: 1em 0; height: 100px;}
    #videoThumbnail {place-items: flex-start; height: 62vh; width: 100%;}
    .login_bg {left: 10%; transform: translate(-6%, -50%);}
    .about_app img {height: 42px !important;}
    .about_app p {font-size: 16px;}
    .about_app h3 {font-size: 20px;}
    .video_container{left: 0; width: 100%; height: 96%; position: relative;}
    #closeVideo {border: none; cursor: pointer; background: none; display:none; position:absolute; top:-2em; right:-1em; z-index:10000;}
    .btn_vclose{display: block !important;}
}