/* Import custom font */
@font-face {
    font-family: Biryani;
    src: url('../font/Biryani-Regular.ttf');
}
@font-face {
    font-family: Biryani-Light;
    src: url('../font/Biryani-Light.ttf');
}
@font-face {
    font-family: Raleway;
    src: url('../font/Raleway-Medium.ttf');
}


.carousel-caption {
    background: linear-gradient(90deg, #0001 0%, #000a 15%, #000a 85%, #0001 100%);
    padding: 2.25em;
    bottom: 0px;
    width: 100%;
    left: 0px;
    margin-left: 0px;
    float: left;
    display: flex;
}

/* Use maximum window height */
html, body {
    margin: 0px;
    padding: 0px;
    min-height: 100%;
    height: 100%;
}

/* Set font for page */
body {
    font-family: Raleway, sans-serif;
}

h4, h5 {
    font-family: Biryani-Light;
    font-size: 110%;
	/*margin: 20px;*/
}

h2, h3 {
    font-family: Biryani;
    font-size: 130%;
}

h1 {
    font-family: Biryani;
    font-size: 140%;
}

/* Maximize page height */
#page_main {
    min-height: 100%;
    height: auto;
}

/* Add colors to socials */
#SocialYT {
    color: #800;
}

#SocialYT:hover {
    color: #f00;
}

#SocialFB {
    color: #008;
}

#SocialFB:hover {
    color: #08f;
}

#SocialTwitter {
    color: #37a;
}

#SocialTwitter:hover {
    color: #8bf;
}

#SocialGitHub {
    color: #444;
}

#SocialGitHub:hover {
    color: #000;
}

#socialNav {
	margin-top: 15px;
	margin-left: 30px;
}

/* Navbar */
.navbar {
	background: whitesmoke;
	padding: 0px 0px;
}

/* Logo */
#Logo {
    display: flex;
    justify-content: center;
	padding-bottom: 20px;
}

#Logo img {
	width: 150%;
	margin-left: -20px;
}

/* Display nav items as inline block */
nav ul li {
    display: inline-block;
}

/* Footer style */
footer {
    margin-top: 4em;
    text-align: center;
    position: relative;
    bottom: 0px;
    width: 100%;
    background: #878787;
}

/* Form section */
#form {
    padding: 4em 8em 4em 8em;
    text-align: left;
}

/* Make headings not bold */
h2, h3, h5 {
    font-weight: normal;
}

/* Contact info table */
#form td {
    padding: 0.5em;
}


/* Add color to icons */
.fa-mobile {
    color: midnightblue;
    padding-left: 0.25em;
}

.fa-envelope {
    color: goldenrod;
}

.fa-caret-down {
    margin-left: 20px;
}

/* Expandable sections */
.expand {
    transition: 0.2s;
    padding: 1em;
    margin: 1em 0 0 0;
    background: whitesmoke;
    display: flex;
    justify-content: left;
    color: #000;
    border-style: none none solid none;
    border-width: 2px;
    border-color: lightgray;
}

.expand:hover {
    cursor: pointer;
    color: #2ec0f9;
}

/* Disable rounded corners for input fields and cards */
.card, textarea, input[type="text"], input[type="email"], .form-control {
    border-radius: 0;
}

/* carousel controls */

.carousel-control-next,
.carousel-control-prev /*, .carousel-indicators */ {
    filter: invert(100%);
}

/* disable default box shadow/outline for controls */
.form-control:focus {
  outline:1px solid #2ec0f9;
  box-shadow: none;
}

/* Hide contents of expandable elements on page load */
#Courses, #Schooling_List, #Skillset, #Education, #Practices, #Projects {
    display: block;
}

/* Education page */
.edu-sects {
    margin: 4em 8em 0 8em;
}

/* Practical experience page */
.detailgroup {
    float: right;
}

/* Skillset bars */
.skillset_1, .skillset_2, .skillset_3, .skillset_4, .skillset_5 {
    width: 200px;
    height: 20px;
    display: block;
    float: right;
    border-radius: 5px;
    border-color: #3fd1fa;
}

.skillset_1 {
    background: linear-gradient(to right, #2ec0f9 0%, #2ec0f9 20%, lightgray 20%);
}

.skillset_2 {
    background: linear-gradient(to right, #2ec0f9 0%, #2ec0f9 40%, lightgray 40%);
}

.skillset_3 {
    background: linear-gradient(to right, #2ec0f9 0%, #2ec0f9 60%, lightgray 60%);
}

.skillset_4 {
    background: linear-gradient(to right, #2ec0f9 0%, #2ec0f9 80%, lightgray 80%);
}

.skillset_5 {
    background: #2ec0f9;
}

/* Custom button colors */
.btn-primary, .btn-primary:hover,.btn-primary:active {
    background: #8ddfff;
    border-color: #2ec0f9;
    color: #000;
}

.btn-primary:hover {
    background: #9eefff;
}

.btn-primary:active {
    background: #9eefff;
}

.btn-outline-primary, .btn-outline-primary:hover, .btn-outline-primary:active {
    border-color: #878787;
    color: #878787;
}

.btn-outline-primary:hover {
    background: #8ddfff;
    color: #000;
}

.accessible-pointer {
    color: transparent;
    background: transparent;
    border: 0.25em solid transparent;
    position: fixed;
    left: -100%;
    top: 4em;
    padding: 1em;
}

.accessible-pointer:focus {
    color: #878787;
    background: white;
    border: 0.25em solid #878787;
    left: 2em;
    outline: none;
    text-decoration: none;
}

/* Dim carousel images */
/*.carousel-item img {
    filter: brightness(90%);
}*/

/* For displaying headings inline */
.inline-text {
    display: inline;
}

/* Move to right */
.float-right {
    display: block;
    margin-left: 10px;
    float: right;
}
.btn-primary, .btn-outline-primary {
    --bs-btn-active-bg: #9eefff;
    --bs-btn-active-color: #878787;
    --bs-btn-active-border-color: #878787;
}

/* mobile */
@media (max-width: 368px) {
    .btn, .expand, .dropdown-toggle {
        display: block;
        width: 95%;
		
        margin: 0;
    }
    
    h2 {
        margin-top: 20px;
    }
}
@media (max-width: 750px) {
    .btn, .expand, .dropdown-toggle {
        display: block;   
        width: 99%;
        margin: 0;
    }
    
    #page-main {
        width: 100%;
        padding: 0;
        margin: 0;
    }
    
    section {
        width: 100%;
        padding: 0;
        margin: 0;
    }
    
    /* Education page */
    .edu-sects {
        margin: 5em 0 0;
    }
    
    h2 {
        margin-top: 20px;
    }
    
    #form {
        padding: 4em 0 0 0;
        text-align: left;
    }
}