*{
    padding: 0%;
    margin: 0%;
    box-sizing: border-box;
}
a{
    text-decoration: none !important;
    
    
}body{
    background-image: linear-gradient(315deg, #5de6de 0%, #b58ecc 74%);

}
::selection{
    background: aqua;
    color: blue;
  }
.navigation{
    background-color: #20bf55;
background-image: linear-gradient(315deg, #20bf55 0%, #01baef 74%);
}

.navigation ul{
    list-style-type: none;
    margin: 0%;
    padding: 0%;
    overflow: hidden;
    
}

.navigation .c-s-a{
    display: inline;
    float: right;
    padding: 15px 20px 15px 20px;
    font-size: 12px;
    font-family: Verdana, Geneva, Tahoma, sans-serif; 
    transition: background-color 500ms; 
    border-radius: 8px 0px; 
}
.navigation .c-s-a a{
    color: white;
    text-decoration: none;
   
}
/* .navigation .c-s-a:hover{
    text-decoration: underline;
    background-color: #08f8f8;
    color: #00008B;   
} */
.c-s-a:hover{
background-color: #47c6e9;
}
.c-s-a a:hover{
    text-decoration: underline !important;
}
.navigation ul{
    margin-right: 40px;
    

}
.logo{
    display: inline;
    color: #fff;
    padding: 15px 20px 15px 20px;
    font-size: x-large;
}

.cat-box{
    background-color: #d5fefd;
background-image: linear-gradient(315deg, #d5fefd 0%, #fffcff 74%);
    width: 20%;
    border-radius: 20px;
    padding: 15px;
    margin: 40px;
    background-color: white;
    height: 35%;
    transition: box-shadow 300ms;
    box-sizing: border-box;
}

.sec{
    width: 100%;
    height: 100vh;
    background-color: #5de6de;
    background-image: linear-gradient(315deg, #5de6de 0%, #b58ecc 74%);

}
.cat-box:hover{
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;}

.header{
    color: #179ae6;;
    font-size: 30px;
    font-family: Roboto, sans-serif;
}
.content{
    color: #179ae6;
    font-size: 20px;
    font-family: Dosis, sans-serif;
    font-weight: 700;
}
.header:hover{
    text-decoration: underline;
}

/* // X-Small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap */

/* // Small devices (landscape phones, 576px and up) */
@media (max-width: 600px) { 
    .cat-box{
        width: 90%;
        height: 40%;
        /* position: relative; */
        
    }
    .logo{
        padding: 8px 10px;
        font-size: 15px;
        margin-left: 0%;
    }
    .navigation{
        position: fixed;
        width: 100%;
        /* margin-bottom: 90px; */
    }
    .navigation ul{
        margin-right: 0%;
        
    
    }
    .navigation .c-s-a{
        padding: 8px 10px !important ;
        
    }
    .sec{
        height: auto;
        
    }
    .cat-1{
        margin-top: 90px;

    }

    
 }

/* // Medium devices (tablets, 768px and up) */
@media (max-width: 768px) {
    .cat-box{
        width: 90%;
        height: 40%;
        /* position: relative; */
        
    }
    .logo{
        padding: 10px 25px;
        /* font-size: 20px; */
    }
    .navigation{
        position: fixed;
        width: 100%;
        /* margin-bottom: 90px; */
    }
    .navigation .c-s-a{
        padding: 10px 15px ;
        
    }
    .sec{
        height: auto;
        
    }
    .cat-1{
        margin-top: 90px;

    }

    
 }
 @media (max-width: 1000px){
     .content{
         font-size: 20px;
     }
     .content h1{
        font-size: 20px;
    }
 }