/*overall style for the card container and big card*/
        #farmer_list{
            display: grid;
            width: 100%;
            grid-template-columns: 1fr 1fr 1fr;
            background-image: url("/Image_about/yellow_background.png");
            gap: 60px;
            padding: 60px;
        }

        .farmer-card{
            
            border-radius: 12px;
            height: auto;
            background-color: wheat;
            padding: 20px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);

        }
        /*phone layout for this*/
        @media (max-width:768px) {
            #farmer_list{
                grid-template-columns:1fr;

                padding: 20px;
                gap: 30px;
            }
        }



        
        
        .card-image{
            height: 400px;
            overflow:hidden;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
            
            position: relative;
            transform-style:preserve-3d;
            
        }

        .image-front img{
            width: 100%;
            object-fit: cover;
            height: 100%;
            display: block;

        }

        .overlay{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.6);
            color: white;

            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            opacity: 0;
            transition: all 0.4s ease-in-out;
            pointer-events: none;
            padding: 20px;
        }

        .card-image:hover .overlay{
            opacity:1;
        }
        
        .flip-container{
            perspective:1000px;
            height: 100%;
            width: 100%;
        }

        .flip-inner{
            transition: transform 0.3s ease;
            transform-style: preserve-3d;

            width: 100%;
            height: 100%;

            position: relative;
        }

        .flip-inner.flipped{
            transform: rotateY(180deg);
        }

        .image-front, .image-back{
            backface-visibility: hidden;
            position: absolute;
            border-radius: 12px;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
        }

        .image-front{
            z-index:2;
            position: relative;
        }

        .image-back{
            transform: rotateY(180deg);

            background-color: brown;
            color: beige;

            
            text-align: center;
            padding: 20px;
            font-size: 18px;
            z-index: 1;
            overflow-y: auto;
        }



        

        



                .floating-arrow{
          height: 0;
          width: 0;
          border-left: 16px solid transparent;
          border-right: 16px solid transparent;

          border-top: 20px solid orange;
          margin: 20px auto 0;

          animation: floatArrow 1.5s infinite ease-in-out;
        }

        @keyframes floatArrow {
          0%, 100%{transform: translateY(0); opacity: 1}
          50% {transform: translateY(10px); opacity: 0.5;}
        }

        .intro-callout {
          background: linear-gradient(to bottom, #fff7e6, #ffeccc);
          padding: 24px 32px;
          border-radius: 16px;
          text-align: center;
          font-size: 20px;
          color: #333;
          box-shadow: 0 8px 16px rgba(0,0,0,0.2);
          max-width: 600px;
          margin: 20px auto;
        }

        #adopt-section{
          display: flex;
          justify-content: center;
        }

        .adopt-button {
          display: inline-block;
          margin: 10px auto;
          padding: 16px 32px;
          background-color: #ffa500;
          color: white;
          font-weight: bold;
          font-size: 18px;
          border-radius: 12px;
          text-decoration: none;
          box-shadow: 0 6px 12px rgba(0,0,0,0.2);
          transition: all 0.3s ease;
        }

        .adopt-button:hover {
          background-color: #ff8800;
          transform: translateY(-5px);
        
        }

        #want_adopt{
          background-image: url("/Image_about/tiandi.jpg");
          width: 100%;
          height: 800px;
          display: flex;
          align-items: center;
          justify-content: center;
          box-sizing: cover;
          background-position: center;
          border-top: #ff8800 solid 10px;
        }

        footer {
            text-align: center;
            margin-top: 30px;
            color: #888;
            font-size: 14px;
            margin-bottom:30px;
        }