@import url('https://fonts.googleapis.com/css2?family=Elms+Sans:ital,wght@0,100..900;1,100..900&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Elms+Sans:ital,wght@0,100..900;1,100..900&family=Gasoek+One&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Elms Sans", sans-serif;
}










/* =================================
        CONTACT SECTION
================================= */

.contact-section {

    width:100%;
    padding:80px 0;

    background:
    linear-gradient(180deg,#f5f9ff,#ffffff);

}


.contact-container {

    width:82%;
    margin:auto;

    display:grid;

    grid-template-columns:0.9fr 1fr;

    gap:45px;

    align-items:center;

}



/* =================================
        CONTACT INFO
================================= */


.section-tag {

    color:#2563eb;

    font-size:12px;

    font-weight:700;

    letter-spacing:2.5px;

}



.contact-info h2 {

    font-size:34px;

    line-height:1.2;

    margin:15px 0;


    background:
    linear-gradient(
        90deg,
        #2563eb,
        #ec4899,
        #f97316
    );

    -webkit-background-clip:text;

    background-clip:text;

    color:transparent;

}



.contact-text {

    font-size:15px;

    color:#555;

    line-height:1.7;

    max-width:450px;

    margin-bottom:25px;

}





/* CONTACT BOX */


.contact-box {

    display:flex;

    align-items:center;

    gap:15px;


    padding:16px 18px;

    margin-bottom:15px;


    background:#fff;

    border-radius:16px;


    box-shadow:
    0 8px 25px rgba(0,0,0,.07);


    transition:.35s;

}



.contact-box:hover {

    transform:translateX(8px);

    box-shadow:
    0 12px 30px rgba(37,99,235,.15);

}



.contact-icon {

    width:45px;

    height:45px;


    display:flex;

    justify-content:center;

    align-items:center;


    border-radius:50%;


    flex-shrink:0;


    color:white;

    font-size:16px;


    background:
    linear-gradient(135deg,#2563eb,#ec4899);

}



.contact-box h4 {

    font-size:16px;

    margin-bottom:5px;

    color:#111827;

}



.contact-box p {

    font-size:13px;

    color:#666;

    line-height:1.5;

    margin:0;

}





/* SOCIAL ICONS */


.social-links1 {

    display:flex;

    gap:12px;

    margin-top:20px;

}



.social-links1 a {

    width:38px;

    height:38px;


    display:flex;

    align-items:center;

    justify-content:center;


    border-radius:50%;


    background:#ff2706;

    color:white;


    font-size:14px;


    transition:.35s;

}



.social-links1 a:hover {

    background:#2563eb;

    transform:translateY(-5px);

}





/* =================================
              MAP
================================= */


.map-box {


    width:100%;

    height:500px;


    padding:12px;


    background:white;


    border-radius:25px;


    border:2px solid rgba(37,99,235,.25);


    box-shadow:

    0 15px 40px rgba(0,0,0,.12);


    transition:.4s;


}



.map-box:hover {

    transform:translateY(-8px);

    border-color:#2563eb;

}



.map-box iframe {


    width:100%;

    height:100%;


    border:0;


    border-radius:18px;

}






/* =================================
          LARGE TABLET
================================= */


@media(max-width:1100px){


.contact-container {

    width:88%;

    gap:35px;

}



.contact-info h2 {

    font-size:30px;

}



.map-box {

    height:450px;

}


}






/* =================================
              TABLET
================================= */


@media(max-width:850px){


.contact-container {


    width:90%;


    grid-template-columns:1fr;


    gap:40px;


}



.contact-info {

    text-align:left;

}



.map-box {

    height:400px;

}



}







/* =================================
              MOBILE
================================= */


@media(max-width:600px){


.contact-section {

    padding:55px 0;

}



.contact-container {

    width:92%;

}



.section-tag {

    font-size:11px;

}



.contact-info h2 {

    font-size:26px;

}



.contact-text {

    font-size:14px;

}



.contact-box {

    padding:13px;

    gap:12px;

    border-radius:14px;

}



.contact-icon {

    width:40px;

    height:40px;

    font-size:14px;

}



.contact-box h4 {

    font-size:15px;

}



.contact-box p {

    font-size:12px;

}



.social-links1 a {

    width:35px;

    height:35px;

}



.map-box {

    height:300px;

    padding:8px;

    border-radius:18px;

}



.map-box iframe {

    border-radius:12px;

}


}







/* =================================
          EXTRA SMALL PHONE
          320px - 380px
================================= */


@media(max-width:380px){


.contact-info h2 {

    font-size:23px;

}



.contact-box {

    padding:12px;

}



.contact-icon {

    width:36px;

    height:36px;

}



.map-box {

    height:260px;

}


}