@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@1,300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Allura&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", serif;
    font-weight: 300;
    font-style: italic;
}

body{
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

}

a{
    text-decoration: none;
    color: red;
    font-weight: 900;
}

.card{
    position: relative;
    color: #fff;
    background-color: #000000;
    border-radius: 5px;
    width: 40rem;
    height: 30rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    padding: 2px;
}

.left{
    width: 30%;
    height: 100%;
    background: linear-gradient(to top, #d6a534, #eac865, #fbe996, #dfb84d, #f0d77a);
    padding: 20px;
    position: relative;
}

.img{
    position: absolute;
    top: 100px;
    left: 20px;
}

.img>img{
    width: 150px;
    border-radius: 50%;
    height: 170px;
}

.design{
    position: absolute;
    top: 290px;
    left: 20px;
}

.design>img{
    width: 100px;
}

.left>.left-tringle{
    width: 100px;
    height: 100px;
    background-color: #000000;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23edcf6d' fill-opacity='0.68' fill-rule='nonzero'%3E%3Cpath d='M29 58.58l7.38-7.39A30.95 30.95 0 0 1 29 37.84a30.95 30.95 0 0 1-7.38 13.36l7.37 7.38zm1.4 1.41l.01.01h-2.84l-7.37-7.38A30.95 30.95 0 0 1 6.84 60H0v-1.02a28.9 28.9 0 0 0 18.79-7.78L0 32.41v-4.84L18.78 8.79A28.9 28.9 0 0 0 0 1.02V0h6.84a30.95 30.95 0 0 1 13.35 7.38L27.57 0h2.84l7.39 7.38A30.95 30.95 0 0 1 51.16 0H60v27.58-.01V60h-8.84a30.95 30.95 0 0 1-13.37-7.4L30.4 60zM29 1.41l-7.4 7.38A30.95 30.95 0 0 1 29 22.16 30.95 30.95 0 0 1 36.38 8.8L29 1.4zM58 1A28.9 28.9 0 0 0 39.2 8.8L58 27.58V1.02zm-20.2 9.2A28.9 28.9 0 0 0 30.02 29h26.56L37.8 10.21zM30.02 31a28.9 28.9 0 0 0 7.77 18.79l18.79-18.79H30.02zm9.18 20.2A28.9 28.9 0 0 0 58 59V32.4L39.2 51.19zm-19-1.4a28.9 28.9 0 0 0 7.78-18.8H1.41l18.8 18.8zm7.78-20.8A28.9 28.9 0 0 0 20.2 10.2L1.41 29h26.57z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    clip-path: polygon(0 0, 100% 0, 50% 50%, 0 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 2px;
    left: 2px;
    border-radius: 2px;
}

.right{
    width: 70%;
    height: 100%;
    text-align: right;
    display: flex;
    flex-direction: column;
    padding: 20px;
    padding-top: 0px;
    margin-top: 80px;
    position: relative;
}

.right img{
    position: absolute;
    border: 7px double #c29638;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    top: -35px;
    left: 380px;
}

.right>.details>.name{
    font-family: "Allura", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 30px;
    color: #f2c746;
    width: 100%;
    height: 60px;
}

.job-name{
    font-style: normal;
    font-size: 20px;
    color: #f2c746;
}

.right>.links{
    text-align: left;
}

.shares{
    margin-top: 10px;
}

.ss-btn{
    padding-left: 4px;
    padding-right: 4px;
    border-radius: 80%;
    background-color: #fff;
    color: #000000;
}

.fs-btn{
    padding-left: 4px;
    padding-right: 4px;
    border-radius: 80%;
    background-color: #0866ff;
    color: #fff;
    margin-right: 20px;
}

.ws-btn{
    padding-left: 4px;
    padding-right: 4px;
    border-radius: 80%;
    background-color: #1abc9c;
    color: #fff;
    margin-right: 20px;
}

/* @media (max-width: 900px){
    .card{
        margin-top: 50px;
    }
}

@media (max-width: 627px) {
    .card{
        display: flex;
        flex-direction: column;
        width: 35rem;
    }
    
    .left{
        background: none;
    }
    
    .left>.img{
        left: -150px;
    }

    .left>.left-tringle{
        display: none;
    }

    .left>.design{
        display: none;
    }

    .right{
        width: 100%;
        text-align: right;
        position: relative;
        margin-top: 0;
    }

    .right>.links{
        text-align: right;
    }

    .right>.details>img{
        left: 480px;
        top: -30px;
    }
}

@media (max-width: 575px){
    .card{
        display: flex;
        flex-direction: column;
        width: 35rem;
        height: 30rem;
    }

    .left{
        width: 100%;
        text-align: center;
        position: absolute;
        left: 350px;
        top: -150px;
    }

    .right{
        width: 100%;
        text-align: center;
        position: absolute;
        left: 0;
        top: 120px;
    }

    /* .right>.details>img{
        display: none;
    }

    .right>.links{
        text-align: center;
    }
}

@media (max-width: 562px){
    .card{
        width: 28rem;
        height: 26rem;
    }
    
    .left{
        display: none;
    }

    .right{
        top: 0;
        padding: 15px;
    }
}

@media (max-width: 475px){
    .card{
        width: 20rem;
        height: 35rem;
    }

    .right>.details>.email{
        font-size: 15px;
    }

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

@media (max-width: 330px){
    .card{
        width: 17rem;
    }
    
    .right>.details>.name{
        font-size: 40px;
        margin-bottom: 20px;
    }

    .name {
      margin-bottom: 120px;
      height: 20px;
    }
} */


/* --- Responsive Adjustments --- */

@media (max-width: 768px) {
    .card {
        width: 95%; /* Screen ke hisaab se adjust hoga */
        max-width: 400px;
        height: auto; 
        flex-direction: column; 
        overflow: hidden; /* Elements bahar na nikle */
    }

    .left {
        width: 100%;
        height: 180px; 
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .img {
        position: relative; 
        top: 20px; /* Center mein set kiya */
        left: 0;
    }

    .img>img {
        width: 110px;
        height: 125px;
    }

    /* Logo jo right section mein tha */
    .right img {
        position: absolute;
        top: -4px; /* Thoda upar overlap karega design ke liye */
        left: 50%;
        transform: translateX(-50%); /* Center align karne ke liye */
        border: 4px double #c29638;
        width: 45px;
        height: 45px;
        display: block; /* Isse logo wapas aa jayega */
    }

    .right {
        width: 100%;
        text-align: center;
        margin-top: 30px; /* Logo ke liye space chhodi */
        padding: 20px;
    }

    .right>.details>.name {
        font-size: 24px;
        height: auto;
    }

    .right>.links {
        text-align: center;
    }

    .design {
        display: none; 
    }
}

/* For Very Small Phones (e.g. iPhone SE) */
@media (max-width: 400px) {
    .card {
        width: 95%;
    }
    .job-name {
        font-size: 16px;
    }
}

/* role power */

.wrapper {
  max-width: 1100px;
  padding: 20px 10px;
  margin: 0 60px 35px;
  overflow: hidden;
}

.wrapper>.card-list>.card {
  background: #fff;
  display: flex;
  height: auto;
  flex-direction: column;
  border-radius: 20px;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease;
}

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

.card .card-image {
  position: relative;
}

.card .card-image img {
  width: 100%;
  padding: 10px;
  border-radius: 22px;
  object-fit: cover;
  aspect-ratio: 16 / 9;
}

.card .card-image .card-tag {
  position: absolute;
  top: 25px;
  left: 25px;
  font-size: 0.75rem;
  color: #6366f1;
  padding: 5px 15px;
  border-radius: 30px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.card .card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 10px 25px 25px;
}

.card .card-content .card-title {
  color: #111111;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 15px;
}

.card .card-content .card-text {
  color: #747474;
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 20px;
}

.card .card-footer {
  display: flex;
  margin-top: auto;
  align-items: center;
  padding-top: 15px;
  justify-content: space-between;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.card .card-footer .card-profile {
  display: flex;
  align-items: center;
}

.card .card-profile .card-profile-info {
  display: flex;
  flex-direction: column;
}

.card .card-profile .card-profile-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: #202020;
}

.card .card-profile .card-profile-role {
  font-size: 0.8rem;
  color: #7A7A7A;
}

.card .card-profile img {
  width: 35px;
  height: 35px;
  margin-right: 10px;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.card .card-button {
  color: #fff;
  padding: 10px 20px;
  border-radius: 30px;
  font-size: 0.81rem;
  font-weight: 600;
  text-decoration: none;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  box-shadow: 0 4px 10px rgba(99, 102, 241, 0.2);
  transition: all 0.3s ease;
}

.card .card-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 15px rgba(99, 102, 241, 0.3);
}

.wrapper .swiper-pagination-bullet {
  height: 15px;
  width: 15px;
  opacity: 1;
  overflow: hidden;
  position: relative;
  background: #B1B3F8;
}

.wrapper .swiper-pagination-bullet-active {
  background: #a4a7fd;
}

/* Auto-play loading indicator */
.wrapper .swiper-pagination-bullet-active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: #6366f1;
  transform-origin: left center;
  transform: scaleX(0);
  animation: autoplay-loading 5s linear forwards;
}

.container:hover .wrapper .swiper-pagination-bullet-active::before {
  animation-play-state: paused;
}

@keyframes autoplay-loading {
  0% {
    transform: scaleX(0);
  }

  100% {
    transform: scaleX(1);
  }
}

.wrapper :where(.swiper-button-prev, .swiper-button-next) {
  color: #6366f1;
  margin-top: -35px;
  transition: all 0.3s ease;
}

.wrapper :where(.swiper-button-prev, .swiper-button-next):hover {
  color: #8b5cf6;
}

/* Responsive media query code for small screens */
@media (max-width: 768px) {
  .wrapper {
    margin: 0 10px 25px;
  }

  .wrapper :where(.swiper-button-prev, .swiper-button-next) {
    display: none;
  }
}