/*
Theme Name: OceanWP Child
Theme URI: https://oceanwp.org/
Description: OceanWP WordPress theme example child theme.
Author: Nick
Author URI: https://oceanwp.org/
Template: oceanwp
Version: 1.0
*/

/* Parent stylesheet should be loaded from functions.php not using @import */

@media only screen and (max-width: 1199px) {
}
@media only screen and (max-width: 1023px) {
}
@media only screen and (max-width: 767px) {
}
@media only screen and (max-width: 479px) {
}


section {position: relative; overflow: hidden; }
section, .cta {text-align: center;}

/*================================================================
Remove the black outline when focus on links
=================================================================*/
a:focus {outline: 0 !important;}

/*================================================================
Reset theme default 
=================================================================*/
body .theme-button, body input[type="submit"], body button[type="submit"], body button, body .button, body div.wpforms-container-full .wpforms-form input[type=submit], body div.wpforms-container-full .wpforms-form button[type=submit], body div.wpforms-container-full .wpforms-form .wpforms-page-button, .woocommerce-cart .wp-element-button, .woocommerce-checkout .wp-element-button, .wp-block-button__link {border:unset !important;}

form input[type=text], form input[type=password], form input[type=email], form input[type=url], form input[type=date], form input[type=month], form input[type=time], form input[type=datetime], form input[type=datetime-local], form input[type=week], form input[type=number], form input[type=search], form input[type=tel], form input[type=color], form select, form textarea {margin-bottom: 10px; font-size: larger;}

input[type=button], input[type=reset], input[type=submit], button[type=submit], .button, body div.wpforms-container-full .wpforms-form input[type=submit], body div.wpforms-container-full .wpforms-form button[type=submit], body div.wpforms-container-full .wpforms-form .wpforms-page-button, .woocommerce-cart .wp-element-button, .woocommerce-checkout .wp-element-button, .wp-block-button__link {font-size: larger; letter-spacing:unset; text-transform: unset; }

header form input[type="search"] {color: #000;}

/*================================================================
Buttons
=================================================================*/
.bluebutton,
body button[type="submit"] {display: inline-block; background-color: #00a5e3; border:solid #fff 2px !important; color: #fff; padding: 15px 35px; border-radius: 7px; line-height: 1.3em; font-weight: 500; font-size: larger; transform: scale(1); transition: all 0.3s ease; box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.4);}
.bluebutton:hover,
body button[type="submit"]:hover {background-color: #dce57e; border:solid #fff 2px; color: #000 !important; transform: scale(1.05);}
body button[type="submit"]:focus {background-color: #00a5e3; color: #fff;} 
.bluebutton .main {}
.bluebutton .sub {font-weight: normal; font-size:smaller; }
/*
.outlinebutton {background-color:#0F090A; border:solid #00a5e3 1px;}
.outlinebutton:hover {background-color: #FCA311; border:solid #FCA311 1px;}
.blackbutton {background-color: #0F090B; border:none; padding: 10px 30px; box-shadow: 0 5px 8px 1px rgba(0, 0, 0, 0.3);}
.blackbutton:hover {background-color:#FCA311; border:none; box-shadow: 0 2px 6px 1px rgba(0, 0, 0, 0.3);} 
.subbutton {} 

.contentbutton a { display:inline-block; text-decoration:none!important; color: #fff; background-color: #0F090B; border:none; padding: 1em 2em; box-shadow: 0 5px 8px 1px rgba(0, 0, 0, 0.3); border-radius: 7px;}
.contentbutton a:hover { text-decoration:none!important; color: #fff; background-color:#FCA311; border:none; box-shadow: 0 2px 6px 1px rgba(0, 0, 0, 0.3);}
*/

/*================================================================
Header
=================================================================*/
#site-header {padding:20px 0; }

#site-logo #site-logo-inner {height:auto; width: 120px;}
#site-logo #site-logo-inner a {display: block;}

#menu-main a {color: #fff !important; }
#menu-main a:hover {color:#EC1C24 !important;} 
#menu-main .highlight {border: solid 1px #ec1c24; border-radius: 7px; margin-left: 12px;}

#site-navigation-wrap {margin-top: 5px;}

/*================================================================
Menu
=================================================================*/
.oceanwp-mobile-menu-icon a {font-size: 22px; color:#fff; }
a.sidr-class-toggle-sidr-close {display: flex; align-items: center;}

/*================================================================
Content
=================================================================*/
.section-top-bottom-padding {padding-top: 100px; padding-bottom: 100px;}

span.highlight {color: #00c2f3;}
.micro-heading {font-size: smaller;}

section.bg-gradient {background-image: url(https://wp-support.com.my/wp-content/themes/oceanwp-child-theme-master/images/bg-gradient.svg); background-repeat:repeat-x; background-position:top; background-size: 10px 698px; }

.bg-image-wrap {position: absolute; inset: 0; z-index: -1;}
.bg-image-wrap img {width: 100%; height: 100%; object-fit: cover;}

#wps-hero {background-image: url(https://wp-support.com.my/wp-content/themes/oceanwp-child-theme-master/images/bg-home-hero.webp); background-repeat: no-repeat; background-size: cover; height:100vh; overflow: hidden;}
#wps-hero .container {height: 100%; position: relative; display: flex; align-items: center; justify-content: center;}


#wps-core-support {}
.core-support-wrapper {}
.core-support-wrapper > p {max-width: 700px; margin:0 auto 40px auto;}
.core-support-icon-list {display: flex; flex-wrap: wrap; align-items:flex-start; }
.core-support-icon-item {width: 29%; margin-left: 2%; margin-right: 2%; margin-bottom: 30px;} 
.core-support-icon-item .icon {}
.core-support-icon-item .icon a {display:inline-block; width: auto; height: 90px; margin: 0 auto 8px auto; transition: transform 0.3s ease; transform: scale(1.0);}
.core-support-icon-item .icon a:hover {transform: scale(1.08);}
.core-support-icon-item .icon a img {height: 100%; width: auto;} 
.core-support-icon-item h3 {margin-bottom: 2px; z-index: 1;}
.core-support-icon-item p {margin-bottom: 12px; z-index: 1; font-size: smaller;}
.core-support-icon-item a {font-weight: bold;}


#wps-process {}
.process-wrapper {}
.process-wrapper > p {max-width: 700px; margin:0 auto 40px auto;}
.process-list {display: flex; align-items: center; justify-content: center; margin: 60px auto;}
.process-list > div {}
.process-item {width: 200px}
.process-item .icon {width: auto; height: 100px; margin: 0 auto 8px auto; }
.process-item .icon img {height: 100%; width: auto;} 
.process-item h3 {margin-bottom: 2px; z-index: 1;}
.process-item h3 span {display: block;}
.process-item p {margin-bottom: 12px; z-index: 1; font-size: smaller;}
.process-arrow { width: 40px; margin: 32px 10px auto 10px;}


#wps-whyus {/*background-image: url(https://wp-support.com.my/wp-content/themes/oceanwp-child-theme-master/images/bg-why-us.webp); background-repeat: no-repeat; background-size: cover; background-position: center center;*/ padding: 80px 0;}
.whyus-wrapper {}
.whyus-wrapper > p {max-width: 700px; margin:0 auto 40px auto;} 
.whyus-list {} 
.whyus-list ul { list-style: none; margin: 0; padding: 0; max-width: 560px; display: flex; flex-direction: column; flex-wrap: wrap; margin: auto;} 
.whyus-list ul li {display: flex; margin-bottom: 10px;}
.whyus-list ul li .icon {width:40px; margin: 0 auto 8px auto;} 
.whyus-list ul li .icon img {}
.whyus-list ul li > div:last-child {width: calc(100% - 45px); text-align: left; padding-top: 8px;}
.whyus-list ul h3 {margin-bottom: 2px; z-index: 1;} 


#wps-contact {}
.contact-wrapper {}
.form-wrapper {max-width: 550px; margin: auto;}
.fields-group {background: rgba(0,0,0,0.15); padding:40px; margin: 30px 0;}
.field-wrapper {display: flex;}
.field-wrapper div:first-child {width:210px; padding-top: 10px; padding-right: 10px; text-align: right;}
.field-wrapper div:last-child {width:calc(100% - 215px);}
.field-wrapper input[type=text],
.field-wrapper input[type=email],
.field-wrapper input[type=url],
.field-wrapper textarea {border: none; background: #fff; color: #000; padding: 4px 10px;}
.form-wrapper .bluebutton {margin-bottom: 8px;}


#wps-faq {}
.faq-wrapper {}
.faq-wrapper > p {max-width: 700px; margin:0 auto 40px auto;}
.faq-list { width: 100%; margin:60px auto 0 auto; max-width: 700px;}
.faq-item {text-align: left;}
.faq-item .question {
  position: relative;
  cursor: pointer;
  padding: 18px 50px 18px 20px;
  transition: color 0.3s ease;
  border: 1px solid rgba(255,255,255,0.3);
  margin-bottom: 5px;
}
.faq-item .question:hover {
  color: #00c2f3;
  border-color: #00a5e3;
}
.faq-item .question::after {
  content: "+";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 28px;
  font-weight: 400;
  line-height: 1;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.faq-item .question.active {
  color: #00c2f3;
  border-color: #00a5e3;
}
.faq-item .question.active::after {
  content: "−";
  color: #00c2f3;
  border-color: #00a5e3;
}
.faq-item .answer {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  padding: 0;
  transition: max-height 0.35s ease, opacity 0.25s ease, padding 0.25s ease;
}
.faq-item .answer.active {
  opacity: 1;
  padding: 10px 50px 18px 20px;
}


#wps-urgent {background:#11255e; padding: 80px 0;}
.urgent-wrapper {display: flex; align-items: center; justify-content: center; max-width: 900px; margin: auto;}
.urgent-wrapper > div:first-child {width: 220px; margin-right: 40px;}
.urgent-wrapper > div:last-child {text-align: left; width: calc(100% - 260px);}
.urgent-wrapper > div:last-child h2,
.urgent-wrapper > div:last-child p {margin-bottom: 40px;}
.urgent-wrapper > div:last-child .cta {text-align: left; }


/*================================================================
Footer
=================================================================*/
#footer {}
#footer-widgets .footer-box {padding: 0 30px;}
.footer-widgets-inner {display: flex; justify-content: center; align-items: flex-start;}
body .oceanwp-row .span_1_of_3 {/*max-width: 400px;*/ max-width: 33.33%; width: auto;}
#footer-bottom-inner {border-top: solid 1px rgba(255, 255, 255, 0.3); padding-top: 20px;}

#footer-widgets p,
#footer-widgets li {font-size: smaller;}

#footer-widgets .wp-block-list {}
#footer-widgets .wp-block-list li {margin-bottom: 7px;}

.footer-talk-to-us a {font-weight: bold; color: #00c2f3 !important; text-decoration:underline;}
.footer-talk-to-us a:hover {color: #dce57e !important; }



/*================================================================
Responsive
=================================================================*/
@media screen and (max-width: 768px) {
  .section-top-bottom-padding {padding-top: 70px; padding-bottom: 70px;}
  .core-support-icon-item {width: 46%; margin-left: 2%; margin-right: 2%;} 
  .process-list {flex-direction: column; margin: 50px auto;}
  .process-arrow {margin:20px 0 30px 0;}
  .process-arrow img {transform:rotate(90deg);}
  .faq-list {margin: 50px auto 0 auto;}
  .urgent-wrapper > div:first-child {width: 180px;}
  .urgent-wrapper > div:last-child {width: calc(100% - 220px);}
  #footer-widgets .footer-box { padding: 0 10px;}
}

@media only screen and (max-width: 480px) {
  .section-top-bottom-padding {padding-top: 50px; padding-bottom: 50px;}
  .field-wrapper {flex-direction: column;}
  .field-wrapper div:first-child {width: unset; text-align: left;}
  .field-wrapper div:last-child {width: unset;}
  .process-list {margin: 40px auto;}
  .faq-list {margin:40px auto 0 auto}
  .urgent-wrapper {flex-direction: column; width: 100%;}
  .urgent-wrapper > div:first-child {margin-right: unset;}
  .urgent-wrapper > div:last-child {width: 100%; margin-top: 40px; text-align: center;}
  .urgent-wrapper > div:last-child .cta {text-align: unset;}
  .urgent-wrapper > div:last-child h2 {margin-bottom: 20px;}
  .footer-widgets-inner {flex-direction: column;}
  #footer-widgets p,
  #footer-widgets li {font-size: unset;}
}


/*================================================================
Content revealing effect
=================================================================*/
.reveal-item {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  will-change: opacity, transform;
}

.reveal-item.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-item.show { opacity:1; transform:translateY(0); }



/*================================================================
Form 
=================================================================*/
/* Hidden honeypot */
.hp {
  display: none !important;
}

/* Field error state */
#wps-contact-form .error {
  border-color: #d93025 !important;
}

/* Response box */
#wps-form-response {
  padding: 12px 16px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 20px;
}

/* Error */
#wps-form-response.error {
  display: block;
  background: #fdecea;
  color: #b3261e;
  border: 1px solid #f5c2c0;
}

/* Success */
#wps-form-response.success {
  display: block;
  background: #edf7ed;
  color: #1e7e34;
  border: 1px solid #b7dfc2;
}