/* ──────────────────────────────────────────────────────────────────────────
   1. Universal box-sizing
   ────────────────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}
a{
  color: var(--black);
  text-decoration: none;
}
/* ──────────────────────────────────────────────────────────────────────────
   2. Reset form controls
   ────────────────────────────────────────────────────────────────────────── */
button,
input,
optgroup,
select,
textarea {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  outline: none;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* Remove inner focus padding in Firefox */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/* Remove clear & reveal icons in IE */
input::-ms-clear,
input::-ms-reveal {
  display: none;
  width: 0;
  height: 0;
}

/* Remove spin buttons in Chrome/WebKit for number inputs */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Remove dropdown arrow in IE10+ */
select::-ms-expand {
  display: none;
}

/* Reset placeholder styling to inherit color */
::placeholder {
  color: inherit;
  opacity: 1;
  /* Firefox lowers opacity by default */
}

/* Cursor defaults */
button,
[type="button"],
[type="reset"],
[type="submit"] {
  cursor: pointer;
}

/* Optional: make disabled controls truly inert */
:disabled {
  cursor: default;
  opacity: 0.6;
}

/* ──────────────────────────────────────────────────────────────────────────
   3. (Optional) Reset specific element styles
   ────────────────────────────────────────────────────────────────────────── */

/* If you want textareas to auto-resize box model: */
textarea {
  resize: vertical;
  /* or “none” if you want no resize handle */
}

/* If you want to remove list-styles from datalist (if used): */
datalist {
  display: none;
}


:root {
  --black: #333333;
  --black7: #B0B0B0;
  --black8: #9B9B9B;
  --white: #EDEDED;
  --padding-reg: 25px 50px;
  --border1: 2px solid #333333;
  --yellow: #F4D738;
  --yellow10: #FFF383;
  --yellow9: #F8DC61;
  --yellow8: #E0C63F;
  --red: #FF6B6B;
  --red10: #FFD3CC;
  --red9: #FFB8B2;
  --red8: #FF9E99;
  --red7: #FF8582;
  --green: #90EE90;
  --green10: #C0FFBD;
  --green9: #A3EFA1;
  --green8: #88D987;
  --green7: #6DC36F;
  --pink: #FFB2EF;
  --pink10: #FFE2FF;
  --pink9: #FFC9FB;
  --pink8: #F5B1E7;
  --pink7: #E09AD2;
  --purple: #A388EE;
  --purple10: #FFE7FF;
  --purple9: #E9CFFF;
  --purple8: #D3B7FF;
  --purple8: #D3B7FF;
  --purple7: #BCA1FF;
  --blue: #87CEEB;
  --blue10: #C9FBFF;
  --blue9: #ADE5FD;
  --blue8: #92CFE9;
  --blue7: #78B9D4;

  /* base font size (for rem calculations) */
  font-size: 16px;

  /* font families */
  --ff-heading: 'Boogaloo', cursive;
  --ff-body: 'Space Grotesk', sans-serif;
  --ff-accent: 'Bonheur Royale', cursive;

  /* type scale (px ÷ 16) */
  --fs-h1: 3.8125rem;
  /* 61px */
  --fs-h2: 2.4375rem;
  /* 39px */
  --fs-h3: 1.9375rem;
  /* 31px */
  --fs-h4: 1.5625rem;
  /* 25px */
  --fs-h5: 1.25rem;
  /* 20px */
  --fs-h6: 1rem;
  /* 16px */

  --fs-body: 1rem;
  /* 16px */
  --fs-caption: 0.8125rem;
  /* 13px */
  --fs-footnote: 0.625rem;
  /* 10px */

  /* recommended line-heights */
  --lh-tight: 1.25;
  --lh-normal: 1.5;
}

h1,
h2 {
  font-family: var(--ff-heading);
}

h2 {
  font-weight: 500;
  letter-spacing: .03rem;
}

* {
  margin: 0;
  padding: 0;
  font-family: "Space Grotesk", sans-serif;
  box-sizing: border-box;
}

html {
  /* width: 100vw;
    height: 100vh; */
  font-size: 16px;
}

/*Fonts*/
/* ──────────────────────────────────────────────────────────────────────────
   2. HEADINGS
   ────────────────────────────────────────────────────────────────────────── */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
  /* margin-bottom: 0.5em; */
  /* font-family: var(--ff-heading);
  line-height: var(--lh-normal); */
}

h1 {
  font-family: var(--ff-heading);
  font-size: var(--fs-h1);
  font-weight: 500;
}

h2 {
  font-size: var(--fs-h2);
}

h3 {
  font-size: var(--fs-h3);
}

h4 {
  font-size: var(--fs-h4);
}

h5 {
  font-size: var(--fs-h5);
  font-family: var(--ff-body);
  font-weight: 400;
}

h6 {
  font-size: var(--fs-h6);
}

/* ──────────────────────────────────────────────────────────────────────────
   3. BODY TEXT & BLOCKQUOTE
   ────────────────────────────────────────────────────────────────────────── */
strong {
  font-weight: 800;
}

p strong {
  font-size: 20px
}

body {
  margin: 0;
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: #333;
}

blockquote {
  margin: 1em 0;
  padding-left: 1em;
  border-left: 4px solid #ccc;
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: #555;
}

/* ──────────────────────────────────────────────────────────────────────────
   4. SMALLER TEXT
   ────────────────────────────────────────────────────────────────────────── */
.caption,
figcaption {
  font-family: var(--ff-body);
  font-size: var(--fs-caption);
  line-height: var(--lh-normal);
  color: #555;
}

.endnote {
  font-family: var(--ff-body);
  font-size: var(--fs-caption);
  line-height: var(--lh-normal);
  color: #555;
}

.footnote {
  font-family: var(--ff-body);
  font-size: var(--fs-footnote);
  line-height: var(--lh-tight);
  color: #555;
}

.btn {
  display: flex;
  justify-content: center;
  align-items: center;
  ;
  border: var(--border1);
  box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.8);
  width: fit-content;
  padding: 15px 20px;
  animation: contact-animation 1.5s ease-in-out;
    animation-iteration-count: infinite;
}

.btn h5 {
  text-transform: uppercase;
  text-align: center;
  letter-spacing: .2rem;
  font-family: var(--ff-heading);
}

.btn:hover {
  box-shadow: none;
  cursor: pointer;
  animation: none;
  transition: transform .1s ease-in-out, box-shadow .1s ease-in-out;
}
.s-btn{
  transition: transform .1s ease-in-out, box-shadow .1s ease-in-out;
}
.s-btn:hover{
  box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.8) !important;
  transform: scale(1.05);
cursor: pointer;}
/****************************************/

body {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
}

.splash {
  position: absolute;
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

.l-box-container,
.h-r-box {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  justify-content: center;
  align-items: center;
  width: fit-content;
  height: fit-content;
}

.l-box,
.hero-icon {
  background-color: #EDEDED;
  border: #333 solid 2px;
  box-shadow: 4px 4px 0px rgba(3, 3, 3, 0.8);
  width: 100px;
  aspect-ratio: 1/1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 25px;
  box-sizing: border-box;
}

.l-box img,
.hero-icon img {
  width: 100%;
  ;
}
.app {
  width: 100%;
  max-width: 1440px;
  display: none;
}

/** Header Styles **/
/* .splash {
  opacity: 1;
  
} */

/* .app {
  display: block;
} */

.contact-bar {
  padding: 10px 50px;
  background-color: var(--purple8);
  border: var(--border1);
  border-bottom: 0px;
  color: var(--white);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.contact-bar .CTA{
    transition: color .2s ease-in-out;

}
.contact-bar .CTA:hover{
  cursor: pointer;
  color: var(--black);
  text-decoration: underline;
}
.contact-bar .divider {
  color: var(--black);
}

.contact-bar .icon-txt {
  display: flex;
  gap: 16px;
  color: var(--black);
  justify-content: center;
  align-items: center;
}

header {
  background: white;
}

nav {
  box-shadow: 8px 8px 0px rgba(0, 0, 0, 0.8);
  padding: var(--padding-reg);
  border: var(--border1);
  display: flex;
  justify-content: space-between;
}

.logo {
  padding: 10px;
  border: var(--border1);
  box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.8);
  aspect-ratio: 1/1;
  border-radius: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: fit-content;
  width: fit-content;
}

.logo img {
  width: 24px;
}

nav .nav-links {
  display: flex;
  list-style: none;
  gap: 25px;
}

nav .nav-links li {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 5px 10px;
  border: 2px solid transparent;
  min-width: 115px;
  position: relative;
}

nav .nav-links li:hover {
  background: var(--white);
  border: 2px solid var(--black);
  box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.8);
  cursor: pointer;
  background-color: white;
}

nav .nav-links li:last-child:hover {
  box-shadow: none;
  animation: none;
}

@keyframes contact-animation {
  0% {
    transform: scale(1);
    ;
  }

  50% {
    transform: scale(1.05);
  }

  100% {
    transform: scale(1);
    ;
  }
}

nav .nav-links li:last-child {
  background-color: var(--yellow);
  border: 2px solid var(--black);
  box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.8);
  animation: contact-animation 1.5s ease-in-out;
  animation-iteration-count: infinite;
}

nav .nav-links li:last-child a h4 {
  text-transform: uppercase;
  letter-spacing: .1rem;
}

nav .nav-links li a {
  text-decoration: none;
  color: var(--black);
}

nav .nav-links li a h4 {
  font-size: 20px;
}

nav .nav-links li.active {
  background: var(--white);
  border: 2px solid var(--black);
  box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.8);
  background-color: white;
}

/*HERO SECTION*/
.hero-section {
  padding: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  border-left: var(--border1);
  border-right: var(--border1);
}

.hero-section .h-box-container {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 50px;
}

.h-l-box {
  max-width: 455px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.h-l-box h1,
.h-l-box h5 {
  width: fit-content;
}

.arrow-btn-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-top: 25px;
}

.arrow-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: fit-content;
  gap: 20px;
}

.arrow-btn:hover {
  cursor: pointer;
}

.arrow-btn h4 {
  text-transform: uppercase;
  /* letter-spacing: 0.08rem; */
  font-weight: 800;

}
.arrow-btn h4:hover{
  text-decoration: underline;
}
.arrow-btn img {
  animation: arrow-btn-left 0.8s ease-in-out;
  animation-iteration-count: infinite;
  position: relative;
}

.hero-section .arrow-btn:first-child img {
  transform: rotate(180deg);
  animation: arrow-btn-right 0.8s ease-in-out;
  animation-iteration-count: infinite;
}

@keyframes arrow-btn-left {
  from {
    left: 0px;
  }

  to {
    left: 10px;
  }
}

@keyframes arrow-btn-right {
  from {
    right: 0px;
  }

  to {
    right: 10px;
  }
}

.h-r-box .hero-icon {
  min-width: 100px ;
}

/*TECH ICON SECTION*/
.tech-icon-section {
  border: var(--border1);
  width: 100%;
  padding: 25px;
  background-color: var(--yellow);
  box-shadow: 8px 8px 0px var(--black);
  display: flex;
  align-items: start;
  z-index: 5;
  overflow: hidden;
  position: relative;
}

.tech-icon-container {
  display: flex;
  overflow: hidden;

  gap: 40px;
}


main section {
  padding: 50px;
  border: var(--border1);
  border-top: none;
  padding-top: 0;
}

.about-section {
  background-color: var(--white);
}

main .section-container {
  border: var(--border1);
  border-radius: 15px;
  padding: 50px;
  padding-top: 100px;
  background-color: white;
  display: flex;
  flex-direction: column;
  box-shadow: 8px 8px 0px rgba(0, 0, 0, 0.8);

}

main section .section-title {
  padding: 0 70px;
  width: fit-content;
  border: var(--border1);
  box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.8);
  position: relative;
  justify-self: center;
  top: 47.5px;
  text-align: center;
}

/*ABOUT SECTION*/
.about-section {
  z-index: 2;
  position: relative;
}

.about-section .about-content {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 50px;
  flex-wrap: wrap;
}

.about-section .section-container {
  display: flex;
  flex-direction: column;
}

.about-section .section-title {
  background-color: var(--red8);
}

.about-section .about-image {
  padding: 15px;
  border: var(--border1);
  width: 100%;
  min-width: 460px;
  max-width: 460px;
  box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.8);
}

.about-section .about-image h5 {
  font-family: var(--ff-accent);
  font-size: 200%;
  text-align: center;
}

.about-section .about-image .about-portrait img {
  aspect-ratio: 425.53/525.45;
  width: 100%;
}

.portrait-icon {
  position: relative;
  top: 0;
  width: 0px !important;
}

.portrait-icon img {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
}

.portrait-icon.one {
  left: 392px;
  top: -78px;
}

.portrait-icon.one img {
  width: 100px !important;
}

.portrait-icon.two {
  right: 51px;
  top: -28px;
}

.portrait-icon.two img {
  width: 70px !important;
}

.about-section .text-container {
  padding-bottom: 25px;
  max-width: 720px;
}

.about-section .text-container h2 {
  margin-bottom: 15px;
}

.about-section .text-container p {
  margin-bottom: 10px;
}

.about-section .text-container ul {
  padding-left: 50px;
  margin: 15px 0;
}

.about-section .about-cta {
  background-color: var(--red8);
  padding: 25px;
  border: var(--border1);
  box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.8);
  text-align: center;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}

/* ──────────────────────────────────────────────────────────────────────────
      NEWSLETTER CTA SECTION
   ────────────────────────────────────────────────────────────────────────── */
.newsletter-cta-section {
  background-color: var(--yellow);
  padding-top: 0;
  box-shadow: 8px 8px 0px rgba(0, 0, 0, 0.8);
  z-index: 2;
  position: relative;
}

.newsletter-cta-section .section-title {
  background-color: var(--green);
}

.newsletter-cta-section .section-container {
  box-shadow: 8px 8px 0px rgba(0, 0, 0, 0.8);
}

.cta .section-container {
  justify-content: center;
  align-items: center;
}

.cta .text-container h2 {
  margin-bottom: 5px;
}

.cta .text-container p {
  margin-bottom: 50px;
  line-height: 1.8rem;
}

.cta .text-container {
  text-align: center;
}

.cta .section-container .btn {
  background-color: var(--green);
  animation: contact-animation 1.5s ease-in-out;
  animation-iteration-count: infinite;
}

.cta .section-container .btn:hover {
  animation: none;
}

/* ──────────────────────────────────────────────────────────────────────────
      BENEFITS SECTION
   ────────────────────────────────────────────────────────────────────────── */
.card {
  padding: 25px;
  display: flex;
  flex-direction: column;
  box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.8);
  border: var(--border1);
  background-color: var(--white);
  border-radius: 25px;
  max-width: 292px;
  justify-content: center;
  align-items: center;

}

.benefits-section {
  background-color: var(--white);
}

.benefits-section .section-title {
  background-color: white;
}

.benefits-section .section-container {
  background-color: var(--purple8);
  display: flex;
  justify-content: center;
  align-items: center;
}

.benefits-section .section-container>h2 {
  margin-bottom: 25px;
  text-align: center;
}

.benefits-section .section-container>h5 {
  margin-bottom: 50px;
  font-weight: 800;
  text-align: center;
}

.benefits-section .benefits-card-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 20px;
  margin-bottom: 50px;
}

.benefits-section .benefits-card-container .card {
  flex: 1 1 292px;
  display: flex;
  flex-direction: column;
  justify-content: start;
  background-color: white;
  text-align: center;
}

.benefits-section .benefits-card-container .card .card-icon {
  aspect-ratio: 1/1;
  width: 100px;
  border: var(--border1);
  box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.8);
  margin-bottom: 15px;
  border-radius: 200px;
  padding: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--white);
}

.benefits-section .benefits-card-container .card .card-icon img {
  width: 100%;
}

.benefits-section .benefits-card-container .card h4 {
  margin-bottom: 5px;
}

.benefits-section .section-container .btn {
  background-color: var(--yellow);
  
}

.benefits-section .section-container .btn {
  margin-bottom: 15px;
}

/* ──────────────────────────────────────────────────────────────────────────
      SERVICES SECTION
   ────────────────────────────────────────────────────────────────────────── */
.services-section {
  background-color: var(--white);
}

.services-section .section-title {
  background-color: var(--blue);
}

.services-section .section-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.services-section .section-container>h2 {
  text-align: center;
  width: 100%;
  margin-bottom: 25px;
}

.services-section .services-btn-container {
  display: flex;
  justify-content: center;
  width: 100%;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
  gap: 50px;

}

.services-section .services-btn-container .services-btn {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  width: 270px;
  border: var(--border1);
  padding: 10px 20px;
  background-color: var(--white);
  border-radius: 5px;
}

.services-section .services-btn-container .services-btn.active {
  box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.8);
  background-color: white;
}

.services-section .services-btn-container .services-btn:hover {
  cursor: pointer;
}

.services-section .services-btn .services-btn-icon {
  border: var(--border1);
  padding: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: fit-content;
  aspect-ratio: 1/1;
  border-radius: 100px;
  box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.8);
}

.services-section .services-btn .services-btn-icon img {
  width: 25px;
}

.services-btn h5 {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05rem;
}

.services-section .section-container>.divider {
  margin: 25px 0;
  height: 2px;
  background-color: black;
  width: 70%;
}

.services-section .section-container .services-text-container .service-title {
  font-size: var(--fs-h1);
  font-family: var(--ff-heading);
  font-weight: 500;
  margin-bottom: 15px;
}

.services-section .section-container .services-text-container p {
  margin-bottom: 10px;
  ;
}

.services-section .section-container .services-text-container ul {
  padding-left: 50px;
  margin-bottom: 10px;
}

.services-section .section-container .services-text-container .tags-container {
  display: flex;
  flex-direction: row;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 50px;
}

.services-section .section-container .services-text-container .tags-container span {
  border-radius: 100px;
  padding: 5px 15px;
  border: var(--border1);
  width: fit-content;
  box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.8);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08rem;
  font-size: var(--fs-footnote);
}

.services-section .section-container .services-text-container .service-description {
  margin-bottom: 50px;
}

.services-section .section-container .services-text-container .service-cta {
  border: var(--border1);
  padding: 25px;
  box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.8);
  background-color: var(--yellow);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
}

.services-section .section-container .services-text-container .service-cta p {
  font-weight: 600;
}

.services-section .section-container .services-text-container .service-cta .btn {
  background-color: var(--blue);
  margin-top: 15px;
}

/* ──────────────────────────────────────────────────────────────────────────
      FOOTER SECTION
   ────────────────────────────────────────────────────────────────────────── */
footer {
  border: var(--border1);
  border-top: none;
  z-index: 2;
}

footer .contact-section {
  display: flex;
  flex-direction: row;
  justify-content: stretch;
}

footer .contact-section .contact-cta-container {
  max-width: 990px;
  width: 100%;
  background-color: var(--red);
  padding: 50px;
  border-right: var(--border1);
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  box-shadow: 8px 8px 0px rgba(0, 0, 0, 0.8);
  z-index: 2;
}

footer .contact-cta-container .contact-cta-title p {
  font-size: 100px;
  font-family: var(--ff-heading);
  text-align: center;
  line-height: 119px;
}

footer .contact-cta-container .contact-cta-title span {
  color: var(--white);
  font-family: var(--ff-heading);
}

footer .contact-cta-container .contact-cta-icon-container {
  display: flex;
  flex-direction: row;
  gap: 25px;
  width: fit-content;
  margin: 25px 0;
}

footer .contact-cta-container .contact-cta-icon {
  background-color: var(--white);
  border: var(--border1);
  border-radius: 200px;
  box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.8);
  aspect-ratio: 1/1;
  padding: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
}

footer .contact-cta-container .portfolio-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

footer .contact-cta-container .portfolio-info>p {
  margin-top: 5px;
}

footer .contact-cta-container .portfolio-info .portfolio-links a {
  text-decoration: none;
  color: var(--black);
  font-size: var(--fs-h5);
  text-transform: uppercase;
  font-weight: 800;
}
.portfolio-links a:hover{
  text-decoration: underline !important;
}

footer .contact-cta-container .contact-cta-icon img {
  width: 35px;
}

footer .contact-section .contact-form-container {
  background-color: white;
  flex-grow: 1;
  width: 100%;
  padding: 50px;
  max-width: 450px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

footer .contact-section .contact-form-container form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

footer .contact-section .contact-form-container form label {
  font-family: var(--ff-heading);
  font-size: var(--fs-h4);
}

footer .contact-section .contact-form-container form .input-box-group {
  display: flex;
  flex-direction: row;
  gap: 10px;
}

footer .contact-section .contact-form-container form .input-box {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

footer .contact-section .contact-form-container form .input-box input,
footer .contact-section .contact-form-container form .input-box textarea {
  background-color: var(--white);
  border: var(--border1);
  display: flex;
  justify-content: center;
  align-items: center;
  padding-left: 25px;
}

footer .contact-section .contact-form-container form .input-box input::placeholder,
footer .contact-section .contact-form-container form .input-box textarea::placeholder {
  color: var(--black8);
}

footer .contact-section .contact-form-container form .input-box input {
  background-color: var(--white);
  border: var(--border1);
  height: 54px;
  width: 100%;
}

footer .contact-section .contact-form-container form .input-box textarea {
  height: 200px;
  padding: 25px;
}

footer .contact-section .contact-form-container form .submit-btn {
  background-color: var(--yellow);
  border: var(--border1);
  width: fit-content;
  border-radius: 200px;
  aspect-ratio: 1/1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px;
  align-self: end;
}

footer .footer-section {
  padding: 100px;
  background-color: var(--black);
  display: flex;
  justify-content: space-between;
  gap: 100px;
  ;
  flex-wrap: wrap;
}

footer .footer-section .f-col {
  max-width: 300px;
}

footer .footer-section .footer-col3>div {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

footer .footer-section .f-col h4 {
  color: var(--yellow);
  font-family: var(--ff-heading);
  font-weight: 500;
  margin-bottom: 10px;
}

footer .footer-section .f-col .icon-link {
  display: flex;
  flex-direction: row;
  gap: 10px;
  justify-content: center;
  align-items: center;
  width: fit-content;
}

footer .footer-section .f-col p {
  color: var(--white);
}

footer .footer-section .col2 {
  display: flex;
  flex-direction: row;
}

footer .footer-section .col2 .sub-col {}

footer .footer-section .footer-col4 .mailing-list-input-box {
  border: var(--border1);
  background-color: var(--white);
  border-radius: 100px;
  ;
  box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.8);

}

footer .footer-section .footer-col4>p {
  margin-bottom: 25px;
  text-align: justify;
}

footer .footer-section .footer-col4 .mailing-list-input-box form {
  display: flex;
  flex-direction: row;

}

footer .footer-section .footer-col4 .mailing-list-input-box input {
  width: 100%;
  padding-left: 25px;

}

footer .footer-section .footer-col4 .mailing-list-input-box input::placeholder {
  color: var(--black8);

}

footer .footer-section .footer-col4 .mailing-list-input-box .mailing-list-submit {
  width: fit-content;
  border: var(--border1);
  border-radius: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  background-color: var(--yellow);
}
.form-status, .mailing-form-status{
    padding-left: 15px;
    padding-top: 15px;
    text-align: center !important;
   }

   /* ──────────────────────────────────────────────────────────────────────────
      Responsiveness
   ────────────────────────────────────────────────────────────────────────── */


    header .mobile-menu {
      width: 50px;
      display: none;
      border: var(--border1);
      padding: 10px;
      border-radius: 100px;
      background-color: var(--white);
      box-shadow: 4px 4px 0px rgb(0, 0, 0, 0.8);
    }

    header .mobile-nav {
      display: none;
    }

    header .mobile-nav ul li {
      width: 100%;
      background-color: var(--white);
      padding: 15px;
      border: var(--border1);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 1;
      position: relative;
      text-transform: uppercase;
    }

    header .mobile-nav ul li:hover,
    header .mobile-nav ul li:active {
      box-shadow: 8px 8px 0px rgb(0, 0, 0, 0.8);
      z-index: 5;
      cursor: pointer;
      position: relative;
      background-color: var(--yellow);
    }

    header nav .mobile-menu div {
      background-color: var(--black);
      height: 4px;
      width: 100%;
      border-radius: 10px;
    }

    @media screen and (max-width: 1024px) {
      .hero-section .h-box-container {
        flex-direction: column;
        gap: 50px;
      }

      .h-r-box .hero-icon {
        min-width: 150px;
      }

      .hero-section {
        text-align: center;
      }

      .hero-section>p {
        font-size: var(--fs-h4);
      }

      footer .contact-section {
        flex-wrap: wrap;
        flex-direction: column;
      }

      footer .contact-section .contact-form-container,
      footer .contact-section .contact-cta-container {
        width: 100%;
        max-width: none;
      }

      main section .section-title {
        max-width: 80%;
      }

      footer .footer-section {
        justify-content: center;
        align-items: center;
      }

      .contact-bar .divider,
      .contact-bar .CTA {
        display: none;
      }
      
    }

    @media screen and (max-width: 832px) {
      .contact-bar .icon-txt p {
        display: none;
      }

      .contact-bar .icon-txt img {
        width: 25px;
      }

      header nav {
        position: relative;
        z-index: 4;
      }

      header nav .nav-links {
        display: none;
      }

      header .mobile-nav {}

      header nav .mobile-menu {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: column;
      }

      .card {
        max-width: none;
      }

      .services-section .services-btn-container .services-btn {
        flex-direction: column;
        width: 100% !important;
      }

      .services-section .services-btn-container .services-btn {
        width: fit-content;
      }

      .services-section .services-btn .services-btn-icon img {
        width: 50px;
      }
    }


    @media screen and (max-width: 768px) {
      .about-section .about-image {
        min-width: 0;

      }

    }

    @media screen and (max-width: 680PX) {

      .portrait-icon.one {
        display: none;
      }

      .hero-section {
        padding: 25px;
      }
      footer .contact-section .contact-form-container form .input-box-group{
        flex-wrap: wrap;
      }
      footer .contact-section .contact-form-container form .input-box{
        width: 100%;
      }
    }

    @media screen and (max-width: 500px) {
      .arrow-btn img {
        animation: none !important;
      }
      .benefits-section .section-title {
        top: 47.5px;
      }

      main section .section-title {
        top: 26.5px;
      }

      main section .section-title h1 {
        font-size: var(--fs-h3);
      }

      main section {
        padding: 25px;
      }
      footer .footer-section{
        padding: 25px;
      }
      footer .contact-cta-container .contact-cta-icon-container{
        flex-wrap: wrap;
        gap:32px;
        justify-content: center;
        align-items: center;
      }
      main .section-container {
        padding: 50px 15px;
      }

      main .section-container h2 {
        font-size: var(--fs-h3);
      }

      .about-section .about-cta {
        padding: 15px;
      }

      footer .contact-cta-container .contact-cta-title p {
        font-size: var(--fs-h1);
        line-height: normal;
      }

      .arrow-btn-container {
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
      }

      .arrow-btn-container .arrow-btn:last-child img {
        transform: rotate(180deg);
      }

      .hero-section .arrow-btn:first-child img {
        transform: rotate(0);
      }
      .portfolio-links{
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
      }
    }