*{
    margin:0; padding:0;
    box-sizing: border-box;
    max-width: 100%;
}
:root{
    --white: #fff
}
body {
    background-color: whitesmoke;
    display: grid;
    grid-template-columns: 1fr; /* Single column */
    grid-template-rows: auto 1fr auto; /* Header, Main, Footer */
    height: 100vh; /* Full viewport height */
    max-width: 100%;
    overflow: auto;
}
/* Nav Start*/
header {
    background-color:var(--white);
    border-bottom: 1px solid whitesmoke;    
    display: flex;
    justify-content: space-between;
    padding: 10px 0px;
    position: fixed;
    width: 100%;
    opacity: 0.85;
}

.L-title{
    font-size: 55px;
    position: absolute;
}
.yin-yang{
    /* font-size: 65px; */
    animation:  rotate 1s ease-in-out 1 ;
}
@keyframes rotate {
    0%{
        transform:rotate(0deg);
    }
    100%{
        transform:rotate(360deg);
    }
    
}
.Links{
    display: flex;
    align-items: center;
    width: calc(100% - 70%);
    max-width: 100%;
}
ul{
    list-style-type: none;
    display: flex;
    flex-flow: row;
    justify-content:space-evenly;
    width: 100%;
    max-width: 100%;
}
ul li a{
    text-decoration: none;
    color: black;
    font-size: 20px;
}

.links ul li a:hover{
    text-decoration: underline;
    font-size: 20px;
    
}

/* Nav End*/





main {
    background-color: rgb(246, 246, 246);
    margin: 75px 0px 20px 0px;
    

    
}
section{
    display: flex;
    flex-flow: row wrap;
    justify-content: space-evenly; 
    gap: 30px;
    margin: 30px 5vw;
}

article{
    display: grid;
    grid-template-rows: auto 1fr auto;
    background-color: #fff;
    
    height: 400px; ; width:400px ;
    border-radius: 25px;
    box-shadow: rgba(36, 37, 38, 0.08) 0px 6px 15px 0px;
    transition: box-shadow 0.3s linear;
    
}
article:hover{
    display: grid;
    grid-template-rows: auto 1fr auto;
    background-color: #fff;
    
    height: 400px; ; width:400px ;
    border-radius: 25px;
    box-shadow: rgba(36, 37, 38, 0.13) 5px 12px 20px 0px;
}
.art-header, .art-footer{
    display: flex;
    justify-content: space-between;
    padding: 20px 30px ;
}
.art-main {
    display: flex;
    
    justify-content: center;
    align-items: center;
}
.art-main > div{
    border-radius: 50%;
    
    width: 200px; height: 200px;
    justify-content: center;
    align-items: center;
    /* border: none; */
    
}
.circle-1:active,
.circle-2:active,
.circle-3:active,
.circle-4:active,
.circle-5:active,
.circle-6:active,
.circle-7:active,
.circle-8:active,
.circle-9:active,
.circle-11:active,
.circle-10:active,
.circle-12:active,
.circle-13:active,
.circle-14:active,
.circle-15:active,
.circle-16:active,
.circle-17:active,
.circle-18:active{
    /* animation: expand  10s linear infinite ; */
    transform: scale(14);
    /* transition: ; */
    
    z-index: 1000;
}
.copy{
    text-decoration:underline;
    text-decoration-thickness: 1px;
}
/* .circle-1:checked{
    animation: reduce  3s linear  ;
    z-index: 1000;
} */
/* @keyframes expand {
    0%{
        transform: scale(1);
    }
    100%{
        transform: scale(20);

    }
    
} */
.cir{
    cursor:crosshair;
}
/* @keyframes reduce {
    0%{
        transform: scale(20);
    }
    100%{
        transform: scale(1);
    }
    
    
} */
 .L-foot{
    font-size: 32px;      
 }

.circle-1 {background:linear-gradient(#ff9a9e,#fad0c4); transition: all 0.8s ease;}
.circle-2 {background:linear-gradient(#a18cd1,#fbc2eb); transition: all 0.8s ease}
.circle-3 {background:linear-gradient(#fad0c4,#ffd1ff); transition: all 0.8s ease}
.circle-4 {background:linear-gradient(#ffecd2,#fcb69f); transition: all 0.8s ease}
.circle-5 {background:linear-gradient(#8EC5FC,#E0C3FC); transition: all 0.8s ease}
.circle-6 {background:linear-gradient(#D9AFD9,#97D9E1); transition: all 0.8s ease}
.circle-7 {background:linear-gradient(#00DBDE,#FC00FF); transition: all 0.8s ease}
.circle-8 {background:linear-gradient(#08AEEA,#2AF598); transition: all 0.8s ease}
.circle-9 {background:linear-gradient(#8BC6EC,#9599E2); transition: all 0.8s ease}
.circle-10 {background:linear-gradient(#85FFBD,#FFFB7D); transition: all 0.8s ease}
.circle-11 {background:linear-gradient(#FBAB7E,#F7CE68); transition: all 0.8s ease}
.circle-12 {background:linear-gradient(#FFE53B,#FF2525); transition: all 0.8s ease}
.circle-13 {background:linear-gradient(#21D4FD,#B721FF); transition: all 0.8s ease}
.circle-14 {background:linear-gradient(#F4D03F,#16A085); transition: all 0.8s ease}
.circle-15 {background:linear-gradient(#fdfbfb,#ebedee); transition: all 0.8s ease}
.circle-16 {background:linear-gradient(#4facfe,#00f2fe); transition: all 0.8s ease}
.circle-17 {background:linear-gradient(#30cfd0,#330867); transition: all 0.8s ease}
.circle-18 {background:linear-gradient(#fff1eb,#ace0f9); transition: all 0.8s ease}









/*Foote Start*/
footer {
    background-color: white;
    display: grid;
    grid-template-columns: 1fr 1fr 2fr; /* Two equal columns */
    grid-template-rows: 1fr;
    padding: 20px;
    height: 47.5vh;
    box-sizing: border-box;

}

.info-left {
    grid-column: 1; /* First column */
    display: flex;
    flex-direction: column;
    justify-content:center ;
    margin-left: 20%;

    
}

    
    
ul li {
    margin: 0; /* Ensures no extra space around list items */
    padding: 0; /* Resets padding for list items */
}

.info-right {
    grid-column: 3; /* Second column */
    display: grid;
    grid-template-columns: repeat(3, 1fr);

}

.info-left .f-logo > .yin-yang, .info-left .f-logo > span{
    font-size: 20px;
    /* Add styles for your logo */
}
.info-left .f-logo{
    margin-bottom: 20px;
    display: flex;
    align-items: center;

}
.info-left > p{
    margin-bottom: 60px;

}
.info-right div {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin-top: calc(50% - 45px);

}
.info-right div  ul{
    display: flex;
    flex-flow: column nowrap;
    margin-top: 15px;
    margin-bottom: 0;
}
.info-right div ul li{
    display: flex;
    flex-flow: column nowrap;
    margin-top: 20px;
}
.info-right div ul li a{
    font-size: 0.875em;
}
.subscribtion{
    margin-bottom: 15px;
}
input{
    width:calc(100% - 30px);
    padding: 10px 15px;
    font-size: 16px;
    border: 2px solid #ccc;
    border-radius: 25px;
    outline: none;
    box-sizing: border-box;
    
}
.copyright{
    border-top: 1px solid whitesmoke;

}



/*Footer End*/


a{
    text-decoration: none;
    color: #000;
}