/* ===========================
   Global Styles
=========================== */
body {
  margin: 0;
  font-family: 'Cabin', sans-serif; /* ✅ default font */
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #0A1931;
  background-color: #f6f4ef;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* ===========================
   Typography
=========================== */
h1, h2, h3, .header-content-menu a {
  font-family: 'Cabin', sans-serif;
  font-weight: 200 !important;
}

p, li {
  font-family: 'Cabin', sans-serif;
  font-weight: 400;
}

.font-xl {
  font-size: 75px;
  line-height: 98px;
  margin-top: 65px;
  font-weight: 200 !important;
}

h3 + p {
  font-size: 20px;   /* change this to your desired size */
  line-height: 1.6;  /* improves readability */
}

h3.font-xl {
  font-weight: 200 !important;
}

/* ===========================
   Section Paddings
=========================== */

.about-content {
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    padding: 20px;
}

/* ===========================
   Banner Section
=========================== */

.banner-content-left h3 .underline-text {
  position: relative;
  z-index: 3; /* text above the bar */
  display: inline-block;
}

/* The bars created by JS */
.underline-js {
  position: absolute;
  pointer-events: none;
  background: #fdffc0; /* underline color */
  opacity: 1;
  border-radius: 3px; /* soft edges (optional) */
  z-index: 2; /* below the text */
}

.social-square {
  text-decoration: none;   /* remove browser underline */
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  color: inherit;
}

.social-square {
  display: inline-flex;              /* flexbox for easy centering */
  justify-content: center;           /* center horizontally */
  align-items: center;               /* center vertically */
  width: 50px;                       /* square size (bigger than before) */
  height: 50px;
  border-radius: 8px;                /* rounded corners */
  text-decoration: none;             /* remove underline */
  margin-right: 10px;                /* spacing between icons */
  background-color: transparent;     /* no background by default */
}

/* Icon size & colors */
.social-square i {
  font-size: 18px;                   /* make icon bigger */
  line-height: 1;                    /* no extra spacing */
}

/* Default colors */
.fa-behance {
  color: #166bb0;  
}

.fa-linkedin-in {
  color: #166bb0;  
}

/* Hover effect */
.social-square:hover {
  background-color: #166bb0;   /* square turns blue */
}

.social-square:hover i {
  color: white;             /* icon turns white */
}

/* ===========================
   Header Section
=========================== */
.header .logo img {
  max-width: 60px;    
  height: auto;        
  display: block;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between; /* Logo left, menu right */
  padding: 20px 0;
}

/* ===========================
   Responsive Adjustments
=========================== */
@media (max-width: 768px) {
  .header-content {
    flex-direction: column;
    align-items: flex-start;
  }

  .header .logo img {
    max-width: 100px;
    margin-bottom: 10px;
  }

  .header-content-menu ul {
    flex-direction: column;
    gap: 10px;
  }
}

/* ===========================
   Banner Section
=========================== */

.btn--primary {
  background-color: #166bb0;  /* Default blue */
  color: #fff;
  border: none;
}

.btn--primary:hover {
  background-color: #0f4c81;  /* Dark blue on hover */
  color: #fff;                /* keep text white */
}

.btn--secondary {
  background-color: transparent;   /* keep transparent */
  border: 1px solid #bdbdbd;          /* fine gray outline */
  color: black;                     /* text matches outline */
}

/* ===========================
   About Section
=========================== */

.stats-container {
  display: flex;
  gap: 60px;                /* space between the two stats */
  flex-wrap: wrap;           /* allows wrapping on smaller screens */
}

.solutions-year,
.hours-research {
  display: flex;             /* number + text side by side */
  align-items: flex-start;   
  gap: 12px;                 /* space between number and text */
  min-width: 220px;          /* ensure text fits two lines */
}

.solutions-year .para-2,
.hours-research .para-2 {
  font-size: 18px;           /* your new larger font size */
  line-height: 1.2;
  display: inline-block;      
}

.solutions-year,
.hours-research {
  display: flex;          /* number + text side by side */
  align-items: center;    /* vertically center number and text */
  gap: 12px;              /* space between number and text */
  min-width: 220px;       /* ensure text fits two lines */
}

.solutions-year h2,
.hours-research h2 {
  color: #166bb0 !important; /* only changes the numbers */
}

.solutions-year .para-2,
.hours-research .para-2 {
  color: #555; /* keeps the text separate */
}

#about {
  background-color: #efece5; /* replace with any color you want */
  padding: 60px 0px;           /* optional: adds spacing top/bottom */
}

/* Full-width about section background (recommended) */
section.about {
  background-color: #efece5 !important; /* <-- replace with the color you want */
  background-image: none !important;    /* remove any background images that could cover the color */
  padding: 72px 0;                       /* adjust vertical spacing */
  position: relative;                    /* keep pseudo-elements positioned relative if needed */
}

/* Hide decorative pseudo-elements if they block the color */
section.about::before,
section.about::after {
  display: none !important;
  background: none !important;
}

/* Make sure inner wrappers are transparent (so the section color shows through) */
section.about .container,
section.about .about-content {
  background: transparent !important;
}

.about-white-shadow {
  display: none;
}

.about-content-left {
  margin-right: 40px;  /* add more space between image and text */
}

.about-content-right {
  margin-left: 10px;   /* optional fine-tuning */
}

.about-img {
  width: 520px;   /* set the exact width you want */
  height: auto;   /* keeps proportions */
}

.btn {
    margin-top: 35px;
}

.about-content-right .font-md {
  margin-bottom: 30px; /* adjust as needed (default may be ~20–30px) */
}

.about-content-right .para-2 {
  margin-top: 0; /* remove extra top margin if any */
}

/* ===========================
   Service Section
=========================== */

.deep-dot {
  background-color: #166bb0; /* your desired color */
}

.font-xs {
    font-size: 28px;
    line-height: 36px;
}

.font-body {
  margin-top: 20px; /* adjust this value to increase/decrease space */
  font-size: 16px; /* optional: make it smaller than title */
  color: #555; /* optional: lighter color for body text */
}

.service {
    padding-bottom: 10px;
}

.service-content-area .font-body {
  text-transform: none !important;
}

.service-content-area {
  position: relative;
  padding: 225px 20px 20px 20px; /* keep padding for text */
  background: #ebe5d7;
  border-radius: 10px;
  text-align: left;
}

.layer-svg {
  position: absolute;
  top: 0px;
  left: -28px;   /* push into the border */
  width: 200px;
  height: 200px;
  display: block;
}

.layer-svg .service-icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.underline-decor {
  position: relative;
  display: inline-block;
  padding-bottom: 10px;  /* pushes the underline further away */
}

.underline-decor::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3.5px;            /* thickness of the underline */
  width: 65px;            /* length of the line */
  background-color: #72a3ca; /* color of the line */
  border-radius: 999px;   /* makes the ends fully round */
}

.light-dot {
  display: none !important;  /* hides the old underline */
}

.service-content-area:hover {
  background: #ebe5d7;          /* hover background color */
}

/* ===========================
   Project Section
=========================== */

.project {
  background: #fffdf5;
    margin-top: 110px;
}

.project {
  background-color: #fffdf5;  /* your background color */
  width: 100%;               /* span full width */
  padding: 80px 80px;           /* add some breathing room top & bottom */
}

.project .container {
  max-width: 1200px;         /* keeps content nicely centered */
  margin: 0 auto;            /* centers horizontally */
}

.project-work-text {
    padding: 24px;
    background: #f2eee3;
    border-radius: 0px 0px 10px 10px;
}

.project-work-image img {
    width: 100%;
    border-radius: 10px 10px 0px 0px;
}

/* Make columns equal height */
.project .row {
  display: flex;
  flex-wrap: wrap;
}

/* Force each column to stretch fully */
.project-content {
  display: flex;
}

/* Cards take full column height */
.project-work {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Text area flex setup */
.project-work-text {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Description spacing */
.project-desc {
  margin-bottom: 40px;
}

/* Arrow always at the bottom */
.right-arrow-icon {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.right-arrow-icon {
  color: #166bb0; /* pick any hex, rgb, or CSS variable */
}

/* Arrow color on hover */
.right-arrow-icon:hover svg {
  color: #166bb0; /* orange (example) */
}

/* ===========================
   Service Arrow 
=========================== */

.right-arrow-icon span {
  color: #166bb0;   /* normal state color */
}

.right-arrow-icon:hover span {
  color: #166bb0;   /* hover color */
}

.right-arrow-icon {
  display: inline-flex;   /* keeps text + arrow aligned */
  align-items: center;
  gap: 8px;               /* space between text and arrow */
  margin-top: 100px;       /* space above, pushes arrow down from body text */
  text-decoration: none;  /* removes default link underline */
}

.right-arrow-icon {
  margin-top: 40px;
  color: #166bb0;
}

/* ===========================
   Call to action Section
=========================== */

.call-action {
  background-color: #fffdf6;      /* section background color */
  padding-bottom: 100px;             /* top/bottom and left/right padding */
  width: 100%;                     /* full width */
  display: flex;
  justify-content: center;         /* centers content horizontally */
  align-items: center;             /* centers content vertically if needed */
  position: relative;
  overflow: hidden;                /* hides overflowing shapes/dots */
  border-radius: 12px;             /* optional rounded corners */
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* Inner content container */
.call-action-content {
  max-width: 1200px;              /* limits the width */
  margin: 0 auto;
  position: relative;
  z-index: 2;                     /* ensures content stays above shapes/dots */
  padding-top: 45px; /* adjust to taste */
}

/* Headings */
.call-action-content h4 {
  color: black;                 /* heading color */
  font-size: 39px;
  line-height: 1.5;
}

/* Remove inner dark box inside the call-action section */
.call-action .container,
.call-action .call-action-content {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.call-ac-dot-1 {
  display: block !important;
  position: absolute;
  width: 380px;
  height: auto;
  top: 158px !important;   /* move vertically */
  left: -110px !important;  /* move horizontally */
  z-index: 3; /* behind the text */
}

.call-ac-dot-2 {
  display: block !important;
  position: absolute;
  width: 400px;
  height: auto;
  top: -185px !important;   /* move vertically */
  left: 905px !important;  /* move horizontally */
  z-index: 1; /* behind the text */
}

.call-action-container {
  height: 380px;
  width: 90%;       /* or a fixed width like 1200px */
  max-width: 1200px;
  background-color: #a9c8dd;  /* banner background */
  padding: 40px;           /* internal padding */
  border-radius: 12px;     /* optional rounded corners */
  position: relative;   /* ensures absolute children are positioned relative to this container */
  overflow: hidden;     /* hides anything that goes outside the container */
  z-index: 1;
  justify-content: center;
  align-items: center;
}

.call-action-container .text-content {
  position: relative;  /* important: text is positioned so z-index works */
  z-index: 2;          /* sits above dot-2 */
}

.call-action .btn.btn--primary {
  margin-top: 15px; /* adjust this value to increase/decrease spacing */
}

/* ===========================
   Contact Section
=========================== */

/* Make "Location / Email / Availability" labels bold */
.contact-location-icon .location-text span {
    font-weight: 600;  /* semi-bold, or 700 for full bold */
}

/* Resize PNG icons */
.contact-location-icon img {
    width: 32px;   /* adjust as needed */
    height: auto;  /* keeps aspect ratio */
    display: block;
}

.contact-location-icon img[alt="Location icon"] {
    width: 38px;  /* bigger than the others */
    height: auto;
}

.social-lg-round { 
  width: 80px; 
  height: 80px; 
  border-radius: 50%; 
  background:#e0ecf4 
}

/* Bottom small socials */
.social-sm-round {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;          /* FA icon size */
    color: #166bb0;           /* icon blue by default */
    margin-right: 10px;
    transition: all 0.3s ease;
    background-color: transparent; /* transparent background by default */
}

/* Behance + LinkedIn default state */
.social-sm-round.behance,
.social-sm-round.linkedin {
    background-color: transparent;
    text-decoration: none;
}

/* Hover state: blue background, white icon */
.social-sm-round.behance:hover,
.social-sm-round.linkedin:hover {
    color: #fff;              /* icon turns white */
    background-color: #166bb0; /* background turns blue */
    text-decoration: none;
}

/* Ensure FA icons follow parent color */
.social-sm-round i {
    color: inherit;
}

.contact-area-location .bottom-social-icon {
    margin-top: 60px; /* adjust value as needed */
}

.at-symbol {
    font-family: 'Segoe UI', sans-serif; /* or any clean system font */
    background: transparent !important;
    color: inherit; 
    padding: 0;
    margin: 0;
    display: inline;
}

/* Contact section background */
.contact {
    background-color: #166bb0; /* Change to your preferred color */
}

/* Left and right boxes */
.contact-area-info,
.contact-area-location {
    background-color: #fffdf6; /* or any color you want */
}

.contact-area-info .contact-form form textarea {
    background-color: transparent;
}

.contact-area-info .contact-form form input {
    background-color: transparent;
}

/* ===========================
   Footer Section
=========================== */

.footer-text h4 a, .footer-text .h4 a {
    color: #166bb0;
    text-decoration: none;
}

.footer {
  background-color: #f5f4ef;
}