#main_container{
 
    background-color:#f1effd;
    border-radius: 32px 32px 0px 0px;
    padding: 32px 8%;
   
    display: flex;
    align-items: center;
    justify-content:center ;
    gap:32px;
   
    background-image: url(../img/background.png);
    background-size: cover;
    background-repeat: no-repeat;
   
    #contcts_container{
        width: 50%;
   
        h3{
            font-size: 1em;
            font-weight: 500;
        }
        p{
            font-size: 1rem;
            font-weight: 400;
            color: #010002;
            width: 100%;
        }
     
   
        h4{
            font-size: 1.2rem;
            font-weight: 500;
             color:#010002;
             margin-top: 16px;
        }
   
        #cards_container{
            display: flex;
            flex-direction: column;
            gap:12px;
            width:80%;
   
            margin:24px 0px;
   
            .contact-card{
                display: flex;
                align-items: center;
                gap:8px;
                box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.1);
                background-color: #ffff;
                padding: 18px 12px;
                border-radius: 8px;
                text-decoration: none;
   
                transition:box-shadow 0.3s ease ;
   
                &:hover{
                   box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.15);  
                }
   
                .cards-icon{
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    min-width: 40px;
                    min-height: 40px;
   
                    max-width: 40px;
                    max-height: 40px;
                    border-radius: 100%;
                    font-size: 1.2rem;
                }
                 .card-infos{
               
                        p {
                         
                            font-size: 1rem;
                            font-weight: 400;
                            line-height: 1rem;
                             color:#010002;
                             
                           
                        }
   
                        span{
                            font-size: 0.8rem;
                            font-weight: 500;
                             color:#475569;
                           
                        }
                    }
   
                    &.phone{
                        .card-icon{
                            background-color: #faf5ed;
                            color:#cd9c4b;
                        }
                    }
   
                       &.location{
                        .card-icon{
                            background-color: #dbeafe;
                            color:#3b82f6;
                        }
                    }
   
   
                      &.email{
                        .card-icon{
                            background-color: #ede9fe;
                            color:#8b5cf6;
                        }
                    }
   
                      &.whatsapp{
                        .card-icon{
                            background-color: #dcfce7;
                            color:#16a34a;
                        }
                    }
   
                }
            }
   
        .social_media_icons{
            display: flex;
            gap:12px;
            margin-top:12px;
   
            .icon-link{
                width:40px;
                height: 40px;
   
                display: flex;
                align-items: center;
                justify-content: center;
   
                text-decoration:none;
                color:#ffff;
                font-size: 1.2rem;
                border-radius: 100%;
                transition: background-color 0.3s ease;
   
                &.twitter{
                    background-color:#030712;
   
                    &:hover{
                        background-color: #030712d0;;
                    }
                }
   
               
                &.facebook{
                    background-color:#3b5998;
   
                    &:hover{
                        background-color: #030712d0;;
                    }
                }
   
                 &.linkedin {
                    background-color:#0e76a8;
   
                    &:hover{
                        background-color: #0e76a8d0;;
                    }
                }
   
                 &.instagram{
                    background-color:#dd2a7b;
   
                    &:hover{
                        background-color: #dd2a7bd0;;
                    }
                }
   
   
            }
        }
    }
    #contacts_form_container{
       #contacts_form_container{
        width: 104%;

        background-color: #ffff;
        padding: 24px;
        max-width: 800px;
        border-radius: 12px;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
       }
        h3{
            text-align: center;
            font-size: 1em;
            font-weight: 500;
            color:#010002;
            margin-bottom: 8px;
        }
   
        #contact_form{
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap:20px;
   
            .input-group{
        
                display: flex;
                flex-direction: column;
   
                label{
                 font-size: 0.9rem;
                 color:#475569;
                 font-weight: 500;
                }
   
                input, textarea{
                    padding: 12px;
                    border:1px solid #c7d1dc;
                    border-radius: 8px;
                    font-size:0.9rem;
                    outline:none;
                    resize: none;
   
                    &.focus{
                        outline: 1px solid var(--primary-color-1);
                    }
                }
   
                &:nth-child(3){
                    grid-column: 1 / 3;
   
                }
                &:nth-child(4){
                    grid-column: 1 / 3;
                }
            }



            button{
                grid-column: 1 / 3;
                padding: 14px 20px;
                background:linear-gradient(190deg, #C8102E 0%, #012169 100%);
                color:#ffff;
                font-size: 16px;
                font-weight: 600;
                border-radius: 8px;
   
                transition: background-color 0.3s ease;
                cursor:pointer;
   
                &:hover{
                    background-color: var(--primary-color-2);
                }
            }
        }
    }
  }
   
  .page-title h2{
    text-align: center;
    max-width: 800px;
    margin: 0 auto; /* centraliza o bloco também */
    padding: 20px;
  }
    .page-title p{
      font-size:1.25em ;
    text-align: center;
    max-width: 800px;
    margin: 0 auto; /* centraliza o bloco também */
    padding: 20px;
  }

  .page-title{
    background-color: #012169;
    color: white;
  }
   
  
.mapa{
 padding:0px 0px 50px;
}

#main_container {
  display: flex;
  gap: 32px;
}

/* MOBILE */
@media (max-width: 900px) {
  #main_container {
    flex-direction: column;
    padding: 32px 16px;
  }
}

#contcts_container,
#contacts_form_container {
  width: 100%;
}

@media (max-width: 768px) {
  #contact_form {
    grid-template-columns: 1fr;
  }

  #contact_form .input-group:nth-child(3),
  #contact_form .input-group:nth-child(4),
  #contact_form button {
    grid-column: auto;
  }
  .input-group label{
    width: 50%;
  }
}

@media (max-width: 600px) {
  #cards_container {
    width: 100%;
  }

  .contact-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
}

.mapa iframe {
  width: 100%;
  height: 300px;
}

@media (min-width: 768px) {
  .mapa iframe {
    height: 560px;
  }
}