.cta-button {
  background: var(--darkblue-color);
  color: var(--white-color);
  padding: 12px 24px;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 25px;
  text-align: center;
  
  transition: all 0.3s ease; /* Smooth transition for hover effects */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* Subtle shadow */
}

.cta-button:hover {
  background: var(--blue-color);
  color: var(--white-color);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2); /* Enhanced shadow on hover */
  transform: translateY(-2px); /* Slight lift effect */
}

.cta-button:active {
  transform: translateY(1px); /* Button presses down slightly when clicked */
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}

/* Banner Responsive Section */
@media screen and (max-width: 1040px) {
  .banner .banner-container .cta-button {
    max-width: 150px; /* Changed from fixed width to max-width for better flexibility */
  }
 }

@media screen and (max-width: 899px) {
  .banner .banner-container .cta-button {
    max-width: 130px;
    position: relative;
    z-index: 9;
  }
  
  .banner .banner-container .hero-details p {
    font-size: 2em; /* Adjusted to use relative units for better responsiveness */
  }
}

@media screen and (max-width: 767px) {
  .banner .banner-container .cta-button {
    max-width: 140px; /* Adjusted for more uniform scaling */
  }
}


.profession-typing {
  font-size: 1.5rem;
  font-weight: 500;
  margin-top: 10px;
  color: var(--textblue-color);
}

/* Center the "profession-typing" text on small screens */
@media (max-width: 767px) {
  .profession-typing {
    text-align: center;
    display: block;      /* ensures full-width so centering works */
  }
}



/* Why-Us Section  */
/* Why-Us Section  */
/* Why-Us Section  */
/* Why-Us Section  */
/* Why-Us Section  */
/* Why-Us Section  */

/* General Styles */
.choose-container {
  padding: 20px 0;
}

.choose-item:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}



.why-us {
  margin-top: -20px;
  box-sizing: border-box;
}

.why-us .choose-title {
  background: var(--main-color);
  min-height: 300px;
  clip-path: polygon(0 0, 100% 0, 100% 66%, 0% 100%);
}

.why-us .choose-title h1 {
  font-size: 35px;
  color: var(--white-color);
  text-align: center;
  padding-top: 40px;
}

.why-us .choose-container {
  margin-top: -13rem;
  padding: 0 2rem;
  box-sizing: border-box;
}



.choose-container {
  margin-top: -13rem;
  padding: 0 2rem;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* Consistent spacing */
  justify-content: center; /* Center align items */
}


:root{
  --accent-blue: #8abfff;   /* same blue you picked before */
}

/*  ONE place that holds the border effect  */
.fancy-frame{
  /* base card styles */
  position: relative;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0,0,0,.30);
  transition: box-shadow .3s ease-in-out;
}

/* thick inner stroke */
.fancy-frame::before{
  content: "";
  position: absolute;
  inset: 0;
  border: 3px solid var(--accent-blue);
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}

/* top-edge “break” (gap starts 12 px from the left) */
.fancy-frame::after{
  content: "";
  position: absolute;
  top: 0;
  left: 12px;
  width: 48px;
  height: 6px;
  background: #fff;
  pointer-events: none;
  z-index: 1;
}

.fancy-frame:hover{
  box-shadow: 0 0 18px rgba(0,0,0,.40);
}






/*  Accent colour for the thick stroke */
:root{
    --accent-blue: #8abfff;      /* tweak until it matches your artwork */
}

/* Why-Us cards  */
.why-us .choose-item{
    /* ─── your existing styles ─── */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: .5rem 0;
    min-height: 100%;
    background: var(--white-color, #fff);
    /*box-shadow: 0 0 10px rgba(0,0,0,.30);*/
    position: relative;
    margin-top: 20px;
    text-align: center;
    transition: box-shadow .3s ease-in-out;

    /* ─── NEW – outer hair-line & rounding ─── */
    border: 1px solid rgba(0,0,0,.08);   /* subtle grey outline */
    border-radius: 20px;                 /* same curvature as the sample */
    overflow: hidden;                    /* lets us mask the blue stroke */
}

/* Thick blue stroke that sits just inside the outline */
.why-us .choose-item::before{
    content: "";
    position: absolute;
    inset: 0;                            /* stretch to all edges */
    border: 3px solid var(--accent-blue);
    border-radius: inherit;              /* mirror the parent radius */
    pointer-events: none;                /* keep clicks on the card */
    z-index: 0;                          /* below the card’s content */
}

/* Tiny mask that removes the first bit of the stroke (top-left “break”) */
.why-us .choose-item::after{
    content: "";
    position: absolute;
    top: 0;
    left: 12px;
    width: 48px;     /* width of the missing segment – adjust if needed */
    height: 6px;     /* same as stroke thickness */
    background: var(--white-color, #fff);
    pointer-events: none;
    z-index: 1;      /* above ::before, still under real content */
}

/* Optional hover elevation, keeps the border intact */
.why-us .choose-item:hover{
    box-shadow: 0 0 18px rgba(0,0,0,.40);
}
.choose-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}


.why-us .choose-item .photo img {
  width: 250px;
  height: 250px;
}

/* general  */
.choose-item .title {
  padding-bottom: 0rem;
  font-size: 30px;
}



.choose-item .title h4 {
  font-size: 1.25rem !important;
  margin-bottom: 0.4rem !important;
  color: var(--main-color) !important;
}

.choose-item .info-container p {
  font-size: 1rem;
  color: var(--paragraph-color);
  line-height: 1.5;
  margin: 0 5px;
}



.info-container .btn-link { 
background-color: orange; 
border: none;
color: white; 
padding: 10px 20px; 
text-align: center; 
text-decoration: none; 
display: inline-block; 
border-radius: var(--global-border-radius); /* Uses the global setting */
margin-top: 30px; 
margin-bottom: 10px; 
transition: background-color 0.3s ease, transform 0.3s ease; 
} 

.info-container .btn-link:hover { 
background-color: darkorange; 
transform: scale(1.05); 
}





/* Why-US Responsive Section  */
@media screen and (max-width: 991px) {

  .why-us .choose-item.three-item {
    margin-top: 47px !important;
  }
}

@media screen and (max-width: 767px) {
  .why-us .choose-item.two-item {
    margin-top: 47px !important;
  }

  .why-us .choose-item.three-item {
    margin-top: 76px !important;
  }

  .why-us .choose-container {
    margin-top: -15rem;
  }

  .why-us .choose-item {
    min-height: 100%;
  }
}

@media screen and (max-width: 400px) {
  .why-us .choose-container {
    padding: 0 0;
  }

  .why-us .choose-item .photo img {
    width: 160px;
    height: 160px;
  }

  .why-us .choose-item {
    padding: 0 1rem;
  }
}

/* Media query for screens with a maximum width of 768px */
@media screen and (max-width: 768px) {
  .why-us .choose-item .info-container {
    padding: 20px 1rem; /* Reduced padding for screens with a maximum width of 768px */
  }
}





/* Profession We Serve */
/* Default card layout for larger screens */

p {
  line-height: 1.9; /* Adjust this value as needed */
}



.fixed-width-container {
  max-width: 900px; /* Set a max width for the container */
  margin: 0 auto;    /* Center the container */
}


.card {
  border: none;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease;
}

.card:hover {
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
}

/* Card image adjustments */
.card img {
  height: 200px;
  object-fit: contain;
  width: 100%;
}


/* Show two cards next to each other on small screens */
@media (max-width: 768px) {
  .card {
    width: 48%; /* Makes two cards fit next to each other */
    margin: 1%; /* Adds some space between cards */
  }
}

/* Adjustments for very small screens (e.g., mobile) */
@media (max-width: 576px) {
  .card {
    width: 100%; /* On very small screens, cards take full width */
    margin-bottom: 10px; /* Adds spacing between stacked cards */
  }
}


/* fancy-btn */

.fancy-btn {
  position: relative;
  display: inline-block;
  padding: 10px 24px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: var(--global-border-radius); /* Uses the global setting */
  font-weight: bold;
  color: #000;
  cursor: pointer;
  transition: box-shadow .3s ease-in-out, transform .2s ease;
  z-index: 1;
}

/* thick inner stroke */
.fancy-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 3px solid var(--accent-blue);
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}

/* top-edge “break” (like the fancy-frame) */
.fancy-btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: 12px;
  width: 20px;
  height: 6px;
  background: #fff;
  pointer-events: none;
  z-index: 1;
}

/* Hover effect */
.fancy-btn:hover {
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2); /* Enhanced shadow on hover */
  transform: translateY(-2px); /* Slight lift effect */
}