* {
    margin: 0;
    padding: 0px;
    box-sizing: border-box;
    /* font-family: Arial, Helvetica, sans-serif; */
    /* font-weight: 100px; */
    font-size: large;
    text-decoration: none;

}

.body {
    height: 100%;
    width: 100%;
}

/* container
.container {
    display: flex;
    height: 100%;
    width: 100%;
} */

/* header */
.header {
    position: fixed;
    display: flex;
    width: 100%;
    /* height: ; */
    justify-content: space-around;
    /* justify-items: center; */
    /* border: .2px solid rgb(208, 208, 186); */
    /* border-radius: 2px solid black; */
    /* margin: 40px 100px 30px 100px; */
    margin: 20px;
}

/* header-nav */
.header .nav-main {
    display: flex;
    flex-wrap: wrap;
    width: 50%;
    border-bottom: 0.005px solid #5e6974;
    justify-content: space-evenly;
    /* border: 2px solid black; */
    padding: 15px;
    font-size: x-large;
    list-style: none;
    color: black;
    text-decoration: none;

}

.nv {
    color: black;
    text-decoration: none;
}

.nv:hover {
    color: blue;
}

/* header btn */
.btn {
    border-radius: 16px;
    border: 0px;
    height: 50px;
    /* width: 30px ; */
    width: 160px;
    color: rgb(242, 242, 246);
    background-color: rgb(107, 107, 221);
}

.btn:hover {
    background-color: blueviolet;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
}

/* body-section-home */
.home {
    display: flex;
    /* width: 95%;  */
    justify-content: space-between;
    /* margin: 70px; */
    /* margin: 70px; */
    /* padding: 15px; */
    /* border: 2px solid black; */
    padding-top: 100px;
    padding-left: 70px;
    /* margin-top: 20px; */
    /* height: 300px; */
}

/* home-intro */
.home-intro {
    /* border: 2px solid black; */
    /* padding-top: 80px; */
    margin-top: 110px;
    padding-top: 30px;
    display: flex;
    flex-direction: column;
    /* font-size: 100; */
    width: 40%;
}

.home-intro .p1 {
    color: blue;
}

p {
    color: rgb(120, 115, 115);
}

.devloper-p {
    color: rgb(23, 19, 19);
    font-size: larger;
    /* font-weight: 560; */
}

h1 {
    /* font-size: xx-large; */
    font-size: 250%;
}

.intro-photo {
    /* border: 2px solid black; */
    /* width: 200px; */
    display: flex;
    width: 45%;
    border-radius: 3px solid black;
    flex-direction: column;
    /* height: 300px; */
    /* width: 300px; */
    /* background-image: url(vikas.jpg); */
}

.intro-btn {
    display: flex;
    justify-content: space-around;
    /* border: 2px solid black; */
    width: 80%;
}

.contact-btn {
    border-radius: 20px;
    border: 0px;
    /* width: 30px ; */
    width: 170px;
    height: 40px;
    color: rgb(242, 242, 246);
    background-color: rgb(107, 107, 221);
}

.learn-btn {
    border-radius: 20px;
    border: 0px;
    /* width: 30px ; */
    width: 170px;
    height: 40px;
    color: rgb(242, 242, 246);
    background-color: rgb(27, 20, 37);
}

/* body btn hover  */

.learn-btn:hover {
    background-color: rgb(6, 4, 8);
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

.contact-btn:hover {
    background-color: blueviolet;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}


/* About */
.about {
    display: flex;
    /* width: 85%; */
    justify-content: space-between;
    padding: 100px;
    margin-top: 30px;
    margin-bottom: 20px;
    /* padding-top: 60px; */
    /* margin: 60px; */
    /* padding: 25px; */
    /* border: 2px solid black; */
    /* height: 300px; */
}


.about-me {
    width: 50%;
    /* border: solid black; */
}

.connect {
    width: 35%;
    /* border: solid black; */
}

.about-p {
    color: blueviolet;
    font-weight: 600;

}

.connect h2 {
    font-size: x-large;

}

.social-media {
    color: rgb(103, 103, 218);

}

#icon {
    /* border: .08px solid black;+ */
    /* border-radius: 10px; */
    /* height: 32px; */
    width: 37px;

}

#icon:hover {
    /* border-radius: 22px; */
    color: rgb(205, 205, 228);
    /* background-color: rgb(184, 184, 228); */
    /* height: 22px;
    width: 27px; */
}

/* service */
.Services {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* height: 100%; */
    /* width: 95%; */
    padding-top: 90px;

    text-align: center;
    /* border: 2px solid black; */
}

.offer {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 40%;
    /* border: 2px solid black; */
}

.offer-p {
    color: rgb(107, 107, 221);
}

/* service cards */

.services-container {
    display: flex;
    padding-top: 20px;
    /* padding-bottom: 70px; */
    margin: 35px;
    /* padding-top: 40px; */
    /* margin-top: 500px; */
    /* width: 100%;
    height: 100%; */
    justify-content: space-around;
    /* flex-direction: column; */
    /* align-items: center; */
    /* border: 2px solid black; */
}

.service-card {
    /* padding-top: 30px; */
    width: 23%;
    position: static;
    display: flex;
    flex-wrap: wrap;
    /* border: 2px solid black; */
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    text-align: center;
    /* height: 100px; */
    /* margin: 50px; */
    background-color: rgb(249, 249, 249);
}

.service-card:hover {
    box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}


/* project section */

.project {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 70px;
    height: 100%;
    width: 100%;
    /* margin: 40px; */

    text-align: center;
    /* border: 2px solid black; */
}

.project-done {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 40%;
    padding: 20px;
    /* border: 2px solid black; */
}

.project-p {
    color: rgb(107, 107, 221);
}

/* project cards */

.project1,
.project2,
.project3,
.project4 {

    display: flex;
    align-items: center;
    justify-content: space-around;
    /* width: 90%; */
    padding: 20px;
    margin: 30px;
    /* border: 2px solid black; */
    /* margin-left: 65px; */
    /* margin: 30px; */
    text-decoration: none;
    /* background-color: rgb(243, 239, 243); */
}

.project-card {
    display: flex;
    width: 30%;
    height: 310px;
    /* margin: 30px; */
    flex-direction: column;
    align-items: center;
    text-align: center;
    /* border: 2px solid black; */
    justify-content: space-around;
    /* background-color: rgb(245, 243, 247); */

}

#img-project {
    height: 200px;
    width: 280px;
}

#project {
    list-style-type: none;
}

.project-card:hover {
    box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    background-color: rgb(243, 241, 246);
    /* border-radius: 2px solid; */
    /* height: 10px;
    width: 10px; */
}


/* client section */
.client {
    display: flex;
    padding: 50px;
    flex-direction: column;
    align-items: center;
    height: 100%;
    /* width: 99%; */
    /* margin: 30px; */
    text-align: center;
    /* border: 2px solid black; */
    background-color: rgb(1, 1, 64);
    ;
}

#img-client {
    height: 100px;
    width: 90px;
}

.client-done {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* width: 40%; */
    color: rgb(204, 217, 228);
    text-decoration: none;
    /* border: 2px solid black; */
}

.client-p {
    color: rgb(215, 215, 234);
}

/* client card */
.client1,
.client2 {

    display: flex;
    align-items: center;
    justify-content: space-around;
    /* width: 90%; */
    /* border: 2px solid black; */
    /* margin-left: 65px; */
    margin: 10px;
    background-color: rgb(249, 248, 249);

}

.client-card {
    display: flex;
    width: 23%;
    /* margin: 30px; */
    flex-direction: column;
    align-items: center;
    text-align: center;
    /* border: 2px solid black; */
    justify-content: space-around;
    text-decoration: none;
    color: black;
}



.client-card:hover {
    box-shadow: 0 8px 16px 0 rgba(240, 236, 236, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    background-color: rgb(220, 193, 242);
    /* width: 430px;
    height: 330px; */
}

h3 {
    color: black;
}

/* certfications */
.award {
    display: flex;
    padding-top: 70px;
    flex-direction: column;
    align-items: center;
    /* height: 100%; */
    /* width: 99%; */
    /* margin: 30px; */
    text-align: center;
    /* border: 2px solid black; */
    background-color: rgb(255, 255, 255);
}

.award-done {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 50%;
    color: rgb(26, 0, 66);
    text-decoration: none;
    /* border: 2px solid black; */
}

.award-p {
    color: rgb(107, 107, 221);
}

#img-cert {
    height: 250px;
    width: 300px;
}

/* award card */
.award1,
.award2 {
    display: flex;
    align-items: center;
    justify-content: space-around;
    /* width: 90%; */
    /* border: 2px solid black; */
    padding: 20px;
    margin-left: 30px;
    margin-right: 30px;
    /* margin: 20px; */
    background-color: rgb(249, 248, 249);


}

.award-card {
    display: flex;
    width: 40%;
    /* margin: 30px; */
    flex-direction: column;
    align-items: center;
    text-align: center;
    /* border: 2px solid black; */
    justify-content: space-around;
    text-decoration: none;
    color: black;
    
}

.award-card:hover {
    box-shadow: 0 8px 16px 0 rgba(240, 236, 236, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    background-color: rgb(245, 240, 249);
    /* width: 530px;
    height: 530px; */
}


/* Contact Us */
.contact {
    padding: 65px;
}

.contact-me {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* height: 100%; */
    /* width: 99%; */
    /* margin: 30px; */
    /* padding: 50px; */
    text-align: center;
    /* border: 2px solid black; */
    background-color: rgb(255, 255, 255);

}

.contact-done {
    display: flex;
    padding-top: 50px;
    flex-direction: column;
    align-items: center;
    width: 40%;
    color: rgb(26, 0, 66);
    text-decoration: none;
    /* border: 2px solid black; */
}

.contact-p {
    color: rgb(3, 3, 112);
}

/* contact form */
/* FORM */
.contact-form {
    display: flex;
    flex-direction: column;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    /* background-color: rgb(255, 255, 255); */
}

.form-row {
    display: flex;
    margin: 10px;
    justify-content: space-around;
    align-items: center;

}

.form-row input {
    display: flex;
    margin: 5px;
    justify-content: space-around;
    align-items: center;
    border: 1px solid rgb(254, 254, 254);
    width: 350px;
}

.contact-form input,
.contact-form textarea {
    display: flex;
    justify-content: space-around;
    padding: 16px 18px;
    font-size: 15px;

    border: 0;
    border-radius: 10px;
    background: #f1e8e8;
    border: 1px solid rgb(254, 254, 254);
}


.contact-form button {
    border-radius: 16px;
    border: 0px;
    margin: 30px;
    height: 50px;
    /* width: 30px ; */
    width: 160px;
    color: rgb(242, 242, 246);
    background-color: rgb(107, 107, 221);

}

textarea {
    width: 710px;
}

.contact-form button:hover {
    background-color: blueviolet;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
}

/* footer */
.main-footer {
    display: flex;
    flex-direction: column;
    background-color: rgb(102, 102, 227);
    color: #cbd5f5;
    padding: 40px;
    width: 100%;
    height: 100%;
    /* margin: 20px; */
}

.footer-container {
    display: flex;
    justify-content: space-between;

    flex-wrap: wrap;
}

.footer {
    min-width: 200px;
}

.footer h2 {
    color: #ffffff;
    font-size: 36px;
    margin-bottom: 15px;
}

.footer h3,
.footer h4 {
    color: #ffffff;
    margin-bottom: 15px;
}

.footer p {
    margin-bottom: 8px;

}

.footer ul {
    list-style: none;

}

.footer ul li {
    margin-bottom: 10px;

    cursor: pointer;
}



/* Bottom */
.footer-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;

}



#ficon {
    color: white;
}
#ficon:hover{
    /* background-color: blueviolet; */
    color: aquamarine;
    box-shadow:0 8px 20px 0 rgba(0, 0, 0, 0.2)

}
.footer-bottom p {
    /* font-size: 14px; */
    color: #94a3b8;
}