#page {
    width: 75% !important;
    margin: auto;
    line-height: 30px;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

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

/*--------------------------- content ------------------------------*/

#page .contact-us-content {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    gap: 20px;
}

    #page .contact-us-content .col-1 {
        grid-area: 1 / 1 / 4 / 2;
        width: 100%;
    }

    #page .contact-us-content .col-2-1 {
        grid-area: 1 / 2 / 2 / 3;
    }

    #page .contact-us-content .col-2-2 {
        grid-area: 2 / 2 / 3 / 3;
    }

    #page .contact-us-content .col-2-3 {
        grid-area: 3 / 2 / 4 / 3;
    }

    #page .contact-us-content .col-3-1 {
        grid-area: 1 / 3 / 3 / 4;
    }

    #page .contact-us-content .col-3-2 {
        grid-area: 3 / 3 / 4 / 4;
    }

    /*====col-1=====*/

    #page .contact-us-content .col-1 .inputs input,
    #page .contact-us-content .col-1 .inputs button,
    #page .contact-us-content .col-1 .inputs textarea {
        background-color: #f0f0f0;
        border: none;
        outline: none;
        font-family: vazir;
        padding: 8px 5%;
        width: 100%;
        border-radius: 7px;
        resize: none;
    }

    #page .contact-us-content .col-1 .inputs input {
        margin: 3px 0px 10px 0px;
    }

        #page .contact-us-content .col-1 .inputs button {
            background-color: var(--second-color);
            color: white;
            transition: 0.15s;
            margin-bottom: 0px;
        }

            #page .contact-us-content .col-1 .inputs button:hover {
                cursor: pointer;
                box-shadow: 0px 0px 7px #CCCCCC;
            }

        #page .contact-us-content .col-1 .inputs input::placeholder,
        #page .contact-us-content .col-1 .inputs textarea::placeholder {
            color: #CCCCCC;
        }

    /*====col-2=====*/

    #page .contact-us-content :is(.col-2-1, .col-2-2, .col-2-3) {
        background-color: #f0f0f0;
        border-radius: 7px;
        height: 100%;
        position: relative;
    }

        #page .contact-us-content :is(.col-2-1, .col-2-2, .col-2-3) .content {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            row-gap: 10px;
            align-items: center;
            justify-content: center;
            text-align: center;
        }

        #page .contact-us-content :is(.col-2-1, .col-2-2, .col-2-3) .icon {
            position: absolute;
            width: 35px;
            height: 35px;
            background-color: var(--second-color);
            border-radius: 7px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            top: 10px;
            right: 10px;
        }

    /*====col-3=====*/

    #page .contact-us-content .col-3-1 iframe {
        width: 100% !important;
        height: 100% !important;
        border: none !important;
        border-radius: 7px;
    }

    #page .contact-us-content .col-3-2 {
        background-color: #f0f0f0;
        border-radius: 7px;
    }

        #page .contact-us-content .col-3-2 .item {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            row-gap: 10px;
            align-items: center;
            justify-content: center;
        }

            #page .contact-us-content .col-3-2 .item .social-icons {
                display: flex;
                align-items: center;
                gap: 10px;
            }

                #page .contact-us-content .col-3-2 .item .social-icons .social-icon {
                    background-color: white;
                    border-radius: 50%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    color: var(--caption-color);
                    width: 35px;
                    height: 35px;
                    font-size: 18px;
                    transition: 0.15s;
                }

                    #page .contact-us-content .col-3-2 .item .social-icons .social-icon:hover {
                        color: var(--second-color);
                    }

@media screen and (max-width: 1280px) {
    #page {
        width: 95% !important;
    }
}


@media screen and (max-width: 500px) {
    #page section {
        width: 100% !important;
        padding: 0px 10px;
    }

    #page {
        width: 100% !important;
    }

        /*======== responsive styles =======*/

        #page span.first-color {
            font-size: 14px !important;
            font-weight: bold;
        }

        #page .title p {
            font-size: 14px !important;
        }

        #page .contact-us-content {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        #page .title,
        #page #nameLabel,
        #page .contact-us-content {
            padding: 0px 15px;
            width: 100% !important;
        }

            #page .contact-us-content :is(.col-2-1, .col-2-2,.col-2-3, .col-3-2) {
                height: 180px;
            }

            #page .contact-us-content .col-3-1 {
                height: 360px;
            }

            #page .contact-us-content .col-3-2 .item .social-icons .social-icon {
                color: var(--second-color);
                width: 45px;
                height: 45px;
                font-size: 20px;
            }
}
.red-alert-contact {
    border: 1px solid red !important;
}