/* color vars */
:root {
	--main-color: #fff;
	--dk-color: #36393e;
	--md-color: #5a554c;
	--lt-color: #a8dff8;
	--lt-lt-color: #daf3ff;
	--white: #eee;
	--black: #222;
}

/* google font style */
h1,
h2,
h3,
h4,
h5,
h6,
.navbar-brand {
	font-family: 'Raleway', sans-serif;
	font-weight: 800;
	letter-spacing: 1px;
}

h5,
h6 {
	text-transform: uppercase;
	letter-spacing: 1px;
	padding-top: 0.3rem;
}


/* media query related styles */
/* styles for extra-small (mobile) devices */
h1 {
	font-size: 4rem;
	line-height: 2.7rem;
	letter-spacing: 1px;
	text-align: left;
}

header {
	padding: 2rem 1rem 1.5rem;
}

section {
	padding: 2rem 1rem 2.2rem;
}

footer {
	padding: 2rem 1rem 4rem;
}

/* styles for small devices */

@media screen and (min-width:588px) {

	div.skills {
		margin-left: 125px;
	}

}

/* styles for medium devices */



/* styles for large devices */
@media (min-width: 992px) {}

/* styles for extra-large devices */
@media (min-width: 1200px) {}


/* body margin used to offset height of navbar */
body {
	margin-top: 56px;
	margin-right: -10px;
	padding-right: -10px;
}

/* nav */
navbar-nav.nav-pills .nav-link {
    color: #12353d;
    padding: 8px 20px;
    margin: 0 5px;
    border-radius: 20px;
    transition: all 0.3s ease;
    background-color: #12353d;
    border: 2px solid transparent;
}

.navbar-nav.nav-pills .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
}

.navbar-nav.nav-pills .nav-link.active,
.navbar-nav.nav-pills .nav-item.active .nav-link {
    background-color: rgba(255, 255, 255, 0.3) !important;
    border-color: #12353d !important;
    color: #12353d !important;
    font-weight: 600;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

/* Make sure navbar has a background */
.nav-color {
    background-color: #78c7ea;
}

/* Smooth scroll behavior */
html {
    scroll-behavior: smooth;
}

/* Ensure sections have proper spacing for scroll positioning */
section {
    scroll-margin-top: 70px;
}

/* Mobile responsiveness */
@media (max-width: 767px) {
    .navbar-nav.nav-pills .nav-link {
        margin: 5px 0;
        text-align: center;
    }
}

.navbar-nav.nav-pills .nav-link {
    color: #ffffff !important;
}
/* end of */

/* colors */
.dk-color {
	background-color: var(--dk-color);
}

.lt-color {
	background-color: var(--md-color);
}

.xlt-color {
	background-color: var(--lt-color);
}

.white-type {
	color: #CFCFCF;
}

/* Smooth Scrolling */

.navbar-nav .nav-link.active {
    color: #fff !important;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 5px;
}

/* Smooth scroll behavior */
html {
    scroll-behavior: smooth;
}

/* Ensure sections have proper spacing for scroll positioning */
section {
    scroll-margin-top: 70px; /* Adjust based on your navbar height */
}