* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



@font-face {

    font-family: 'Poppins';

    src: url('../assets/fonts/Poppins-Regular.ttf') format('truetype');

    font-weight: normal;

    font-style: normal;

}



body {

    transition: background 0.3s, color 0.3s;

    background-color: white;

    color: black;

    font-family: 'Poppins';

}







/* switch button */



.switch {

    position: relative;

    width: 60px;

    height: 30px;

}

.switch input {

    opacity: 0;

    width: 0;

    height: 0;

}

.slider {

    position: absolute;

    cursor: pointer;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background-color: black;

    transition: 0.4s;

    border-radius: 30px;

}

.slider:before {

    position: absolute;

    content: "";

    height: 22px;

    width: 22px;

    left: 4px;

    bottom: 4px;

    background-color: white;

    transition: 0.4s;

    border-radius: 50%;

}

input:checked + .slider {

    background-color: white;

    border: 1px solid black;

}

input:checked + .slider:before {

    background-color: black;

    transform: translateX(30px);

}



/* all buttons */



button a {

    text-decoration: none;

    color: #000;

}



button:hover a {

    color: #000;

}



button:hover {

    background: #fff !important;

}



/* HOMEPAGE */









.spaceSec{

    width: 18%!important;

}



.mainSection{

    width:82%!important;

}











/* sticky header */





.div-container i {

    font-size: 70px;

}





/* for sticky menu toggle */

#sticky {

    position: fixed;

    left: 0;

    width: 100%;

    transition: top 0.3s ease-in-out;

    z-index: 999;

    display: none !important;

}



#sticky ul li {

    list-style: none;

}



#sticky a {

    text-decoration: none;

    color: #fff;

}



#sticky i {

    color: #fff;

    font-size: 20px;

}





#sticky .menu-toggle {

    cursor: pointer;

    z-index: 100;

}

#sticky .bar {

    display: block;

    width: 25px;

    height: 2px;

    margin: 6px auto;

    background-color: #fff;

    transition: 0.4s;

}







.mainNavSec{

    width: 15%;

}









#sticky .nav {

    position: fixed;

    top: 0;

    left: -250px;

    width: 250px;

    height: 100vh;

    background: rgb(21, 22, 35);

    padding-top: 60px;

    transition: left 0.3s ease;

}

#sticky .nav a {

    display: block;

    color: white;

    padding: 0;

    text-decoration: none;

    transition: 0.3s;

}

#sticky .nav a:hover {

    background: #575757;

}

#sticky .nav.active {

    left: 0;

}



/* Banner section */



#banner {

    background: url('../assets/image/4.png');

    background-position: center;

    background-repeat: no-repeat;

    background-size: cover;

}



#banner ul li {

    list-style: none;

}



#banner a {

    text-decoration: none;

    color: #fff;

}



#banner nav {

    background: #1B1C2B;

    border-right: 1px solid #fff;

    position: fixed;

}



#banner i {

    color: #fff;

    font-size: 20px;

}



#banner-col {

    height: 350px;

}





/* info section */



#info .image-wrapper {

    width: 45px;

    height: 45px;

    padding: 10px;

    background-color: #BBDEFB;

    border-radius: 50%;

    overflow: hidden;

    position: relative;

}



#info .image-wrapper img {

    width: 20px;

    height: auto;

    border-radius: 0;

}



/* biography section */



#biography #divContainer {

    background: #F8F8F8;

    border-radius: 8px;

}



#biography .blue-bullet::marker {

    color: #005194;

}



#biography li.list::marker {

    content: url('../assets/image/education-cap-svgrepo-com.svg') !important;

}



#biography .list {

    padding-left: 10px;

}



/* news And latest talks section */



#news-latest h3 {

    position: relative;

}





#news-latest h6,

#featured h6,

#project  h6,

#blog h6 {

    font-size: 14px;

    color: #5E5E5E;

}







/* featured section */



.div-container {

    background: #F8F8F8;

    border-radius: 8px;

    overflow: hidden;

    border-radius: 10px;

}



#featured h3 {

    position: relative;

}





#featured .project-list span {

    background: #BBDEFB;

    padding: 5px 10px;

    color: #000;

    font-size: 14px;

    cursor: pointer;

}



#featured .project-list a {

    text-decoration: none;

}



#featured #hideShow {

    display: none;

}



.modal-footer .btn-primary{

    background-color:#BBDEFB;

    border: 1px solid #BBDEFB;

    color:#000;

}



.modal-footer .btn-primary:hover{

    background-color:#BBDEFB!important;

}





/* blog posts section */



#blog .posts {

    background: #F8F8F8;

    border-radius: 8px;

}



/* sponsors of my research section */



#sponsors img {

    width: auto;

    height: 80px;

    aspect-ratio: auto;

}







/* BLOG PAGE */



#blog-page #category option:first-child {

    display: none;

}



#blog-page select#category {

    border: none;

    border-bottom: 1px solid #707070;

    padding: 15px;

}



#card-row, #card-column {

    background: #F8F8F8;

    border-radius: 12px;

}



#card-row img {

    width: auto;

   border-radius: 12px 0 0 12px;

}



.row:nth-child(4) img {

    border-radius: 0 12px 12px 0 !important;

}



#card-column img {

    width: auto;

   border-radius: 12px 12px 0 0;

}





#card-column .border-bot {

    position: relative;

    overflow: hidden;

}



#card-column .border-bot:after {

    content: '';

    width: 150px;

    height: 2px;

    background: #707070;;

    position: absolute;

    left: 0;

    bottom: 0;

}



#blog-page #card-row a {

    color: #000 !important;

}





.innerIcon i {

    color:#000;

}



.modal-body .codeBlock{

    padding: 10px;

    border-radius: 10px;

    background-color: #e0e0e0;

}



.modal-header .innerIcon i{

    font-size: 20px;

    cursor: pointer;

}





/* footer */



#footer ul li {

    list-style: none;

}



#footer ul li a {

    text-decoration: none;

    color: #000;

}



#footer .image-wrap,

#blog-page .image-wrap {

    width: 40px;

    height: 40px;

    padding: 5px;

    background-color: #BBDEFB;

    border-radius: 50%;

    overflow: hidden;

    position: relative;

}



#footer .image-wrap img,

#blog-page .image-wrap img {

    width: 20px;

    height: auto;

    border-radius: 0;

}



#footer span {

    color: #fff;

    font-size: 12px;

}