@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Overpass:ital,wght@0,100..900;1,100..900&family=Roboto+Slab:wght@100..900&display=swap');

/* ===== BASE ===== */
body {
  margin: 0;
  font-family: "Overpass", sans-serif;
}

/* ===== HEADER ===== */
.main-header {
  background: #ffffff;
  position: relative;
}

.header-inner {
  width: 85%;
  margin: 0 auto;
  padding: 10px 0px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.max-1440{
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
}
/* ===== LEFT (LOGO) ===== */
.header-left .logo {
  display: flex;
  align-items: center;
}

.header-left img {
  height: 48px;
  width: auto;
}

/* ===== CENTER (MENU) ===== */
.header-center {
  flex: 1;
  display: flex;
  justify-content: center;
}

.main-menu{
  list-style: none;
  display: flex;
  gap: 32px;
}

.main-menu li {
  position: relative;
}

.main-menu li a {
  text-decoration: none;
  color: #364153;
  font-size: 16px;
  font-weight: 400;
  padding-bottom: 6px;
  transition: all 0.25s ease;
}

/* ACTIVE + HOVER */
.main-menu li.current-menu-item a, .main-menu li.current_page_item a{
  color: #0092BC;
  border-bottom: 2px solid #0092BC;
}
.main-menu li a:hover{
  color: #0092BC;
}

/* Arrow (Services >) */
.main-menu li.menu-item-has-children > a::after {
  content: "›";
  margin-left: 6px;
  font-size: 14px;
}

/* ===== RIGHT (CTA) ===== */
.header-right {
  display: flex;
  align-items: center;
  gap:32px;
}

.btn-contact {
  background: #0092BC;
  color: #fff;
  text-decoration: none;
  font-size: 16px;
  padding: 10px 24px;
  border-radius: 6px;
  border:1px solid #0092BC;
  transition: all 0.3s ease;
  box-shadow: 0px 4px 8px #0000001A;
}

.btn-contact:hover {
  background: transparent;
  color: #0092BC;
}
.footer {
  background: #0b1c2c;
  color: #cbd5e1;
  padding: 50px 0 20px;
  font-family: "Inter", sans-serif;
}

.footer-container {
  width: 85%;
  margin:0 auto;
  display: flex;
  justify-content: space-between;
  gap: 60px;
  padding-bottom: 48px;
}

.footer-left {
  max-width: 505px;
}

.footer-brand img {
  max-width: 140px;
  margin-bottom: 5px;
}

.footer-description p {
  line-height: 26px;
  font-size: 16px;
  color: #FFFFFFDE;
}

.footer-right {
  display: flex;
  gap: 100px;
  max-width: 500px;
}
.contact-info.footer-col{
  max-width: 295px;
}

.footer-col h4,
.footer-col h2,
.footer-col strong {
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 15px;
}

.footer-col ul {
  list-style: none;
  padding: 0;
}

.footer-col ul li {
  margin-bottom: 14px;
}

.contact-info.footer-col ul li {
  color:#FFFFFFDE;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.footer-col ul li a {
  color: #FFFFFFDE;
  text-decoration: none;
  display: block;
  transition: 0.3s;
}

.footer-col ul li a:hover {
  color: #ffffff;
  transform: translateX(4px);
}

.footer-divider {
  border-top: 1px solid #233648;
  margin: 40px 0 20px;
  width:85%;
  margin:0 auto;
}

.copyright {
  text-align: center;
  font-size: 16px;
  color: #FFFFFF99;
}
.copyright p{
  margin:30px 0px 10px;
}

.hamburger{
  display: none;
  flex-direction: column;
  gap:6px;
  align-items: center;
}
.hamburger span{
  height:3px;
  width:24px;
  display: block;
  background-color: #0092BC;
  border-radius: 2px;
  transition: all ease 0.3s;
}
.main-menu.active{
  display: flex;
  position: absolute;
  left:0px;
  top:100%;
  width:100%;
  background-color: #FFFFFF;
  padding-top:40px;
  min-height: calc(100vh - 77px);
  flex-direction: column;
  margin: 0 auto;
  padding: 0;
  align-items: center;
}
.hamburger.active{
  gap:0px;
}
.hamburger.active span:nth-child(2){
  display: none;
}
.hamburger.active span:nth-child(1){
  transform: translateX(-3px);
  rotate: -45deg;
}
.hamburger.active span:nth-child(3){
  transform: translate(-1px, 0px);
  rotate: 45deg;
}




.wpcf7-spinner {
  display:inline-block !important;
}
*{
 font-family:overpass;
}
.font-inter{
 font-family:Inter;
}
.normal-read-more, .service-btn, .icon-read-more span{
 transition:all ease 0.3s;
}
.normal-read-more:hover{
 transform:translatey(-2px);
}
.icon-read-more span:hover{ 
 gap:12px !important;
}
.service-btn:hover{
 gap:14px !important;
}
.services-wrapper{
 display:grid;
 grid-template-columns:repeat(3,1fr);
 row-gap:24px;
 column-gap:20px;
}
.home-vertical-divider{
 height:auto;
 background-color:#10182833;
}
.service-card{
 border:1px solid #E4E4E4;
 border-radius:4px;
 padding:50px 36px 40px;
 display:flex;
 flex-direction:column;
 justify-content:space-between;
 transition:all ease 0.3s;
}
.service-card:hover{
 transform:translatey(-4px);
   box-shadow:0px 4px 10px #0000001A;
}
.service-description p{
 margin:12px 0px 32px;
 font-size:17px;
 font-weight:400;
 color:#10182899;
}
.service-btn{
 font-size:16px;
 font-weight:400;
 color:#0092BC;
 display:flex;
 gap:10px;
}
.service-title{
 font-size:20px;
 font-weight:700;
 color:#101828;
 margin:18px 0px 12px
}
.about-img-box{
 position:relative;
}
.main-menu.active{
 padding-top:40px;
 z-index:10;
}
.footer-brand .wp-block-image{
 margin-left:0px;
}
.about-client-box{
 position:absolute;
 width:fit-content;
 bottom:-23px;
 left:-31px;
}
p{
 margin-top:0px;
 margin-bottom:0px;
}
.list-hero li{
 margin-bottom:20px
}
.white-btn a, .transparent-btn  a, .blue-btn a{
 display:block;
 width:fit-content;
 transition:all ease 0.3s;
}
.transparent-btn{
 border:none !important;
}
.white-btn a:hover{
 background-color:transparent !important;
 color:#fff !important;
}
.transparent-btn  a:hover,.blue-btn a:hover{
 background-color:#fff !important;
 color:#0092BC !important;
}

/*contact form css starts*/

.contact-form-wrapper {
   background: #fff;
   padding: 48px 48px 22px;
   border-radius: 16px;
   width:100%;
 margin-bottom:0px !important;
}

.contact-form-wrapper h2 {
   font-size: 30px;
   font-weight: 700;
   color: #101828;
   margin-bottom: 24px;
 margin-top:0px;
}

.contact-form-wrapper .form-group {
   margin-bottom: 22px;
}

.contact-form-wrapper label {
   display: block;
   font-size: 14px;
   font-weight: 600 !important;
   color: #101828DE;
   margin-bottom: 8px;
}

.contact-form-wrapper input,
.contact-form-wrapper textarea{
   width: 100%;
   border: 1px solid #10182826;
   border-radius: 8px;
   padding: 14px 16px;
   font-size: 16px;
   color: #101828DE;
   outline: none;
   transition: 0.3s ease;
   box-sizing: border-box;
}

.contact-form-wrapper input::placeholder,
.contact-form-wrapper textarea::placeholder
{
 color:#10182861;
 font-weight:400 !important;
 font-size:16px;
}

.contact-form-wrapper input:focus,
.contact-form-wrapper textarea:focus {
   border-color: #0ea5e9;
}

.contact-form-wrapper textarea {
   height: 140px;
   resize: none;
}

.contact-form-wrapper input[type="submit"] {
   background: #0092BC;
   color: #fff;
 border:1px solid #0092BC !important;
   border-radius: 8px;
   padding: 15px 40px;
   font-size: 16px;
   font-weight: 600 !important;
   cursor: pointer;
   width: auto;
   transition: 0.3s ease;
 box-shadow:0px 2px 8px #00000061;
}

.contact-form-wrapper input[type="submit"]:hover {
   color:#0092BC;
 background:transparent;
}

.contact-form-wrapper .wpcf7-spinner {
   display: none;
}
.wpcf7 form.invalid .wpcf7-response-output{
 color:#dc3232;
 border-color:#dc3232 !important;
}
.wpcf7 form.sent .wpcf7-response-output{
 color:#46b450;
}
.footer-address, .footer-email, .footer-telephone{
position:relative;
 padding-left:30px;
}


.footer-address:before, .footer-email:before, .footer-telephone:before{
 position:absolute;
 content:"";
 width:21px;
 height:21px;
 left:0px;
 background-size:21px;
}
.footer-address:before{
 background:url("https://php84.singsys.net/simbiosis/wp-content/uploads/2026/05/Frame.svg")no-repeat;
 
}
.footer-email:before{
 background:url("https://php84.singsys.net/simbiosis/wp-content/uploads/2026/05/Frame-1.svg")no-repeat;
 
}
.footer-telephone:before{
 background:url("https://php84.singsys.net/simbiosis/wp-content/uploads/2026/05/Frame-2.svg")no-repeat;
 
}

/*contact form css ends*/

.contact-map{
  box-shadow: 0px 6px 8px #0000001A;
}


/* ===== RESPONSIVE ===== */
@media (max-width:1280px){
 .service-title{
   height:52px;
 }
}


@media (max-width:1024px){
  .footer-container, .header-inner {
    width: 90%;
  }
  .footer-left{
    max-width: 370px;
  }
  .footer-right{
    gap:60px;
  }
  .services-wrapper{
    grid-template-columns:repeat(2,1fr);
   }
}
@media (max-width: 992px) {
  .header-inner {
    padding: 12px 20px;
  }

  .main-menu {
    display: none;
  }
  .hamburger{
    display: flex;
  }
}
@media (max-width:820px){
  .footer-left {
    max-width: 240px;
  }
  .footer-container, .footer-right{
    gap:40px;
  }
}
@media (max-width:769px){
  .footer-left {
    max-width: 100%;
  }
  .footer-container{
    flex-direction: column;
    gap:0px;
    padding-bottom: 30px;
  }
}
@media (max-width:576px){
  .header-right{
    gap:12px;
   }
    .btn-contact{
      padding:6px 12px;
    }
    .about-client-box{
      left:-10px;
    }
    .services-wrapper{
    grid-template-columns:1fr;
   }
  .footer{
    padding:30px 0px 20px;
  }
  .footer-right{
    flex-direction: column;
    gap:0px;
  }
}