/* hero section start */
/* ===== HERO BASE ===== */
.hero {
  width: 100%;
  min-height: 665px;           /* Figma height */
  position: relative;
  overflow: hidden;
  border-bottom: 11px solid var(--dark-pink);
}

/* Background image layer (full bleed) */
.hero__bg {
  position: absolute;
  inset: 0;
  background-image: url('../images/companiespage/heorsection.webp'); /* set your path */
  background-size: cover;
  background-position: center right;
  opacity: 1;                  /* as per spec */
}

/* Content container pinned to a 1440px canvas but stays full-width */
.hero__inner {
  max-width: 1440px;           /* Figma width */
  height: 665px;               /* maintain canvas height on desktop */
  margin: 0 auto;
  position: relative;
  display: grid;
  align-items: center;
  /* Creates breathing room from edges while staying centered */
  padding-inline: clamp(16px, 5vw, 56px);
}

/* ===== TEXT BLOCK (394 × 221 with 39px gap) ===== */
.hero__content {
  width: 394px;
  min-height: 221px;
  display: flex;
  flex-direction: column;
  gap: 39px;                   /* Figma gap */
  /* optional surface to ensure readability over busy images */
  /* backdrop-filter: blur(0.5px); */
}

/* ===== TYPOGRAPHY ===== */
/* Heading (no font-family; uses your global font settings) */
.hero__title {
  font-weight: 400;
  font-size: 30px;
  line-height: 100%;
  letter-spacing: 0;
  text-align: center;
  margin: 0;
  color: var(--primary-blue);
}

/* Description (no font-family) */
.hero__desc {
  font-weight: 400;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: 0;
  text-align: center;
  margin: 0;
  color: var(--primary-blue);
  opacity: 0.9;
}

/* ===== BUTTON (394 × 45 + radius + padding + 10px gap) ===== */
.hero__btn {
  width: 394px;
  height: 45px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 10px;
  padding: 10px 14px;          /* top/right/bottom/left from spec */
  text-decoration: none;
  background: var(--primary-blue);
  color: #fff;                 /* keep legible; if you have a text var, swap it in */
  border: 2px solid var(--primary-blue);
  transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
}

.hero__btn:hover {
  transform: translateY(-1px);
  background: var(--dark-pink);
  border-color: var(--dark-pink);
}

.hero__btn:active {
  transform: translateY(0);
}

/* Optional small icon placeholder */
.hero__btn-icon {
  display: inline-block;
  line-height: 1;
}

/* ===== RESPONSIVE BEHAVIOR ===== */
@media (max-width: 1024px) {
  .hero__inner {
    /* height: auto;               */
    padding-block: 56px;       
  }
  .hero__content,
  .hero__btn {
    width: min(394px, 100%);
  }
}

@media (max-width: 600px) {
  .hero__bg {
    background-position: center; /* keep subject centered on small screens */
  }
  .hero__title {
    font-size: 26px;
  }
  .hero__desc {
    font-size: 15px;
  }
}
/* hero section end */



/*we offer section start*/


/* ===== Section canvas (1440 × 887) ===== */
.section-offer-about{
  width: 100%;
  min-height: 887px;                 /* keep content-responsive while honoring figma height */
  display: grid;
  justify-content: center;
  padding: 40px 24px 56px;
  box-sizing: border-box;
}
.section-offer-about > *{
  max-width: 1440px;                 /* figma canvas width */
  margin-inline: auto;
}

/* ===== “We Offer” card ===== */
/* 1091 × 175, 10px radius, 65px + 55px padding & 80px gap */
.offer-card{
  width: min(1091px, 100%);
  height: 175px;
  border-radius: 10px;
  padding: 55px 65px;
  background: var(--primary-blue);
  color: #fff;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 80px;
  box-shadow: 0 4px 10px rgba(0,0,0,.15);
}
.offer-title{
  margin: 0;
  font-weight: 400;
  font-size: clamp(22px, 3vw, 36px);
  line-height: 1.1;
}
.offer-actions{
  display: flex;
  gap: 28px;
}
.offer-btn{
  width: 250px;
  height: 65px;
  padding: 10px 14px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none;
  background: var(--dark-pink);
  color: #fff;
  border: 2px solid var(--dark-pink);
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.offer-btn:hover{ transform: translateY(-1px); }
.offer-btn:active{ transform: translateY(0); }

/* ===== Bottom split: photos + text ===== */
.about-wrap{
  display: grid;
  grid-template-columns: minmax(320px, 654.16015625px) minmax(280px, 476px);
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 5vw, 64px);
  margin-top: 56px;
}

/* ===== Photos block → row layout with equal sizes ===== */
.about-photos{
  /* row of two equal squares */
  display: grid;
  grid-template-columns: repeat(2, 320.959991px);
  gap: 24px;                    /* spacing between images */
  align-items: start;
  width: auto;                  /* no fixed canvas now */
  height: auto;
  position: relative;           /* keep your original context */
}

/* base photo style (now in normal flow, not absolute) */
.photo{
  position: relative;           /* was absolute */
  width: 320.959991px;
  height: 320.959991px;
  overflow: hidden;
}
.photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* LEFT image — keep your existing border & radius */
.photo--primary{
  border-top-left-radius: 160.48px;
  border-left: 17.68px solid var(--dark-pink);
  background: #eee;
}

/* RIGHT image — keep your existing border & radius, add top offset */
.photo--overlay{
  border-top-right-radius: 160.48px;
  border-right: 17.68px solid var(--dark-pink);   /* match thickness */
  background: #eee;
  margin-top: 40px;                               /* adjust as needed */
  box-shadow: 0 10px 18px rgba(0,0,0,.12);
}
/* flip image-2 horizontally */
.photo--overlay img{
  transform: scaleX(-1);
  transform-origin: center;
}

/* ===== Responsive: stack on small ===== */
@media (max-width: 700px){
  .about-photos{
    grid-template-columns: 1fr;
    justify-items: center;
  }
  .photo{
    width: min(100%, 320.959991px);
    height: 260px;               /* optional mobile height */
  }
  .photo--overlay{ margin-top: 20px; }
}

/* ===== Text block (476 × 222, 20px gap) ===== */
.about-text{
  width: 476px;
  min-height: 222px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  color: var(--primary-blue);
}
.about-title{
  margin: 0;
  font-weight: 600;
  font-size: clamp(26px, 3.2vw, 44px);
  line-height: 1.1;
}
.about-desc{
  margin: 0;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  opacity: .95;
}

/* ===== Responsive tweaks ===== */
@media (max-width: 1100px){
  .offer-card{
    grid-template-columns: 1fr;
    height: auto;
    row-gap: 28px;                 /* visual equivalent of 80px in vertical stack */
    text-align: center;
  }
  .offer-actions{
    justify-content: center;
    flex-wrap: wrap;
  }
  .about-wrap{
    grid-template-columns: 1fr;
    justify-items: center;
  }
  .about-text{
    width: min(100%, 654.16015625px);
  }
  .about-text{
    text-align: left;
  }
}
@media (max-width: 560px){
  .offer-btn{
    width: 100%;
    max-width: 310px;
    height: 56px;
  }

}










/* ===== Section BG image + dark-pink overlay ===== */
.section-offer-about{
  position: relative;
  isolation: isolate; /* keep overlays behind content */
  border-bottom: 11px solid var(--dark-pink);
}

/* Background image layer */
.section-offer-about::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("../images/companiespage/background.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.06; /* image at 6% */
  pointer-events: none;
}

/* Dark-pink color overlay */
.section-offer-about::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: var(--background-light);
  opacity: 0.08;
    /* opacity: 0.28; optional: tweak if you need stronger/weaker tint */
  pointer-events: none;
}

/* Ensure content sits above BG layers */
.section-offer-about > *{
  position: relative;
  z-index: 1;
}


/*we offer section end*/





/*our industries section start*/


/* ===== Full section (1440×947.94, gap 75, v-padding 120) ===== */
.industries-section{
  width:100%;
  min-height:947.94px;
  display:grid;
  gap:75px;
  padding-top:120px;
  padding-bottom:120px;
  box-sizing:border-box;
  justify-items:center;
  /* optional subtle bg; remove if not needed */
  /* background: #f9fafb; */
  border-bottom: 11px solid var(--dark-pink);
}

/* cap content to 1440 */
.industries-head,
.industries-grid{
  width:100%;
  max-width:1440px;
  margin-inline:auto;
  padding-inline:24px;
  box-sizing:border-box;
}

/* ===== Heading (1440×64, centered) ===== */
.industries-head{
  height:64px;
  display:grid;
  place-items:center;
}
.industries-title{
  margin:0;
  font-weight:600;
  font-size:clamp(22px,3.2vw,32px);
  color:var(--primary-blue);
}


/* ===== Grid of cards ===== */
.industries-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:28px 32px; /* row x column */
}

/* ===== Card (320.8057 × 246.97 with shadow) ===== */
.industry-card{
  width:320.80569458px;
  height:246.97000122px;
  list-style:none;
  position:relative;
  border-radius:12px; /* outer soften */
  /* box-shadow:0 4px 4px rgba(0,0,0,.25); #00000040 */
  background:transparent;
}

/* ===== Image (304.8242 × 187.9486, radius 10) ===== */
.industry-card__img{
  position:absolute;
  top:0;
  left:0;
  width:304.82421875px;
  height:187.9486084px;
  margin-left:1.84px;           /* per figma left: 1.84px */
  border-radius:10px;
  overflow:hidden;
}
.industry-card__img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* ===== Label bar (268×40, top:176, left:1.58, bottom-left radius 10) ===== */
.industry-card__label{
  position:absolute;
  top:176px;
  left:1.58px;
  width:268.00001454px;
  height:40.00000143px;
  display:flex;
  align-items:center;
  padding:10px;
  border-bottom-left-radius:10px;
  background:var(--primary-blue);
  color:#fff;
  font-weight:500;
  line-height:1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  justify-content: center;
}

/* ===== Dark-pink circle badge (60×60 at top:170, left:255.84) ===== */
.industry-card__badge{
  position:absolute;
  top:170px;
  left:255.84px;
  width:60px;
  height:60px;
  border-radius:50px;
  background:var(--dark-pink);
  display:grid;
  place-items:center;
  box-shadow:0 4px 10px rgba(0,0,0,.18);
}
.industry-card__icon{
  width:30px;
  height:31.74453735px; /* per figma */
}

/* ===== Responsive ===== */

@media (max-width: 1500px) {
  .industries-grid {
    grid-template-columns: repeat(3, 1fr); /* ✅ show 3 cards per row */
    justify-items: center;
  }
}
@media (max-width: 1200px){
  .industries-grid{
    grid-template-columns: repeat(3, 1fr);
    justify-items:center;
  }
}
@media (max-width: 900px){
  .industries-grid{
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px){
  .industries-grid{
    grid-template-columns: 1fr;
  }
  .industry-card{
    width:100%;
    max-width:320.80569458px;
    justify-self:center;
  }
}



/*our industries section end*/









/*commitments-section start*/

/* ===== Full section (1440 × 967.97, gap 75, v-padding 120) ===== */
.commitments-section{
  width: 100%;
  min-height: 967.969970703125px;
  display: grid;
  gap: 75px;
  padding-top: 50px;
  padding-bottom: 50px;
  box-sizing: border-box;
  justify-items: center;
    border-bottom: 11px solid var(--dark-pink);
  /* background image + dark-pink overlay */
  position: relative;
  isolation: isolate;
}
.commitments-section figure{
    margin: 0px !important;
}
.commitments-section::before{
  content:"";
  position:absolute; inset:0; z-index:0;
  background-image: url("../images/companiespage/secondbackground.webp"); /* <- your bg */
  background-size: cover;
  background-position: center;
  opacity: 0.04;             /* image at 6% so color shows */
  pointer-events: none;
}
.commitments-section::after{
  content:"";
  position:absolute; inset:0; z-index:0;
  background: var(--background-light);
  opacity: 0.18;             /* section tint; tweak 0.12–0.28 as needed */
  pointer-events: none;
}
.commitments-section > *{ position: relative; z-index: 1; }

/* cap content to 1440 */
.commitments-head, .commitments-grid{
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: 24px;
  box-sizing: border-box;
}

/* ===== Heading (centered) ===== */
.commitments-head{
  height: 64px;
  display: grid;
  place-items: center;
}
.commitments-title{
  margin: 0;
  font-weight: 600;
  font-size: clamp(22px, 3.2vw, 40px);
                          /* more contrast over tinted bg */
  text-align: center;
}

/* ===== Cards grid ===== */
.commitments-grid{
  --card-w: 360px;                      /* easy to tweak */
  --card-gap-x: 36px;
  --card-gap-y: 40px;

  display: grid;
  grid-template-columns: repeat(3, var(--card-w));
  gap: var(--card-gap-y) var(--card-gap-x);
  justify-content: center;
}

/* center the last row of 2 cards under the 3-column width */
.commitments-grid::after{
  content: "";                          /* ghost filler for centering */
  width: var(--card-w);
  height: 0;
  display: block;
}

/* ===== Card ===== */
.commit-card{
  width: var(--card-w);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
  overflow: hidden;                     /* clip the image corners */
  position: relative;
}

/* Image */
.commit-card__img{
  height: 200px;                        /* feel free to adjust */
  overflow: hidden;
}
.commit-card__img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Pink title ribbon (like your mock) */
.commit-card__ribbon{
  background: var(--dark-pink);
  color: #fff;
  line-height: 1.2;
  padding: 10px 14px;
  font-weight: 600;
}

/* Blue description panel */
.commit-card__desc{
  background: var(--primary-blue);
  color: #fff;
  padding: 12px 16px 16px;
  font-size: 14px;
  line-height: 1.5;
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 14px;
}

/* ===== Responsive ===== */
@media (max-width: 1100px){
  .commitments-grid{
    grid-template-columns: repeat(2, var(--card-w));
  }
  .commitments-grid::after{ display: none; } /* 2-cols auto center naturally */
}
@media (max-width: 720px){
  .commitments-grid{
    --card-w: min(100%, 360px);
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/*commitments-section end*/












/*hr-section start*/


/* ===== Full section (1440 × 977 with 120/120 padding, 75 gap) ===== */
.hr-section{
  width:100%;
  min-height:977px;
  display:grid;
  gap:75px;
  padding-top:80px;
  padding-bottom:80px;
  box-sizing:border-box;
  place-items:center;

  /* full background image + overlay */
  position:relative;
  isolation:isolate;
}
.hr-section::before{
  content:"";
  position:absolute; inset:0; z-index:0;
  background-image:url("../images/companiespage/thirdbackground.webp");  /* <-- replace */
  background-size:cover;
  background-position:center;

  pointer-events:none;
}

/* ===== Center card (1080 × 737, 30 radius, 2px border, paddings) ===== */
.hr-card{
  width:min(1080px, calc(100% - 30px));
  min-height:737px;
  border-radius:30px;
  padding:40px 34px;
  box-sizing:border-box;
  background:var(--primary-blue);
  color:#fff;
  border:2px solid var(--dark-pink);
  box-shadow:0 18px 40px rgba(0,0,0,.25);
  position:relative;
  opacity: 95%;
}

/* headings / copy */
.hr-title{
  margin:0 0 16px 0;
  font-weight:600;
  font-size:clamp(26px,3.6vw,44px);
  text-align:center;
}
.hr-sub{
  margin:0 auto 28px auto;
  max-width:860px;
  text-align:center;
  line-height:1.6;
  opacity:.95;
}
.hr-subtitle{
  margin:0 0 18px 0;
  font-weight:600;
  font-size:clamp(20px,2.6vw,32px);
  text-align:center;
}

/* two-column list */
.hr-list{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:30px;                     /* from spec */
  margin-top:10px;
}
.hr-col{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:14px;
}
.hr-col li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  line-height:1.5;
}
.dot{
  flex:0 0 10px;
  width:10px; height:10px;
  border-radius:50%;
  background:var(--dark-pink);
  margin-top:.45em;             /* align with first text line */
}

/* ===== Responsive ===== */
@media (max-width: 900px){
  .hr-card{ padding:28px 20px; 
  margin: 10px;
  }

  .hr-list{ grid-template-columns:1fr; }
}

/*hr-section end*/







/*moving companies section start*/

.growmore-images {
	margin-top: 95px;
}
.images-row {
	display: flex; /* Use Flexbox to arrange images in a row */
	justify-content: space-around; /* Center images horizontally */
	gap: 10px; /* Space between images */
	width: 1212px;
}
.clientsimage{
    width: 100px;
    height: 50px;
}



.moving-logos {
	display: flex;
	overflow-x: hidden;
	user-select: none;
	mask-image: linear-gradient(
		to right,
		hsl(0 0% 0% / 0),
		hsl(0 0% 0% / 1) 20%,
		hsl(0 0% 0% / 1) 80%,
		hsl(0 0% 0% / 0)
	);

	width: 90%; /* Set the desired width for the parent container */
	margin: 0 auto; /* Center the container */
}

.logos_moving {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	min-width: 80%;
	animation: loop 20s linear infinite;
}

@keyframes loop {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-100%);
	}
}

.second-row-moving-logos {
	display: flex;
	overflow-x: hidden;
	user-select: none;
	mask-image: linear-gradient(
		to right,
		hsl(0 0% 0% / 0),
		hsl(0 0% 0% / 1) 20%,
		hsl(0 0% 0% / 1) 80%,
		hsl(0 0% 0% / 0)
	);

	width: 80%; /* Set the desired width for the parent container */
	margin: 0 auto; /* Center the container */
	margin-top: 50px;
}

.second-row-logos_moving {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	min-width: 80%;

	animation: loop2 20s linear infinite;
}

@keyframes loop2 {
	from {
		transform: translateX(-100%);
	}
	to {
		transform: translateX(0);
	}
}










/* Responsive Styles */



/* For screens smaller than 920px */


/* For screens smaller than 768px */
@media screen and (max-width: 768px) {




	.images-row {
		flex-direction: column;
		align-items: center;
		width: 100%;
	}

	.clientsimage {
		width: 80px;
		height: 35px;
	}
}

/* For screens smaller than 480px */
@media screen and (max-width: 480px) {

	.images-row {
		flex-direction: column;
		align-items: center;
		width: 100%;
	}

	.clientsimage {
		width: 60px;
		height: 30px;
	}
	
}


/*moving companies section end*/