@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=BIZ+UDPGothic&display=swap');

@font-face {
    font-family: 'Impact';
    src: 
         url('../fonts/impact.woff') format('woff'),
         url('../fonts/impact.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Noto Serif Tamil Slanted';
    src: url('../fonts/notoseriftamilslanted.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Century Gothic';
    src: url('../fonts/centurygothic.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

body {
    font-family: "Noto Sans JP", sans-serif;
}

.title-en {
    font-family: "Roboto", sans-serif;
    font-size: 96px;
    font-weight: 700;
    color: rgba(51, 106, 145, 0.2); 
    text-align: center;  
}

.title-jp {
    font-size: 32px;
    font-weight: 700;
    color: rgba(51, 106, 145, 1);
    text-align: center;
    margin-top: -50px;
}

.title-en-ft {
    font-family: "Roboto", sans-serif;
    font-size: 96px;
    font-weight: 700;
    color: rgba(229, 156, 36, 0.5);
    text-align: center;  
}

.title-jp-ft {
    font-size: 32px;
    font-weight: 700;
    color: #fff;
    text-align: center;
    margin-top: -50px;
}

/*=======  Common=========*/
.container {
    max-width: 1460px;
}

.sp-show {
    display: none;
}

.sp-none {
    display: inline-block;
}

.mgt-10 {
    margin-top: 10px;
}

.mgt-20 {
    margin-top: 20px;
}

.mgt-30 {
    margin-top: 30px;
}

.mgt-40 {
    margin-top: 40px;
}

.mgt-60 {
    margin-top: 60px;
}

.mgt-80 {
    margin-top: 80px;
}

.mgt-100 {
    margin-top: 100px;
}

.mgb-10 {
    margin-bottom: 10px;
}

.mgb-20 {
    margin-bottom: 20px;
}

.mgb-30 {
    margin-bottom: 30px;
}

.mgb-40 {
    margin-bottom: 40px;
}

.mgb-60 {
    margin-bottom: 60px;
}

.mgb-80 {
    margin-bottom: 80px;
}

/*======= Header =========*/

.btn-download {
    background: rgba(51, 106, 145, 1);
    color: #fff!important;   
    font-weight: 700;
    padding: 10px 25px!important;
    border-radius: 35px;
    text-decoration: none;
    width: fit-content!important;
    margin-right: 20px;
    font-size: 18px;
}

.btn-download:hover {
    color: #fff!important;
    text-decoration: none;
}

.btn-contact {
    background: rgba(229, 156, 36, 1);
    color: #fff!important;   
    font-weight: 700;
    padding: 10px 25px!important;
    border-radius: 35px;
    text-decoration: none;
    width: fit-content!important;
    font-size: 18px;
}

.btn-contact:hover {
    color: #fff!important;
    text-decoration: none;
}

.btn-download img,
.btn-contact img {
    margin-left: 10px;
}



/*======= Main FV =========*/
#main {
    position: relative;   
    height: 100%;
    width: 100%;  
    z-index: 2;
    overflow: hidden;    
}

#main .container-fluid {
    padding: 0;
}

#main h2 img {
    width: 100%;
}

.main-content-wrapper {
    position: relative;
}

.main-content {
    position: absolute;
    top: 50%;
    left: 6%;
    width: 100%; 
    transform: translateY(-50%);    
}

.main-content-text h3 {
    color: #fff;
    font-size: 50px;
    font-weight: 700;
}

.main-content-text p {
    color: #fff;
    font-size: 28px;
    font-weight: 700;
    padding-left: 25px;
}

.main-content-btn {
    margin-top: 40px;
    position: absolute;
    top: 60%;
    left: 9%;
    width: 100%;    
    transform: translateY(-60%)
}

.btn-contact2 {
    border: 1px solid rgba(229, 156, 36, 1);
    background: rgba(229, 156, 36, 1);
    color: #fff;
    font-weight: 700;
    padding: 10px 15px!important;   
    text-decoration: none;
    width: 360px!important;
    margin-right: 30px;
    font-size: 28px;
    display: inline-block;
    text-align: center;
}

.btn-contact2:hover {
    color: #fff;
    text-decoration: none;
}

.btn-download2 {
    border: 1px solid rgba(51, 106, 145, 1);
    background: #fff;
    color: rgba(51, 106, 145, 1);
    font-weight: 700;
    padding: 10px 15px!important;   
    text-decoration: none;
    width: 360px!important; 
    font-size: 28px;   
    display: inline-block;
}

.btn-download2:hover {
    color: rgba(51, 106, 145, 1);
    text-decoration: none;
}

.btn-contact2 img:first-child,
.btn-download2 img:first-child {
    margin-right: 10px;   
    padding-bottom: 5px;
}

.btn-contact2 img:last-child,
.btn-download2 img:last-child {
    margin-left: 10px;   
    padding-bottom: 5px;
}


/*======= Power Section =========*/
#power {
    padding: 80px 0 60px;
    background-image: url('../images/bg1.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    min-height: 400px;
    height: 100%;
    width: 100%; 
    margin-top: -10px;
}

.power-title {
    color: rgba(51, 106, 145, 1);
    font-size: 32px;
    font-weight: 700;
    text-align: center;    
}

.power-img img {
    width: 100%;
}

/* Vertical alignment for power section */
#power .row.mgt-40 {
    display: flex;
    align-items: center;
}

#power .col-md-4,
#power .col-md-8 {
    display: flex;
    flex-direction: column;
}

#power .power-img {
    display: flex;
    align-items: center;
}

.btn-more {
    background: linear-gradient(to right, rgba(51, 106, 145, 1),rgba(132, 186, 224, 1));
    color: #fff;
    font-weight: 700;
    padding: 15px 25px;   
    text-decoration: none;
    width: fit-content;
    margin-top: 40px;
}

.btn-more:hover {
    color: #fff;
    text-decoration: none;
}

/*======= Service Section =========*/
#service {
    padding: 60px 0 60px;
    background: rgba(241, 250, 255, 1);
}

.service-desc {
    display: flex;
    justify-content: center;
}

.service-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: center;
  }
  
  .service-item {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    width: 260px;
    padding: 28px 15px 18px 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 16px;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.25);
    /* transition: box-shadow 0.2s; */
  }
  
  /* .service-item:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  } */
  
  .service-item-img img {
    width: 64px;
    height: 64px;
    margin-bottom: 16px;
  }
  
  .service-item-content h4 {
    font-size: 16px;
    font-weight: 700;
    color: rgba(51, 106, 145, 1);
    margin-bottom: 15px;
    text-align: center;
  }
  
  .service-item-content p {
    font-size: 16px;    
    text-align: left;
    margin: 0;
  }
  
  /* Responsive: stack on mobile */
  @media (max-width: 900px) {
    .service-wrap {
      gap: 16px;
    }
    .service-item {
      width: 45vw;
      min-width: 180px;
      max-width: 100%;
    }
  }
  @media (max-width: 600px) {
    .service-item {
      width: 100%;
    }
  }

/*======= Strength Section =========*/
#strength {
    padding: 80px 0 60px;    
}

.strength-desc {
    display: flex;
    justify-content: center;
}

.strength-wrap {
    max-width: 1000px;
    margin: 0 auto;
}

.strength-item {
    border: 1px solid rgba(51, 106, 145, 1);
    padding: 20px 60px; 
    position: relative;
    margin-bottom: 40px;
    background: #fff;
}

.point-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.point-box {
    background: rgba(51, 106, 145, 1);
    color: #fff;
    display: inline-block;
    width: 60px;
    text-align: center;
    font-family: 'Noto Serif Tamil Slanted', serif;
    padding: 5px 0;
    font-weight: 700;
}

.point-number {
    font-size: 30px;
}

.point-title {
    display: inline-block;
    margin-left: 20px;
    color: rgba(51, 106, 145, 1);
    font-size: 20px;
    font-weight: 700;
}

.point-content p {
    line-height: 28px;
    position: relative;
    z-index: 3;
}

.point-img {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 2;
    height: 100%;
    width: auto;
}

.point-img img {
    height: 100%;
    width: auto;
    object-fit: contain;
    object-position: right center;
}

/*======= Case Study Section =========*/
#case-study {
    padding: 80px 0 60px;
    background-image: url('../images/bg2.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;    
    height: 100%;
    width: 100%;     
}

.case-study-desc {
    text-align: center;
}

.case-study-item {
    background: #fff;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
    padding: 40px;
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    position: relative;
    margin-bottom: 40px;
}

.case-study-item-img {
    flex: 100%;
    max-width: calc(40% - 30px);
    margin: 0 30px 30px 0;
}

.case-study-item-img img {
    width: 100%;
}

.case-study-item-content {
    flex: 100%;
    max-width: 60%;
    margin: 0 0 30px 0;
}

.case-study-item-content h4 {
    font-size: 20px;
    font-weight: 700;
}

.case-label {
    font-size: 20px;
    font-weight: 700;
    background: rgba(51, 106, 145, 1);
    color: #fff;
    padding: 10px 20px;    
    margin-bottom: 20px;
}

.case-subhead {
    font-size: 16px;
    font-weight: 700;    
    margin-bottom: 20px;   
}

.btn-more2 {
    position: absolute;
    right: 40px;
    bottom: 40px;
    text-decoration: none;
    color: rgba(37, 109, 160, 1);
    font-weight: 700;
    font-size: 20px;   
}

.btn-more2:hover {
    color: rgba(37, 109, 160, 1);
    text-decoration: none;
}

/*======= Recommendation Section =========*/
#recommendation {
    padding: 80px 0 60px;
    background-image: url('../images/bg3.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.recommendation-item {
    background: #fff;
    border: 1px solid rgba(51, 106, 145, 1);
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
    padding: 40px;
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    position: relative;
    margin-bottom: 40px;
}

.recommendation-item-content {
    flex: 100%;
    max-width: calc(60% - 30px);
    margin: 0 30px 30px 0;
}

.recommendation-item-img {
    flex: 100%;
    max-width: 40%;
    margin: 0 0 30px 0;
}

.recommendation-item-img img {
    width: 100%;
}

.recommendation-item-content h4 {
    border: 1px solid rgba(51, 106, 145, 1);
    background: rgba(241, 250, 255, 1);
    color: rgba(51, 106, 145, 1);
    font-size: 20px;
    font-weight: 700;
    padding: 10px 40px;
    margin-bottom: 20px;
}

/*======= column Section =========*/
#column {
    padding: 80px 0 80px;
    background-image: url('../images/bg-features.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.column-wrapper {
    margin-top: 60px;
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.column-item {
    flex: 100%;
    max-width: calc(100% / 3 - 30px);
    margin: 0 30px 30px 0;
}

.column-item:nth-child(3n) {
    margin: 0 0 30px 0;
}

.column-img img {
    width: 100%;
}

.column-content {
    margin-top: 10px;   
    padding: 10px;
    background: #f2f2f3;
    color: #000;
    position: relative;
    display: block;
}

.column-content:hover {
    text-decoration: none;
    color: rgba(24, 38, 113, 1);
}

.column-date {
    display: inline-block;
    margin-right: 30px;
}

.column-title {
    display: inline-block;    
}

.column-title::after {
    content: '';
    background-image: url('../images/icon-arrow.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 20px;  /* Adjust size as needed */
    height: 20px; /* Adjust size as needed */
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-block;
}

.column-name {
    margin-top: 10px;
    text-decoration: none;
    color: #000;
    display: block;
}

.column-name:hover {
    text-decoration: none;
    color: #000;
}

/*======= SNS Section =========*/
#sns {
    padding: 80px 0 80px;
    background: rgba(241, 250, 255, 1);
}

.sns-wrapper {
    text-align: center;
}

.sns-item {
    display: inline-block;     
}

.sns-item:first-child {
    margin-right: 40px;
}

.sns-item a {
    text-decoration: none;   
    background: linear-gradient(to right, rgba(51, 106, 145, 1),rgba(132, 186, 224, 1));
    color: #fff;
    font-weight: 700;
    padding: 15px 25px;   
    text-decoration: none;
    width: fit-content;
}

.sns-item a img:first-child {
    margin-right: 10px;
}

.sns-item a img:last-child {
    margin-left: 10px;
}

/*======= FAQ Section =========*/
#faq {
    padding: 80px 0 80px;   
}


/*======= News Section =========*/
#news {
    padding: 80px 0 60px;
    background-image: url('../images/bg-news.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    min-height: 400px;
    height: 100%;
    width: 100%; 
    margin-top: -10px;
}

.news-wrapper {
    margin-top: 60px;
}

.news-item {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;    
}

.news-item .news-date {
    margin-right: 40px;
    color: rgba(24, 38, 113, 1);
}

.news-item .news-title {    
    color: rgba(24, 38, 113, 1);
    text-decoration: none;
}

.news-item .news-title:hover {
    color: rgba(24, 38, 113, 1);
    text-decoration: none;
}

/*======= Instagram Section =========*/
#instagram {
    padding: 80px 0 40px;
    background-image: url('../images/bg-aboutus.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.ig-wrap {
    margin: 40px auto 0;
}

.ig-flex {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-evenly;
}

.ig-item {
    flex: 100%;
    max-width: calc(100% / 6 - 30px);
    margin: 0 30px 30px 0;
}

.ig-item:nth-child(6) {
    margin: 0 0 30px 0;
}

.ig-item:nth-child(12) {
    margin: 0 0 30px 0;
}

.ig-item img {
    width: 100%;
}



/*======= Footer Section =========*/
.ft-sec1 {
    padding: 80px 0 80px;
    background-image: url('../images/bg-footer.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.ft-desc {
    color: #fff;
    display: flex;
    justify-content: center;
    line-height: 28px;
}

.ft-btn-wrap {
    text-align: center;
    margin-top: 40px;
}

.ft-btn-wrap a {
    margin-right: 50px;
}

.ft-btn {
    padding: 7px 10px !important;
    width: 360px !important;
    display: inline-block;
}

.ft-sec2 {
    background: rgba(241, 250, 255, 1);
    padding: 40px 0 40px;
}

.ft-logo-wrap {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.ft-logo-label {
    margin-bottom: 0;
    margin-left: -35px;
}

/* Make label appear above logo on wider screens */
@media screen and (min-width: 768px) {
    .ft-logo-wrap {
        flex-direction: column;
        align-items: center;
    }
    
    .ft-logo-label {             
        text-align: center;
    }
}

.ft-info {
    display: inline-block;
}

.ft-info a {
    color: #000;
    text-decoration: none;
}

.ft-info a:hover {
    color: #000;
    text-decoration: none;
}

.ft-info img {
    width: 30px;
    height: auto;
    margin-right: 10px;
    padding-bottom: 5px;
}

.ft-tel {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 10px;
    vertical-align: middle;
}

.ft-mail {
    font-size: 16px;
    font-weight: 700;
    vertical-align: middle;
}

.ft-sns-list {
    display: inline-block;
    margin-left: 40px;
    position: relative;
    top: -20px;
}

.ft-sns-list img {
    width: 50px;
    height: auto;
    margin-right: 10px;
    padding-bottom: 5px;
}

.copyright {
    background: rgba(241, 250, 255, 1);
    text-align: center;
    padding: 0 0 10px;
    font-size: 12px;
}

/* ========== Lower Banner ==========*/
.banner-lower {
    position: relative;
    padding: 0;
    height: 400px;
}

.banner-img img {
    width: 100%;
    height: 400px;
    object-fit: cover;
}

.banner-txt {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 50px;
    font-weight: 700;
    width: 100%;
    text-align: center;
    /* text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.7); */
}

/* ========== Page Service ==========*/
#service-strength {
    padding: 80px 0 60px;
    background: rgba(241, 250, 255, 1);
}

/*=======  Section Service2 =========*/
#service2 {
    padding: 80px 0 60px;
    background-image: url('../images/bg4.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;    
    height: 100%;
    width: 100%;     
}

.service-desc2 {
    display: flex;
    justify-content: center;
}

.service-wrap2 {
    max-width: 1000px;
    margin: 0 auto;
}

.service-item2 {
    background: #fff;
    border: 1px solid rgba(51, 106, 145, 1);
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    padding: 40px;
    margin-bottom: 40px;
}

.service-item2-img {
    flex: 100%;
    max-width: calc(20% - 30px);
    margin: 0 30px 0 0; 
    display: flex;
    align-items: center;
    justify-content: center;
}

.service-item2-img img {
    width: 100px;
    height: auto;   
}

.service-item2-content {
    flex: 100%;
    max-width: 80%;       
}

.service-item2-content h4 {
    color: rgba(51, 106, 145, 1);
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 40px;
}

/*=======  Section Flow =========*/
#flow {
    padding: 80px 0 60px;
    background-image: url('../images/bg5.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;    
    height: 100%;
    width: 100%;     
}

.flow-wrap {
    max-width: 1000px;
    margin: 0 auto;
}

.flow-item {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    padding: 40px;    
}

.flow-item-img {
    flex: 100%;
    max-width: 20%;  
    display: flex;
    align-items: center;
    justify-content: center;
}

.flow-item-img img {
    width: 100px;
    height: auto;   
}

.flow-item-content {
    flex: 100%;
    max-width: 80%;       
}

/*======= Page About =========*/
/*======= Section Message =========*/
#message {
    padding: 80px 0 60px;
    background-image: url('../images/bg6.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.message-img img {
    width: 100%;
}

.message-content h4 {
    color: rgba(51, 106, 145, 1);
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
}

.txt-sign {
    text-align: right;
}

.ceo-name {
    font-size: 20px;
}

.message-profile {
    margin-top: 40px;
}

.message-profile h4 {
    background: rgba(51, 106, 145, 1);
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    padding: 10px 20px;    
    margin-bottom: 20px;
}

/*======= Section Belief =========*/
#beliefs {
    padding: 80px 0 60px;
    background-image: url('../images/bg7.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
}

.belief-wrap {
    max-width: 1000px;
    margin: 0 auto;
}

.belief-item {
    background: #fff;
    border: 1px solid rgba(51, 106, 145, 1);
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    padding: 40px;
    margin-bottom: 40px;
}

.belief-item-img {
    flex: 100%;
    max-width: calc(20% - 30px);
    margin: 0 30px 0 0; 
    display: flex;
    align-items: center;
    justify-content: center;
}

.belief-item-img img {
    width: 100px;
    height: auto;   
}

.belief-item-content {
    flex: 100%;
    max-width: 80%;       
}

.belief-item-content h4 {
    color: rgba(51, 106, 145, 1);
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 40px;
}

/*======= Section Outline =========*/
#outline {
    padding: 80px 0 60px;
    background: rgba(241, 250, 255, 1);
}

.outline-wrap {
    max-width: 1000px;
    margin: 0 auto;
}

.tbl-outline {
    width: 100%;
    border-collapse: collapse;
}

.tbl-outline th,
.tbl-outline td {
    border-bottom: 1px solid rgba(204, 204, 204, 1);
    padding: 20px;
    vertical-align: top;
}

.tbl-outline th {
    font-weight: 700;
    font-size: 16px;
}

.tbl-outline td ul {
    padding-left: 15px;
}

.tbl-outline td a {
    color: #000;
}

.tbl-outline td a:hover {
    color: #000;
    text-decoration: none;
}

/*======= Section FAQ =========*/
#faq2 {
    padding: 80px 0 60px;    
}


/*======= Page Contact =========*/
#contact {
    padding: 80px 0 60px;
    background-image: url('../images/bg7.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
}

.contact-desc  {
    text-align: center;   
}

.contact-form {
    width: 80%;
    margin: 40px auto 0;    
}

.form-group {
    /* display: flex;
    align-items: flex-start;
    margin-bottom: 40px;
    gap: 15px;
    flex-wrap: wrap; */
    /* Adds consistent spacing between label and input */
}

.form-group p {
    display: flex;
    align-items: flex-start;
    margin-bottom: 30px;
    gap: 50px;
    flex-wrap: wrap;
}

.form-group p label {
    flex: 100%;
    min-width: 260px;
    max-width: 20%;
    /* Adjust based on your longest label */
    white-space: nowrap;
    /* Prevents label from wrapping */
}

.form-group3 p label {
    /* min-width: 200px; */
}

.form-group .required {
    color: #fff;
    background: rgba(51, 106, 145, 1);   
    margin-left: 5px;
    font-weight: 700;
    font-family: "BIZ UDPGothic", sans-serif;
    padding: 3px 25px;
    float: right;
}

.form-group .norequired {
    color: #fff;
    background: rgba(184, 184, 184, 1);   
    margin-left: 5px;
    font-weight: 700;
    font-family: "BIZ UDPGothic", sans-serif;
    padding: 3px 25px;
    float: right;
}

.form-group p .wpcf7-form-control-wrap {
    flex: 1;
    padding: 8px;
    border: 1px solid rgba(51, 106, 145, 1);
    border-radius: 0;
    background-color: #fff;
    color: rgba(89, 89, 89, 1);
}

.form-group3 p .wpcf7-form-control-wrap {
    flex: 1;
    padding: 8px;
    border: none;
    border-radius: 0;
    background-color: transparent;
    color: rgba(89, 89, 89, 1);
}

.form-control {
    border: none;
}

input.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required.form-control {
    background: #fff;
    border: none;
    color: #000;
}

textarea.wpcf7-form-control.wpcf7-textarea.wpcf7-validates-as-required.form-control02 {
    background: #fff;
    border: none;
    width: 100%;
    color: #000;
}

.form-group .form-control02 {
    flex: 1;
    /* Takes up remaining space */
    padding: 8px;
    border: 1px solid #000;
    background-color: transparent;
    color: #000;
}

/* Special styling for textarea */
.form-group textarea {
    height: 140px;
    flex: 1;
    color: #000;
    /* Adjust height as needed */
    resize: vertical;
    /* Allows vertical resizing */
    border: none
}

.wpcf7-list-item {
    width: 210px;
}

.btn-submit {   
    cursor: pointer;   
}

.wpcf7-form-control-wrap {
    display: inline-block;
}

.wpcf7-text:focus,
.wpcf7-textarea:focus {
    outline: none !important;
}

/* Remove blue glow/outline from Contact Form 7 inputs */
.wpcf7-form-control:focus {
    box-shadow: none !important;
    outline: none !important;
    border-color: #ccc !important;
}

/* Specifically target input and textarea elements */
.wpcf7 input:focus,
.wpcf7 textarea:focus {
    box-shadow: none !important;
    outline: none !important;
    border-color: #ccc !important;
}

/* Override autofill background color */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px transparent inset !important;
    -webkit-text-fill-color: #000 !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* For Firefox */
input:autofill,
input:autofill:hover,
input:autofill:focus,
input:autofill:active {
    box-shadow: 0 0 0 30px transparent inset !important;
    -webkit-text-fill-color: #000 !important;
}

/* Placeholder color styling */
::placeholder {
    color: rgba(79, 79, 79, 1) !important;
    opacity: 1;
}

/* Webkit browsers (Chrome, Safari, newer Edge) */
::-webkit-input-placeholder {
    color: rgba(79, 79, 79, 1) !important;
    opacity: 1;
}

/* Firefox */
::-moz-placeholder {
    color: rgba(79, 79, 79, 1) !important;
    opacity: 1;
}

/* Internet Explorer 10-11 */
:-ms-input-placeholder {
    color: rgba(79, 79, 79, 1) !important;
    opacity: 1;
}

/* Microsoft Edge */
::-ms-input-placeholder {
    color: rgba(79, 79, 79, 1) !important;
    opacity: 1;
}

.btn-submit:focus {
    outline: -webkit-focus-ring-color none;
}

.btn-submit {
    background: rgba(229, 156, 36, 1);
    color: #fff;   
    font-weight: 400;
    padding: 20px 25px;   
    text-decoration: none;
    width: fit-content!important;
    margin: 40px auto 0;
    border: none;
}

.btn-submit:hover {
    color: #fff!important;
    text-decoration: none;
}

.btn-submit img {
    margin-left: 10px;
}

input[type=radio] {
    height: 20px;
    width: 20px;
    vertical-align: middle;
    appearance: none;
    border-radius: 50%;
    background-clip: content-box;
    border: 2px solid rgba(217, 217, 217, 1);
    background-color: rgba(217, 217, 217, 1);
}

input[type="radio"]:checked {
    background-color: #000;
    padding: 4px;
    border: 2px solid #000;
}


/*======= Page Case Study =========*/
#case-study2 {
    padding: 80px 0 60px;
    background-image: url('../images/bg8.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;    
    height: 100%;
    width: 100%;     
}

.useful-information-pagination {
    text-align: center;
    margin-top: 40px;
}

.useful-information-pagination a.page-numbers {
    border: 1px solid rgba(51, 106, 145, 1);
    color: #000;
    padding: 10px 15px;    
    text-decoration: none;
}

.useful-information-pagination a.page-numbers:hover {
    background: rgba(51, 106, 145, 1);
    color: #fff;
}

.useful-information-pagination .page-numbers.current {
    border: 1px solid rgba(51, 106, 145, 1);
    background: rgba(51, 106, 145, 1);
    color: #fff;
    padding: 10px 15px;   
    text-decoration: none
}

.useful-information-pagination .page-numbers {
    margin-right: 10px;
}


/*======= Page Single Case Study =========*/
#single-case-study {
    padding: 100px 0 80px;     
}

.single-case-title {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 10px;
}

.single-case-date img {
    margin-right: 10px;
}

.single-case-image {
    margin-top: 40px;
}

.single-case-image img {
    width: 100%;
}

.single-case-label {
    color: rgba(51, 106, 145, 1);
    font-size: 30px;
    font-weight: 700;
    margin: 40px 0;
}

.single-case-intro {
    border: 1px solid rgba(51, 106, 145, 1);
    background: rgba(241, 250, 255, 1);
    padding: 20px 40px;
}

.single-case-intro-img {
    display: inline-block;
    width: 150px;
    height: auto;
}

.single-case-intro-img img {
    width: 100%;
    height: auto;
}

.single-case-intro-name {
    display: inline-block;
    font-weight: 700;
    margin-left: 20px;
}

.single-case-intro-text {
    margin-top: 20px;
}

.single-case-header {
    font-size: 24px;
    font-weight: 700;
    border-left: 10px solid rgba(51, 106, 145, 1);
    padding: 15px 0 15px 10px;
    margin: 40px 0;
}

.single-case-content {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
}

.single-case-content-img {
    flex: 100%;
    max-width: calc(40%  - 30px);
    margin: 0 30px 0 0;  
}

.single-case-content-img img {
    width: 100%;
}

.single-case-content-text {
    flex: 100%;
    max-width: 60%;    
}

.txt-blue {
    color: rgba(51, 106, 145, 1);
    font-weight: 700;
}

.txt-bold {
    font-weight: 700;
}

/* Page Column - List */
#useful-information {  
    padding: 60px 0 80px;
 }
 
 #useful-information-list {
     margin: 0 auto;
     padding: 0 15px 80px;    
 }

 .useful-information-head h1 {
    margin-top: 60px;
 }

 .useful-information-wrap {
     display: flex;
     flex-wrap: wrap;
     width: 100%;
     justify-content: flex-start;
     max-width: 1460px;
     margin: 0 auto;
 }
 
 .useful-information-item {
     flex: 100%;
     max-width: calc(100% / 3 - 20px);
     margin: 0 20px 0 0;
     color: #000;
     background: #fff;
     /* padding: 15px;
     border: 1px solid rgba(217, 217, 217, 1);
     box-shadow: 2px 4px 4px rgba(0, 0, 0, 0.2); */
 }
 
 .useful-information-item2 {
     max-width: calc(100% / 2 - 20px);
     margin: 0 20px 60px 0;
     /* border: 1px solid rgba(51, 106, 145, 1); */
 }
 
 .useful-information-item2 a {
     color: #000;
     text-decoration: none;
 }
 
 .useful-information-item2 a:hover {
     text-decoration: none;
     color: #000;
 }
 
 .useful-information-item:last-child {
     margin-right: 0;
 }
 
 .useful-information-item2:nth-child(2n) {
     margin-right: 0;
 }
 
 .useful-information-item:hover {
     text-decoration: none;
     color: #000;
 }
 
 .useful-information-item-img img {
     width: 100%;
 }
 
 .useful-information-item-img {
     padding: 0 15px;
 }
 
 .useful-information-item2 .useful-information-item-img {
     padding: 0;
 }
 
 .useful-information-item-content {
     margin-top: 10px;
 }
 
 .useful-information-details {    
     margin-bottom: 10px;
 }
 
 .useful-information-main {
     margin-top: 40px;
 }
 
 .useful-information-sidebar {
     margin-top: 40px;
 }
 
 .useful-information-pagination {
     text-align: center;
     margin-top: 40px;
 }
 
 .useful-information-pagination a.page-numbers {
     border: 1px solid rgba(51, 106, 145, 1);
     color: #000;
     padding: 10px 15px;
     /* border-radius: 10px; */
     text-decoration: none;
 }
 
 .useful-information-pagination a.page-numbers:hover {
     background: rgba(51, 106, 145, 1);
     color: #fff;
 }
 
 .useful-information-pagination .page-numbers.current {
     border: 1px solid rgba(51, 106, 145, 1);
     background: rgba(51, 106, 145, 1);
     color: #fff;
     padding: 10px 15px;
     /* border-radius: 10px; */
     text-decoration: none;
     font-weight: 700;
 }
 
 .useful-information-pagination .page-numbers {
     margin-right: 10px;
 }
 
 .useful-information-item-readmore {
     margin-top: 10px;
 }
 
 .useful-information-item-readmore a {
     color: #000;
 }
 
 .useful-information-item-readmore a:hover {
     color: rgba(51, 106, 145, 1);
     text-decoration: none;
 }
 
 .useful-information-item-readmore a img {
     margin-left: 5px;
 }
 
 .sidebar-item {
     margin-top: 40px;
     /* border: 1px solid rgba(51, 106, 145, 1);
     padding: 20px;
     background: rgba(216, 248, 255, 0.3); */
 }
 
 .sidebar-item-title {
     position: relative;
     font-size: 21px;
     border-left: 5px solid rgba(51, 106, 145, 1);
     padding: 5px 10px;
 }
 
 .sidebar-item-title::after {
     /* content: '';
     position: absolute;
     bottom: -5px;
     left: 0;
     width: 80px;
     height: 3px;
     background: rgba(51, 106, 145, 1); */
 }
 
 .sidebar-banner img {
     width: 100%;
 }
 
 .sidebar-item-content-item {
     display: flex;
     flex-wrap: wrap;
     color: rgba(51, 51, 51, 1);
     /* border-bottom: 1px solid rgba(182, 182, 182, 1); */
     padding-top: 30px;
 }
 
 .sidebar-item-content-item:hover {
     color: rgba(51, 106, 145, 1);
     text-decoration: none;
 }
 
 .sidebar-item-content-item-img {
     flex: 100%;
     max-width: calc(100% / 2 - 10px);
     margin: 0 10px 30px 0;
 }
 
 .sidebar-item-content-item-img img {
     width: 100%;
 }
 
 .sidebar-item-content-item-title {
     flex: 100%;
     max-width: calc(100% / 2 - 10px);
     margin: 0 10px 30px 0;
 }

 .sidebar-item-content-wrap ul {
    margin-top: 40px;
    padding-left: 0;
 }

 .sidebar-item-content-wrap ul li {
    list-style: none;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(178, 178, 178, 1);
    padding-bottom: 10px;
    padding-left: 60px;
 }

 .sidebar-item-content-wrap ul li a {
    color: #000;
    text-decoration: none;
 }

 .sidebar-item-content-wrap ul li a:hover {
    color: #000;
    text-decoration: none;
 }
 
 /* Page Column - Single */
 .post-title {
     font-size: 36px;
     font-weight: 700;
     border-bottom: 3px solid rgba(51, 106, 145, 1);
 }
 
 .post-date {
     font-weight: 700;
     margin: 10px 0 60px;
 }
 
 .post-image img {
     width: 100%;
 }
 
 .post-content {
     margin-top: 60px;
 }
 
 .table-contents {
     margin-top: 60px;
     border: 1px solid rgba(51, 106, 145, 1);
     background: rgba(216, 248, 255, 0.3);
     padding: 30px;
 }
 
 .table-contents h3 {
     text-align: center;
 }
 
 .table-contents h3 {
     font-size: 24px;
     font-weight: 700;
 }
 
 .tabel-contents-item {
     margin-top: 40px;
 }
 
 .tabel-contents-item a {
     display: block;
     color: #000;
     line-height: 2.4em;
 }
 
 .tabel-contents-item a:hover {
     text-decoration: none;
     color: #000;
 }
 
 .post-content-body {
     margin-top: 80px;
 }
 
 .post-content-body-title h2 {
     padding-bottom: 10px;
     border-bottom: 3px solid rgba(51, 106, 145, 1);
 }
 
 .post-content-body-article {
     margin-top: 30px;
 }
 
 
 .related-article {
     margin-top: 80px;
     border: 3px solid rgba(51, 106, 145, 1);
     position: relative;
     min-height: 150px;
 }
 
 .related-title {
     position: absolute;
     left: 40px;
     top: -40px;
 }
 
 .related-title h3 {
     color: rgba(51, 106, 145, 1);
     font-size: 20px;
     font-weight: 700;
     text-align: left;
     background: #fff;
     padding: 0 10px;
 }
 
 .related-title h3 img {
     margin-right: 10px;
 }
 
 .related-article-item {
     position: absolute;
     left: 0;
     top: 50%;
 }
 
 .related-article-item a {
     font-size: 20px;
     color: #000;
     padding-left: 10px;
 }
 
 .related-article-item a:hover {
     color: #000;
     text-decoration: none;
 }
 
 .related-article-item ul li {
     list-style: none;
     position: relative;
 }
 
 .related-article-item ul li::before {
     content: '';
     position: absolute;
     left: -20px;
     top: 55%;
     transform: translateY(-50%);
     width: 15px;
     height: 15px;
     background: rgba(51, 106, 145, 1);
     border-radius: 50%;
 }
 
 .post-content #section1::before,
 .post-content #section2::before,
 .post-content #section3::before,
 .post-content #section4::before {
     display: block;
     content: "";
     margin-top: -100px;
     height: 100px;
     visibility: hidden;
     pointer-events: none;
 }
 
 .useful-information-nav {
     margin-top: 80px;
     display: flex;
 }
 
 .useful-information-nav{
     margin-left: -10px;
     margin-right: -10px;
 }
 .useful-information-nav-item {
     width: 50%;
     color: #000;
     padding: 0 10px;
 }
 
 .useful-information-nav-item:hover {
     color: #000;
     text-decoration: none;
 }
 
 .useful-information-nav-item:first-child {
     border-right: 1px solid rgba(182, 182, 182, 1);
     padding-right: 30px;
 }
 
 .useful-information-nav-item:last-child {
     margin-left: 30px;
 }
 
 .useful-information-nav-item:last-child p {
     text-align: right;
 }
 
 .useful-information-nav-item-prev {
     display: flex;
     gap: 10px;
 }
 
 .useful-information-nav-item-next {
     display: flex;
     gap: 10px;
 }
 
 .useful-information-nav-item-img {
     width: 300px;
     height: 100px;
 }
 
 .useful-information-nav-item-img img {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }
 
 .useful-information-nav-item-title {}
 
 .useful-information-nav-item .arrow-prev:before {
     font-family: "FontAwesome";
     content: "\f104";
     color: rgba(51, 106, 145, 1);
     margin-right: 15px;
 }
 
 .useful-information-nav-item .arrow-next:before {
     font-family: "FontAwesome";
     content: "\f105";
     color: rgba(51, 106, 145, 1);
     margin-left: 15px;
 }