/* General HTML */
html{background:#0c2142;min-height:100vh;width:100%}
body{font-family:'Heebo','Kanit','Prompt','Sarabun',Tahoma,Arial,sans-serif;font-size:14px;color:#212428;background:#fff;width:100%;overflow-x:hidden;word-break:break-word;margin:0 auto}
h1,h2,h3,h4,h5,h6{font-weight:400}
a{text-decoration:none}
a:hover,a:focus,a:active{text-decoration:none;color:#0c2142}

select {
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background: #fff url('chevron-down-solid.svg') center right no-repeat;
	background-size: 12px 12px;
	background-origin: content-box;
}
select:focus {background-image:url('chevron-up-solid.svg')}

/* Mstyle Mod */
.scroller {
	scrollbar-color: #0c2142 transparent;
	scrollbar-width: thin;
}
.scroller::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}
.scroller::-webkit-scrollbar-track-piece  {
	background-color: transparent;
}
.scroller::-webkit-scrollbar-thumb,
.scroller::-webkit-scrollbar-thumb:vertical,
.scroller::-webkit-scrollbar-thumb:horizontal {
	height: 8px;
	background-color: #0c2142;
}

.bg-hl {background-color:#0c2142}
.fc-hl {color:#0c2142}

section.main {position:relative;min-height:calc(100vh - 256px)}
section.main:after {display:block;content:'';clear:both}

/* Main Menu */
.fixed-area {height:128px}
.menu-pc {height:128px;position:fixed;z-index:100;width:100%;background:#fff;box-shadow:0 1px 0 0 #ddd4}
.m-logo-area {position:absolute;z-index:101;left:1.5rem;top:50%;transform:translateY(-50%);margin:0 auto;text-align:center;font-size:28px}
.m-logo-area img {height:80px}
.m-logo-area .logo-text {display:inline-block;max-width:calc(100vw - 1.5rem - 100px)}
.m-logo-area a {color:#0c2142;transition:.5s all}
.m-logo-area a:hover {color:#0c2142}
.m-menu-area {position:absolute;z-index:102;right:1.5rem;top:50%;transform:translateY(-50%);font-size:22px}
.m-menu-area ul {list-style-type:none;padding:0;margin:0}
.m-menu-area li {display:inline-block;margin:0;float:left}
.m-menu-area li a {box-shadow:0 -3.2px 0 0 transparent inset;color:#818284;font-weight:400;text-shadow:1px 0 transparent;letter-spacing:1px;display:inline-block;height:50px;line-height:50px;padding:0 24px;text-transform:uppercase;transition:1.5s all}
.m-menu-area li a:hover,.m-menu-area li a:focus,.m-menu-area li a:active,.m-menu-area li a.active {box-shadow:0 -3.2px 0 0 #0c2142 inset;color:#0c2142;font-weight:400;text-shadow:1px 0 #0c2142;transition:.5s all}
.m-menu-area li:after {display:block;content:'';clear:both}

/* Main Content BG */
#whyoraya {background:#0c2142 url(../imgs/bg-why-2.png) left bottom no-repeat}
#whyoraya .bg-only {background:url(../imgs/bg-why-1.png) right top no-repeat}
#ourwork {background:#fff url(../imgs/bg-work-2.png) left top no-repeat}
#ourwork .bg-only {background:url(../imgs/bg-work-1.png) right top no-repeat}
#about {background:#f1f2f4}
#service {background:#fff}
#faqs {background:#f1f2f4}
#contact {background:#fff}

/* Main Content Styles */
.jumbo-text,
.jumbo-center {font-size:calc(20px + 2vw);font-weight:600}
.jumbo-center {text-align:center}

#whyoraya {padding-bottom:96px}
#whyoraya .jumbo-center {color:#fff;text-shadow:1px 0 #fff,-1px 0 #fff;letter-spacing:2px;padding:64px 16px}
.why-o-box {padding:32px;border-radius:8px;background:#fff;height:100%;font-size:18px;color:#636468}
.why-o-box p {font-size:calc(22px + .22vw);color:#0c2142;line-height:calc(1.1em + .2vw);text-shadow:1px 0 #0c2142;letter-spacing:1px}
.why-o-icon {position:relative;width:120px;height:120px;border-radius:50%;background:#0c2142;margin-bottom:48px}
.why-o-icon img {position:absolute;width:60px;height:60px;margin:0 auto;top:50%;transform:translateY(-50%);left:0;right:0}

#ourwork {padding-bottom:96px}
#ourwork .jumbo-center {color:#0c2142;text-shadow:1px 0 #0c2142,-1px 0 #0c2142;letter-spacing:2px;padding:64px 16px}
.our-work-bg {background:#0c2142 url(oraya-icon.png) center no-repeat;background-size:cover;border-radius:8px;height:100%}
.our-work-bg.wbg-1 {background-image:url(../imgs/Home-Our-work-1.jpg)}
.our-work-bg.wbg-2 {background-image:url(../imgs/Home-Our-work-2.jpg)}
.our-work-bg.wbg-3 {background-image:url(../imgs/Home-Our-work-3.jpg)}
.our-work-bg.wbg-4 {background-image:url(../imgs/Home-Our-work-4.jpg)}
.our-work-bg.wbg-5 {background-image:url(../imgs/Home-Our-work-5.jpg)}
.our-work-bg.wbg-6 {background-image:url(../imgs/Home-Our-work-6.jpg)}
.our-work-bg.wbg-7 {background-image:url(../imgs/Home-Our-work-7.jpg)}
.our-work-bg.wbg-8 {background-image:url(../imgs/Home-Our-work-8.jpg)}
.our-work-box {padding:32px;border-radius:8px;background:#0c2142;background:#0c2142aa;height:100%;font-size:18px;color:#fff;text-shadow:0 0 4px #000;transition:.5s all}
.our-work-box p {font-size:calc(18px + .1vw);color:#fff;text-shadow:1px 0 #fff;letter-spacing:1px;text-align:center}
.our-work-box:hover {background:#0c2142}
.our-work-icon {height:96px;text-align:center}
.our-work-icon img {height:80px;width:auto;margin:0 auto}

#about {padding-bottom:96px}
#about .jumbo-text {color:#0c2142;text-shadow:1px 0 #0c2142,-1px 0 #0c2142;letter-spacing:2px;padding:64px 16px 16px}
.about-story-image {background:#0c2142 url(../imgs/about-oraya-gems.jpg) center no-repeat;background-size:cover;min-height:400px;height:100%;border-radius:8px}
.about-story-text {padding:24px}
.about-story-text h1 {font-size:calc(30px + .3vw);color:#0c2142;text-shadow:1px 0 #0c2142,2px 0 #0c2142;letter-spacing:2px}
.about-story-text p {color:#636468;font-size:18px;margin:28px auto 0}
.goal-box {background:#fff url(../imgs/bg-about-1.png) top right no-repeat;border-radius:8px;padding:24px}
.goal-box p {font-size:calc(22px + .22vw);color:#0c2142;text-shadow:1px 0 #0c2142;letter-spacing:1px;margin-top:2rem;margin-bottom:8px}
.goal-title {font-size:calc(28px + .22vw);color:#0c2142;text-shadow:1px 0 #0c2142,2px 0 #0c2142;letter-spacing:2px}
ul.goal {list-style-type:circle;margin:0;padding:0 16px}
ul.goal li {padding-left:16px;padding-bottom:6px;font-size:16px}
.our-vm-bg {background:#0c2142 url(oraya-icon.png) center no-repeat;background-size:cover;border-radius:8px;height:100%}
.our-vm-bg.vmbg-1 {background-image:url(../imgs/Vision.jpg)}
.our-vm-bg.vmbg-2 {background-image:url(../imgs/Mission.jpg)}
.our-vm-box {padding:48px;border-radius:8px;background:#0c2142;background:#0c2142cc;height:100%;font-size:18px;color:#fff;text-shadow:0 0 4px #000;transition:.5s all}
.our-vm-box h4 {font-size:calc(20px + .2vw);color:#fff;text-shadow:1px 0 #fff;letter-spacing:1px;margin-bottom:24px}
.our-vm-box:hover {background:#0c2142}

#service {padding-bottom:96px}
#service .jumbo-text {color:#0c2142;text-shadow:1px 0 #0c2142,-1px 0 #0c2142;letter-spacing:2px;padding:64px 16px 16px}
.service-image {background:#0c2142 url(../imgs/Service.jpg) center no-repeat;background-size:cover;min-height:480px;height:100%;border-radius:8px}
.service-box {position:relative}
.service-box:after {display:block;content:'';clear:both;height:48px}
.service-icon {float:left;position:relative;width:120px;height:120px;border-radius:50%;background:#0c2142}
.service-icon img {position:absolute;width:60px;height:60px;margin:0 auto;top:50%;transform:translateY(-50%);left:0;right:0}
.service-text {float:right;width:calc(100% - 144px);font-size:16px;color:#636468}
.service-text h3 {font-size:calc(20px + .2vw);color:#0c2142;text-shadow:1px 0 #0c2142;letter-spacing:1px;margin-bottom:24px}

#faqs {padding-bottom:96px}
#faqs .jumbo-center {color:#0c2142;text-shadow:1px 0 #0c2142,-1px 0 #0c2142;letter-spacing:2px;padding:64px 16px 16px}
#faqs .accordion-button:not(.collapsed) {background:#0c2142;color:#fff}
#faqs .accordion-button {background:#0c2142;color:#fff}
#faqs .accordion-button.collapsed:after {background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");}
#faqs .accordion-item {margin-bottom:20px;border-radius:8px}
#faqs .accordion-header > .accordion-button {font-size:20px;padding:24px}
#faqs .accordion-body {font-size:16px;padding:24px}

#contact {padding-bottom:96px}
#contact .jumbo-text {color:#0c2142;text-shadow:1px 0 #0c2142,-1px 0 #0c2142;letter-spacing:2px;padding:64px 16px 16px}
.contact-left {background:#0c2142;color:#fff;text-align:center}
.contact-left img {border-radius:50%;margin:16px auto 24px;width:128px;height:128px}
.contact-right {background:#f1f2f4;color:#0c2142}
.contact-right h5 {font-size:calc(20px + .2vw);color:#0c2142;text-shadow:1px 0 #0c2142;letter-spacing:1px;padding:24px 0 8px;margin-bottom:0}
.contact-right p {font-size:18px;color:#0c2142;margin-bottom:1.5rem}
.contact-hr {margin:32px auto;width:40%;height:2.4px;background:#fff;opacity:.5}
.contact-hr:after {display:block;width:100%}

footer .laststand {background:#f1f2f4;color:#0c2142}
footer .laststand img {max-width:100%}
footer .laststand ul {list-style-type:none}
footer .laststand ul li {padding:0;margin:8px auto}
footer .laststand ul a {padding:8px 0;color:#0c2142;text-shadow:1px 0 #0c2142;letter-spacing:1px;font-size:20px;transition:.5s all}
footer .laststand ul a:hover {opacity:.5}
footer .laststand h5 {text-shadow:1px 0 #0c2142;letter-spacing:1px}
footer .sns {padding:8px 0}
footer .sns a {transition:.5s all}
footer .sns a:hover {opacity:.5}
footer .sns:after {display:block;content:'';clear:both}
footer .sns-bg {display:inline-block;position:relative;margin-right:12px;width:48px;height:48px;background:#0c2142;text-align:center;border-radius:50%}
footer .sns-bg img {position:absolute;width:auto;height:20px;margin:0 auto;left:0;right:0;top:50%;transform:translateY(-50%);z-index:5}
footer .copyright {background:#0c2142;color:#f1f2f488}
footer .copyright {padding:16px;text-align:center;font-size:20px}

/* Media landscape */
@media screen and (orientation:landscape), screen and (min-width:1200px) {
	.m-logo-area .logo-text {display:inline-block;margin-left:24px}
	.contact-left {border-top-left-radius:8px;border-bottom-left-radius:8px}
	.contact-right {border-top-right-radius:8px;border-bottom-right-radius:8px}
}
/* Media portriat */
@media screen and (orientation:portrait), screen and (max-width:1199px) {
	.m-logo-area {width:calc(100% - 1.5rem);left:0;right:0;margin:0 auto}
	.m-logo-area .logo-text {z-index:102;position:absolute;top:50%;transform:translateY(-50%);right:0;text-align:left;width:calc(100vw - 1.5rem - 120px)}
	.m-menu-area {display:none}
	.fixed-area {display:none}
	.menu-pc {position:relative}
	.jumbo-text {text-align:center}
	.why-o-icon {text-align:center;margin: 0 auto 24px}
	.service-icon,
	.service-text {float:none}
	.service-text {display:block;width:100%}
	.service-icon {text-align:center}
	.service-icon {margin:24px auto}
	footer .laststand .lsd-1 {text-align:center}
	footer .laststand .lsd-3 {text-align:center}
	footer .laststand .lsd-4 {text-align:center}
	footer .sns-bg {margin:6px}
}

/* Lazy Script Effect */
.lz-fade-in {opacity:.01;transition:.5s all}
.lz-fade-in.lazyActiveStyle {opacity:1;transition:1.5s all}
.lz-slide-left {opacity:.01;transform:translateX(48px);transition:.2s all}
.lz-slide-left.lazyActiveStyle {opacity:1;transform:translateX(0px);transition:.5s all}