#header #header-wrap{ border: none; box-shadow: 0 12px 6px rgb(0 0 0 / 15%);}
#header #header-wrap #logo a>img{ padding: 8px 0;}

#mainMenu nav>ul>li{ margin-left: 0px;}
#mainMenu nav>ul>li>a{ font-size: 1rem; font-weight: 600; padding: 0 20px; line-height: 80px; display: inline-block;color: #4a6a5b;}
#mainMenu nav>ul>li.active>a, #mainMenu nav>ul>li.current>a, #mainMenu nav>ul>li.current>span, #mainMenu nav>ul>li.hover-active>a, #mainMenu nav>ul>li.hover-active>span, #mainMenu nav>ul>li:focus>a, #mainMenu nav>ul>li:focus>span, #mainMenu nav>ul>li:hover>a, #mainMenu nav>ul>li:hover>span{
color: #ffffff;
    background: #4a6a5b;
    box-shadow: inset 0px -3px 0px #4a6a5b;
}

.slide-caption{text-align: left;
    width: 60%;
    left: 59%;
    padding-right: 24%;
    bottom: initial;
    top: 29%;} 
.slide-caption .htitle{ margin-bottom: 15px; color: #202020; font-weight: 800; letter-spacing: 0; font-size: 4rem; font-family: kanit; font-weight: 400;}
.slide-caption .stitle{ font-size: 4rem; margin: 0; line-height: 1; font-weight: 400;}
.slide-caption p{ font-size: 1.45rem; font-family: kanit;}

a.btn.btn-plain { font-family: kanit;}

@media(max-width: 991px){
	#header +.fullscreen{ 
		top: 0px !important; 
		margin-bottom: 0px !important;
		padding: 0 !important;
		height: auto !important;
	}
	#header.header-transparent #header-wrap #logo{ top: 0;}
	#header #mainMenu-trigger{ width: -webkit-fit-content;}
	#header #mainMenu-trigger button{ float: left;}
	#header #logo>a{height: -webkit-fill-available;}

	#header #mainMenu:not(.menu-overlay) nav>ul>li>a{ padding: 0; line-height: 40px;}

}
@media(max-width: 768px){
	.slide-caption{ top: 15%;width: 55%;}
	.slide-caption .htitle{ font-size: 2.25rem;}
	.slide-caption p{ font-size: 1.25em;}
}
@media(max-width: 480px){
	.slide-caption .htitle{ font-size: 1.6rem;}
	.slide-caption p{ font-size: 0.8rem}
	.slide-caption .btn{ font-size: 1rem; line-height: 38px;}
}
@media(max-width: 320px){
	.slide-caption{ top: 10%; width: 60%;}
	.slide-caption .htitle{ font-size: 1.2rem; margin-bottom: 10px;}
	.slide-caption .btn{ font-size: .9rem; line-height: 32px;letter-spacing: 0; padding: 0 20px;}
}
#suop--ele___headBanner {
    clear: both;
}


@media (min-width: 360px) and (max-width: 767px){
h3.title-aboutme-1 {margin-bottom: 0px!important;}
.block-aboutme-1{padding-bottom: 230px;}
.card{height: 720px!important;background-color: rgb(255 255 255 / 80%)!important;}
.slide-caption .btn {line-height: 28px!important;}
.slide-caption p {margin-bottom: 10px!important;}
.slide-caption .htitle {margin-bottom: 0px;}
.col-xs-12.col-sm-12.col-md-2.col-right {clear: right;width: unset!important;padding: 0 3px;}
.social-icons ul {margin-top: 0px!important;}
.social-icons li {margin-right: 0px!important;}
.social-icons.social-icons-rounded li a {height: 40px!important;width: 40px!important;}
.social-icons ul li i {font-size: 18px!important;padding: 12px;color: #fff;}
h4.htitle {
    padding-left: 20px;
    padding-right: 15px;
    padding-top: 5px!important;
    color: #fff;
}
img.qr-code {float: right;}


}