@import url("header.css");

@import url("footer.css");

:root {
  --textColor: #fff;

  --headingColor: #fff;

  --raleway: "Raleway", sans-serif;

  --worksans: "Work Sans", sans-serif;
}

html,
body {
  overflow-x: hidden;
}

/* font */

@font-face {
  font-family: "Raleway";

  src: url(../../assets/fonts/Raleway-VariableFont_wght.ttf);
}

@font-face {
  font-family: "Work Sans";

  src: url(../../assets/fonts/WorkSans-VariableFont_wght.ttf);
}

section {
  padding: 100px 0;
}

section > * {
  color: var(--textColor);
}

footer > * {
  color: var(--textColor);
}

section > .container-fluid {
  max-width: 1920px;

  width: 100%;

  margin: 0 auto;
}

main {
  background-image: url("../../assets/img/global/secondbg.png");

  background-size: cover;

  background-position: center top;

  background-repeat: no-repeat;

  background-attachment: fixed;

  position: relative;
}

img {
  max-width: 100%;

  height: auto;
}

/* heading with clamp */

h1 {
  font-family: var(--raleway);

  font-size: 50px;

  font-style: normal;

  font-weight: 700;

  line-height: 50px;
}

h2 {
  font-family: var(--raleway);

  font-size: 40px;

  font-style: normal;

  font-weight: 600;

  line-height: 40px;
}

h3 {
  font-family: var(--raleway);

  font-size: 28px;

  font-style: normal;

  font-weight: 600;

  line-height: 28px;
}

h4 {
  font-family: var(--raleway);

  font-size: 25px;

  font-style: normal;

  font-weight: 400;

  line-height: 28px;
}

h5 {
  font-family: var(--raleway);

  font-size: 20px;

  font-style: normal;

  font-weight: 400;

  line-height: 23px;
}

p {
  font-family: var(--worksans);

  font-size: 16px;

  font-style: normal;

  font-weight: 400;

  line-height: 24px;

  color: var(--textColor);
}

a {
  transition: 0.5s ease all;

  -webkit-transition: 0.5s ease all;

  -moz-transition: 0.5s ease all;

  -ms-transition: 0.5s ease all;

  -o-transition: 0.5s ease all;

  gap: 0 15px;

  text-decoration: none;

  font-family: var(--worksans);

  font-size: 16px;

  font-style: normal;

  font-weight: 400;

  line-height: 24px;

  color: var(--textColor);
}

a path {
  transition: 0.5s ease all;
}

button {
  transition: 0.5s ease all;

  -webkit-transition: 0.5s ease all;

  -moz-transition: 0.5s ease all;

  -ms-transition: 0.5s ease all;

  -o-transition: 0.5s ease all;
}

p:last-child {
  margin-bottom: 0;
}

/* clamp contents */

.post_title {
  display: -webkit-box;

  -webkit-box-orient: vertical;

  overflow: hidden;

  text-overflow: ellipsis;

  -webkit-line-clamp: 1;
}

.post_text {
  display: -webkit-box;

  -webkit-box-orient: vertical;

  overflow: hidden;

  text-overflow: ellipsis;

  -webkit-line-clamp: 2;
}

/* margins */

.mb-20 {
  margin-bottom: 20px;
}

.mb-30 {
  margin-bottom: 30px;
}

.mb-50 {
  margin-bottom: 50px;
}

/* gaps */

.gap-20 {
  gap: 20px;
}

.gap-30 {
  gap: 30px;
}

.gap-50 {
  gap: 50px;
}

/* glass bg and hover */

/* background glass styles */

.banner-bg {
  border-radius: 30px;

  background: linear-gradient(
    135deg,
    rgba(184, 198, 149, 0.3) 0%,

    rgba(184, 198, 149, 0.6) 50%,

    rgba(184, 198, 149, 0.3) 100%
  );

  box-shadow:
    7px 12px 9px -14px #b8c695 inset,
    2px -1px 1px -2px rgba(184, 198, 149, 0.5) inset,
    -2px 1px 1px -2px rgba(184, 198, 149, 0.5) inset,
    -7px -12px 9px -14px #b8c695 inset;

  backdrop-filter: blur(5px);
}

/* White Glass Background */

.white-glass-bg {
  border-radius: 100px;

  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.08) 0%,

      rgba(255, 255, 255, 0) 54.52%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0) 50.1%,

      rgba(255, 255, 255, 0.08) 100%
    );

  background-blend-mode: lighten, soft-light;

  box-shadow:
    8px 12px 9px -10px rgba(255, 255, 255, 0.9) inset,
    2px -1px 1px -2px rgba(179, 179, 179, 0.5) inset,
    -2px 1px 1px -2px rgba(179, 179, 179, 0.5) inset,
    -8px -12px 9px -10px rgba(255, 255, 255, 0.9) inset,
    0 4px 8px 0 rgba(0, 0, 0, 0.05);

  backdrop-filter: blur(20px);

  -webkit-backdrop-filter: blur(20px);

  transition: 0.3s ease-in-out;

  -webkit-transition: 0.3s ease-in-out;
}

.white-glass-bg-hover:hover {
  border-radius: 100px;

  background: rgba(251, 205, 21, 0.6);

  box-shadow:
    7px 12px 9px -14px #fff8d0 inset,
    2px -1px 1px -2px rgba(255, 248, 208, 0.5) inset,
    -2px 1px 1px -2px rgba(255, 248, 208, 0.5) inset,
    -7px -12px 9px -14px rgba(255, 248, 208, 0.9) inset;

  backdrop-filter: blur(20px);

  transition: 0.3s ease-in-out;

  -webkit-transition: 0.3s ease-in-out;
}

/* End White Glass Background */

/* Green Glass Background */

/* .green-glass-bg {

    border-radius: 100px;

    background: rgba(174, 183, 61, 0.6);

    box-shadow:

        7px 12px 5px -9px #ffff8c inset,

        2px -1px 5px -2px rgba(255, 255, 140, 0.8) inset,

        -2px 1px 5px -2px rgba(255, 255, 140, 0.8) inset,

        -7px -12px 5px -9px rgba(255, 255, 140, 0.9) inset;

    backdrop-filter: blur(20px);

    -webkit-backdrop-filter: blur(20px);



    transition: 0.3s ease-in-out;

    -webkit-transition: 0.3s ease-in-out;

}



.green-glass-bg-hover:hover {

    background:

        linear-gradient(

            180deg,

            rgba(255, 255, 255, 0.08) 0%,

            rgba(255, 255, 255, 0) 54.52%

        ),

        linear-gradient(

            180deg,

            rgba(255, 255, 255, 0) 50.1%,

            rgba(255, 255, 255, 0.08) 100%

        );

    background-blend-mode: lighten, soft-light;

    box-shadow:

        8px 12px 9px -10px rgba(255, 255, 255, 0.9) inset,

        2px -1px 1px -2px rgba(179, 179, 179, 0.5) inset,

        -2px 1px 1px -2px rgba(179, 179, 179, 0.5) inset,

        -8px -12px 9px -10px rgba(255, 255, 255, 0.9) inset,

        0 4px 8px 0 rgba(0, 0, 0, 0.05);

    backdrop-filter: blur(20px);

    -webkit-backdrop-filter: blur(20px);



    transition: 0.3s ease-in-out;

    -webkit-transition: 0.3s ease-in-out;

} */

/* End Green Glass Background */

/* No Glass Background */

.no-glass-bg {
  border-radius: 100px;

  box-shadow: 5px 5px 15px 0 rgba(0, 0, 0, 0.15);

  backdrop-filter: blur(50px);

  -webkit-backdrop-filter: blur(50px);
}

.no-glass-bg-hover:hover {
  border-radius: 100px;

  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.08) 0%,

      rgba(255, 255, 255, 0) 54.52%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0) 50.1%,

      rgba(255, 255, 255, 0.08) 100%
    );

  background-blend-mode: lighten, soft-light;

  box-shadow:
    8px 12px 9px -10px rgba(255, 255, 255, 0.9) inset,
    2px -1px 1px -2px rgba(179, 179, 179, 0.5) inset,
    -2px 1px 1px -2px rgba(179, 179, 179, 0.5) inset,
    -8px -12px 9px -10px rgba(255, 255, 255, 0.9) inset,
    0 4px 8px 0 rgba(0, 0, 0, 0.05);

  backdrop-filter: blur(20px);

  -webkit-backdrop-filter: blur(20px);

  transition: 0.3s ease-in-out;

  -webkit-transition: 0.3s ease-in-out;
}

/* End No Glass Background */

/* Dotted Background on Hover */

.dotted-bg-hover:hover {
  border-radius: 1000px;

  border: 1px dashed rgba(255, 255, 255, 0.5);

  background: rgba(255, 255, 255, 0.15);

  transition: 0.3s ease-in-out;

  -webkit-transition: 0.3s ease-in-out;
}

/* End Dotted Background on Hover */

/* Glass Card Background */

.glass-card-bg {
  border-radius: 24px;

  background: var(
    --Glass-BG,
    linear-gradient(
      180deg,
      rgba(102, 102, 102, 0.15) 0%,

      rgba(102, 102, 102, 0) 54.52%
    ),
    linear-gradient(
      180deg,
      rgba(153, 153, 153, 0) 50.1%,

      rgba(153, 153, 153, 0.15) 100%
    ),
    rgba(255, 255, 255, 0.1)
  );

  background-blend-mode: lighten, soft-light, normal;

  /* Glass Effect */

  box-shadow:
    0 4px 8px 0 rgba(0, 0, 0, 0.05),
    10px 12px 9px -14px rgba(255, 255, 255, 0.9) inset,
    2px -1px 1px -2px rgba(179, 179, 179, 0.5) inset,
    -2px 1px 1px -2px rgba(179, 179, 179, 0.5) inset,
    -7px -12px 9px -14px rgba(255, 255, 255, 0.9) inset;

  backdrop-filter: blur(20px);

  -webkit-backdrop-filter: blur(20px);
}

/* End Glass Card Background */

/* Glass Container Background */

.glass-container-bg {
  border-radius: 30px;

  background:
    linear-gradient(
      180deg,
      rgba(102, 102, 102, 0.15) 0%,

      rgba(102, 102, 102, 0) 54.52%
    ),
    linear-gradient(
      180deg,
      rgba(153, 153, 153, 0) 50.1%,

      rgba(153, 153, 153, 0.15) 100%
    ),
    rgba(255, 255, 255, 0.1);

  background-blend-mode: lighten, soft-light, normal;

  box-shadow:
    0 4px 8px 0 rgba(0, 0, 0, 0.05),
    7px 12px 9px -14px rgba(255, 255, 255, 0.9) inset,
    2px -1px 1px -2px rgba(179, 179, 179, 0.5) inset,
    -2px 1px 1px -2px rgba(179, 179, 179, 0.5) inset,
    -7px -12px 9px -14px rgba(255, 255, 255, 0.9) inset;

  backdrop-filter: blur(20px);

  -webkit-backdrop-filter: blur(20px);
}

/* End Glass Container Background */

@media (max-width: 1199px) {
  section {
    padding: 70px 30px;
  }

  h1 {
    font-size: 40px;

    line-height: 40px;
  }

  h2 {
    font-size: 30px;

    line-height: 30px;
  }

  h3 {
    font-size: 25px;
    line-height: 28px;
  }
}

@media (max-width: 767px) {
  section {
    padding: 50px 20px;
  }

  h1 {
    font-size: 30px;

    line-height: 30px;
  }

  h2 {
    font-size: 25px;

    line-height: 25px;
  }

  h3 {
    font-size: 20px;

    line-height: 24px;
  }

  h4 {
    font-size: 20px;

    line-height: 22px;
  }

  h5 {
    font-size: 16px;

    line-height: 19px;
  }
}