body {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Quicksand', sans-serif;
}

.layout {
    width: 2056px;
    height: 2056px;
    background-color: #F9FAFE;
    display: flex;
    justify-content: space-between;
    padding-right: 40px;
    padding-left: 40px;
}
.shop {
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 20px;
    right: 20px;
    z-index: 1000;
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 8px;
    margin-top: 15px;
    gap: 10px;
}
.shop i {
    font-size: 28px;
    
    color: #000;
    font-weight: 800;
}
.id {
    width: 71px;
    height: 134px;
    padding-top: 40px;
    padding-bottom: 40px;
    gap: 10px;
}
.id img {
    width: 71px;
    height: 54px;
}
.container {
    width: 834px;
    background-color: #fff;
    position: relative;
    height: 1650px;
    box-shadow: 0px 4px 40px 0px #496FDA0F;
    gap: 10px;
        border-radius: 20px;
        overflow: hidden;
}
.profile {
    background-color: #496FDA;
    width: 834px;
    height: 352px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    position: relative;
    clip-path: polygon(20% 0%, 80% 0%, 100% 0, 100% 80%, 66% 72%, 35% 72%, 0% 80%, 0 0);
    overflow: hidden;
}

.profile-img {
    align-items: center;
    margin-top: -200px;
    display: flex;
    justify-content: center;
    align-items: center;
}   
.profile-img img {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 10px solid #FFFFFF;
    object-fit: cover;
    position: relative;
    z-index: 10;
}

.icon {
    width: 20px;
    height: 20px;
    fill: white;
    opacity: 0.5;
    transition: transform 0.3s;
}

/* Example positions for 14 icons - adjust as needed */
.icon:nth-child(1) { top: 10%; left: 10%;animation-delay: 0s; }
.icon:nth-child(2) { top: 30%; right: 30%;animation-delay: 0.5s; }
.icon:nth-child(3) { bottom: 25%; left: 25%; }
.icon:nth-child(4) { bottom: 15%; right: 15%; }
.icon:nth-child(5) { top: 15%; right: 25%; }
.icon:nth-child(6) { bottom: 30%; right: 30%; }
.icon:nth-child(7) { top: 40%; left: 10%; }
.icon:nth-child(8) { top: 25%; right: 10%; }
.icon:nth-child(9) { bottom: 20%; left: 15%; }
.icon:nth-child(10) { top: 20%; left: 30%; }
.icon:nth-child(11) { bottom: 25%; right: 25%; }
.icon:nth-child(12) { top: 35%; right: 35%; }
.icon:nth-child(13) { bottom: 35%; left: 35%; }
.icon:nth-child(14) { top: 45%; right: 45%; }

/* Info section styles */
.info-section {
    display: flex;
    flex-direction: column;
    padding: 40px;
    position: relative;
    z-index: 1;
}

.info-personel {
    color: #32395F;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-bottom: 40px;
}

.info-personel h3 {
    font-size: 56px;
    line-height: 100%;
    font-weight: 600;
    margin: 0;
}

.info-personel p {
    font-weight: 500;
    font-size: 24px;
    height: 30px;
}

.info-personel p .type {
    color: #496FDA;
}

.info-personel p .status {
    color: #1FCC4D;
    width: 51px;
}

.info-personel .intro {
    font-size: 30px;
    font-weight: 500;
    line-height: 100%;
    color: #737791;
    margin: 4px;
}

/* Info grid styles */
.info-grid {
    display: flex;
    flex-wrap: wrap;
    column-gap: 10px;
    row-gap: 16px;
    margin: 0 auto;
    width: 762px;
    height: 266px;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

.info-box {
    background-color: #496FDA;
    color: #fff;
    min-height: 60px;
    border-radius: 12px;
    padding: 15px;
    width: 269px;
    display: flex;
    flex-direction: column;
}

.info-box h4 {
    color: #fff;
    font-size: 18px;
    margin: 0 0 10px 0;
}

.info-box p {
    color: #fff;
    font-size: 16px;
    margin: 0;
}
.info-content {
display: flex;
align-items: center;
gap: 20px;
width: 100%;
}
.info-content svg {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}
.infos {
display: flex;
flex-direction: column;
justify-content: center;
}

.infos p {
margin: 0;
font-size: 22px;
color: #ffff;
}
.infos h4, .infos p{
    margin: 0;
    line-height: 1.2;
}
.infos h4 {
margin: 5px 0 0 0;
font-size: 28px;
color: #fff;
}
.health-infos {
display: flex;
gap: 20px;
align-items: center;
justify-content: center;
text-align: center;
}

.health-infos .health {
display: flex; 
gap: 10px;
position: relative;
}

/* Add separator after each health div except the last one */
.health-infos .health:not(:last-child)::after {
content: "|";
color: #E0E0E0;
font-size: 20px;
position: absolute;
right: -20px;
top: 50%;
transform: translateY(-50%);
}

.health-infos .health .title {
font-size: 20px;
color: #737791;
}

.health-infos .health .answer {
font-weight: 700;
color: #32395F;
font-size: 20px;
line-height: 100%;
}
.additional-info {
    display: flex;
    gap: 24px;
    padding: 20px 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    scrollbar-width: none; /* Hide scrollbar for Firefox */
    margin: 0 -20px; /* Add some negative margin to allow full-width boxes */
    padding: 20px;
}

/* Hide scrollbar for Chrome/Safari */
.additional-info::-webkit-scrollbar {
    display: none;
}
.additional-info .box{
    /*flex: 0 0 calc(50% - 40px);  Full width minus padding */
    scroll-snap-align: start;
width: 238px;
padding: 20px;
border-radius: 24px;
background-color: #E9EEFB;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.additional-info .box h3{
color: #32395F;
font-size: 20px;
font-weight: 700;
margin-bottom: 10px;
}
.additional-info .box p{
color: #737791;
font-size: 14px;
font-weight: 400;
margin: 5px 0;
}

/* Updated contact section styles */
.contact {
display: flex;
height: 172px;
gap: 28px;
flex-direction: column;
margin-top: 40px;
}

.contact-parent {
  min-height: 72px;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
margin-bottom: 10px;
}



.icon-contact {
  width: 65px;
  height: 65px;
  border-radius: 50%;
  padding: 0;
  background-color: #496FDA1F;
  display: flex;
  justify-content: center;
  align-items: center;
}





.icon-contact h3 {
  font-size: 25px;
  font-weight: 700;
  color: #496FDA;
  margin: 0;
  font-family: 'Quicksand', sans-serif;
  text-transform: uppercase;
}



.contact-info {
flex-grow: 1;
padding-left: 20px;
}

.contact-info h4 {
color: #32395F;
font-size: 24px;
font-weight: 700;
margin: 0 0 5px 0;
}

.contact-info p {
color: #737791;
font-size: 16px;
margin: 0;
}

.contact-icons {
display: flex;
gap: 16px;
}

.contact-icon {
    border-radius: 8px;
    width: 44px;
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.contact-icon.phone {
    background-color: #496FDA;
}

.contact-icon.message {
    background-color: #FDC298;
}

.location-btn-container {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

.location-btn {
    background-color: #496FDA;
    color: white;
    width: 439px;
    height: 83px;
    border: none;
    border-radius: 12px;
    padding-top: 16px;
    padding-bottom: 16px;
    box-shadow: 0px 4px 40px 0px #496FDA87;
    font-size: 22px;
    font-weight: 700;
    align-items: center;
    text-align: center;
    justify-content: center;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background-color 0.3s;
}

.location-btn:hover {
    background-color: #3a5ab5;
}
.assistance-container {
width: 834px;
margin: 0 auto; 
padding: 40px 0;
position: relative;
overflow: hidden;
height: 160px; /* Add a fixed height */

}

.assistance-background {
position: absolute;
right: -50px; /* Adjust position as needed */
top: 50%;
transform: translateY(-50%) rotate(8.41deg);
width: 300px; /* Set explicit width */
height: 200px; /* Set explicit height */
z-index: 1;
}

.assistance-background svg {
width: 20%;
height: 20%;
}

.assistance-content {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #fff;
padding: 36px;
box-shadow: 0px 4px 20px 0px rgba(73, 109, 218, 0.1);
position: relative;
z-index: 2;
background-image: url("data:image/svg+xml,%3Csvg width='255' height='134' viewBox='0 0 255 134' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M62.7915 26.1843C70.2569 13.551 80.4692 2.58789 92.7239 -5.94882C104.979 -14.4855 118.984 -20.3927 133.775 -23.2629C148.565 -26.1331 163.788 -25.898 178.394 -22.5739C193 -19.2497 206.641 -12.9156 218.377 -4.00846L188.869 31.5842C182.445 26.7084 174.978 23.2412 166.983 21.4215C158.988 19.6019 150.654 19.4732 142.558 21.0444C134.462 22.6155 126.795 25.8491 120.087 30.5221C113.379 35.1951 107.789 41.1962 103.702 48.1117L62.7915 26.1843Z' fill='%23496FDA' fill-opacity='0.06'/%3E%3Cpath d='M236.148 115.022C228.207 127.39 217.587 137.99 205.019 146.093C192.452 154.196 178.236 159.608 163.352 161.956C148.469 164.304 133.272 163.532 118.809 159.693C104.347 155.855 90.964 149.041 79.5828 139.722L110.42 105.178C116.65 110.279 123.976 114.009 131.893 116.11C139.809 118.211 148.128 118.634 156.275 117.348C164.422 116.063 172.204 113.1 179.084 108.665C185.963 104.23 191.777 98.4268 196.124 91.657L236.148 115.022Z' fill='%23496FDA' fill-opacity='0.06'/%3E%3Cpath d='M101.92 73.8336L56.1626 122.235L44.1116 40.7487L101.92 73.8336Z' fill='%23496FDA' fill-opacity='0.06'/%3E%3Cpath d='M76.0271 77.6631L30.2693 126.065L18.2182 44.5783L76.0271 77.6631Z' fill='%23496FDA' fill-opacity='0.06'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right center;
background-size: 300px;
}
.assistance-text h3 {
color: #496FDA;
font-size: 30px;
font-weight: 600;
margin: 0 0 8px 0;
line-height: 120%;
letter-spacing: -0.6px;
}

.assistance-text p {
color: #737791;
font-size: 16px;
margin: 0;
font-weight: 400;
line-height: 140%;
letter-spacing: 0%;
}

.assistance-btn {
    background-color: #496FDA;
    color: white;
    min-width: 165px;
    height: 50px;
    border: none;
    border-radius: 12px;
    padding: 0 20px;
    box-shadow: 0px 4px 40px 0px #496FDA87;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.assistance-btn:hover {
background-color: #3a5ab5;
}
.pet-id-container {
gap: 16px;
margin: 0 auto;
box-shadow: 0px 4px 40px 0px #496FDA0F;
display: flex;
justify-content: center;
align-items: center;
height: 108px;
padding-top: 24px;
padding-bottom: 24px;
background-color: #fff;
}


.pet-id-image {
width: 79px;
height: 60px;
}   


@media (max-width: 956px) {
    html {
    font-size: 14px;
    }
    .info-section{
        padding-right: 40px;
        padding-left: 40px;
        padding-top: 12px;
    }
   
    
    .container {
    width: 100%;
    height: auto;
    transform: scale(0.95);
    transform-origin: top center;
    }
    
    
    
    
    
    .info-grid {
    width: 100%;
    }
    
    .info-box {
    width: 48%; /* Two columns */
    padding: 1rem;
    }
    
    .health-infos {
    
    }
    
    .additional-info {
    /*flex-direction: row;
    align-items: center;*/
    }
    
    /*.additional-info .box {
    width: 100%;
    margin-bottom: 1rem;
    }*/
    
    .contact {
    height: auto;
    }
    
    .location-btn {
    width: 100%;
    max-width: 400px;
    height: 70px; /* Reduced from 83px */
    font-size: 1.2rem; /* Reduced from 24px */
    }
    
    /* Position the shop and ID icons */
    .shop {
    position: fixed;
    background-color: #FFFFFF24;
    top: 1rem;
    left: 4rem;
    z-index: 1000;
    margin-top: 20px;
    }
    .shop i{
        color: white;
    }
    
    .id {
    position: fixed;
    top: 1rem;
    right: 5rem;
    z-index: 1000;
    }
    
    /* Adjust assistance container */
    .assistance-container {
    width: 100%;
    height: auto;
    }
    
    .assistance-content {
    padding: 2rem;
    }
    
    /* Make sure everything fits */
    body {
    overflow-x: hidden;
    }
}
    
    @media (max-width: 649px){
        /*.additional-info {
            flex-direction: column;
            align-items: center;
            }*/
            .line{
                font-size: 15px;
            }
            .additional-info .box {
            width: 100%;
            /*margin-bottom: 1rem;*/
            }
    }
    @media (max-width: 758px){
        .additional-info .box{
            flex: 0 0 calc(50% - 40px);
        }
    }
    @media (max-width: 501px){
        .location-btn {
            font-size: 13px;
            width: 350px;
            height: 52px;
        }
        .info-personel h3 {
            font-size: 24px; /* Reduced from 56px */
            }
            .info-personel p .type{
                font-size: 12px;
            }
            .info-personel p .status{
                font-size: 12px;
                font-weight: 500;
            }
            .info-personel .intro {
            font-size: 14px; 
            line-height: 100%;
            width: 340px;
            height: 36px;
            }
        .profile {
            width: 100%;
            height: 300px; /* Reduced from 352px */
            }
            
            .profile-img {
            margin-top: -140px; /* Reduced from -200px */
            }
            
            .profile-img img {
            width: 105px; /* Reduced from 200px */
            height: 105px; /* Reduced from 200px */
            border-width: 5px; /* Reduced from 10px */
            }
            .additional-info {
                gap: 12px;
                padding: 15px;
            }
            
            .additional-info .box {
                min-width: fit-content;
                padding: 15px;
            }
        .pet-id-image{
            width: 50px;
            height: 38px;
        }
    }
   
    
    @media (max-width: 771px){
        .info-grid{
            margin-left: -12px;
            
        }
        .info-box{
            width: 45%;
            height: 47px;
            justify-content: center;
            
        }
        .info-content {
            
            gap: 12px;
            width: 148px;
            
            }
            
            .info-content .infos h4{
                font-size: 14px;
            }
            .info-content .infos p{
                font-size: 12px;
            }
            .info-content .infos .date{
                font-size: 10px;
            }
            .info-content svg{
                width: 32px;
                height: 32px;
                gap: 10px;
               
            }
    }
    @media (max-width: 613px){
        .health-infos{
            width: 100%;
            /*gap: 6px;*/
            margin-top: -40px;
        }
        .info-personel .intro{
            line-height: 20px;
        }
        .health-infos .health .title{
            font-size: 14px;
        }
        .health-infos .health .answer{
            font-size: 14px;
        }
        .health-infos .health:not(:last-child)::after{
            content: "";
        }
    }
    @media (max-width: 526px){
        .layout {
    
            flex-direction: column;
            height: 1480px;
            /*padding: 2rem;*/
            transform: scale(0.9);
            transform-origin: top center;
            width: 100%;
            
            }
            .pets-infos{
                width: 100%;
                top: 0;
                left: 0;
                right: 0;
            }
            
        

.icon-contact {
  width: 65px;
  height: 65px;
  border-radius: 50%;
  padding: 0;
  background-color: #496FDA1F;
  display: flex;
  justify-content: center;
  align-items: center;
}


        .assistance-content{
            
            margin-top:-50px;
        }
        .assistance-container {
            border-radius: 12px;
        }
        .contact-info h4{
            font-size: 16px;
        }
        .contact-icons{
            gap: 4px;
        }
        .contact-icon{
            width: 35px;
            height: 35px;
        }
        
    }
    @media (max-width: 526px) {
        .assistance-container {
            border-radius: 12px;
        }
        .pet-id-container {
            border-radius: 12px;
            box-shadow: none;

        }
    }
    @media (max-width: 496px){
        .pets-infos{
            background-color: #fff;
        }
        .assistance-text h3{
            font-size: 20px;
        }
        .assistance-text p{
            font-size: 14px;
        }
        .assistance-btn {
    background-color: #496FDA;
    color: white;
    min-width: 165px;
    height: 50px;
    border: none;
    border-radius: 12px;
    padding: 0 20px;
    box-shadow: 0px 4px 40px 0px #496FDA87;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
        .info-grid{
            margin-top: -30px;
        }
        .info-personel .intro{
            width: 350px;
        }
        .health-infos{
            margin-top: 5px;
        }
    }
    @media (width: 360px){
        .info-personel .intro{
            width: 340px;
        }
        
    }
   
    /*@media (max-width: 430px){
        .layout{
            background-color: red;
        }
    }*/

/*@media (width: 344px){
    .info-personel .intro{
        width: 340px;
    }
    .assistance-container {
        border-radius: 12px;
        width: 90px;
        margin: 0 auto;
    }
    .assistance-container {
        border-radius: 12px;
        width: 330px;
    }
    
}*/

@media (max-width: 430px){
        
    .pets-infos{
        margin-top: -10px;
}
.assistance-container {
    border-radius: 12px;
    width: 360px;
}
.assistance-container .assistance-content{
    border-radius: 12px;
}
.assistance-text h3{
    font-size: 16px;
}
.assistance-text p{
    font-size: 11px;
}
.assistance-btn {
    background-color: #496FDA;
    color: white;
    min-width: 165px;
    height: 50px;
    border: none;
    border-radius: 12px;
    padding: 0 20px;
    box-shadow: 0px 4px 40px 0px #496FDA87;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.pets-infos {
    width: 122%;
    top: 0;
    left: 0;
    margin-right: 0;
    /* margin: 0 auto; */
    margin-left: -42px;
}
}
@media (min-width: 430px) and (max-width: 431px) {
    .pets-infos{
        width: 120%;
        margin-left: -43px;
        height: -30px;
        margin-top: -8px;
    }
    .info-grid{
        margin-left: -10px;
    }
    .profile-img img{
        width: 120px;
        height: 120px;
    }
    .assistance-container{
        width: 450px;
    }
}

/* Correction pour supprimer toute ligne ou soulignement sous les icônes */
.contact-icon {
  text-decoration: none !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.contact-icon i {
  text-decoration: none !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

a.contact-icon:link,
a.contact-icon:visited,
a.contact-icon:hover,
a.contact-icon:active {
  text-decoration: none !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}


.status-text.safe {
  color: #1FCC4D; /* vert */
}
.status-text.lost {
  color: #E53935; /* rouge */
}

#pet-weight::after {
    content: " Kg";
}