@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Open+Sans:wght@300;400&display=swap');
@import url("fonts/fonts.css");
html, body{
    margin: 0;
    padding: 0;
    width:100%;
    height:100%;
    font-size: 100%;
    font-family: 'Gellix-Regular', sans-serif;
    line-height: 1.4;
    font-weight: 300;
    position: relative;
}
h1,h2,h3,h4,h5,h6{font-family: 'Lagu-Sans-Bold', sans-serif;}
p,a{font-family: 'Gellix-Regular', sans-serif; line-height: 1.4;}
.rw0{margin-left:0; margin-right:0;}
.lr{
    padding-left:0;
    padding-right:0;
}
b, strong {
    font-weight: 900;
}
:root{
    /*--primary: #00B050;*/
    --primary: #1D234F;
    --secondary:#1C9AD6;
    --yellow: #FFD530;
    --green: #59BD7B;
    --dark:#141414;
    --black:#000000;
    --grey:#F5F5F5;
    --white:#FFF;
    --pale-green: #E6F7EE;
    --pale-grey: #F6F6F6;
    --purple: #762691;
}
.spacer{width:100%; height:1px; padding:3% 0;}
/* ----bg colors */
.pri-bg{background-color: var(--primary) !important;}
.sec-bg{background-color: var(--secondary) !important;}
.white-bg{background-color: var(--white) !important;}
.dark-bg{background-color: var(--dack) !important;}
.pale-green-bg{background-color: var(--pale-green) !important;}
.pale-grey-bg{background-color: var(--pale-grey) !important;}
.pale-yellow-bg{background-color: var(--pale-yellow) !important;}
.black-bg{background-color: var(--black) !important;}
.purple-bg{ background-color: var(--purple) !important;}
.blur-bg{ backdrop-filter: blur(10px);}
.filter-bg{filter: grayscale(1); transition: all 0.5s ease-in-out;}
.filter-bg:hover{filter: grayscale(0.2); transition: all 0.5s ease-in-out;}
/* ----------------- */
/* --text colors--- */
.pri-txt, .primary-text{color: var(--primary) !important;}
.sec-txt, .secondary-text{color: var(--secondary) !important;}
.leaf-txt, .leaf-text{color: var(--leaf-green) !important;}b
.dark-txt, .dark-text{color: var(--dack);}
.pale-green-txt, .pale-green-text{color: var(--pale-green) !important;}
.black-txt, .black-text{color: var(--black) !important;}
.white-txt, .white-text{color: var(--white) !important;}
.purple-txt, .purple-text{color: var(--purple) !important;}
/* ------------------ */
.img{width:100%;}
/*--------------------*/

.header{ position: fixed; top: 0; left:0; width:100%; padding:0 0 0; transition: all 0.5s ease-in-out;background-color: #fff; box-shadow: 1px 1px 6px #6969669e; z-index:999;}
.header .top-nav{ 
    background-color: var(--primary); color: #fff; padding: 0 10px;
    /* background-image: linear-gradient(45deg, var(--secondary), var(--primary), var(--green)); */
}
.top-nav ul.navs-2{ padding:0; margin:0;}
.top-nav ul.navs-2 li{ list-style: none; display: inline-block; position: relative;}
.top-nav ul.navs-2 li a{ display: block; padding:5px 15px 8px; text-decoration: none; color: #C7C6C6; font-size: clamp(.8rem, 1.2vw, .9rem);}
.top-nav ul.navs-2 li a span{ font-size: clamp(.8rem, 1.2vw, .99rem); }
.top-nav ul.navs-2 li a:hover{ color: var(--yellow);}
.header-bg{ background:#ffffffd6; backdrop-filter: blur(10px); transition: all 0.5s ease-in-out;}

.logos{ display:block; max-height:60px; padding:5px 0;}
.logos img{ max-height:60px;}
.menu{font-size: 1.8rem; padding: 4px 7px; margin: 13px 0 6px; border: 1px solid var(--primary); color: var(--primary); display: none; cursor: pointer;}
.navigations{ width: 100%; text-align:left;}
ul.navs{ padding:0; margin:0;}
ul.navs li{ list-style: none; display: inline-block; position: relative;}
ul.navs li a{ display: block; padding:20px 15px; text-decoration: none; color: var(--primary); font-size: clamp(1rem, 1.4vw, 1.2rem); font-weight: 400; font-family: 'Open Sans', sans-serif;}
ul.navs li a:hover{ text-decoration:none; color: var(--dark);}
ul.navs li ul{ position: absolute; top: 110%; margin:0; padding: 0; background:var(--primary); display: none; opacity: 0; min-width:250px; transition: all 0.5s ease-in-out; z-index: 999;}
ul.navs li:hover ul{ display: block; opacity: 1; top: 100%; transition: all 0.5s ease-in-out; background-color: var(--pale-green);}
ul.navs li ul li{ list-style: none; display: block;}
ul.navs li ul li a{ display: block; text-decoration: none; text-align: left; color:var(--dark); padding: 10px 10px; border-bottom:1px solid #c7dbca;}
ul.navs li ul li a:hover{ color: var(--primary);}

.section{ position: relative; width:100%; padding:2% 10px; background-position: center; background-size: cover; background-repeat: no-repeat;}
.hero-section{ 
    background-color:var(--white); 
    background-position: center; 
    padding:0; 
    background-size: cover; 
    display: block; 
    transition:all 0.9s ease-in-out;
}
/* .hero-section::after{position:absolute; bottom:0;right:0; content: ""; width:50%; height:50%; overflow: hidden; background-size: contain; background-repeat: no-repeat; background-position: right bottom; background-image: url('../../images/parten-4.png')} */
.section-full{ min-height:100%; height: auto;}
.section-75{ min-height:75%; height: auto;}
.section-50{ min-height:50%; height: auto;}
.section-25{ min-height:25%; height: auto;}
.bg-blend{background-color: #A60068; background-blend-mode: multiply;}

.layor-skin{
    position:absolute; top: 0; left:0; 
    width:100%; height:100%; 
    z-index: 0; 
    background-color: #632D4FCC; 
    /* backdrop-filter: blur(5px); */
}
.container{position:relative; z-index: 99;}

.inner-banner{padding-top: 3.5%;}
.inner-banner .inner-box{
    position: relative;
    background-color: var(--primary);
    color: var(--white);
}
.inner-banner .inner-box::after{
    position: absolute;
    top:-5px;
    right:-5px;
    content: "";
    background-image: url('/images/angle-grn-right.png');
    background-repeat: no-repeat;
    background-position: top right;
    background-size:70px;
    width:120px;
    height:120px;
}

.inner-box .title{
    font-family: 'Lagu-Sans-Bold', sans-serif;
    font-size: clamp(1.3rem, 3vw, 2.1rem);
    line-height: 1.1;
    font-weight: 600;
}
.inner-img{
    background-position: center;
    background-size: cover;
    min-height:360px;
    width: 100%;
}

.features {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
}
.flex-box { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex;}
.f-nav-bar, .f-nav-bar-gry{ display: inline-block; text-decoration: none; padding:10px 20px 14px; background: #EC6608; color:#fff; font-size:1rem; text-decoration:none;}
.f-nav-bar-gry{ background:#F5F5F5;  color:#07C59F;}
.f-nav-bar:hover, .f-nav-bar-gry:hover{ text-decoration:none; color:inherit;}
.frm-title{ padding:10px 0; color:#EC6608;font-family: 'Lagu-Sans-Bold', sans-serif;}
.form-control { font-weight: 400; line-height: 1.5; color: #111111; background-color: #f8f7f7; background-clip: padding-box; border: 1px solid var(--grey); border-radius: 4px; transition: border-color 0s ease-in-out,box-shadow 0s ease-in-out; padding: 8px 20px 10px; }
.form-control:focus { color:#495057; background-color:#fff; border-color: var(--primary); outline:0; box-shadow:0 0 0 0 rgba(0,123,255,0) }
.submit-btns{ padding-top: 30px; margin-bottom:20px;}
.submit-button{margin: 20px auto; background-color: var(--secondary); color: var(--primary); font-size: 0.9rem; font-weight:600; padding: 10px 20px; border-radius: 0; display: block; width: 100%;}
.submit-button:hover{background-color: #b6b6b6;}
/* -------------//------------- */
/*---------Team feature------*/
.team{text-align: left; border-radius: 5px;}
.team .team-box{position:relative; transform: scale(1); text-decoration: none; display: block; max-width:300px; color: var(--white); margin: 0 auto; margin-top: 10px; border:1px solid #eee; overflow:hidden; box-shadow: 2px 2px 7px #d5d5d52e; background-color: #fcfcfc; transition: all 0.5s ease; z-index:1;}
.team .team-box:hover{transition: all 0.5s ease;}
.team-box .img{background-color: var(--pale-grey); height:350px; width:100%; background-size:cover; background-position: top center; background-repeat: no-repeat; overflow:hidden; display: flex; align-items: end;}
.team-box .img img{max-width:80%; margin: 0 auto;}
.team-box .team-captn{position:relative; width:100%; font-weight:500; color: var(--primary); padding:10px; transition: all 0.5s ease;font-size: 0.75rem; backdrop-filter: blur(2px);}
.team-box .team-captn .name{color: inherit; font-size: 1.1rem; padding:5px 0 2px; font-weight: 700;}
.team-box .team-captn .title{color: inherit; font-family: 'Gellix-Regular', sans-serif; font-size:0.9rem; line-height:1.1; padding-bottom: 15px;}
.team-box .team-captn .contact{color: inherit;padding: 15px 0; border-top:1px solid var(--grey);}
.team-box .team-captn .contact .detail{color: inherit; font-size:0.85rem; line-height:1.1; margin-bottom: 10px; text-decoration: none;}
.team-box .team-captn .contact .detail a{color: inherit; font-size:0.85rem; line-height:1.1; margin-bottom: 10px; text-decoration: none;}

.team-box:hover .team-captn{position:relative; bottom:-1px; transition: all 0.4s ease;}
.team .team-box:hover{ transform: scale(1.01); z-index: 3; transition: all 0.5s ease;}

.member{padding:10px 0;font-size: clamp(1rem, 1.5vw, 1.25rem);}
.member img{width:100%; margin-bottom: 5px;}
.member .title, .member h3{font-family: 'Lagu-Sans-Bold', sans-serif; padding:5px 0; font-size:clamp(1.3rem, 1.7vw, 1.7rem); font-weight:700; color: var(--primary);}
.member .contact{padding:5px 0; text-decoration: none; font-size: 1.1rem}
.member .contact i{color: #777;}
.member .contact a{text-decoration: none; font-size: 1.1rem; color: inherit;}
.member .stretch{height:480px; overflow:hidden; transition: all 0.5s ease-in-out;}
.more{height:100% !important; transition: all 0.5s ease-in-out;}
.read-more{cursor:pointer; padding: 2px 0; border-bottom: 1px solid var(--primary);}
/* -------------------------------------- */
.footers{
    width:100%; padding:3% 10px 1px; background-color:var(--primary); color: var(--white);
    background-image: url('../../images/patten-ft.png');
    background-repeat: no-repeat;
    background-size: 17%;
    background-position: bottom left;
    background-blend-mode: exclusion;
}
.footers h4{font-size:1.1rem;}
.footers img{max-height:60px;}
.footer-nav{ padding:20px 0;}
.footer-nav ul{ padding:0; margin: 0;}
.footer-nav ul li{ list-style: none; display: block;}
.footer-nav ul li a{ display: block; text-decoration: none; color: var(--dark); font-size: 1rem; padding: 6px 5px;}
.footer-nav ul li a:hover{ color: var(--primary);}
.footer-logo{padding:3% 10px;}
.footer-contact{margin:0; padding:3% 10px; color: var(--white);}
.footer-contact a{text-decoration: none; color:inherit; color: #cdcaca; font-size: 1rem;}
/* ------------------- */
.social{ padding:10px 0; margin-top:10px; display:inline-flex; width:100%; text-align: right;}
.social a{text-decoration: none; border:1px solid  var(--primary); color:var(--primary); padding:6px 10px; margin-right:10px; display:block; font-size:1.1rem; transition: all .5s ease-in-out; }
.social a:hover{text-decoration: none; background-color:var(--primary); color: var(--white); transition: all .5s ease-in-out; }
/* ------------------ */
.quick-link{display: block; text-decoration: none; list-style-type: none; margin:0; padding:0;}
.quick-link li{text-decoration: none;}
.quick-link li a{display: block; text-decoration: none; padding:4px 4px; margin-bottom: 0; color: #cdcaca;}
.quick-link li a:hover{background-color: var(--primary); color: var(--white);}
/* ------------------ */
.bottom-footer{
    border-top: 0.01rem solid #79849e; padding:10px 20px; color: #8590ac; font-size: .9rem;
}
.bottom-footer .span-r{text-align: right; display: block;}
/* ------------------ */
.share {color: var(--primary);}
.share a {
  display: inline-block;
  font-size: 1rem;
  color: var(--yellow);
  border: 1px solid var(--yellow);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  margin-right: 8px;
}
/*------------------------------------*/
/* .section .tab-content ul{margin: 0; padding: 0;}
.section .tab-content ul li{list-style: none; margin-top:5px;}
.section .tab-content ul li{position:relative; text-decoration: none; display: block; padding: 2px 15px;}
.section .tab-content ul li::after{position: absolute; left: 0; top: 5px; color: #000000; line-height:0.8; font-size:1.5rem !important; content: "»"; } */
/* -----Keyframe animations---- */

@keyframes rand-border-radius {
    0% {
        border-radius: 72% 28% 58% 42% / 31% 50% 50% 69%;
        animation-delay: 11s;
    }
    50% {
        border-radius: 65% 35% 54% 46% / 55% 60% 40% 45%;
        animation-delay: 15s;
    }
    75% {
        border-radius: 54% 46% 62% 38% / 43% 56% 44% 57%;
        animation-delay: 18s;
    }
    100% {
        border-radius: 72% 28% 58% 42% / 31% 50% 50% 69%;
        animation-delay: 21s;
    }
} 

@keyframes float {
	0% {
		box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
		transform: translatey(0px);
	}
	50% {
		box-shadow: 0 25px 15px 0px rgba(0,0,0,0.2);
		transform: translatey(-20px);
	}
	100% {
		box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
		transform: translatey(0px);
	}
}
/* ============================ */
.error{color:red;}
@media(max-width:1390px){
    .hero-section{min-height:500px;}
}

@media(max-width:992px){
    .menu{ display: inline-block;}
    .navigations{ position: fixed; top: 0; left: -280%;  width: 80%; min-height:100vh; text-align:left;  background: #642D50AB; backdrop-filter: blur(10px);  padding:20px; display:block; transition: all 0.5s ease-in-out;  z-index: 9999;}
    .shownav{left: 0; transition: all 0.5s ease-in-out;}
    ul.navs li{ display: block;}
    ul.navs li a{ display: block; padding:12px 10px; color:#fff;}
    ul.navs li ul, ul.navs li:hover ul{ position: relative; display: block; opacity: 1; top:0;}
    .hero2-section{min-height: 93%;}
}

@media(max-width:768px){
    .header { padding: 5px 0;}
    .features{display: block;}
    .flex-box{display: block;}
    .header .top-nav { display:none; }
}

@media(max-width:480px){
    .logos{ padding:15px 0;}
    .logos img{ max-height:50px;}
    .section-75{ min-height:25%; height: auto;}
    .section-half{ min-height:25%; height: auto;}
    .section-25{ min-height:15%; height: auto;}
    .newsletter .inner .title {font-size: 1.3rem;}
    .cat-list ul li{min-width:100%;}
    .btn-green, .btn-line {font-size: 1rem; padding: 2px 10px; margin: 5px 0;}
    .btn-primary, .btn-secondary, .btn-line{font-size: 1rem; padding: 8px 25px 9px;}
    .btn-primary::after, .btn-secondary::after, .btn-line::after {line-height: 39px;width: 93%;}
    .news-list .inner-cont {padding: 0 0;}
    .news-list .thumbnail {min-height:100px; height: 200px;}
    .news-list .thumbnail-2{min-height: 160px;}
    .inner-img {min-height: 200px;}
    .spacer {padding: 8% 0;}
}