:root{
--toggle-dark-theme:linear-gradient(hsl(210, 78%, 56%), hsl(146, 68%, 55%));
--toggle-light-theme: hsl(230, 22%, 74%);
--icon-up-clr: hsl(163, 72%, 41%);
--icon-down-clr: hsl(356, 69%, 56%);
--border-facebook: hsl(208, 92%, 53%);
--border-twitter: hsl(203, 89%, 53%);
--border-instagram: linear-gradient(90deg, hsl(37, 97%, 70%)0%, hsl(329, 70%, 58%)100%);
--border-youTube: hsl(348, 97%, 39%);

/* dark theme */
--dark-bg: hsl(230, 17%, 14%);
--box-bg-dark-clr: hsl(232, 19%, 15%);
--dark-card-bg: hsl(228, 28%, 20%);
--dark-text-clr: hsl(228, 34%, 66%);
--white-text-clr: hsl(0, 0%, 100%);

/* light theme */
--light-bg: hsl(0, 0%, 100%);
--box-bg-light-clr: hsl(225, 100%, 98%);
--light-Card-bg: hsl(227, 47%, 96%);
--light-Text-clr: hsl(228, 12%, 44%);
--very-dark-text-clr: hsl(230, 17%, 14%);
}
*{
    margin: 0;
    padding:0;
    box-sizing: border-box;
}
body {
    font-family: 'Inter', sans-serif;
    background-color: var(--dark-bg);
    color:var(--white-text-clr);
}
body.light-mode{
   
    background-color: var(--light-bg);
    color: var(--very-dark-text-clr);
}
.container{
   max-width:1440px;
   margin: 0 160px ;
   overflow: hidden;
}

/* General Style */
.card-container{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 25px;
        
}

.card{
    background: var(--dark-card-bg);
    border-radius: 5px;
    cursor: pointer;
    transition: background .3s ease-in-out;
} 
.card:hover{background-color: hsl(230, 27%, 29%);}
.light-mode .card{background-color: var(--light-Card-bg);}
.light-mode .card:hover{background-color: hsl(226, 52%, 90%);}

.down-clr{
    color: var(--icon-down-clr);
}
.up-clr{
    color: var(--icon-up-clr);
}
.mg-btm{
    margin-bottom:50px;
}

.switch-text,
.header-container .header-left p,
.card-top .number-content{
    font-size: 12px;
  font-weight: 700; 
}


/* Switch Toggle Style */
.switch{
    display: inline-block;
    position: relative;
    width:60px;
    height:25px;
    cursor: pointer; 
}
.toggler{
    position: absolute;
    width:100%;
    height:100%;
    border-radius: 30px;
    top:0;
    left:0;
    background: var(--toggle-dark-theme);
    border: none;
}

.toggler::after{
    content:"";
    position: absolute;
    background-color: var(--dark-bg);
    width:20px;
    height:20px;
    border-radius: 50%;
    top:2px;
    left:2px;
    transition: all .4s ease-in-out ;
}
.light-mode .toggler::after{
    background-color:var(--light-bg) ;
}
.checkbox:checked + .toggler{
    background: var(--toggle-light-theme);
}
.checkbox:checked + .toggler::after{
    left:35px;
}
.checkbox{
    display: none;
}
.header-right{
    display: flex;
    align-items: center;
    justify-content: center;    
}
.switch-text{
  padding-right: 15px;
  color: var(--white-text-clr);
}
.light-mode .switch-text{
    color:var(--light-Text-clr);
}

/* Top Section Style */
.box-top{
    position: absolute;
    z-index: -1;
    width:100%;
    max-width: 1440px;
    background-color: var(--box-bg-dark-clr);
    height:240px;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}
.light-mode .box-top{
    background-color: var(--box-bg-light-clr);
}
.header-container{
    padding: 45px 0;
    display: flex;
    justify-content: space-between;
}
.header-container .header-left p{
 padding-top: 10px;
 color: var(--light-Text-clr);
 
}
.light-mode .header-left{
    color: var(--light-Text-clr);
}
.header-left{
    color:var(--white-text-clr);
}

.card-top{
    height:210px;
    text-align: center;
    padding : 25px 50px;
    position: relative;
    overflow: hidden;
}
 .card-top:first-child{ border-top: 4px solid var(--border-facebook);}
 .card-top:nth-child(2){border-top:4px solid var(--border-twitter); }
 .card-top:last-child{border-top: 4px solid var(--border-youTube);}
 .card-top:nth-child(3)::before{
     content:"";
     width:100%;
     height: 4px;
     top:0;
     left:0;
     background: var(--border-instagram);
     position: absolute;
}


.card-top-text {
    font-size: 10px;
    font-weight: 700;
    margin-left: 5px;
    color: var(--light-Text-clr);   
}
.card-top img {
    vertical-align: middle;
}
.card-top h1 {
    font-weight: 700;
    font-size: 2.8rem;
    margin-top: 25px;
}
.card-top .text-spacing{
  letter-spacing: 4px;
  text-transform: uppercase;
  font-weight: 400;        
  font-size: 10px;
  color:var(--light-Text-clr); 
}
.card-top .number-content {
    margin-top: 26px;
}


/*  Bottom Section Style*/
.text-overview{
    color: var(--white-text-clr);
    margin: 50px 0 30px;
    font-size: 21px;
}
.light-mode .text-overview{
    color: var(--light-Text-clr);
}
 .card-bottom{
     height:125px;
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     padding: 25px;
     grid-gap: 30px;
     align-items: center;
 }
 .card-bottom img,
 .card-bottom div{
    justify-self: self-end;
 }
 .card-bottom-text{
     font-size: 10px;
     font-weight: 700;
     color:var(--light-Text-clr);
  
 }
 .card-bottom-value{
     font-weight: 700;
     font-size: 1.8rem;
 }
 .card-bottom div {
     font-size: 10px;
     font-weight: 700;
     
 }
 
 /* Media Queries */
 @media(max-width:768px){
     .container{
        margin: 0 20px ;
     }
    .card-container{
        grid-template-columns: repeat(2, 1fr);     
    }
 }

 @media(max-width:500px){
    .header-container{
        padding: 45px 0;
        flex-direction: column;  
        
    }
    .header-left{
        border-bottom:1px solid  hsl(230, 21%, 32%);
    }
    .header-container .header-left p{
        margin-bottom: 25px;
    }
    .header-right{
        justify-content: space-between;   
        margin-top: 20px; 
    }
     .card-container{
        grid-template-columns: repeat(1, 1fr); 
     }
 }