/* ---------------------------------------------
Table of contents
------------------------------------------------
01. font & reset css
02. reset
03. global styles
04. header
05. banner
06. features
07. testimonials
08. contact
09. footer
10. preloader
11. search
12. portfolio

--------------------------------------------- */
/* 
---------------------------------------------
font & reset css
--------------------------------------------- 
*/
@import url("https://fonts.googleapis.com/css?family=Open+Sans:100,200,300,400,500,600,700,800,900");
/* 
---------------------------------------------
reset
--------------------------------------------- 
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, div
pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q,
s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
figure, header, nav, section, article, aside, footer, figcaption {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}

:root {
  --unit-color: #162447; /* default */
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clearfix {
  display: inline-block;
}

html[xmlns] .clearfix {
  display: block;
}

* html .clearfix {
  height: 1%;
}

ul, li {
  padding: 0;
  margin: 0;
  list-style: none;
}

header, nav, section, article, aside, footer, hgroup {
  display: block;
}

* {
  box-sizing: border-box;
}

html, body {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  background-color: #fff;
  font-size: 16px;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  text-decoration: none !important;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0px;
  margin-bottom: 0px;
}

ul {
  margin-bottom: 0px;
}

p {
  font-size: 14px;
  line-height: 25px;
  color: #4a4a4a;
}

img {
  width: 100%;
  overflow: hidden;
}

/* 
---------------------------------------------
global styles
--------------------------------------------- 
*/
html,
body {
  background: #fff;
  font-family: 'Open Sans', sans-serif;
}

::selection {
  background: #FFBF78;
  color: #fff;
}

::-moz-selection {
  background: #FFBF78;
  color: #fff;
}

@media (max-width: 991px) {
  html, body {
    overflow-x: hidden;
  }
  .mobile-top-fix {
    margin-top: 30px;
    margin-bottom: 0px;
  }
  .mobile-bottom-fix {
    margin-bottom: 30px;
  }
  .mobile-bottom-fix-big {
    margin-bottom: 60px;
  }
}

.main-button-gradient a {
  font-size: 13px;
  color: #fff;
  background: #FFEEA9;
background: linear-gradient(90deg,rgba(255, 238, 169, 1) 0%, rgba(255, 125, 41, 1) 77%);
  padding: 12px 30px;
  display: inline-block;
  border-radius: 5px;
  font-weight: 500;
  text-transform: uppercase;
  transition: all .3s;
}

.main-button-gradient a:hover {
  background: #FFEEA9;
background: linear-gradient(90deg,rgba(255, 238, 169, 1) 0%, rgba(255, 125, 41, 1) 77%);
  opacity: 0.9;
}

.white-button a {
  font-size: 13px;
  color: #FFBF78;
  background-color: #fff;
  padding: 12px 30px;
  display: inline-block;
  border-radius: 5px;
  font-weight: 500;
  text-transform: uppercase;
  transition: all .3s;
}

.white-button a:hover {
  opacity: 0.9;
}

.text-button a {
  font-size: 14px;
  font-weight: 500;
  color: #FFBF78;
  text-decoration: underline !important;
  transition: all .3s;
}

.text-button a:hover {
  opacity: 0.75;
}

section {
  margin-top: 140px;
}

#contact-section {
  padding-top: 20px;
}

.section-heading {
  position: relative;
  z-index: 2;
  padding-top: 20px;
  margin-top: 0px;
  text-align: center;
  margin-bottom: 60px;
}

.section-heading h6 {
  font-size: 13px;
  text-transform: uppercase;
  color: #7a7a7a;
  font-weight: 600;
}

.section-heading h4 {
  margin-top: 10px;
  line-height: 40px;
  font-size: 28px;
  font-weight: 900;
  text-transform: capitalize;
  color: #111;
}

.section-heading h4 em {
  font-style: normal;
  color: #FFBF78;
}

.section-heading p {
  margin-top: 30px;
}




/* 
---------------------------------------------
banner
--------------------------------------------- 
*/

section.main-banner {
  margin-top: 0px;
}

.main-banner {
  padding-top: 180px;
}

.main-banner .right-image {
  margin-left: 120px;
  position: relative;
  z-index: 2;
}

.main-banner .right-image img {
  position: relative;
  z-index: 2;
}


.main-banner .header-text h6 {
  position: relative;
  z-index: 2;
  font-size: 17px;
  font-weight: 500;
  text-transform: capitalize;
  color: #777777;;
}

.main-banner .header-text h2 {
  position: relative;
  z-index: 2;
  margin-top: 20px;
  font-size: 64px;
  color: #111111;
  font-weight: 900;
  line-height: 74px;
  margin-bottom: 40px;
}

.main-banner .header-text h2 em {
  font-style: normal;
  color: #FFBF78;
}

.main-banner .main-button-gradient {
  position: relative;
  z-index: 2;
}


/*
---------------------------------------------
services
---------------------------------------------
*/ 

.services .item {
  border-radius: 15px;
  text-align: center;
  padding: 50px 30px;
  margin: 15px;
  transition: all .3s;
}

.services .item:hover {
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.06);
}

.services .item .icon {
  max-width: 75px;
  margin: 0 auto;
  min-height: 80px;
  line-height: 80px;
  vertical-align: middle;
}

.services .item h4 {
  margin-top: 15px;
  margin-bottom: 15px;
  font-size: 20px;
  font-weight: 800;
}

.services .owl-dots {
  text-align: center;
  margin-top: 30px;
}

.services .owl-dots .owl-dot {
  width: 10px;
  height: 10px;
  background-color: #ddd;
  border-radius: 50%;
  margin: 0px 4px;
}

.services .owl-dots .active {
  background-color: #FFBF78;
}


/*
---------------------------------------------
our courses
---------------------------------------------
*/

section.our-courses {
  position: relative;
}

section.our-courses .section-heading p {
  padding: 0px 60px;
}


section.our-courses .naccs {
  position: relative;
  z-index: 5;
}

section.our-courses .naccs .menu div {
  padding: 15px 30px;
  text-align: center;
  border-radius: 5px !important;
  margin-bottom: 40px;
  font-size: 20px;
  color: #111;
  background-color: #fff;
  cursor: pointer;
  vertical-align: middle;
  font-weight: 900;
  transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1);
  border: 3px solid #FFEEA9;
}

section.our-courses .naccs .menu div.active {
  color: #FFBF78;
  border: 3px solid #FFBF78;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.05);
}

section.our-courses ul.nacc {
  margin-left: 100px !important;
  position: relative;
  min-height: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
  transition: 0.5s all cubic-bezier(0.075, 0.82, 0.165, 1);
}

section.our-courses ul.nacc li {
  background-color: #fff;
  overflow: hidden;
  opacity: 0;
  transform: translateX(50px);
  position: absolute;
  list-style: none;
  transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1);
  border-radius: 15px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.05);
  padding-right: 50px;
}

section.our-courses ul.nacc li .left-image {
  position: absolute;
  margin-right: 50px;
  top: 50%;
  transform: translateY(-50%);
}

section.our-courses ul.nacc li .left-image img {
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
}

section.our-courses ul.nacc li .left-image .price h6 {
  position: absolute;
  background: #FFEEA9;
background: linear-gradient(90deg,rgba(255, 238, 169, 1) 0%, rgba(255, 125, 41, 1) 77%);
  color: #fff;
  top: 20px;
  left: 20px;
  font-size: 20px;.background-header
  font-weight: 700;
  width: 50px;
  height: 50px;
  border-radius: 3px;
  display: inline-block;
  text-align: center;
  line-height: 50px;
}

section.our-courses ul.nacc li .right-content {
  padding: 40px 0px;
  margin-left: 350px;
}

section.our-courses ul.nacc li .right-content h4 {
  font-size: 20px;
  color: #111;
  margin-bottom: 25px;
  font-weight: 800;
}

section.our-courses ul.nacc li .right-content ul {
  margin-top: 20px;
  margin-bottom: 20px;
}

section.our-courses ul.nacc li .right-content span {
  font-size: 14px;
  font-weight: 600;
  margin-right: 30px;
  padding-right: 30px;
  border-right: 2px solid #111;
}

section.our-courses ul.nacc li .right-content .last-span {
  margin-right: 0px;
  padding-right: 0px;
  border-right: none;
}

section.our-courses ul.nacc li .right-content p {
  margin-bottom: 20px;
}

section.our-courses ul.nacc li .right-content .text-button {
  margin-top: 20px;
}

section.our-courses ul.nacc li.active {
  position: relative;
  transition-delay: 0.3s;
  z-index: 2;
  opacity: 1;
  transform: translateX(0px);
}

section.our-courses ul.nacc li p {
  margin: 0;
}


/*
---------------------------------------------
cta
---------------------------------------------
*/

section.simple-cta {
  background-image: url(../images/bg-time.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  width: 100%;
  padding: 180px 0px 180px 0px;
  z-index: 2;
    position: relative;
}

section.simple-cta .left-image {
  margin-right: 45px;
}

section.simple-cta h6 {
  font-size: 17px;
  color: #fff;
}

section.simple-cta h4 {
  font-size: 62px;
  font-weight: 900;
  color: #fff;
  line-height: 74px;
  margin-top: 20px;
}

section.simple-cta p {
  color: #fff;
  margin-top: 30px;
  margin-bottom: 40px;
}


/* 
---------------------------------------------
testimonials
--------------------------------------------- 
*/

section.testimonials {
  position: relative;
  overflow: visible !important;
}

section.testimonials:before {
    position: absolute;
    content: '';
    background-image: url(../images/light-1.svg);
    background-size: contain;
    background-repeat: no-repeat;
    left: 200px;
    top: 11px;
        width: 600px;
    height: 600px;
    z-index: 1;
}


.testimonials .item {
  border-radius: 15px;
  padding: 30px;
  background-color: #fff;
  margin: 15px;
  transition: all .3s;
  position: relative;
  z-index: 2;
}

.testimonials .item:hover {
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.06);
}

.testimonials .item p {
  font-size: 16px;
  font-style: italic;
}

.testimonials .item h4 {
  margin-top: 30px;
  font-size: 20px;
  font-weight: 900;
  position: relative;
}

.testimonials .item span {
  font-size: 13px;
  font-weight: 700;
  color: #FFBF78;
}

.testimonials .item img {
  max-width: 44px;
  z-index: 2;
  position: absolute;
  right: 30px;
  bottom: 30px
}

.testimonials .owl-dots {
  text-align: center;
  margin-top: 30px;
}

.testimonials .owl-dots .owl-dot {
  width: 10px;
  height: 10px;
  background-color: #ddd;
  border-radius: 50%;
  margin: 0px 4px;
}

.testimonials .owl-dots .active {
  background-color: #FFBF78;
}

/* 
---------------------------------------------
offers
--------------------------------------------- 
*/
section.our-offers:before {
  position: absolute;
  content: '';
  background-image: url(../images/light-1.svg);
  background-size: contain;
  left: 0px;
  top: -100px;
  width: 400px;
  height: auto;
  z-index: 1;
}



/* 
---------------------------------------------
contact us
--------------------------------------------- 
*/



section.contact-us .contact-info {
  background-color: #fff;
  margin-top: -30px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.05);
  border-radius: 15px;
  z-index: 5;
  position: relative;
  padding: 20px;
}

section.contact-us .contact-info .icon i {
  float: left;
  margin-right: 15px;
  width: 50px;
  height: 50px;
  display: inline-block;
  text-align: center;
  line-height: 50px;
  border-radius: 50%;
  background: linear-gradient(90deg,rgba(255, 238, 169, 1) 0%, rgba(255, 191, 120, 1) 36%);
  color: #fff;
}

section.contact-us .contact-info h4 {
  font-size: 18px;
  font-weight: 900;
  text-transform: uppercase;
}

section.contact-us .contact-info span {
  font-size: 15px;
  color: #FFBF78;
  font-weight: 700;
}

section.contact-us .section-heading {
  text-align: left;
  margin-bottom: 40px;
}

section.contact-us #contact {
  margin-left: -100px;
  position: relative;
  z-index: 5;
  background-color: #fff;
  margin-top: 40px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.05);
  border-radius: 15px;
  padding: 40px;
}

section.contact-us #contact input {
  width: 100%;
  height: 40px;
  border-radius: 5px;
  background-color: #f4f7fb;
  outline: none;
  border: none;
  box-shadow: none;
  font-size: 13px;
  font-weight: 500;
  color: #7a7a7a;
  padding: 0px 15px;
  margin-bottom: 30px;
}

section.contact-us #contact textarea {
  width: 100%;
  min-height: 140px;
  max-height: 180px;
  border-radius: 5px;
  background-color: #f4f7fb;
  outline: none;
  border: none;
  box-shadow: none;
  font-size: 13px;
  font-weight: 500;
  color: #7a7a7a;
  padding: 15px;
  margin-bottom: 30px;
}

section.contact-us #contact button {
  float: right;
  font-size: 13px;
  color: #fff;
  background: #FFEEA9;
background: linear-gradient(90deg,rgba(255, 238, 169, 1) 0%, rgba(255, 125, 41, 1) 77%);
  padding: 12px 30px;
  display: inline-block;
  border-radius: 5px;
  font-weight: 500;
  text-transform: uppercase;
  transition: all .3s;
  transition: all .3s;
  border: none;
  outline: none;
}

section.contact-us #contact button:hover {
  opacity: 0.9;
}

section.contact-us ul.social-icons li {
  display: inline-block;
  margin: 0px 5px;
}

section.contact-us ul.social-icons {
  text-align: center;
  margin-top: 70px;
}

section.contact-us ul.social-icons li a {
  width: 44px;
  height: 44px;
  display: inline-block;
  text-align: center;
  line-height: 44px;
  background-color: #fff;
  color: #FFBF78;
  border-radius: 50%;
  transition: all .5s;
}

section.contact-us ul.social-icons li a:hover {
  background-color: #FFBF78;
  color: #fff;
}

p.copyright {
  text-align: center;
  color: #fff;
  margin: 40px 0px;
}

p.copyright a {
  font-weight: 700;
  color: #fff;
}

/*
---------------------------------------------
heading page
---------------------------------------------
*/

section.page-heading {
  margin-top: 190px;
  text-align: center;
}


section.page-heading .header-text h4 {
  font-size: 17px;
  text-transform: capitalize;
  color: #7a7a7a;
}

section.page-heading .header-text h1 {
  font-size: 62px;
  font-weight: 900;
  color: #111;
  margin-top: 10px;
}


/*
---------------------------------------------
about us page
---------------------------------------------
*/

section.get-info .left-image {
  margin-right: 30px;
}

section.get-info .section-heading {
  text-align: left;
}

section.get-info .info-item {
  border-radius: 15px;
  text-align: left;
  padding: 60px 30px 30px 30px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.06);
  position: relative;
}

section.get-info .info-item .icon {
  position: absolute;
  left: 30px;
  top: -30px;
  width: 80px;
  height: 80px;
  display: inline-block;
  border-radius: 15px;
  text-align: center;
  line-height: 80px;
  background-color: #fff;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.06);
}

section.get-info .info-item .icon img {
  max-width: 60%;
}

section.get-info .info-item h4 {
  margin-top: 15px;
  margin-bottom: 15px;
  font-size: 20px;
  font-weight: 800;
}

section.our-team {
  position: relative;
}

section.our-team .section-heading p {
  padding: 0px 60px;
}

section.our-team:before {
  position: absolute;
  content: '';
  background-image: url(../images/light-2.svg);
  background-size: contain;
  background-repeat: no-repeat;
  top: -140px;
  width: 100%;
  height: 100%;
  z-index: 1;
}


section.our-team .naccs {
  position: relative;
  text-align: center;
}

section.our-team .naccs .menu {
  position: relative;
  display: inline-block;
}


section.our-office .left-info {
  margin-right: 0px;
  position: relative;
  z-index: 5;
  background-color: #fff;
  margin-top: 40px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.05);
  border-radius: 15px;
  padding: 40px;
}

section.our-office .left-info p {
  margin-bottom: 40px;
}

section.our-office .left-info ul li {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #4a4a4a;
  font-style: italic;
  margin-bottom: 20px;
}

section.our-office .left-info ul li:last-child {
  margin-bottom: 0px;
}

section.our-office .left-info .main-button-gradient {
  margin-top: 40px;
}

section.our-office #video {
  margin-left: -70px;
}

section.our-office #video .thumb {
  position: relative;
}

section.our-office #video .thumb .play-button {
  position: absolute;
  top: 50%;
  left: 50%;
}

section.our-office #video .thumb .play-button a {
  width: 80px;
  height: 80px;
  display: inline-block;
  text-align: center;
  line-height: 80px;
  border-radius: 50%;
  transform: translate(-40px, -40px);
  color: #fff;
  font-size: 22px;
  background: #FFEEA9;
background: linear-gradient(90deg,rgba(255, 238, 169, 1) 0%, rgba(255, 125, 41, 1) 77%);
}

section.our-office #video img {
  border-radius: 20px;
}



/*
---------------------------------------------
our services page
---------------------------------------------
*/

section.featured-product {
  position: relative;
}

section.featured-product:before {
  position: absolute;
  content: '';
  background-image: url(../images/light-1.svg);
  background-size: contain;
  left: 0px;
  top: -140px;
  width: 100%;
  height: 100%;
  z-index: 1;
}


section.featured-product .info-item {
  border-radius: 15px;
  text-align: left;
  padding: 60px 30px 30px 30px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.06);
  position: relative;
  margin-bottom: 90px;
}

section.featured-product .last-info {
  margin-bottom: 0px;
}

section.featured-product .left-info .info-item .icon {
  right: 30px;
  top: -30px;
}

section.featured-product .left-info .info-item {
  text-align: right;
}

section.featured-product .right-info .info-item .icon {
  left: 30px;
  top: -30px;
}

section.featured-product .info-item .icon {
  position: absolute;
  width: 80px;
  height: 80px;
  display: inline-block;
  border-radius: 15px;
  text-align: center;
  line-height: 80px;
  background-color: #fff;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.06);
}

section.featured-product .info-item .icon img {
  max-width: 60%;
}

section.featured-product .info-item h4 {
  margin-top: 15px;
  margin-bottom: 15px;
  font-size: 20px;
  font-weight: 800;
}

section.featured-product .product-image {
  margin: 0px 60px;
}


/*
---------------------------------------------
contact us page
---------------------------------------------
*/

section.more-info .section-heading {
  margin-bottom: 40px;
  text-align: left;
}

section.more-info p {
  margin-bottom: 40px;
}

section.more-info ul li {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #4a4a4a;
  font-style: italic;
  margin-bottom: 20px;
}

section.more-info ul li:last-child {
  margin-bottom: 0px;
}

section.more-info .count-area-content {
  margin-bottom: 20px;
  margin-top: 20px;
}

section.more-info .count-area-content .count-digit {
  background-color: #fff;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.05);
  border-radius: 15px;
  text-align: center;
  display: inline-block;
  margin-left: 50%;
  transform: translateX(-40px);
  width: 80px;
  height: 80px;
  line-height: 80px;
  font-size: 28px;
  color: #FFBF78;
  font-weight: 900;
  margin-bottom: -40px;
  position: relative;
  z-index: 2;
}

section.more-info .count-area-content .count-title {
  background-color: #fff;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.05);
  border-radius: 15px;
  text-align: center;
  font-size: 20px;
  font-weight: 900;
  color: #111;
  padding: 50px 30px 30px 30px;
  position: relative;
  z-index: 1;
}




/* 
---------------------------------------------
responsive
--------------------------------------------- 
*/


body {
  overflow-x: hidden;
}

@media (max-width: 1330px) {
  .services .owl-nav .owl-next{
    right: -30px;
  }
  .services .owl-nav .owl-prev{
    left: -25px;
  }
  .our-courses .owl-nav .owl-next{
    right: -30px;
  }
  .our-courses .owl-nav .owl-prev{
    left: -25px;
  }
}

@media (max-width: 1200px) {
  .main-banner .right-image {
    margin-left: 60px;
  }
  .main-banner .header-text h2 {
    font-size: 62px;
  }
  .services .owl-nav .owl-next{
    right: -70px;
  }
  .services .owl-nav .owl-prev{
    left: -65px;
  }
  .our-courses .owl-nav .owl-next{
    right: -70px;
  }
  .our-courses .owl-nav .owl-prev{
    left: -65px;
  }
}

@media (max-width: 1085px) {
  .services .owl-nav .owl-next{
    right: -30px;
  }
  .services .owl-nav .owl-prev{
    left: -25px;
  }
  .our-courses .owl-nav .owl-next{
    right: -30px;
  }
  .our-courses .owl-nav .owl-prev{
    left: -25px;
  }
}

@media (max-width: 1005px) {
  .services .owl-nav .owl-next{
    display: none;
  }
  .services .owl-nav .owl-prev{
    display: none;
  }
  .our-courses .owl-nav .owl-next{
    display: none;
  }
  .our-courses .owl-nav .owl-prev{
    display: none;
  }
}

@media (max-width: 992px) {

  .main-banner .header-text {
    text-align: center;
    margin-bottom: 60px;
  }
  .main-banner .right-image {
    margin-left: 0px;
  }
  section.our-courses ul.nacc {
    margin-left: 0px !important;
  }
  section.simple-cta {
    margin-top: 0px;
  }
  section.simple-cta .left-image {
    margin-right: 0px;
    margin-bottom: 45px;
  }
  section.contact-us .contact-info {
    margin-top: 15px;
  }
  section.contact-us #contact {
    margin-left: 0px;
  }
  section.contact-us #contact button {
    float: none;
  }
  section.get-info .left-image {
    margin-right: 0px;
    margin-bottom: 30px;
  }
  section.get-info .info-item {
    margin-top: 60px;
  }
  section.our-office #video {
    margin-left: 0px;
    margin-top: 30px;
  }
  section.featured-product .left-info .info-item,
  section.featured-product .right-info .info-item {
    text-align: center;
    background-color: #fff;
    position: relative;
    z-index: 2;
  }
  section.featured-product .left-info .info-item .icon {
    right: 50%;
    transform: translateX(40px);
  }
  section.featured-product .right-info .info-item .icon {
    left: 50%;
    transform: translateX(-40px);
  }
  section.featured-product .product-image {
    margin: 60px
  }
  section.our-team ul.nacc li .left-content span a,
  section.our-courses ul.nacc li .right-content span {
    margin-right: 15px;
    padding-right: 15px;
  }
}

@media (max-width: 767px) {
  section.our-courses ul.nacc li .left-image,
  section.our-team ul.nacc li .right-image {
    position: relative;
    margin-right: 0px;
    margin-left: 0px;
    transform: translateY(-0%);
  }
  section.our-courses ul.nacc li .left-image img,
  section.our-team ul.nacc li .right-image img {
    border-radius: 15px;
  }
  section.our-courses ul.nacc li,
  section.our-team ul.nacc li {
    padding: 0px;
  }
  section.our-courses ul.nacc li .right-content {
    margin-left: 0px;
    padding: 30px;
  }
  section.our-team ul.nacc li .left-content {
    margin-right: 0px;
    padding: 30px;
  }
  section.our-team .naccs .menu div {
    width: 14%;
    margin: 0px 5px;
  }
  section.our-team .naccs .menu div.active img {
    border: 3px solid #FFBF78;
  }
  section.our-team .naccs .menu div h4,
  section.our-team .naccs .menu div span {
    display: none;
  }
  section.more-info .count-area-content .count-title {
    font-size: 22px;
  }
}

/*===== NAVBAR BARU =====*/
.navbar-area {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 99;
  -webkit-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  will-change: transform; /* Memberi tahu browser elemen ini akan diubah */
  transform: translateZ(0); /* Memaksa browser menggunakan GPU layer */
}

.sticky {
  position: fixed;
  z-index: 99;
  /* Menggunakan backdrop-filter untuk efek blur transparan */
  background-color: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  /* Bayangan border bawah */
  -webkit-box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);
  -webkit-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}

.sticky .navbar {
  padding: 10px 0;
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .sticky .navbar {
    padding: 15px 0;
  }
}

/* Gaya link saat sticky (warna gelap) */
.sticky .navbar .navbar-nav .nav-item a {
  color: #162447;
}

/* Gaya underline/before saat sticky */
.sticky .navbar .navbar-nav .nav-item a::before {
  background: #FFBF78; /* Pertahankan warna highlight */
}

/* Warna icon hamburger saat sticky */
.sticky .navbar .navbar-toggler .toggler-icon {
  background: #162447;
}

.navbar {
  padding: 0;
  border-radius: 5px;
  position: relative;
  -webkit-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  padding: 20px 0; /* Padding default navbar (saat tidak sticky) */
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .navbar {
    padding: 17px 0;
  }
}

.navbar-brand {
  padding: 0;
}

.navbar-brand img {
  max-height: 60px;
}

.navbar-toggler {
  padding: 0;
}

.navbar-toggler:focus {
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

/* Icon hamburger default (warna putih) */
.navbar-toggler .toggler-icon {
  width: 30px;
  height: 2px;
  background-color: #162447;
  display: block;
  margin: 5px 0;
  position: relative;
  -webkit-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}

/* Animasi silang pada icon hamburger */
.navbar-toggler.active .toggler-icon:nth-of-type(1) {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 7px;
}

.navbar-toggler.active .toggler-icon:nth-of-type(2) {
  opacity: 0;
}

.navbar-toggler.active .toggler-icon:nth-of-type(3) {
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
  top: -7px;
}

/* Style menu mobile (navbar-collapse) */
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .navbar-collapse {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #fff;
    z-index: 9;
    -webkit-box-shadow: 0px 15px 20px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 15px 20px 0px rgba(0, 0, 0, 0.1);
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .navbar-nav {
    padding: 20px 30px;
  }
}

.navbar-nav .nav-item {
  position: relative;
  margin-left: 40px;
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .navbar-nav .nav-item {
    margin-left: 0px;
  }
}

/* Gaya link default (warna putih, saat tidak sticky) */
.navbar-nav .nav-item a {
  font-size: 18px;
  font-weight: 400;
  color: black;
  -webkit-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  padding: 10px 0;
  position: relative;
  z-index: 1;
}

/* Garis highlight di bawah link default */
.navbar-nav .nav-item a::before {
  content: "";
  position: absolute;
  height: 5px;
  width: 0;
  border-radius: 16px;
  background: #FFBF78;
  bottom: 15px;
  left: 0;
  z-index: -1;
  -webkit-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .navbar-nav .nav-item a::before {
    top: auto;
    bottom: 0;
  }
}

/* Gaya link pada tampilan mobile (warna gelap) */
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .navbar-nav .nav-item a {
    display: inline-block;
    padding: 6px 0px;
    color: #162447;
  }
}

/* Efek hover dan active (garis muncul) */
.navbar-nav .nav-item a:hover::before, .navbar-nav .nav-item a.active::before {
  width: 100%;
}


 .mega-dropdown {
      position: relative;
    }

    .mega-menu {
      position: absolute;
      top: 100%;
      right: 0;
      width: 700px;
      padding: 30px;
      background: #fff;
      border-radius: 20px;
      box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.12);
      display: none;
      z-index: 9999;
    }

    .mega-row {
      display: grid;
      grid-template-columns: 1fr 2fr;
      gap: 25px;
    }

    .mega-col.list ul li {
      margin-bottom: 12px;
    }

    .mega-col.list a {
      font-size: 17px;
      color: #162447;
      transition: .2s;
    }

    .mega-col.list a:hover {
      font-weight: 600;
    }

    .mega-col.preview img {
      width: 100%;
      height: 200px;
      object-fit: contain;
      border-radius: 14px;
      margin-bottom: 10px;
    }

    .mega-preview-title {
      font-size: 18px;
      margin-bottom: 5px;
    }

    .mega-preview-desc {
      font-size: 14px;
      color: #666;
    }

    /* Show dropdown on hover (desktop) */
    .mega-dropdown:hover>.mega-menu {
      display: block;
    }
    
    /* Container menu mobile */
    .mobile-brand-menu {
      display: none;
      overflow: hidden;
      max-height: 0;
      transition: max-height .35s ease;
      padding-left: 20px;
    }
    
    /* Saat aktif (terbuka) */
    .mobile-brand-menu.open {
      display: block;
      max-height: 300px; /* cukup untuk 3 item */
    }

    
    
   /* Only mobile */
@media (max-width: 767px) {
  .mega-menu {
    display: none !important;
  }

  .mobile-brand-menu {
    display: block;
  }
}

/* desktop */
@media (min-width: 768px) {
  .mobile-brand-menu {
    display: none !important;
  }
}



/* 
---------------------------------------------
footer Custom
--------------------------------------------- 
*/
.footer-custom {
      font-size: 0.9rem;
    }

    .footer-brand .brand-name {
      font-size: 1.6rem;
      font-weight: 700;
      display: block;
      color: #000;
    }

    .footer-brand .brand-tagline {
      font-size: 0.75rem;
      letter-spacing: 0.1em;
      color: #6c757d;
      display: block;
      margin-top: -3px;
    }

    .footer-desc {
      font-size: 0.9rem;
      line-height: 1.6;
      color: #6c757d;
      max-width: 85%;
    }

    .footer-title {
      font-size: 1rem;
      margin-bottom: 0.8rem;
      font-weight: 600;
      color: #000;
    }

    .footer-link a {
      display: block;
      color: #6c757d;
      text-decoration: none;
      margin-bottom: 0.4rem;
      font-size: 0.9rem;
      transition: color 0.2s ease;
    }

    .footer-link a:hover {
      color: #FFBF78;
    }

    .footer-divider {
      border-color: rgba(0, 0, 0, 0.08);
    }

    .footer-copy {
      font-size: 0.8rem;
      color: #6c757d;
    }

    .footer-bottom-links a {
      color: #6c757d;
      text-decoration: none;
      font-size: 0.8rem;
      margin-left: 1rem;
      transition: color 0.2s ease;
    }

    .footer-bottom-links a:hover {
      color: #FFBF78;
    }

/* 
---------------------------------------------
CSS Additional Index Page
--------------------------------------------- 
*/

.rounded-15 {
      border-radius: 15px !important;
    }

    /* Gaya untuk tombol play kustom di main-banner */
    .play-button-wrapper {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 5;
      cursor: pointer;
      background-color: rgba(0, 0, 0, 0.3);
      /* Overlay gelap agar tombol lebih menonjol */
      border-radius: 15px;
      transition: opacity 0.3s ease;
    }

    .play-button-wrapper:hover {
      opacity: 0.9;
    }


    .play-button-icon {
      width: 80px;
      height: 80px;
      display: inline-block;
      text-align: center;
      line-height: 80px;
      border-radius: 50%;
      color: #fff;
      font-size: 22px;
      /* Menggunakan gradien yang Anda berikan */
      background: linear-gradient(90deg,rgba(255, 238, 169, 1) 0%, rgba(255, 125, 41, 1) 77%);
      z-index: 10;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .play-button-icon:hover {
      transform: scale(1.1);
      box-shadow: 0 0 20px rgba(255, 125, 41, 0.7);
    }

    /* Sembunyikan tombol kustom saat video sedang diputar */
    .play-button-wrapper.is-playing {
      display: none;
    }



    .slider-container {
      position: relative;
      width: 600px;
      height: 350px;
      margin: 50px auto 30px;
      perspective: 1000px;
    }

    .product-slider {
      position: relative;
      width: 100%;
      height: 100%;
    }

    /* --- Gaya Item Produk --- */
    .product-item {
      position: absolute;
      max-width: 300px;
      height: 100%;
      border-radius: 10px;
      top: 50%;
      left: 50%;
      overflow: hidden;


      transform: translate(-50%, -50%) scale(0.5);
      opacity: 0;

      /* TRANSISI: Tetap prioritas pada 'transform' dan 'filter' */
      transition: transform 0.6s ease-out, opacity 0.6s ease-out, filter 0.6s ease-out, z-index 0s 0.6s;
      z-index: 1;
    }

    /* Gambar di dalam Item */
    .product-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      /* Memastikan gambar mengisi area tanpa terdistorsi */
      display: block;
    }

    /* 🟢 KONDISI FOKUS (ACTIVE) */
    .product-item.active {
      transform: translate(-50%, -50%) scale(1);
      opacity: 1;
      filter: none;
      /* EFEK BLUR DIHILANGKAN */
      z-index: 10;
      transition: transform 0.6s ease-out, opacity 0.6s ease-out, filter 0.6s ease-out, z-index 0s 0s;
    }

    /* 🟡 KONDISI TIDAK FOKUS (PREV & NEXT) - Efek Blur Gambar */
    .product-item.prev {
      transform: translate(-100%, -50%) scale(0.7);
      opacity: 0.7;
      filter: blur(5px);
      /* EFEK BURAM PADA GAMBAR */
      z-index: 5;
    }

    .product-item.next {
      transform: translate(0%, -50%) scale(0.7);
      opacity: 0.7;
      filter: blur(5px);
      /* EFEK BURAM PADA GAMBAR */
      z-index: 5;
    }

    /* Item yang tidak terlihat */
    .product-item:not(.active):not(.prev):not(.next) {
      opacity: 0;
      transform: translate(-50%, -50%) scale(0.5);
      z-index: 1;
    }

    .product-item-img {
      max-height: 400px;
      width: auto;
    }

    /* --- Area Konten Dinamis --- */
    .content-area {
      margin: 50px auto;
      max-width: 500px;
    }

    #product-title {
      font-size: 28px;
      color: #333;
      transition: opacity 0.3s ease;
      /* Transisi untuk judul/deskripsi agar pergantian halus */
    }

    #product-description {
      font-size: 16px;
      color: #666;
      transition: opacity 0.3s ease;
    }

    /* --- Gaya Dasar Navigasi (Adaptasi dari style.css sebelumnya) --- */
    .nav-button {
      position: absolute;
      /* Tetap pertahankan posisi absolut */
      top: 50%;
      transform: translateY(-50%);
      border: none;
      cursor: pointer;
      z-index: 15;

      /* Ukuran spesifik untuk tombol navigasi */
      width: 45px;
      height: 45px;
      padding: 0;
      /* Hapus padding yang tidak perlu */
      border-radius: 50%;
      /* Membuat tombol menjadi LINGKARAN */

      /* Atur ikon di tengah */
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s;
    }

    .prev-btn {
      left: -60px;
    }

    /* Posisi digeser keluar agar tidak menutupi slider */
    .next-btn {
      right: -60px;
    }

    /* Posisi digeser keluar agar tidak menutupi slider */


    /* --- Implementasi Gradien pada Tombol Navigasi --- */
    .main-button-gradient-nav {
      /* Gradien yang Anda berikan */
      background: linear-gradient(90deg,rgba(255, 238, 169, 1) 0%, rgba(255, 125, 41, 1) 77%);
      color: #fff;
      /* Warna ikon putih */
      box-shadow: 0 5px 15px rgba(255, 125, 41, 0.5);
      /* Bayangan untuk efek mengambang */
    }

    /* --- Gaya Ikon Font Awesome 4 --- */
    .main-button-gradient-nav .fa {
      font-size: 18px;
      /* Ukuran ikon yang lebih besar agar jelas */
      transition: all 0.3s;
    }

    /* --- Efek HOVER dan ACTIVE (Wajib untuk pengalaman pengguna yang baik) --- */
    .main-button-gradient-nav:hover {
      /* Gradien diperjelas atau sedikit digeser */
      filter: brightness(1.1);
      transform: translateY(-50%) scale(1.05);
      /* Sedikit membesar saat di-hover */
      box-shadow: 0 8px 20px rgba(255, 125, 41, 0.7);
    }

    .main-button-gradient-nav:active {
      /* Efek menekan */
      transform: translateY(-50%) scale(0.95);
      box-shadow: none;
    }



    /* Product */
    .product-section .product-img {
      position: relative;
      z-index: 1;
      padding: 75px 0;
    }

    .product-section .product-img .shape.shape-1 {
      top: 50%;
      -webkit-transform: translateY(-50%);
      transform: translateY(-50%);
      left: -70px;
      max-height: 600px;
    }

    .product-section .product-img .shape {
      position: absolute;
      z-index: -1;
    }

    .product-section .product-img-2 {
      position: relative;
      z-index: 1;
      padding: 75px 0;
    }

    .product-section .product-img-2 .shape.shape-1 {
      top: -5%;
      -webkit-transform: scaleX(-1);
      transform: scaleX(-1);
      right: -70px;
      max-height: 600px;
    }

    .product-section .product-img-2 .shape {
      position: absolute;
      z-index: -1;
    }


    @media only screen and (min-width: 992px) and (max-width: 1199px) {
      .product .shape {
        width: 80%;
      }
    }

    @media (max-width: 767px) {
      .product .shape {
        width: 70%;
      }
    }


/* 
---------------------------------------------
unit Product
--------------------------------------------- 
*/
     #hero-unit-banner {
      position: relative;
      /* Warna background terang di atas */
      padding-bottom: 0;
      overflow: hidden;
      /* Penting untuk mengontrol elemen di luar batas */
    }

    /* Container untuk botol dan elemen overlay */
    .bottle-container {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 700px;
      /* Tinggi visualisasi botol */
    }

    /* Gradient circle di belakang botol */
    .bottle-container::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 700px;
      /* Ukuran circle */
      height: 700px;
      border-radius: 50%;
      background: #C8E3D5;
      /* Gradient ringan */
      box-shadow: 0 0 50px rgba(0, 0, 0, 0.05);
      z-index: 1;
      /* Di bawah botol */
    }

    /* Gambar botol */
    .bottle-img {
      position: absolute;
      width: auto;
      /* Sesuaikan ukuran botol */
      height: 100vh;
      z-index: 2;
      /* Di atas circle */
      top: 50%;
      transform: translateY(-50%);
    }

    /* Quote/Deskripsi Produk */
    .quote-box {
      position: absolute;
      top: 250px;
      /* Posisikan ke atas sesuai gambar */
      left: 0;
      z-index: 3;
    }

    .quote-box .quote-icon {
      font-size: 4rem;
      color: var(--unit-color);
      /* Warna koper */
      line-height: 0.5;
    }

    .quote-box p {
      font-size: 1.1rem;
      font-weight: 300;
      color: #333;
      max-width: 300px;
    }

    /* Detail Volume/Alkohol */
    .volume-box {
      position: absolute;
      top: 250px;
      right: 0;
      text-align: right;
      z-index: 3;
    }

    .volume-box .volume {
      font-size: 5rem;
      font-weight: 700;
      color: #333;
      line-height: 1;
    }

    .volume-box .alcohol {
      font-size: 1.2rem;
      font-weight: 500;
      color: #333;
      margin-bottom: 10px;
    }

    .volume-box .tags {
      font-size: 1rem;
      font-weight: 300;
      color: var(--unit-color);
    }

    /* Section Gelap Bawah */
    #innovative-drinks {
      background-color: #000000;
      color: #FFFFFF;
      padding: 100px 0;
    }

    .drinks-content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 50px;
    }

    .drinks-content h2 {
      font-size: 2.5rem;
      font-weight: 700;
      color: #FFFFFF;
      margin-bottom: 20px;
    }

    .drinks-content p {
      font-size: 1.1rem;
      font-weight: 300;
      max-width: 600px;
      color: #CCCCCC;
    }

    .image-card {
      width: 300px;
      /* Ukuran card gambar */
      height: 400px;
      overflow: hidden;
      border-radius: 5px;
      flex-shrink: 0;
      /* Agar tidak menyusut */
      box-shadow: 0 10px 30px rgba(255, 255, 255, 0.1);
    }

    .image-card img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    /* Media Queries untuk Responsif */
    @media (max-width: 992px) {
      .bottle-container {
        height: 500px;
        margin-top: 50px;
      }

      .bottle-container::before {
        width: 500px;
        height: 500px;
      }

      .bottle-img {
        width: -webkit-fill-available;
        height: auto;
      }

      .quote-box,
      .volume-box {
        position: relative;
        top: 0;
        left: 0;
        right: 0;
        text-align: center;
        margin-bottom: 30px;
      }

      .volume-box {
        text-align: center;
      }

      .drinks-content {
        flex-direction: column;
        text-align: center;
      }

      .image-card {
        margin-bottom: 30px;
      }
    }

    @media (max-width: 576px) {
      .quote-box p {
        max-width: 100%;
        padding: 0 15px;
      }

      .volume-box .volume {
        font-size: 3rem;
      }
    }



    .story-content {
      display: flex;
      align-items: center;
      /* Memastikan konten (teks dan gambar) berada di tengah secara vertikal */
    }

    .title-bar {
      font-size: 3rem;
      font-weight: 700;
      color: #000000;
      margin-bottom: 25px;
      line-height: 1.1;
    }

    .story-content p {
      font-size: 1.1rem;
      font-weight: 300;
      color: #333;
      max-width: 500px;
    }

    .image-circle-container {
      display: flex;
      justify-content: flex-end;
      /* Dorong gambar ke kanan */
    }

    .image-circle {
      aspect-ratio: 4/5;
      border-radius: 50%;
      overflow: hidden;
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    }

    .image-circle img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }

    @media (max-width: 1280px) {
      .bottle-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        height: auto;
      }

      .bottle-container::before {
        display: none;
        /* Circle gradient disembunyikan di mobile */
      }

      .bottle-img {
        position: relative;
        width: 80vh;
        height: auto;
        top: unset;
        transform: unset;
        margin-bottom: 30px;
      }

      .quote-box,
      .volume-box {
        position: relative;
        top: unset;
        left: unset;
        right: unset;
        text-align: center;
        margin: 10px 0;
        z-index: 5;
      }
    }

    /* Media Query untuk Responsif */
    @media (max-width: 992px) {
      .story-content {
        flex-direction: column;
        text-align: center;
      }

      .image-circle-container {
        justify-content: center;
        /* Tengahkan gambar */
        margin-top: 50px;
      }

      .image-circle {
        width: 300px;
        height: 300px;
      }

      .story-content h2 {
        font-size: 2.5rem;
      }

      .story-content p {
        max-width: 100%;
        padding: 0 15px;
      }

      .bottle-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        height: auto;
      }

      .bottle-container::before {
        display: none;
        /* Circle gradient disembunyikan di mobile */
      }

      .bottle-img {
        position: relative;
        width: 80%;
        height: auto;
        top: unset;
        transform: unset;
        margin-bottom: 30px;
      }

      .quote-box,
      .volume-box {
        position: relative;
        top: unset;
        left: unset;
        right: unset;
        text-align: center;
        margin: 10px 0;
        z-index: 5;
      }

      #hero-unit-banner {
        margin-top: 100px !important;
      }
    }

    .shape {
      position: absolute;
      z-index: 1;
      pointer-events: none;
    }