* {
    border-radius: 0 !important;
    
  }

html {
    scroll-behavior: smooth!important;
}




body {
    border-radius: 0 !important;
    color: #fff;
    font-family: 'Playfair Display', serif!important;
    /* overflow-x: hidden; */
}

.container-fluid{
    padding-left: 0;
    padding-right: 0;
}


@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@800&display=swap');


/* -------------------------------------------------------Home Page------------------------------------------------------- */
/* Navbar */
.navbar{
    padding-top: 0!important;
    padding-bottom: 0!important;
    background-color: #4c6b73;
    
}
.navbar-nav{
    margin-right: 10%;
}
.nav-item{
    padding: 0 6%;
}
.nav-link{
    font-weight: 600;
    font-size: 1.2rem;
    color: #fff;
    opacity: 0.9;
}
.nav-item:hover{
    background-color: #F05454!important;
    cursor: pointer;
}
.nav-link:hover{
    cursor: pointer;
    color: #fff!important;
}

.container-fluid{
    padding: 0;
}
.bg{
    background-image: url('/img/dscbg_col.jpg');

    -webkit-backdrop-filter: contrast(130%); 
    -o-backdrop-filter: contrast(130%);
    -moz-backdrop-filter: contrast(130%);
    backdrop-filter: contrast(130%);
    filter: contrast(130%);

    background-position-x: 65%;
    background-position-y: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: fixed;

    height: 100vh;
    width: 100vw;
}


.jb{

    background-color: rgb(57, 91, 100, 0.9);
    -webkit-backdrop-filter: saturate(5%) brightness(90%) contrast(350%);
    -o-backdrop-filter: saturate(5%) brightness(90%) contrast(350%);
    -moz-backdrop-filter: saturate(5%) brightness(90%) contrast(350%);
    backdrop-filter: saturate(5%) brightness(90%) contrast(350%);
    border-style: none;
    padding: 5% 30% 5%;
}
.jumbotron{
    padding-bottom: 4%;
    margin-bottom: 55%;
    
}





.jumbotron h1{
    font-size: 4rem;
    font-weight: 900;
    padding-bottom: 4%;

}

.jumbotron p{
    font-size: 2rem;
    font-weight: 400;
    padding-bottom: 4%;


}

.btn{
    font-size: 1.5rem!important;
    font-weight: 600!important;
}
.btn:focus,.btn:active {
    outline: none !important;
    box-shadow: none!important;
 }

.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited {
    background-color: #F05454!important;
    border: #F05454!important;
  }
.btn-primary:not(:disabled):not(.disabled):focus{
    background-color: #223843!important;
}
    
.btn-primary:hover {
    background-color: #223843!important;
}

#about{
    /* padding: 2%; */
    text-align: left;

    background-color: rgba(157, 157, 157, 0.2); 
    
    backdrop-filter: blur(6px);
    color: #fff!important;

    padding-top: 5%;
    padding-bottom: 20%;
    /* margin-bottom: 20%; */
    /* color: #223843; */
}

.abt{
    margin: 10% auto;
    max-width: 1000px;
    padding: 1%;
    
}

.skills{
    margin: 10% auto;
    max-width: 800px;
    padding: 1%;
    padding-bottom: 8%;
}

.card{
    background-color: rgb(57, 91, 100, 0.6);
    border: none;
    
}


#portfolio{
    background-color: rgba(157, 157, 157, 0.3); 
    
    /* backdrop-filter: blur(6px); */
    color: #fff!important;
    
}

.prt{
    background-color: rgb(57, 91, 100, 0.9);
    -webkit-backdrop-filter: saturate(5%) brightness(90%) contrast(350%);
    -o-backdrop-filter: saturate(5%) brightness(90%) contrast(350%);
    -moz-backdrop-filter: saturate(5%) brightness(90%) contrast(350%);
    backdrop-filter: saturate(5%) brightness(90%) contrast(350%);
    border-style: none;
    padding: 2%;
    padding-bottom: 20%;
    text-align: center;
}

.prtcard{
    background-color: rgba(253, 253, 253, 0.2);
    border: none;
    text-align: left;
}

.prtcard:hover{
    background-color: #F05454;
    cursor: pointer;
    /* box-shadow:inset 0px 0px 0px 2px #fff; */
}

.prt-icon {
    margin: 0 1%;
    color:#fff;
}
.prt h2{
    padding-bottom: 1%;
}
.prt hr{
    padding-bottom: 1%;
}



#pc1:hover #pi1 {
    content: url('/img/port-img/LBM2d_square.gif');
 }

 #pc2:hover #pi2 {
    content: url('/img/port-img/LBM3d_square-6x.gif');
 }

 #pc3:hover #pi3 {
    content: url('/img/port-img/metronome_square.gif');
 }

 #pc4:hover #pi4 {
    content: url('/img/port-img/tg-bot-180px.png');
 }

 #pc5:hover #pi5 {
    content: url('/img/port-img/indeed-logo.png');
 }

 #pc6:hover #pi6 {
    content: url('/img/port-img/LRlogo.png');
 }

.card-img-top{
    padding: 12%;
    max-height:180px;
    max-width: 180px;
}


.footer{
    background-color: #223843;
    -webkit-backdrop-filter: saturate(5%) brightness(90%) contrast(350%);
    -o-backdrop-filter: saturate(5%) brightness(90%) contrast(350%);
    -moz-backdrop-filter: saturate(5%) brightness(90%) contrast(350%);
    backdrop-filter: saturate(5%) brightness(90%) contrast(350%);
    border-style: none;
    padding: 5% 10% 15%;
    text-align: center;
    color: #6b8a92;
    
}

.footer-icon{
    margin: 2%;
    color: #6b8a92;
}

.footer-icon:hover{
    color: #F05454;
    
}

#myBtn {
    display: none; 
    position: fixed; 
    bottom: 20px; 
    right: 30px; 
    z-index: 99; 
    border: none; 
    outline: none; 
    background-color: #4c6b73; 
    color: white; 
    cursor: pointer; 
    padding: 5px; 
    border-radius: 10px; 
    font-size: 12px; 
  }
  #myBtn:hover {
    background-color: #F05454; 
  }
  #myBtn img{
    filter: brightness(100%);
  }




/* ============================================ */
/* Media Queries */



/* @media (max-aspect-ratio: 95/100) {
   .jb {
        padding-bottom: 25rem;
   }
} */

/* @media (min-aspect-ratio: 95/100) and (max-aspect-ratio: 110/100) {
    .jb {
         padding-bottom: 20rem;
    }
 } */

/* @media (orientation: landscape) {
   .abt{
        margin: 0 auto;
        
   }
   #about{
    padding: 3%;
   }
}
@media only screen and (min-width: 800px) {
    .jumbotron h1{
        font-size: 5rem;
        font-weight: 900;
        padding-bottom: 4%;
    }
    
    .jumbotron p{
        font-size: 3rem;
        font-weight: 400;
        padding-bottom: 4%;
    }
    
    .btn{
        font-size: 2rem!important;
        font-weight: 600!important;
    }
} */

@media only screen and (max-width: 576px) and (orientation: portrait){
    .jb{
        padding: 30% 10% 75%;
        text-align: center;
    }

    
    .jumbotron{
        padding-top: 10%;
        padding-bottom: 5%;
        margin-bottom: 50%;
    }
    .jumbotron h1{
        font-size: 4rem;
        font-weight: 900;
        padding-bottom: 4%;
    }
    
    .jumbotron p{
        font-size: 2rem;
        font-weight: 400;
        padding-bottom: 4%;
    }
    
    .bio-img{
        padding: 5%;
        padding-top: 15%;
        margin: auto;
        text-align: center;

    }

    .card-body{
        padding: 5%;
    }
    .abt{
        margin: 0;
        padding-bottom: 10%;
        text-align: center;
    }

    .mb-3{
        margin-bottom: 0!important;
    }

    #about{
        padding-top: 0;
        padding-bottom: 0;
    }
    .accord{
        padding: 5% 5%;
    }

    .prtcard{
        border: none;
        text-align: center;
        margin: 5% 15%;
    }
    .card-img-top{
        padding-top: 14%;
        max-height:240px;
        max-width: 240px;
    }
} 

/* Animations */