*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* font-family: 'Poppins', sans-serif; */
    font-family:'Gill Sans', Calibri, 'Trebuchet MS', sans-serif;
    /* font-family: 'Arial'; */
    /* border-style: solid; */
}

abbr{
    text-decoration:none;
    cursor: pointer;
}

html{
    scroll-behavior: smooth;
}

body.dark {
    background-color: #333;
  }
  body.dark {
    --white-color: #333;
    --blue-color: #ffffff;
    --grey-color: #918f8f;
    --blue-hover-color: rgb(255, 255, 255);
    
  }
 
:root{
    --price:hsla(180, 100%, 50%, 0.149);
    --background: linear-gradient(to bottom, rgb(2, 28, 122) 0%, rgb(36, 83, 255) 100%);
    --button:#ff7300;
    --white:#fff;
    --gray:rgb(120, 120, 129);
    --dropmenu: gray;
    --text:rgba(255, 255, 255, 0.623);
    --main:#1b4242;
    --form:#9ec8b9;
    --fileinput: #ff0095a1;
    --emailinput: #f6f5f79a;
    --formbtn: rgba(255, 166, 0, 0.774);
    --downloadbtn:rgba(89, 248, 26, 0.603);
    --header-color: rgb(2, 28, 122);

    --grey-color: #ebebeb;
    --white-color: rgb(2, 28, 122);
    --blue-color: rgb(255, 106, 0);
    --blue-hover-color: rgb(36, 83, 255);

    --lightblack : rgba(0, 0, 0, 0.164);
}
.dump{
    width: 100%;
    height: 100vh;
    background: #c6ceff;
}

body{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: var(--background);
    
}

html::-webkit-scrollbar{
    width: 10px;
    background: rgb(2, 28, 122);
}
html::-webkit-scrollbar-thumb{
    background: var(--gray);
    border-radius: 10px;
}
html::-webkit-scrollbar-track:active{
    background: rgba(2, 28, 122, 0.871);
    border-radius: 10px;
}

li{
    list-style: none; 
}

a{
    text-decoration: none;
    color: var(--white);
    font-size: 1rem;
    transition: .6s;
}

a:hover{
    color: var(--button);
}
a:active{
    color: black;
}
hgroup{
    padding: .5rem;
    font-size: 2.5rem;
    font-weight: bold;
    color: var(--text);
    text-shadow: 2px 2px 4px rgba(0,0,0,.2);
}

p{
    padding: .5rem;
    font-size: 1rem;
    font-weight: 300;
    letter-spacing: 1px;
    color: var(--text);
}

/* header */

.space{
    padding: 2rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.space1{
    padding: 3rem;
    width: 100%;
}

header{
    /* background-color: var(--header-color); */
    position: sticky;
    top: 0;
    padding: 0 2rem;
    width: 100%;
    z-index: 3;
    transition: background-color 0.6s ease;
}
.sv-pg{
    padding: 0 .5rem;
    background-color: rgb(2, 28, 122);
    box-shadow: 0 0 1px var(--grey-color);

}

.black_ {
    background-color: rgb(2, 28, 122);
    transition: background-color 0.3s ease;
}

.black_.scrolled {
     background-color: rgba(2, 28, 122, 0.747);  
    backdrop-filter: blur(10px);
}

.navbar{
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 1000;
}
/* .navbar_content{
    border: 1px solid red;
} */
.navbar .logo a{
    font-size: 1.3rem;
    font-weight: bold;
    margin-top: .4rem;
    /* font-size: 1.5rem;
    font-weight: bold; */
}
.inno{
    color: var(--blue-color);
}
.navbar .logo{
    display: flex;
    gap: .6rem;
    align-items: center;

}
.navbar .logo img{
    width : 42px;
    height : 34px;
    margin-bottom: .2rem;
}


.navbar .links {
    display: flex;
    gap: 2rem;
}

.sign-inup{
    display: flex;
    align-items: center;
    gap: 1rem;
}

.credit-count{
    color: white;
    font-size: small;
    margin-right: .5rem;
}
.sign-inup a span:hover{
    color: var(--button);
    transition: .6s;
}

.navbar .toggle_btn{
    color:var(--white);
    font-size: 1.5rem;
    cursor: pointer;
    display: none;
}

.action_btn{
    background-color: var(--button);
    color: var(--white);
    padding: 0.5rem 1rem;
    border: none;
    outline: none;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: bold;
    cursor: pointer;
    transition: scale 0.2 ease;
    border: 1px solid orangered;
}


.action_btn:hover{
    scale: 1.05;
    transition: .6s;
    border: 1.5px solid var(--white);
    color: #fff;
}
.action_btn:active{
    background-color: rgb(241, 190, 172);
    color: #000000;
}

/* dropdown menu*/

.dropdown_menu{
    background-color: rgba(2, 28, 122, 0.878);
    width: 250px;
    height: 0;
    border-radius: 15px;
    backdrop-filter: blur(20px);
    display: none;
    position: absolute;
    right: 2rem;
    transition: height 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    overflow: hidden;
    
}

.dropdown_menu.open{
    /* height: 260px; */
    height: fit-content;
}

.dropdown_menu li{
    padding: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;

}

.dropdown_menu .action_btn{
    width: 60%;
    display: flex;
    justify-content: center;
}

/* Responsive design */

/* dropdown menu */

@media(max-width: 500px){
    .navbar .links,
    .navbar .sign-inup{
        display: none;
    }

    .navbar .toggle_btn{
        display: block;
    }

    .dropdown_menu{
        display: block;
    }
}
@media(max-width:576px){
    .dropdown_menu{
        left: 2rem;
        width: unset;
    }
}



.back-color-{
    /* background-color: rgb(230, 228, 228); */
    background-color: rgb(244, 242, 242);
}
/* top content */

.topcontent{
    width: fit-content;
    height: fit-content;
    padding: 0 2rem 1rem;
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 1rem;
    border-radius:100% 0% 100% 0% / 0% 0% 100% 100%  ;
    /* box-shadow: 0 1px 10px orangered; */
    background: linear-gradient(to bottom, rgb(2, 28, 122) 0%, rgb(36, 83, 255) 100%);

}
.topcontent .top-img{
    padding: 0;
}
.topcontent .top-img img{
    width: 100%;
    height: 100%;
    filter: drop-shadow(1px 1px 5px rgba(0, 0, 0, 0.749));
}

.topcontent p:nth-child(2){
    text-align: center;
    margin-bottom: 1rem;
}
.topcontent p{
    font-size: small;
    color: rgba(255, 255, 255, 0.758);
}
.topcontent hgroup{
    color: rgba(255, 255, 255, 0.758);
}

.topcontent .grid-p{
    /* display: grid;
    grid-template-columns: 3fr .5fr; */
    margin-bottom: 1rem;
}

.topcontent .btn{
    padding: 1rem;
}
.topcontent .btn .action_btn1{
    background-color: var(--button);
    padding: .7rem 3rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: bold;
    cursor: pointer;
    border: 1px solid orangered;
    transition: scale 0.2 ease;
}

.topcontent .btn .action_btn1:hover{
    scale: 1.05;
    transition: .6s;
    border: 1.5px solid var(--white);
    color: #fff;
}
.topcontent .btn .action_btn1:active{
    background-color: rgb(241, 190, 172);
    color: #000000;
}

@media(max-width:650px){
    .topcontent {
        display: flex;
        flex-direction: column;
        padding: 0 1rem;
    }
    .topcontent .grid-p{
        color: #ffffff;
    }
    .topcontent .btn {
        text-align: center;
    }
    .topcontent .btn .action_btn1{
        padding: .5rem 5rem;
        font-size: medium;
    }
}

/* middle content*/




main{
    /* background-color: var(--main); */
    /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.539);
    margin: 4rem 2rem 2rem 2rem;
    padding-top: 2.5rem;
    border-radius: 20px; */
}

.democheck{
    padding: 1rem;
}

.democheck hgroup{
    padding: 2rem 2rem 0;
    text-align: center;
    color: #000000b4;
    
}

.democheck p{
    padding-bottom: 3rem;
    text-align: center;
    color: #000000b4;
    letter-spacing: normal;
}

.mailform {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    overflow: hidden;
}
.mailform p{
    margin: 0;
    padding: 0;
}

.mailform form {
    /* position: absolute; */
    width: 60%;
    height: fit-content;
    display: flex;
    flex-direction: column;
    padding: 2.5rem 1rem;
    background-color: rgb(244, 242, 242);
    /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); */
    transition: transform 0.9s ease;
    z-index: 2;
    transition-delay: 1s;
}

.mailform form h4{
    text-align: center;
    color: #000000b4;
    padding-bottom: 1rem;
}
.mailform form div {
    display: flex;
    justify-content: end;
    border: 1px solid white;
    border-radius: 5px;
    /* margin-right: 1rem; */
}
.mailform form div input{
    width: 70%;
    height: 3.5rem;
    border-radius: 5px 0 0 5px;
    border: 1.5px solid var(--button);
    background-color: rgb(241, 190, 172);
    outline: none;
    color: rgb(0, 0, 0);
    font-size: medium;
    text-align: center;
    cursor: pointer;
    font-weight: bold;
} 

.mailform form div button{
    width: 30%;
    height: 3.5rem;
    border: 1.5px solid var(--button);
    cursor: pointer;
    background-color: var(--button);
    color: rgb(255, 255, 255);
    border-radius: 0 5px 5px 0;
    font-size: medium;
    font-weight: bold;
    transform: .6s;
}
.mailform form div button:hover{
    scale: 1.05;
    transition: .6s;
    border: 1.5px solid var(--white);
    color: #fff;
}
.mailform form div button:active{
    background-color: rgb(241, 190, 172);
    color: #000000;
}
.mailform form p{
    margin: 0;
    padding: 1rem;
    font-size: .9rem;
    letter-spacing: normal;
} 

.mailform.active form {
    transform: translateX(-35%);
}

.mailform.active .result {
    transform: translateX(75%);
    opacity: 1;
}


/* mail result */

.mailform .result {
    position: absolute;
    width: 40%;
    height: fit-content;
    margin: 0 1rem 1rem;
    padding: 0 1rem 1rem;
    text-align: center;
    /* background-color: rgb(241, 190, 172);
    border: 1.5px solid #ff4500; */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.9s ease;
    z-index: 1;
    transition-delay: 1s;
    /* opacity: 0; */
}

.mailform .result.Valid {
    background-color: #d4edda;
    border: 1.5px solid #28a745;
}

.mailform .result.Invalid {
    background-color: #f8d7da;
    border: 1.5px solid #dc3545;
}

.mailform .result.Risky {
    background-color: #fff3cd;
    border: 1.5px solid #ffc107;
}

.mailform .result .result-close{
    margin: .5rem;
    padding: .3rem;
    outline: none;
    border: none;
    border-radius: 5px;
    background-color: #f6f5f7cf ;
    box-shadow: 0 1px 3px rgba(75, 74, 74, 0.539);
    margin-left: 97%;
    transition: .6s;
}
.mailform .result .result-close:hover{
    scale: 1.05;
    transition: .6s;
    background-color: var(--button);
    border: 1.5px solid var(--white);
    color: #fff;
}
.mailform .result .result-close:active{
    background-color: rgb(241, 190, 172);
    color: #000000;
}
.result h2{
    background-color: rgb(241, 235, 235);
    border-radius: 5px;
    color: rgba(0, 0, 0, 0.716);
    text-shadow: 1px 1px 2px rgba(0,0,0,.2);
    text-align: center;
    padding: 1rem;
} 

.result .mailresult{
    /* border: 1px solid rgba(255, 255, 255, 0.801); */
    display: grid;
    grid-template-rows: 1fr 1fr;
    align-items: center;
    /* background-color: var(--text); */
   
}
.mailresult .st{
    display: grid;
    padding: .5rem 1rem;
    grid-template-columns: 1fr .5fr 2fr;
    border: 1px solid rgba(255, 255, 255, 0.801);
    background-color: var(--text);
}
.mailresult .st label{
    color: #050505;
    font-size: 14px;
    font-weight: bolder;
}
.mailresult .st p{
    color: #000000e3;
    font-size: 14px;
    font-weight: 500 ;
    letter-spacing: normal;
}



@media(max-width:750px){
    main{
        margin: 0;
    }
    .democheck{
        padding: .3rem;
    }
    .democheck hgroup{
        padding: 0;
    }
    .mailform form{
        padding: 0;
        width: 90%;
    }
    .mailform form div input {
        font-size: small;
    }
    .mailresult .st label ,p{
        font-size: small;
    }
    .mailform .result{
        position: relative;
        width: 90%;
    }
    .mailform.active form {
        transform: translateY(0);
    }
    
    .mailform.active .result {
        transform: translateY(0%);
        opacity: 1;
    }
    .result h2 {
        font-size: medium;
    }
}


@media(max-width:900px){
    .mailform .mailresult{
        display: flex;
        flex-direction: column;
        row-gap: 1rem;
    }
}




.list-valid{
    border: 1px solid orangered;
    margin: 3rem 2rem 2rem;
    padding: 2rem 1rem 1rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    border-radius: 8px;
}
.list-valid .list-img img{
    width: 90%;
    height: 90%;
    filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.74));
}

.list-valid .validation{
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.list-valid .validation hgroup{
    padding-top: 1.5rem;
    text-align: center;
    
}

 .list-valid.validation p{
    padding: 2rem;
    text-align: center;
}

.list-valid .validation a{
    padding: .5rem 1.5rem;
    border: 1px solid rgb(255, 255, 255);
    cursor: pointer;
    background-color: var(--button);
    color: rgb(255, 255, 255);
    border-radius: 8px;
    font-size: 15px;
    font-weight: bold;
    transition: .6s;

}
.list-valid .validation a:hover{
    scale: 1.05;
    transition: .6s;
    border: 1.5px solid var(--white);
    color: #fff;
} 


.list-valid .validation a:active{
    background-color: rgb(241, 190, 172);
    color: #000000
}

@media(max-width:750px){
    .list-valid{
        margin: 0;
        margin-top: 2rem;
        display: flex;
        flex-direction: column;
    }
}

.validation form {
    width: 70%;
    background-color: var(--form);
    padding: 1rem;
    border-radius: 20px;
    margin: 1rem 0 rem;
}

.validation form div{
    display: flex;
    justify-content: center;
}

.validation form div button{
    width: 20%;
    height: 2.5rem;
    border: 2px solid rgba(255, 255, 255, 0.555);
    cursor: pointer;
    background-color: var(--formbtn);
    color: rgba(255, 255, 255, 0.603);
    border-radius: 5px;
    font-size: 17px;
    font-weight: bold;
    margin: .7rem 2rem;
    transition: .6s;
}

.validation form div button:hover{
    scale: 1.05;
    color: #fff;
}

.validation form div label {
    display: block;
  }
  
.validation form p{
    margin: 0;
    padding: 0;
    align-self: center;
    color: var(--main);
}

 input[type="file"] {
    display: none;

  }
  .validation .custom-file-upload {
    width: 45%;
    height: 2.7rem;
    border: 2px solid rgba(255, 255, 255, 0.555);
    padding: 10px;
    cursor: pointer;
    background-color: var(--fileinput);
    color: rgba(255, 255, 255, 0.603);
    border-radius: 5px;
    font-size: 17px;
    text-align: center;
    font-weight: bold;
    margin: .7rem 2rem;
    transition: .6s;
}

.validation .custom-file-upload:hover{
    scale: 1.05;
    color: #fff;
}

/* download button */

 



/* piechart */


.pie_count{
    /* border-style: solid; */
    display: flex;
    justify-content: space-around;
    /* background-color: #00b7ff; */
    margin-top: 3rem;
    margin-bottom: 7rem;
    width: 85%;
    height: fit-content;

}


.pie_count .count h2{
    margin: 2.5rem 0;
            font-size: 1.3rem;
            color: var(--text);
            text-align: center;
}
.chart-container:hover{
    scale: 1.05;
}
  .chart-container {
            width: 45%;
            height: 50vh; 
            background: var(--text);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.418);
            border-radius: 25px;
            text-align: center;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            margin-left: 3rem;
            transition: .6s;
            
        }
  .chart-container h2{
    margin: 1rem;
    color: rgba(0, 0, 0, 0.473);
  }

        .count .counts {
            display: flex;
            justify-content: space-around;
            margin-bottom: 10px;
        }
        .counts div {
            padding: 10px 20px;
            border-radius: 10px;
            background-color: var(--text);
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            text-align: center;
        }
        .counts .total{
            border-left: 5px solid #4c70af;
            color: #4c70af;
            margin: 1rem 0;
        }
        .counts .valid {
            border-left: 5px solid #4CAF50;
            color: #4CAF50;
        }
        .counts .invalid {
            border-left: 5px solid #FF6F61;
            color: #FF6F61;
        }
        .counts .unknown {
            border-left: 5px solid #FFA000;
            color: #FFA000;
        }
        .legend {
            display: flex;
            justify-content: center;
            margin-top: 20px;
            margin-left: 1rem;
            color: var(--text);
        }
        .legend div {
            display: flex;
            align-items: center;
            margin-right: 20px;
        }
        .legend span {
            width: 20px;
            height: 20px;
            display: inline-block;
            margin-right: 10px;
            border-radius: 30%;
            
        }
        .legend .valid {
            background-color: #4CAF50;
        }
        .legend .invalid {
            background-color: #FF6F61;
        }
        .legend .unknown {
            background-color: #FFA000;
        }


        @media(max-width:825px) {
            .pie_count{
               display: flex;
               flex-direction: column-reverse;
               row-gap: 5.5rem;
            }
       
            .chart-container{
               width: 100%;
               margin: 0;

            }
            
       }
       @media(max-width:980px){
        .chart-container{
            margin: 0;
        }
        .counts div {
            padding: 5px 10px;
        }
       }
       @media(max-width:380px){
        .chart-container,.legend{
            display: none;
        }
        .pie_count{
            margin: 0;
        }
       }

/* footer */

footer{
    padding:12rem 1rem 1rem;
    background-color: rgb(244, 242, 242);
}

footer .foot{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

footer .foot h4{
    color: #0000009a;
    font-size: large;
    letter-spacing: normal;
}
footer .foot .link_{
    width: 25%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-left: .7rem;
}
footer .foot .link_ a{
    color: #0000008f;
    font-size: smaller;
    font-weight: 100;
    text-decoration: underline;
}
footer .foot .link_ a:hover{
    color: orangered;
    font-weight: bold;
}



/* CSS for Social Menu */
footer .social-menu ul {
    display: flex;
    justify-content: center;
    padding: 0;
}

.social-menu ul li {
    list-style: none;
    display: inline-block;
    margin: 0 15px;
}

.social-menu ul li .fab {
    font-size: 25px;
    line-height: 40px;
    transition: color 0.3s ease;
    color: #000;
}

.social-menu ul li .fab:hover {
    color: #fff;
}

.social-menu ul li a {
    position: relative;
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.67);
    text-align: center;
    transition: transform 0.6s ease, background-color 0.3s ease;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.5);
    text-decoration: none;
}

.social-menu ul li a:hover {
    transform: translate(0, -10%);
}

.social-menu ul li:nth-child(3) a:hover {
    background-color: #fd8282; /* Google */
}

.social-menu ul li:nth-child(4) a:hover {
    background-color: #1DA1F2; /* Twitter */
}

.social-menu ul li:nth-child(5) a:hover {
    background-color: #0077b5; /* LinkedIn */
}

.social-menu ul li:nth-child(6) a:hover {
    background-color: #333; /* GitHub */
}

/* Responsive Design */
@media (max-width: 600px) {
    .social-menu ul {
        justify-content: center;
    }
    .social-menu ul li {
        margin: 0 10px;
    }
    .social-menu ul li .fab {
        font-size: 20px;
    }
}

@media (max-width: 600px) {
    footer .foot h4{
        text-align: center;
    }
    footer .foot .link_{
        width: fit-content;
        margin: 0;
        gap: 1rem;
    }
}


footer .copyright{
    color: #00000091;
    font-size: small;
    letter-spacing: normal;
    text-align: center;
    margin-top: 1rem;
}







/* signup loader */
.signup-loader{
    width: 100%;
    height: 100vh;
    position: absolute;
    background-color: #0000007f;
    display: flex;
    align-items: center;
    justify-content: center;
    
}



/* signup and login form session */

.formbody{
    /* background-color: rgba(245, 245, 245, 0.914); */
    background: rgb(230, 228, 228);
    /* background: #7091e6; */
    width: 100%;
    min-height: 100vh;
    /* background-image: linear-gradient(rgba(9, 0, 77, 0.781),rgba(9, 0, 77, 0.781)),url(img/back.jpg);
    background-size: cover;
    background-position: center; */
    padding: 10px 8%;
} 

.login-1{
    padding-top: 3rem;
}
.signup-container {
    display: flex;
    /* background-color: transparent; */
    background: var(--background);
    padding: 4rem;
    border-radius: 8px;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, .7);
    border: 1px solid #0048ffdb;
    max-width: 1200px;
    margin-top: 2rem ;
    overflow: hidden;
}

.column-sign{
    width: 100%;
    float: left;
    box-sizing: border-box;
}


.red{
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* margin-top: 10%;  */
    /* padding-bottom: 20px;  */
}

.head-h1{
    margin-top: 2.5rem;
        font-size: 50px;
        color: rgb(255, 255, 255);
        text-shadow: 2px 2px 4px rgba(0,0,0,.2);
        opacity: .7;
        text-align: center;
}
.head-p{
    color: rgb(255, 255, 255);
        text-shadow: 2px 2px 4px rgba(0,0,0,.2);
        opacity: .7;
        text-align: center;
        /* margin: 10px auto; */
}

.head-p a{
    color:#ccd7ff;
    transform: .6s;
    text-shadow: none;
    border-bottom: 1.5px dotted white;
}
.head-p a:hover{
    color: rgb(255, 255, 255);
    font-weight: bold;
}


.signform{
    display: flex;
    flex-direction: column;
    background: rgb(230, 228, 228);
    box-shadow: 0 0 10px rgb(0, 0, 0, .7);
    border-radius: 5px;
    margin-left: 1rem;
    padding: 2rem;
}

/* input[type='text']{
    text-transform: capitalize;
  } */
/* si means signup and login form */
.h2si{
    font-size: 30px;
        text-align: center;
        color: rgb(0, 0, 0);
        text-shadow: 2px 2px 4px rgba(0,0,0,.2);
        opacity: .7;
        letter-spacing: 1px;
        margin-bottom: 1rem;
}
.in-1{
    margin-top: 1.5rem;
}
.new_password-error{
    color: red;
    font-size: small;
    text-align: center;
    width: 16rem;
}
.failed_process{
    color: red;
}
.error-message{
    color: red;
    font-size: small;
    text-align: center;
}

.labelsi {
    color: rgb(0, 0, 0);
    opacity: .8;
    font-size: 15px;
    margin: 16px 0 4px 23%;
    /* margin-left:23%; */
}

.inputsi {
    width: 55%;
    height: 15px;
    border: none;
    outline: none;
    background: transparent;
    padding: 8px;
    color: #000000d9;
    border-bottom: 1px solid rgba(0, 0, 0, 0.6);
    cursor: pointer;
    margin-left:23%;
}

/* ------- */

.password-container {
    position: relative;
    width: 100%;
}

/* .password-field {
    width: 100%;
    padding: 12px 40px 12px 10px; 
    border: 2px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
    outline: none;
    transition: 0.3s;
}

.password-field:focus {
    border-color: #007BFF;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); 
} */

.toggle-password {
    position: absolute;
    right: 15%;
    top: 40%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 15px;
    color: #777;
}

.new_pass_eye{
    position: absolute;
    right: 15%;
    top: 40%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 15px;
    color: #777;
}

/* .toggle-password:hover {
    color: #007BFF;
} */

/* Hide default browser toggle icon */
input[type="password"]::-ms-reveal,
input[type="password"]::-webkit-contacts-auto-fill-button,
input[type="password"]::-webkit-textfield-decoration-container {
    display: none;
}

/* ------- */

.sign-btn {
    width: 40%;
    background-color: var(--button);
    color: #fff;
    padding: 0.5rem 1rem;
    border: none;
    outline: none;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: bold;
    cursor: pointer;
    transition: scale 0.2 ease;
    margin-left:31%;
    margin-top: 25px;
}

.sign-btn:hover {
    scale: 1.05;
    color: #fff;
}

.forgot{
    color: #000;
    margin: 1rem auto;
    opacity: .8;
    font-size: small;
    transform: .6s;
}
.forgot:hover{
    scale: 1.05;
    color: orangered;
}

#togglePassword{
    color: rgb(104, 104, 104);
}

@media(max-width: 800px){
    .signup-container{
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: .5rem;
        margin: 0;
    }
    .formbody{
        padding: 10px;
    }

    .signup-container .red{
        margin: 0;
    }

    .signup-container .red h1,p{
        margin: 0;
        padding: 0;
    }
    .signup-container .column-sign form{
        margin: 1rem;
        padding: .5rem;

    }
    .signup-container .-home{
        margin: 1rem 0 1rem 11rem;
    }
}





/* Alert session */


.alert {
    position: relative;
    padding: .50rem 1.25rem;
    border: 1px solid transparent;
    border-radius: .20rem;
    text-align: center;
    transition: opacity 0.8s ease, max-height 0.8s ease, padding 0.8s ease, margin 0.8s ease;
    font-size: small;
    display: block;
    width: 100%;
}

.alert.hidden {
    opacity: 0;
    max-height: 0; /* Smoothly reduce height */
    padding: 0; /* Remove padding */
    margin: 0; /* Remove margin */
    border: 0; /* Optionally remove the border */
    overflow: hidden;
}




  .alert-primary {
    color: #004085 !important;
    background-color: #85bbf5 !important;
    border-color: #b8daff !important;
  }
 
  .alert-secondary {
    color: #383d41 !important;
    background-color: #a1bdf3 !important;
    border-color: #d6d8db !important;
  }
  
  
  .alert-success {
    color: #155724 !important;
    background-color: #92f3a9 !important;
    border-color: #c3e6cb !important;
  }
  
  .alert-info {
    color: #0c5460 !important;
    background-color: #92e0ee !important;
    border-color: #bee5eb !important;
  }
 
  
  .alert-warning {
    color: #856404 !important;
    background-color: #f0db95 !important;
    border-color: #ffeeba !important;
  }
  
  .alert-error {
    color: #721c24 !important;
    background-color: #f1a7ad !important;
    border-color: #f5c6cb !important;
  }
  
  .alert-danger {
    color: #721c24 !important;
    background-color: #f1a7ad !important;
    border-color: #f5c6cb !important;
  }
  
  
  .alert-light {
    color: #818182;
    background-color: #fefefe;
    border-color: #fdfdfe;
  }
  
  
  .alert-dark {
    color: #1b1e21;
    background-color: #d6d8d9;
    border-color: #c6c8ca;
  }

  /* forget and reset password */

  .pass-contain{
    background: rgb(230, 228, 228);
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .pass-contain .password{
    padding: 3rem;
    background: var(--background);
    border-radius: 15px;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, .7);
    border: 1px solid #0048ffdb;
    /* box-shadow: 10px 10px 300px rgba(0, 0, 0, 0.747); */
  }

  .pass-contain .password h2{ 
    font-size: 30px;
        text-align: center;
        color: white;
        text-shadow: 2px 2px 4px rgba(0,0,0,.2);
        opacity: .6;
        letter-spacing: 1px;
        margin: 3rem 3rem 2rem;
  }
  
  .pass-contain .password form{
    background: rgb(230, 228, 228);
    box-shadow:  0 0 10px rgba(0, 0, 0, .7);
    border-radius: 15px;
    padding: 2rem 3rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.5rem;
  }

  .pass-contain .password form label{
    color: black;
    opacity: .7;
    font-size: 15px;
  }

  .pass-contain .password form input{
    width: 15rem;
    height: 2rem;
    border-radius: 5px;
    border: 2px solid rgb(255, 255, 255);
    background-color: var(--emailinput);
    outline: none;
    color: rgba(0, 0, 0, 0.685);
    font-size: 15px;
    text-align: center;
    align-self: center;
    cursor: pointer;
    font-weight: bold;
    transition: .6s;
  }

  .pass-contain .password form input:hover{
    scale: 1.05;
  }

  .pass-contain .password form button{
    width: 13rem;
    height: 2rem;
    border: 2px solid rgb(255, 255, 255);
    cursor: pointer;
    background: var(--formbtn);
    color: rgb(255, 255, 255);
    border-radius: 5px;
    font-size: 15px;
    font-weight: bold;
    align-self: center;
    transition: .6s;
  }

  .pass-contain .password form button:hover{
    scale: 1.05;
    color: var(--white);
  }
  .pass-contain .password form button:active{
    scale: 1.05;
    color: var(--white);
  }

  .pass-contain .password p{
    color: rgba(255, 255, 255, 0.645);
    text-align: center;
    margin-top: 2rem;
  }
  .pass-contain .password p a{
    color: rgb(255, 255, 255);
  }

  @media(max-width: 480px){
      .pass-contain .password{
        padding: 1rem;
      }
      
      .pass-contain .password form{
        padding: 1rem 2rem;
      }
  }
 

  /* download button */

    .download-btn {
        padding: auto;
        display: flex;
        background-color: var(--downloadbtn);
        border: 2px solid var(--text);
        border-radius: 5px;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: scale 0.2 ease;
    margin: 2rem;
    }

    .download-btn a{
        /* background-color: #000; */
        padding:.5rem 4rem .5rem 1rem;
        color: var(--text);
        font-size: 1rem;
        font-weight: bold;
        text-shadow: 2px 2px 4px rgba(0,0,0,.2);
        transition: .6s;
    }
    .download-btn i{
        /* background-color: #c87676; */
        padding:.5rem 1rem .5rem 4rem ;
        color: var(--text);
        font-size: 1rem;
        font-weight: bold;
        text-shadow: 2px 2px 4px rgba(0,0,0,.2);
        transition: .6s;
    }

    .download-btn:hover{
        color: white;
        scale: 1.05;
    }
    .download-btn a:hover{
        color: white;
        scale: 1.05;
    }
    .download-btn i:hover{
        color: white;
        scale: 1.05;
    }


/* about */

.about{
    margin: 1rem 1rem 0;
    padding: 2rem 2rem 0  ;
    /* border: 1px solid orangered; */
}
.about h1{
    text-align: center;
    margin: 1rem 1rem 2rem;
    color: #000000b4;
    text-shadow: 0 1px 2px rgba(69, 68, 68, 0.712);
}

.about .boxcontain{
    margin: 4rem 0 0;
     display: flex;
     padding:  1rem 1rem 0;
}

.about .boxcontain .ab{
    /* border: 1px solid orangered; */
    padding: 1rem 1.5rem;
   
}.about .boxcontain .b-1{
    display: flex;
    flex-direction: column;
    align-items: end;
}


.about .boxcontain .ab .aboutbox{
    overflow: hidden;
    width: 80%;
    height: fit-content;
    text-align: center;
    background-color: white;
    padding: .5rem;
    margin-bottom: 1rem;
    border-radius: 7px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.625);
    transition: background-color 0.3s ease;
    cursor: pointer;
}

.about .boxcontain .ab .aboutbox:hover{
    scale: 1.05;
}

.about .boxcontain .ab .aboutbox .hit{
    display: flex;
    align-items: center;
    background-color: rgb(255, 255, 255);
    margin: 0 2rem .5rem 2rem;
    transition: background-color 0.3s ease, color 0.3s ease;
    position: relative;
}
.about .boxcontain .b-1 .aboutbox .hit img{
    width: 14.5%;
    height: 14.5%;
    filter: drop-shadow(0 0 1.5px rgb(255, 85, 0));
}
.about .boxcontain .b-2 .aboutbox .hit img{
    width: 13%;
    height: 13%;
    filter: drop-shadow(0 0 1.5px rgb(255, 85, 0));
}
.about .boxcontain .ab .aboutbox .hit hgroup{
    color: #000000c4;
    font-size: larger;
    font-weight: bold;
    margin-left: 2rem;
}
.about .boxcontain .ab .aboutbox .hit span{
    color: #000000b4;
    font-size: larger;
    font-weight: bold;
    position: absolute;
    right: 0;
}
.about .boxcontain .ab .aboutbox .hit span:hover{
    color: orange;
    font-weight: bold;
}


.about .boxcontain .ab .aboutbox p{
    /* background-color: rgb(251, 204, 187); */
    /* background-color: rgb(179, 202, 243); */
    border-radius: 0 0 7px 7px;
    color: #000000cb;
    font-size: smaller;
    letter-spacing: normal;
    font-weight: 500;
    /* border: 1px solid orange; */
    box-shadow: inset 0 0 2px black;
    max-height: 0;
    /* padding-top: .3rem; */
    overflow: hidden;
    transition: max-height 0.5s ease-out, opacity 0.5s ease, padding 0.5s ease;
    padding: 4px;
    /* opacity: 0; */
    
}
.about .boxcontain .ab .aboutbox.active p{
    max-height: 5rem; /* Adjust height as needed */
    padding: 1.5rem ;
    opacity: 1;
}


.getstart{
    width: 100%;
    height: fit-content;
    background: var(--background);
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 2rem;
}
.getstart .getstart2{
    background-color: rgb(244, 242, 242);
    width: 100%;
    height: 8rem;
    border-radius: 0% 100% 100% 0% / 100% 0% 100% 0%  ;
}


.getstart hgroup{
    margin-top: 2rem;
    color: rgba(255, 255, 255, 0.932);
}
.getstart .img-a{
    display: flex;
    align-items: center;
    justify-content: center;
}
.getstart .img-a a{
    font-size: x-large;
    margin-left: .7rem;
}
.getstart .img-a img{
    width: 10%;
    height: 10%;
}
.getstart p{
    margin: 1rem 5rem 0;
    text-align: center;
    color: rgb(233, 228, 228);
    letter-spacing: normal;
} 

.box-get{
    display: flex;
    gap: .8rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    top: 5rem;
    width: 70%;
    height: fit-content;
    background-color: white;
    border: 1px solid white;
    border-radius: 10px;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.829);
    padding: 1.5rem;
}
.box-get p{
    margin: 0;
    padding: 0;
    text-align: center;
    color: #000;
    letter-spacing: normal;
    font-size: medium;
}
.box-get h5{
    margin: 0;
    padding: 0;
    text-align: center;
    color: #00000098;
    letter-spacing: normal;
    font-size: x-large;
    text-shadow: 0 0 1px rgba(69, 68, 68, 0.578);

}

.box-get .btn{
    padding: .8rem;

}
.box-get .action_btn1{
    background-color: var(--button);
    padding: .5rem 2rem;
    border-radius: 15px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: .6s;
    border: 1px solid rgba(255, 255, 255, 0.584);
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.888);
}
.box-get .action_btn1:hover{
    border: 1px solid orangered;
    background-color: rgb(245, 128, 85);
    scale: 1.05;
    color: var(--white);
}
.box-get .action_btn1:active{
    color: #000000c8;
    background-color: rgb(255, 255, 255);
}
/* 
.getstart .btn{
    padding: 1rem;
}
.getstart .btn .action_btn1{
    background-color: var(--button);
    padding: .7rem 3rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: bold;
    cursor: pointer;
    transition: scale 0.2 ease;
}

.getstart .btn .action_btn1:hover{
    border: 1px solid var(--button);
    scale: 1.05;
    color: var(--white);
} */

@media(max-width:850px){
    .about{
        padding: 0;
        margin-top: 3rem ;
    }
    .about .boxcontain{
        margin: 1rem 0;
        padding: 0;
        display: flex;
        flex-direction: column;
    }
    .about .boxcontain .ab{
        padding: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .about .boxcontain .ab .aboutbox{
        width: 90%;
    }
    .about .boxcontain .ab .aboutbox .hit hgroup{
        margin-left: 1rem;
    } 
    .about .boxcontain .ab .aboutbox.active p{
        max-height: 6rem; /* Adjust height as needed */
    }

}
@media(max-width:850px){
    .getstart hgroup{
        text-align: center;
    }
    .getstart p{
        margin: 0;
    }
    .getstart .box-get{
        width: 90%;
    }
}


/* @media(max-width:400px){
    .about .boxcontain .aboutbox{
        padding: 1rem;
    }
    .about .boxcontain{
        margin: 4rem 2rem;
    }
} */

/* service */

/* delete popup */

.popup-hidden {
    background-color: rgba(0, 0, 0, 0.493);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 2;
}
.popup-hidden .del-popup-content{
    height: fit-content;
    width: 50%;
    background: var(--form);
    padding: .5rem;
    border-radius: 5px;
    position: relative;
    border: 1px solid white;
}
.popup-hidden .del-popup-content form{
    background-color: rgb(233, 232, 232);
    border-radius: 5px;
    box-shadow: inset 0 0 4px rgb(0, 0, 0);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.popup-hidden .del-popup-content form h2{
    color: #000000ca;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.566);
    margin: 0;
    padding: 0;
}
.popup-hidden .del-popup-content form .warning{
    width: 95%;
    text-align: center;
    background-color: rgb(255, 198, 198);
    border: 1px solid red;
    color: red;
    font-size: .9rem;
    font-weight: bold;
    margin-top: 1rem;
    padding: .5rem;
}
.popup-hidden .del-popup-content form p{
    color: #000;
    font-size: smaller;
    letter-spacing: normal;
    font-weight: 500;
    text-align: center;
    padding: 1rem;
}
.popup-hidden .del-popup-content form input{
    width: 90%;
    height: 2rem;
    border-radius: 5px;
    border: 1px solid rgb(0, 0, 0);
    background-color: white;
    outline: none;
    color: rgba(0, 0, 0, 0.848);
    font-size: .9rem;
    text-align: center;
    cursor: pointer;
    font-weight: bold;
    letter-spacing: 1px;
}
.popup-hidden .del-popup-content form .buttons {
    width: 60%;
    margin-top: 1.5rem;
    display: grid;
    grid-template-columns: 1fr 2fr;
}
.popup-hidden .del-popup-content form .buttons button{
    width: 100%;
    padding: .5rem 1rem;
    font-weight: bold;
    border: 1px solid white;
    margin-bottom: .8rem;
}
.popup-hidden .del-popup-content form .buttons button:nth-child(1){
    background-color: rgb(187, 187, 255);
    border-radius: 5px 0 0 5px;
}
.popup-hidden .del-popup-content form .buttons button:nth-child(2){
    background-color: rgb(255, 187, 187);
    border-radius: 0 5px 5px 0;
}


.popup-hidden .del-popup-content form .buttons .delete:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

/* download popup */

.popup-contain{
    z-index: 2;
    background-color: rgba(0, 0, 0, 0.733);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    display: none;
    justify-content: center;
    align-items: center;
}

.popup-contain .popup-content .pop-close{
    padding: .3rem;
    outline: none;
    border: none;
    border-radius: 5px;
    background-color: #f6f5f7cf ;
    box-shadow: 0 2px 5px rgba(75, 74, 74, 0.539);
    margin-left: 94%;
}

.popup-contain .popup-content button:hover{
    background-color: var(--button);
    color: white;
    scale: 1.20;
    transition: .6s;
}

.popup-content{
    height: fit-content;
    width: 350px;
    background: rgb(230, 228, 228);
    padding: 10px;
    border-radius: 5px;
    position: relative;
}

.popup-contain .popup-content form{
    display: flex;
    flex-direction: column;
}
.popup-contain .popup-content form .b-color{
    background: var(--background);
    box-shadow: inset 0 0 10px rgba(0, 0, 0, .7);
    border: 1px solid #0048ffdb;
    border-radius: 5px;
    margin: .5rem 0 ;
    padding: .5rem 0;
}
.popup-contain .popup-content form .form-head{
    background: transparent;
    margin: .7rem;
    border-radius: 5px;
    border: 1px solid rgba(255, 255, 255, 0.759);
    font-size: small;
    text-align: center;
    color: rgba(255, 255, 255, 0.942);
}
.popup-contain .popup-content form .plan-box{
    margin: 0 3rem;
    padding: .5rem 0;
    display: grid;
    gap: .6rem;
}
.popup-contain .popup-content form .plan-box div{
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.695);
    padding: .5rem 1.3rem .5rem 1rem;
    border-radius: 5px;
}
.popup-contain .popup-content form .plan-box div p{
    color: rgba(255, 255, 255, 0.942);
    font-weight: bold;
}
.popup-contain .popup-content form .plan-box div label{
    margin-top: .5rem;
}
.popup-contain .popup-content form button{
    color: rgb(255, 253, 253);
    margin: .5rem;
    padding: .5rem;
    background-color: var(--button);
    border: none;
    border-radius: 5px;
    box-shadow: inset 0 0 3px rgba(0, 0, 0, .7);
    transition: .6s;
}
.popup-contain .popup-content form button:hover{
    scale: 1.05;
    color: rgb(255, 255, 255);
    box-shadow:  0 0 5px rgba(0, 0, 0, .7);
    transition: .6s;
}

.account-back{
    height: fit-content;
    padding: 0 1rem;
    background-color: transparent;
}

/* .account{
    position: sticky;
    top: 0;
    background-color: var(--background);
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 1rem 0 1rem;
    padding: 1rem;
} */

.account .links{
    display: flex;
    gap: 2rem;
}

.account .logout{
    display: flex;
    align-items: center;
    gap: 1rem;
}



.profile{
    /* margin: 0 1.5rem; */
    padding-bottom: 5rem;
    /* height: 91.5vh; */
}
.profile .alert{
    margin: 0;
}

.profile .head{
    /* margin: 1rem 0 ; */
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* flex-direction: column; */
    /* gap: .5rem; */
    /* margin: 1rem 0; */
}
.profile .head .a1,.a2{
    display: flex;
    align-items: center;
}
.profile .head .a2{
    gap: 1.5rem;
    padding-right: 1rem;
}
.profile .head .a2 a{
    color: rgba(255, 255, 255, 0.835);
    transition: .6s;
    text-decoration: underline;
}
.profile .head .a2 a:hover{
    color: var(--button);
    /* scale: 1.05; */
}

.profile .head hgroup{
    text-transform: capitalize;
    font-size: 1.5rem;
}
.profile .head p{
    font-size: small;
}
.aja{
    color: rgba(255, 255, 255, 0.625);
}



.profile .tables .email-valid{
    margin: 0 0 1rem ;
    /* padding-bottom: 15rem; */
}
.profile .tables .email-valid .FV-list{
    /* position: sticky;
    top: 0rem; */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 1rem 0 1rem;
}
.profile .tables .email-valid .FV-list .custom-file-upload{
    width:15rem;
    padding: .5rem;
    font-size: 13px;
    text-align: center;
    background-color: rgb(206, 230, 255);
    border: 1px solid white;
    cursor: pointer;
    color: rgba(0, 0, 0, 0.771);
    border-radius: 3px 0 0 3px;
    text-align: center;
    font-weight: bold;
    transition: .4s;
}

.profile .tables .email-valid .FV-list .custom-file-upload:hover{
    color: white;
    background-color: rgb(145, 200, 255);
}
.profile .tables .email-valid .FV-list .custom-file-upload:active{
    background-color: white;
    color: #000;
}
.profile .tables .email-valid .FV-list div{
    display: flex;
    align-items: center;
    border-radius: 3px;
}

/* .profile .tables .email-valid .FV-list div form p{ */
    /* border: 1px solid orangered; */
    /* margin-right: .5rem; */
    
/* } */
#custom-text {
    opacity: 0;
    transition: opacity 0.5s ease, visibility 0.5s ease;
    visibility: hidden;
    color: rgb(255, 247, 0);
    font-size: 11px;
}

#custom-text.visible {
    visibility: visible;
    opacity: 1;
}

.profile .tables .email-valid .FV-list div form div button{
    width: 8rem;
    padding: .5rem;
    padding-bottom: .5rem;
    border: 1px solid white;
    cursor: pointer;
    background-color: rgb(0, 153, 255);
    color: rgba(255, 255, 255, 0.94);
    border-radius:0 3px 3px 0;
    font-size: 13px;
    font-weight: bold;
    align-items: center;
    transition: .6s;
}
.profile .tables .email-valid .FV-list div form div button:hover{
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.897);
    scale: 1.05;
}
.profile .tables .email-valid .FV-list div form div button:active{
    color: rgba(0, 0, 0, 0.796);
    border: 1px solid rgba(255, 255, 255, 0.897);
    scale: 1.05;
}
.profile .tables .email-valid .FV-list .sev-form form{
    display: flex;
}
.profile .tables .email-valid .FV-list .sev-form form input{
    width:18rem;
    padding: .5rem;
    border-radius: 3px 0 0 3px;
    border: 1px solid rgba(255, 255, 255, 0.919);
    background-color: rgb(190, 211, 252);
    outline: none;
    color: rgba(0, 0, 0, 0.838);
    font-size: 13px;
    text-align: center;
    cursor: pointer;
    font-weight: bold;
}
.profile .tables .email-valid .FV-list .sev-form form button{
    width: 8rem;
    padding: .5rem;
    border: 1px solid rgba(255, 255, 255, 0.919);
    cursor: pointer;
    background-color: rgb(0, 153, 255);
    color: rgba(255, 255, 255, 0.959);
    border-radius: 0 3px 3px 0;
    font-size: 13px;
    font-weight: bold;
    transition: .6s;
}
.profile .tables .email-valid .FV-list .sev-form form button:hover{
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.897);
    scale: 1.05;
}
.profile .tables .email-valid .FV-list .sev-form form button:active{
    color: rgba(0, 0, 0, 0.796);
    border: 1px solid rgba(255, 255, 255, 0.897);
    scale: 1.05;
}

.email-valid .FV-list h3{
    color: var(--text);
   
}



.re-divider{
    z-index: 2;
    position: sticky;
    top: 0rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    height: fit-content;
    padding: .6rem 1rem ;
    margin: 1rem 0;
    background-color: rgb(13, 46, 166);
    border: 1px solid rgba(255, 255, 255, 0.502);
    /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.539) */
}
.re-divider .li-divider{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;

}

.re-divider .li-divider li a{
    font-size: small;
    font-weight: bold;
    color: rgba(255, 255, 255, 0.781);
}
.re-divider .li-divider li a:hover{
    color: rgb(244, 65, 0);
}

/* .re-divider .sercher,.pages,.li-divider{
    background-color: #000;
} */

.process-box{
    margin-top: .3rem;
    background-color: rgba(245, 245, 245, 0.914);
    /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.539); */
    border-radius: 10px;
    width: 100%;
    height: fit-content;
    padding: .2rem 1rem ;
    display: grid;
    grid-template-columns: 1fr 1.8fr 1fr;
    align-items: center;
}

 
.process-box .border_0{
    border-right: 1px solid #434141;
}
.process-box .mini-box{
    padding: .5rem;
}

.process-box .mini-box p{
    color: #000000ba;
    font-size: 11px;
    padding: 3px;
}
.process-box .mini-box h3{
    color: #000;   
     padding: 0 .2rem 1rem .2rem;
}



.process-box .box-down{
    display: flex;
    flex-direction: column;
    padding: 1rem;
    justify-content: start;
    align-items: center;
    gap: 1rem;
}
.process-box .box-down .down-btn {
    display: grid;
    grid-template-columns: 3fr 1fr;
    align-items: center;
    justify-content: center;
    border: 1px solid white;
    border-radius: 5px;
    /* box-shadow:  0 0 5px rgb(0, 0, 0); */
    /* box-shadow: 0 0 3px black; */
    cursor: pointer;
}

/* -------- */
.process-box .box-down .down-btn a {
    display: flex;
    gap: 1rem;
    justify-content: center;
    align-items: center;
    padding: 0.5rem 1rem;
    background-color: var(--button);
    color: white;
    cursor: pointer;
    transition: background 0.3s;
    overflow: hidden;
    text-decoration: none;
}

/* Animation for moving colors left to right and back */
@keyframes moveColors {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Class that activates the gradient animation */
.process-box .box-down .down-btn a.animated {
    /* background: linear-gradient(90deg, red, orange, yellow, rgb(210, 0, 91), rgb(255, 0, 0)); */
    background: linear-gradient(90deg, #ff0000, #ff4500, #ff8c00, #ffd700, #ff4500, #ff0000);
    background-size: 300% 100%;
    animation: moveColors 3s infinite linear;
}



/* ----- */

.process-box .box-down .down-btn a:nth-child(1){
    border: 1px solid rgb(255, 255, 255);
    height: 100%;
    border-right: none;
    border-radius: 5px 0 0 5px;
}
.process-box .box-down .down-btn a:nth-child(2){
    /* padding: 1rem ; */
    border: 1px solid rgb(255, 255, 255);
    height: 100%;
    border-radius: 0 5px 5px 0;
}
.process-box .box-down .down-btn a:nth-child(1) img{
    width: 15%;
    height: 90%;
    filter: invert(100%) sepia(5%) saturate(6%) hue-rotate(46deg) brightness(104%) contrast(100%);
}
.process-box .box-down .down-btn a:nth-child(2) img{
    width: 55%;
    height: 77%;
    filter: invert(100%) sepia(5%) saturate(6%) hue-rotate(46deg) brightness(104%) contrast(100%);
}
.process-box .box-down .down-btn a:active{
    color: #000;
    background-color: rgb(255, 68, 0);
    box-shadow: inset 0 1px 5px black;
    transition: .6s;
}
.process-box .box-down .down-btn a img:active{
    filter: invert(0%) sepia(5%) saturate(7472%) hue-rotate(151deg) brightness(92%) contrast(99%);
}


/*  Loader styles */
    .Verify-loader {
        padding-right: 1rem;
        width: 60px;
        height: 40px;
        position: relative;
        display: inline-block;
        --base-color: #f6f5f7; /*use your base color*/
      }
      .Verify-loader::before {
        content: '';  
        left: 0;
        top: 0;
        position: absolute;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background-color: orangered;
        background-image: radial-gradient(circle 8px at 18px 18px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 18px 0px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 0px 18px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 36px 18px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 18px 36px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 30px 5px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 30px 5px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 30px 30px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 5px 30px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 5px 5px, var(--base-color) 100%, transparent 0);
        background-repeat: no-repeat;
        box-sizing: border-box;
        animation: rotationBack 3s linear infinite;
      }
      .Verify-loader::after {
        content: '';  
        left: 35px;
        top: 15px;
        position: absolute;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background-color: orangered;
        background-image: radial-gradient(circle 5px at 12px 12px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 12px 0px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 0px 12px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 24px 12px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 12px 24px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 20px 3px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 20px 3px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 20px 20px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 3px 20px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 3px 3px, var(--base-color) 100%, transparent 0);
        background-repeat: no-repeat;
        box-sizing: border-box;
        animation: rotationBack 4s linear infinite reverse;
      }
      @keyframes rotationBack {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(-360deg);
        }
      }  


.process-box .box-down p{
    padding: .5rem;
    background-color: #ffffff6e;
    margin-top: .3rem;
    border-radius: 5px;
    color: #000000ba;
    /* color: red; */
    font-size: 11px;
    text-align: center;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.571);
    border: 1px solid white;
}
.process-box .box-down .failed_process{
    color: red;
    font-weight: bold;
    font-size: 12px;
    background-color: rgba(250, 200, 200, 0.808);
}

.process-box .analyze .re-lookup{
    background-color: transparent;
    width: 95%;
    height: fit-content;
    border-radius: 5px;
    border: 1px solid #00658a;
}
.process-box .analyze .re-lookup .results{
    padding: 1rem 1.5rem;

}
.process-box .analyze .re-lookup .results p{
    color: #000000;
    font-size: 11px;
    font-weight: 500;
    /* text-shadow: 0 0 3px #000000a9; */
}
.process-box .analyze .re-lookup .results h3{
     color: rgba(0, 0, 0, 0.719);
     font-size: 15px;
}
.process-box .analyze .re-lookup .results h3 span{
    /* color: #01794f; */
    /* color: #790101; */
}
.process-box .analyze .re-lookup .head-re p{
    background-color: rgb(245, 245, 245);
    /* background-color: rgba(255, 255, 255, 0.67); */
    padding: .3rem;
    font-size: 10px;
    font-weight: bold;
    color: #000000a3;
    padding-left: 1rem;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    /* border: 2px solid #9ea6c8; */
    margin: 0;
}


.process-box .analyze{
    /* background-color: #000; */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-left: .7rem;
}

.process-box .analyze-btn{
    display: flex;
    /* flex-direction: column; */
    align-items: center;
    justify-content: center;
    background-color: #fdfdfd92;
    /* padding: 1rem 8rem; */
    border-radius: 5px;
    border: 1px solid #008a5a;
    transition: .6s;
}
.process-box .analyze-btn:hover{
    background-color: #9ec8b9;
    scale: 1.05;
}
.process-box .analyze-btn a{
    /* background-color: #000; */
    padding: .8rem 7rem;
    font-size: 15px;
    /* padding:1rem 2rem ; */
}
.process-box .analyze-btn a,span{
    color: #01784f;
    word-spacing: 2px;   
}
.process-box .analyze .discrip{
    padding: .3rem 3rem ;
    text-align: center;

}
.process-box .analyze .discrip p{
    font-size: 11px;
    color: #000000b6;
}

.process-box .before-up-btn{
    display: flex;
    flex-direction: row;
    gap: .5rem;
    align-items: center;
    background-color: var(--emailinput);
    margin: .5rem;
    border-radius: 5px;
    text-align: center;
    /* border: 2px solid salmon; */
    padding: .5rem;
    height: fit-content;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.571);
    border: 1px solid white;
}    

.process-box .before-up-btn p{
    color: #00000093;
    font-size: 12px;
    margin-top: 0;
    /* padding: .5rem 0 .5rem 1.5rem; */
    padding-left: 1.5rem;
}

.process-box .job-create{
    border: 1px solid orangered;
    width: 100%;
    height: 80%;
    background-color: var(--emailinput);
    border-radius: 5px;
    text-align: center;
    padding: .5rem 1rem;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.571);
    border: 1px solid white;
}
.process-box .job-create form{
    padding: 1.7rem 0 0;
}

.process-box .job-create form h2{
    color: green;
    font-size: medium;
    margin-bottom: 1rem;
}

.Verify-loader-img a{
    /* display: flex;
    justify-content: center;
    padding: 0 0 .5rem; */
    color: #000;
    font-weight: bold;
    font-size: 25PX;
    margin: 0 0 0 17rem;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.568);
    cursor: pointer;
}
.Verify-loader-img a:hover{
    color: orangered;
    scale: 1.05;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.568);
}
.Verify-loader-img a:active{
    color: rgb(255, 255, 255);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.568);
}

    

.process-box .loader_ {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.process-box .loader_ .modal-content_ {
    /* transform: translate(-50%, -50%); command */
    padding: 10px;
    border-radius: 5px;
    background-color: #ffffff6e;
    /* box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.539); command */
    text-align: center;
    width: 80%;
    max-width: 500px;
}
.process-box .loader_ .b-box_{
    padding: 1rem;
    background-color: var(--main);
    border-radius: 5px;
} 

.email-valid .row-box{

    margin-top: .2rem;
    background-color: rgba(245, 245, 245, 0.914);
    /* background-color: white; */
    border-radius: 5px;
    width: 100%;
    height: fit-content;
    padding: .5rem .5rem ;
    display: grid;
    grid-template-columns: 1fr 2.5fr 1fr;
}

.row-box .border{
    border-right: 1px solid #434141;
    /* padding: 0 .5rem 0 0; */
}

.row-box .box-data{
    padding: 0 .5rem;
}

.row-box .box-data p{
    color: #000000ba;
    font-size: 11px;
    padding: 3px;
}
.row-box .box-data h3{
    color: #000;
    padding: 0.5rem .2rem 1rem .2rem;
}

.row-box .box-pie{
    display: grid;
    grid-template-columns: 2fr 1.2fr;
    padding: 0 .5rem;
    
}
.row-box .box-pie .box1{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
.row-box .box-pie .box1 h3{
    color: #000;
    padding: 0 .7rem;
}

.row-box .box-pie .box1 .ccp{
    /* margin-top: .5rem; */
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    /* border: 1px solid orangered; */
}

.row-box .box-pie .box1 .ccp .counts,.percentage {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    /* border: 1px solid orangered; */
}

.row-box .box-pie .box1 .ccp .counts span{
    font-size: 11px;
    color: #000000ba;
    text-align: center;
}
.row-box .box-pie .box1 .ccp .percentage span{
    font-size: 11px;
    color: #000000ba;
    
}


.row-box .box-pie .box1 .ccp .color{
    padding: 0;
    margin: 0;
    /* border: 1px solid orangered; */
}

.row-box .box-pie .box1 .ccp .color .result-lable{
    /* margin-top: .2rem; */
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-left: .5rem;
    /* border: 1px solid orangered; */
}

.row-box .box-pie .box1 .ccp .color div{
    margin: 0;
    padding: 3px;
    /* border: 1px solid orangered; */
} 
.row-box .box-pie .box1 .ccp .color p{
    margin: 0;
    padding: 0;
    font-size: 11px;
    color: #000000ba;
    /* border: 1px solid orangered; */
} 




.row-box .box-pie .box1 .ccp .color div .green{
    width: 10px;
    height: 10px;
    background-color: #03d80a;
    border-radius: 50px;
}
.row-box .box-pie .box1 .ccp .color div .red_{
    width: 10px;
    height: 10px;
    background-color: #fd7a00;
    border-radius: 50px;
}
.row-box .box-pie .box1 .ccp .color div .gray{
    width: 10px;
    height: 10px;
    background-color: #e59203;
    border-radius: 50px;
}
.row-box .box-pie .box1 .ccp .color div .blue{
    width: 10px;
    height: 10px;
    background-color: #034be5;
    border-radius: 50px;
}

.row-box .box-pie .box1 .notifi{
    /* margin-top:22% ; */
    margin-left: .5rem;
}

.row-box .box-pie .box1 .notifi p{
    color: #000000ba;
    font-size: 11px;
    padding: 3px;
}

.row-box .box-pie .box1 .notifi span{
    padding : 0 5px;
    background-color: rgba(128, 128, 128, 0.556);
    border-radius: 50px;
    margin-right: .5rem;
}

.acc-piechart {
    width: 180px;  /* Adjust as needed */
    height: 180px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: visible; /* Allow tooltips to be fully displayed */
}

.acc-piechart canvas {
    width: 100% !important;
    height: 100% !important;
    max-width: 180px;
    max-height: 180px;
    display: block;
}






/* .row-box .box-pie .acc-piechart canvas{
    padding: .8rem ;
}

canvas {
    flex: 1;
    width: 80% !important;
    height: auto !important;
    align-items: center;
} */

.row-box .box-down{
    display: flex;
    flex-direction: column;
    padding: 1rem;
    justify-content: start;
    align-items: center;
    gap: 1rem;
}
.row-box .box-down .down-btn {
    display: grid;
    grid-template-columns: 3fr 1fr;
    align-items: center;
    justify-content: center;
    border: 1px solid white;
    border-radius: 5px;
    /* box-shadow:  0 0 5px rgb(0, 0, 0); */
    cursor: pointer;
}
.row-box .box-down .down-btn a{
    display: flex;
    gap: 1rem;
    justify-content: center;
    align-items: center;
    padding: .8rem .8rem;
    background-color: var(--button);
    color: rgb(255, 255, 255);
}
.row-box .box-down .down-btn a:nth-child(1){
    border: 1px solid rgb(255, 255, 255);
    height: 100%;
    border-right: none;
    border-radius: 5px 0 0 5px;
}
.row-box .box-down .down-btn a:nth-child(2){
    /* padding: 1rem ; */
    border: 1px solid rgb(255, 255, 255);
    height: 100%;
    border-radius: 0 5px 5px 0;
}
.row-box .box-down .down-btn a:nth-child(1) img{
    width: 19%;
    height: 100%;
    filter: invert(100%) sepia(5%) saturate(6%) hue-rotate(46deg) brightness(104%) contrast(100%);
}
.row-box .box-down .down-btn a:nth-child(2) img{
    width: 80%;
    height: 85%;
    filter: invert(100%) sepia(5%) saturate(6%) hue-rotate(46deg) brightness(104%) contrast(100%);
}
.row-box .box-down .down-btn a:active{
    color: #000;
    background-color: rgb(255, 68, 0);
    box-shadow: inset 0 1px 5px black;
    transition: .6s;
}
.row-box .box-down .down-btn a img:active{
    filter: invert(0%) sepia(5%) saturate(7472%) hue-rotate(151deg) brightness(92%) contrast(99%);
}



.row-box .box-down p{
    padding: .8rem;
    background-color: #ffffff6e;
    /* margin-top: .8rem; */
    border-radius: 5px;
    color: #000000ba;
    font-size: 12px;
    text-align: center;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.571);
    border: 1px solid white;
}


/* Basic table styles */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: .8rem;
    background-color: var(--text);

}

table th, table td {
    padding: 11px;
    text-align: left;
    border-bottom: 1px solid #ddd;
    /* font-size: 11px; */
}

table th {
    /* border-top: 1px solid rgba(187, 187, 187, 0); */
    /* border-top: 1px solid rgba(255, 255, 255, 0); */
    background-color: rgb(1, 31, 142);
    color: rgba(255, 255, 255, 0.847);
    position: sticky;
    top: 3.150rem;
    z-index: 1;
}

.email-valid table a{
    font-size: .8rem;
    color: rgb(255, 55, 0);
    font-weight: bold;
}
.email-valid table a:hover{
    color: var(--dropmenu);
}

table tbody tr:nth-child(odd) {
    background-color: #efedf9;
}

table tbody tr:nth-child(even) {
    background-color: #f9f9f9c8;
}

table tbody tr:hover {
    background-color: #ffffff;
}

/* Responsive table styles */
@media screen and (max-width: 600px) {
    table thead {
        display: none;
    }

    table, table tbody, table tr, table td {
        display: block;
        width: 100%;
    }

    table tr {
        margin-bottom: 15px;
    }

    table td {
        text-align: right;
        padding-left: 50%;
        position: relative;
    }

    table td::before {
        content: attr(data-label);
        position: absolute;
        left: 10px;
        width: 50%;
        padding-right: 10px;
        white-space: nowrap;
        text-align: left;
        font-weight: bold;
    }
}


/* Pricing style */

.credit_count{
    background-color: var(--button);
    padding: .5rem 1rem ;
    border-radius: 20px;
    font-weight: bold;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.539);
    transition: scale 0.2 ease;
}

.credit_count span{
    margin: 0 .5rem;
}

.credit_count:hover{
    scale: 1.05;
    color: black;
}
.credit_count a:hover{
    color: var(--white);
}


.pricing-container{
    margin: 1rem 1rem 2.5rem 1rem;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.pricing-container .price-head{
    margin: 0 2rem;
    margin-top: 1rem;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    /* background-color: var(--price);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.539); */
    border-radius: 30px;

}

.price-body{
    margin: 0 1rem;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 1rem;
}

.price-body .tag{
    font-size: small;
    font-weight: bolder;
    border-radius: 5px;
    padding: 3px;
    color: rgba(0, 0, 0, 0.626);
    margin-left: 70%;
    margin-top: 1rem;
}
.advance .tag{
    background-color: rgb(106, 244, 106);
}
.pro .tag{
    background-color: rgb(244, 92, 244);
}


.price-body .plan{
    height: fit-content;
    background-color: var(--price);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.539);
    border-radius: 20px;
    padding: .5rem;
    padding-top: 1rem;
    transition: .6s;
}

.plan h2{
    color: var(--text);
    margin: 1rem;
}

.plan p{
    margin-left: .5rem;
    font-size: 13px;
}

.plan .plan-options{
    display: flex;
    flex-direction: column;
    margin: .5rem;
    gap: .5rem;
}
.plan-options .plan-box{
    background-color: var(--emailinput);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.447);
    border-radius: 10px;
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: .6s;
}

.plan-options .plan-box:hover{
    scale: 1.05;
    border-style: solid;
    border-color: white;
}
.price-body .plan:hover{
    scale: 1.05;
}

.plan-options .plan-box p{
    margin: 0;
    padding: 0;
    color: #00000096;
    font-size: 12px;
}



.plan-box div span{
    font-weight: bold;
    color: #000;
    font-size: 15px;
}

/* Hide the default radio button */
.plan-box input[type="radio"] {
    display: none;
}

/* Custom radio button style */
.custom-radio {
    height: 20px;
    width: 20px;
    background-color: rgb(255, 255, 255);
    border: 2px solid rgb(46, 91, 255);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Checked state for custom radio button */
.plan-box input[type="radio"]:checked + .custom-radio {
    background-color: rgb(255, 192, 75);
    border-color: rgb(255, 123, 75);
}

/* Inner circle for checked state */
.custom-radio::after {
    content: "";
    margin: .5rem;
    width: 10px;
    height: 10px;
    background: rgb(255, 255, 255);
    border-radius: 50%;
    transform: translate(-50%, -50%);
} 

/* Display inner circle when checked */
.plan-box input[type="radio"]:checked + .custom-radio::after {
    display: block;
}

.plan-options ._submit-btn{
    width: 100%;
    background-color: var(--button);
    color: var(--white);
    padding: 0.5rem 1rem;
    border: none;
    outline: none;
    border-radius: 10px;
    font-size: 0.8rem;
    font-weight: bold;
    cursor: pointer;
    transition: 0.6s;
}
.plan-options ._submit-btn:hover{
    scale: 1.05;
    color: #000000be;
}

@media(max-width: 900px){
    .price-body{
        margin: 0 1rem;
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
    .plan .plan-options{
        margin: 1rem 0 0 0;
    }
    .price-body .tag{
        margin-left: 60%;
    }
    .advance .tag{
        margin-left: 50%;
    }
    .pricing-container .price-head{
        margin: 1rem 1rem 0 1rem;
    }
}

.pay{
    width: fit-content;
    height: fit-content;
    background-color: white;
    padding: 2rem;
}



.plan .demt{
    background-color: var(--emailinput);
    padding: 1rem;
    border-radius: 5px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.plan .demt p{
    background-color: var(--main);
    padding: .5rem;
    border-radius: 5px;
    color: white;
    font-size: 15px;

}
.plan .demt a{
    background-color: var(--button);
    color: var(--white);
    padding: .7rem 4rem;
    border: none;
    outline: none;
    border-radius: 5px;
    font-size: 0.8rem;
    font-weight: bold;
    cursor: pointer;
    transition: scale 0.2 ease;
}

.plan .demt .lines p{
    padding: .5rem;
    border-radius: 5px;
    color: white;
    font-size: 15px;
    background-color: transparent;
}
.plan .demt .lines{
    text-align: left;
    margin-left: 2.5rem;
}

.btn-page{
    width: 100%;
    height: 100vh;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;

}
.btn-page .btn-box{
    background-color: var(--emailinput);
    padding: 1rem;
    border-radius: 5px;

}

.btn-page .btn-box div{
    background-color: var(--main);
    border-radius: 5px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.btn-page .btn-box div p{
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.704);
    border-radius: 5px;

}
.btn-page .btn-box div a{
    width: 100%;
    background-color: var(--button);
    color: rgba(255, 255, 255, 0.679);
    padding: 0.5rem 1rem;
    border: none;
    outline: none;
    border-radius: 10px;
    font-size: 0.8rem;
    font-weight: bold;
    cursor: pointer;
    transition: scale 0.2 ease;
    text-align: center;
}

.btn-page .btn-box div a:hover{
    color: white;
    scale: 1.05;
}

/* loader */
/* #loadingSpinner {
    display: none;
    position: fixed;
    z-index: 10;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
}
.loader {
    position: relative;
    width: 100%;
    height: 100%;
    border: 4px solid transparent;
    border-radius: 50%;
    border-top-color: #3498db;
    animation: spin 1s linear infinite;
}
.loader:before, .loader:after {
    content: '';
    position: absolute;
    border: 4px solid transparent;
    border-radius: 50%;
}
.loader:before {
    border-top-color: #e74c3c;
    top: -12px;
    left: -12px;
    right: -12px;
    bottom: -12px;
    animation: spin 1.5s linear infinite;
}
.loader:after {
    border-top-color: #f39c12;
    top: -24px;
    left: -24px;
    right: -24px;
    bottom: -24px;
    animation: spin 2s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
} */


.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 2; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; /* Disable scroll */
    background-color: rgba(0, 0, 0, 0.235); /* Black w/ opacity */
}
.modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 10px;
    border-radius: 5px;
    background-color: #ffffff;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.669);
    text-align: center;
    width: 80%;
    max-width: 500px;
}
.b-box{
    padding: 1rem;
    background-color: rgb(134, 176, 248);
    border: 1px solid rgb(0, 132, 255);
    box-shadow:inset 0 0 8px rgba(0, 0, 0, 0.677);
    border-radius: 5px;
}

.b-box h2{
    color: #000000c7;
}

/* Analyze loading */
/* CSS */
.loader-analyze {
    margin: .5rem 8rem;
    border: 2px solid #d3d2d2; /* Light gray background */
    border-top: 3px solid #3498db; /* Blue spinner */
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1.5s linear infinite;
  }
  
  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }





  
/* Sliding Bar Loader styles */
.loader {
    width: 100%;
    height: 10px;
    position: relative;
    background-color: #ffffffbc;
    border-radius: 5px;
    overflow: hidden;
    margin: 0 auto;
}
.loader::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, #ff0000,  #ffe604,#eeff03, #ff0000);
    animation: slide 2s linear infinite;
}
@keyframes slide {
    0% { left: -100%; }
    100% { left: 100%; }
}
h2 {
    font-size: 24px;
    color: #ffffffc7;
    margin-bottom: 20px;
}

/* Buy page */
.back-contain{
    /* background-color: rgba(245, 245, 245, 0.914); */
    background: var(--background);
    height: 91.6vh;
    width: 100%;
    padding-top: 3rem;
    position: relative;
}

.container{
    /* background-color: rgba(245, 245, 245, 0.914); */
    width: fit-content;
    height: fit-content;
    position: absolute;
    top: 10%;
    left: 33%;
    padding: 2.5rem 1rem 1rem;
    border-radius: 15px;
    border: 1.5px solid rgb(255, 255, 255);
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.666);
    background-color: rgb(243, 241, 241);
    animation: fadeIn 0.6s ease-in-out;
}
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


.container .payform{
    display: flex;
    flex-direction: column;
    gap: .5rem;
    align-items: center;
    justify-content: center;
    background : var(--background);
    border-radius: 5px;
    padding: 1rem;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.692);
    border: 1px solid rgba(255, 255, 255, 0.75);
}
.container .payform .payform-head{
    color: rgba(255, 255, 255, 0.932);
    border: 1px solid var(--text);
    border-radius: 5px;
    box-shadow: 0 0 10px rgb(0, 0, 0);
}
.container .payform .payform-head h2{
    margin: 0;
    padding: 1rem ;
}
.container .payform .payform-body{
    margin: 0;
    margin: .5rem;
    /* border: 1px solid var(--main); */
    /* border-radius: 5px; */
}
.container .payform .payform-body div{
    display: grid;
    grid-template-columns: 3fr 1fr 5fr;
    gap: .5rem;
    align-items: center;
    padding: .5rem 1rem;
    background-color: rgba(255, 255, 255, 0.831);
    border-bottom: 1.5px solid var(--main);
}
  
.container .payform .payform-body div .inr-usd{
    margin: 0;
    padding: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: transparent;
    border: none;
}
.container .payform .payform-body div .inr-usd span{
    display: flex;
} 
.container .payform .payform-body div .inr-usd span a:nth-child(1) {
    border-radius: 5px 0 0 5px;
}
.container .payform .payform-body div .inr-usd span a:nth-child(2) {
    border-radius: 0 5px 5px 0;
}
.container .payform .payform-body div .inr-usd span a{
    border: 1px solid rgba(255, 255, 255, 0.474);
    text-decoration: none;
    color: white;
    background-color: #007BFF;
    text-align: center;
    font-size: 13px;
    font-weight: bold;
    padding: 4px 8px;
    /* margin: 0 10px; */
    cursor: pointer;
    box-shadow:  0 1px 3px black;
}
.container .payform .payform-body div .inr-usd span a.active {
    background-color: #0056b3; /* Darker blue for active state */
    color: #000;
    box-shadow: inset 0 1px 3px black;
  }
.container .payform .payform-body .st{
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.container .payform .payform-body .nd{
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}
.container .payform .payform-body div p,label{
    margin: 0;
    padding: 0;
    color: #050505c0;
    font-size: 14px;
}
.container .payform .payform-body div label{
    font-weight: bold;
}
.container .payform-bat{
    padding: 1rem .5rem .5rem;
    display: flex;
    justify-content: center;
}
.container .payform-bat .pay-close{
    padding: .5rem;
    background-color: rgb(255, 122, 45);
    border: 1px solid rgba(255, 255, 255, 0.915);
    border-radius: 0 5px 5px 0;
    box-shadow:  0 1px 3px black;
    letter-spacing: 2px;
    font-size: 14px;
    font-weight: bold;
    transition: .6s;
    color: #fafafaea;
}
.container .payform-bat button{
    width: 80%;
    padding: .5rem;
    background-color:  rgb(255, 122, 45);
    border: 1px solid rgba(255, 255, 255, 0.941);
    border-radius: 5px 0 0 5px;
    box-shadow:  0 1px 3px black;
    letter-spacing: 2px;
    font-size: 14px;
    font-weight: bold;
    transition: .6s;
    color: #fafafaea;
}
.container .payform-bat .pay-close:hover{
    scale: 1.05;
    color: rgb(255, 255, 255);
}
.container .payform-bat .pay-close:active{
    box-shadow: inset 0 1px 3px black;
    scale: 1.05;
    color: rgba(0, 0, 0, 0.902);
    background-color: rgb(255, 225, 215);
}
.container .payform-bat button:hover{
    scale: 1.05;
    color: rgb(255, 255, 255);
}
.container .payform-bat button:active{
    box-shadow: inset 0 1px 3px black;
    scale: 1.05;
    color: rgba(0, 0, 0, 0.902);
    background-color: rgb(255, 225, 215);
}

/* price page */
.price-page-container{
    /* background: var(--background); */
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.price-page-container .price-head-container{
    text-align: center;
}
.price-page-container .price-head-container h1{
    color: var(--text);
    margin-top: .5rem;
    font-size: x-large;
}
.price-page-container .price-head-container p{
    color: var(--text);
    margin-top: .5rem;
    font-size: 11px;
}
.price-page-container .price-footer-container{
    width: 90%;
    background-color: rgba(245, 245, 245, 0.914);
    margin: 1.2rem 0;
    border-radius: 10px;
    display: grid;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    box-shadow: 0 0 10px rgba(132, 130, 130, 0.573);
}
.price-page-container .Select-Currency {
    grid-column: 1 / -1; 
    padding: .5rem;
    width: 250px;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.Select-Currency label {
    font-size: small;
    font-weight: bold;
    color: #444;
    margin: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.Select-Currency select {
    width: 40%;
    padding: 2px 10px;
    font-size: 14px;
    border: 2px solid #ccc;
    border-radius: 8px;
    background-color: #fff;
    color: #333;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    outline: none;
    transition: all 0.3s ease;
    cursor: pointer;
}

.Select-Currency select:focus {
    border-color: #007bff;
    box-shadow: 0 4px 8px rgba(0, 123, 255, 0.4);
    background-color: #e8f4ff;
}

.Select-Currency select:hover {
    border-color: #007bff;
    background-color: #f1faff;
}

.Select-Currency option {
    padding: 10px;
    background-color: #fff;
    color: #333;
}

.Select-Currency select option:hover {
    background-color: #007bff;
    color: white;
}

 /*  */

.price-page-container .price-footer-container form{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem 0;
}
.price-page-container .price-footer-container form p{
    color: #00000091;
    letter-spacing: 0;
    font-weight: 100;
    font-size: small;
}
.price-page-container .price-footer-container form input{
    width: 70%;
    outline: none;
    border: none;
    margin: 1.5rem 0;
    font-size: medium;
    padding: .5rem 0 .5rem 1rem;
    border-radius: 10px;
    border: 1px solid rgb(0, 0, 0);
}
.price-page-container .price-footer-container form .total{
    background-color: rgb(255, 191, 168);
    border: 1px solid orangered;
    width: 68%;
    border-radius: 10px;
    box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.733);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}
.price-page-container .price-footer-container form .total p{
    margin: 0;
    padding: 0;
    color: rgba(255, 255, 255, 0.938);
    font-weight: bold;
}
.price-page-container .price-footer-container form .total h2{
    color: rgba(6, 6, 6, 0.912);
    margin: 0;
}
.price-page-container .price-footer-container form .total button{
    width: 37%;
    height: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.555);
    cursor: pointer;
    background-color: var(--button);
    color: rgb(255, 255, 255);
    border-radius: 15px;
    font-size: 13px;
    font-weight: bold;
    /* margin: .7rem 2rem; */
    transition: .4s;
}
.price-page-container .price-footer-container form .total button:hover{
    scale: 1.05;
}

.price-page-container .price-footer-container .pricing-table{
    text-align: center;
    padding: 1rem 6rem 1rem 0;
}
.price-page-container .price-footer-container .pricing-table h3{
    color: #000;
    margin-top: 1rem;

}
.price-page-container .price-footer-container .pricing-table table tr{
    /* border: 1px solid #000; */
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.price-page-container .price-footer-container .pricing-table table th{
    /* border: 1px solid #000; */
    text-align: center;
    background-color: transparent;
    color: #000;
}
.price-page-container .price-footer-container .pricing-table table td{
    text-align: center;
}
/* .price-page-container .price-footer-container .pricing-table table tr:hover{
    background-color: rgb(246, 173, 147);
} */


.pricing-row {
    background-color: transparent; /* Default background color for all rows */
    transition: background-color 0.3s ease; /* Smooth transition effect */
}

.pricing-row.highlight__ {
    background-color:  rgb(246, 173, 147) !important; /* Highlighted background */
    font-weight: bold; /* Make highlighted row bold */
}

.price-page-container .price-footer-container .pricing-table p a{
    color: #000000a5;
    letter-spacing: 0;
    font-size: small;
}
.price-page-container .price-footer-container .pricing-table p a:hover{
    color: orangered;
}


/* Custom Alert Styles */
.custom-alert {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.custom-alert-content {
    position: relative; /* Ensure close button is positioned relative to this container */
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    max-width: 400px;
    width: 90%;
    animation: pop-in 0.3s ease;
}

.custom-alert p {
    font-size: 18px;
    color: #333;
    margin-bottom: 15px;
}

.custom-alert-close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 20px;
    font-weight: bold;
    color: #333;
    cursor: pointer;
    transition: color 0.2s ease;
    background: none;
    border: none;
}

.custom-alert-close:hover {
    color: #ff0000; /* Change color on hover for visibility */
}

/* Animation for the Alert */
.fade-in {
    opacity: 1;
}

.fade-out {
    opacity: 0;
}

@keyframes pop-in {
    0% {
        transform: scale(0.8);
    }
    100% {
        transform: scale(1);
    }
}


/* Receipt-page */

.Receipt-page{
    width: 100%;
    height: 100vh;
    padding: 1rem;
    /* background: var(--background); */
}

.Receipt-page .Receipt-content{
    background: transparent;
}

.Receipt-page .Receipt-content .sub-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1rem;
    padding: 0 2rem;

}
.Receipt-page .Receipt-content .sub-head div{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .5rem 1rem;
    gap: 1rem;
}
.Receipt-page .Receipt-content .sub-head div hgroup{
    font-size: x-large;
    color: rgba(255, 255, 255, 0.666);
    padding: 0;
    margin: 0;
}
.Receipt-page .Receipt-content .sub-head div p{
    font-size: small;
    letter-spacing: normal;
    padding: 0;
    margin: 0;

}

.Receipt-page .Receipt-content .subject{
    /* border-top: 1px solid rgba(255, 255, 255, 0.645); */
    margin: 1rem;
} 
.Receipt-page .Receipt-content .subject h3{
    color: rgba(255, 255, 255, 0.774);
    letter-spacing: 1px;
    /* padding: 2rem 2rem 0 1rem; */
}

.Receipt-page .Receipt-content .subject .Receipt .Download{
    font-weight: bold;
    color: green;
}
.Receipt-page .Receipt-content .subject .Receipt .Download:active{
    color: orangered;
    font-size: small;
}

/* --------------- */


/* Styling for the support section */
.support {
    position: fixed; /* Keeps the support section in a fixed position */
    bottom: 20px; /* Positioned 20px from the bottom of the page */
    right: 20px; /* Positioned 20px from the right side of the page */
    z-index: 7; /* Ensures the support button is on top of other elements */
}

.support a {
    display: block; /* Makes the link occupy the entire space of the image */
    width: 50px; /* You can adjust the width of the support icon */
    height: 50px; /* Adjust the height to maintain the aspect ratio */
}

.support img {
    width: 100%; /* Makes the image fill the link area */
    height: 100%; /* Makes the image fill the link area */
    object-fit: contain; /* Ensures the image maintains its aspect ratio */
    cursor: pointer; /* Changes the cursor to a pointer when hovering over the image */
    transition: transform 0.3s ease; /* Smooth transition for hover effect */
}


/* Optional hover effect to make the image slightly larger when hovered */
.support a:hover img {
    transform: scale(1.1); /* Scales the image by 10% */
    filter:  invert(40%) sepia(69%) saturate(1896%) hue-rotate(359deg) brightness(100%) contrast(107%);
}








.modal_ {
    display: block;
    position: fixed; 
    z-index: 5; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; /* Disable scroll */
    background-color: rgba(0, 0, 0, 0.235); /* Black w/ opacity */
}

._loader {
    width: 100%;
    height: 4.8px;
    display: inline-block;
    background: rgba(255, 255, 255, 0.567);
    position: relative;
    overflow: hidden;
  }
  ._loader::after {
    content: '';  
    width: 0%;
    height: 4.8px;
    background-color: #FFF;
    background: orangered;
    /* background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.25) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.25) 50%, rgba(0, 0, 0, 0.25) 75%, transparent 75%, transparent);*/
    background-size: 15px 15px; 
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    animation: animFw 3s ease-in infinite;
  }
  
  @keyframes animFw {
    0% {
      width: 0;
    }
    100% {
      width: 100%;
    }
  }
      




/* Basic styling for the support form popup */
.support-form {
    display: none; 
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Dark background */
    justify-content: end;
    align-items: center;
    z-index: 1000;
}

.support-form .Contact_loader_div {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #00000049;
    display: none;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
}

.Contact_loader {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    border: 3px solid;
    border-color: #FFF #FFF transparent transparent;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
  }
  .Contact_loader::after,
  .Contact_loader::before {
    content: '';  
    box-sizing: border-box;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    border: 3px solid;
    border-color: transparent transparent #FF3D00 #FF3D00;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    box-sizing: border-box;
    animation: rotationBack 0.5s linear infinite;
    transform-origin: center center;
  }
  .Contact_loader::before {
    width: 32px;
    height: 32px;
    border-color: #FFF #FFF transparent transparent;
    animation: rotation 1.5s linear infinite;
  }
      
  @keyframes rotation {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  } 
  @keyframes rotationBack {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(-360deg);
    }
  }
      


/* Container for the contact form */
.Contact {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    width: 400px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    position: relative; /* Ensure the close button stays inside this container */
}

/* Close button */
.close-btn {
    padding: .3rem;
    outline: none;
    border: none;
    border-radius: 5px;
    background-color: #f6f5f7cf ;
    box-shadow: 0 1px 3px rgba(75, 74, 74, 0.539);
    transition: .6s;
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    z-index: 1100; /* Make sure the button is above the form */
}
.close-btn:hover{
    scale: 1.05;
    transition: .6s;
    background-color: var(--button);
    border: 1.5px solid var(--white);
    color: #fff;
}
.close-btn:active{
    background-color: rgb(246, 138, 138);
} 

/* Form title */
.Contact h1 {
    text-align: center;
    margin-top: 2rem;
}
.Contact form {
    margin-top: 2rem;
}

/* Input and textarea fields */
.Contact input[type="text"],
.Contact input[type="email"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 5px ;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    box-sizing: border-box; /* Ensures padding is included in width */
    transition: border-color 0.3s, box-shadow 0.3s; /* Smooth transition for focus effect */
}

/* Input field focus effect */
.Contact input[type="text"]:focus,
.Contact input[type="email"]:focus,
.Contact textarea:focus {
    border-color: #4CAF50; /* Green border on focus */
    box-shadow: 0 0 8px rgba(76, 175, 80, 0.5); /* Light green glow */
    outline: none; /* Remove default outline */
}

/* Styling for placeholder text */
.Contact input[type="text"]::placeholder,
.Contact input[type="email"]::placeholder {
    color: #888; /* Light grey color for placeholder */
    font-style: italic; /* Italicized placeholder text */
}

/* Style the scrollbar */
.Contact textarea {
    width: 100%;
    height: 7rem;
    padding: 10px;
    margin: 8px 0;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    box-sizing: border-box;
    resize: none; 
}

/* For Webkit browsers (Chrome, Safari, Edge) */
.Contact textarea::-webkit-scrollbar {
    width: 12px; /* Width of the scrollbar */
}

.Contact textarea::-webkit-scrollbar-track {
    background: #f1f1f1; /* Track color */
    border-radius: 10px;
}

.Contact textarea::-webkit-scrollbar-thumb {
    background: #888; /* Scrollbar thumb color */
    border-radius: 10px;
}

.Contact textarea::-webkit-scrollbar-thumb:hover {
    background: #555; /* Darker thumb color on hover */
}

/* For Firefox */
.Contact textarea {
    scrollbar-width: thin; /* Thin scrollbar */
    scrollbar-color: #888 #f1f1f1; /* Thumb color and track color */
}


/* Submit button */
.Contact button[type="submit"] {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    width: 100%;
    font-size: 16px;
}

/* Hover effect for submit button */
.Contact button[type="submit"]:hover {
    background-color: #45a049;
    scale: 1.05;
    transition: .6s;
    border: 1.5px solid var(--white);
    color: #fff;
}
.Contact button[type="submit"]:active{
    background-color: rgb(138, 246, 206);
} 

/* Label styling */
.Contact label {
    font-weight: bold;
    font-size: 14px;
    display: block;
}


/* data-loader */
.data-loader-div .data-loader {
    width: 100%;
    height: 150px;
    display: block;
    margin: auto;
    position: relative;
    background: #ffffff99;
    box-sizing: border-box;
    margin-top: 1rem;
    border-radius: 5px;
  }
.data-loader-div .data-loader::after {
    content: '';  
    width: calc(100% - 30px);
    height: calc(100% - 30px);
    top: 15px;
    left: 15px;
    position: absolute;
    background-image: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5) 50%, transparent 80%), radial-gradient(circle 28px at 28px 28px, #DDD 99%, transparent 0), linear-gradient(#DDD 24px, transparent 0), linear-gradient(#DDD 18px, transparent 0), linear-gradient(#DDD 66px, transparent 0);
    background-repeat: no-repeat;
    background-size: 75px 130px, 55px 56px, 160px 30px, 260px 20px, 290px 56px;
    background-position: 0% 0, 0 0, 70px 5px, 70px 38px, 0px 66px;
    box-sizing: border-box;
    animation: animloader 1s linear infinite;
  }
  
  @keyframes animloader {
    0% {
      background-position: 0% 0, 0 0, 70px 5px, 70px 38px, 0px 66px;
    }
    100% {
      background-position: 150% 0, 0 0, 70px 5px, 70px 38px, 0px 66px;
    }
  }

  /* forgot password loader */
  .Forgotpass-loader {
    width: 100%;
    height: 4.8px;
    position: relative;
    background: rgba(255, 255, 255, 0.15);
    overflow: hidden;
    display: none; 
}

.Forgotpass-loader::after {
    content: '';
    width: 96px;
    height: 4.8px;
    background: #ffffff;
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    animation: hitZak 1s linear infinite alternate;
}

@keyframes hitZak {
    0% {
        left: 0;
        transform: translateX(-1%);
    }
    100% {
        left: 100%;
        transform: translateX(-99%);
    }
}

  /* -------------- */

  .back-color{
    background: var(--background);
    /* height: 100vh; */
    min-height: 100vh
  }

  /* Sidebar styles */




/* blocklist_contain --------rgba(245, 245, 245, 0.914)-------------------------- */

.blocklist_contain{
    background-color: transparent;
    margin: 1rem;
    padding: 1rem;
    overflow: hidden;
}

.MUMu{
    width: 40%;
    background-color: red;

}
  
  .blocklist_form form {
    display: flex;
    flex-direction: row;
    justify-content: end;
    gap: .5rem;
  }
  .blocklist_form .divfile{
    margin-top: 5px;
  }

  .blocklist_form p{
    color: white;
    padding: .5rem 0;
  }
  .blocklist_form div label{
    border: 1px solid white;
    color: #000;
    background-color: rgb(206, 230, 255);
    padding: .5rem 2rem;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
  }
  .blocklist_form div label:hover{
    background-color: skyblue;
    color: white;
    
  }
  
  .blocklist_form input[type="text"] {
    border: 1px solid white;
    padding: .5rem 3rem;
    border-radius: 4px;
    font-weight: bold;
    text-align: center;
    transition: border 0.3s ease;
    color: #000;
    cursor: pointer;
    background-color: rgb(206, 230, 255);
  }
  .blocklist_form input[type="text"]:hover{
    background-color: white;
    outline: none;
  }
  
 
  

  
  .blocklist_form button {
    padding: .5rem 2rem;
    background-color: var(--button);
    border: 1px solid white;
    border-radius: 4px;
    color: white;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-left: 1rem;
  }
  
  /* .blocklist_form button:hover {
    background-color: skyblue;
    color: #000;
    
  } */
  


  .blocklist-header {
    background-color: rgb(215, 231, 249);
    display: flex;
    padding: 8px 12px;
    font-size: .9rem;
    border-bottom: 1px solid #ddd;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
  }
 .blocklist-header:hover{
    background-color: rgb(221, 217, 217);
    font-weight: bold;
    border: 1px solid #ddd;
  }
  .blocklist-row{
    display: flex;
    background-color: #f0f0f0;
    font-size: .8rem;
    font-weight: 100;
    padding: 8px 12px;
    border-bottom: 1px solid #ddd;
  }
.blocklist-row:hover{
    background-color: rgb(215, 231, 249);
    font-weight: bold;
    border: 1px solid #ddd;
  }


  .data-cell span{
    color: red;
    font-size: .8rem;
    display: flex;
    justify-content: center;
  }
    .data-cell span h6{
    margin: .05rem 0 0 1.5rem;
    font-size: .6rem;
    color: red; 
    }
    .data-cell span h6:hover{
    color: #000;}

  .header-cell, .data-cell {
    flex: 1;
    padding: 4px 8px;
    text-align: center;
  }

.header-cell:nth-child(1),
.data-cell:nth-child(1) {
  flex: 0.3;
}

 .ok_text {
  color: green;
  font-weight: bold;
}





/* Popup container  ----------------------------------------------------- */
.Blocklistpopup {
  position: fixed;
  top: 50%;
  left: 70%;
  transform: translate(-50%, -50%) scale(0.9);
  background: #ffffff;
  width: 350px;
  max-width: 95vw;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  z-index: 1001;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  color: #333;
}

/* Show popup */
.Blocklistpopup.active {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

/* Header */
.Blocklistpopup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background-color: #004e8c;
  color: #ffffff;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

.Blocklistpopup-header h3 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 600;
}

/* Close Button */
.Blocklistpopup-close {
  background: transparent;
  border: none;
  font-size: 1.5rem;
  color: #fff;
  cursor: pointer;
  transition: color 0.2s ease;
}

.Blocklistpopup-close:hover,
.Blocklistpopup-close:focus {
  color: #ff4c4c;
  outline: none;
}

/* Popup content */
.Blocklistpopup-content {
  padding: 1rem ;
  font-size: small;
  line-height: 1.5;
  color: #444;
  max-height: 320px;
  overflow-y: auto;
}
.Blocklistpopup-content p span{
    color: rgb(2, 93, 146);
    font-size: small;
    font-weight: bold;
}
.Blocklistpopup-content p strong {
    color: #000;
    font-size: small;
    font-weight: bold;
}

/* Scrollbar styling (WebKit browsers) */
.Blocklistpopup-content::-webkit-scrollbar {
  width: 6px;
}
.Blocklistpopup-content::-webkit-scrollbar-thumb {
  background-color: #0078d4;
  border-radius: 3px;
}
.Blocklistpopup-content::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

/* List styling */
.Blocklistpopup-content ul {
  margin-top: 0.5rem;
  margin-left: 1.25rem;
  padding: 0;
  list-style-type: disc;
}

.Blocklistpopup-content li {
  /* margin-bottom: 0.5rem; */
  font-weight: bold;
  font-size: small;
  color: red;
}

/* Date/em text */
.Blocklistpopup-content em {
  color: #666;
  font-style: normal;
  font-weight: 400;
  margin-left: 8px;
  font-size: 0.9rem;
}

/* Responsive Design */
@media (max-width: 480px) {
  .Blocklistpopup {
    width: 95vw;
    max-height: 85vh;
  }
  .Blocklistpopup-content {
    max-height: 60vh;
  }
  .Blocklistpopup-header {
    font-size: 1.05rem;
  }
}





/* ---------------------------------------- */
/* sidebar */

 

/* sidebar */
.sidebar {
  position: fixed;
  top: 50.5px;
  left: 0;
  width: 60px;
  height: calc(100vh - 40px);
  background-color: transparent;
  color: white;
  padding-top: 20px;
  overflow-x: hidden;
  transition: width 0.3s ease;
  z-index: 9999999;
  /* border-right: 1px solid var(--text); */
  box-shadow: 0 0 1px var(--grey-color)
}
.sidebar.active {
  width: 200px;
}
.sidebar-title {
  padding: 0 20px;
  margin-bottom: 10px;
  display: none;
}
.sidebar.active .sidebar-title {
  display: block;
}

.sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.sidebar ul li {
  margin: 10px 0;
}
.sidebar ul li a {
  color: white;
  text-decoration: none;
  display: flex;
  align-items: center;
  padding: 10px 20px;
  transition: background 0.3s ease;
}
.sidebar ul li a:hover {
  background: #444;
  border-radius: 4px;
}
.sidebar ul li a.active {
  background: #555;
  border-radius: 4px;
}
.sidebar i {
  width: 25px;
  text-align: center;
}

/* Hide labels (spans) when collapsed */
.sidebar ul li span {
  display: none;
}
.sidebar.active ul li span {
  display: inline;
  color: white;
  padding-left: .5rem;
}

/* Submenu styles */
.submenu {
  display: none;
  list-style: none;
  padding-left: 20px;
}
.sidebar li.open > .submenu {
  display: block;
  background-color: var(--lightblack);
}
.sidebar a.submenu-toggle::after {
  content: " ▸";
  margin-left: auto;
}
.sidebar li.open > a.submenu-toggle::after {
  content: " ▾";
}

/* Toggle button styling */
.toggle-btn {
  background-color: transparent;
  color: white;
  border: none;
  padding: 8px 20px;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.sidebar-footer {
  position: absolute;
  bottom: 10px;
  width: 100%;
  text-align: center;
}
/* Smooth label show/hide */
.sidebar-label,
.toggle-label {
  opacity: 0;
  transition: opacity 0.3s ease;
  white-space: nowrap;
}
.sidebar.active .sidebar-label,
.sidebar.active .toggle-label {
  opacity: 1;
  color: white;
  font-size: medium;
}

/* Main content */
.main_content {
  /* margin-top: 60px; */
  /* padding: 20px; */
  margin-left: 60px;
  height: fit-content;
  background-color: transparent;
  transition: margin-left 0.3s ease;
}

.sidebar.active ~ .main_content {
  margin-left: 200px;
}

/* Responsive */
@media (max-width: 768px) {
  .sidebar.active ~ .main_content {
    margin-left: 200px;
  }
}


@media(max-width: 500px){
    .sidebar{
        display: none;
    }
    .main_content{
        margin-left: 0;
    }
}



/* subscription ------------------ */
.subscription_cotain.active {
    border: 2px solid green;
    background-color: #e8ffe8;
    transform: scale(.9);
}
/* Button styles */
.btn-primary {
    background-color: #007bff;
    border: none;
    color: white;
    padding: 10px 25px;
    border-radius: 8px;
    cursor: pointer;
}
.btn-primary:hover {
    background-color: #0056b3;
}

.btn-secondary {
    background-color: #28a745;
    border: none;
    color: white;
    padding: 10px 25px;
    border-radius: 8px;
}
.btn-secondary[disabled] {
    opacity: 0.9;
    cursor: not-allowed;
}

.subscription{
    /* border: 1px solid red; */
    display: flex;
    padding: 1rem;
}

.subscription .subscription_cotain{
    margin: 1rem;
    padding: 1rem;
    background-color: white;
    height: fit-content;
    border-radius: 15px;
    box-shadow: 2px 3px 6px rgba(0, 0, 0, .5);
    
}

.subscription .subscription_cotain .price_value{
    border-bottom: 1px solid black;
    padding-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .8rem;
}

.subscription .subscription_cotain .price_value .price-btn .btn-primary{
    background-color: var(--button);
    color: var(--white);
    padding: 0.5rem 3rem;
    margin: 0 2rem;
    border: none;
    outline: none;
    border-radius: 10px;
    font-size: medium;
    font-weight: bold;
    cursor: pointer;
    transition: scale 0.2 ease;
    border: 1px solid orangered;

}

.subscription .subscription_cotain .price_value .price-btn .btn-primary:hover{
    scale: 1.05;
    background-color: orangered;
    color: white;
}

.subscription .subscription_cotain .price_value .price-btn .btn-primary:active{
    scale: 1.05;
    background-color: white;
    color: orangered;
}

.subscription .subscription_cotain .price_value h3 span{
    font-size: small;
    color: black;
    font-weight: bold;
}
.subscription .subscription_cotain .price_list{
    padding-top: 1.5rem;
}

.subscription .subscription_cotain .price_list p{
    color: black;
    font-size: small;
    font-weight: 500;
    padding: .5rem;
}

.icon-check {
    margin-right: 8px;
}


.Subscription-link{
    margin-left: 70%;
    margin-top: .5rem;
}

.Subscription-link a{
    font-weight: bold;
        text-decoration: underline;
}


/* ===========================
   Results Section
=========================== */

/* .democheck .domain_results{
    position: relative;
    top: 0;
    left: 25%;
    width: 50%;
    height: fit-content;
    padding: 1rem;
    background-color: rgb(241, 190, 172);
    border: 1.5px solid #ff4500;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.9s ease;
    z-index: 1;
    transition-delay: 1s;
    transform: translateY(-0%);
}
  */
#ani2 {
    position: relative;
    z-index: 2; 
}

.democheck .domain_results {
    position: relative;
    top: 100%; /* starts exactly behind the form */
    left: 20%;
    width: 60%;
    padding: 1rem;
    background-color: rgb(241, 190, 172);
    border: 1.5px solid #ff4500;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    transition-delay: 5s;
    transform: translateY(-30%); /* hidden behind form */
    opacity: 0;
    transition: transform 0.8s ease, opacity 0.6s ease;
    z-index: 1; /* stays behind the form */
}

/* when active → slides down fully visible */
.domain_results.active {
    transform: translateY(0);
    transition-delay: 1s;
    opacity: 1;
}


.democheck .domain_results .domain-close{
    margin: 0 .5rem .5rem 97%;
    padding: .3rem;
    outline: none;
    border: none;
    border-radius: 5px;
    background-color: #f6f5f7cf ;
    box-shadow: 0 1px 3px rgba(75, 74, 74, 0.539);
    /* margin-left: 97%; */
    transition: .6s;
}

.democheck .domain_results .domain-close:hover{
    scale: 1.05;
    transition: .6s;
    background-color: var(--button);
    border: 1.5px solid var(--white);
    color: #fff;
}
.democheck .domain_results .domain-close:active{
    background-color: rgb(241, 190, 172);
    color: #000000;
}


.democheck .domain_results h2{
    background-color: rgb(241, 235, 235);
    border-radius: 5px;
    color: rgba(0, 0, 0, 0.716);
    text-shadow: 1px 1px 2px rgba(0,0,0,.2);
    text-align: center;
    padding: 1rem;
}

.result-box {
    background: #f3fef3;
    /* border: 1px solid #d8f5d8; */
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    font-family: "Segoe UI", Arial, sans-serif;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    background: #f3faff;
    border-color: #b5d8f0;
}
.result-box p{
    padding: .5rem;
    text-align: left;
}

.result-box h3 {
    margin-top: 0;
    font-size: 1.3rem;
    font-weight: 600;
}

.result-box h3 .valid-icon {
    color: #28a745;   /* bright green */
    font-weight: bold;
    /* vertical-align: middle; */
}
.result-box h3 .fail-icon{
    color: #ffc107;
    font-weight: bold;
}

details summary {
    cursor: pointer;
    margin: 10px 0;
    font-weight: bold;
    color: #333;
}

details pre {
    background: #fff;
    padding: 12px;
    border-radius: 6px;
    border: 1px solid #eee;
    font-family: monospace;
    white-space: pre-wrap;   /* ✅ wraps long lines */
    word-wrap: break-word;   /* ✅ breaks long strings */
    overflow-x: hidden;  
}

.result-box a {
    color: #007bff;
    text-decoration: none;
    font-weight: bold;
}

.result-box a:hover {
    text-decoration: underline;
}

/* ========== DELETE CONFIRMATION POPUP ========== */
.popup-hidden {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.del-popup-content {
    background: white;
    padding: 30px;
    border-radius: 10px;
    max-width: 500px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.del-popup-content h2 {
    color: #dc2626;
    margin-bottom: 15px;
}

.del-popup-content .warning {
    color: #f59e0b;
    font-weight: 600;
    margin-bottom: 10px;
}

.del-popup-content p {
    color: #666;
    margin-bottom: 20px;
    line-height: 1.6;
}

.del-popup-content input[type="text"] {
    width: 100%;
    padding: 10px;
    margin: 15px 0;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 14px;
}

.del-popup-content input[type="text"]:focus {
    outline: none;
    border-color: #dc2626;
    box-shadow: 0 0 5px rgba(220, 38, 38, 0.3);
}

.buttons {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.buttons button {
    flex: 1;
    padding: 10px;
    border: none;
    border-radius: 5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.buttons .cancel {
    background: #e5e7eb;
    color: #333;
}

.buttons .cancel:hover {
    background: #d1d5db;
}

.buttons .delete {
    background: #dc2626;
    color: white;
}

.buttons .delete:hover:not(:disabled) {
    background: #b91c1c;
}

.buttons .delete:disabled {
    background: #ccc;
    cursor: not-allowed;
    opacity: 0.6;
}