@import "./header.css";

:root {
   --base-appcolor-primary: #2c4260;
   --base-appcolor-primary-dark: #1e324d;
   --base-appcolor-secondary: #2ecc71;
}

ul, ol {
   list-style: inside;
}
strong {
   font-weight: 700 !important;
}

/* grid col */
/* .row [class*="col-"]{
   margin-bottom: -99999px;
   padding-bottom: 99999px;
}

.row {
   overflow: hidden; 
} */

.row-is-centered {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
}

.header img.m-logo { display: none; }
.header img.m-logo-white { display: block; }

.header.fixed img.m-logo { display: block; }
.header.fixed img.m-logo-white { display: none; }

.item-grid-center {
   display: inline-block;
   vertical-align: middle;
   float: none;
   margin-right: -4px;
}
/* grid col end */

.box-main {
   padding: 14px 18px;
   border: 1px solid transparent;
   transition: all 0.35s;
}
.box-main:hover {
   border: 1px solid #e5e5e5;
}
.box-main .media {
   text-align: center;
   margin-bottom: 20px;
}
.box-main .media i {
   font-size: 3rem;
}
.box-main .media .inner {
   width: 65px;
   height: 65px;
   /* display: inline-block; */
   /* margin: 0 auto; */
   padding: 10px;
   background-color: var(--base-appcolor-primary);
   border-radius: 4px;
}
.box-main .media .inner .svg-icon path {
   fill: #fff;
}
.box-main .media .inner .svg-icon path.is-green {
   fill: var(--base-appcolor-secondary);
}
.box-main .content {
   min-height: 135px;
}
.box-main .content h4 {
   margin-bottom: 20px;
   /* text-align: center; */
   font-weight: 600;
}
.box-main .content p {
   text-align: justify;
   margin-bottom: 0;
   font-size: 14px;
   font-weight: 500;
}

/* .box-grid-custom .col-md-4 {
   padding-left: 0;
   padding-right: 0;
}
.box-grid-custom .col-md-4:first-child {
   padding-left: 15px;
}
.box-grid-custom .col-md-4:last-child {
   padding-right: 15px;
} */


/* FIRST SECTION */
.section.is-home {
   background-color: #fff;
   padding: 220px 0 130px !important;
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center right;
}
.section.is-home .overlay {
   opacity: 0.75;
   background-color: #fff;
}
.section.is-home .side-image {
   margin-top: -25px !important;
}
.section.is-home h1 {
   color: #000 !important;
   font-size: 36px !important;
   font-weight: 500 !important;
}
.section.is-home p {
   color: #000;
}
.shape-rect {
   width: 54%;
   height: 105%;
   /* background-color: var(--base-appcolor-primary); */
   background-color: whitesmoke;
   position: absolute;
   top: -16%;
   left: -10%;
   transform: rotate(-15deg);
   border-bottom-right-radius: 100px 100px;
}

.shape-circle {
   width: 385px;
   height: 385px;
   position: absolute;
   background-color: #2ecc71;
   border-radius: 50%;
   left: 5%;
   top: 50%;
   transform: translateY(-50%);
}

.btn-is-theme {
   background-color: var(--base-appcolor-secondary) !important;
   border-color: var(--base-appcolor-secondary) !important;
}

.btn-is-theme-dark {
   background-color: var(--base-appcolor-primary) !important;
   border-color: var(--base-appcolor-primary) !important;
}
/* FIRST SECTION END */


/* WHY-US SECTION */
.section.why-us {
   padding: 140px 0 120px;
}
/* WHY-US SECTION END */


/* FITUR SECTION */
.fitur-list img {
   border-radius: 5px;
   width: 100%;
   height: 280px;
   object-fit: cover;
}
/* FITUR SECTION END */


/* REVIEW/TESTIMONI SECTION */
.section.is-testimoni {
   background-color: var(--base-appcolor-primary);
   padding: 140px 0 120px;
}
/* REVIEW/TESTIMONI SECTION END */


/* FOOTER SECTION */
.footer.is-footer {
   background-color: var(--base-appcolor-primary);
}
.footer-bottom {
   background-color: var(--base-appcolor-primary-dark);
}
.footer-wrap {
   position: relative;
}
.footer-wrap .shape-footer {
   display: none;
}
.parallelogram {
   height: 65px;
   width: 100px; 
   background: white;
   border-radius: 5px;
   -webkit-transform: skew(20deg); 
   -moz-transform: skew(20deg); 
   -o-transform: skew(20deg);
   /* transform: skew(20deg); */
   transform: skew(0deg);
   align-items: center;
   display: flex;
   justify-content: center;
}
@media screen and (min-width: 992px) {
   .footer-wrap .shape-footer {
      display: block;
      position: absolute;
      top: 0;
      right: 0;
      width: 190px;
      height: 100%;
   }
   .footer-wrap .shape-footer path {
      fill: #f0f0f0;
   }
}
/* FOOTER SECTION END */


/* CUSTOM MODAL VIDEO */
.modal {
   text-align: center;
   padding: 0!important;
}

.modal:before {
   content: '';
   display: inline-block;
   height: 100%;
   vertical-align: middle;
   margin-right: -4px;
}

.modal-dialog {
   display: inline-block;
   text-align: left;
   vertical-align: middle;
}

#videoPopup .popup-video {
   padding: 0;
}

#videoPopup .close.is-customized {
   display: inline-block;
   float: none;
   position: absolute;
   top: 0;
   right: -100px;
   font-size: 50px;
   opacity: 1;
   color: #fff;
   line-height: 15px;
}

#videoPopup .close.is-customized .svg-icon {
   width: 45px;
   height: 45px;
   fill: #fff;
}

@media screen and (min-width: 768px) {
   #videoPopup .modal-dialog {
      width: 675px;
   }
}

/* SECTION PRICING */
.pricing-plan_wrapper {
   padding: 30px;
   border: 1px solid rgba(189,189,189,.9);
   border-radius: 4px;
   margin-bottom: 25px;
}

.pricing-plan_title .info { 
   margin-bottom: 15px;
}

.pricing-plan_title .info h3 {
   margin-bottom: 20px;
   font-weight: 700;
   font-size: 28px;
}

.pricing-plan_title .info .price .logo-currency {
   font-size: 30px;
}

.pricing-plan_title .info .price .value {
   font-size: 44px;
   line-height: 37px;
   position: relative;
   display: inline-block;
}

.pricing-plan_title .btn-custom {
   border-radius: 50px;
   background-color: var(--base-appcolor-primary);
   border-color: var(--base-appcolor-primary);
}

.pricing-plan_features .subtitle-feature {
   margin-bottom: 15px;
   font-weight: 500;
   font-size: 18px;
}

.pricing-plan_features .list-features li {
   padding: 6px 0;
   font-weight: 400;
}

.pricing-plan_wrapper.is-featured {
   background-color: var(--base-appcolor-primary);
}

.pricing-plan_wrapper.is-featured .pricing-plan_title .info {
   color: #fff;
}

.pricing-plan_wrapper.is-featured .pricing-plan_title .info h3 {
   color: #fff;
}
.pricing-plan_wrapper.is-featured .pricing-plan_features .subtitle-feature {
   color: #fff;
}
.pricing-plan_wrapper.is-featured .pricing-plan_features .list-features li {
   color: #fff;
}
.pricing-plan_wrapper.is-featured .pricing-plan_title .btn-custom {
   background-color: #fff;
   border-color: #fff;
   color: var(--base-appcolor-primary-dark);
   font-weight: 600;
}

@media screen and (max-width: 992px) {
   .shape-rect, .shape-circle {
      display: none;
   }   
}

@media screen and (max-width: 768px) {
   .header.is-override {
      background-color: var(--base-appcolor-primary) !important;
   }
   .shape-rect, .shape-circle {
      display: none;
   }
   .fitur-list .img-target {
      margin-bottom: 20px;
   }
}