* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;
  box-shadow: none;
}

html {
  scroll-behavior: auto !important;
}

body {
  position: relative;
  background-image: linear-gradient(270deg, #f9f5ff 0%, #edf1ff 49%, #eff5ff 100%);
  color: #102030;
  font-family: "Nunito Sans" !important;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.5;
  text-align: justify;
  overflow-x: hidden;
}

p{
font-size: 22px;
line-height: 34px;
color: #272727;
font-weight: 400;
font-family: "Nunito Sans";
}

span{
font-size: 20px;
line-height: 34px;
color: #3856e9;;
font-weight: 400;
font-family: "Nunito Sans";
}

img{
     max-width: 100%;
}

a{
  text-decoration: none !important;
}

input {
    border-radius: 4px;
    border: 1px solid #d0e3ec;
    padding: 1rem;
}

.small-text{
  font-size: 14px;
  color: #272727;
font-weight: 400;
font-family: "Nunito Sans";
margin-bottom: 0;
}

.section-gap{
    margin: 4rem 0;
}

.heading{
font-size: 36px;
color: #102030;
font-family: "Merriweather";
}

.heading span{
font-size: 36px;
color: #3856e9;
font-family: "Merriweather";
}

.subheading{
font-size: 30px;
color: #102030;
font-family: "Merriweather";
text-align: center;
}

.subheading2{
font-size: 20px;
font-family: "Merriweather";
}

.primary-btn{
    display: inline-flex;
    align-items: center;
    border: none;
    padding: 0.5rem 0.8rem;
    cursor: pointer;
    background-image: linear-gradient(270deg, #9333e9 0%, #2563eb 100%);
}

.primary-btn a{
    font-size: 16px;
    color: #fff;
    text-decoration: none;
}

.primary-btn img {
    margin-left: 0.5rem;
    color: #ffffff;
}

/* header{
position: sticky !important;
top: 2rem;
z-index: 1000 !important;
} */

header{
  position: relative;
  top: 2rem;
}

.header{  
display: flex;
align-items: center;
justify-content: space-between;
height: 88px;
border-radius: 14px;
filter: drop-shadow(-7.308px -3.254px 19px rgba(45,45,45,0.07));
background-color: #ffffff;
border: 1px solid #d0e3ec; 
padding: 0 1rem;
}

.header-right{
display: flex;
justify-content: space-between;
align-items: center;
}

.header-profile{ 
display: flex;
align-items: center;
justify-content:flex-start;
padding: 0 1rem;  
margin: 0 1rem;
border-radius: 4px;
background-color: #edf3ff;
}

.profile-icon{
  display: flex;
  align-items: center;
  justify-content: center;
width: 33px;
height: 33px;
border-radius: 16px;
background-image: linear-gradient(270deg, #9333e9 0%, #2563eb 100%);
margin-right: 0.3rem;
}

.profile-text h4{
font-size: 18px;
line-height: 10px;
color: #272727;
font-weight: 400;
font-family: "Nunito Sans";
margin-bottom: 0;
margin-top: 1rem;
}

.profile-text p{
  line-height: 34px;
}


.dashboard .projects{
border-radius: 10px;
filter: drop-shadow(-4.774px 5.119px 8px rgba(30,46,86,0.11));
background-color: #ffffff;
border: 1px solid #d0e3ec;
}

.project-bar{
  display: flex;
  align-items: center;
  padding: 1rem;
}

.project-bar img{
  cursor: pointer;
  width: 30px;
  margin-right: 1rem;
}

.project-boxes .item{
padding: 1.5rem;
border-radius: 10px;
filter: drop-shadow(-4.774px 5.119px 8px rgba(30,46,86,0.11));
background-color: #ffffff;
border: 1px solid #d0e3ec;
cursor: pointer;
}

.project-boxes .item:hover{
color: #fff !important;    
background-image: linear-gradient(270deg, #000000 0%, #000000 22%, #111727 48%, #1f2937 81%, #1f2937 100%);
}

.project-boxes .item .box1{
display: flex;
align-items: center;
justify-content: space-between;
}

.project-boxes .item .circle{
  display: flex;
  align-items: center;
  justify-content: center;
position: relative;
width: 70px;
height: 70px;
border-radius: 35px;
background-color: #122030;
}

.project-boxes .item .circle svg{
  position: absolute;
  padding: 1rem;
}


.table-wrapper {
  overflow: hidden;
  border-radius: 10px;
filter: drop-shadow(-4.774px 5.119px 8px rgba(30,46,86,0.11));
background-color: #ffffff;
border: 1px solid #d0e3ec;
padding: 1rem;
}

table{
 border-collapse: separate !important; 
  border-spacing: 0 10px !important;
  cursor: pointer;
  margin: 0 !important;
}

table th{
  font-family: 'Merriweather';
}

table tr td:first-child {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

table tr td:last-child {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

table tr td{
  background-color: #edf3ff !important;
}

td img{
  margin-right: 0.5rem;
}

th, td {
    border: none !important;
}

.table>:not(caption)>*>* {
    padding: 1rem !important;
}



footer{
    background-image: linear-gradient(270deg, #000000 0%, #000000 22%, #111727 48%, #1f2937 81%, #1f2937 100%);
    width: 100%;
}

footer hr{
    border-top: 1px solid #fff !important;
}

.footer-text{
    padding: 4rem;
}

.footer-text .text1 p{
  font-family: 'Merriweather';
  font-size: 30px;
  color: #fff;
}

.footer-text .text1 span{
font-size: 30px;
line-height: 46px;
color: #3856e9;
font-family: "Merriweather";
}


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

.footer-last-line p{
font-size: 15px;
line-height: 24px;
color: #ffffff;
font-weight: 400;
font-family: "Nunito Sans";
margin-bottom: 0;
}

.footer-last-line a{
  text-decoration: underline !important;
  color: #fff;
}

.footer-links-hr{
  height: 30px;
  width: 2px;
  border: 1px solid #fff !important;
  margin: 0 1rem;
}

.footer-last-line .footer-links i{
    color: #fff;
    margin-right: 0.5rem;
}







/* login page */

.login-bg{
  position: absolute;
  right: 0;
  width: 70%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

.login-bg img{
  width: 100%;
  height: 100%;
}

.login-header-right{
  display: flex;
  align-items: center;
}

.green-text{
  display: flex;
  align-items: center;
  border: 1px solid #38c134;
  border-radius: 20px;
  padding: 0rem 1rem;
}

.green-text img{
  width: 20px;
  margin-right: 0.3rem;
}

.green-text p{
  font-size: 18px;
line-height: 34px;
color: #38c134;
font-weight: 600;
font-family: "Nunito Sans";
text-align: center;
margin-bottom: 0;
}

.login-header-links{
  margin-left: 2rem;
}

.login-header-links a{
    color: #102030 !important;
}

.login-header-links i{
  margin-left: 1rem;
}

.login-heading{
font-size: 50px;
color: #102030;
font-family: "Merriweather";
}

.login-heading span{
  font-size: 50px;
color: #3856e9;
font-family: "Merriweather";
}

.login-detail{
  width: 45%;
  z-index: 9999 !important;
}

.login-box{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 50%;
border-radius: 10px;
filter: drop-shadow(-4.774px 5.119px 8px rgba(30,46,86,0.11));
background-color: #ffffff;
border: 1px solid #d0e3ec;
padding: 1rem;
}

.login-box .circle{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 91px;
height: 91px;
border-radius: 46px;
background-color: #e7e7e7;
}

.input-icon-wrapper img {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    pointer-events: none;
}

.input-icon-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
}

.input-icon-wrapper input {
    padding-left: 40px;
    width: inherit;
    border-radius: 5px;
}

.checkbox span{
  font-size: 16px;
line-height: 34px;
color: #272727;
font-weight: 400;
font-family: "Nunito Sans";
}

.right a{
  text-decoration: none;
  font-size: 16px;
line-height: 34px;
color: #272727;
font-weight: 400;
font-family: "Nunito Sans";
}

.login-hr{
  height: 2px;
  width: 100%;
  border: 1px solid #d0e3ec;
  margin: 1rem 0;
}





/* payment confirmation */

.pay_inner_box {
    background-color: #fff;
    border-radius: 10px;
    filter: drop-shadow(-4.774px 5.119px 8px rgba(30, 46, 86, 0.11));
}

.pay-info {
    font-size: 20px;
    line-height: 34px;
    color: #102030;
    font-weight: 400;
    font-family: "Nunito Sans";
}

.pay-info .info-value {
    opacity: 0.702;
    text-indent: 10px;
}

.info-value {
font-size: 20px;
line-height: 34px;
color: #102030;
font-weight: 400;
font-family: "Nunito Sans";
margin-left: 0.5rem;
}

.checkbox-text{
opacity: 0.702;
font-size: 17px;
line-height: 34px;
color: #102030;
font-weight: 400;
font-family: "Nunito Sans";
margin-left: 1rem;
}

.table-result{
  position: absolute;
  right: 11%;
}

.table-result span{
  padding: 1rem 2rem;
}

/*.box1:hover {
    background-color: gray;
}*/

    .box1:hover .project-boxes .item .circle {
        background-color: #ffffff;
    }

    .box1:hover h5 {
        color: #fff; /* text color change on hover */
    }

    .box1:hover svg {
        fill: #2ecc71; /* icon color change on hover */
    }