* {
    margin: 0px;
    padding: 0px;
    font-family: 'Public Sans', sans-serif;
    text-align: center;
}
body{
    
    overflow-x: hidden;}

.dropdown {
    display: none;
    height: 10vh;
    width: 70%;
    text-align: right;
    padding-top: 25px;
    /* border: 2px solid yellow; */

}

.material-symbols-outlined {
    background-color: rgb(0, 163, 139);
    border-radius: 5px;


    padding: 10px 15px;
}

.fa-solid {
    color: aliceblue;

}

.dropdown-menu {
    width: 145%;

}

.item {
    border-bottom: 1px solid grey;
}



/* -------------------------header--------------------------------------------------------------------------------------------------------------------------------------------------------- */

.header {
    /* border: 2px solid red; */
    height: 80vh;
    background-image: linear-gradient(to right, rgb(0, 0, 0, 0.8), rgb(0, 0, 0, 0.8)), url(./media/slider1.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
}

.navigation {
    /* border: 2px solid red; */
    border-bottom: 1px solid white;
    height: 10vh;
    display: grid;
    grid-template-columns: auto auto;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

.navone {
    width: 30%;
    /* border: 2px solid yellow; */
    color: rgb(0, 163, 139);
    text-align: left;
    font-size: 25px;

    padding: 23px 23px 23px 0px;

}

.navtwo {
    text-align: center;
    padding-top: 30px;
    /* padding-left: 180px; */
    /* margin-right: -40px; */
    width: 70%;
    height: 10vh;
    /* border: 2px solid yellow; */
    display: inline;

}



html {
    scroll-behavior: smooth;

}

ul {
    display: flex;
    justify-content: end;

}

li {
    list-style-type: none;
    margin-left: 23px;

}

li a {
    color: rgb(0, 163, 139);
    text-decoration: none;
    font-size: 15px;
}

li a :hover {
    color: white;
}

li a :active {
    color: yellow;
}

.center {
    /* border: 2px ridge blue; */
    height: 34.1vh;
    display: grid;
    justify-content: center;
    grid-template-columns: auto auto auto;
    align-items: center;
    grid-gap: 20px;
    /* background-color: #fff; */
    animation-timing-function: 3s;

}

.centerone {
    width: 70px;
    height: 15vh;
    /* border: 3px 3px 3px 0px, solid pink; */
    border-left: 2px solid rgb(0, 163, 139);
    border-top: 2px solid rgb(0, 163, 139);
    border-bottom: 2px solid rgb(0, 163, 139);
}

.centerthree {
    width: 70px;
    height: 15vh;
    /* border: 3px 3px 3px 0px, solid pink; */
    border-right: 2px solid rgb(0, 163, 139);
    border-top: 2px solid rgb(0, 163, 139);
    border-bottom: 2px solid rgb(0, 163, 139);
}

.centercenter {
    width: auto;
    font-family: fantasy;
    text-align: center;
    font-size: 60px;
    letter-spacing: -6px;
    /* height: 20vh; */
    /* border: 3px solid pink; */
}

.centertwowala {
    /* border: 2px ridge blue; */
    height: 16vh;
    width: 55%;
    margin-left: auto;
    margin-right: auto;
    display: grid;
    color: white;
    font-size: 16px;
    text-align: center;
    justify-content: center;
    grid-template-columns: auto auto auto;
    /* align-items: center; */
}



.lastbar {
    /* border: 2px solid red; */
    height: 20vh;
    display: grid;
    grid-template-columns: 50% 50%;
    gap: 0px;
    justify-content: center;
    position: relative;
    /* width: 100%; */

}

.parttwo {
    /* border: 3px ridge yellow; */
    background-color: white;
    clip-path: polygon(100% 0%, 0% 100%, 100% 100%);
}

.partone {
    /* border: 3px ridge yellow; */
    background-color: white;
    /* clip-path: polygon(100% 0%, 0% 100%, 100% 100%); */
    clip-path: polygon(0 0%, 0% 100%, 100% 100%);
}

/* --------------------------------------------------------------------------------------------------------------about----------------------- */
.aboutus {
    /* border: 3px solid blue; */
    height: 80vh;
}

.aboutborder {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 100px;
    display: flex;
    /* margin: 100px; */
    border: 2px solid rgb(0, 163, 139);
    height: 55vh;
    /* justify-content: center; */
}

.imagedono {
    height: 500px;

}

.aboutone {
    /* border: 2px solid red; */
    padding-left: 20px;
    display: flex;
    align-items: center;
    /* text-align: center; */
    /* margin-left: auto;
    margin-right: auto; */
    width: 40%;
}

.abouttwo {
    /* border: 2px solid red; */
    /* margin-left: 40px; */
    text-align: center;
    width: 60%;
    display: grid;
    /* align-items: center; */
    justify-content: center;
    /* padding: 10px; */
}

.aboutname {
    color: rgb(0, 163, 139);
    font-size: 45px;
    letter-spacing: -2px;
    font-weight: bolder;
}

.onepart {
    /* border: 1px solid red; */
    padding-top: 13vh;


    margin-bottom: -20vh;

}

.twopara {
    /* border: 1px solid yellow; */
    width: 500px;
    opacity: 70%;
    font-weight: bold;
}

/* ------------------------------------------------------------------------------------------------------------------------------------------------service--------------------------- */


.servicearea {
    /* border: 1px solid red; */
    height: 80vh;
    /* border: 1px solid red; */

}

.servicepartone {
    /* border: 1px solid red; */
    height: 20vh;
    text-align: center;
}

.serviceparttwo {
    /* border: 6px solid red; */
    /* width: 200%; */
    height: 50vh;
    display: grid;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    padding: 30px;
    width: 85%;
    grid-gap: 45px;
    grid-template-columns: 45% 45%;
    /* grid-template-columns: 100%; */
    /* border: 3px dashed blue; */
}

.parttwoone {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-gap: 20px;
}

.onename {
    /* width: 100%; */
    /* border: 2px solid grey; */

    text-align: center;
}

.hmm {
    color: rgb(0, 163, 139);
    font-size: 70px;
    margin: 20px;

}

.programs {
    font-size: 19px;
    opacity: 60%;
}

.heading {
    border-bottom: 2px solid rgb(0, 163, 139);
    color: rgb(0, 163, 139);
    width: 50%;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
}

.paragraphfor {
    font-size: medium;

    opacity: 50%;
}

/* ------------------------------------------------------------------------------------------------------------------------------------------------PORTFOLIO------------------- */
.portfolio {
    /* border: 1px solid red; */
    height: auto;
    text-align: center;
}

.portpart a {
    color: black;
    opacity: 50%;
    /* border: 1px dotted blue; */
    padding: 15px;
    font-weight: bolder;
    /* margin: 20px; */
    font-size: 18px;
    text-decoration: none;
    /* text-align: center; */

}

.portpart a:hover {

    color: white;
    background-color: rgb(0, 163, 139);
    /* padding: 10px 15px; */

}

.gallery {
    /* border: 2px solid red; */
    display: flex;
    /* height: 100vh; */
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
    margin-top: 70px;
}

.onegallery {
    width: 50%;
    /* border: 3px dotted orange; */
    /* height: 80vh; */
    display: grid;
    grid-gap: 10px;
    grid-template-rows: auto auto;
}

.image1 {
    padding: 10px;
}

.image2 {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    display: flex;
    justify-content: center;
    column-gap: 20px;

    /* border: 2px solid black; */
}

.imagepara {
    width: 47%;
    /* border: 1px solid red; */
}

.twogallery {
    /* border: 3px solid red; */
    width: 50%;
    display: grid;
    grid-gap: 20px;
    grid-template-rows: auto auto;
    margin: 5px;
}

.imageonewali {
    /* border: 3px dotted yellow; */
    display: flex;
}

.imagetwowali {
    /* border: 4px solid blue; */
    height: auto;
    /* margin-bottom: 40px; */
    margin: 5px;
}

.partoneimage {
    width: 50%;
    margin: 5px;
}

.buttonhaye {
    /* border: 3px solid red; */
    text-align: center;
}

.loadmore {
    text-align: center;
    padding: 10px 50px;
    font-weight: bold;
    font-size: 25px;
    /* outline: none; */
    border: 2px solid rgb(0, 163, 139);
    background-color: white;
    color: rgb(0, 163, 139);
}

.loadmore:hover {
    background-color: rgb(0, 163, 139);
    color: white;
}

/* -----------------------------------------------------------------------------------------------------TEAM------------------------------------------------ */
.ourteam {
    display: grid;
}

.people {
    margin-top: 50px;
    /* border: 3px solid red; */
    height: 50vh;
    display: grid;
    justify-content: center;
    text-align: center;
    /* text-align: center; */
    /* text-align: center; */
    grid-column-gap: 30px;
    grid-template-columns: 20% 20% 20%;
    margin: 50px;
}

.personone {
    /* border: 2px dashed red; */
    /* position: absolute; */
    background-image: url(./media/team2.png);
    background-size: contain;
    background-repeat: no-repeat;
    height: auto;
    /* width: 30%; */
    /* margin-left: auto;
    margin-right: auto; */
    /* display: inline; */
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    /* margin-bottom: 5vh; */
}

.persontwo {
    /* border: 2px dashed red; */
    /* position: absolute; */
    background-image: url(./media/team3.png);
    background-size: contain;
    background-repeat: no-repeat;
    height: auto;
    text-align: center;
    /* width: 30%; */
    /* margin-left: auto;
    margin-right: auto; */
    /* display: inline; */
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    /* margin-bottom: 5vh; */

}

.personone {
    /* border: 2px dashed red; */
    /* position: absolute; */
    background-image: url(./media/team2.png);
    background-size: contain;
    background-repeat: no-repeat;
    height: auto;

    text-align: center;
    /* width: 30%; */
    /* margin-left: auto;
    margin-right: auto; */
    /* display: inline; */
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    /* margin-bottom: 5vh; */
}

/* -----------------------------------------------------LOGO-------------------------------------------------------------------------- */

.logoarea {
    background-color: rgba(128, 128, 128, 0.071);
    /* border: 3px solid red; */
    height: auto;
    display: grid;
    padding: 40px 30px;
    width: 100%;
    justify-content: center;
    gap: 40px;
    margin-left: auto;
    margin-right: auto;
    grid-template-columns: 15% 15% 15% 15%;

}

/* ------------------------------------------------------CONTACT---------------------------------------------------------- */


.contact {
    /* border: 3px solid red; */
    margin-top: 100PX;

}

/* --------------------------------------------------------------------------FORM--------------------------------------------------------------------- */
.form {
    /* border: 4px dotted orange; */
    height: 20vh;
    width: 80%;
    display: flex;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
    gap: 30px;
}

.formtwo {
    /* border: 4px dotted orange; */
    height: 30vh;
    width: 80%;
    /* display: flex; */
    margin-left: auto;
    margin-right: auto;

    justify-content: center;
}

.inputnames {
    /* border: 2px solid rgba(128, 128, 128, 0.247); */
    width: 32%;
}




.formnames {
    width: 100%;
    height: 7vh;
    border: 2px ridge rgba(128, 128, 128, 0.247);
    outline: none;
    padding: 10px;
}

/* ------------------------------------------ADRRESS----------------------------------------------------------------------------------------------------- */



.address {
    /* background-color: rgba(128, 128, 128, 0.071); */
    /* border: 3px solid red; */
    height: auto;
    display: grid;
    padding: 40px 30px;
    width: 100%;
    justify-content: center;
    margin-top: 100px;
    gap: 40px;
    margin-left: auto;
    margin-right: auto;
    grid-template-columns: 50% 50%;

}

.infoparent {
    /* border: 2px dashed orange; */
    display: grid;
    gap: 30px;
    grid-template-columns: 30% 30%;
    justify-content: right;
}

.infoparenttwo {
    /* border: 2px dashed orange; */
    display: grid;
    gap: 30px;
    grid-template-columns: 30% 30%;
    justify-content: left;
}

.info {
    /* border: 2px dotted red; */
    height: 20vh;
    text-align: center;
}

.icon {
    border: 1px solid rgb(0, 163, 139);
    padding: 20px;
    font-size: 25px;
    color: rgb(0, 163, 139);
    border-radius: 50%;

}

/* ---------------------------------------------------------------------footer------------------------------------------------------------------- */

.map {
    width: 100%;
    /* background-color: gr; */
    display: grid;
    grid-template-columns: 50% 50%;
    justify-content: center;
    /* border: 3px dashed orange; */
}

.lab {
    /* width: 50%; */
    /* border: 1px solid red; */
    /* padding: ; */
    text-align: center;
    padding: 20px;
}

.llab {
    /* width: 50%; */
    /* border: 1px solid red; */
    padding: 140px 0px;
    text-align: center;
}

.namefoot {
    /* border: 3px solid red; */
    height: 20vh;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    background-color: rgb(0, 163, 139);
    margin-top: -150px;
    text-align: center;
}

.end {
    color: white;

    font-size: 20px;
    border: 1px solid white;
    padding: 10px;
    border-radius: 50%;
    margin: 40px 5px 0px 5px;
}

.end:hover {
    background-color: white;
    color: rgb(0, 163, 139);
}

.namefoot a {
    text-decoration: none;
}

.tad {
    /* border: 1px solid red; */
}