#contacts-section 
{
    padding: 0 1.25rem 1.25rem 1.25rem; /* 0 20px 20px 20px */
    text-align: center;
    max-width: 87.5rem; /* 1400px */
    margin: 0 auto; 
}

#contacts-section h2 
{
    margin-top: 1rem; /* 16px */
    font-size: 2rem; /* 32px */
    margin-bottom: 1.5rem; /* 24px */
}

.contacts 
{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13.75rem, 1fr)); /* 220px */
    gap: 1.875rem; /* 30px */
    margin-bottom: 2.5rem; /* 40px */
    max-width: 62.5rem; /* 1000px */
    margin-left: auto;
    margin-right: auto;
}

.contact-item 
{
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.3s ease;
}

.contact-icon 
{
    background: white;
    padding: 1.25rem; /* 20px */
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    font-size: 1.5rem; /* 24px */
    transition: all 0.3s ease;
}

.contact-item:hover .contact-icon 
{
    background: black;
    color: white;
}

.contact-item:nth-child(2):hover .contact-icon 
{
    background: #1877F2;
}

.contact-item:nth-child(3):hover .contact-icon 
{
    background: #28A745;
}

.contact-item:nth-child(4):hover .contact-icon 
{
    background: #DC3545;
}

.contact-item:hover a, .contact-item:hover p 
{
    color: black;
}

.contact-item:hover a 
{
    text-decoration: underline;
}

.contact-item a, .contact-item p 
{
    margin-top: 0.625rem; /* 10px */
    color: #666;
    font-size: 1rem; /* 16px */
    text-decoration: none;
    transition: color 0.3s ease;
}

/* ------------------------------------------------------------------------------------- */

.map 
{
    width: 100%;
    height: 50vh;
    max-height: 90vh;
    border-radius: 12px; 
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); 
}

iframe 
{
    width: 100%;
    height: 100%;
    border: none;
}

/* ------------------------------------------------------------------------------------- */

@media (max-width: 37.5rem) /* 600px */ 
{
    #contacts-section h2  
    {
        font-size: 1.5rem; /* 24px */
    }

    .contact-icon 
    {
        font-size: 1.3125rem; /* 21px */
        padding: 1.0625rem; /* 17px */
    }

    .contact-item a, .contact-item p 
    {
        font-size: 0.8125rem; /* 13px */
    }
}

@media (min-width: 37.5625rem) and (max-width: 56.25rem) /* 601px - 900px */ 
{
    #contacts-section h2 
    {
        font-size: 1.75rem; /* 28px */
    }

    .contact-icon 
    {
        font-size: 1.375rem; /* 22px */
        padding: 1.125rem; /* 18px */
    }

    .contact-item a, .contact-item p 
    {
        font-size: 0.875rem; /* 14px */
    }

    .contacts 
    {
        gap: 1.5625rem; /* 25px */
    }
}

@media (min-width: 56.3125rem) and (max-width: 75rem) /* 901px - 1200px */
{
    #contacts-section h2 
    {
        font-size: 2rem; /* 32px */
    }

    .contact-icon 
    {
        font-size: 1.4375rem; /* 23px */
        padding: 1.1875rem; /* 19px */
    }

    .contact-item a, .contact-item p 
    {
        font-size: 0.9375rem; /* 15px */
    }
}

@media (min-width: 90.0625rem) /* 1441px */
{
   #contacts-section h2 
   {
     font-size: 2.5rem; /* 40px */
   }

   .contact-icon 
   { 
      font-size: 1.5625rem; /* 25px */
      padding: 1.3125rem; /* 21px */
   }

   .contact-item a, .contact-item p 
   {
     font-size: 1.0625rem; /* 17px */
   }
}

/* ------------------------------------------------------------------------------------- */

@-webkit-keyframes bounce 
{
    0%, 20%, 50%, 80%, 100% 
    {
        -webkit-transform: translateY(0);
    }
    40% 
    {
        -webkit-transform: translateY(-1.25rem); /* -20px */
    }
    60% 
    {
        -webkit-transform: translateY(-0.625rem); /* -10px */
    }
}

@keyframes bounce 
{
    0%, 20%, 50%, 80%, 100% 
    {
        transform: translateY(0);
    }
    40% 
    {
        transform: translateY(-1.25rem); /* -20px */
    }
    60% 
    {
        transform: translateY(-0.625rem); /* -10px */
    }
}

.contact-item:hover .contact-icon 
{
    -webkit-animation: bounce 1s;
    animation: bounce 1s;
}