.contact-main {
    padding: 86px 24px 64px ;
}
.contact {
    border: 1px solid #00000033;
    padding: 0;
   margin-bottom: 74px;
    border-radius: 20px;
    box-shadow: 0px 141px 200px -80px rgba(25, 58, 75, 0.3);
  display: flex;
  justify-content: space-between;
  gap: 24px;
.contact-info {
        padding: 64px;
        width: 60%;
}
    h1{
        font-size: 54px;
        font-weight: 700;
        span {
            color: #EF4444;
        }
    }
    p{
        font-size: 14px;
        font-weight: 400;
        line-height: 24px;
    }
}

form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 24px;
    .input {
        height: 50px;
        outline: none;
        border: 1px solid #00000033;
        background: #fff;
        padding: 0 24px;
    }
    button {
        height: 50px;
        background-color: var( --color-green);
        border-radius: 12px;
        border: 1px solid transparent;
        font-weight: 600;
        color: #fff;
        font-size: 15px;
        text-transform: uppercase;
        cursor: pointer;
        transition: 0.3s linear;
        margin-top: 4px;
        &:hover {
            background-color: transparent;
            border: 2px solid var( --color-green);
            color: black;
        }
    }
}
.social-wrapper {
    display: grid;
    grid-template-columns: repeat(2,1fr);
place-items: center;
 row-gap: 24px;
   
    margin-top: 24px;
    .social-row {

        .social{
                   margin-top: 20px;
            display: flex;
            align-items: center;
            gap: 12px;
        }
    }
}
.map-wrapper {
    position: relative;
    .bg-color {
        background: #183A4A;
        width: 330px;
 border-top-right-radius: 20px;
 border-bottom-right-radius: 20px;
        height: 100%;
    }
}
.map {
    height: 500px;
    width: 370px;
    position: absolute;
    top: 50%;
    left: -150px;
    transform: translateY(-45%);
    img {
        max-width: 100%;
        height: auto;
        object-fit: cover;
    }
}
.map-img {
    position: relative;
    .mark-icon {
                position: absolute;
        bottom: 165px;
        right: 45px;
    }
}
@media  (max-width: 1100px) {
    .contact {
        flex-direction: column;
        border: none;
        box-shadow: none;
        .contact-info {
            padding: 56px 24px;
            width: 100%;
        }
    }
    .bg-color {
        display: none;
    }
    .map {
       position: relative;
       top: 0;
       bottom: 0;
       transform: translateY(0);
       width: 100%;
       height: 300px;
       left: 0;

       img{
        height: 300px;
        width: 100%;
        object-fit: cover;
       }
    }
    .wrapper {

        .container {
            padding: 0;
        }
    }
    .contact-main {
        .cta-section {
           display: none;
        }
    }
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}