.contact{
    padding: 110px 30px 30px 30px;
    background-color: #ddd;

    .contact-cont{
        display: flex;
        justify-content: center;
        align-content: center;
        gap: 30px;
        padding: 20px;
        border: 1px solid #bbbbbb;
        border-radius: 20px;

        .image{
            align-items: center;
            width: 60%;

            img{
                border-radius: 15px;
                
                width: 100%;
            }
        }
        .contact-info{
            width: 40%;
            align-items: center;
            background-color: #fff;
            height: fit-content;
            padding: 30px;
            border-radius: 15px;
            
            h2{
                text-align: center;
                font-size: 45px;
                font-weight: 500;
                margin-bottom: 30px;
            }
            .info-box{
                display: flex;
                gap: 40px;

                form{

                    label{
                        font-size: 15px;
                        color: rgb(97, 97, 97);
                        font-weight: 600;
                    }
                    input, textarea{
                        margin-top: 10px;
                        margin-bottom: 20px;
                        padding: 10px 10px;
                        width: 100%;
                        box-sizing: border-box;
                        border: none;
                        outline: none;
                        font-size: 16px;
                        border-bottom: 2px solid black;
                    }
                    button{
                        border: none;
                        outline: none;
                        color: white;
                        background-color: black;
                        padding: 15px 30px;
                        width: 100%;
                        border-radius: 100px;
                        font-size: 16px;
                        margin-bottom: 20px;    
                    }
                }
                .socials{
                    p{
                        margin-top: 10px;
                        margin-bottom: 30px;
                        font-size: 15px;
                        color: rgb(97, 97, 97);
                        font-weight: 600;
                    }
                    a{
                        color: orangered;
                        font-size: 16px;
                    }
                    span{
                        font-size: 17px;
                    }
                }
            }
        }
    }
}


@media (max-width: 1000px) {
    .contact{
        .contact-cont{
            flex-direction: column;

            .image{
                width: 100%;
            }
            .contact-info{
                width: 100%;
                height: auto;

                .info-box{
                    
                    form{
                        input, textarea{
                            
                        }
                    }
                }
            }
        }
    }
}


@media (max-width: 600px) {
    .contact{
        padding: 110px 10px 10px 10px;
        .contact-cont{
            padding: 10px;
            .contact-info{
                .info-box{
                    flex-direction: column;
                    gap: 20px;
                    form{
                        input, textarea{
                            display: block;
                        }
                    }

                    .socials{
                        p{
                            margin-bottom: 15px;
                        }
                    }
                }

            }
        }
    }
    
}