@font-face {
    font-family: "OpenSans";
    src: url("../resources/fonts/open_sans.ttf");
    font-display: swap;
}

@font-face {
    font-family: "inter_regular";
    src: url("../resources/fonts/Inter_Regular.ttf");
    font-display: swap;
}

@font-face {
    font-family: "inter_bold";
    src: url("../resources/fonts/Inter_Bold.ttf");
    font-display: swap;
}

@font-face {
    font-family: "poppins_regular";
    src: url("../resources/fonts/Poppins_Regular.ttf");
    font-display: swap;
}

@font-face {
    font-family: "poorich";
    src: url("../resources/fonts/POORICH.TTF");
    font-display: swap;
}

:root {
    --colorBg: #E6E8E6;
    --colorText: #3F403F;
    --colorMain: #475841;
    --colorOther: #9FB8AD;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

body {
    background: var(--colorBg);
}

/* banner start  */


.contact-sec1-div1 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: auto;
}

.contact-sec1-div2 {
    width: 100%;
    background-image: url("../resources/portfolio/5.webp");
    background-size: cover;
    background-position: center;
    margin-bottom: 1rem;
    height: 20rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.banner-span {
    font-family: "Inter_Regular";
    color: white;
    font-size: 3.5rem;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.411);
}

.contact-sec1-div3 {
    width: fit-content;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 18.5rem;
    column-gap: 1rem;
    background-color: #E6E8E6;
    border-radius: 30px;
    padding: 0.8rem 2rem;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.banner-span2 {
    font-family: "OpenSans";
    color: var(--colorText);
    font-size: 0.9rem;
}

.banner-span2 a {
    color: var(--colorText);
    text-decoration: none;
}

.banner-icon {
    width: 25px;
}

@media screen and (min-width:300px) and (max-width:449px) {
    .contact-sec1-div2 {
        height: 14rem;
    }

    .banner-span {
        font-size: 2rem;
    }

    .contact-sec1-div3 {
        padding: 0.6rem 1rem;
        top: 12.7rem;
        column-gap: 0.5rem;
    }

    .banner-icon {
        width: 20px;
    }

    .loading-container {
        padding: 20px;
    }

    .loading-text {
        font-size: 1rem;
    }

    .loading-progress {
        width: 150px;
    }
}

@media screen and (min-width:450px) and (max-width:549px) {
    .contact-sec1-div2 {
        height: 14rem;
    }

    .banner-span {
        font-size: 2.5rem;
    }

    .contact-sec1-div3 {
        padding: 0.6rem 1rem;
        top: 12.7rem;
        column-gap: 0.5rem;
    }

    .banner-icon {
        width: 20px;
    }
}

@media screen and (min-width:550px)and (max-width:949px) {
    .contact-sec1-div2 {
        height: 14rem;
    }

    .banner-span {
        font-size: 2.8rem;
    }

    .contact-sec1-div3 {
        padding: 0.6rem 1rem;
        top: 12.7rem;
        column-gap: 0.5rem;
    }

    .banner-icon {
        width: 20px;
    }
}

@media screen and (min-width:950px) and (max-width:1200px) {
    .contact-sec1-div2 {
        height: 18rem;
    }

    .banner-span {
        font-size: 3rem;
    }

    .contact-sec1-div3 {
        padding: 0.6rem 1rem;
        top: 16.7rem;
        column-gap: 0.5rem;
    }

    .banner-icon {
        width: 20px;
    }
}

/* banner end  */

/* contact us start */

.contact-sec2-div1 {
    max-width: 1600px;
    width: 96%;
    margin: auto;
    display: flex;
    flex-direction: column;
    margin-top: 2.5rem;
}

.contact-sec2-headings h4 {
    font-family: "poppins_regular";
    font-weight: 400;
    color: var(--colorMain);
    font-size: 0.8rem;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.contact-sec2-headings h2 {
    font-family: "inter_regular";
    color: var(--colorText);
    font-size: 1.5rem;
    margin: 0;
    text-align: left;
}

.contact-sec2-headings h2 span {
    font-weight: normal;
}

.contact-sec2-headings p {
    font-family: "poppins_regular";
    color: var(--colorText);
    font-size: 1rem;
    /* font-size: 15px; */
    line-height: 1.7;
    margin: 15px 0;
    text-align: justify;
}


@media screen and (min-width:1100px) {
    .contact-sec2-headings h4 {
        font-weight: 400;

    }

    .contact-sec2-headings h2 {
        font-size: 1.8rem;

    }

}

@media screen and (min-width:1400px) {
    .contact-sec2-headings h4 {
        font-weight: 400;
        font-size: 1rem;
        margin-bottom: 5px;
    }

    .contact-sec2-headings h2 {
        font-size: 2.2rem;
        margin: 0;
        text-align: left;
    }


}

.contact-icon1 {
    width: 30px;
    height: 30px;

}

.contact-sec2-div1 {
    display: flex;
    flex-direction: column;

}

.contact-sec2-div2 {
    margin-bottom: 1rem;

}

.contact-sec2-div3 {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    margin-top: 1rem;
}

.contact-sec2-div4 {
    margin-left: 1rem;
    display: flex;
    flex-direction: column;
}

.contact-span1 {
    font-family: "poppins_regular";
    font-size: 0.9rem;
    color: var(--colorText);
}

.contact-span2 {
    font-family: "poppins_regular";
    font-weight: 600;
    color: var(--colorText);
}

.contact-sec2-div6 {
    margin-top: 1rem;
}

.contact-sec2-div7 {
    display: flex;
    flex-direction: row;
    column-gap: 1rem;
    margin-top: 0.5rem;
}




.contact-sec2-div8 {
    margin-bottom: 1rem;

}



.contact-sec2-div9 {
    display: flex;
    margin: auto;
    flex-direction: row;
    row-gap: 2rem;
    margin-top: 1rem;
    background-color: #475841;
    height: fit-content;

}

.contact-sec2-div10 {
    width: fit-content;
    width: 100%;
    margin: auto;
    margin-bottom: 1rem;


}

.contact-sec2-div11 {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    /* width: 90%; */

}

.contact-span3 {
    font-family: "inter_bold";
    font-size: 1.8rem;
    color: white;
    margin-left: 0.5rem;


}

.contact-sec2-div12 {
    margin-top: 1rem;
    width: 96%;
    margin: auto;
    /* margin-left: 0.4rem; */
}

.contact-sec2-div13 {
    display: flex;
    margin: auto;
    flex-direction: column;
    row-gap: 2rem;
    margin-bottom: 2rem;
    margin-top: 1rem;
    overflow: hidden;
    /* background-color: red; */
    color: white;
}

.contact-sec2-div13 ::placeholder {
    color: rgba(255, 255, 255, 0.596);
    font-size: 0.8rem;


}

.contact-sec2-div13 :focus {
    color: white;
}

.contact-sec2-div14 ::placeholder {
    color: rgba(255, 255, 255, 0.596);
    font-size: 0.8rem;
}

.contact-sec2-div14 :focus {
    color: white;
}


.contact-sec2-div14 {
    display: flex;
    flex-direction: column;
    margin-bottom: 2rem;


}

.contact-sec2-div14 textarea {
    height: 6rem;
}

.contact-sec2-div15 {
    /* margin-top: 1rem; */
    display: flex;
    flex-direction: row;
    justify-content: end;
    align-items: end;
}


.contact-sec2-div15 button {
    background-color: white;
    color: #475841;
    border: none;
    font-family: "Poppins_Regular";
    letter-spacing: 2px;
    font-weight: bold;
}


/* CSS */
.button-24 {
    box-shadow: rgba(0, 0, 0, 0.1) 1px 2px 10px;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    font-size: 16px;
    /* line-height: 16px; */
    /* min-height: 40px; */
    outline: 0;
    padding: 4px 34px;
    text-align: center;
    text-rendering: geometricprecision;
    text-transform: none;
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
    vertical-align: middle;
}

.button-24:hover,
.button-24:active {
    background-color: #9FB8AD;
    background-position: 0 0;
    color: var(--colorText);
    /* border: 2px solid var(--colorMain); */

}

.button-24:active {
    opacity: .5;
}


.contact-input1 {
    border: none;
    outline: none;
    padding: 4px;
    border-bottom: 1px solid white;
    background-color: transparent;
    font-family: "inter_regular";


}

.contact-input2 {
    width: 100%;
    border: none;
    outline: none;
    padding: 4px;
    border-bottom: 1px solid white;
    background-color: transparent;
    font-family: "inter_regular";
}








@media screen and (min-width:300px) and (max-width:350px) {
    .contact-sec2-div9 {
        row-gap: 0.8rem;


    }



}

@media screen and (min-width:400px) {
    .contact-sec2-div13 input {
        width: 48%;
        margin: auto;
    }

    .contact-sec2-div13 {
        flex-direction: row;
        column-gap: 1rem;

    }

}


@media screen and (min-width:759px) {
    .contact-sec2-div1 {
        display: flex;
        flex-direction: row;
        column-gap: 1rem;
    }

    .contact-sec2-div2 {
        width: 50%;
    }

    .contact-sec2-div8 {
        width: 50%;

    }

    .contact-sec2-div9 {
        margin-top: 0;

    }

    .contact-sec2-div10 {
        width: 98%;
        height: 31rem;

    }

    .contact-sec2-div13 {
        margin-bottom: 3rem;
    }

    .contact-sec2-div14 {
        margin-bottom: 3rem;
    }


    .contact-sec2-div14 textarea {
        height: 7rem;
    }




}


@media screen and (min-width:1100px) {
    .contact-sec2-headings {
        margin-bottom: 2rem;
    }

    .contact-sec2-div3 {
        margin-bottom: 1rem;
    }

    .contact-icon1 {
        width: 35px;
        height: 35px;

    }

}


@media screen and (min-width:1400px) {
    .contact-sec2-headings {
        margin-bottom: 1.5rem;
    }

    .contact-sec2-div3 {
        margin-bottom: 1.5rem;
    }

}



/* contact us end */

.contact-sec3-div1 {
    max-width: 1000px;
    height: fit-content;
    width: 96%;
    margin: auto;
}

@media screen and (max-width:420px) {
    .contact-sec3-div1{
        display: none;
    }
    
}
.contact-sec3-headings {
    margin-top: 4rem;
}

.contact-sec3-headings h2 {
    font-family: "inter_regular";
    color: var(--colorText);
    font-size: 1.5rem;
    margin: 0;
    text-align: center;
}

.contact-sec3-headings h4 {
    font-family: "poppins_regular";
    font-weight: 400;
    color: var(--colorMain);
    font-size: 0.8rem;
    /* text-transform: uppercase; */
    margin-bottom: 5px;
    text-align: center;
    margin-top: 1rem;
}

.contact-sec3-div2 {
    margin: 0 auto;
    position: relative;
    height: 110rem;

}


@media screen and (min-width:1100px) {
    .contact-sec3-headings h4 {
        font-weight: 400;

    }

    .contact-sec3-headings h2 {
        font-size: 1.8rem;

    }

}

@media screen and (min-width:1400px) {
    .contact-sec3-headings h4 {
        font-weight: 400;
        font-size: 1rem;
        margin-bottom: 5px;
    }

    .contact-sec3-headings h2 {
        font-size: 2.2rem;
        margin: 0;

    }


}

.timeline-line {
    position: absolute;
    left: 50%;
    top: 10px;
    bottom: 80px;
    width: 2px;
    transform: translateX(-50%);
    background-image: repeating-linear-gradient(to bottom,
            #999 0,
            #999 4px,
            transparent 4px,
            transparent 8px);
}

.contact-sec3-div3 {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: start;
    position: absolute;
    left: 50%;
    transform: translateX(-50px);
    /* margin-top: 5rem; */
}

.contact-sec3-img1 {
    display: flex;
    width: 60px;
    height: 60px;

    padding: 0.6rem;
    border-radius: 50%;
    box-shadow: rgba(0, 0, 0, 0.438) 0px 5px 5px;
    background-color: #E6E8E6;
}

.contact-sec3-div4 {
    /* width: 50%; */
    display: flex;
    flex-direction: column;
    margin-left: 0.5rem;
}

.contact-sec3-div8 {
    /* width: 50%; */
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    column-gap: 0.5rem;

}



.contact-sec3-div5 {
    display: flex;
    flex-direction: row-reverse;
    justify-content: start;
    align-items: start;
    position: absolute;
    right: 50%;
    transform: translateX(50px);

    /* margin-top: 5rem; */
}

.contact-sec3-div6 {
    /* width: 50%; */
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    align-items: center;
    column-gap: 8px;

}

.contact-sec3-img2 {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 60px;

    padding: 0.6rem;
    border-radius: 50%;
    box-shadow: rgba(0, 0, 0, 0.438) 0px 5px 5px;
    background-color: #E6E8E6;
}

.contact-sec3-div7 {
    /* width: 50%; */
    display: flex;
    flex-direction: column;
    margin-right: 0.5rem;
    text-align: end;
}


.contact-sec3-span1 {
    font-family: "poppins_regular";
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--colorText);
    transform: translateX(-10px);


}

.contact-sec3-span2 {
    font-family: "poppins_regular";
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--colorText);

}

.contact-sec3-span3 {
    font-family: "poppins_regular";
    font-size: 0.9rem;
    color: var(--colorText);



}

.contact-sec3-span4 {
    font-family: "poppins_regular";
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--colorText);
    transform: translateX(10px);


}


.timeline-item-1 {
    top: 5rem;
}

.timeline-item-2 {
    top: 24rem;
}

.timeline-item-3 {
    top: 38rem;
}

.timeline-item-4 {
    top: 60rem;
}

.timeline-item-5 {
    top: 78rem;
}

.timeline-item-6 {
    top: 93rem;
}

@media screen and (min-width:400px) {
    .contact-sec3-div2 {
        height: 100rem;

    }

    .timeline-item-1 {
        top: 5rem;
    }

    .timeline-item-2 {
        top: 21rem;
    }

    .timeline-item-3 {
        top: 35rem;
    }

    .timeline-item-4 {
        top: 53rem;
    }

    .timeline-item-5 {
        top: 70rem;
    }

    .timeline-item-6 {
        top: 83rem;
    }

}

@media screen and (min-width:450px) {
    .contact-sec3-div2 {
        height: 85rem;

    }

    .timeline-item-1 {
        top: 5rem;
    }

    .timeline-item-2 {
        top: 18rem;
    }

    .timeline-item-3 {
        top: 30rem;
    }

    .timeline-item-4 {
        top: 44rem;
    }

    .timeline-item-5 {
        top: 58rem;
    }

    .timeline-item-6 {
        top: 69rem;
    }

}

@media screen and (min-width:600px) {
    .contact-sec3-div2 {
        height: 78rem;

    }

    .timeline-item-1 {
        top: 5rem;
    }

    .timeline-item-2 {
        top: 15rem;
    }

    .timeline-item-3 {
        top: 26rem;
    }

    .timeline-item-4 {
        top: 38rem;
    }

    .timeline-item-5 {
        top: 50rem;
    }

    .timeline-item-6 {
        top: 61rem;
    }

    .contact-sec3-headings {
        margin-top: 4.5rem;
    }

}



/* Banner start  */

.contact-sec4-div1 {
    display: flex;
    justify-content: center;
    align-items: end;
    width: 100%;
    margin: auto;
    position: relative;
    margin-bottom: 1rem;
}

.contact-sec4-div2 {
    width: 100%;
    background-image: url("../resources/portfolio/5.webp");
    background-size: cover;
    background-position: center;
    margin-bottom: 1rem;
    height: 20rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.banner-span {
    font-family: "Inter_Regular";
    color: white;
    font-size: 3.5rem;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.411);
}

.contact-sec4-div3 {

    position: absolute;
    width: fit-content;
    display: flex;
    flex-direction: row;
    justify-content: end;
    align-items: center;
    position: absolute;
    /* top: 1.5rem; */
    bottom: -0.5rem;
    column-gap: 1rem;
    background-color: #E6E8E6;
    border-radius: 30px;
    padding: 0.8rem 2rem;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.banner-span2 {
    font-family: "OpenSans";
    color: var(--colorText);
    font-size: 0.9rem;
}

.banner-span2 a {
    color: var(--colorText);
    text-decoration: none;
}

.banner-icon {
    width: 25px;
}

@media screen and (min-width:300px) and (max-width:449px) {
    /* .contact-sec1-div2 {
        height: 14rem;
    } */

    .banner-span {
        font-size: 2rem;
    }

    .contact-sec1-div3 {
        padding: 0.6rem 1rem;
        top: 12.7rem;
        column-gap: 0.5rem;
    }

    .banner-icon {
        width: 20px;
    }

    .loading-container {
        padding: 20px;
    }

    .loading-text {
        font-size: 1rem;
    }

    .loading-progress {
        width: 150px;
    }
}

@media screen and (min-width:450px) and (max-width:549px) {
    /* .contact-sec1-div2 {
        height: 14rem;
    } */

    .banner-span {
        font-size: 2.5rem;
    }

    .contact-sec1-div3 {
        padding: 0.6rem 1rem;
        top: 12.7rem;
        column-gap: 0.5rem;
    }

    .banner-icon {
        width: 20px;
    }
}

@media screen and (min-width:550px)and (max-width:949px) {
    /* .contact-sec1-div2 {
        height: 14rem;
    } */

    .banner-span {
        font-size: 2.8rem;
    }

    .contact-sec1-div3 {
        padding: 0.6rem 1rem;
        top: 12.7rem;
        column-gap: 0.5rem;
    }

    .banner-icon {
        width: 20px;
    }
}

@media screen and (min-width:950px) and (max-width:1200px) {
    /* .contact-sec1-div2 {
        height: 18rem;
    } */

    .banner-span {
        font-size: 3rem;
    }

    .contact-sec1-div3 {
        padding: 0.6rem 1rem;
        top: 16.7rem;
        column-gap: 0.5rem;
    }

    .banner-icon {
        width: 20px;
    }
}

/* banner end  */


.contact-sec5-headings {
    margin-top: 4rem;
}

.contact-sec5-headings h2 {
    font-family: "inter_regular";
    color: var(--colorText);
    font-size: 1.5rem;
    margin: 0;
    text-align: center;
}

.contact-sec5-headings h4 {
    max-width: 1500px;
    margin: auto;
    font-family: "poppins_regular";
    font-weight: 400;
    color: var(--colorMain);
    font-size: 0.8rem;
    /* text-transform: uppercase; */
    margin-bottom: 5px;
    text-align: center;
    margin-top: 1rem;
    width: 96%;
    margin: auto;
    font-size: 1rem;

}


@media screen and (min-width:1100px) {
    .contact-sec5-headings h4 {
        font-weight: 400;
        width: 96%;
        margin: auto;
    }

    .contact-sec5-headings h2 {
        font-size: 1.8rem;

    }

}

@media screen and (min-width:1400px) {
    .contact-sec5-headings h4 {
        font-weight: 400;
        font-size: 1rem;
        margin-bottom: 5px;
    }

    .contact-sec3-headings h2 {
        font-size: 2.2rem;
        margin: 0;

    }


}


.contact-sec5-div1{
   margin-top: 3rem;
   margin-bottom: 5rem;
}

.faqul {
    list-style: none;
    max-width: 1600px;
    width: 96%;
    margin: 0 auto;
 
}

.faqul li {
    background-color: #9FB8AD;
    border-left: 1px #475841 solid;

    /* border-bottom: 1px #ccc solid; */
    margin-bottom: 0.8rem;
}

.faqul li:first-child {
    border-top: 1px #ccc solid;
}

.contact-sec5-div2 {
    color: white;
    background-color: #3F403F;
    padding: 1rem;
    border-left: 10px #475841 solid;
    cursor: pointer;
    font-family: "poppins_regular";
    /* letter-spacing: 2px; */
    font-weight: 500;
    /* font-size: 1.2rem; */
}

.faqul p {
    padding: 1rem 1rem 1rem 0.5rem;
    color: #3F403F;
    line-height: 25px;
    font-family: "poppins_regular";


}

.contact-sec5-div3{
    overflow: hidden;
    height: 0;
}

.a-opened {
    border-left: 10px #475841 solid;
    /* padding: 1em 1em 1em 1.3em; */
    height: initial;
    padding-left: 0.8rem;
}