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



  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    corner-shape: squircle;
  }


  :root {
    --shadow: 0px 1.5px 1px 0px #ffffffac, 0px 2px 2px -1px #ffffffe0 inset;
    --bg: #e5e5e5;
    --transition: all 0.6s ease-in-out;
    --border: 1px solid #00000009;
    --radius: 60px;
  }

  body {
    min-height: 100vh;
    width: 100%;
    display: flex;
    justify-content: start;
    flex-direction: column;
    align-items: center;
    padding: 1rem 5% 1rem 5%;
    gap: 10px;
    background: #eeeeee;
    font-family: "Albert Sans", sans-serif;
    font-optical-sizing: auto;
    line-height: 150%;
  }



  .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;

  }





  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px;
    border-radius: var(--radius);
    background: var(--bg);
    border: var(--border);
    width: 100%;
    max-width: 800px;

  }


  .menu {
    display: flex;
    gap: 10px;
    list-style-type: none;

  }

  li,
  a {
    text-decoration: none;
    display: inline-block;
    color: black;
    font-size: 14px;
    text-transform: capitalize;
  }


  .btn {
    padding: 12px 20px;
    border: var(--border);
    border-radius: 54px;
    box-shadow: var(--shadow);
    line-height: 100%;


  }




  .carousel {
    display: flex;
    width: 100%;
    max-width: 920px;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;



  }


  .track {
    display: flex;
    transition: var(--transition);
    width: 100%;
    padding-bottom: 10px;
    padding-top: 10px;





  }


  .animated {
    animation: carousel 14s linear 1s alternate infinite;
  }


  @keyframes carousel {
    from {
      transform: translateX(0);
    }

    to {
      transform: translateX(-1570px);
    }
  }




  .card {
    display: flex;
    width: 100%;
    min-width: 100%;
    height: 400px;
    transition: var(--transition);
    border: var(--border);
    background: var(--bg);
    padding: 10px;
    border-radius: var(--radius);
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    background: url("https://cdn.midjourney.com/79e12224-76c2-4aeb-aa58-256b5c5b5e99/0_1.png") no-repeat top/cover;
    cursor: pointer;

  }

  .card:nth-child(2) {
    background-image: url("https://cdn.midjourney.com/ca44d18a-48ad-4176-a6ec-9a07864c4287/0_0.png");
  }

  .card:nth-child(3) {
    background-image: url("https://cdn.midjourney.com/d11d5cce-a168-4dd4-9bcb-e8fe1323371a/0_0.png");
  }

  .card:nth-child(3) {
    background-image: url("https://cdn.midjourney.com/d11d5cce-a168-4dd4-9bcb-e8fe1323371a/0_0.png");
  }

  .card:nth-child(4) {
    background-image: url("https://cdn.midjourney.com/a2946dac-50b1-4b61-99b3-4cf2273b1142/0_0.png");
  }

  .card:nth-child(5) {
    background-image: url("https://cdn.midjourney.com/b7925943-d47d-437c-996f-b178b94999b3/0_0.png");
  }

  .card:nth-child(6) {
    background-image: url("https://cdn.midjourney.com/1a22a08c-fea1-42f0-8e77-fcda8e225e26/0_1.png");
  }

  .card:nth-child(7) {
    background-image: url("https://cdn.midjourney.com/1fce053b-ac43-43dc-add9-1bc8ed04d3b0/0_1.png");
  }




  .no {
    display: block;
    padding: 10px 40px;
    border: var(--border);
    background: var(--bg);
    box-shadow: var(--shadow);
    border-radius: var(--radius);
  }


  .arrow {
    position: absolute;
    width: 35px;
    height: 35px;
    cursor: pointer;
    z-index: 10;
    background: var(--bg);
    padding: 5px;
    border: var(--border);
    box-shadow: var(--shadow);
    border-radius: var(--radius);

  }

  #prev {
    transform: translateX(50%);
    left: 0;

  }


  #next {
    right: 0;
    transform: translateX(-50%);
  }

  .about {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 1000px;
    background: var(--bg);
    border: var(--border);
    box-shadow: var(--shadow);
    border-radius: var(--radius);
    overflow: hidden;
    padding: 8px;

  }


  .ab-left {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: start;
    justify-content: center;
    width: 100%;
    padding: 20px;
  }

  .heading2 {
    font-size: 2rem;
    font-weight: 500;
    word-spacing: -2px;
    letter-spacing: -2%;
    text-transform: capitalize;
  }

  .p-desc {
    font-size: 1rem;

  }

  .img-div {
    display: flex;
    width: 100%;
  }


  .p-img {
    width: 100%;
    border-radius: 52px;
    border: var(--border);
    box-shadow: var(--shadow);
    max-height: 700px;
    object-fit: cover;
    object-position: top;
  }


  /* .overlay{
    display: inline-block;
    width: 40px;
    background: linear-gradient(-90deg, transparent, #eeeeee);
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2; 
    
  }

  .overlay-2{
    display: inline-block;
    width: 40px;
    background: linear-gradient(90deg, transparent, #eeeeee);
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2; 
  } */




  @media (min-width: 768px) {

    .card {
      display: flex;
      min-width: 300px;
      margin-right: 10px;
    }


    .about {
      display: flex;
      flex-direction: row;


    }




  }