* {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    font-family: 'IBM Plex Sans', Helvetica, Arial, sans-serif;
    box-sizing: border-box;

}

html,
body {
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    scroll-behavior: smooth;
}

body::-webkit-scrollbar {
    display: none;
}

:root {
    --color1: #99d9ea;
    --color2: #badde7;
    --color3: rgb(255, 255, 255);
    --color4: rgb(0, 0, 0);
    --grey: #e7e7e7;
}

html::selection {
    background-color: var(--color1);
    color: white;
}

#header {
    display: flex;
    height: 20%;
    width: 100%;
    align-items: center;
    position: fixed;
    background-color: white;
    z-index: 1;
}

#header i {
    display: none;
}

.fakeheader {
    height: 20%;
    width: 100%;
}

#logo {
    height: 100%;
    width: 20%;
    display: flex;
    align-items: center;
    margin-right: 100px;
}

#logo-text {
    height: auto;
    width: auto;
    padding: 10px 15px;
    border: 3px solid var(--color3);
    font-size: 10px;
    border-radius: 8px;
    color: var(--color3);
    background-color: var(--color1);
    box-shadow: 5px 5px var(--color2);
    margin-left: 90px;
    font-family: cursive;
}

#nav {
    height: 100%;
    width: 60%;
    margin-left: 10px;
}

/* done */

#nav ul {
    display: flex;
    align-items: center;
    justify-content: space-around;
}

#nav ul li {
    list-style: none;
    text-align: center;
    width: auto;
    height: auto;
    padding: 5px;
    overflow: hidden;

}

#nav ul li a {
    color: var(--color4);
    text-decoration: none;
    margin-top: 20px;
    position: relative;

}

#nav ul li a h4 {
    width: 150px;
    height: 25px;
    padding: 5px;
    border-radius: 5px;
    overflow: hidden;

}

#nav ul li a #home-text {
    width: 100px;
    height: 100%;
    background-color: var(--color1);
    color: var(--color3);
    border-radius: 50px;
    padding: 8px 25px;
}

#nav ul li a .bg-color::before {
    content: "";
    width: 70px;
    height: 100%;
    background-color: var(--color1);
    position: absolute;
    top: -3px;
    left: -50px;
    border-radius: 50px;
    z-index: -1;
    transform: translateX(-100%);
    visibility: hidden;
    padding: 4px 15px;
    transition: all 0.25s ease-in-out;
}

#nav ul li a .bg-color:hover {
    color: var(--color3);
}

#nav ul li a .bg-color:hover::before {
    transform: translateX(0%);
    visibility: visible;
}

#hirebtn {
    display: flex;
    height: 100%;
    width: 20%;
    align-items: center;
    justify-content: center;
}

.btn {
    height: auto;
    width: auto;
    padding: 10px 15px;
    border: 2px solid var(--color1);
    border-radius: 20px;
    color: var(--color1);
    background-color: var(--color3);
    box-shadow: 5px 5px var(--grey);
    transition: all 0.5s ease-in-out;
}

.btn:hover {
    transform: scale(1.2);
    cursor: pointer;
    color: white;
    background-color: var(--color1);
}

.btn:active {
    background-color: rgb(255, 255, 255);
    color: var(--color1);
    border: 1px solid var(--color2);
    cursor: pointer;
}

#content {
    display: flex;
    height: 80%;
    width: 100%;
    padding: 50px 0px;
    background-color: var(--color3);
}

#left-content {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 40%;
}

#main-img {
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto;
    height: auto;
    background-color: var(--color1);
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    border: 5px solid var(--color2);
    transition: all 0.5s ease-in-out;

}

#main-img img {
    width: 380px;
    height: auto;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    object-fit: cover;
    filter: grayscale(100%);
    transition: all 0.5s ease-in-out;
}

#main-img:hover {
    border-color: #cdcdcd;
}

#main-img img:hover {
    filter: none;
    transform: scale(1.1);
}

#right-content {
    height: 100%;
    width: 60%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#rc-main {
    width: 100%;
    height: 80%;
}

#heading {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto;
}

#h-content h1 {
    text-align: left;
    margin-left: 10px;
    color: var(--color4);
}

h1 span {
    color: var(--color1);
}

#body-text {
    width: 90%;
    height: auto;
    display: flex;
    align-items: center;
}

#body-text p {
    text-align: justify;
    margin-left: 10px;
    margin-top: 20px;
    font-size: normal;
    color: var(--color4);
}

#button {
    width: 100%;
    height: 20%;
    display: flex;
    align-items: center;
    margin-left: 10px;
}

#sm {
    width: 31%;
    height: 25%;
    display: flex;
    align-items: center;
}

.icon {
    margin-top: 20px;
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.5s ease-in-out;

}

.icon:hover {
    transform: scale(1.5);
    cursor: pointer;
    border-radius: 50%;
}

#icon1 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='32' height='32' fill='currentColor'%3E%3Cpath d='M12.001 2C6.47598 2 2.00098 6.475 2.00098 12C2.00098 16.425 4.86348 20.1625 8.83848 21.4875C9.33848 21.575 9.52598 21.275 9.52598 21.0125C9.52598 20.775 9.51348 19.9875 9.51348 19.15C7.00098 19.6125 6.35098 18.5375 6.15098 17.975C6.03848 17.6875 5.55098 16.8 5.12598 16.5625C4.77598 16.375 4.27598 15.9125 5.11348 15.9C5.90098 15.8875 6.46348 16.625 6.65098 16.925C7.55098 18.4375 8.98848 18.0125 9.56348 17.75C9.65098 17.1 9.91348 16.6625 10.201 16.4125C7.97598 16.1625 5.65098 15.3 5.65098 11.475C5.65098 10.3875 6.03848 9.4875 6.67598 8.7875C6.57598 8.5375 6.22598 7.5125 6.77598 6.1375C6.77598 6.1375 7.61348 5.875 9.52598 7.1625C10.326 6.9375 11.176 6.825 12.026 6.825C12.876 6.825 13.726 6.9375 14.526 7.1625C16.4385 5.8625 17.276 6.1375 17.276 6.1375C17.826 7.5125 17.476 8.5375 17.376 8.7875C18.0135 9.4875 18.401 10.375 18.401 11.475C18.401 15.3125 16.0635 16.1625 13.8385 16.4125C14.201 16.725 14.5135 17.325 14.5135 18.2625C14.5135 19.6 14.501 20.675 14.501 21.0125C14.501 21.275 14.6885 21.5875 15.1885 21.4875C19.259 20.1133 21.9999 16.2963 22.001 12C22.001 6.475 17.526 2 12.001 2Z'%3E%3C/path%3E%3C/svg%3E");
    margin-left: 10px;
}

#icon1:hover {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='32' height='32' fill='rgba(153, 217, 234,1)'%3E%3Cpath d='M12.001 2C6.47598 2 2.00098 6.475 2.00098 12C2.00098 16.425 4.86348 20.1625 8.83848 21.4875C9.33848 21.575 9.52598 21.275 9.52598 21.0125C9.52598 20.775 9.51348 19.9875 9.51348 19.15C7.00098 19.6125 6.35098 18.5375 6.15098 17.975C6.03848 17.6875 5.55098 16.8 5.12598 16.5625C4.77598 16.375 4.27598 15.9125 5.11348 15.9C5.90098 15.8875 6.46348 16.625 6.65098 16.925C7.55098 18.4375 8.98848 18.0125 9.56348 17.75C9.65098 17.1 9.91348 16.6625 10.201 16.4125C7.97598 16.1625 5.65098 15.3 5.65098 11.475C5.65098 10.3875 6.03848 9.4875 6.67598 8.7875C6.57598 8.5375 6.22598 7.5125 6.77598 6.1375C6.77598 6.1375 7.61348 5.875 9.52598 7.1625C10.326 6.9375 11.176 6.825 12.026 6.825C12.876 6.825 13.726 6.9375 14.526 7.1625C16.4385 5.8625 17.276 6.1375 17.276 6.1375C17.826 7.5125 17.476 8.5375 17.376 8.7875C18.0135 9.4875 18.401 10.375 18.401 11.475C18.401 15.3125 16.0635 16.1625 13.8385 16.4125C14.201 16.725 14.5135 17.325 14.5135 18.2625C14.5135 19.6 14.501 20.675 14.501 21.0125C14.501 21.275 14.6885 21.5875 15.1885 21.4875C19.259 20.1133 21.9999 16.2963 22.001 12C22.001 6.475 17.526 2 12.001 2Z'%3E%3C/path%3E%3C/svg%3E");
}

#icon2 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='32' height='32' fill='currentColor'%3E%3Cpath d='M12.001 9C10.3436 9 9.00098 10.3431 9.00098 12C9.00098 13.6573 10.3441 15 12.001 15C13.6583 15 15.001 13.6569 15.001 12C15.001 10.3427 13.6579 9 12.001 9ZM12.001 7C14.7614 7 17.001 9.2371 17.001 12C17.001 14.7605 14.7639 17 12.001 17C9.24051 17 7.00098 14.7629 7.00098 12C7.00098 9.23953 9.23808 7 12.001 7ZM18.501 6.74915C18.501 7.43926 17.9402 7.99917 17.251 7.99917C16.5609 7.99917 16.001 7.4384 16.001 6.74915C16.001 6.0599 16.5617 5.5 17.251 5.5C17.9393 5.49913 18.501 6.0599 18.501 6.74915ZM12.001 4C9.5265 4 9.12318 4.00655 7.97227 4.0578C7.18815 4.09461 6.66253 4.20007 6.17416 4.38967C5.74016 4.55799 5.42709 4.75898 5.09352 5.09255C4.75867 5.4274 4.55804 5.73963 4.3904 6.17383C4.20036 6.66332 4.09493 7.18811 4.05878 7.97115C4.00703 9.0752 4.00098 9.46105 4.00098 12C4.00098 14.4745 4.00753 14.8778 4.05877 16.0286C4.0956 16.8124 4.2012 17.3388 4.39034 17.826C4.5591 18.2606 4.7605 18.5744 5.09246 18.9064C5.42863 19.2421 5.74179 19.4434 6.17187 19.6094C6.66619 19.8005 7.19148 19.9061 7.97212 19.9422C9.07618 19.9939 9.46203 20 12.001 20C14.4755 20 14.8788 19.9934 16.0296 19.9422C16.8117 19.9055 17.3385 19.7996 17.827 19.6106C18.2604 19.4423 18.5752 19.2402 18.9074 18.9085C19.2436 18.5718 19.4445 18.2594 19.6107 17.8283C19.8013 17.3358 19.9071 16.8098 19.9432 16.0289C19.9949 14.9248 20.001 14.5389 20.001 12C20.001 9.52552 19.9944 9.12221 19.9432 7.97137C19.9064 7.18906 19.8005 6.66149 19.6113 6.17318C19.4434 5.74038 19.2417 5.42635 18.9084 5.09255C18.573 4.75715 18.2616 4.55693 17.8271 4.38942C17.338 4.19954 16.8124 4.09396 16.0298 4.05781C14.9258 4.00605 14.5399 4 12.001 4ZM12.001 2C14.7176 2 15.0568 2.01 16.1235 2.06C17.1876 2.10917 17.9135 2.2775 18.551 2.525C19.2101 2.77917 19.7668 3.1225 20.3226 3.67833C20.8776 4.23417 21.221 4.7925 21.476 5.45C21.7226 6.08667 21.891 6.81333 21.941 7.8775C21.9885 8.94417 22.001 9.28333 22.001 12C22.001 14.7167 21.991 15.0558 21.941 16.1225C21.8918 17.1867 21.7226 17.9125 21.476 18.55C21.2218 19.2092 20.8776 19.7658 20.3226 20.3217C19.7668 20.8767 19.2076 21.22 18.551 21.475C17.9135 21.7217 17.1876 21.89 16.1235 21.94C15.0568 21.9875 14.7176 22 12.001 22C9.28431 22 8.94514 21.99 7.87848 21.94C6.81431 21.8908 6.08931 21.7217 5.45098 21.475C4.79264 21.2208 4.23514 20.8767 3.67931 20.3217C3.12348 19.7658 2.78098 19.2067 2.52598 18.55C2.27848 17.9125 2.11098 17.1867 2.06098 16.1225C2.01348 15.0558 2.00098 14.7167 2.00098 12C2.00098 9.28333 2.01098 8.94417 2.06098 7.8775C2.11014 6.8125 2.27848 6.0875 2.52598 5.45C2.78014 4.79167 3.12348 4.23417 3.67931 3.67833C4.23514 3.1225 4.79348 2.78 5.45098 2.525C6.08848 2.2775 6.81348 2.11 7.87848 2.06C8.94514 2.0125 9.28431 2 12.001 2Z'%3E%3C/path%3E%3C/svg%3E");
    margin-left: 20px;
}

#icon2:hover {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='32' height='32' fill='rgba(153, 217, 234,1)'%3E%3Cpath d='M12.001 9C10.3436 9 9.00098 10.3431 9.00098 12C9.00098 13.6573 10.3441 15 12.001 15C13.6583 15 15.001 13.6569 15.001 12C15.001 10.3427 13.6579 9 12.001 9ZM12.001 7C14.7614 7 17.001 9.2371 17.001 12C17.001 14.7605 14.7639 17 12.001 17C9.24051 17 7.00098 14.7629 7.00098 12C7.00098 9.23953 9.23808 7 12.001 7ZM18.501 6.74915C18.501 7.43926 17.9402 7.99917 17.251 7.99917C16.5609 7.99917 16.001 7.4384 16.001 6.74915C16.001 6.0599 16.5617 5.5 17.251 5.5C17.9393 5.49913 18.501 6.0599 18.501 6.74915ZM12.001 4C9.5265 4 9.12318 4.00655 7.97227 4.0578C7.18815 4.09461 6.66253 4.20007 6.17416 4.38967C5.74016 4.55799 5.42709 4.75898 5.09352 5.09255C4.75867 5.4274 4.55804 5.73963 4.3904 6.17383C4.20036 6.66332 4.09493 7.18811 4.05878 7.97115C4.00703 9.0752 4.00098 9.46105 4.00098 12C4.00098 14.4745 4.00753 14.8778 4.05877 16.0286C4.0956 16.8124 4.2012 17.3388 4.39034 17.826C4.5591 18.2606 4.7605 18.5744 5.09246 18.9064C5.42863 19.2421 5.74179 19.4434 6.17187 19.6094C6.66619 19.8005 7.19148 19.9061 7.97212 19.9422C9.07618 19.9939 9.46203 20 12.001 20C14.4755 20 14.8788 19.9934 16.0296 19.9422C16.8117 19.9055 17.3385 19.7996 17.827 19.6106C18.2604 19.4423 18.5752 19.2402 18.9074 18.9085C19.2436 18.5718 19.4445 18.2594 19.6107 17.8283C19.8013 17.3358 19.9071 16.8098 19.9432 16.0289C19.9949 14.9248 20.001 14.5389 20.001 12C20.001 9.52552 19.9944 9.12221 19.9432 7.97137C19.9064 7.18906 19.8005 6.66149 19.6113 6.17318C19.4434 5.74038 19.2417 5.42635 18.9084 5.09255C18.573 4.75715 18.2616 4.55693 17.8271 4.38942C17.338 4.19954 16.8124 4.09396 16.0298 4.05781C14.9258 4.00605 14.5399 4 12.001 4ZM12.001 2C14.7176 2 15.0568 2.01 16.1235 2.06C17.1876 2.10917 17.9135 2.2775 18.551 2.525C19.2101 2.77917 19.7668 3.1225 20.3226 3.67833C20.8776 4.23417 21.221 4.7925 21.476 5.45C21.7226 6.08667 21.891 6.81333 21.941 7.8775C21.9885 8.94417 22.001 9.28333 22.001 12C22.001 14.7167 21.991 15.0558 21.941 16.1225C21.8918 17.1867 21.7226 17.9125 21.476 18.55C21.2218 19.2092 20.8776 19.7658 20.3226 20.3217C19.7668 20.8767 19.2076 21.22 18.551 21.475C17.9135 21.7217 17.1876 21.89 16.1235 21.94C15.0568 21.9875 14.7176 22 12.001 22C9.28431 22 8.94514 21.99 7.87848 21.94C6.81431 21.8908 6.08931 21.7217 5.45098 21.475C4.79264 21.2208 4.23514 20.8767 3.67931 20.3217C3.12348 19.7658 2.78098 19.2067 2.52598 18.55C2.27848 17.9125 2.11098 17.1867 2.06098 16.1225C2.01348 15.0558 2.00098 14.7167 2.00098 12C2.00098 9.28333 2.01098 8.94417 2.06098 7.8775C2.11014 6.8125 2.27848 6.0875 2.52598 5.45C2.78014 4.79167 3.12348 4.23417 3.67931 3.67833C4.23514 3.1225 4.79348 2.78 5.45098 2.525C6.08848 2.2775 6.81348 2.11 7.87848 2.06C8.94514 2.0125 9.28431 2 12.001 2Z'%3E%3C/path%3E%3C/svg%3E");
}

#icon3 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='32' height='32' fill='currentColor'%3E%3Cpath d='M10.4883 14.651L15.25 21H22.25L14.3917 10.5223L20.9308 3H18.2808L13.1643 8.88578L8.75 3H1.75L9.26086 13.0145L2.31915 21H4.96917L10.4883 14.651ZM16.25 19L5.75 5H7.75L18.25 19H16.25Z'%3E%3C/path%3E%3C/svg%3E");
    margin-left: 30px;
}

#icon3:hover {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='32' height='32' fill='rgba(153, 217, 234,1)'%3E%3Cpath d='M10.4883 14.651L15.25 21H22.25L14.3917 10.5223L20.9308 3H18.2808L13.1643 8.88578L8.75 3H1.75L9.26086 13.0145L2.31915 21H4.96917L10.4883 14.651ZM16.25 19L5.75 5H7.75L18.25 19H16.25Z'%3E%3C/path%3E%3C/svg%3E");
}

#icon4 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='32' height='32' fill='currentColor'%3E%3Cpath d='M13.001 19.9381C16.9473 19.446 20.001 16.0796 20.001 12C20.001 7.58172 16.4193 4 12.001 4C7.5827 4 4.00098 7.58172 4.00098 12C4.00098 16.0796 7.05467 19.446 11.001 19.9381V14H9.00098V12H11.001V10.3458C11.001 9.00855 11.1402 8.52362 11.4017 8.03473C11.6631 7.54584 12.0468 7.16216 12.5357 6.9007C12.9184 6.69604 13.3931 6.57252 14.2227 6.51954C14.5519 6.49851 14.9781 6.52533 15.501 6.6V8.5H15.001C14.0837 8.5 13.7052 8.54332 13.4789 8.66433C13.3386 8.73939 13.2404 8.83758 13.1653 8.97793C13.0443 9.20418 13.001 9.42853 13.001 10.3458V12H15.501L15.001 14H13.001V19.9381ZM12.001 22C6.47813 22 2.00098 17.5228 2.00098 12C2.00098 6.47715 6.47813 2 12.001 2C17.5238 2 22.001 6.47715 22.001 12C22.001 17.5228 17.5238 22 12.001 22Z'%3E%3C/path%3E%3C/svg%3E");
    margin-left: 40px;
}

#icon4:hover {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='32' height='32' fill='rgba(153, 217, 234,1)'%3E%3Cpath d='M13.001 19.9381C16.9473 19.446 20.001 16.0796 20.001 12C20.001 7.58172 16.4193 4 12.001 4C7.5827 4 4.00098 7.58172 4.00098 12C4.00098 16.0796 7.05467 19.446 11.001 19.9381V14H9.00098V12H11.001V10.3458C11.001 9.00855 11.1402 8.52362 11.4017 8.03473C11.6631 7.54584 12.0468 7.16216 12.5357 6.9007C12.9184 6.69604 13.3931 6.57252 14.2227 6.51954C14.5519 6.49851 14.9781 6.52533 15.501 6.6V8.5H15.001C14.0837 8.5 13.7052 8.54332 13.4789 8.66433C13.3386 8.73939 13.2404 8.83758 13.1653 8.97793C13.0443 9.20418 13.001 9.42853 13.001 10.3458V12H15.501L15.001 14H13.001V19.9381ZM12.001 22C6.47813 22 2.00098 17.5228 2.00098 12C2.00098 6.47715 6.47813 2 12.001 2C17.5238 2 22.001 6.47715 22.001 12C22.001 17.5228 17.5238 22 12.001 22Z'%3E%3C/path%3E%3C/svg%3E");
}

#Services {
    height: 80%;
    width: 100%;
    background-color: var(--color3);
}

#s-header {
    height: 20%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#s-header h1 {
    height: auto;
    width: auto;
}

#services-card {
    display: flex;
    flex-wrap: wrap;
    height: 80%;
    width: 100%;
    align-items: center;
    justify-content: space-evenly;
    padding-bottom: 30px;

}

.s-card {
    height: auto;
    padding: 30px 0;
    width: 20%;
    box-shadow: 5px 5px var(--color2);
    color: #000000;
    border: 2px solid black;
    transition: all 0.5s ease-in-out;
    border-radius: 68% 32% 67% 33% / 47% 55% 45% 53%;
}

.s-card:hover {
    transform: scale(1.1);
}

.c-header {
    height: 20%;
    width: 100%;
}

.c-header h2 {
    width: auto;
    height: auto;
    margin-left: 10px;
    margin-top: 10px;
    color: var(--color1);
}

.c-main {
    margin-left: 40px;
    height: auto;
    width: auto;
}

.c-main h4 {
    height: 15%;
    width: 100%;
    margin-left: 10px;
    margin-bottom: 7px;
}

.c-main ul {
    height: 90%;
    width: 100%;
    margin-left: 20px;
}

.c-main ul li {
    margin-left: 20px;
    height: auto;
}

.c-footer {
    height: auto;
    width: auto;
    margin-left: 40px;
    margin-top: -15px;
}

.c-footer h4 {
    height: auto;
    margin-top: 20px;
    margin-left: 10px;
}

.c-footer h4 a {
    text-decoration: none;
    color: var(--color1);

}

#project {
    height: 80%;
    width: 100%;
    background-color: var(--color3);
}

#p-header {
    height: 20%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#p-header h1 {
    height: auto;
    width: auto;
}

#project-card {
    display: flex;
    height: 80%;
    width: 100%;
    align-items: center;
    justify-content: space-evenly;

}

.p-card {
    height: auto;
    width: 20%;
    padding-bottom: 10px;
    box-shadow: 5px 5px var(--color2);
    border-radius: 68% 32% 67% 33% / 47% 55% 45% 53%;
    color: #000000;
    border: 2px solid black;
    transition: all 0.5s ease-in-out;
}

.p-card:hover {
    transform: scale(1.1);
}

.p-card-header {
    height: auto;
    width: 100%;
    margin-top: -20px;
}

.p-card-header h2 {
    margin: 40px 0px 0px 20px;
    width: auto;
    height: auto;
    color: var(--color1);
}

.p-card-main {
    height: auto;
    width: 85%;
    margin-left: 18px;
    margin-top: 20px;
    margin-bottom: 20px;

}

.p-card-main p {
    width: auto;
    text-align: justify;
    overflow: hidden;
}

.p-card-footer {
    height: auto;
    width: auto;
    display: inline;
    margin-left: 80px;
}

.p-card-footer a {
    text-decoration: none;
    color: var(--color1);
}

.p-card-footer h4 {
    width: auto;
    height: auto;
    display: inline;
}


#myskills {
    height: 80%;
    width: 100%;
    background-color: var(--color3);
    display: flex;
    flex-direction: column;
}

#skill-heading {
    width: 100%;
    height: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 50px;
}

#skill-heading h1 {
    width: auto;
    height: auto;
}

#skill-content {
    width: 100%;
    height: 80%;
}

#row1 {
    width: 100%;
    height: 50%;
    display: flex;
    justify-content: space-evenly;
    gap: 20px;
}

#row2 {
    width: 100%;
    height: 50%;
    display: flex;
    justify-content: space-evenly;
    gap: 20px;
}

.skill-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    height: 100px;
    width: 25%;
    box-shadow: 5px 5px var(--grey);
    border-radius: 10px;
    border: 1px solid var(--color1);
}

.skill-container img {
    height: 20px;
    position: relative;
    top: 30px;
    left: -140px;

}

.skill-container h4 {
    width: auto;
    height: auto;
    margin-left: 55px;
}

.skill-container .skill-text {
    margin-left: 60px;
}

.progress-container {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-left: 5px;
}

.progress-container p {
    width: auto;
    height: auto;
}

.progress-bar {
    width: 80%;
    height: 8px;
    display: flex;
    align-items: center;
    background-color: var(--grey);
    border-radius: 10px;
}

.progress {
    height: 8px;
    border-radius: 10px;
}

.progress1 {
    width: 70%;
    background-color: var(--color1);
}

.progress2 {
    width: 40%;
    background-color: var(--color1);
}

.progress3 {
    width: 10%;
    background-color: var(--color1);
}

.progress4 {
    width: 5%;
    background-color: var(--color1);
}

.progress5 {
    width: 5%;
    background-color: var(--color1);
}

.progress6 {
    width: 50%;
    background-color: var(--color1);
}

#reviews {
    height: 80%;
    width: 100%;
    background-color: var(--color3);
}

#reviews-heading {
    width: 100%;
    height: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#reviews-heading h1 {
    width: auto;
    height: auto;
    margin-top: 50px;
}

#reviews-content {
    width: 100%;
    height: 80%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.reviews-card {
    width: 20%;
    height: 60%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 5px 5px var(--grey);
    border: 1px solid var(--color1);
    border-radius: 10px;
    padding-top: 20px;
}

.reviews-card-header {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 35px;
}

.avatar {
    width: 50px;
    height: 50px;
}

.avatar img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}

.customer-detail {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: auto;
    height: 50px;
}

.customer-detail h3 {
    height: auto;
    width: auto;
    color: var(--color1);
}

.customer-detail p {
    height: auto;
    width: auto;
    color: var(--grey);
}

.reviews-card-body {
    width: 80%;
    height: auto;
    display: flex;
    margin-left: 28px;
}

.reviews-card-body p {
    text-align: justify;
    font-weight: lighter;
}

.reviews-card-footer {
    width: 100%;
    height: auto;
}

.reviews-card-footer p {
    width: auto;
    height: auto;
    display: inline;
    margin-left: 26px;
}


#form-box {
    display: none;
    z-index: 99;
    background-color: white;
    position: fixed;
    height: auto;
    width: 24vw;
    top: 25vh;
    right: 10vw;
    padding: 1vw;
    border-radius: 40px;
}

#form-box fieldset {
    border: none;
}

#form-box label {
    font-weight: bold;
    margin-bottom: 10vh;
}

#form-box input {
    padding: 0 1vw;
    margin: 1vh 0;
    border-radius: 20px;
    border: none;
    background-color: var(--grey);
    height: 40px;
    font-weight: 600;
    transition: all 0.3s ease-in-out;
}

#form-box .form-btn:hover {
    transform: scale(1.05);
    background-color: var(--color1);
    color: white;
}

#form-box #closebtn {
    position: relative;
    right: -280px;
    cursor: pointer;
}

.form-bg {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 0;
    background-color: rgba(0, 0, 0, 0.466);
    display: none;
}

@media (max-width: 600px) {
    #header {
        height: 10vh;
    }

    #header i {
        height: auto;
        width: auto;
        display: block;
        font-size: 30px;
        margin-left: 30px;
    }

    #fakeheader {
        height: 10vh;
    }

    #nav {
        display: none;
    }

    #nav-phone {
        position: fixed;
        background-color: white;
        z-index: 99;
        height: 80vh;
        width: 100vw;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    #nav-phone ul{
        margin-top: 10vh;
        height: 60vh;
        width: 100vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
    }
    #nav-phone ul li{
        list-style: none;
        height: auto;
        width: auto;
    }
    #nav-phone ul li a{
        text-decoration: none;
        height: auto;
        width: auto;
    }
    #nav-phone ul li a h4{
        color: black;
        font-size: 30px;
    }
    #nav-phone h1{
        position: absolute;
        top: 25px;
        right: -85vw;
        
    }
    #logo {
        margin: 0;
        margin-right: 20px;
        width: 40vw;
    }

    #logo-text {
        width: auto;
        margin-left: 40px;
        font-size: 15px;
    }

    #hirebtn {
        width: 40vw;
        margin: 0;
    }

    #content {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        width: 100vw;
        margin-top: -10vh;
    }

    #left-content {
        height: 30vh;
        width: 35vw;
        margin-left: 45px;
    }

    #main-img img {
        width: 35vw;
    }

    #right-content {
        width: 100vw;
        min-height: 70vh;
    }

    #heading {
        width: 40vw;
        height: auto;
        position: relative;
        top: -190px;
        right: -215px;
        overflow: hidden;
    }

    #heading #h-content h1 {
        text-align: center;
        font-size: 40px;
    }

    #body-text {
        width: 90vw;
    }

    #body-text p {
        margin-top: -80px;
        margin-left: 40px;
    }

    #button {
        width: 100vw;
        height: 20vh;
        margin-left: 0;
        padding: 0 auto;
    }

    #dnbtn {
        margin: auto;
        width: 70vw;
        height: 5vh;
        border-radius: 100px;
    }

    #sm {
        width: auto;
        height: 10vh;
        margin-left: 60px;

    }

    .icon {
        scale: 1.5;

    }

    #icon1 {
        margin-left: 0px;
    }

    #icon2 {
        margin-left: 0px;
    }

    #icon3 {
        margin-left: 0px;
    }

    #icon4 {
        margin-left: 0px;
    }

    #Services {
        margin-top: 100px;
        min-height: 100vh;
        width: 100vw;
    }

    #services-card {
        flex-direction: column;
        min-height: 150vh;
        width: 100vw;
        justify-items: center;
    }

    .s-card {
        height: 30vh;
        width: 70vw;
        margin: auto;
    }

    #project {
        margin-top: 65vh;
        min-height: 100vh;
        width: 100vw;
    }

    #project-card {
        flex-direction: column;
        min-height: 150vh;
        width: 100vw;
        justify-items: center;
    }

    .p-card {
        height: 30vh;
        width: 70vw;
        margin: auto;
    }

    #myskills {
        margin-top: 75vh;
        min-height: 100vh;
        width: 100vw;
    }

    #skill-content {
        width: 100vw;
        height: 100vh;
    }

    #row1 {
        width: 100vw;
        height: 50vh;
        flex-direction: column;
        justify-items: center;
    }

    #row2 {
        width: 100vw;
        height: 50vh;
        flex-direction: column;
    }

    .skill-container {
        margin: auto;
        height: 100px;
        width: 80vw;
    }

    #reviews {
        margin-top: 10vh;
        min-height: 100vh;
        width: 100vw;
    }

    #reviews-heading {
        width: 100vw;
    }

    #reviews-heading h1 {
        margin: auto;
        text-align: center;
    }

    #reviews-content {
        width: 100vw;
        height: 150vh;
        flex-direction: column;
    }

    .reviews-card {
        width: 80vw;
        height: 30vh;
    }

    #form-box {
        padding: 4vh 10vw;
        width: 90vw;
        right: 5vw;
    }

    #form-box #closebtn {
        top: 15px;
    }
}