@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root {
    --main-accent-color: #29B371;
    --main-dark-color: #363636;
    --main-font-family: "Inter", sans-serif;
    --font-xl: 40px;
    --font-lg: 36px;
    --font-md: 32px;
    --font-sm: 28px;
    --font-xs: 24px;
}

*::before, *::after, * {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  color: var(--main-dark-color);
  line-height: 1.5;
  font-family: var(--main-font-family);
  font-style: normal;
  color: var(--main-dark-color);
  transition: 0.5s ease;
  overflow-x: hidden;
}

a, button {
  cursor: pointer;
  color: inherit;
  transition: 0.6s;
}

a:hover, button:hover {
 opacity: 0.8;
}

main {
  overflow: hidden;
}

/* common start*/

/* FONT START */
.text-xl { font-size: var(--font-xl);}
.text-lg { font-size: var(--font-lg);}
.text-md { font-size: var(--font-md);}
.text-sm { font-size: var(--font-sm);}
.text-xs { font-size: var(--font-xs);}
/* FONT END */

/* --- SPACING STAR --- */

/* MARGIN */
/* Margin X (left + right) */
.mx-auto { margin-left: auto; margin-right: auto; }
.mx-20  { margin-left: 20px; margin-right: 20px; }
.mx-30  { margin-left: 30px; margin-right: 30px; }
.mx-40  { margin-left: 40px; margin-right: 40px; }
.mx-50  { margin-left: 50px; margin-right: 50px; }
.mx-60  { margin-left: 60px; margin-right: 60px; }
.mx-70  { margin-left: 70px; margin-right: 70px; }
.mx-80  { margin-left: 80px; margin-right: 80px; }

/* Margin Y (top + bottom) */
.my-auto { margin-top: auto; margin-bottom: auto; }
.my-20  { margin-top: 20px; margin-bottom: 20px; }
.my-30  { margin-top: 30px; margin-bottom: 30px; }
.my-40  { margin-top: 40px; margin-bottom: 40px; }
.my-50  { margin-top: 50px; margin-bottom: 50px; }
.my-60  { margin-top: 60px; margin-bottom: 60px; }
.my-70  { margin-top: 70px; margin-bottom: 70px; }
.my-80  { margin-top: 80px; margin-bottom: 80px; }

/* Margin Top */
.mt-auto { margin-top: auto; }
.mt-20  { margin-top: 20px; }
.mt-30  { margin-top: 30px; }
.mt-40  { margin-top: 40px; }
.mt-50  { margin-top: 50px; }
.mt-60  { margin-top: 60px; }
.mt-70  { margin-top: 70px; }
.mt-80  { margin-top: 80px; }

/* Margin Right */
.mr-auto { margin-right: auto; }
.mr-20  { margin-right: 20px; }
.mr-30  { margin-right: 30px; }
.mr-40  { margin-right: 40px; }
.mr-50  { margin-right: 50px; }
.mr-60  { margin-right: 60px; }
.mr-70  { margin-right: 70px; }
.mr-80  { margin-right: 80px; }

/* Margin Bottom */
.mb-auto { margin-bottom: auto; }
.mb-10  { margin-bottom: 10px; }
.mb-20  { margin-bottom: 20px; }
.mb-30  { margin-bottom: 30px; }
.mb-40  { margin-bottom: 40px; }
.mb-50  { margin-bottom: 50px; }
.mb-60  { margin-bottom: 60px; }
.mb-70  { margin-bottom: 70px; }
.mb-80  { margin-bottom: 80px; }
.mb-100  { margin-bottom: 100px; }

/* Margin Left */
.ml-auto { margin-left: auto; }
.ml-20  { margin-left: 20px; }
.ml-30  { margin-left: 30px; }
.ml-40  { margin-left: 40px; }
.ml-50  { margin-left: 50px; }
.ml-60  { margin-left: 60px; }
.ml-70  { margin-left: 70px; }
.ml-80  { margin-left: 80px; }

/* ---------------------------------------- */

/* PADDING */
/* Padding X (left + right) */
.px-20  { padding-left: 20px; padding-right: 20px; }
.px-30  { padding-left: 30px; padding-right: 30px; }
.px-40  { padding-left: 40px; padding-right: 40px; }
.px-50  { padding-left: 50px; padding-right: 50px; }
.px-60  { padding-left: 60px; padding-right: 60px; }
.px-70  { padding-left: 70px; padding-right: 70px; }
.px-80  { padding-left: 80px; padding-right: 80px; }

/* Padding Y (top + bottom) */
.py-20  { padding-top: 20px; padding-bottom: 20px; }
.py-30  { padding-top: 30px; padding-bottom: 30px; }
.py-40  { padding-top: 40px; padding-bottom: 40px; }
.py-50  { padding-top: 50px; padding-bottom: 50px; }
.py-60  { padding-top: 60px; padding-bottom: 60px; }
.py-70  { padding-top: 70px; padding-bottom: 70px; }
.py-80  { padding-top: 80px; padding-bottom: 80px; }

/* Padding Top */
.pt-20  { padding-top: 20px; }
.pt-30  { padding-top: 30px; }
.pt-40  { padding-top: 40px; }
.pt-50  { padding-top: 50px; }
.pt-60  { padding-top: 60px; }
.pt-70  { padding-top: 70px; }
.pt-80  { padding-top: 80px; }

/* Padding Right */
.pr-20  { padding-right: 20px; }
.pr-30  { padding-right: 30px; }
.pr-40  { padding-right: 40px; }
.pr-50  { padding-right: 50px; }
.pr-60  { padding-right: 60px; }
.pr-70  { padding-right: 70px; }
.pr-80  { padding-right: 80px; }

/* Padding Bottom */
.pb-20  { padding-bottom: 20px; }
.pb-30  { padding-bottom: 30px; }
.pb-40  { padding-bottom: 40px; }
.pb-50  { padding-bottom: 50px; }
.pb-60  { padding-bottom: 60px; }
.pb-70  { padding-bottom: 70px; }
.pb-80  { padding-bottom: 80px; }

/* Padding Left */
.pl-20  { padding-left: 20px; }
.pl-30  { padding-left: 30px; }
.pl-40  { padding-left: 40px; }
.pl-50  { padding-left: 50px; }
.pl-60  { padding-left: 60px; }
.pl-70  { padding-left: 70px; }
.pl-80  { padding-left: 80px; }

/* Padding Percentages */
.p-3pct  { padding: 3%; }
.p-5pct  { padding: 5%; }
.p-10pct { padding: 10%; }

.pt-3pct  { padding-top: 3%; }
.pt-5pct  { padding-top: 5%; }
.pt-10pct { padding-top: 10%; }

.pr-3pct  { padding-right: 3%; }
.pr-5pct  { padding-right: 5%; }
.pr-10pct { padding-right: 10%; }

.pb-3pct  { padding-bottom: 3%; }
.pb-5pct  { padding-bottom: 5%; }
.pb-10pct { padding-bottom: 10%; }

.pl-3pct  { padding-left: 3%; }
.pl-5pct  { padding-left: 5%; }
.pl-10pct { padding-left: 10%; }

.px-3pct  { padding-left: 3%; padding-right: 3%; }
.px-5pct  { padding-left: 5%; padding-right: 5%; }
.px-10pct { padding-left: 10%; padding-right: 10%; }

.py-3pct  { padding-top: 3%; padding-bottom: 3%; }
.py-5pct  { padding-top: 5%; padding-bottom: 5%; }
.py-10pct { padding-top: 10%; padding-bottom: 10%; }

/* --- SPACING END --- */

/* --- WIDTH START --- */

.w-fit {
  width: fit-content;
}

.w-100 {
  width: 100%;
}

/* Min Width Utilities */
.min-w-800  { min-width: 800px; }
.min-w-1000 { min-width: 1000px; }
.min-w-1200 { min-width: 1200px; }
.min-w-1400 { min-width: 1400px; }

/* Max Width Utilities */
.max-w-800  { max-width: 800px; }
.max-w-1000 { max-width: 1000px; }
.max-w-1200 { max-width: 1200px; }
.max-w-1400 { max-width: 1400px; }

/* --- WIDTH END --- */

.btn {
  min-width: 200px;
  width: fit-content;
  padding: 20px;
  display: block;
}

.btn.btn-white {
  border: 1px solid #fff;
  background-color: #fff;
  color: var(--main-dark-color);
}

.btn.btn-dark {
  border: 1px solid var(--main-dark-color);
  background-color: var(--main-dark-color);
  color: #fff;
}

.btn.btn-accent {
  border: 1px solid var(--main-accent-color);
  background-color: var(--main-accent-color);
  color: #fff;
}

.border {
  border: 1px solid var(--main-dark-color);
}

.border.border-white {
  border: 1px solid #fff;
}

.border.border-accent {
  border: 1px solid var(--main-accent-color);
}

.arrow {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  gap: 20px;
}

.arrow.arrow-right::after {
  content: "";
  width: 20px;
  height: 20px;
}

.arrow-right.arrow-white::after {
  background: url(../img/arrow.png) no-repeat;
  background-position: center;
  background-size: contain;
}

/* --- hover --- */
.hover-fade:hover {
  opacity: 0.7;
}

.hover-border-accent:hover {
  border: 1px solid var(--main-accent-color);
}

.hover-bg-accent:hover {
  border: 1px solid var(--main-accent-color);
  background: var(--main-accent-color);
}

.hover-text-accent:hover {
  color: var(--main-accent-color);
}
/* --- hover end --- */

.section_subttl {
  font-size: 20px;
}
/* --- section ttl end --- */

/* --- text color start --- */
.text-default {
  color: #363636;
}

.text-white {
  color: #fff;
}

.text-accent {
  color: var(--main-accent-color);
}
/* --- text color end --- */

/* --- BG COLOR --- */
.bg-white {
  background-color: #fff;
}

.bg-black {
  background-color: var(--main-dark-color);
}

.bg-dark {
  background-color: var(--main-dark-color);
}

.bg-accent {
  background-color: var(--main-accent-color);
}
/* --- BG COLOR END */
.text-left {
  text-align: left;
}

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

.text-right {
  text-align: right;
}

.text-bold {
  font-weight: bold;
}
/* ==== CONTACT-BNR START ==== */
.contact_bnr {
  background: url(../img/bg-gradient-1.png) no-repeat;
  background-size: 100% 100%;
  background-position: center;
}

.contact_bnr .contact_details {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.contact_bnr .contact_details::after {
  content: "";
  display: block;
  background: #d9d9d9;
  height: 100%;
  width: 1px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}


.contact_bnr .contact_details > div {
  width: 48%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 20px;
}

.contact_bnr .contact_details > .email a {
  min-height: 72px;
}

.contact_bnr .contact_details > .email a::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background: url(../img/envelope.png) no-repeat;
  background-position: center;
  background-size: contain;
}

.contact_bnr .contact_details > .tel a {
  display: flex;
  align-items: center;
  gap: 8px;
}

.contact_bnr .contact_details > .tel a {
  font-size: 50px;
  font-weight: bold;
}

.contact_bnr .contact_details > .tel a span {
  font-size: 30px;
}

/* ==== CONTACT-BNR END ==== */

/* common end */

@media (max-width: 1200px) {
  /* FONT START */
.text-xl { font-size: calc(var(--font-xl) - 4px); }
.text-lg  { font-size: calc(var(--font-lg) - 4px); }
.text-md  { font-size: calc(var(--font-md) - 4px); }
.text-sm  { font-size: calc(var(--font-sm) - 4px); }
.text-xs  { font-size: calc(var(--font-xs) - 4px); }
/* FONT END */

.contact_bnr .contact_details > .tel a {
  font-size: 40px;
}

}

@media (max-width: 1000px) {
  /* FONT START */
.text-xl { font-size: calc(var(--font-xl) - 6px); }
.text-lg  { font-size: calc(var(--font-lg) - 6px); }
.text-md  { font-size: calc(var(--font-md) - 6px); }
.text-sm  { font-size: calc(var(--font-sm) - 6px); }
.text-xs  { font-size: calc(var(--font-xs) - 6px); }
/* FONT END */

.contact_bnr .contact_details {
  flex-direction: column;
  height: auto;
}

.contact_bnr .contact_details::after {
  display: none;
}

.contact_bnr .contact_details > div {
  width: 100%;
}

.contact_bnr .contact_details > div:nth-child(1) {
  border-bottom: 1px solid #d9d9d9;
}

.contact_bnr .contact_details > .tel a {
  font-size: 36px;
}
}

@media(max-width: 768px) {
  .contact_bnr .contact_details > .tel a {font-size: 36px;}
  .text-xl { font-size: calc(var(--font-xl) - 8px); }
  .text-lg  { font-size: calc(var(--font-lg) - 8px); }
  .text-md  { font-size: calc(var(--font-md) - 8px); }
  .text-sm  { font-size: calc(var(--font-sm) - 8px); }
  .text-xs  { font-size: calc(var(--font-xs) - 8px); }
}