/*---===== IMPORTED FONTS =====*/
 @import url("https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i");
 @import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@600;700;800;900&display=swap');
/*---===== IMPORTED FILES =====*/
 @import url("aos.css");
 @import url("magnific-popup.css");
 @import url("font-awesome.min.css");
 @import url("fancybox.css");
 @import url("owl.carousel.css");
 @import url("owl.carousel.min.css");
 @import url("owl.theme.default.css");
  @import url("animate.css");
    @import url("fancybox.css");

/*---===== IMPORTED FONTS =====*/ 
/* @font-face {
     font-family: Helvetica-Condensed-Bold;
     src: url("../fonts/Helvetica-Condensed-Bold.otf") format("opentype");
}*/
/*---===== ROOTS =====*/
 :root {
     --heading-font: 'Be Vietnam Pro', sans-serif;
    

     --body-font: "Poppins", sans-serif;
   
     --white-color: #fff;
     --black-color: #000;
       --primary-color: #cc0000;
     --secondary-color: #124680;
     --orange-color: #ff5a3c;
     --font-weight: bold;
     --upper-text: uppercase;
     
}
/*---===== COMMON CSS =====*/
 body {
     font-family: var(--body-font);
     color: var(--black-color);
     font-size: 17px;
}
 a, p {
     color: var(--black-color);
}
 a:hover {
     color: var(--secondary-color);
     text-decoration: none;
}
 h1, h2, h3, h4, h5, h6 {
     font-family: var(--heading-font);
}
 .row1 > .column {
     padding: 0 8px;
}
 .row1:after {
     content: "";
     display: table;
     clear: both;
}
 .column {
     float: left;
     width: 33%;
}
 .container-flex{
     width : 100%;
}
 .fa-remove:before, .fa-close:before, .fa-times:before {
     content: "\f0c9" !important;
}
 ::selection {
     background:var(--orange-color);
     color: var(--white-color);
     text-shadow: none;
}
 .cursor {
     cursor: pointer;
}
/*---===== SECTION CSS =====*/
 section {
     padding: 60px 0;
     overflow: hidden;
}
 .section-bg {
     background-color: #7FBCD2;
     ;
}
 .section-img{
     background: url(../img/climpek.png);
}
 .section-title {
     text-align: center;
     padding-bottom: 30px;
}
 .section-title h2 {
     font-size: 13px;
     letter-spacing: 1px;
     font-weight: 700;
     padding: 8px 20px;
     margin: 0;
     background: #e7f1fd;
     color: #0e418b;
     display: inline-block;
     text-transform: uppercase;
     border-radius: 50px;
}
 .section-title h3 {
     color: var(--orange-color);
     margin: 15px 0 0 0;
     font-size: 32px;
     font-weight: 700;
     position: relative;
}
 .section-title h3 span {
     color: #000;
}
 .section-title p {
     margin: 15px auto 0 auto;
     font-weight: 600;
}
/*---===== HEADER CSS =====*/
#header{
     background: #fff;
     position: relative;
     z-index: 5;
     width: 100%;
     padding: 5px 0;
     box-shadow: rgb(50 50 93 / 25%) 0px 2px 5px -1px, rgb(0 0 0 / 30%) 0px 1px 3px -1px;
     -webkit-transition: all 0.5s ease;
     -moz-transition: position 10s;
     -ms-transition: position 10s;
     -o-transition: position 10s;
     transition: all 0.5s ease;
}
 #header.header-scrolled{
     position: fixed;
     top: 0;
     left: 0;
     animation: smoothScroll 1s forwards;
}
 @keyframes smoothScroll {
     0% {
         transform: translateY(-80px);
    }
     100% {
         transform: translateY(0px);
    }
}
}

 #header .logo {
     font-size: 32px;
     margin: 0;
     padding: 0;
     line-height: 1;
     font-weight: 600;
     letter-spacing: 0.8px;
}
 #header .logo a {
     color: #222222;
}
 #header .logo a span {
     color: #106eea;
}
 #header .logo img {
     max-height: 40px;
}
/*---===== NAVBAR =====*/
/* Desktop Navigation */
 .nav-menu ul {
     margin: 0;
     padding: 0;
     list-style: none;
}
 .nav-menu > ul {
     display: flex;
}
 .nav-menu > ul > li {
     position: relative;
     white-space: nowrap;
     padding: 10px 0 10px 28px;
}
 .nav-menu a {
     display: block;
     position: relative;
     color: #222222;
     transition: 0.3s;
     font-size: 18px;
     font-weight: 600;
     padding: 0 3px;
     font-family: "Open Sans", sans-serif;
}
 .nav-menu > ul > li > a:before {
     content: "";
     position: absolute;
     width: 100%;
     height: 2px;
     bottom: -5px;
     left: 0;
     background-color: var(--secondary-color);
     visibility: hidden;
     width: 0px;
     transition: all 0.3s ease-in-out 0s;
}
 .nav-menu a:hover:before, .nav-menu li:hover > a:before, .nav-menu .active > a:before {
     visibility: visible;
     width: 100%;
}
 .nav-menu a:hover, .nav-menu .active > a, .nav-menu li:hover > a {
     color: var(--orange-color);
}
 .nav-menu .drop-down ul {
     display: block;
     position: absolute;
     left: 26px;
     top: calc(100% + 30px);
     z-index: 99;
     opacity: 0;
     visibility: hidden;
     padding: 10px 0;
     background: #fff;
     box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
     transition: 0.3s;
}
 .nav-menu .drop-down:hover > ul {
     opacity: 1;
     top: 100%;
     visibility: visible;
}
 .nav-menu .drop-down li {
     min-width: 180px;
     position: relative;
}
 .nav-menu .drop-down ul a {
     padding: 10px 20px;
     font-size: 14px;
     font-weight: 500;
     text-transform: none;
     color: #062b5b;
}
 .nav-menu .drop-down ul a:hover, .nav-menu .drop-down ul .active > a, .nav-menu .drop-down ul li:hover > a {
     color: #106eea;
}
 .nav-menu .drop-down > a:after {
     content: "\ea99";
     font-family: IcoFont;
     padding-left: 5px;
}
 .nav-menu .drop-down .drop-down ul {
     top: 0;
     left: calc(100% - 30px);
}
 .nav-menu .drop-down .drop-down:hover > ul {
     opacity: 1;
     top: 0;
     left: 100%;
}
 .nav-menu .drop-down .drop-down > a {
     padding-right: 35px;
}
 .nav-menu .drop-down .drop-down > a:after {
     content: "\eaa0";
     font-family: IcoFont;
     position: absolute;
     right: 15px;
}
/* Mobile Navigation */
 .mobile-nav-toggle {
     position: fixed;
     right: 15px;
     top: 15px;
     z-index: 9998;
     border: 0;
     background: none;
     font-size: 24px;
     transition: all 0.4s;
     outline: none !important;
     line-height: 1;
     cursor: pointer;
     text-align: right;
}
 .mobile-nav-toggle i {
     color: #222222;
}
 .mobile-nav {
     position: fixed;
     top: 55px;
     right: 15px;
     bottom: 15px;
     left: 15px;
     z-index: 9999;
     overflow-y: auto;
     background: #fff;
     transition: ease-in-out 0.2s;
     opacity: 0;
     visibility: hidden;
     border-radius: 10px;
     padding: 10px 0;
}
 .mobile-nav * {
     margin: 0;
     padding: 0;
     list-style: none;
}
 .mobile-nav a {
     display: block;
     position: relative;
     color: #222222;
     padding: 10px 20px;
     font-weight: 500;
     outline: none;
}
 .mobile-nav a:hover, .mobile-nav .active > a, .mobile-nav li:hover > a {
     color: #106eea;
     text-decoration: none;
}
 .mobile-nav .drop-down > a:after {
     content: "\ea99";
     font-family: IcoFont;
     padding-left: 10px;
     position: absolute;
     right: 15px;
}
 .mobile-nav .active.drop-down > a:after {
     content: "\eaa1";
}
 .mobile-nav .drop-down > a {
     padding-right: 35px;
}
 .mobile-nav .drop-down li {
     padding-left: 20px;
}
 .mobile-nav-overly {
     width: 100%;
     height: 100%;
     z-index: 9997;
     top: 0;
     left: 0;
     position: fixed;
     background: rgba(9, 9, 9, 0.6);
     overflow: hidden;
     display: none;
     transition: ease-in-out 0.2s;
}
 .mobile-nav-active {
     overflow: hidden;
}
 .mobile-nav-active .mobile-nav {
     opacity: 1;
     visibility: visible;
}
 .mobile-nav-active .mobile-nav-toggle i {
     color: #fff;
}
/*---===== BACK TO TOP =====*/
 .back-to-top {
     position: fixed;
     display: none;
     right: 15px;
     bottom: 30px;
     z-index: 99999;
}
 .back-to-top i {
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 24px;
     width: 40px;
     height: 40px;
     border-radius: 4px;
     background: var(--orange-color);
     color: #fff;
     transition: all 0.4s;
}
 .back-to-top i:hover {
     background:var(--secondary-color);
     color: #fff;
}