@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Proza+Libre:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600;1,700;1,800&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap");
/*===== VARIABLES CSS =====*/

:root {
  /**
   * colors
   */
  --red: hsl(0, 78%, 62%);
  --cyan: hsl(180, 62%, 55%);
  --orange: hsl(34, 97%, 64%);
  --blue: hsl(212, 86%, 64%);
  --varyDarkBlue: hsl(234, 12%, 34%);
  --grayishBlue: hsl(229, 6%, 66%);
  --veryLightGray: hsl(0, 0%, 98%);
  --weight1: 200;
  --weight2: 400;
  --weight3: 600;
  --selective-yellow: hsl(42, 94%, 55%);
  --eerie-black-1: hsl(0, 0%, 9%);
  --eerie-black-2: hsl(180, 3%, 7%);
  --quick-silver: hsl(0, 0%, 65%);
  --radical-red: hsl(351, 83%, 61%);
  --light-gray: hsl(0, 0%, 80%);
  --isabelline: hsl(36, 33%, 94%);
  --gray-x-11: hsl(0, 0%, 73%);
  --kappel_15: hsla(170, 75%, 41%, 0.15);
  --platinum: hsl(0, 0%, 90%);
  --gray-web: hsl(0, 0%, 50%);
  --black_80: hsla(0, 0%, 0%, 0.8);
  --white_50: hsla(0, 0%, 100%, 0.5);
  --black_50: hsla(0, 0%, 0%, 0.5);
  --black_30: hsla(0, 0%, 0%, 0.3);
  --kappel: hsl(170, 75%, 41%);
  --white: hsl(0, 0%, 100%);
  --transition-time: 700ms;
  --transition-ease: cubic-bezier(0.19, 1, 0.22, 1);

  /**
   * gradient color
   */

  --gradient: linear-gradient(
    -90deg,
    hsl(151, 58%, 46%) 0%,
    hsl(170, 75%, 41%) 100%
  );

  /**
   * typography
   */

  --ff-league_spartan: "League Spartan", sans-serif;
  --ff-poppins: "Poppins", sans-serif;
  --ff-Roboto_Mono: "Roboto Mono", monospace;
  --ff-Cormorant_Garamond: "Cormorant Garamond", serif;
  --ff-Proza_Libre: "Proza Libre", sans-serif;
  --ff-Monsterrat: "Monsterrat", sans-serif;

  --fs-1: 4.2rem;
  --fs-2: 3.2rem;
  --fs-3: 2.3rem;
  --fs-4: 1.8rem;
  --fs-5: 1.5rem;
  --fs-6: 1.4rem;
  --fs-7: 1.3rem;

  --fw-500: 500;
  --fw-600: 600;

  /**
   * spacing
   */

  --section-padding: 75px;

  /**
   * shadow
   */

  --shadow-1: 0 6px 15px 0 hsla(0, 0%, 0%, 0.05);
  --shadow-2: 0 10px 30px hsla(0, 0%, 0%, 0.06);
  --shadow-3: 0 10px 50px 0 hsla(220, 53%, 22%, 0.1);

  /**
   * radius
   */

  --radius-pill: 500px;
  --radius-circle: 50%;
  --radius-3: 3px;
  --radius-5: 5px;
  --radius-10: 10px;

  /**
   * transition
   */

  --transition-1: 0.25s ease;
  --transition-2: 0.5s ease;
  --cubic-in: cubic-bezier(0.51, 0.03, 0.64, 0.28);
  --cubic-out: cubic-bezier(0.33, 0.85, 0.4, 0.96);
}

/*-----------------------------------*\
  #RESET
\*-----------------------------------*/

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

li {
  list-style: none;
}

a,
img,
span,
data,
input,
button,
ion-icon {
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  height: auto;
}

input,
button {
  background: none;
  border: none;
  font: inherit;
}

input {
  width: 100%;
}

button {
  cursor: pointer;
}

ion-icon {
  pointer-events: none;
}

address {
  font-style: normal;
}

html {
  font-family: var(--ff-poppins);
  font-size: 10px;
  scroll-behavior: smooth;
}

body {
  background-color: var(--white);
  color: var(--gray-web);
  font-size: 1.6rem;
  line-height: 1.75;
}

:focus-visible {
  outline-offset: 4px;
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background-color: hsl(0, 0%, 98%);
}

::-webkit-scrollbar-thumb {
  background-color: hsl(0, 0%, 80%);
}

::-webkit-scrollbar-thumb:hover {
  background-color: hsl(0, 0%, 70%);
}

/*-----------------------------------*\
  #REUSED STYLE
\*-----------------------------------*/

.container {
  padding-inline: 15px;
}

.section {
  padding-block: var(--section-padding);
}

.shape {
  position: absolute;
  display: none;
}

.has-bg-image {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.h1,
.h2,
.h3 {
  color: var(--eerie-black-1);
  font-family: var(--ff-Monsterrat);
  line-height: 1;
}

.h1,
.h2 {
  font-weight: var(--fw-600);
}

.h1 {
  font-size: var(--fs-1);
}

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

.h3 {
  font-size: var(--fs-3);
  font-weight: var(--fw-500);
}

.section-title {
  --color: var(--radical-red);
  text-align: center;
  font-family: var(--ff-Proza_Libre);
}

.section-title .span {
  display: inline-block;
  color: var(--color);
}

.btn {
  background-color: var(--kappel);
  color: var(--white);
  font-family: var(--ff-league_spartan);
  font-size: var(--fs-4);
  display: flex;
  align-items: center;
  gap: 7px;
  max-width: max-content;
  padding: 10px 20px;
  border-radius: var(--radius-5);
  overflow: hidden;
}

.has-before,
.has-after {
  position: relative;
  z-index: 1;
}

.has-before::before,
.has-after::after {
  position: absolute;
  content: "";
}

.btn::before {
  inset: 0;
  background-image: var(--gradient);
  z-index: -1;
  border-radius: inherit;
  transform: translateX(-100%);
  transition: var(--transition-2);
}

.btn:is(:hover, :focus)::before {
  transform: translateX(0);
}

.img-holder {
  aspect-ratio: var(--width) / var(--height);
  background-color: var(--light-gray);
  overflow: hidden;
}

.img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.section-subtitle {
  font-size: var(--fs-5);
  text-transform: uppercase;
  font-weight: var(--fw-500);
  letter-spacing: 1px;
  text-align: center;
  margin-block-end: 15px;
  font-family: var(--ff-Roboto_Mono);
}

.section-text {
  font-size: var(--fs-5);
  text-align: center;
  margin-block: 15px 25px;
  font-family: var(--ff-poppins);
}

.grid-list {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 4%;
  align-items: center;
}

.category-card,
.stats-card {
  background-color: hsla(var(--color), 0.1);
}

:is(.course, .blog) .section-title {
  margin-block-end: 40px;
}

/* 



Sticky Navbar



*/
.navbar {
  position: fixed;
  width: 100%;
  z-index: 200;
  transition: all 0.3s ease;
  background-color: #fefae0;
  margin-bottom: 2%;
}
.navbar.sticky {
  background: #1b1b1b;
  padding: 6px 10px;
  box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.1);
}
.navbar .content {
  padding: 1% 2%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--kappel);
}

.navbar .logo a {
  color: var(--kappel);
  font-size: 30px;
  font-weight: 600;
  text-decoration: none;
}
.navbar .menu-list {
  display: inline-flex;
}
.menu-list li {
  list-style: none;
}
.menu-list li a {
  color: var(--kappel);
  font-size: 18px;
  font-weight: 500;
  margin-left: 25px;
  text-decoration: none;
  transition: all 0.3s ease;
}
.menu-list li a:hover {
  color: #007bff;
}
.banner {
  background: url("banner.jpg") no-repeat;
  height: 100vh;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
.about {
  padding: 30px 0;
}
.about .title {
  font-size: 38px;
  font-weight: 700;
}
.about p {
  padding-top: 20px;
  text-align: justify;
}
.icon {
  color: var(--kappel);
  font-size: 20px;
  cursor: pointer;
  display: none;
}
.menu-list .cancel-btn {
  position: absolute;
  right: 30px;
  top: 20px;
}
@media (max-width: 1230px) {
  .content {
    padding: 0 60px;
  }
}
@media (max-width: 1100px) {
  .content {
    padding: 0 40px;
  }
}
@media (max-width: 900px) {
  .content {
    padding: 0 30px;
  }
}
@media (max-width: 868px) {
  body.disabled {
    overflow: hidden;
  }
  .icon {
    display: block;
  }
  .icon.hide {
    display: none;
  }
  .navbar .menu-list {
    position: fixed;
    height: 100vh;
    width: 100%;
    max-width: 400px;
    left: -100%;
    top: 0px;
    display: block;
    padding: 40px 0;
    text-align: center;
    background: #222;
    transition: all 0.3s ease;
  }
  .navbar.show .menu-list {
    left: 0%;
  }
  .navbar .menu-list li {
    margin-top: 45px;
  }
  .navbar .menu-list li a {
    font-size: 23px;
    margin-left: -100%;
    transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  }
  .navbar.show .menu-list li a {
    margin-left: 0px;
  }
}
@media (max-width: 380px) {
  .navbar .logo a {
    font-size: 27px;
  }
}

/* 


Hero section with sliders 



*/

.slider {
  height: 100vh;
  width: 100vw;
  position: relative;
  overflow: hidden;
}
.slider .list .item {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0 0 0 0;
}
.slider .list .item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(70%);
}

.slider .list .item .content {
  position: absolute;
  top: 20%;
  width: 1140px;
  max-width: 80%;
  left: 50%;
  transform: translateX(-50%);
  padding-right: 30%;
  box-sizing: border-box;
  color: #fff;
  text-shadow: 0 5px 10px #0004;
}

.slider .list .item .content .title,
.slider .list .item .content .type {
  font-size: 4em;
  font-weight: bold;
  line-height: 1.3em;
  color: #fbfefd;
}

.slider .list .item .content .description {
  color: var(--first-color);
  font-size: 1.5em;
  font-weight: bold;
}
.slider .list .item .type {
  color: #14ff72cb;
}
.slider .list .item .button {
  display: grid;
  grid-template-columns: repeat(2, 130px);
  grid-template-rows: 40px;
  gap: 5px;
  margin-top: 20px;
}
.slider .list .item .button button {
  border: none;
  background-color: #eee;
  font-family: Poppins;
  font-weight: 500;
  cursor: pointer;
  transition: 0.4s;
  letter-spacing: 2px;
}

.slider .list .item .button button:hover {
  letter-spacing: 3px;
}
.slider .list .item .button button:nth-child(2) {
  background-color: transparent;
  border: 1px solid #fff;
  color: #eee;
}

/* Thumbnail Section  */
.thumbnail {
  position: absolute;
  bottom: 50px;
  left: 60%;
  width: max-content;
  z-index: 100;
  display: flex;
  gap: 20px;
}

.thumbnail .item {
  width: 150px;
  height: 220px;
  flex-shrink: 0;
  position: relative;
}

.thumbnail .item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
  box-shadow: 5px 0 15px rgba(0, 0, 0, 0.3);
}

/* nextPrevArrows Section  */
.nextPrevArrows {
  position: absolute;
  top: 80%;
  right: 52%;
  z-index: 100;
  width: 300px;
  max-width: 30%;
  display: flex;
  gap: 10px;
  align-items: center;
}
.nextPrevArrows button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #14ff72cb;
  border: none;
  color: #fff;
  font-family: monospace;
  font-weight: bold;
  transition: 0.5s;
  cursor: pointer;
}
.nextPrevArrows button:hover {
  background-color: #fff;
  color: #000;
}

/* Animation Part */
.slider .list .item:nth-child(1) {
  z-index: 1;
}

/* animation text in first item */
.slider .list .item:nth-child(1) .content .title,
.slider .list .item:nth-child(1) .content .type,
.slider .list .item:nth-child(1) .content .description,
.slider .list .item:nth-child(1) .content .buttons {
  transform: translateY(50px);
  filter: blur(20px);
  opacity: 0;
  animation: showContent 0.5s 1s linear 1 forwards;
}
@keyframes showContent {
  to {
    transform: translateY(0px);
    filter: blur(0px);
    opacity: 1;
  }
}
.slider .list .item:nth-child(1) .content .title {
  animation-delay: 0.4s !important;
}
.slider .list .item:nth-child(1) .content .type {
  animation-delay: 0.6s !important;
}
.slider .list .item:nth-child(1) .content .description {
  animation-delay: 0.8s !important;
}
.slider .list .item:nth-child(1) .content .buttons {
  animation-delay: 1s !important;
}

/* Animation for next button click */
.slider.next .list .item:nth-child(1) img {
  width: 150px;
  height: 220px;
  position: absolute;
  bottom: 50px;
  left: 50%;
  border-radius: 30px;
  animation: showImage 0.5s linear 1 forwards;
}

@keyframes showImage {
  to {
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
  }
}

.slider.next .thumbnail .item:nth-last-child(1) {
  overflow: hidden;
  animation: showThumbnail 0.5s linear 1 forwards;
}
.slider.prev .list .item img {
  z-index: 100;
}

@keyframes showThumbnail {
  from {
    width: 0;
    opacity: 0;
  }
}

.slider.next .thumbnail {
  animation: effectNext 0.5s linear 1 forwards;
}

@keyframes effectNext {
  from {
    transform: translateX(150px);
  }
}

/* Animation for prev button click */
.slider.prev .list .item:nth-child(2) {
  z-index: 2;
}

.slider.prev .list .item:nth-child(2) img {
  animation: outFrame 0.5s linear 1 forwards;
  position: absolute;
  bottom: 0;
  left: 0;
}
@keyframes outFrame {
  to {
    width: 150px;
    height: 220px;
    bottom: 50px;
    left: 50%;
    border-radius: 20px;
  }
}

.slider.prev .thumbnail .item:nth-child(1) {
  overflow: hidden;
  opacity: 0;
  animation: showThumbnail 0.5s linear 1 forwards;
}
.slider.next .nextPrevArrows button,
.slider.prev .nextPrevArrows button {
  pointer-events: none;
}

.slider.prev .list .item:nth-child(2) .content .title,
.slider.prev .list .item:nth-child(2) .content .type,
.slider.prev .list .item:nth-child(2) .content .description,
.slider.prev .list .item:nth-child(2) .content .buttons {
  animation: contentOut 1.5s linear 1 forwards !important;
}

@keyframes contentOut {
  to {
    transform: translateY(-150px);
    filter: blur(20px);
    opacity: 0;
  }
}
@media screen and (max-width: 678px) {
  .slider .list .item .content {
    padding-right: 0;
  }
  .slider .list .item .content .title {
    font-size: 30px;
  }
  .slider .list .item .content .description {
    font-size: 15px;
  }
}

/*




About section 



*/

.art-section {
  background-color: #e8f7f5; /* Light cream background */
  padding: 5rem 1rem;
  font-family: Arial, sans-serif;
  line-height: 1.6;
}

.art-sec {
  padding: 4%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}

.art-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  max-width: 500px;
  margin: 0 auto 1rem;
}

.art-item {
  position: relative;
}

.art-item img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 5px;
}

.artist-name {
  position: absolute;
  bottom: 8px;
  left: 10px;
  color: white;
  font-size: 0.9rem;
  font-weight: bold;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* Content Styling */
.art-content {
  max-width: 600px;
  text-align: left;
  margin: 1rem auto 2rem;
  color: #444;
}

.art-content p {
  margin: 0.5rem 0;
  font-size: var(--fs-4);
  font-family: var(--ff-Roboto_Mono);
  color: darkgreen;
  line-height: 2;
}

.art-content strong {
  font-size: 1.1rem;
}

.join-btn {
  background-color: var(--selective-yellow); /* Yellow button */
  color: #000;
  padding: 0.8rem 1.5rem;
  font-size: var(--fs-5);
  font-weight: bold;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.join-btn:hover {
  background-color: var(--selective-yellow);
}

/*


Different types of art section 



*/

#art-classes-section {
  background-color: #fef7e8;
  padding: 2%;
}

/* Cards Container */
.cards-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  padding: 4%;
}

/* Card Design */
.card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  text-align: center;
  width: 300px;
  transition: transform 0.3s ease;
}

.card img {
  width: 100%;
  height: 260px;
  padding: 2%;
  object-fit: cover;
  border-radius: 12px;
}

.card h3 {
  font-size: var(--fs-5);
  font-weight: 600;
  color: #333;
  margin: 15px 0 10px;
  font-family: var(--ff-Monsterrat);
}

.card p {
  font-size: var(--fs-7);
  color: #666;
  margin: 0 10px 20px;
  line-height: 1.5;
  font-family: var(--ff-Roboto_Mono);
}

.card:hover {
  transform: translateY(-5px);
}

/* Responsive Design */
@media (max-width: 768px) {
  .cards-container {
    flex-direction: column;
    align-items: center;
  }
}

@media (max-width: 768px) {
  .grid-list {
    flex-direction: column;
    align-items: center;
  }
}
/* General styles for category section */
.category .section-subtitle {
  color: var(--radical-red);
}

.category .section-title {
  color: var(--kappel);
}

.category .section-text {
  margin-block-end: 40px;
}

/* Category card styles */
.category-card {
  width: 300px;
  padding: 40px 20px; /* Reduced padding for smaller screens */
  text-align: center;
  border-radius: var(--radius-5);
  transition: transform 0.3s ease; /* Smooth scaling effect */
}

.category-card:hover {
  transform: scale(1.05); /* Slight hover effect */
}

.category-card .card-icon {
  background-color: hsla(var(--color), 0.1);
  width: 80px;
  height: 80px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-circle);
  margin-inline: auto;
  margin-block-end: 20px; /* Reduced spacing */
}

.category-card .card-text {
  color: var(--eerie-black-1);
  font-size: var(--fs-5);
  margin-block: 10px 20px; /* Adjust spacing */
  font-family: var(--ff-Roboto_Mono);
}

.category-card .card-badge {
  background-color: hsla(var(--color), 0.1);
  color: hsl(var(--color));
  font-size: var(--fs-6); /* Slightly smaller font */
  font-weight: var(--fw-500);
  padding: 2px 15px; /* Adjusted padding */
  max-width: max-content;
  margin-inline: auto;
  border-radius: var(--radius-5);
}

/* 




Intro Section 




*/
.intro-section {
  position: relative; /* This will allow the overlay to be positioned relative to the section */
  background-image: url("./image/intro-bg.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  height: 50vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.intro-section::before {
  content: ""; /* Creates the pseudo-element */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent black overlay */
  z-index: 1; /* Ensure the overlay is placed above the background but below the content */
}

.intro-section .intro-content {
  position: relative; /* Ensure that the content sits above the overlay */
  margin: 2%;
  padding: 3%;
  color: var(--selective-yellow);
  text-align: center;
  z-index: 2; /* Make sure content is above the overlay */
}

.intro-content h1,
h2,
p,
button {
  margin: 1% 0;
}

.intro-content h1 {
  font-family: var(--ff-Roboto_Mono);
}

.intro-content h2 {
  font-size: var(--fs-4);
  font-family: var(--ff-Roboto_Mono);
  color: #fff;
}

.intro-content p {
  color: white;
  font-size: var(--fs-5);
  font-family: var(--ff-Proza_Libre);
}

.intro-content button {
  background-color: var(--selective-yellow);
  margin: 2% auto;
  font-family: var(--ff-Proza_Libre);
  padding: 0.7%;
  font-size: var(--fs-5);
}

/* Responsive Styles */
@media screen and (max-width: 768px) {
  /* For tablets and small screens */
  .intro-section {
    height: 90vh; /* Adjust height for smaller screens */
    padding: 0 10px; /* Add padding on the sides */
  }

  .intro-content {
    padding: 2%;
  }

  .intro-content h2,
  h1 {
    font-size: var(--fs-6);
    margin: 3% 0; /* Reduce font size for headings */
  }

  .intro-content p {
    font-size: var(--fs-7); /* Adjust font size for better readability */
  }

  .intro-content button {
    font-size: var(--fs-7); /* Adjust button font size */
    padding: 1%;
    margin-top: 8%;
  }
}

@media screen and (max-width: 480px) {
  /* For mobile screens */
  .intro-section {
    height: 90vh; /* Adjust height for smaller screens */
    padding: 0 5px; /* Add padding on the sides */
  }

  .intro-content h2 {
    font-size: var(--fs-6); /* Further reduce font size */
  }

  .intro-content p {
    font-size: var(--fs-7); /* Further reduce font size */
  }

  .intro-content button {
    font-size: var(--fs-6); /* Adjust button font size */
    padding: 1%;
  }
}

/*



Why Choose us section 



*/

.courses {
  background-image: url("image/section-bg-3.jpeg");
}

.courses .section-title {
  color: var(--radical-red);
}

.courses .section-subtitle {
  color: var(--eerie-black-1);
}

.courses .section-text {
  color: var(--eerie-black-1);
}
.courses-container {
  display: flex;
  flex-shrink: 1;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

@media (min-width: 600px) {
  .courses-container {
    flex-direction: column;
    padding: 3%;
  }
}

@media (min-width: 800px) {
  .courses-container {
    flex-direction: column;
    padding: 2% 3%;
  }

  .course {
    margin: 2% 0;
  }
}

.course {
  position: relative;
  display: flex;
  align-items: flex-start;
  overflow: hidden;
  padding: 1.1rem;
  width: 90%;
  text-align: center;
  color: var(--white);
  background-color: whitesmoke;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 2px 2px rgba(0, 0, 0, 0.1),
    0 4px 4px rgba(0, 0, 0, 0.1), 0 8px 8px rgba(0, 0, 0, 0.1),
    0 16px 16px rgba(0, 0, 0, 0.1);
}

@media (min-width: 600px) {
  .course {
    height: 350px;
  }
}

.course:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 110%;
  background-size: cover;
  background-position: 0 0;
  transition: transform 1.05s cubic-bezier(0.19, 1, 0.22, 1);
  pointer-events: none;
}

.course:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 200%;
  pointer-events: none;
  background-image: linear-gradient(
    to bottom,
    hsla(0, 0%, 0%, 0) 0%,
    hsla(0, 0%, 0%, 0.009) 11.7%,
    hsla(0, 0%, 0%, 0.034) 22.1%,
    hsla(0, 0%, 0%, 0.072) 31.2%,
    hsla(0, 0%, 0%, 0.123) 39.4%,
    hsla(0, 0%, 0%, 0.182) 46.6%,
    hsla(0, 0%, 0%, 0.249) 53.1%,
    hsla(0, 0%, 0%, 0.32) 58.9%,
    hsla(0, 0%, 0%, 0.394) 64.3%,
    hsla(0, 0%, 0%, 0.468) 69.3%,
    hsla(0, 0%, 0%, 0.54) 74.1%,
    hsla(0, 0%, 0%, 0.607) 78.8%,
    hsla(0, 0%, 0%, 0.668) 83.6%,
    hsla(0, 0%, 0%, 0.721) 88.7%,
    hsla(0, 0%, 0%, 0.762) 94.1%,
    hsla(0, 0%, 0%, 0.79) 100%
  );
  transform: translateY(-50%);
  transition: transform 1.4s cubic-bezier(0.19, 1, 0.22, 1);
}

.course:nth-child(1):before {
  background-image: url("./image/f-2.jpg");
}

.course:nth-child(2):before {
  background-image: url("./image/adult-course.jpg");
}

.course:nth-child(3):before {
  background-image: url("./image/hobby.jpg");
}

.course-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 1rem;
  transition: transform 700ms cubic-bezier(0.19, 1, 0.22, 1);
  z-index: 1;
}

.course-content > * + * {
  margin-top: 1rem;
}

.course-title {
  font-size: var(--fs-2);
  font-weight: 800;
  line-height: 1.2;
  font-family: var(--ff-Proza_Libre);
  color: #fbfefd;
}

.course-copy {
  font-size: var(--fs-4);
  font-style: italic;
  line-height: 1.35;
  font-family: var(--ff-Roboto_Mono);
  color: var(--selective-yellow);
}

.course-btn {
  cursor: pointer;
  margin-top: 1.5rem;
  padding: 0.75rem 1.5rem;
  font-size: var(--fs-7);
  font-weight: bold;
  letter-spacing: 0.025rem;
  text-transform: uppercase;
  color: var(--eerie-black-1);
  background-color: var(--selective-yellow);
  border: none;
}

.course-btn:hover {
  background-color: var(--radical-red);
  color: var(--eerie-black-1);
}

.course-btn:focus {
  outline: 1px dashed yellow;
  outline-offset: 3px;
}

@media (hover: hover) and (min-width: 600px) {
  .course:after {
    transform: translateY(0);
  }

  .course-content {
    transform: translateY(calc(100% - 4.5rem));
  }

  .course-content > *:not(.course-title) {
    opacity: 0;
    transform: translateY(1rem);
    transition: transform 700ms cubic-bezier(0.19, 1, 0.22, 1),
      opacity 700ms cubic-bezier(0.19, 1, 0.22, 1);
  }

  .course:hover,
  .course:focus-within {
    align-items: center;
  }

  .course:hover:before {
    transform: translateY(-4%);
  }

  .course:hover:after {
    transform: translateY(-50%);
  }

  .course:hover .course-content {
    transform: translateY(0);
  }

  .course:hover .course-content > *:not(.course-title) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 87.5ms;
  }

  .course:focus-within:before,
  .course:focus-within:after,
  .course:focus-within .course-content,
  .course:focus-within .course-content > *:not(.course-title) {
    transition-duration: 0s;
  }
}

.box p {
  color: var(--grayishBlue);
}

.box {
  border-radius: 5px;
  box-shadow: 0px 30px 40px -20px var(--grayishBlue);
  padding: 30px;
  margin: 20px;
}

img {
  float: right;
}

@media (max-width: 450px) {
  .box {
    height: 200px;
  }
}

@media (max-width: 950px) and (min-width: 450px) {
  .box {
    text-align: center;
    height: 180px;
  }
}

.cyan {
  border-top: 3px solid var(--cyan);
  background-color: #fdecef;
}
.red {
  border-top: 3px solid var(--red);
  background-color: #eceffc;
}
.blue {
  border-top: 3px solid var(--blue);
  background-color: #fef7e8;
}
.orange {
  border-top: 3px solid var(--orange);
  background-color: #e8f7f5;
}

h2 {
  color: var(--varyDarkBlue);
  font-weight: var(--weight3);
}

@media (min-width: 950px) {
  .row1-container {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .row2-container {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .box-down {
    position: relative;
    top: 150px;
  }
  .box {
    width: 20%;
  }
  .header p {
    width: 30%;
  }
}

/*




Gallery section 



*/

.tranding {
  width: 100%;
  background-color: #fef7e8;
}

.trend-container {
  max-width: 124rem;
  padding: 0 1rem;
  margin: 3% auto;
}

@media (max-width: 1440px) {
  .tranding {
    padding: 7rem 0;
  }
}

.tranding .tranding-slider {
  height: 52rem;
  padding: 2rem 0;
  position: relative;
}

@media (max-width: 500px) {
  .tranding .tranding-slider {
    height: 45rem;
  }
}

.tranding-slide {
  width: 37rem;
  height: 42rem;
  position: relative;
}

@media (max-width: 500px) {
  .tranding-slide {
    width: 28rem !important;
    height: 36rem !important;
  }
  .tranding-slide .tranding-slide-img img {
    width: 28rem !important;
    height: 36rem !important;
  }
}

.tranding-slide .tranding-slide-img img {
  width: 37rem;
  height: 42rem;
  border-radius: 2rem;
  object-fit: cover;
}

.tranding-slide .tranding-slide-content {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

.tranding-slide-content .food-price {
  position: absolute;
  top: 2rem;
  right: 2rem;
  color: var(--white);
}

.tranding-slide-content .tranding-slide-content-bottom {
  position: absolute;
  bottom: 2rem;
  left: 2rem;
  color: var(--white);
}

.food-rating {
  padding-top: 1rem;
  display: flex;
  gap: 1rem;
}

.rating ion-icon {
  color: var(--primary);
}

.swiper-slide-shadow-left,
.swiper-slide-shadow-right {
  display: none;
}

.tranding-slider-control {
  position: relative;
  bottom: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tranding-slider-control .swiper-button-next {
  left: 58% !important;
  transform: translateX(-58%) !important;
}

@media (max-width: 990px) {
  .tranding-slider-control .swiper-button-next {
    left: 70% !important;
    transform: translateX(-70%) !important;
  }
}

@media (max-width: 450px) {
  .tranding-slider-control .swiper-button-next {
    left: 80% !important;
    transform: translateX(-80%) !important;
  }
}

@media (max-width: 990px) {
  .tranding-slider-control .swiper-button-prev {
    left: 30% !important;
    transform: translateX(-30%) !important;
  }
}

@media (max-width: 450px) {
  .tranding-slider-control .swiper-button-prev {
    left: 20% !important;
    transform: translateX(-20%) !important;
  }
}

.tranding-slider-control .slider-arrow {
  background: var(--white);
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  left: 42%;
  transform: translateX(-42%);
  filter: drop-shadow(0px 8px 24px rgba(18, 28, 53, 0.1));
}

.tranding-slider-control .slider-arrow ion-icon {
  font-size: 2rem;
  color: #222224;
}

.tranding-slider-control .slider-arrow::after {
  content: "";
}

.tranding-slider-control .swiper-pagination {
  position: relative;
  width: 15rem;
  bottom: 1rem;
}

.tranding-slider-control .swiper-pagination .swiper-pagination-bullet {
  filter: drop-shadow(0px 8px 24px rgba(18, 28, 53, 0.1));
}

.tranding-slider-control .swiper-pagination .swiper-pagination-bullet-active {
  background: var(--primary);
}

/*




Contact us section 



*/
.custom-container {
  position: relative;
  width: 100%;
  min-height: 100vh;
  padding: 7%;
  background-color: #fff;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.custom-form {
  width: 100%;
  max-width: 1000px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.custom-contact-form {
  background-color: var(--kappel);
  position: relative;
}

.custom-circle {
  border-radius: 50%;
  background: linear-gradient(135deg, transparent 20%, #149279);
  position: absolute;
}

.custom-one {
  width: 130px;
  height: 130px;
  top: 130px;
  right: -40px;
}

.custom-two {
  width: 80px;
  height: 80px;
  top: 10px;
  right: 30px;
}

.custom-contact-form:before {
  content: "";
  position: absolute;
  width: 26px;
  height: 26px;
  background-color: #1abc9c;
  transform: rotate(45deg);
  top: 50px;
  left: -13px;
}

form {
  padding: 2.3rem 2.2rem;
  z-index: 10;
  overflow: hidden;
  position: relative;
}

.custom-title {
  color: #fff;
  font-weight: 500;
  font-size: var(--fs-4);
  line-height: 1;
  margin-bottom: 1.5rem;
  font-family: var(--ff-poppins);
}

.custom-input-container {
  position: relative;
  margin: 1rem 0;
}

.custom-input {
  width: 100%;
  outline: none;
  border: 2px solid #fafafa;
  background: none;
  padding: 0.6rem 1.2rem;
  color: #fff;
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.5px;
  border-radius: 25px;
  transition: 0.3s;
}

textarea.custom-input {
  padding: 0.8rem 1.2rem;
  min-height: 150px;
  border-radius: 22px;
  resize: none;
  overflow-y: auto;
}

.custom-input-container label {
  position: absolute;
  top: 50%;
  left: 15px;
  transform: translateY(-50%);
  padding: 0 0.4rem;
  color: #fafafa;
  font-size: 0.9rem;
  font-weight: 400;
  pointer-events: none;
  z-index: 1000;
  transition: 0.5s;
}

.custom-input-container.custom-textarea label {
  top: 1rem;
  transform: translateY(0);
}

.custom-btn {
  padding: 0.6rem 1.3rem;
  background-color: #fff;
  border: 2px solid #fafafa;
  font-size: 0.95rem;
  color: #1abc9c;
  line-height: 1;
  border-radius: 25px;
  outline: none;
  cursor: pointer;
  transition: 0.3s;
  margin: 0;
}

.custom-btn:hover {
  background-color: transparent;
  color: #fff;
}

.custom-input-container span {
  position: absolute;
  top: 0;
  left: 25px;
  transform: translateY(-50%);
  font-size: 0.8rem;
  padding: 0 0.4rem;
  color: transparent;
  pointer-events: none;
  z-index: 500;
}

.custom-input-container span:before,
.custom-input-container span:after {
  content: "";
  position: absolute;
  width: 10%;
  opacity: 0;
  transition: 0.3s;
  height: 5px;
  background-color: #1abc9c;
  top: 50%;
  transform: translateY(-50%);
}

.custom-input-container span:before {
  left: 50%;
}

.custom-input-container span:after {
  right: 50%;
}

.custom-input-container.focus label {
  top: 0;
  transform: translateY(-50%);
  left: 25px;
  font-size: 0.8rem;
}

.custom-input-container.focus span:before,
.custom-input-container.focus span:after {
  width: 50%;
  opacity: 1;
}

.custom-contact-info {
  padding: 2.3rem 2.2rem;
  position: relative;
}

.custom-contact-info .custom-title {
  color: #1abc9c;
}

.custom-text {
  color: #333;
  margin: 1.5rem 0 2rem 0;
  font-family: var(--ff-Roboto_Mono);
  font-size: var(--fs-5);
}

.custom-information {
  display: flex;
  color: #555;
  margin: 0.7rem 0;
  align-items: center;
  font-size: var(--fs-6);
}

.custom-icon {
  width: 28px;
  margin-right: 0.7rem;
}

.custom-social-media {
  padding: 2rem 0 0 0;
}

.custom-social-media p {
  color: #333;
  font-size: var(--fs-6);
  margin-bottom: 1rem;
}

.custom-social-icons {
  display: flex;
  margin-top: 0.5rem;
}

.custom-social-icons a {
  width: 35px;
  height: 35px;
  border-radius: 5px;
  background: linear-gradient(45deg, #1abc9c, #149279);
  color: #fff;
  text-align: center;
  line-height: 35px;
  margin-right: 0.5rem;
  transition: 0.3s;
}

.custom-social-icons a:hover {
  transform: scale(1.05);
}

.custom-contact-info:before {
  content: "";
  position: absolute;
  width: 110px;
  height: 100px;
  border: 22px solid #1abc9c;
  border-radius: 50%;
  bottom: -77px;
  right: 50px;
  opacity: 0.3;
}

.custom-big-circle {
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: linear-gradient(to bottom, #1cd4af, #159b80);
  bottom: 50%;
  right: 50%;
  transform: translate(-40%, 38%);
}

.custom-big-circle:after {
  content: "";
  position: absolute;
  width: 360px;
  height: 360px;
  background-color: #fafafa;
  border-radius: 50%;
  top: calc(50% - 180px);
  left: calc(50% - 180px);
}

.custom-square {
  position: absolute;
  height: 400px;
  top: 50%;
  left: 50%;
  transform: translate(181%, 11%);
  opacity: 0.2;
}

@media (max-width: 850px) {
  .custom-form {
    grid-template-columns: 1fr;
  }

  .custom-contact-info:before {
    bottom: initial;
    top: -75px;
    right: 65px;
    transform: scale(0.95);
  }

  .custom-contact-form:before {
    top: -13px;
    left: initial;
    right: 70px;
  }

  .custom-square {
    transform: translate(140%, 43%);
    height: 350px;
  }

  .custom-big-circle {
    bottom: 75%;
    transform: scale(0.9) translate(-40%, 30%);
    right: 50%;
  }

  .custom-text {
    margin: 1rem 0 1.5rem 0;
  }

  .custom-social-media {
    padding: 1.5rem 0 0 0;
  }
}

@media (max-width: 480px) {
  .custom-container {
    padding: 1.5rem;
  }

  .custom-contact-info:before {
    display: none;
  }

  .custom-square,
  .custom-big-circle {
    display: none;
  }

  form,
  .custom-contact-info {
    padding: 1.7rem 1.6rem;
  }

  .custom-text,
  .custom-information,
  .custom-social-media p {
    font-size: 0.8rem;
  }

  .custom-title {
    font-size: 1.15rem;
  }

  .custom-social-icons a {
    width: 30px;
    height: 30px;
    line-height: 30px;
  }

  .custom-icon {
    width: 23px;
  }

  .custom-input {
    padding: 0.45rem 1.2rem;
  }

  .custom-btn {
    padding: 0.45rem 1.2rem;
  }
}

.section-best {
  background-image: url("./image/art-bg.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

.wrapper {
  width: 589px;
  margin: auto;
  height: auto;
}
.img-area {
  display: grid;
  grid-template-rows: repeat(1, 55vh);
  grid-template-columns: repeat(3, 23vw);
  transition: all 0.2s cubic-bezier(0.5, 0.8, 0.5, 0.2);
  border-radius: 10px;
  align-items: center;
  justify-content: center;
}
.img-best {
  width: 100%;
  height: 100%;
  object-fit: cover;
  left: 0;
  top: 0;
  transition: all 0.15s cubic-bezier(0.5, 0.2, 0.2, 0.5);
  position: relative;
  box-shadow: 0 0 0 #000;
  opacity: 0.7;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .wrapper {
    width: 80%;
    height: auto;
    margin: 5%;
  }
  .img-area {
    grid-template-rows: repeat(3, 20vh);
    grid-template-columns: repeat(2, 32vh);
  }
  .img-best:hover {
    width: 100%;
    height: 200%;
  }
}
@media only screen and (max-width: 767px) {
  .wrapper {
    width: 80%;
    height: auto;
    margin: 10%;
  }
  .img-area {
    grid-template-rows: repeat(5, 30vh);
    grid-template-columns: repeat(1, 50vh);
  }
  .img-best:hover {
    width: 100%;
    height: 200%;
  }
}