/*

 Theme Name:   Hello Elementor Child

 Theme URI:    http://example.com/hello-elementor-child

 Description:  Hello Elementor Child Theme

 Author:       Your Name

 Author URI:   http://example.com

 Template:     hello-elementor

 Version:      1.0.0

*/



/* Importing the parent theme style.css */

@import url("../hello-elementor/style.css");



:root {

  --color1: #0a213a;

  --color2: #d2c691;

  --color3: #666666;

  --color4: #fff;

}



/* Custom CSS can go here */



.container,

.container-lg,

.container-md,

.container-sm,

.container-xl,

.container-xxl {

  max-width: 1260px !important;

}



a {

  text-decoration: none !important;

}



label {

  width: 100%;

}



.grace-card .normal-card,

.grace-card .hover-card {

  transition: all 0.5s ease-in-out;

}



.grace-card:hover .normal-card {

  transition: all 0.4s ease-in-out;

  top: -100% !important;

}



.grace-card:hover .hover-card {

  transition: all 0.4s ease-in-out;

  bottom: 50% !important;

  translate: 0 50%;

}



.owce-carousel-container {

  padding: 0 !important;

}



.competencies-slider .owce-carousel .owl-stage-outer {

  padding: 0 !important;

  min-height: 465px;

}



.competencies-slider .owce-carousel .owl-stage-outer::before {

  content: "";

  position: absolute;

  top: 30px;

  left: 0;

  width: 100%;

  height: 1px;

  background: var(--color2);

}



.competencies-slider .owl-item .item .owl-link {

  display: flex;

  flex-direction: column;

}



.competencies-slider .owl-item .item .owl-thumb {

  order: 4;

  position: relative;

}

#ajaxsearchlite1 .probox .proinput input,

div.asl_w .probox .proinput input {

  font-weight: normal;

  font-family: DM Sans !important;

  color: #000 !important;

  font-size: 14px !important;

  line-height: normal !important;

  text-shadow: 0 0 0 rgba(255, 255, 255, 0);

  border: 0;

  box-shadow: none;

}



.blog-content h2 {

  display: -webkit-box;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

  overflow: hidden;

  text-overflow: ellipsis;

}

.search-icon-toggle img {

  width: 22px;

  height: 22px;

  cursor: pointer;

  display: block;

}

.search-icon-toggle {

  width: 20px !important;

  height: 20px !important;

  cursor: pointer;

  background: #000;



  -webkit-mask: url("https://www.watsonep.com.sg/wp-content/uploads/2026/05/Search-2.svg")

    no-repeat center;

  mask: url("https://www.watsonep.com.sg/wp-content/uploads/2026/05/Search-2.svg")

    no-repeat center;



  -webkit-mask-size: contain;

  mask-size: contain;



  transition: 0.3s ease;

}



.search-icon-toggle:hover {

  background: #d2c691;

}



.search-icon-toggle {

  background: #0a213a;

}

.custom-search-popup {

  display: none;

  position: absolute;

  top: 55px;

  right: 0;

  width: 450px;

  background: #fff;

  padding: 20px;

  border-radius: 16px;

  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);

  z-index: 9999;

}



.custom-search-popup.active {

  display: block;

}



.search-icon-toggle {

  cursor: pointer;

}



.ajaxsearchlite .probox {

  border-radius: 50px !important;

  border: 1px solid #e5e5e5 !important;

  height: 55px !important;

  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important;

}



.ajaxsearchlite .probox input.orig {

  font-size: 15px !important;

}



.ajaxsearchlite .asl_w {

  border-radius: 12px !important;

  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12) !important;

}



.competencies-slider .owl-item .item .owl-thumb .thumb-link {

  position: absolute;

  bottom: 20px;

  left: 50%;

  transform: translateX(-50%);

  opacity: 0;

  transition: 0.3s ease all;

  background: var(--color4);

  text-align: center;

  font: normal normal bold 17px/29px DM Sans;

  letter-spacing: 0px;

  color: var(--color2);

  padding: 8px 20px;

  width: 90% !important;

  max-width: 90% !important;

  text-decoration: none !important;

  display: block;

}



.competencies-slider .owl-item .item .owl-thumb .thumb-link:hover {

  background: var(--color2) !important;

  color: var(--color4) !important;

}



.competencies-slider .owl-item:hover .item .owl-thumb .thumb-link {

  opacity: 1;

}



.competencies-slider .owl-item .item .owl-content {

  order: 3;

  display: none;

  translate: 0 10px;

  transition: 0.3s ease all;

}



.competencies-slider .owl-item .item .owl-title {

  order: 1;

  position: relative;

  padding-left: 25px;

}



.competencies-slider .owce-carousel .owl-item .item .owl-title::before {

  position: absolute;

  top: 50%;

  left: 0;

  transform: translateY(-50%);

  font-family: "eicons";

  content: "\e914";

  font-size: 12px;

}



.competencies-slider .owl-item .item .owl-subtitle {

  order: 2;

}



.competencies-slider .owl-stage {

  display: flex;

  align-items: flex-end;

}



.competencies-slider .owl-item.second-active .item .owl-title,

.competencies-slider .owl-item.second-active .item .owl-subtitle {

  color: var(--color2) !important;

}



.competencies-slider .owl-item.second-active .item .owl-content {

  display: block;

  translate: 0 0;

}



.competencies-slider .owl-item .item .owl-thumb img {

  transition: 0.3s ease all;

}



.competencies-slider .owl-item.second-active .item .owl-thumb img {

  height: 270px !important;

}



.competencies-slider .owce-carousel .owl-nav {

  position: absolute;

  display: flex !important;

  top: -150px;

  right: 0;

  gap: 20px;

}

div.asl_w .probox .promagnifier .innericon svg {

  fill: #0a213a !important;

}



div.asl_w .probox .promagnifier .innericon svg:hover {

  fill: #d2c691 !important;

}

.accreditations .owce-carousel .owl-nav {

  gap: 16px;

  display: flex !important;

  justify-content: center;

  margin-top: 30px;

}



.accreditations .owce-carousel .owl-nav .disabled {

  background: #e0e0e0 !important;

  opacity: 1;

}



.owce-carousel .owl-nav .owl-prev,

.owce-carousel .owl-nav .owl-next {

  position: initial !important;

  left: auto !important;

  top: auto !important;

  transform: initial !important;

  width: 50px;

  height: 50px;

  display: inline-flex;

  justify-content: center;

  align-items: center;

  background: var(--color2) !important;

  border-radius: 50%;

}



.owce-carousel .owl-nav button i {

  background: transparent !important;

  color: #fff;

}



.owce-carousel .owl-nav .owl-prev .eicon-chevron-left:before {

  content: "\e8bf";

}



.owce-carousel .owl-nav .owl-next .eicon-chevron-right:before {

  content: "\e8c0";

}



/* pagination style one css start  */

.pagination-style-one {

  display: inline-flex;

  justify-content: center;

}



.pagination-style-one .page-numbers.current {

  color: var(--color2) !important;

}



.pagination-style-one .page-numbers {

  font: normal normal 500 18px / 22px DM Sans !important;

  letter-spacing: 0px;

  color: #666666 !important;

  background: #ffffff 0% 0% no-repeat padding-box;

  text-decoration: none !important;

  width: 30px;

  height: 45px;

  display: inline-flex;

  justify-content: center;

  align-items: center;

  margin: 0 5px;

}



/* pagination style one css start  */



/* Blog css start */



.blog-post-card {

}



.blog-image-wrapper {

  position: relative;

  overflow: hidden;

}

.blog-image-wrapper video {

  height: 252px;

  object-fit: cover;

}



.blog-image-wrapper img {

  width: 100%;

  display: block;

  height: 252px;

  object-fit: cover;

  transition: 0.3s ease all;

}



.blog-content {

  padding-top: 20px !important;

  padding-bottom: 20px !important;

}



.blog-content h2 {

  text-align: left;

  font: normal normal bold 20px/25px DM Sans;

  letter-spacing: 0px;

  color: var(--color1);

  opacity: 1;

  margin: 0;

}



.blog-content h2 a {

  color: var(--color1);

  text-decoration: none;

}



.blog-content .date {

  color: #666666;

  font-weight: 500;

  margin-bottom: 20px;

}



.blog-content p {

  margin-top: 10px;

}

.recapcha {

  scale: 0.7;

  transform-origin: center right;

}

.read-more-btn {

  background: var(--color1);

  color: var(--color2) !important;

  display: inline-block;

  font-family: "DM Sans", Sans-serif;

  font-size: 17px;

  font-weight: 700;

  text-decoration: none;

  line-height: 1.5em;

  text-decoration: none;

  border-radius: 0px 0px 0px 0px;

  padding: 13px 40px 13px 40px;

  position: relative;

}



.read-more-btn:hover {

  /* background: var(--color2) !important; */

  color: var(--color4) !important;

}



.blog-post-card:hover .blog-image-wrapper img {

  scale: 1.02;

}



.blog-detail-page-content {

  padding: 80px 0;

  background-image: url(https://www.watsonep.com.sg/wp-content/uploads/2026/05/Background-1.svg);

  background-repeat: no-repeat;

  background-size: cover;

  background-position: center;

}



.prevnext-post {

  border-top: 1px solid #cccccc;

  margin-top: 80px;

  padding-bottom: 80px;

}



.prev-next {

  display: inline-block;

  padding: 13px;

  text-decoration: none !important;

  font: normal normal bold 17px/20px DM Sans;

  transition: 0.3s ease all;

  background: transparent;

  position: relative;

  min-width: 160px;

}



.prev-next span,

.read-more-btn span {

  position: relative;

  z-index: 1;

}



.prev-next1 {

  border: 1px solid #666666;

  background: transparent !important;

  color: #666666 !important;

}



.prev-next1:hover {

  border: 1px solid var(--color1) !important;

  background: transparent !important;

  color: var(--color1) !important;

}



.prev-next2 {

  background: var(--color1);

  color: var(--color2) !important;

  border: 1px solid var(--color1);

}



.prev-next2:hover {

  color: var(--color4) !important;

  border: 1px solid var(--color2);

}



.elementor-button {

  position: relative;

}



.elementor-button span {

  position: relative;

  z-index: 1;

}



.prev-next2::before,

.read-more-btn::before,

.elementor-button::before {

  content: "";

  position: absolute;

  left: 0;

  bottom: 0;

  width: 100%;

  height: 0;

  transition: 0.2s ease all;

  background: var(--color2);

}



.elementor-button:hover {

  background: inherit !important;

}



.prev-next2:hover::before,

.read-more-btn:hover::before,

.elementor-button:hover::before {

  height: 100%;

}



.white-btn .elementor-button::before {

  background: var(--color4);

}



/* blog css end */



/* testimonials css start */

.single-blog-banner img {

  height: 450px;

  object-fit: cover;

  object-position: center;

}

.singlepage-title::first-line {

  color: #0a213a !important;

}



.blog-detail-page-content .singlepage-title {

  text-align: left;

  font: normal normal bold 54px/55px DM Sans;

  letter-spacing: 0px;

  color: var(--color2) !important;

  opacity: 1;

}



.single-post .blog-details-content p {

  margin-bottom: 20px;

}



.blog-detail-page-content .date {

  color: #666666;

}



.time-line-slider .owce-carousel .owl-stage-outer {

  position: relative;

  height: 400px;

}



.time-line-slider .owce-carousel .owl-stage-outer::before {

  content: "";

  position: absolute;

  left: 0%;

  top: 52.3%;

  translate: 0 -52.3%;

  width: 100%;

  height: 2px;

  background: var(--color4);

}



.time-line-slider .owl-item {

  position: relative;

  height: 200px;

}



.time-line-slider .owl-item:nth-child(even) {

  display: grid;

  align-items: end;

  translate: 0 188px;

}



.time-line-slider .owl-item::before {

  content: "";

  position: absolute;

  left: 0%;

  top: 0%;

  width: 12px;

  height: 12px;

  background: var(--color2);

  border: 1px solid var(--color4);

  border-radius: 50%;

  z-index: 1;

}



.time-line-slider .owl-item::after {

  content: "";

  position: absolute;

  left: 5px;

  top: 0%;

  width: 1px;

  height: 70px;

  background: var(--color4);

}



.time-line-slider .owl-item:nth-child(odd):before,

.time-line-slider .owl-item:nth-child(odd)::after {

  top: inherit;

  bottom: 0%;

}



.time-line-slider .owl-item:nth-child(even)::after {

  left: 6px;

}



.contact-card-wrapper {

  height: 640px;

  overflow-y: auto;

  padding-right: 10px;

}



.contact-card-wrapper::-webkit-scrollbar {

  width: 5px;

  background: #f7f7f7;

}



.contact-card-wrapper::-webkit-scrollbar-track {

  width: 5px;

  background: #f7f7f7;

}



.contact-card-wrapper::-webkit-scrollbar-thumb {

  width: 5px;

  background: #666666;

}



.contact-card-wrapper .contact-card {

  background: #ffffff 0% 0% no-repeat padding-box;

  border: 1px solid #cccccc;

  opacity: 1;

  padding: 25px;

  transition: 0.2s ease all;

  cursor: pointer;

}



.contact-card-wrapper .contact-card h4 i {

  width: 35px;

  height: 35px;

  border-radius: 50%;

  display: inline-grid;

  place-items: center;

  background: var(--color2);

  color: #fff !important;

  transition: 0.2s ease all;

  font-size: 17px;

}



.contact-card-wrapper .contact-card h4 span {

  width: calc(100% - 35px);

  padding-left: 12px;

  text-align: left;

  font: normal normal bold 17px/24px DM Sans;

  letter-spacing: 0px;

  color: #0a213a;

  opacity: 1;

}



.contact-card-wrapper .contact-card p {

  text-align: left;

  font: normal normal 500 17px/28px DM Sans;

  letter-spacing: 0px;

  color: #666666;

  opacity: 1;

  transition: 0.2s ease all;

  padding-left: 47px;

}



.contact-card-wrapper .contact-card p .short {

  display: inline-block;

  width: 30px;

}



.contact-card-wrapper .contact-card p .text {

  width: calc(100% - 30px);

  display: inline-block;

}



.contact-card-wrapper .contact-card:hover {

  background: #d2c691 0% 0% no-repeat padding-box;

  border: 1px solid #cccccc;

}



.contact-card-wrapper .contact-card:hover h4 i {

  background: var(--color4) !important;

  color: var(--color2) !important;

}



.contact-card-wrapper .contact-card:hover p {

  font-weight: bold;

}



.contact-card-wrapper .contact-card:hover p .text {

  text-decoration: underline;

}



/* Our Competencies home slider start */



.main-competency-wrapper {

  font-family: "DM Sans", sans-serif !important;

  width: 100%;

  margin: 0 auto;

  padding: 80px 0;

  box-sizing: border-box;

  overflow: hidden;

}



.main-competency-wrapper .comp-header-flex {

  display: flex;

  justify-content: space-between;

  align-items: flex-end;

  max-width: 1200px;

  margin: 0 auto 40px auto;

  padding: 0 15px;

}

.main-competency-wrapper .comp-title-area {

  max-width: 700px;

}

.main-competency-wrapper .comp-title {

  font-size: 62px !important;

  font-weight: 900 !important;

  color: #0b2240 !important;

  margin: 0 0 12px 0 !important;

}

.main-competency-wrapper .comp-title .gold-text {

  color: #c5b376 !important;

}

.main-competency-wrapper .comp-desc {

  font-size: 18px !important;

  color: #666666 !important;

  margin: 0 !important;

  line-height: 1.6 !important;

}



.main-competency-wrapper .comp-nav-arrows {

  display: flex;

  gap: 12px;

}

.main-competency-wrapper .arrow-btn {

  width: 50px;

  height: 50px;

  border-radius: 50%;

  background-color: #c5b376;

  color: #ffffff;

  border: none;

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  font-size: 24px;

  transition: all 0.3s ease;

  padding: 30px !important;

}

.main-competency-wrapper .arrow-btn.disabled {

  cursor: not-allowed !important;

  background-color: #e0e0e0 !important;

  pointer-events: none !important;

}



.main-competency-wrapper .slider-container-box {

  position: relative;

  margin-top: 80px;

  width: 100%;

}



.main-competency-wrapper .slider-connecting-line {

  position: absolute;

  top: 22px;

  left: 0;

  width: 100%;

  height: 1px;

  background-color: #d2c691;

  z-index: 1;

}



.main-competency-wrapper .slider-track-flex {

  display: flex;

  align-items: flex-end;

  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);

  position: relative;

  z-index: 2;

  padding-left: calc(60% - 450px);

}



.main-competency-wrapper .slider-card-col {

  flex: 0 0 320px;



  padding: 0 20px;

  box-sizing: border-box;

  position: relative;

}



.main-competency-wrapper .custom-card {

  cursor: pointer;

  display: flex;

  flex-direction: column;

  position: relative;

  transition:

    transform 0.5s ease,

    margin 0.5s ease;

}



.main-competency-wrapper .card-number {

  font-size: 50px !important;

  font-weight: 700 !important;

  color: #0a213a;

  display: inline-flex;

  align-items: center;

  width: max-content;

  padding-right: 15px;

  line-height: 1 !important;

  position: relative;

  z-index: 2;

}

.main-competency-wrapper .card-number::before {

  content: "•";

  color: #0a213a;

  margin-right: 8px;

  font-size: 36px;

  line-height: 1;

}

.main-competency-wrapper .card-title {

  font-size: 24px !important;

  font-weight: 600 !important;

  color: #0a213a !important;

  margin: 14px 0 0 0 !important;

  transition: color 0.3s ease;

}



.main-competency-wrapper .card-expand-content {

  max-height: 0;

  opacity: 0;

  overflow: hidden;

  transition: all 0.5s ease;

}

.main-competency-wrapper .card-expand-content p {

  font-size: 18px !important;

  color: #666666 !important;

  line-height: 1.4 !important;

  margin: 10px 0 0 0 !important;

}



.main-competency-wrapper .card-img-box {

  margin-top: 15px;

  overflow: hidden;

  height: 200px;

  width: 100%;

  position: relative;

  transition:

    height 0.5s ease,

    box-shadow 0.5s ease;

}

.main-competency-wrapper .card-img-box img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.main-competency-wrapper .img-overlay-btn {

  position: absolute;

  bottom: -35% !important;

  left: 0;

  width: 100%;

  height: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

  opacity: 0;

  transition: opacity 0.3s ease;

}



.main-competency-wrapper .img-overlay-btn {

  pointer-events: none;

}



.main-competency-wrapper .custom-card.active .img-overlay-btn {

  pointer-events: auto;

}

.main-competency-wrapper .btn-text {

  background-color: #fff;

  color: #d2c691;

  padding: 13px 25px !important;

  border-radius: 0px;

  font-size: 18px;

  font-weight: 600;

  width: 90%;

  text-align: center !important;

}



.main-competency-wrapper .btn-text:hover {

  background-color: #d2c691;

  color: #fff;

}



.main-competency-wrapper

  .custom-card.active

  .card-img-box:hover

  .img-overlay-btn {

  opacity: 1;

}



.main-competency-wrapper .custom-card.active {

  transform: translateY(-2px);

}

.main-competency-wrapper .custom-card.active .card-number,

.main-competency-wrapper .custom-card.active .card-number::before,

.main-competency-wrapper .custom-card.active .card-title {

  color: #c5b376 !important;

}

.main-competency-wrapper .custom-card.active .card-expand-content {

  max-height: 120px;

  opacity: 1;

  margin-bottom: 5px;

}

.main-competency-wrapper .custom-card.active .card-img-box {

  height: 290px;

}



.page-id-45 .contact-card .text a{

  color: #666666;

  text-decoration: none;

}



.page-id-45 .contact-card .text a:hover{

  color: #666666;

}



/* Our Competencies home slider end */



@media only screen and (min-width: 1025px) {

  .hfe-menu-toggle {

    display: none !important;

  }

}



@media only screen and (max-width: 767px) {

  .hero-banner .elementor-video {

    min-height: 70vh;

  }

  .recapcha {

    scale: 0.7 !important;

    transform-origin: center !important;

  }

  .wpcf7-spinner {

    position: absolute !important;

  }



  .text-start.sub-btn {

    text-align: center !important;

  }

  .blog-detail-page-content {

    padding: 40px 0;

  }



  .blog-detail-page-content .singlepage-title {

    font: normal normal bold 24px/30px DM Sans;

  }



  .grace-card .normal-card,

  .grace-card .hover-card {

    position: inherit !important;

    top: inherit !important;

    bottom: inherit !important;

    translate: 0 0 !important;

    transform: inherit !important;

  }



  .competencies-slider .owce-carousel .owl-nav {

    position: initial !important;

    justify-content: center;

  }



  .competencies-slider .owl-item.active .item .owl-thumb img {

    height: 270px !important;

  }



  .competencies-slider .owl-item.active .item .owl-content {

    display: block;

    translate: 0 0;

  }



  .time-line-slider .owl-item {

    display: grid;

    align-items: end;

  }



  .time-line-slider .owl-item:nth-child(even) {

    translate: 0 0;

  }



  .time-line-slider .owce-carousel .owl-stage-outer {

    height: auto;

  }



  .time-line-slider .owce-carousel .owl-stage-outer::before {

    top: 20px;

    translate: 0 0;

  }



  .time-line-slider .owl-item:nth-child(odd):before,

  .time-line-slider .owl-item:nth-child(odd)::after {

    top: 0;

    bottom: inherit;

  }



  .map-area iframe {

    height: 400px;

  }

  .single-blog-banner img {

    height: auto !important;

    padding: 20px;

  }



  .main-competency-wrapper .slider-track-flex {

    padding-left: calc(50% - 140px);

    align-items: flex-end;

  }

  .main-competency-wrapper .slider-card-col {

    flex: 0 0 280px;

    width: 280px;

  }

  .main-competency-wrapper .slider-connecting-line {

    position: absolute;

    top: -3px;

  }

  .main-competency-wrapper .custom-card.active .card-expand-content {

    max-height: 130px !important;

  }

  .main-competency-wrapper .custom-card.active {

    transform: translateY(-20px);

  }

  .main-competency-wrapper .custom-card.active .card-img-box {

    height: 210px;

  }

  .main-competency-wrapper .comp-header-flex {

    flex-direction: column;

    align-items: flex-start;

    gap: 20px;

  }

  .main-competency-wrapper .comp-title {

    font-size: 32px !important;

    font-weight: 900 !important;

    color: #0b2240 !important;

    margin: 0 0 12px 0 !important;

  }

  .main-competency-wrapper .arrow-btn {

    width: 25px;

    height: 25px;

    border-radius: 50%;

    background-color: #c5b376;

    color: #ffffff;

    border: none;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    font-size: 18px;

    transition: all 0.3s ease;

    padding: 22px !important;

  }

  .main-competency-wrapper .card-number {

    font-size: 35px !important;

  }

  .main-competency-wrapper .slider-container-box {

    margin-top: 55px !important;

  }

  .main-competency-wrapper .slider-card-col {

    flex: 1 0 350px;

    width: 350px;

  }

  .main-competency-wrapper .slider-track-flex {

    padding-left: calc(40% - 130px);

    align-items: flex-end;

  }



  .blog-image-wrapper video {

  height: auto;

}



.blog-image-wrapper img {

  height: 100%;

}

}