@import url('https://fonts.googleapis.com/css2?family=Pathway+Gothic+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@300&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Importing fonts */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@500&family=Oswald:wght@300&display=swap');

/* 
p,carea,text,span{
    text-align: justify;
} */


body{
        font-family: Verdana, Geneva, sans-serif;
}

/* Utility Classes */

.material-symbols-outlined {
    font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 0,
        'opsz' 48
}

.wf{
    width: 100%;
}

.arrow-d span {
    width: 100%;
    height: 100%;
}


.NoBorder{
    border:none
}

.YesBorder{
    border:.1px solid black
}


.float {
    position: fixed;
    width: 40px;
    height: 40px;
    bottom: 40px;
    right: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 6px;
    background-color: #333;
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    box-shadow: 2px 2px 3px #999;
}

.my-float {
    margin-top: 22px;
}


.row{
    display: flex;
    justify-content: center;
    align-items: center;
}

.justify-center{
    display: flex;
    justify-content: center;
    align-items: center;
}

#heading{
    font-size: 3vw;
}

my-2 {
    margin: 0px 2vw;
}
/* .p-o-h:hover.c-input{
    /* margin-left: 2vw; */
    /* text-align: center; */
/* } 

/* Styling Page Home */


.c-u-s-m li{
    background-color: white;
    mix-blend-mode: multiply;
} */


.contact-info{
    height: 10vh;
    align-items: center;
    width: 100%;
}

.call-icon{
    width: 30px;
    height: 30px;
    filter: invert(80%);
    -webkit-filter: invert(95%);
    border-radius: 10px;
    scale: .8;
}

.m-img{
    margin-left: 20px;
    width: 30px;
    height: 30px;
    border-radius: 30px;
}

a{
    cursor: pointer;
}

.image{
    width: 30px;
    height: 30px;
    border-radius: 30px;
}

.image:hover{
    width: 35px;
    height: 35px;
    border-radius: 27px;
}

.info{
    width: 90%;
}

.imgs ul li{
    margin-left: 4px;
}

.main-img{
    /* height: 60vw; */
    width:100%;
    /* margin-top: .2vh; */
    border-radius: .5vh;
}




/* Styling NavBar */

nav{
    /* width: 20px; */
    background-color: gray;
    width: 100%;

}

.navbar{
    width: 100%;
    padding: 0;
}



.components{
    background-color: white;
}

.title{
    color: #00619e;
    font-size: 1.5vw;
    font-family: 'Oswald', sans-serif;
    margin: 0vw 2.2vw;
    width: 40%;
}

.options ul li{
    font-size: 1.4vw;
    padding: 10px;
    font-family: 'Nunito', sans-serif;
}

.options {
    justify-content: space-between;
    width: 112%;
}

#menu-btn{
    visibility: hidden;
    /* margin-right: 2vw; */
    flex-direction: column;
}
#menu-btn ul{
    visibility: hidden;
}

#m-content{
    visibility: hidden;
    height: 0px;
}

@media only screen and (max-width: 920px) {
    .options ,.contact-us{
        visibility: hidden;
        /* width: 50%; */
    }
    #menu-btn{
        visibility: visible;
        /* margin: .7vw; */
        margin-right: 2%;
    }
        #m-content {
            visibility: hidden;
            background-color: white;
            padding:2px 2vw;
            background-color: cyan;

        }
        /* #m-content ul li {
            visibility: visible;
            background-color: purple;
            padding:2px 2vw;

        } */
    #menu-btn img{
        /* border: .1px solid black; */
        height: 6vw;
        width: 18vw;
    }

    .about-us-para{
        font-size: 1.2rem;
        color: black;
        text-align: center;
        padding: 2rem ;
        /* padding: 2rem ; */
        /* background-color:darkred; */
    
    }
   


}
        .contact-us {
            width: 95%;
        }

        .m-c-ul-a li{
            background-color: cyan;
            border-top: .1px solid black;
            padding: .75rem;
            /* transition: height  */
        }

        #myFile{
            width: 18vw;
            height: 20vw;
            font-size: 2vw;
        }

.options ul li:hover{
    font-size: 1.4vw;
}

#myFile{
    font-size: auto;
    width: auto;
        height:auto;
}



.rtitle{
    font-size: 3vw;
}

.contact-us{
    /* padding-left: 60%; */
    display: flex;
    justify-content: end;
}



.c-us-btn{
    background-color: rgb(31 41 55/800);
    color: white;
    /* justify-self: end; */
    /* margin-left: 42vw; */
    font-family: 'Nunito', sans-serif;
    padding: 10px;
    border-radius: 2vh;
}

.c-us-btn:hover{
    background-color: white;
    border: 1px solid rgb(31 41 55/800);
    color: rgb(31 41 55/800);
    transition: ease-in-out;
}




/* About services */


.about-services{
    display: flex;
    margin-top: 30px;
    justify-content: center;
}

.services-component{
    /* /* height: 40vh; */
    width: 20vw;
    text-align: center;
    
    background-color: #152136;
    color: wheat;
    font-family: 'Nunito', sans-serif;
    margin: 30px;
    padding: 2vw;
    border-radius: 20px;
}


.s-component-title{
    color: white;
    font-size: 30px;
    text-align: center;
}

.aboutus{
    position: relative;
    display: inline-block;
   margin-right: 2vw;
}

#a-dropdown{
    position: absolute;
    font-size: medium;
    background-color: white;
    display: none;
    border-radius: .2vw;
    transition: all 0.5s ease-in-out;
    animation-duration: 1000ms;
    /* padding: .5vw; */
}

/* #a-dropdown li{
    width: 8vw;
    font-size: medium;
    display: none;
    border-radius: .5vw;
} */

.aboutus:hover #a-dropdown{
    display: block;
}

.services{
   position: relative;
   display: inline-block;
   margin-right: 2vw;
}

#s-dropdown {
    position: absolute;
    background-color: white;
    /* visibility:hidden; */
    border-radius: .2vw;
    display: none;
    width: max-content;
    /* height: ; */
}

.services:hover #s-dropdown{
    display: block;
}

.align-arrow-center{
    display: flex;
    align-items: center;
    justify-content: center;
}

.arrow{
    max-height: 2vw;
    max-width: 2vw;
}


/* .services-component{
    width: 20vw;
    
    background-color: black;
    color: wheat;
} */


/* Main title And More Info ,slogan etc. */

.more-a-us{
    background-color: rgb(166, 184, 212);
}


.slogan span{
    font-size: 14px;
    color: rgb(41 111 83);
    font-family: 'Oswald', sans-serif;
    max-width: 20px;
    
    /* display: flex;
    justify-items: center;
    align-items: center; */
}

.slogan{
    justify-content: center;
}

.title-n-slogan{
    justify-content: center;
    text-align: left;
}

/* .m-title{} */



/* Styling card */
.i-c-c{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2vw;
}

.info-card{
    display: flex;
    justify-content: center;
    align-items: center;
    margin:2rem;
    padding: 1rem;
    width: fit-content;
    height: fit-content;
    background-color: rgb(228, 228, 228);
}

.i-card{
    /* border-radius: 20px; */
    padding: 3vw;
}

#sn-img{
    /* border-radius: 2vw; */
    /* scale: 2; */
    /* height: 10vw; */
    width: max-content;
    height: max-content;

}

.card-info{
    text-align: left;
    font-size: 2vw;
    margin: 3vw;
    /* width: fit-content; */
    /* height: fit-content; */
    /* max-width: 10vw; */
}

.card-info p{
    text-align: left;
    font-size: 1vw;
    padding: .2vw;
}
#nicoh{
    color: #00619e;
}

/* Styling 'Our Services' means Card */

.our-services{
    justify-content: center;
    margin: 2vw;
    padding: 2vw;
    display: grid;
    background-color: beige;
    /* background-image: url('../css/images/logos/bckimage.jpg');
    background-repeat: no-repeat;
    background-size: 100%; */
}

.card{
   padding: 2vw;
   max-width:40%;
}
.card-title{
    font-size: 2vw;
    border-bottom: 1px solid black;
}

.card-text{
    font-size: 1vw;
}

.card-c-btn{
    padding: 1vw;
}

.card-btn{
    background-color: white;
    padding: 1vw;
    color: black;
    border: 1px solid black;
    border-radius: .6vw;

}

.card-btn:hover{
    background-color: rgb(32, 30, 30);
    padding: 1vw;
    border-color: white;
    color: white;
    border: .6px solid white;
}


.card-img img{ 
    width:100%
}

/* .row-span-card{
    grid-row: span 3;
} */

#sn-img {
    /* border-radius: 2vw; */
    /* scale: 2; */
    height: 20vw;
    width: 119vw; 
    /* scale: 1.3; */
}


/* Styling Our Client div */

.head{
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid black;
}

.our-clients {
    background-color: rgb(135, 247, 235);
    margin: .1vw;
    margin-bottom: 1vw;
}

.o-c-img{
    mix-blend-mode: multiply;
}

.main-o-c{
    padding: 2vw;
    display: flex;
        justify-content: center;
        align-items: center;
        overflow-y: scroll;
}

#poc{
    text-align: justify;
}

.heading-o-c{
    font-size: 3vw;
}
.o-c-component{
    text-align: center;
    margin: 0px 1vw;
}

.o-c-img{
    max-width: 10vw;
}

.o-c-name{
    font-style: italic;
    padding: .3vw;
    word-wrap: break-word;
}
.o-c-btn{
    font-size: 1vw;
    background-color: black;
    color: wheat;
    padding: .6vw;
    border-radius: 1vw;
}

.o-c-btn:hover{
    font-size: 1vw;
    background-color: whitesmoke;
    color: black;
    border: 1px solid black;
    padding: .6vw;
    border-radius: 1vw;
}

/* Styling recall */

.recall{
    background-color: firebrick;
    color: whitesmoke;
    /* padding: 2vw; */
    width: 100%;
    justify-content: space-between;
    display: flex;
}


.c-us{
    justify-content: space-between;
}

.r-our-services-components{
    padding: 2vw;
}

 .r-our-services-components-head {
     font-size: 2vw;
     text-align: center;
     margin-bottom: 2vw;
 }

@media screen and (max-width:920px) {
    
    .r-our-services-components-head{
        font-size: 3vw;
        text-align: center;
        margin-bottom: 2vw;
    }
    .card-text{
        font-size: 2.8vw;
    }
    .card-title{
        font-size: 3.2vw;
    }
        #heading {
            font-size: 7vw;
        }

    /* .card-info p{
        width: auto;
        height: auto;
    } */
    .info-card{
        margin: 1rem;
    }
    
}

.last{
    border-top: 1px solid wheat;
    background-color: firebrick;
    color: wheat;
    padding: 1vw;
    font-size: 1.5vw;
    text-align: center;
    width: 100%;
}



/* Styling Page- contact */

.formSty{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.contact-boxes{
    background-color: rgb(184, 222, 237);
    display: flex;
    justify-content: center;
    padding: 2vw;
}
.contact-box{
    border-radius: .5vw;
    margin: 2vw;
    background-color: white;
    color: rgb(17, 16, 16);
    padding: 2vw;
    text-align: center;
    width: 22%;
    /* height: 22%; */
}
.contact-box:hover{
    border-radius: .5vw;
    margin: 2vw;
    background-color: rgb(29, 27, 27);
        padding: 2vw;
        color: wheat;
        text-align: center;
}

.C-head{
    font-size: 1.9vw;
}

@media only screen and (max-width: 920px){
    .C-head{
        font-size: 3vw;
    }
}

.img-c{
    justify-content: center;
        display: flex;
}

.C-img-m{
    border-radius: 20vw;
    scale: .4;
}
.C-img-p{
    border-radius: 1vw;
    scale: .4;
    /* mix-blend-mode: multiply; */
}

.m-n-f{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2vw;
    padding-left: 2vw;
}

.map{
    /* margin-right: 1vw; */
    width: 70vw;
}



@media only screen and (max-width: 920px) {
#a-map {
        width: fit-content;
    }
}

.feedback{
        font-family: 'Nunito', sans-serif;
        padding: 2vw;
        max-width: 80%;
}

.text-area{
    border-color: white;
    padding: 1vw;
    background-color: white;
    margin: 1vw .5vw;
}
.text-area-l{
    border-color: cyan;
    padding: 1vw;
    background-color: white;
    margin: 1vw;
    width: 100%;
    text-align: center;
    /* height: 50%; */
}

.submit-btn{
    padding: 1vw;
    background-color: rgb(100, 100, 168);
    color: white;
    border-radius: 1vw;
    justify-self: end;
}

@media only screen and (max-width:920px) {
    .submit-btn {
            padding: 2vw;
            background-color: rgb(100, 100, 168);
        }
}

.btn{
    display: flex;
    justify-content: center;
}


/* Styling page career */

.select-visiblity-hidden{
    visibility: hidden;
    display: block;
        position: absolute;
    height: 0px;
    width: 0px;
}
.select-visiblity-visible{
    visibility: visible;
}

.o-tb-hidden{
    visibility: hidden;
    display: block;
    position: absolute;
    height: 0px;
        width: 0px;
}
.o-tb-visible{
    visibility: visible;
}

.career-main{
    background-color: rgb(245, 245, 245);
    padding: 3%;
    width: 75vw;
    /* text-align: left; */
    display: flex;
    flex-direction: column;
    justify-content: left;
    /* align-items: ; */
    /* height: 0vw; */
}

@media only screen and (max-width:915px) {
    .career-main{
        width: auto;
        background-color: rgb(245, 245, 245);
        /* padding:0 */
    }
    .text-area{
        /* background-color: cyan; */
    }
}

.inputs{
    width: 100%;
    /* display: flex; */
    justify-content: space-between;
}

/* .c-row{
}
 */




.c-input{
    padding: 1vw;
}

.career-container{
    padding: 2rem;
}

.inp-c{
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* align-items: center; */
    text-align: start;
    padding: 1px;
}

.btn-c-c{
    /* display: flex;
    align-items: center; */
    /* justify-content: left; */
    margin-left: 1vw;
    margin-top: 1vw;
}
.btn-c{
    background-color: white;
    color: rgb(8, 8, 8);
    padding: 1vw;
}
.btn-c:hover{
    background-color: rgb(23, 45, 32);
    color: wheat;
    padding: 1vw;
    border-radius: 1vw;
}

.text-area-message{
    padding: 2vw;
    margin: 1vw;
    width: 98%;
}

.cf{
    margin: 2vw;
}

.cf-m{
    margin: .4vw;
}

/* styling Page -Client  */
.clints-container{
    display: flex;
    margin: 2vw;
    padding: 1vw;
    background-color: rgb(203, 229, 229);
    align-items: center;
    flex-wrap: wrap;
    /* justify-content: space-evenly; */
    /* justify-content: space-between;word-wrap: break-word; */
}


.clients{
    width: 50%;
    display: flex;
    /* gap:1rem; */
    /*  */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* grid-template-columns: in; */
}
/* .clients-government{
    border-right: 1px;
    border-color: #152136;
}
.clients-private{
    border-right: 1px;
} */

.clients-head{
    font-size: 2rem;
    padding: 2rem;
    text-decoration: underline;
}

.clint-container{
    margin: 1vw;
    mix-blend-mode: multiply;
    border: 1px solid black;
    white-space: nowrap;
    padding: 1vw;
    /* width: 30%; */
    /* height: 60%; */
    /* max-width: 10%; */
    display: flex;
    justify-content: center;
    /* width: 40%; */
    /* height: 80%; */
}
.clint-container img{
    /* justify-content: center; */
    /* visibility: hidden; */
    width: 7rem;;
    /* width: 1rem; */
    /* height: fit-content; */
    height: 7rem;;
}

@media only screen and (max-width: 920px){
    .clints-container{
        display: flex;
        margin: 2vw;
        padding: 1vw;
        background-color: rgb(203, 229, 229);
        flex-direction: column;
        align-items: center;
        flex-wrap: wrap;
        /* justify-content: space-evenly; */
        /* justify-content: space-between;word-wrap: break-word; */
    }
    .clint-container{
        /* width: 95%; */
        /* height: 95%; */
        justify-content: center;
        display: flex;
        margin: 1vw;
        mix-blend-mode: multiply;
        border: 1px solid black;
        white-space: nowrap;
        padding: 1vw;
        /* width: 90%; */
        /* height: 90%; */
        /* max-width: 10%; */
        display: flex;
        justify-content: center;
    }
    .clint-container img{
        /* justify-content: center; */
        max-width: none;
        max-height: none;
        /* width: 100%;
        height: 100%; */
        width: 42vw;
        height: 42vw;
    }
    /* .clint-container{
        width: 100%;
        
    } */
}

.main-service-container{
    margin: 4vw;
    display:flex
}

#s-img{
    height: 80%;
    width: 80%;
    /* scale: 1.3; */
}

#s-title{
    font-size: 2vw;
}

#s-desc{
    font-size: 1.5vw;
}

#service-text{
font-family: 'Dosis', sans-serif;
word-wrap: break-word;
}


#sidebar{
    width: 100%;
    background-color: #f1eaea;
    border-radius: .4vw;
    height: fit-content;
}



.s-li-head {
    padding: 1vw;
    background-color: rgb(14, 13, 13);
    color: whitesmoke;
    font-size: 2vw;
    /* border-radius: 0.4vw; */
    font-family: 'Pathway Gothic One', sans-serif;
}
.s-li-elements {
    font-size: medium;
    font-family: 'Sarabun', sans-serif;
    padding: 1vw;
    border-bottom: 0.1vw solid black;
    font-weight: 300;
}

.s-li-elements:hover{
    font-size: medium;
    font-family: 'Sarabun', sans-serif;
    padding: 1vw;
    border-bottom: .1vw solid black;
    font-weight: 300;
    background-color: grey;
}

@media only screen and (max-width: 920px) {
    .main-service-container {
            margin: 4vw;
            flex-direction: column;
        }
        #s-title{
            font-size: 5vw;
        }
        #s-desc{
            font-size: 4vw;
        }
        #sidebar{
            margin-top: 2vw;
        }

        .s-li-head{
            font-size: 5vw;
        }
        .s-li-elements{
            font-size: 3vw;
        }
}
#main-o-au{
    display: flex;
    justify-content: center;
    align-items: center;
}
.p-card{
    background-color: rgb(200, 200, 200);
    width: auto;
    height: auto;
    margin: 2vw;
    padding: 1vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: .1vw;
}
.p-img{
    max-width: 22vw;
    max-height: 22vw;
}

.p-name{
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 2vw;
}


.p-c-icon{
    max-width: 2vw;
    margin: .3vw;
}
.p-c-icon img{
border-radius: 1vw;}

.p-c-icon-c{
    display: flex;
}

#our-team-head span{
    font-size: 5vw;
    font-family:'Courier New', Courier, monospace;
}
#our-team-head {
    /* font-size: 5vw;
    font-family:'Courier New', Courier, monospace; */
    margin-top: 2vw;
    background-color: rgb(240, 225, 205);
    padding: 1.5vw;
    display: flex;
    justify-content: center;
}

#main{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: rgb(231, 226, 219);
    margin: .01vw 1vw;
}
@media only screen and (max-width: 920px) {
    #main-o-au{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .p-card{
        background-color: rgb(200, 200, 200);
        width: auto;
        height: auto;
        margin: 2vw;
        padding: 1vw;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-radius: .1vw;
    }
    /* border-radius: 12vw; */
    .p-img{
        max-width: 50vw;
        max-height: 50vw;
    }
    .p-name{
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        font-size: 4vw;
    }
    .p-c-icon{
        max-width: 50vw;
        margin: .3vw;
    }
    .p-c-icon img{
        border-radius: 3vw;
    width: 6vw;
}   

/* About Us  */





.about-us-teammembers{
    display: flex;
    flex-direction: column;
    width: 100%;
    /* margin: 1rem; */
    background-color:rgb(19, 6, 6);
    color: whitesmoke;
    border-radius: .5rem;
    padding: 2rem;
    /* flex-wrap: wrap; */
}

.about-us-teammember{
    display: flex;
    text-align: center;
    flex-direction: column;
    /* background-color:darkred; */
    width: 100%;
}

#about-us-teammember-img{
    /* padding: .25rem; */
    background-color: white;
    border-radius: 1rem;
}

.about-us-teammember-info{
    flex: auto;
    /* justify-content: end; */
    /* align-items: end; */
}



}


.main{
       /* width: 264%; */
    padding: 2%;
}


/* #s-option */

#empty-warning-career{
    visibility: hidden;
}


/* about us  */

.main-about-us{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.about-us-head{
    font-size: 3rem;
    color: darkred;

}

.about-us-para{
    font-size: 2rem;
    color: black;
    text-align: center;
    padding: 2rem ;
    /* padding: 2rem ; */
    /* background-color:darkred; */

}

.about-us-teammembers{
    display: flex;
    flex-direction: column;
    width: 98%;
    margin: 1rem;
    background-color:rgb(203, 229, 229);
    color: black;
    border-radius: .5rem;
    padding: 2rem;
    /* flex-wrap: wrap; */
}

.about-us-teammember{
    display: flex;
    text-align: center;
    /* background-color:darkred; */
    width: 100%;
    border-top: 1px solid rgb(255, 255, 255);
    border-bottom: 1px solid rgb(255, 255, 255);
    padding: 1.25rem;
}

#about-us-teammember-img{
    padding: .1rem;
    background-color: rgb(188, 156, 156);
    border-radius: 1rem;
    /* width: 30%; */
}

.about-us-teammember-info{
    display: flex;
    flex: auto;
    align-items: center;
    justify-content: center;
    /* justify-content: end; */
    /* align-items: end; */
    font-size: 1.5rem;
    padding: 1rem;
}

#about-us-teammember-name{
    font-size: 2rem;
}

.about-us-teammember-li-img-container{
    display: flex;
    justify-content: center;
    align-items: center;
}

.about-us-teammember-li-img{
    width: 2rem;
    height: 2rem;
    border-radius: 1rem;
}    


/* Login  */

.login-cont-main{

    display: flex;
    /* flex-direction: column; */
    /* align-items: center; */
    justify-content: center;
    /* align-self: center; */
    padding: 1rem;
    margin: auto;

}
.login-cont{
    display: block;
    flex-direction: column;
    align-items: center;
    padding: 2rem;
    border-radius: 1px;
    box-shadow: #152136;
    /* justify-content: center; */
    /* width: 80%; */
    /* align-self: center; */
    background-color: rgb(243, 239, 239);
    /* margin: auto; */
}
.login-cont div,.login-btn{
    /* width: 80%; */
    margin: 1.4rem 0px;
}