@import url('../default/style.css');
hr {
    width: 80%;
    margin: auto;
    margin-bottom: 2rem;
}
.contact-sec0 {
    width: 100%;
    margin-bottom: 7rem;
}
.contact-sec0>h1 {
    color: var(--primary-color);
    font-size: 3rem;
    text-align: center;
    width: 80%;
    margin: auto;
    margin-top: 3rem;
}
.contact-sec0>p {
    color: var(--text2-color);
    text-align: center;
    width: 80%;
    margin: auto;
    margin-bottom: 4rem;
}
.contact-sec0>.contact-container {
    width: 80%;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
}

.contact-sec0>.contact-container>.contact-details,
.contact-sec0>.contact-container>.contact-form {
    width: 50%;
    
}
/* Contact Details styling  */

.contact-sec0>.contact-container>.contact-details>.contact-information {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-bottom: 5rem;
}

.contact-sec0>.contact-container>.contact-details>.contact-information>h4 {
    font-size: 4rem;
}

.contact-sec0>.contact-container>.contact-details>.contact-information>h3 {
    font-size: 2rem;
}

.contact-sec0>.contact-container>.contact-details>.contact-information>h3>a {
    text-decoration: none;
    color: black;
}

/* End of Contact Form styling  */



/* Contact Form styling  */
.contact-sec0>.contact-container>.contact-form>form>.contact-formdata {
    display: flex;
    flex-direction: column;
}

.contact-sec0>.contact-container>.contact-form>form>.contact-formdata>label {
    font-size: 1.4rem;
    color: var(--primary-color);
    margin-bottom: 0.7rem;
}

.contact-sec0>.contact-container>.contact-form>form>.contact-formdata>input {
    padding: 1rem;
    border: 2px var(--primary-color) solid;
    outline: none;
    border-radius: 0.8rem;
    margin-bottom: 1rem;
}

.contact-sec0>.contact-container>.contact-form>form>.contact-formdata>textarea {
    padding: 1rem;
    border: 2px var(--primary-color) solid;
    outline: none;
    border-radius: 0.8rem;
    height: 20vh;
    margin-bottom: 2rem;
}
.contact-sec0>.contact-container>.contact-form>form>.contact-formdata>.contact-submit {
    background-color: var(--primary-color);
    border: 1px solid black;
    text-transform: capitalize;
    color: white;
}

/* end of Contact Form styling  */

/* Contact Section 0 End */

/* Contact Section 1 Social */

.contact-sec1 {
    width: 100%;
}

.contact-sec1>.contact-sec1-container{
    width: 80%;
    margin: auto;
    text-align: center;
}

.contact-sec1>.contact-sec1-container>h2 {
    font-size: 2.4rem;
    color: var(--primary-color);
}

.contact-sec1>.contact-sec1-container>.contact-sec1-socialtype {
    margin-bottom: 2rem;
}
.contact-sec1>.contact-sec1-container>.contact-sec1-socialtype>h3 {
    margin-bottom: 6rem;
    font-size: 2rem;
}
.contact-sec1>.contact-sec1-container>.contact-sec1-socialtype>.contact-sec1-socialmedia>.contact-sec1-medialink {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}
.contact-sec1>.contact-sec1-container>.contact-sec1-socialtype>.contact-sec1-socialmedia {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
.contact-sec1>.contact-sec1-container>.contact-sec1-socialtype>.contact-sec1-socialmedia>.contact-sec1-medialink {
    text-decoration: none;
    color: black;
}
.contact-sec1>.contact-sec1-container>.contact-sec1-socialtype>.contact-sec1-socialmedia>.contact-sec1-medialink>img {
width: 50px;
}
.contact-sec1>.contact-sec1-container>.contact-sec1-socialtype>.contact-sec1-socialmedia>.contact-sec1-medialink>.contactimg-in {
width: 75px;
}

.contact-sec1>.contact-sec1-container>.contact-sec1-socialtype>.contact-sec1-socialmedia>.contact-sec1-medialink>h3 {
    font-size: 2.3rem;
}

.contact-sec1>.contact-sec1-container>.contact-sec1-socialtype>.contact-sec1-socialmedia>.contact-sec1-medialink>.contact-socailfb {
    color: rgb(0, 80, 252);
}

.contact-sec1>.contact-sec1-container>.contact-sec1-socialtype>.contact-sec1-socialmedia>.contact-sec1-medialink>.contact-socailwa {
    color: rgb(30, 148, 0);
}

.contact-sec1>.contact-sec1-container>.contact-sec1-socialtype>.contact-sec1-socialmedia>.contact-sec1-medialink>.contact-socailin {
    color: rgb(252, 0, 155);
}
.contact-sec1>.contact-sec1-container>.contact-sec1-socialtype>.contact-sec1-socialmedia>.contact-sec1-medialink>.contact-socailli {
    color: rgb(0, 139, 252);
}

.contact-sec1>.contact-sec1-container>.contact-sec1-socialtype>.contact-sec1-socialmedia>.contact-sec1-medialink>.contact-socailyt {
    color: rgb(255, 0, 0);
}

.contact-sec1>.contact-sec1-container>.contact-sec1-socialtype>.contact-sec1-socialmedia>.contact-sec1-medialink>.contact-socailx {
    color: rgb(0, 0, 0);
}

/* end of section 1 */
/* sec 2 Map */
.contact-sec2 {
    width: 100%;

}


.contact-sec2>.contact-sec2-container {
    width: 80%;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.contact-sec2>.contact-sec2-container>.contactdata,
.contact-sec2>.contact-sec2-container>.contactmap{
    width: 50%;
}

.contact-sec2>.contact-sec2-container>.contactdata>h2 {
    font-size: 2.3rem;
    color: var(--primary-color);
    margin-bottom: 2rem;
}

/* Media query */
@media (max-width: 768px) {
    .contact-sec0 > .contact-container {
        flex-direction: column;
        align-items: stretch;
    }

    .contact-sec0 > .contact-container > .contact-details,
    .contact-sec0 > .contact-container > .contact-form {
        width: 100%;
        margin-bottom: 2rem;
    }

    .contact-sec0 > h1 {
        font-size: 2.5rem;
        width: 90%;
    }

    .contact-sec0 > p {
        font-size: 1rem;
        width: 90%;
    }

    .contact-sec1>.contact-sec1-container>.contact-sec1-socialtype>.contact-sec1-socialmedia {
        
        align-items: center;
        flex-direction: column;
        gap: 3rem;
    }
    .contact-sec0 > .contact-container > .contact-details > .contact-information > h4 {
        font-size: 3rem;
    }

    .contact-sec0 > .contact-container > .contact-details > .contact-information > h3 {
        font-size: 1.5rem;
    }

    .contact-sec0 > .contact-container > .contact-form > form > .contact-formdata > label {
        font-size: 1.2rem;
    }

    .contact-sec0 > .contact-container > .contact-form > form > .contact-formdata > input,
    .contact-sec0 > .contact-container > .contact-form > form > .contact-formdata > textarea {
        padding: 0.8rem;
    }
    .contact-sec2>.contact-sec2-container {
        flex-direction: column;
    }
    .contact-sec2>.contact-sec2-container>.contactdata,
    .contact-sec2>.contact-sec2-container>.contactmap {
        width: 100%;
    }
    .contact-sec2>.contact-sec2-container>.contactmap>iframe {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .contact-sec0 > h1 {
        font-size: 2rem;
        width: 100%;
    }

    .contact-sec0 > p {
        font-size: 0.9rem;
        width: 100%;
    }

    .contact-sec0 > .contact-container > .contact-details > .contact-information > h4 {
        font-size: 2.5rem;
    }

    .contact-sec0 > .contact-container > .contact-details > .contact-information > h3 {
        font-size: 1.2rem;
    }

    .contact-sec0 > .contact-container > .contact-form > form > .contact-formdata > label {
        font-size: 1rem;
    }

    .contact-sec0 > .contact-container > .contact-form > form > .contact-formdata > input,
    .contact-sec0 > .contact-container > .contact-form > form > .contact-formdata > textarea {
        padding: 0.6rem;
        font-size: 0.9rem;
    }

    .contact-sec0 > .contact-container > .contact-form > form > .contact-formdata > .contact-submit {
        width: 100%;
        padding: 1rem;
        font-size: 1.2rem;
    }
}