/* LANDING PAGE STARTS HERE  */
.landing_page {
  height: 80vh;
  padding: 1em 4em;
}
.landing_page img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.landing_page .color {
  width: 100%;
  height: 100%;
  position: absolute;
  background: linear-gradient(0deg, var(--secondary-color), transparent);
}
.landing_page .section_heading {
  color: var(--text-color-light);
  font-family: var(--heading-family);
  z-index: 1;
  font-weight: 400;
  font-size: 3.4em;
  white-space: wrap;
}

/* LANDING PAGE ENDS HERE  */
/* SECOND SECTION STARTS HERE */
.second_section {
  background: var(--secondary-color);
}
.second_section .row {
  display: flex;
  justify-content: space-evenly;
  align-items: space-evenly;
  gap: 1em 1em;
  position: relative;
}
.fifth_section .row .col {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1em 2em;
  width: 100%;
}
.second_section .row .card .card-text {
  color: var(--text-color-dark);
}
.second_section .row .card {
  width: 22em;
  display: flex;
  justify-content: space-evenly;
  align-items: space-evenly;
  flex-direction: row;
  position: relative;
  transition: all 0.5s ease-in-out;
  border: none;
}
.second_section .row .card svg {
  width: 6em;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.second_section .row .card:hover {
  background: linear-gradient(
    120deg,
    var(--secondary-color),
    var(--tertiary-color)
  );
  color: white;
  scale: 1.1;
}

/* SECOND SECTION ENDS HERE  */
/* THIRD SECTION STARTS HERE  */
.third_section {
  height: 60vh;
  background: var(--secondary-color);
  position: relative;
}
.third_section .bg-color {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #18123af5;
}
.third_section .row {
  position: relative;
  display: flex;
  flex-direction: row;
  gap: 1em 2em;
  flex-wrap: wrap;
}
.third_section .col {
  height: 100%;
  width: 100%;
  display: flex;
  position: relative;
  flex-direction: column;
  padding: 2em 4em;
  width: 30%;
}
.third_section .col .card-text ul {
  display: flex;
  flex-direction: column;
  color: var(--text-color-light);
}
.third_section .col .card-text ul li {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 1em;
  align-items: center;
  width: 100%;
}
.third_section .col .card-text {
  display: flex;
  flex-direction: row;
}
.third_section .col .icon {
  font-size: 5em;
  color: var(--text-color-light);
  margin: 0 0.5em;
}
.third_section .col:first .card-text {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  color: var(--text-color-light);
}

.third_section .col #heading {
  text-align: center;
  margin-bottom: 2em;
  padding: 1em;
  border-bottom: 2px solid var(--primary-color);
}
/* THIRD SECTION ENDS HERE */
/* FOURTH SECTION STARTS HERE  */
.fourth_section {
  background: linear-gradient(var(--secondary-color), var(--tertiary-color));
}

.fourth_section .section_heading {
  color: var(--text-color-light);
}

.fourth_section p,
.fourth_section li p {
  color: var(--text-color-dull);
}

.fourth_section ul {
  padding: 0;
}

.fourth_section ul li i {
  font-size: 2.2em;
  color: var(--primary-color);
  flex-shrink: 0;
}

.fourth_section ul li h5 {
  color: var(--text-color-light);
  margin: 0 0 5px;
}

.fourth_section .image {
  overflow: hidden;
  border-radius: 12px;
  max-height: 400px;
}

.fourth_section .image img {
  width: 100%;
  height: auto;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.fourth_section .image:hover img {
  transform: scale(1.1);
}

/* Optional: tweak text alignment on smaller devices */
@media (max-width: 576px) {
  .fourth_section h3,
  .fourth_section p,
  .fourth_section li h5 {
    text-align: center;
  }
}

/* FOURTH SECTION ENDS HERE  */
/* FIFTH SECTION STARTS HERE */
.fifth_section .bg-color {
  width: 100%;
  height: 100%;
  background: linear-gradient(var(--tertiary-color), var(--secondary-color));
  opacity: 0.98;
  position: absolute;
}
.fifth_section .container {
  color: var(--text-color-light);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.fifth_section .content {
  color: var(--text-color-light);
  z-index: 1;
  width: 60%;
}
.fifth_section .container .row {
  display: flex;
  gap: 4em;
  flex-wrap: wrap;
  margin-top: 8em;
}
.fifth_section .container .row .col {
  padding: 1em 2em;
  display: flex;
  justify-content: space-evenly;
  width: 50%;
}
.fifth_section .container .row .col:nth-child(2) {
  margin-top: 8em;
}
.fifth_section .container .row .col .card {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: space-evenly;
  width: 26em;
  background: none;
  border: 2px dashed var(--background-color);
  overflow: hidden;
  height: max-content;
}
.fifth_section .card-body {
  padding: 1em 2em;
  text-align: center;
}
.fifth_section .card .card-img-top {
  overflow: hidden;
}
.fifth_section .container .row .col .card .card-img-top img {
  width: 100%;
  height: 100%;
  transition: all 0.3s ease-in-out;
  object-fit: cover;
}
.fifth_section .container .row .col .card .card-img-top img:hover {
  scale: 1.2;
}
    /* fifth section ends here  */
    /* SIXTH SECTION  STARTS HERE */
    .sixth_section{
        background: linear-gradient(var(--secondary-color), var(--tertiary-color));
    }
    .sixth_section .bg-img{
        width: 100%;
        height: 100%;
        position: absolute;
        opacity: .2;
    }
    .sixth_section .container h2{
        font-size: 2.6em;
    }
    .sixth_section .container .content{
        position: relative;
        display: flex;
        margin: 2em 0;
        justify-content: space-evenly;
        align-items: center;
        flex-direction: column;
        gap: 1em 2em;
    }
    .sixth_section details summary::marker{ 
        display: none;
        content: "";
    }
    .sixth_section details summary::-webkit-details-marker {
        display: none;
    }
    .sixth_section .card {
        border: 2px solid var(--background-color);
        background: transparent;
        width: 80%;
        padding: 1.4em;
        color: var(--text-color-light);
        text-align: center;
        transition: all 0.3s ease-in-out;
    }
    .sixth_section .card details p{
        font-size: 1em;
        color: var(--text-color-light)
    }   
    .sixth_section .card details summary h6{
        font-size: 1.2em;
        font-weight: 700;
        color: var(--text-color-light);
    }
    /* SIXTH SECTION ENDS HERE  */
/* LARGE SCREEN SIZE MEDIA QUERY STARTS HERE  */
@media (max-width: 1200px) {
  .third_section .row {
    position: relative;
    display: flex;
    gap: 1em 0;
    padding: 1em 1em;
    flex-wrap: wrap;
  }
  .third_section .row .col {
    width: 100%;
    text-align: center;
    align-items: center;
    padding: 1em 2em;
  }
   /* FOURTH SECTION STARTS HERE */
  .fourth_section .row {
    position: relative;
    display: flex;
    padding: 1em 2em;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 2em;
    justify-content: center;
    align-items: center;
  }
  .fourth_section .row .col {
    width: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .fourth_section .row .col .image {
    position: relative;
    width: 100%;
    height: 100%;
  }
  .fourth_section .col ul {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  .fourth_section .row .col ul li {
    padding: 1em 0.5em;
    position: relative;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  .fourth_section .row .col ul li h5 {
    font-size: 1em;
    width: 15em;
    font-weight: 500;
  }
  .fourth_section .row .col .card-title {
    font-size: 1em;
  }
  .fourth_section .row .col ul li .card-text p {
    font-size: 0.8em;
  }
}
/* LARGE SCREEN SIZE MEDIA QUERY ENDS HERE */

/* MEDIUM SCREEN SIZE MEDIA QUERY STARTS HERE  */
/* Responsive Styles */
@media (max-width: 768px) {
  .navbar {
    padding: 0 1rem;
  }

  .navbar ul {
    flex-direction: column;
    background-color: var(--primary-color);
    position: absolute;
    top: var(--navbar-height);
    right: 0;
    width: 200px;
    display: none;
  }

  .navbar ul.active {
    display: flex;
  }

  .navbar ul li {
    margin: 1rem 0;
  }

  .container {
    padding: 1em 2em;
  }

  .section {
    padding: 2rem 0;
  }
  .landing_page {
    padding: 1em 2em;
  }
  .landing_page .section_heading {
    font-size: 2.4rem;
  }
  /* FOURTH SECTION STARTS HERE */
  .fourth_section .row {
    position: relative;
    display: flex;
    padding: 1em 2em;
    flex-direction: row;
    gap: 2em;   
    justify-content: center;
    align-items: space-evenly;
  }
  .fourth_section .row .col {
    width: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .footer .container {
    flex-direction: column;
    align-items: center;
  }

  .footer_column {
    min-width: 100%;
    text-align: center;
  }

  .footer_socials {
    justify-content: center;
  }
}
/* MEDIUM SCREEN SIZE MEDIA QUERY ENDS HERE */
/* SMALL SCREEN SIZE MEDIA QUERY STARTS HERE  */

@media (max-width: 480px) {
  .navbar .logo {
    font-size: 1.2rem;
  }

  .navbar ul {
    width: 150px;
  }
  /* LANDING SECTION STARTS HERE  */
  .landing_page {
    padding: 1em 2em;
  }
  .landing_page .section_heading {
    font-size: 1.6rem;
  }
  /* LANDING SECTION ENDS HERE  */
  /* SECTION SECTION STARTS HERE  */
  .second_section .row .card {
    display: flex;
    flex-direction: column;
    gap: 1em;
    padding: 0.8em auto;
    justify-content: space-evenly;
    align-items: space-evenly;
  }
  .second_section .card svg {
    top: 0;
    left: 0;
  }
  /* SECOND SECTION ENDS HERE  */
  /* THIRD SECTION STARTS HERE */
  .third_section .row {
    position: relative;
    display: flex;
    gap: 1em 0;
    padding: 1em 1em;
    flex-wrap: wrap;
  }

  .third_section .row .col {
    width: 100%;
    text-align: center;
    align-items: center;
    padding: 1em 2em;
  }

  .third_section .col .card-text {
    display: flex;
    flex-direction: column;
  }
  .third_section .col .card-text #heading {
    margin-bottom: 1em;
  }
  .third_section .col:first .card-text {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    color: var(--text-color-light);
  }
  .third_section .col .card-text ul li {
    justify-content: space-around;
    align-items: space-evenly;
  }
  /* THIRD SECTION ENDS HERE */
  /* FOURTH SECTION STARTS HERE */
  .fourth_section .row {
    position: relative;
    display: flex;
    padding: 1em 0.5em;
    flex-wrap: wrap;
    gap: 2em;
    justify-content: center;
    align-items: center;
  }
  .fourth_section .row .col {
    width: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .fourth_section .row .col .image {
    position: relative;
    width: 100%;
    height: 100%;
  }
  .fourth_section .col ul {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  .fourth_section .row .col ul li {
    padding: 1em 0.5em;
    position: relative;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  .fourth_section .row .col ul li h5 {
    font-size: 1em;
    width: 15em;
    font-weight: 500;
  }
  .fourth_section .row .col .card-title {
    font-size: 1em;
  }
  .fourth_section .row .col ul li .card-text p {
    font-size: 0.8em;
  }
  .fifth_section .row {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1em 2em;
  }

  .fifth_section .row .col .card {
    max-width: 18rem;
    position: relative;
  }
  .fifth_section .row .col .card .card-text {
    font-size: 0.8rem;
  }
}
