html,body,h1,h2,h3,h4,h5,h6 {font-family: "Rubik", sans-serif}
	
	h5	{
		display: flex;
		}

/* Dark Mood */

	/* Default Light Theme */
	body, .w3-bar, .darkleftdiv, .card-height, .cer-title, .darkrightdiv, .job-padding, .w3-border-teal, .edu-title, footer, i, h1, h2, h3, h4, h5, h6, p, hr  {
		transition: all 0.3s ease;
	}
	

	body.dark-mode {
		background-color: #111111 !important;
		color: white !important;
	}

	body.dark-mode .w3-bar {
		background-color: #2a2a2a !important;
	}
	
	body.dark-mode .w3-sidebar {
		background-color: #404040 !important;
	}
	
	body.dark-mode .back-arrow {
		background-color: #111111 !important;
		
	}
	
	body.dark-mode .darkleftdiv {
		background-color: #1d1d1d !important;
		color: white !important;
	}
	
	body.dark-mode .card-height {
		background-color: #3f3f3f !important;
		color: white !important;
	}
	
	body.dark-mode .cer-title {
		background-color: #3f3f3f !important;
		color: white !important;
		border: 0px solid #3f3f3f !important;
	}
	
	body.dark-mode .darkrightdiv {
		background-color: #1d1d1d !important;
		color: white !important;
	}
	
	body.dark-mode .job-padding {
		background-color: #3f3f3f !important;
		color: white !important;
	}
	
	body.dark-mode .w3-border-teal {
		border-color: #ffffff !important;
	}
	
	body.dark-mode .edu-title {
		background-color: #3f3f3f !important;
		color: white !important;
	}
	
	body.dark-mode footer {
		background-color: #2a2a2a !important;
		color: white !important;
	}
	
	body.dark-mode footer div a i {
		color: black !important;
	}
	
	body.dark-mode footer div a:hover i {
		color: white !important;
	}
	
	body.dark-mode i {
		color: white !important;
	}
	
	body.dark-mode h1 {
		color: white !important;
	}
	
	body.dark-mode h2 {
		color: white !important;
	}
	
	body.dark-mode h3 {
		color: white !important;
	}
	
	body.dark-mode h5 {
		color: white !important;
	}
	
	body.dark-mode h6 {
		color: white !important;
	}
	
	body.dark-mode p {
		color: white !important;
	}
	
	body.dark-mode hr {
		border-top: 1px solid #303030 !important;
	}

	
	
	


/* Sticky Navbar Section */	
	.navpc {
		position: sticky;
		top: 0px;
		z-index: 1000; /* High value to make sure it stays on top */
	}	


/* Card Hover effects on Work Education and certificates */
		
	.card-hover {
		transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
		}
    
	.card-hover:hover {
        transform: scale(1.01);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
		}
		
/* Left Right Animations */	

	.w3-animate-left {
		animation: animateleft 0.9s;
		}
		
	.w3-animate-right {
		animation: animateright 0.9s;
		}

	.animate-right-side {
		animation: fadeInRight 1s;
        }

		@keyframes fadeInRight {
            0% {
                opacity: 0;
                transform: translateX(150px);
				}
            100% {
                opacity: 1;
                transform: translateX(0);
				}
        }
		
	.animate-left-side {
            animation: fadeInLeft 1s;
			}

        @keyframes fadeInLeft {
            0% {
                opacity: 0;
                transform: translateX(-150px);
				}
            100% {
                opacity: 1;
                transform: translateX(0);
				}
        }
	
/* Profile Picture */
	
	.w3-display-container img {
		animation: pulse 2s infinite;
		}

		@keyframes pulse {
			0% {
				box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.4);
				}
			70% {
				box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
				}
			100% {
				box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
				}
		}
	
	.w3-circle:hover {
			animation: scaleUp 0.3s ease-in-out forwards;
			}		
			
			@keyframes scaleUp {
			0% {
				transform: scale(1);
				}
			100% {
				transform: scale(1.1);
				}
			}

/* Name */

	.name	{
		background: linear-gradient(135deg, #00bfa5 0%, #00acc1 100%);
        color: #fff;
        border-radius: 8px;
        padding: 5px 12px;
        font-weight: 600;
		text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3), -1px -1px 3px rgba(0, 0, 0, 0.1); /* 3D shadow effect */
		}
		
		
	.name:hover {
			animation: scaleUp 0.3s ease-in-out forwards;
			}		
			
			@keyframes scaleUp {
			0% {
				transform: scale(1);
				}
			100% {
				transform: scale(1.1);
				}
			}	
		
		
		
 /* Skills Section */	
  
	.card-height {
		display:flex;
		padding:0px 25px!important;
		
		}	
		
		
/* Work Section */		
		
		.work-resp li {
			display: flex;
		}
		
		.work-resp li i {
			margin-top: 3px;
		}
		

/* Education section */	
		
	.edu-title h5 {
		background: linear-gradient(135deg, #0074bf 0%, #00acc1 100%);
        color: white;
        padding: 8px;
        border-radius: 8px;
        width: 50%;
		}
		
	.edu-title p {
		color: #00acc1;
		}
		
/* Smooth scrolling for the entire document */
	html {
		scroll-behavior: smooth;
		}

/* Floating Scroll to top button */
	#scrollToTopBtn {
		position: fixed;
		bottom: 50px;
		right: 30px;
		display: none;
		width: 60px;
		height: 60px;
		background-color: teal;
		border-radius: 50%;
		text-align: center;
		line-height: 60px;
		font-size: 24px;
		color: white;
		cursor: pointer;
		box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
		z-index: 100;
		}

	#scrollToTopBtn:hover {
		background-color: darkcyan;
		}

/* Ensure button floats and doesn't stick to the bottom */
		@keyframes float {
			0% {
				transform: translateY(0);
				}
			50% {
				transform: translateY(-10px);
				}
			100% {
				transform: translateY(0);
				}
			}

			#scrollToTopBtn {
				animation: float 2s ease-in-out infinite;
			}
			
/* Main Menu Styles */

        .w3-bar {
            display: flex;
            justify-content: center;
            align-items: center;
			}
			
        .w3-bar .w3-bar-item {
            padding: 16px 20px;
			}

        /* Hamburger Menu */
        
		.hamburger {
            display: none; /* Hidden by default */
            font-size: 30px;
            cursor: pointer;
            color: white;
			}

        /* Sidebar Styles */
        
		.w3-sidebar {
            width: 250px;
            display: none; /* Hidden by default */
            position: fixed;
            z-index: 3;
            top: 0;
            left: 0;
            background-color: teal;
            overflow: hidden;
			}

        /* Circular Back Arrow Styling */
        
		.back-arrow {
            font-size: 20px;
            color: white;
            display: inline-block;
            width: 40px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            border-radius: 50%; /* Makes it circular */
            background-color: #126969;
            cursor: pointer;
            margin: 15px;
        }



/* MOBILE RESPONSIVE */				  
		
	@media screen and (max-width: 500px) {
		h5 {
			display: block;
			}
			
		.name {
			font-size: 22px;
			}

/* Sticky Navbar Section */	
		.navpc {
			z-index: 1; /* High value to make sure it stays on top */
		}	
		
		.navmobile {
			position: fixed;
			z-index: 1000; /* or any value higher than navbar */
		}	





/* Work Section */
		
		/* Title */
		.work {
			font-size: 24px !important;
			}
		
		/* Job Card Padding */
		.job-padding {
			padding: 8px 8px!important;
		}
		
		/* Designation Title */
		.work-title span {
			font-size: 16px !important;
			}
		
		/* Job Time */	
		.job-time {
			padding: 0px 16px!important;
		}
		
		.job-time h6 span {
			font-size: 14px!important;
		}
		
		/* Job Duration & Location */
		.duration h6 {
			font-size:12px;
		}
		
		/* Responsibility */
		.work-resp {
			font-size:12px !important;
			padding: 0px 10px!important;
		}

/* Education section */	
		
		.edu {
			font-size: 24px;
			}
		
		.edu-title h5 {
			width: 100%;
			font-size:16px !important;
			}	
			
		.edu-title p {
			font-size:14px !important;
			}	
			
/* Skills Section */
		
		.card-height {
			padding: 0px 16px !important;
			}
		
		.card-height p {
			font-size: 12px !important;
			}
			
			
/* Certificate Section */		
		.cer-title h6 {
			font-size:14px !important;
		}	
		
		.cer-title p {
			font-size:12px !important;
		}	
			
			
/* Main Menu */

		.w3-bar .w3-bar-item {
			display: none; /* Hide the regular menu items on mobile */
			}

		.hamburger {
			display: block; /* Show the hamburger icon on mobile */
			}
    
		.w3-sidebar a {
			font-size: 18px;
			}		
	
/*Footer icons*/
		.footer-icon a {
			margin-right: 0px !improtant;
			}
	
	}