/*=============== FONTS ===============*/
/* @import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"); */
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-Regular.woff2") format("woff2"), url("../fonts/Montserrat-Regular.woff") format("woff"), url("../fonts/Montserrat-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-Medium.woff2") format("woff2"), url("../fonts/Montserrat-Medium.woff") format("woff"), url("../fonts/Montserrat-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-SemiBold.woff2") format("woff2"), url("../fonts/Montserrat-SemiBold.woff") format("woff"), url("../fonts/Montserrat-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}


/*=============== VARIABLES CSS ===============*/
:root {
  /* --header-height: 3.5rem; */

  /*========== Colors ==========*/
  /*Color mode HSL(hue, saturation, lightness)*/
  --first-color: hsl(218, 94%, 45%);
  --first-color-alt: hsl(218, 100%, 40%);
  --second-color: hsl(200, 85%, 64%);
  --title-color: hsl(218, 48%, 22%);
  --text-color: hsl(218, 8%, 36%);
  --text-color-light: hsl(218, 8%, 54%);
  --white-color: hsl(218, 100%, 98%);
  --white-color-light: hsl(218, 48%, 80%);
  --dark-color: hsl(218, 68%, 18%);
  --gray-color: hsl(0, 0%, 92%);
  --body-color: hsl(0, 0%, 100%);

  /*========== Font and typography ==========*/
  /*.5rem = 8px | 1rem = 16px ...*/
  --body-font: "Montserrat", sans-serif;
  --biggest-font-size: 2.25rem;
  --bigger-font-size: 1.75rem;
  --h1-font-size: 1.5rem;
  --h2-font-size: 1.25rem;
  --h3-font-size: 1rem;
  --normal-font-size: .938rem;
  --small-font-size: .813rem;

  /*========== Font weight ==========*/
  --font-regular: 400;
  --font-medium: 500;
  --font-semi-bold: 600;

  /*========== z index ==========*/
  --z-tooltip: 10;
  --z-fixed: 100;
}

/*========== Responsive typography ==========*/
@media screen and (min-width: 1150px) {
  :root {
    --biggest-font-size: 3.5rem;
    --bigger-font-size: 3rem;
    --h1-font-size: 2.25rem;
    --h2-font-size: 1.5rem;
    --h3-font-size: 1.25rem;
    --normal-font-size: 1rem;
    --small-font-size: .875rem;
  }
}

/*=============== BASE ===============*/
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--body-font);
  font-size: var(--normal-font-size);
  background-color: var(--body-color);
  color: var(--text-color);
  transition: background-color .4s;
}

h1, h2, h3, h4 {
  color: var(--title-color);
  font-weight: var(--font-semi-bold);
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}



/*=============== REUSABLE CSS CLASSES ===============*/
.container {
  max-width: 1120px;
  margin-inline: 1.5rem;
}

.grid {
  display: grid;
  gap: 1.5rem;
}

.section {
  padding-block: 5rem 1rem;
}

.section__title {
  text-align: center;
  font-size: var(--bigger-font-size);
  margin-bottom: 1rem;
}

.section__title span {
  font-weight: var(--font-regular);
}

.main {
  overflow: hidden;
}

/*=============== HEADER & NAV ===============*/
.header{position: fixed; width: 100%; top: 0; left: 0; background: var(--body-color); z-index: var(--z-fixed); transition: background-color .4s, box-shadow .4s; padding-block: 1rem;}
.nav{position: relative; display: flex; justify-content: space-between; align-items: center;} 
.nav__logo{margin-right: auto;}
.nav__logo img{height:61px;}
.nav__toggle, .nav__close, .nav__theme{display:inline-flex; font-size: 1.5rem; cursor: pointer; color: var(--title-color); transition: color .4s;}
.nav__buttons{display: flex;align-items: center; column-gap: 1rem;}

/* Navigation for mobile devices */
@media screen and (max-width: 1150px) {
  .nav__menu{
    position: fixed;
    top: -120%;
    left: 0;
    width: 100%;
    background-color: var(--body-color);
    box-shadow: 0 4px 16px hsla(218, 68%, 18%, .1);
    padding-block: 5rem;
    transition: top .4s;
  }
}

.nav__list{text-align: center;display: flex;flex-direction: column;row-gap: 1.5rem;}
.nav__link{font-weight: var(--font-semi-bold); color: var(--title-color); transition: color .4s;}
.nav__link:hover{color: var(--first-color);}
.nav__close{position: absolute; top: 1rem; right: 1.5rem;}


/* Show menu */
.show-menu{top: 0;}

/* Add shadow header */
.shadow-header{box-shadow: 0 2px 16px hsla(218, 68%, 18%, .1);}

/* Active link */
.active-link{color: var(--first-color);}

/*=============== BUTTON ===============*/
.button{display: inline-flex; background-color: var(--first-color); color: var(--white-color); font-weight: var(--font-semi-bold); padding: 1rem 2rem; border-radius: .75rem; box-shadow: 0 4px 16px hsla(218, 94%, 45%, .3); transition: background-color .4s;}
.button:hover{background-color: var(--first-color-alt);}
.button-dark{position: relative; background:linear-gradient(var(--dark-color),var(--dark-color)), linear-gradient(225deg, var(--second-color) 0%, var(--dark-color) 25%); border: 3px solid transparent; background-origin: border-box; background-clip: padding-box, border-box; color:var(--white-color);
font-weight:var(--font-semi-bold); padding: 0.2rem 1rem; border-radius: .75rem; display: flex; align-items: center; gap: .5rem; box-shadow: 0 4px 16px hsla(218, 68%, 18%, .4); overflow: hidden;
}
.button-dark:after{content:'';width: 40px; height: 40px; background-color: var(--second-color); border-radius: 50%; position: absolute; top: -.5rem; right: -.5rem; filter: blur(25px);}
.button-dark i{font-size: 1.5rem; transition: transform .4s;}
.button-dark:hover i{transform: translateX(.25rem);}

/*=============== HOME ===============*/
.home{background-image: url("../img/home-bg.jpg"); background-repeat: no-repeat; background-size: 100%; background-position: 0 11%; padding-top: 9rem;}
.home__container{row-gap: 4rem;padding-top: 2rem;}
.home__data{text-align: center;}
.home__title{font-size: var(--biggest-font-size); margin-bottom: 1rem;}
.home__title span{font-weight:var(--font-regular) ;}
.home__description{margin-bottom: 2rem; color: black; font-size: 1.188rem;}
.home__content{background-color: var(--first-color); padding: 3rem 1.5rem 0 1rem; border-radius: 2rem; box-shadow: 0 8px 16px hsla(218, 94%, 45%, .2); row-gap: 2rem;}


.home__info{display: flex; justify-content: center; align-items: center; flex-wrap: wrap;gap:1.4rem;}
.home__info__data{display: flex; flex-direction: column;}
.home__name{font-size: var(--bigger-font-size); color: var(--white-color); transform: translateY(-1rem); text-align: center; margin-bottom: 0.5rem;} 
.home__profession{font-size: var(--small-font-size); font-weight: var(--font-regular); color: var(--white-color); margin-bottom: 2rem;}
.home__icons{display: flex; gap: .75rem; justify-content: center; align-items: center;}
.home__box{background-color: var(--first-color-alt); color: var(--white-color);display: flex; align-items: center; justify-content: center; border-radius:.75rem; font-size: 2rem; padding:0.5rem; justify-self: center;}
.home__button i{font-weight: initial; font-size: 2rem;}
.home__img{width: 220px; justify-self: center;filter: drop-shadow(0 0 16px hsla(218, 68%, 18%, .3));}

/*=============== DELIVERY ===============*/
.delivery__container{row-gap: 3rem;}
.delivery__data{overflow: hidden;}
.delivery__description{text-align: center; margin-bottom: 2rem;}
.delivery__info{display: grid; grid-template-columns: repeat(3, 140px); column-gap: 2.5rem; overflow: auto; padding-bottom: 2rem;}
.delivery__info::-webkit-scrollbar{background-color: var(--gray-color); height: 4px; border-radius: 1rem;}
.delivery__info::-webkit-scrollbar-thumb{background-color: var(--first-color); border-radius: 1rem;}
.delivery__icon{width: 48px;height: 48px;background-color: var(--first-color); color: var(--white-color); border: 4px solid var(--gray-color);
border-radius: 1rem; display: grid; place-items: center; font-size: 1.5rem;margin-bottom: .5rem; transition: border-color .4s;
}
.delivery__subtitle{font-size: var(--h3-font-size); margin-bottom: .5rem;}
.delivery__content{width: 250px;background-color: var(--first-color); padding-block: 3rem 2rem; border-radius: 2rem; text-align: center; justify-self: center; display: grid; justify-items: center; box-shadow: 0 8px 16px hsla(218, 94%, 45%, .2);}
.delivery__title{font-size: var(--h1-font-size); color: var(--white-color); margin-bottom: 1.5rem;}
.delivery__patients{background-color: var(--first-color-alt); color: var(--white-color); padding: 1rem 2rem; border-radius: .75rem; display: flex; column-gap: .5rem;}
.delivery__patients span{font-weight: var(--font-semi-bold);}
.delivery__image{position: relative;width: 100%;height: 186px;margin-bottom: 2rem;display: grid;}
.delivery__img{position: absolute; max-width: initial;width: 300px; justify-self: center; filter: drop-shadow(0 16px 24px hsla(218, 68%, 18%, .6));}

/*=============== ABOUT ===============*/
.about{padding-bottom: 7rem;}
.about__container{background-color: var(--dark-color);padding: 3rem 1.5rem 2rem; row-gap: 3rem; border-radius: 2rem; box-shadow: 0 8px 16px hsla(218, 94%, 45%, .2);}
.about__data{display: grid; row-gap: 3rem;}
.about__data .section__title{color: var(--white-color);}
.about__description{color: var(--white-color-light); text-align: center;}
.about__info{display: grid; grid-template-columns: repeat(3, 1fr); text-align: center;}
.about__number{font-size: var(--h1-font-size); color: white; margin-bottom: .25rem;}
.about__details{font-size: var(--small-font-size); color: var(--white-color-light);}
.about__stat:not(:last-child){border-inline-end: 2px solid var(--white-color-light);}
.about__img{width: 250px; border-radius: 1.5rem;filter: drop-shadow(0 16px 24px hsla(218, 68%, 18%, .6)); justify-self:center; background-color: var(--white-color);}
.about__button{color: var(--white-color); display: inline-flex; justify-self: center; align-items: center; column-gap: .5rem;}
.about__button i{font-size: 1.5rem; transition: transform .4s;}
.about__button:hover i{transform:translateX(.25rem);}

/*=============== MISSION ===============*/
/*=============== ABOUT PAGE SPECIFIC STYLES ===============*/
/* .about-hero {text-align: center;padding-top: 6rem; background-color: #E0F2FE;} */
.about-hero {text-align: center; padding-top: 10rem; padding-bottom: 5rem; background-color: #E0F2FE;}
.about-hero__subtitle {display: block;color: var(--first-color);font-weight: var(--font-semi-bold);margin-bottom: 1rem;text-transform: uppercase;letter-spacing: 1px;}
.about-hero__title {font-size: var(--biggest-font-size);color: var(--title-color);margin-bottom: 2rem;line-height: 1.2;}
.about-hero__description {max-width: 800px;margin: 0 auto;line-height: 1.6;color: var(--text-color);}
.about-page__container {row-gap: 5rem;padding-top: 2rem;}
.about-page__content {align-items: center;row-gap: 3rem;}
.about-page__data .section__title {text-align: initial;margin-bottom: 1.5rem;font-size: var(--h1-font-size);}
.about-page__description {line-height: 1.6;margin-bottom: 2rem;}
.about-page__image {position: relative;justify-self: center;width: 100%;max-width: 540px;}
.about-page__img {width: 100%;border-radius: 2rem;box-shadow: 0 10px 20px hsla(218, 68%, 18%, .1);transition: transform .4s, box-shadow .4s;object-fit: cover;}
.about-page__img:hover {transform: translateY(-5px);box-shadow: 0 15px 30px hsla(218, 68%, 18%, .15);}
.about-page{padding-bottom: 7rem;}

/*=============== VALUES SECTION ===============*/
.values {background-color: #E0F2FE;padding-block: 6rem;}
.values.values-home{padding-top: 2rem;}
.values__container {grid-template-columns: repeat(auto-fill, 1fr); justify-self: center;}


.values__card {position: relative;display: flex;}
.values__card-content {background-color: var(--white-color);padding: 3rem 2rem;border-radius: 2rem;text-align: center;transition: transform .4s cubic-bezier(0.46, 0.03, 0.52, 0.96), box-shadow .4s;width: 100%;display: flex;flex-direction: column;}
.values__card:hover .values__card-content {transform: translateY(-1.5rem);box-shadow: 0 20px 40px hsla(0, 0%, 0%, .4);}
.values__title {font-size: var(--h2-font-size);color: var(--first-color);margin-bottom: 2rem;position: relative;display: inline-block;}
.values__title::after {content: '';position: absolute;width: 40px;height: 2px;background-color: var(--first-color);bottom: -.75rem;left: 50%;transform: translateX(-50%);}
.values__list {display: grid;row-gap: 1.25rem;flex-grow: 1;}
.values__list li {font-size: var(--normal-font-size);color: var(--text-color);}

/*=============== MISSION STATEMENT ===============*/
.mission-statement__content {background: linear-gradient(135deg, var(--dark-color) 0%, var(--first-color) 100%);padding: 4rem 2rem;border-radius: 2rem;text-align: center;box-shadow: 0 10px 30px hsla(218, 94%, 45%, .2);}
.mission-statement__text {color: var(--white-color);font-size: var(--h2-font-size);line-height: 1.6;max-width: 800px;margin: 0 auto;font-weight: var(--font-medium);}




/*=============== PRICES ===============*/
.prices__container{padding-bottom: 4rem;row-gap: 3rem;}
.prices__content{display: grid; position: relative;}
.prices__description{text-align: center;}
.prices__card{width: 304px; background-color: var(--body-color); box-shadow: 0 4px 16px hsla(218, 68%, 18%, .2); border-radius: 1rem;}
.prices__heading{background-color: var(--first-color);padding: 1.5rem 1rem 1rem; display: flex; justify-content: space-between; border-radius: 1rem 1rem 0 0 ; transition: transform .3s;}
.prices__heading:hover{transform: scale(1.1);}
.prices__number{font-size: var(--bigger-font-size); color: var(--white-color); margin-bottom: .5rem;}
.prices__subtitle{font-size: var(--h3-font-size); color: var(--white-color); align-self: flex-end;}
.prices__subtitle a{color: var(--white-color); cursor: pointer;}
.prices__list{display: grid; row-gap: .5rem; padding: 1.5rem 1rem;}
.prices__item{display: flex; column-gap: .25rem; font-size: var(--small-font-size); color: black; line-height: 1.6;}
.prices__item i{color: var(--first-color); font-size: 1rem;}
.prices__box{display: grid; width: 230px;height: 100%; background: linear-gradient(var(--dark-color), var(--dark-color)), linear-gradient(225deg, var(--second-color) 0%, var(--dark-color) 25%);
border: 4px solid transparent; background-origin: border-box; background-clip: padding-box, border-box; position: absolute; inset: 0; margin-inline: auto; border-radius: 1.5rem; box-shadow: 0 8px 16px hsla(218, 94%, 45%, .2); overflow: hidden;
}

.prices__box::after{content: ''; width: 64px;height: 64px;background-color: var(--second-color); border-radius: 50%; position: absolute; top: -.5rem; right: -.5rem; filter: blur(32px);}
.prices__details{color: var(--white-color); font-size:var(--small-font-size); text-align: center; align-self: flex-end; padding-bottom: 1.5rem;}

/* Swiper class */
.prices .swiper{width: 320px; overflow: initial; padding-block: 2rem 5rem;}
.prices :is(.swiper-slide-next, .swiper-slide-prev){opacity: 0; pointer-events: none; transition: opacity .4s;}
.prices .swiper-pagination-bullets.swiper-pagination-horizontal{bottom: -4rem;}
.prices .swiper-pagination-bullet{width: 10px;height: 10px;background-color: var(--gray-color);opacity: 1; transition: background-color .4s;}
.prices .swiper-pagination-bullet-active{background-color: var(--first-color);}


.logo-slider {margin-top: 8rem;overflow: hidden;position: relative;}

.logo-slide-track {display: flex;width: calc(250px * 10);animation: scroll 10s linear infinite;}

.logo-slide {width: 250px;flex-shrink: 0;display: flex;align-items: center;justify-content: center;padding: 10px;}

.logo-slide img {width: 100%;max-width: 180px;height: auto;filter: grayscale(100%);opacity: 0.8;transition: all 0.3s ease;}

.logo-slide img:hover {filter: grayscale(0);opacity: 1;}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(calc(-250px * 5));
  }
}

/*=============== GALLERY ===============*/
.gallery__container{grid-template-columns: repeat(2, 1fr); gap: 1rem; grid-template-areas: 'img-1 img-1' 'img-2 img-3' 'img-2 img-4';}
.gallery__image:nth-child(1){grid-area: img-1;}
.gallery__image:nth-child(2){grid-area: img-2;}
.gallery__image:nth-child(3){grid-area: img-3;}
.gallery__image:nth-child(4){grid-area: img-4;}
.gallery__image{border-radius: 1.5rem; overflow: hidden; box-shadow: 0 8px 16px hsla(218, 94%, 45%, .1);}

.gallery__img{width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); transition: transform .4s;}
.gallery__img:hover{transform: scale(1.2)}


/*=============== CONTACT ===============*/
.contact{padding-bottom: 8rem;}
.contact__container{row-gap: 2rem; padding-bottom: 1.5rem;}
.contact__map iframe{width: 100%;height: 100%;}
.contact__map{width: 320px;height: 320px; justify-self: center;box-shadow: 0 8px 16px hsla(218, 94%, 45%, .2); border-radius: 1.5rem; overflow: hidden;}
.contact__description{text-align: center; margin-bottom: 2rem;}
.contact__info{display: grid; row-gap: 2rem; justify-content: center; text-align: center;}
.contact__icon{width: 48px;height: 48px; background-color: var(--first-color); color: var(--white-color); border: 4px solid var(--gray-color); border-radius: 1rem; display: grid; place-items: center; justify-self: center; font-size: 1.5rem; margin: 0 auto .5rem; transition: border-color .4s;}
.contact__subtitle{font-size: var(--h3-font-size); margin-bottom: .5rem;}
.contact__address{font-style: initial;}
.contact__social{display: flex; justify-content: center; column-gap: .75rem;}
.contact__social__link{font-size: 1.5rem; color: var(--first-color); transition: transform .4s;}
.contact__social__link:hover{transform: translateY(-.25rem);}


/*=============== CONTACT PAGE SPECIFIC STYLES ===============*/
.contact-page {background-color: #E0F2FE; /* Light blue background as in image */min-height: 100vh;padding-block: 8rem;transition: background-color .4s;}

.contact-page__container {row-gap: 4rem;}

.contact-page__content {grid-template-columns: 1fr;align-items: center;gap: 4rem;}

.contact-page__data {text-align: left;}

.contact-page__title {font-size: var(--biggest-font-size);color: var(--title-color);margin-bottom: 1.5rem;line-height: 1.3;}

.contact-page__title span {color: var(--first-color);}

.contact-page__description {color: var(--text-color);line-height: 1.6;margin-bottom: 3rem;max-width: 500px;}

.contact-page__image {display: none; /* Hidden on mobile and medium screens */}

.contact-page__img {width: 100%;filter: drop-shadow(0 20px 40px rgba(0,0,0,0.1));}

/* Form Styling */
.contact-page__form-box {background-color: var(--white-color);padding: 3rem;border-radius: 1rem;box-shadow: 0 20px 60px rgba(0,0,0,0.05);}

.contact-page__form-title {font-size: var(--h2-font-size);color: var(--first-color);margin-bottom: 1rem;}

.contact-page__form-subtitle {font-size: var(--small-font-size);color: var(--text-color-light);margin-bottom: 2.5rem;}

.contact-page__form-subtitle a {color: var(--first-color);font-weight: var(--font-semi-bold);}

.contact-page__form {row-gap: 2rem;}

.contact-page__form-group {grid-template-columns: repeat(2, 1fr);gap: 1.5rem;}

.contact-page__form-div {display: flex;flex-direction: column;row-gap: .5rem;}

.contact-page__form-tag {font-size: var(--small-font-size);font-weight: var(--font-medium);color: var(--title-color);}

.contact-page__form-input {width: 100%;padding: .75rem 0;background: transparent;border: none;border-bottom: 1px solid var(--text-color-light);color: var(--text-color);font-family: var(--body-font);font-size: var(--normal-font-size);outline: none;transition: border-color .4s;}

.contact-page__form-input:focus {border-bottom-color: var(--first-color);}

/* Fix for select element styling */
select.contact-page__form-input {cursor: pointer;}

select.contact-page__form-input option {background-color: var(--white-color);color: var(--text-color);}


.contact-page__button {background-color: var(--first-color);color: var(--white-color);width: 100%;justify-content: center;border: none;cursor: pointer;box-shadow: 0 10px 20px hsla(218, 94%, 45%, .2);}

.contact-page__button:hover {background-color: var(--first-color-alt);}

.contact-about-section{padding-block: 7rem;}



/*=============== PUBLIC SECTOR PAGE ===============*/
.sector-hero {position: relative;padding-top: 10rem; padding-bottom: 6rem; background-image: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.35) 100%), url("../img/publicsector/public-sector.jpg");background-size: cover;background-position: center;display:grid;place-items: center;}

.sector-hero__container {text-align: center; row-gap: 1rem;}
.sector-hero__title {font-size: var(--biggest-font-size); color: var(--white-color); margin-bottom: 1rem;}
.sector-hero__subtitle {color: var(--white-color); max-width: 820px; margin-inline: auto;}

.sector-block{background-color: #E0F2FE;}
.sector-block__container {row-gap: 2rem;}
.sector-block .section__title {margin-bottom: .5rem;}
.sector-block__description {text-align: center; max-width: 900px; margin-inline: auto; color: var(--text-color);margin-bottom: 2rem;}

.sector-cards {grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); justify-self: center;}
.sector-card {background-color: var(--white-color);border-radius: 1rem;padding: 2rem;box-shadow: 0 8px 24px hsla(218, 68%, 18%, .08);transition: transform .3s, box-shadow .3s, border-color .3s;display: grid;row-gap: 1rem;border: 1px solid transparent;}
.sector-card:hover {transform: translateY(-6px); box-shadow: 0 16px 32px hsla(218, 68%, 18%, .12); border-color: var(--gray-color);}
.sector-card__icon {width: 56px; height: 56px; display: grid; place-items: center; border-radius: .75rem; background-color: var(--gray-color); color: var(--first-color); font-size: 1.75rem; transition: transform .3s;}
.sector-card:hover .sector-card__icon {transform: scale(1.05);}
.sector-card__title {font-size: var(--h2-font-size);}
.sector-card__text {color: var(--text-color);}
.sector-list {display: grid; row-gap: .5rem;}
.sector-list li {display: flex; align-items: center; column-gap: .5rem; color: black;}
.sector-list i {color: var(--first-color);}

.sector-why {padding-bottom: 8rem;}
.sector-why .section__title {text-align: center; margin-bottom: 1.5rem;}

/*=============== FAQ ===============*/
.faq__container{background-color: var(--dark-color); padding: 3rem 1.5rem; border-radius: 2rem; box-shadow: 0 8px 16px hsla(218, 94%, 45%, .2); row-gap: 2rem;}
.faq .section__title{color: var(--white-color);}
.faq__item{border-bottom: 1px solid var(--white-color-light);}
.faq__item summary{display: flex; justify-content: space-between; align-items: center; padding: 1rem 0; cursor: pointer; color: var(--white-color); font-weight: var(--font-semi-bold);}

.faq__content{color: var(--white-color-light); padding: 0 0 1rem; overflow: hidden; max-height: 0; transition: max-height .35s ease;}
.faq__image{width: 100%; border-radius: 1.5rem; filter: drop-shadow(0 16px 24px hsla(218, 68%, 18%, .6));}
.faq-about{padding-bottom: 7rem;}


/*=============== FOOTER ===============*/
.footer{padding-block: 3.5rem 2rem; background-color: var(--dark-color);}
.footer__container{display: grid; grid-template-columns:1fr; gap: 3rem;}
.footer__logo__wrap{display:flex; flex-direction: column; align-items: center; gap: 2rem;}
.footer__logo__wrap p{color: var(--white-color); line-height: 1.6; text-align: center;}
.footer__links{display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 3rem; margin-bottom: 3rem;}
.footer__header{font-weight: var(--font-semi-bold); font-size: var(--h2-font-size); margin-bottom: 2rem; display: inline-block; color: var(--white-color);}
.footer__links ul li:not(:last-child){ margin-bottom: 1rem;}
.footer__link{color: var(--white-color-light);transition: color .4s;}
.footer__links ul li{position: relative; width: fit-content;}
.footer__link::before{position: absolute;content: ''; height: 1px; width:100%; background-color: white;bottom: -6px; left: 0; transform: scaleX(0);transform-origin: right;opacity: 0;transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;}
.footer__links ul li:hover .footer__link::before {transform: scaleX(1);transform-origin: left;opacity: 1;}
.footer__copy{text-align: center; border-top: 1px solid white; padding-top:2rem;}
.footer__copy small{font-size: var(--small-font-size); color: var(--white-color-light)}

/*=============== SCROLL BAR ===============*/
::-webkit-scrollbar{width: 0.6rem; border-radius: 1rem; background-color: hsl(218, 16%, 90%);}
::-webkit-scrollbar-thumb{border-radius: 1rem; background-color: hsl(218, 16%, 80%);}
::-webkit-scrollbar-thumb:hover{background-color: hsl(218, 16%, 70%);}

/*=============== SCROLL UP ===============*/
.scrollup{position: fixed;right: 1rem; bottom: -50%; background-color: var(--body-color); box-shadow: 0 2px 16px hsla(218, 68%, 18%, .1); color: var(--title-color); display: inline-flex; padding: 6px; font-size: 1.25rem; border-radius: .5rem; z-index: var(--z-tooltip); transition: bottom .4s, transform .4s, background-color .4s, color .4s;}
.scrollup:hover{transform: translateY(-.5rem);}

/* Show Scroll Up */
.show-scroll{bottom: 3rem;}

/* Overlay */
.popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex; /* show immediately for visibility */
  justify-content: center;
  align-items: center;
  z-index: 9999;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Show overlay */
.popup-overlay.active {
  visibility: visible;
  opacity: 1;
}

/* Popup content */
.popup-content {
  background: #E0F2FE;
  padding: 30px 40px;
  border-radius: 15px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
  text-align: center;
  max-width: 400px;
  width: 90%;
  transform: scale(0.95);
  transition: transform 0.3s ease;
}

.popup-overlay.active .popup-content {
  transform: scale(1);
}

/* Message */
.popup-content h5 {
  margin-top: 10px;
  margin-bottom: 20px;
  font-size: 18px;
  color: #333;
}

/* Icon */
.popup-icon {
  font-size: 50px;
  margin-bottom: 15px;
}

.popup-error {
  color: #e74c3c;
}

.popup-success {
  color: #27ae60;
}

/* Button */
.popupButton {
  font-family: 'Montserrat', sans-serif;
  margin-top: 15px;
  padding: 12px 25px;
  background: var(--first-color);
  color: #fff;
  font-weight: 600;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.popupButton:hover {
  background: var(--first-color-alt);
}

/* Remix icons style */
.popup-icon i {
  vertical-align: middle;
}

/* Spinner animation for sending */
.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #ccc;
  border-top: 4px solid var(--first-color);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 15px auto;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


.services__container{row-gap: 1.5rem;}
.services__description{text-align: center;color: var(--text-color-light);max-width: 640px;margin: 0 auto 4rem;}
.services__list{display: grid;gap: 5rem;}
.services__item{display: grid;gap: 1.5rem;align-items: center;}
.services__image{border-radius: 1rem;overflow: hidden;box-shadow: 0 8px 16px hsla(218, 94%, 45%, .1);}
.services__img{width: 100%;height: 240px;object-fit: cover;}
.services__title{display: inline-flex;align-items: center;justify-content: center;background-color: var(--first-color);color: var(--white-color);padding: .25rem .75rem;border-radius: 999px;font-size: var(--small-font-size);margin-bottom: .75rem; animation: glowPulse 2s infinite ease-in-out; box-shadow: 0 0 10px rgba(0, 190, 180, 0.4); font-size: var(--h3-font-size);margin-bottom: 1.5rem;}
.services__text{color: var(--text-color);}

@keyframes glowPulse {
  0% {
    box-shadow: 0 0 5px rgba(0, 54, 190, 0.5);
    transform: scale(1);
  }

  50% {
    box-shadow: 0 0 15px rgba(30, 83, 255, 0.8);
    transform: scale(1.05);
  }

  100% {
    box-shadow: 0 0 5px rgba(18, 84, 239, 0.5);
    transform: scale(1);
  }
}


/*=============== BREAKPOINTS ===============*/
/* For small devices */
@media screen and (max-width: 360px){
  .container{margin-inline: 1rem;}
  .section__title{font-size: 1.5rem;}
  .prices .swiper{width: 280px;}
  .contact__map{width: 100%;}
}

@media screen and (max-width: 330px){
  .home__title{font-size: 1.8rem;}
  .home__icons{flex-direction: column;}
  .delivery__img{width: 270px;}
  .about__container{padding-inline: 1rem;}
  .prices .swiper{width: 250px;}
  /* .footer__links{column-gap: 1.5rem;} */
}

/* Breakpoints */
@media screen and (max-width: 340px) {
    .contact-page__form-group {
        grid-template-columns: 1fr;
    }
}

/* For medium devices */
@media screen and (min-width: 440px){
  .home__container,.delivery__container, .contact__container{grid-template-columns:350px;justify-content: center;}
  .about__container{width: 350px; margin-inline: auto;}
  .gallery__container{grid-template-columns: repeat(2, 190px); justify-content: center;}
  .faq__container{width: 350px; margin-inline: auto;}
}


@media screen and (min-width: 768px){
  .home__container{grid-template-columns:repeat(2, 350px); row-gap: 2rem;}
  .home__data{grid-column: 2/3; text-align: initial;}
  .home__content{grid-column: 1/3; grid-row: 2/3; grid-template-columns: repeat(2, 1fr); padding: 0 5rem;}
  .home__info{order: 1; padding-block: 2rem;}
  .home__image{position: relative;}
  .home__img{position: absolute; bottom: 0;width: 300px;}
  .delivery__container{grid-template-columns: repeat(2, 350px); align-items: center;}
  .delivery__data .section__title, .delivery__description{text-align: initial;}
  .delivery__data{order: 1;}

  .about__container{width: 700px; grid-template-columns: repeat(2, 1fr); align-items: center;}
  .about__data .section__title, .about__description{text-align: initial;}
  .about__info{justify-items: flex-start;}
  .about__stat{padding-right: 1.5rem;}
  .about__button{justify-self: flex-start;}
  .prices__description{width: 540px; margin-inline: auto;}
  .prices__box{width: 100%;}
  .prices__card{width: 100%;}
  .prices .swiper{width: 600px;}
  .contact__container{grid-template-columns: repeat(2, 350px); align-items: center;}
  .contact__data .section__title, .contact__description{text-align: initial;}
  .contact__info{grid-template-columns: repeat(2, 1fr); justify-items: flex-start;}
  .footer__container{display: grid; grid-template-columns:200px 1fr; gap: 5rem;}
  .footer__links{grid-template-columns: repeat(2, 1fr);}
  .faq__container{width: 700px; grid-template-columns: 1fr 1fr; align-items: center;}
  .faq .section__title{text-align: initial;}
  .sector-cards {grid-template-columns: repeat(2, 1fr);}
  .about-hero.about-hero-home{padding-top: 7rem;}
  .about-page__container {padding-top: 4rem;}
  .values__container {grid-template-columns: repeat(2, 1fr);}
  .about-page__img {max-width: none;}
  .services__list{gap: 7rem;}
  .services__item{grid-template-columns: 1fr 1fr;}
  .services__item:nth-child(even) .services__image{order: 2;}
  .services__item:nth-child(even) .services__data{order: 1;}
  .services__img{height: 280px;}
}

@media screen and (min-width: 1024px) {
  .sector-cards {grid-template-columns: repeat(3, 1fr);}
  .sector-hero__title {font-size: 3.5rem;}
  .contact-page__content {
        grid-template-columns: .8fr 1.2fr;
        column-gap: 6rem;
    }
    
    .contact-page__title {
        font-size: 3rem;
    }

    .contact-page__image {
        display: block; /* Show image only on large screens */
        position: relative;
        max-width: 400px;
    }

        .about-page__content {
        grid-template-columns: repeat(2, 1fr);
        column-gap: 6rem;
    }

    /* Restore diagonal layout */
    .about-page__content:nth-child(2) .about-page__image {
        order: 2;
    }
    
    .about-page__content:nth-child(2) .about-page__data {
        order: 1;
    }

    .values__container {
        grid-template-columns: repeat(3, 1fr);
    }

    .about-page__description {
        font-size: var(--normal-font-size);
    }

    .mission-statement__text {
        font-size: var(--h1-font-size);
    }
}

@media screen and (min-width: 1050px){
  .footer__links{grid-template-columns: repeat(3, 1fr);}
  .footer__links ul:first-child{justify-self: center;}

}

/* For large devices */
@media screen and (min-width: 1150px) {
  .container{margin-inline: auto;}
  .section{padding-block: 7rem 2rem;}
  .section__title{margin-bottom: 1.5rem;}
  .nav__close, .nav__toggle{display: none;}
  .nav__list{flex-direction:row; column-gap: 4rem;}

  .home__container{grid-template-columns: repeat(2, 1fr); gap: 3rem; padding-top: 4rem;}
  .home__title{margin-bottom: 1.5rem;}
  .home__description{padding-right: 10rem;margin-bottom: 3rem;}
  .home__content{column-gap: 3rem;}
  .home__img{width: 440px;}
  .home__info{padding-block: 3rem; flex-wrap: nowrap;}
  .home__name{font-size: var(--h1-font-size);}
  .home__profession{font-size: var(--normal-font-size); margin-bottom: 3rem;}
  .home__box{width: 88px;height: 88px; font-size: 2.5rem;}
  .home__button{padding: 7rem 2rem;border-radius: 1rem;}

  .delivery__container{grid-template-columns:380px 450px; column-gap: 10rem;}
  .delivery__content{width: 280px; padding-block: 4rem 3rem;}
  .delivery__title{font-size: var(--h2-font-size);}
  .delivery__image{margin-bottom: 4rem;}
  .delivery__img{width: 380px;}
  .delivery__description{margin-bottom: 3rem;}
  .delivery__info{grid-template-columns: repeat(3, 180px); column-gap: 6rem; padding-bottom: 3rem;}
  .delivery__icon{margin-bottom: .75rem;}
  .delivery__subtitle{font-size: var(--normal-font-size); margin-bottom: .75rem;}

  .about__container{width: initial; grid-template-columns: 440px 320px; justify-content: center; column-gap: 10rem; padding-block: 3rem;}
  .about__stat{padding-right: 2.5rem;}
  .about__number{margin-bottom: .5rem;}
  .about__details{font-size: var(--normal-font-size);}
  .about__img{width: 320px;}
  .prices__container{row-gap: 4rem;}

  .prices__box{ border-radius: 2rem;}
  .prices__details{font-size: var(--normal-font-size); padding-bottom: 2.5rem;}
  .prices .swiper{padding-block: 2.5rem 7rem ;}
  .prices__heading{padding: 1.5em;}
  .prices__number{font-size: var(--h1-font-size);}
  .prices__list{padding: 2rem 1.5rem 3.5rem; row-gap: 1rem;}
  .prices__item{font-size: var(--normal-font-size);}
  .prices__box::after{width: 100px;height: 100px; filter: blur(60px);}

  .gallery__container{grid-template-columns: repeat(2, 400px); gap: 2rem;}
  .gallery__image:nth-child(1){height: 400px;}

  .contact__container{grid-template-columns: 440px 450px; column-gap: 10rem;}
  .contact__description{margin-bottom: 3rem;}
  .contact__info{gap: 4rem 6rem;}
  .contact__icon{margin-bottom: .75rem;}
  .contact__subtitle{font-size: var(--normal-font-size);margin-bottom: .75rem;}
  .contact__map{width: 450px;height: 450px; border-radius: 2rem;}
  .footer{padding-top: 6rem;}

  .footer__link{font-size: var(--normal-font-size);}
  .scrollup{right: 3rem;}

  .about-hero {padding-top: 10rem; padding-bottom: 5rem;}

 
  .sector-hero{padding-block: 15rem 8rem;}
  .sector-why{padding-bottom: 8rem;}
  .values{padding-block: 7rem;}
  .about-page{padding-block: 7rem;}

  .contact-page{padding-top: 11rem; padding-bottom: 0rem;}

  .contact{padding-bottom: 8rem;}
  .about {padding-bottom: 7rem;}
  .faq__container{width: initial; grid-template-columns: 1.2fr .8fr; column-gap: 6rem; padding: 3rem 2rem;}
  .about-page__container {column-gap: 8rem;}

}


/* For 2K resolutions (2048 x 1152, 2048 x 1536) */
@media screen and (min-width: 2048px) {
  body{
    zoom: 1.2;
  }

}