/* Define default theme variables */
:root {
    /* Blue Inferno */
    /* Primary Colors */
    --primary-color: #1E40AF;          /* Rich Navy Blue - Navbar Active, Headings, Borders, Buttons, Footer Text, modal title and modal text and modal close button */
    --hover-color: #FF7F32;            /* Orange-Red - Hover Effects and modal title bar */
    --background-color: #F1F5F9;       /* Light Gray - Qualification and projects cards and about section Backgrounds */
    --text-color: #1F2937;             /* Dark Gray-Blue - Regular Text */

    /* Shadows */
    --shadow-color1: rgba(255, 127, 50, 0.7);   /* Orange-Red Shadow - Profile Picture Shadow */
    --shadow-color2: rgba(255, 127, 50, 0.9);   /* Orange-Red Glow - Profile Picture Shadow Glow */
    --shadow-color3: rgba(30, 64, 175, 0.5);    /* Navy Blue Shadow - About Section Box Shadow */

    /* Navbar and Button Colors */
    --navbar-bg-color: var(--background-color);        /* Light Gray - Navbar Background */
    --navbar-head-color: var(--primary-color);         /* Rich Navy Blue - Navbar Heading */
    --navbar-active-color: var(--primary-color);       /* Rich Navy Blue - Navbar Active */
    --navbar-link-color: var(--text-color);            /* Dark Gray-Blue - Navbar Links */
    --navbar-link-hover-color: var(--hover-color);     /* Orange-Red - Navbar Links Hover */
    --navbar-resume-bg-color: var(--primary-color);    /* Rich Navy Blue - Resume Button Background */
    --navbar-resume-color: var(--background-color);    /* Light Gray - Resume Button Color */
    --navbar-resume-hover-bg-color: var(--background-color);   /* Light Gray - Resume Button Hover */
    --navbar-resume-hover-border-color: var(--hover-color);   /* Orange-Red - Resume Button Hover Border */
    --navbar-resume-hover-color: var(--hover-color);   /* Orange-Red - Resume Button Hover Text */

    /* Additional Colors */ 
    --modal-bg-color: var(--background-color);        /* Light Gray - Modal Background */
    --modal-box-color: var(--text-color);              /* Dark Gray-Blue - Modal Box Background */
    --border-color: var(--primary-color);             /* Rich Navy Blue - Borders */
    --link-hover-color: var(--hover-color);           /* Orange-Red - Hover for Links */
    --skill-box-text-hover: var(--hover-color);        /* Orange-Red - Skill Box Text Hover */
    --skill-box-bg-hover: var(--text-color);             /* Skill Box Background */
    --footer-bg-color: var(--background-color);       /* Light Gray - Footer Background */
    --footer-text-color: var(--text-color);           /* Dark Gray-Blue - Footer Text */
    --footer-border-color: var(--primary-color);      /* Rich Navy Blue - Footer Border */
    --footer-head-color: var(--primary-color);        /* Rich Navy Blue - Footer Heading */
    --footer-icon-color: var(--primary-color);        /* Rich Navy Blue - Footer Icons */
    --footer-icon-hover-color: var(--hover-color);    /* Orange-Red - Footer Icon Hover */

    /* Gradients and Effects */
    --gradient-bg: linear-gradient(145deg, #E5E7EB, #D1D5DB); /* Soft Gradient from Light Gray to Slightly Darker Gray */
    --glow-effect: 0 0 10px var(--primary-color);            /* Navy Blue Glow Effect */

    /* Scrollbar Colors */
    --scroll-track-color: #CBD5E1;         /* Lighter Gray - Scroll Track */
    --scroll-color: var(--hover-color);    /* Orange-Red - Scrollbar Thumb */
    --scroll-hover-color: var(--primary-color);  /* Rich Navy Blue - Scroll Hover Effect */

    --skill-color-1: #8E7CC3;
    --skill-color-2: #FF7043;
    --skill-color-3: #8D6E63;
    --skill-color-4: #4CAF50;
    --skill-color-5: #6D8C7A;
    --skill-color-6: #ee9a1d;
    --skill-color-7: #FFB74D;
    --skill-color-8: #AB47BC;
    --skill-color-9: #FF4081;
    --skill-color-10: #FFEB3B;
    --skill-color-11: #6F7C96;
    --skill-color-12: #5C9B8F;
}

/* Theme 2 */
.theme2 {
    /* Skyline */
    /* Primary Colors */
    --primary-color: #4E73DF;          /* Deep Blue - Navbar Active, Headings, Borders, Buttons, Footer Text, modal title and modal text and modal close button */
    --hover-color: #2E59D9;           /* Royal Blue - Hover Effects and modal title bar */
    --background-color: #F4F4F6;      /* Light Slate - Qualification, projects cards, and about section Backgrounds */
    --text-color: #2C2C2C;            /* Charcoal - Regular Text */

    /* Shadows */
    --shadow-color1: rgba(46, 89, 217, 0.6);   /* Royal Blue - Profile Picture Shadow */
    --shadow-color2: rgba(46, 89, 217, 0.8);   /* Deep Blue Glow - Profile Picture Shadow Glow */
    --shadow-color3: rgba(46, 89, 217, 0.4);   /* Light Blue - About Section Box Shadow */

    /* Navbar and Button Colors */
    --navbar-bg-color: var(--background-color);        /* Light Gray - Navbar Background */
    --navbar-head-color: var(--primary-color);         /* Cool Blue - Navbar Heading */
    --navbar-active-color: var(--primary-color);       /* Active Navbar Link Color */
    --navbar-link-color: var(--text-color);            /* Dark Gray - Navbar Links */
    --navbar-link-hover-color: var(--hover-color);     /* Deep Blue - Navbar Links Hover */
    --navbar-resume-bg-color: var(--primary-color);    /* Resume Button Background Color */
    --navbar-resume-color: var(--background-color);          /* Resume Button Color */
    --navbar-resume-hover-bg-color: var(--background-color);   /* Resume Button Hover Background */
    --navbar-resume-hover-border-color: var(--hover-color); /* Resume Button Hover Border */
    --navbar-resume-hover-color: var(--hover-color);   /* Resume Button Hover Text */

    /* Additional Colors */ 
    --modal-bg-color: rgba(0, 0, 0, 0.6);           /* Semi-transparent Black - Modal Background Overlay */
    --modal-box-color: #FAFAFA;           /* **Soft White** - Modal Box Background */
    --border-color: var(--primary-color); /* Cool Blue - Borders */
    --link-hover-color: var(--hover-color); /* Deep Blue - Hover for Links */
    --skill-box-text-hover: var(--hover-color);  /* Deep Blue - Skill Box Text Hover */
    --skill-box-bg-hover: var(--text-color);             /* Skill Box Background */
    --footer-bg-color: #E8E8E8;          /* Soft White - Footer Background */
    --footer-text-color: var(--text-color); /* Dark Gray - Footer Text */
    --footer-border-color: var(--primary-color); /* Cool Blue - Footer Border */
    --footer-head-color: var(--primary-color);   /* Cool Blue - Footer Heading */
    --footer-icon-color: var(--primary-color);   /* Cool Blue - Footer Icons */
    --footer-icon-hover-color: var(--hover-color); /* Deep Blue - Footer Icon Hover */

    /* Gradients and Effects */
    --gradient-bg: linear-gradient(145deg, #E6E6E6, #F3F3F3);  /* Soft Gradient for Depth */
    --glow-effect: 0 0 10px var(--primary-color);              /* Cool Blue Glow Effect */

    /* Scrollbar Colors */
    --scroll-track-color: #CCCCCC;       /* Light Gray - Scroll Track */
    --scroll-color: var(--hover-color);  /* Deep Blue - Scrollbar Thumb */
    --scroll-hover-color: var(--primary-color); /* Cool Blue - Scroll Hover Effect */

    --skill-color-1: #90CAF9;
    --skill-color-2: #FF7043;
    --skill-color-3: #A5D6A7;
    --skill-color-4: #FFD54F;
    --skill-color-5: #81C784;
    --skill-color-6: #FFB74D;
    --skill-color-7: #FFEB3B;
    --skill-color-8: #4DB6AC;
    --skill-color-9: #FF7043;
    --skill-color-10: #F48FB1;
    --skill-color-11: #FFCC80;
    --skill-color-12: #A5D6A7;
}

/* Theme 3 */
.theme3 {
    /* Nova Glow */
    /* Primary Colors */
    --primary-color: #FFD700;          /* Navbar Active, Headings, Borders, Buttons, Footer Text, modal title and modal text and modal close button*/
    --hover-color: #FF8C00;           /* Hover Effects and modal title bar */
    --background-color: #333;         /* Qualification and projects cards and about section Backgrounds */
    --text-color: #fff;               /* Regular Text */

    /* Shadows */
    --shadow-color1: rgba(255, 140, 0, 0.8);   /* Profile Picture Shadow */
    --shadow-color2: rgba(255, 140, 0, 1);     /* Profile Picture Shadow Glow */
    --shadow-color3: rgba(255, 140, 0, 0.5);   /* About Section Box Shadow */

    /* Navbar and Button Colors */
    --navbar-bg-color: var(--background-color);        /* Background for Navbar */
    --navbar-head-color: var(--primary-color);        /* Navbar Heading */
    --navbar-active-color: var(--primary-color);        /* Navbar Active */
    --navbar-link-color: var(--text-color);         /* Navbar Links and dropdown item name text color */
    --navbar-link-hover-color: var(--hover-color);  /* Navbar Links Hover */
    --navbar-resume-bg-color: var(--primary-color);   /* Resume Button Background Color */
    --navbar-resume-color: var(--background-color);         /* Resume Button Color */
    --navbar-resume-hover-bg-color: var(--background-color);   /* Resume Button Hover Color */
    --navbar-resume-hover-border-color: var(--hover-color);   /* Resume Button Hover Color */
    --navbar-resume-hover-color: var(--hover-color);   /* Resume Button Hover Color */

    /* Additional Colors */ 
    --modal-bg-color: var(--background-color);           /* Modal Backgrounds*/
    --modal-box-color: var(--text-color);           /* Modal Box Background */
    --border-color: var(--primary-color);          /* Borders */
    --link-hover-color: var(--hover-color);      /* Alternate Hover for Links */
    --skill-box-text-hover: var(--hover-color);             /* Skill Box Text Background */
    --skill-box-bg-hover: var(--background-color);             /* Skill Box Background */
    --footer-bg-color: var(--background-color);          /* Footer Background Color */
    --footer-text-color: var(--text-color);          /* Footer Text Color */
    --footer-border-color: var(--primary-color);          /* Footer Border Color */
    --footer-head-color: var(--primary-color);          /* Footer Heading Color */
    --footer-icon-color: var(--primary-color);          /* Footer Icons Color */
    --footer-icon-hover-color: var(--hover-color);          /* Footer Icon Hover Color */

    /* Gradients and Effects */
    --gradient-bg: linear-gradient(145deg, #2d2d2d, #1c1c1c);  /* Soft Gradient for Depth and for form background screen */
    --glow-effect: 0 0 10px var(--primary-color);              /* Glow for Special Effects */

    /* Scrollbar Colors */
    --scroll-track-color: #666;         /* Scroll Track */
    --scroll-color: var(--hover-color);              /* Scroll Scrollbar Thumb */
    --scroll-hover-color: var(--primary-color);        /* Scroll Hover Effect */

    --skill-color-1: #6B6B6B;
    --skill-color-2: #4E3B2A;
    --skill-color-3: #5A4E3C;
    --skill-color-4: #563A66;
    --skill-color-5: #47514F;
    --skill-color-6: #50568D;
    --skill-color-7: #A27465;
    --skill-color-8: #8C597D;
    --skill-color-9: #B85A6B;
    --skill-color-10: #3A6EA5;
    --skill-color-11: #4B6F97;
    --skill-color-12: #2F3B64;
}

/* Theme 4 */
.theme4 {
    /* Neon Eclipse */
    /* Primary Colors */
    --primary-color: #00FFFF;          /* Neon Blue - Navbar Active, Headings, Borders, Buttons, Modal Title and Text */
    --hover-color: #8A2BE2;           /* Electric Purple - Hover Effects */
    --background-color: #121212;      /* Jet Black - Qualification, Projects, and About Section Backgrounds */
    --text-color: #EAEAEA;            /* Light Gray - Regular Text */

    /* Shadows */
    --shadow-color1: rgba(0, 255, 255, 0.8);   /* Profile Picture Shadow */
    --shadow-color2: rgba(0, 255, 255, 1);     /* Profile Picture Shadow Glow */
    --shadow-color3: rgba(0, 255, 255, 0.5);   /* About Section Box Shadow */

    /* Navbar and Button Colors */
    --navbar-bg-color: var(--background-color);        /* Dark Background for Navbar */
    --navbar-head-color: var(--primary-color);        /* Neon Blue Navbar Heading */
    --navbar-active-color: var(--primary-color);      /* Active Navbar Link Color */
    --navbar-link-color: var(--text-color);                   /* Navbar Links and Dropdown Item Name Text Color */
    --navbar-link-hover-color: var(--hover-color);  /* Electric Purple - Navbar Links Hover */
    --navbar-resume-bg-color: var(--primary-color);   /* Resume Button Background Color */
    --navbar-resume-color: var(--background-color);                  /* Resume Button Text Color */
    --navbar-resume-hover-bg-color: var(--background-color);         /* Resume Button Hover Background */
    --navbar-resume-hover-border-color: var(--hover-color);     /* Resume Button Hover Border Color */
    --navbar-resume-hover-color: var(--hover-color); /* Resume Button Hover Text Color */

    /* Additional Colors */ 
    --modal-bg-color: var(--background-color);      /* Semi-transparent Black - Modal Background Overlay */
    --modal-box-color: var(--text-color);               /* Deep Navy Blue - Modal Box Background */
    --border-color: var(--primary-color);          /* Neon Blue - Borders */
    --link-hover-color: var(--hover-color);        /* Electric Purple - Alternate Hover for Links */
    --skill-box-text-hover: var(--hover-color);     /* Electric Purple - Skill Box Text Hover */
    --skill-box-bg-hover: var(--background-color);             /* Skill Box Background */
    --footer-bg-color: var(--background-color);          /* Footer Background Color */
    --footer-text-color: var(--text-color);          /* Footer Text Color */
    --footer-border-color: var(--primary-color);          /* Footer Border Color */
    --footer-head-color: var(--primary-color);          /* Footer Heading Color */
    --footer-icon-color: var(--primary-color);          /* Footer Icons Color */
    --footer-icon-hover-color: var(--hover-color);      /* Footer Icon Hover Color */

    /* Gradients and Effects */
    --gradient-bg: linear-gradient(145deg, #0D0D0D, #121212);  /* Subtle Gradient for Depth */
    --glow-effect: 0 0 15px var(--primary-color);              /* Neon Blue Glow for Special Effects */

    /* Scrollbar Colors */
    --scroll-track-color: #666;         /* Scroll Track */
    --scroll-color: var(--hover-color);              /* Electric Purple - Scrollbar Thumb */
    --scroll-hover-color: var(--primary-color);        /* Scroll Hover Effect */

    --skill-color-1: #333333;
    --skill-color-2: #4D1A1A;
    --skill-color-3: #3A3A3A;
    --skill-color-4: #292B44;
    --skill-color-5: #2C3E50;
    --skill-color-6: #243F7A;
    --skill-color-7: #3A2D52;
    --skill-color-8: #423F51;
    --skill-color-9: #9B2F44;
    --skill-color-10: #3A6EA5;
    --skill-color-11: #495F77;
    --skill-color-12: #3B4A63;
}

/* Theme 5 */
.theme5 {
    /* Green Aura */
    /* Primary Colors */
    --primary-color: #4A7C59;          /* Forest Green - Navbar Active, Headings, Borders, Buttons, Footer Text, modal title and modal text and modal close button */
    --hover-color: #6A994E;           /* Leaf Green - Hover Effects and modal title bar */
    --background-color: #F0F3EE;      /* Soft Mint - Qualification and projects cards and about section Backgrounds */
    --text-color: #2C3639;            /* Charcoal Gray - Regular Text */

    /* Shadows */
    --shadow-color1: rgba(106, 153, 78, 0.6);   /* Leaf Green Shadow - Profile Picture Shadow */
    --shadow-color2: rgba(106, 153, 78, 0.8);   /* Leaf Green Glow - Profile Picture Shadow Glow */
    --shadow-color3: rgba(74, 124, 89, 0.5);    /* Forest Green - About Section Box Shadow */

    /* Navbar and Button Colors */
    --navbar-bg-color: var(--background-color);        /* Soft Mint - Navbar Background */
    --navbar-head-color: var(--primary-color);         /* Forest Green - Navbar Heading */
    --navbar-active-color: var(--primary-color);       /* Forest Green - Navbar Active */
    --navbar-link-color: var(--text-color);            /* Charcoal Gray - Navbar Links */
    --navbar-link-hover-color: var(--hover-color);     /* Leaf Green - Navbar Links Hover */
    --navbar-resume-bg-color: var(--primary-color);    /* Forest Green - Resume Button Background Color */
    --navbar-resume-color: var(--background-color);          /* Charcoal Gray - Resume Button Color */
    --navbar-resume-hover-bg-color:var(--background-color);   /* Leaf Green - Resume Button Hover Background */
    --navbar-resume-hover-border-color: var(--hover-color); /* Leaf Green - Resume Button Hover Border */
    --navbar-resume-hover-color: var(--hover-color);   /* Soft Mint - Resume Button Hover Text */

    /* Additional Colors */ 
    --modal-bg-color: rgba(0, 0, 0, 0.5);            /* Semi-transparent Black - Modal Background Overlay */
    --modal-box-color: #E9ECE5;                      /* Soft Light Green - Modal Box Background */
    --border-color: var(--primary-color);            /* Forest Green - Borders */
    --link-hover-color: var(--hover-color);          /* Leaf Green - Hover for Links */
    --skill-box-text-hover: var(--hover-color);      /* Leaf Green - Skill Box Text Hover */
    --skill-box-bg-hover: var(--text-color);             /* Skill Box Background */
    --footer-bg-color: #E9ECE5;                      /* Soft Light Green - Footer Background */
    --footer-text-color: var(--text-color);          /* Charcoal Gray - Footer Text */
    --footer-border-color: var(--primary-color);     /* Forest Green - Footer Border */
    --footer-head-color: var(--primary-color);       /* Forest Green - Footer Heading */
    --footer-icon-color: var(--primary-color);       /* Forest Green - Footer Icons */
    --footer-icon-hover-color: var(--hover-color);   /* Leaf Green - Footer Icon Hover */

    /* Gradients and Effects */
    --gradient-bg: linear-gradient(145deg, #E9ECE5, #B5C99A); /* Light Green Gradient for Depth and form background screen */
    --glow-effect: 0 0 10px var(--primary-color);              /* Forest Green Glow Effect */

    /* Scrollbar Colors */
    --scroll-track-color: #B5C99A;       /* Light Green - Scroll Track */
    --scroll-color: var(--hover-color);  /* Leaf Green - Scrollbar Thumb */
    --scroll-hover-color: var(--primary-color); /* Forest Green - Scroll Hover Effect */
    /* Skill box background colors with no conflict to the Green Aura theme */

    --skill-color-1: #A5D6A7;
    --skill-color-2: #F4B400;
    --skill-color-3: #81C784;
    --skill-color-4: #FFE082;
    --skill-color-5: #80DEEA;
    --skill-color-6: #FF7043;
    --skill-color-7: #FFEB3B;
    --skill-color-8: #81D4FA;
    --skill-color-9: #fa9ff5;
    --skill-color-10: #FFD54F;
    --skill-color-11: #b88f81;
    --skill-color-12: #A5D6A7;
}


/* All In One CSS Start - Scroll, Font, Paging */

    /* Scrollbar Styles Only for Desktop */
    @media (min-width: 768px) {
        
        ::-webkit-scrollbar {
        width: 7px;
        }

        ::-webkit-scrollbar-track {
        background: var(--scroll-track-color);
        border-radius: 1px;
        }

        ::-webkit-scrollbar-thumb {
        background-color: var(--scroll-color);
        border-radius: 3px;
        transition: background-color 0.3s ease;
        }

        ::-webkit-scrollbar-thumb:hover {
        background-color: var(--scroll-hover-color);
        }
    }
      /* Responsive Design */
      @media (max-width: 768px) {
        ::-webkit-scrollbar {
            width: 5px;
            }
    
            ::-webkit-scrollbar-track {
            background: var(--scroll-track-color);
            border-radius: 1px;
            }
    
            ::-webkit-scrollbar-thumb {
            background-color: var(--scroll-color);
            border-radius: 1px;
            transition: background-color 0.3s ease;
            }
    
            ::-webkit-scrollbar-thumb:hover {
            background-color: var(--scroll-hover-color);
            }
    
    }



/* Add smooth scrolling to enhance UX */
html {
    scroll-behavior: smooth;
    }

    body {
        font-family: 'Roboto', sans-serif;
        margin: 0;
        padding: 0;
        display: flex;
        height: 100vh;
        overflow: hidden;
    }



    /* Side Navbar */
    .sidebar {
        width: 250px;
        background: var(--navbar-bg-color);
        color: var(--navbar-link-color);
        display: flex;
        flex-direction: column;
        padding: 10px;
        transition: transform 0.3s ease;
        z-index: 1000; /* Ensure sidebar has a higher z-index */
        overflow-y: auto; /* Enable vertical scrolling if content exceeds height */
        border: 2px solid var(--primary-color);
        border-radius: 7px;
        flex-direction: column;
        justify-content: flex-start; /* Align items to the top */
        align-items: center; /* This centers the items horizontally */
    }
    .sidebar h4{
        color: var(--navbar-head-color);
        text-shadow: 1px 1px 1px var(--hover-color);
        border-bottom: 2px solid var(--navbar-link-hover-color);
        margin-bottom: 15px;
    }
    
    .sidebar h4:hover{
        border-bottom: 2px solid var(--navbar-link-hover-color);
        transform: scale(1.05);
    }
    .sidebar a {
        color: var(--navbar-bg-color);
        background-color: var(--text-color);
        padding: 10px 15px;
        margin: 5px 0;
        text-decoration: none;
        display: flex;
        align-items: center;
        gap: 10px;
        border-radius: 5px;
        width: 90%;
        font-weight: bolder;
    }

    .sidebar a:hover, .sidebar a.active {
        background: var(--navbar-link-hover-color);
        transform: scale(1.05);
        behavior: smooth;
    }



/* Top Navbar */

    .topbar {
        width: 100%;
        height: 60px;
        background: var(--navbar-bg-color);
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px;
        color: var(--navbar-head-color);
        box-shadow: 0 0 20px var(--shadow-color3); /* Soft glowing shadow around section */
    }

    .topbar h4{
        margin-bottom: 0px;
        text-shadow: 1px 1px 1px var(--hover-color);
    }
    
    .topbar .profile {
        display: flex;
        align-items: center;
        gap: 10px;
        position: relative;
        margin-right: 20px; /* Adjust this value as needed */
    }
    
    .topbar h4:hover{
        transform: scale(1.05);
        behavior: smooth;
    }
    .profile .btn-secondary{
        background: var(--hover-color);
        color: var(--text-color);
        border-radius: 5px;
        padding: 7px;
    }

    .profile .btn-secondary:hover{
        transform: scale(1.08);
        behavior: smooth;
    }

/* Main Content */
.main {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.content {
    flex: 1;
    padding: 5px;
    padding-bottom: 0px;
    overflow-y: auto;
}

.menu-toggle {
    display: none;
}

.close-btn {
    display: none;
}


/* Mobile Size Code */
    /* Responsive Design */
    @media (max-width: 768px) {
        .sidebar {
            transform: translateX(-100%);
            position: absolute;
            height: 100vh;
        }
        .sidebar.active {
            transform: translateX(0);
        }
        .topbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 15px;
            box-shadow: 0 0 20px var(--shadow-color3); /* Soft glowing shadow around section */
        }
        .topbar .menu-toggle {
            display: block;
            cursor: pointer;
            margin-right: 10px; /* Adds spacing between toggler and heading */
        }
        .close-btn {
            display: block;
            position: absolute;
            top: 10px;
            right: 10px;
            cursor: pointer;
            font-size: 30px;
            color: var(--navbar-head-color);
        }
        .topbar h4 {
            flex-grow: 1;
            text-align: center;
        }
        .topbar .dropdown {
            margin-left: auto;
            margin-right: -5px;
        }

    }


        /* Resume Button */
        .download-buttonres {
            background-color: var(--navbar-resume-bg-color); /* Gold background */
            color: var(--navbar-resume-color);
            padding: 5px 10px;  /* Slightly smaller padding */
            font-size: 0.9rem; /* Smaller button size for simplicity */
            border-radius: 5px;
            font-weight: 500;
            border: 2px solid transparent;
            transition: background-color 0.3s ease;
            margin: 10px 0; /* Margin to add spacing */
            width: 90%; /* Ensures the button takes full width inside its container */
            max-width: 170px; /* Limit the max-width to prevent it from becoming too large */
        }

        .download-buttonres:hover {
            background-color: var(--navbar-resume-hover-bg-color); /* Subtle darker gold on hover */
            color: var(--navbar-resume-hover-color);
            border-color: var(--navbar-resume-hover-border-color); /* Keep the gold border */
            transform: scale(1.02);
        }





        /* Modal Background */
        .custom-modal-style {
            background-color: var(--modal-bg-color); /* Dark background */
            border: 2px solid var(--border-color); /* Iron Man-like gold border */
        }

        .custom-modal-dialog-style {
            border-radius: 10px;
        }

        .custom-modal-content-style {
            background-color: var(--modal-box-color); /* Dark metallic content */
            color: var(--hover-color); /* Gold color for the title */
            border-radius: 10px;
            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5); /* Subtle shadow */
        }

        /* Modal Title */
        .modal-title {
            
            font-size: 1.5rem;
            font-weight: bold;
        }

        /* Close Button */
        .btn-close {
            background: none;
            font-size: 24px;
            color: var(--hover-color); /* Gold color */
            font-weight: bold;
        }

        .btn-close:hover {
            color: var(--hover-color); /* Slightly darker gold on hover */
        }

        /* Download Resume Button */
        .download-button {
            background-color: var(--navbar-resume-bg-color); /* Gold for button */
            color: var(--navbar-resume-color); /* Darker text for contrast */
            padding: 12px 25px;
            border-radius: 10px; /* Rounded edges for consistency */
            font-size: 1.1rem;
            font-weight: 500;
            transition: background-color 0.3s ease, transform 0.2s ease;
        }

        .download-button:hover {
            background-color: var(--navbar-resume-hover-bg-color); /* Darker gold on hover */
            border:1px solid var(--navbar-resume-hover-border-color);
            color: var(--navbar-resume-hover-color); /* Darker text for contrast */
        }


    /* Navbar End */

    /* Style the theme selection dropdown button */
        #themeDropdown {
            background: linear-gradient(135deg, var(--primary-color), var(--hover-color)); /* Darker orange background */
            border-color: var(--navbar-bg-color); /* Matching border */
            color: var(--navbar-bg-color); /* White text */
            font-weight: normal; /* Make it consistent with other navbar items */
            border-radius: 8px; /* Slightly more rounded for a softer look */
            padding: 6px 10px; /* Adjust padding for consistency */
            transition: background-color 0.3s ease, transform 0.2s ease; /* Smooth transition on hover and click */
        }

        /* Add a subtle hover effect on the theme dropdown button */
        #themeDropdown:hover {
            transform: scale(1.05); /* Slightly enlarge on hover for better feedback */
        }

        /* Style for the dropdown container */
        .dropdown {
            margin-right: 25px; /* Ensure the dropdown is aligned with the other nav items */
        }

        /* Remove the default background and borders of the dropdown */
        .dropdown-menu {
            background-color: transparent; /* No background color for the dropdown menu */
            border: none; /* Remove border */
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Soft shadow for the dropdown */
            border-radius: 8px; /* Slightly rounded corners for the dropdown */
            padding: 0; /* Remove extra padding */
            
        }

        /* Style for each dropdown item */
        .dropdown-item {
            color: #000;; /* Consistent text color */
            padding: 8px 16px; /* Slightly increased padding for better spacing */
            border-radius: 6px; /* Rounded corners for each item */
            margin-top: 1px;
            background: transparent; /* Ensure transparent background */
            transition: background-color 0.3s ease, transform 0.2s ease; /* Smooth transition for background and scale effect */
        }

        /* Gradient styles for each theme dropdown item */
        .dropdown-item.theme1 {
            background: linear-gradient(135deg, #1E40AF, #FF7F32); /* Blue Inferno gradient */
        }
        
        .dropdown-item.theme2 {
            background: linear-gradient(135deg, #4E73DF, #2E59D9); /* Skyline gradient */
        }
        
        .dropdown-item.theme3 {
            background: linear-gradient(135deg, #FFD700, #FF8C00); /* Nova Glow gradient */
        }
        
        .dropdown-item.theme4 {
            background: linear-gradient(135deg, #00FFFF, #8A2BE2); /* Neon Eclipse gradient */
        }
        
        .dropdown-item.theme5 {
            background: linear-gradient(135deg, #4A7C59, #6A994E); /* Green Aura gradient */
        }

        /* Hover Effect for Each Dropdown Item */
        .dropdown-item:hover {
            transform: translateX(7px); /* Slight movement effect on hover for depth */
            transition: background 0.3s ease, transform 0.2s ease;
            color: var(--background-color);
        }

        /* Smooth transition for hover effects */
        .dropdown-item:active {
            transform: scale(0.98); /* Slight shrink on click for interactive feedback */
        }

    /* Theme Button End */




    /* Footer Start */

        /* Custom CSS for Footer Section */
        .footer-con {
            background: var(--footer-bg-color); /* Dark metallic gradient */
            color: var(--footer-text-color); /* Light gray text color */
            padding: 80px 0;
            position: relative;
            border-top: 2px solid var(--footer-border-color); /* Gold border to match navbar */
            box-shadow: 0 0 20px var(--shadow-color3); /* Soft glowing shadow around section */
        }
        .footer-con h2 {
            font-size: 36px;
            margin-bottom: 20px;
            color: var(--footer-head-color); /* Gold for the section title */
        }

        .footer-con h3, .footer-con h4 {
            font-size: 24px;
            margin-top: 20px;
            color: var(--footer-head-color); /* Gold for subsection titles */
        }

        .footer-con ul {
            list-style: none;
            padding: 0;
        }

        .footer-con li {
            font-size: 16px;
            margin-bottom: 10px;
        }

        .footer-con i.fas.fa-envelope,
        .footer-con i.fas.fa-map-marker {
            color: var(--footer-icon-color); /* Gold icons */
            transition: color 0.3s ease;
        }

        /* Change icon color on hover */
        .footer-con i.fas.fa-envelope:hover,
        .footer-con i.fas.fa-map-marker:hover {
            color: var(--footer-icon-hover-color); /* Slightly lighter gold on hover */
        }

        /* Social Media Icons */
        .social-icons {
            font-size: 22px;
            margin-top: 20px;
        }

        /* Set initial color for social media icons */
        .social-icons a i {
            color: var(--footer-icon-color); /* Gold icons */
            transition: color 0.3s ease;
        }

        /* Change color of icons on hover */
        .social-icons a i:hover {
            color: var(--footer-icon-hover-color); /* Lighter gold on hover */
        }

        /* Change link color on hover */
        .social-icons a:hover {
            color: var(--footer-icon-hover-color) !important; /* Maintain gold on hover */
        }

        /* For small screen responsiveness */
        @media (max-width: 768px) {
            .footer-con{
                padding: 80px 0px !important;
                min-height: 80px; /* Ensure it has a height */
            }
            .footer-con h2 {
                font-size: 30px; /* Slightly smaller font for mobile */
            }

            .footer-con h3, .footer-con h4 {
                font-size: 20px; /* Slightly smaller font for mobile */
            }
        }
    /* Footer End */

    /* Headings Start */
    .hea{
        color: var(--primary-color);
        text-shadow: 1px 1px 1px #000;
    }
    .headi{
        color: var(--primary-color);
        text-shadow: 1px 1px 1px #000;
    }
    .hea-ab:hover{
        transform: scale(1.05); /* Slight zoom effect */
        text-shadow:  1px 1px 1px var(--hover-color);
        behavior: smooth;
    }
    /* Headings End */
    hr{
        color: var(--hover-color);
        border: 2px solid var(--hover-color);
    }
/* All In One CSS Start - Scroll, Font, Paging */





/* Home Page Start */



    /* About Section Start */

        /* About Section Styling */
        .about-section {
            background: var(--background-color); /* Dark metallic gradient background */
            padding: 40px 0; /* Add more padding for a spacious feel */
            margin-bottom: 40px; /* Increase bottom margin for spacing */
            box-shadow: 0 0 20px var(--shadow-color3); /* Soft glowing shadow around section */
            border-radius: 7px;
        }

        .about-name {
            color: var(--primary-color); /* Uses the theme's primary color */
        }
        .about-name:hover {
            transform: scale(1.05); /* Slight zoom effect */
            text-shadow:  1px 1px 1px var(--hover-color);
            behavior: smooth;
        }
        /* Profile Image Styling */
        .profile-img {
            max-width: 250px;
            border: 4px solid var(--primary-color); /* Gold border for Iron Man theme */
            box-shadow: 0px 4px 15px var(--glow-effect); /* Glow effect around image */
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .profile-img:hover {
            transform: scale(1.05); /* Slight zoom effect */
            border: 4px solid var(--link-hover-color); /* Gold border for Iron Man theme */
            box-shadow: 0px 6px 20px var(--link-hover-color); /* Enhanced glow on hover */
        }

        /* About Section Title Styling */
        .about-title {
            font-size: 2rem;
            color: var(--primary-color); /* Gold color for the title */
            margin-bottom: 20px;
            text-shadow: 1px 1px 1px var(--hover-color);
        }

        /* About Section Text Styling */
        .about-text {
            font-size: 1.1rem;
            color: var(--text-color); /* Light gray text for readability */
            line-height: 1.6;
            margin-bottom: 20px;
        }

        /* Responsive Adjustments for Smaller Screens */
        @media (max-width: 767px) {
            .about-section {
                padding: 30px 0; /* Adjust padding for smaller screens */
            }
            .profile-img {
                max-height: 250px; /* Slightly smaller profile image on mobile */
            }
            .about-title {
                font-size: 1.75rem; /* Adjust title size */
            }
            .about-text {
                font-size: 1rem; /* Adjust text size */
            }
            .about-section .col-md-4{
                border-bottom: 1px solid var(--primary-color);
                margin-bottom: 15px;
            }
        }

    /* About Section End */

    /* Qualifications Start */

        /* Overall styling for the qualifications cards */
        .qualifications {
            padding: 40px 0; /* Add more padding for a spacious feel */
            margin-bottom: 40px; /* Increase bottom margin for spacing */
            box-shadow: 0 0 20px var(--shadow-color3); /* Soft glowing shadow around section */
        }
        .qualification-card {
            background: var(--background-color); /* Dark metallic gradient */
            border: 2px solid var(--primary-color); /* Iron Man-like Gold border */
            transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for hover effect */
        }

        .qualification-card .card-body {
            color: var(--text-color); /* White text for readability */
            font-family: 'Roboto', sans-serif; /* Futuristic font */
        }

        .qualification-card .card-title {
            font-size: 1.25rem;
            font-weight: bold;
            color: var(--primary-color); /* Metallic Gold for titles */
        }

        .qualification-card .card-text {
            font-size: 1rem;
            color: var(--text-color); /* Light Gray text for details */
        }
        
        /* Hover Effect */
        .qualification-card:hover {
            transform: translateY(-5px); /* Slight lift effect */
            box-shadow: 0px 4px 20px var(--shadow-color3); /* Glow effect for futuristic touch */
            border-color: var(--hover-color);  /* Subtle border color change (Iron Man red) */
        }
        /* Responsive adjustments */
        @media (max-width: 767px) {
            .qualification-card {
                margin-bottom: 1rem; /* Space between cards on small screens */
            }
        }

    /* Qualifications End */

    /* Skills Start */

        /* Skills Section Styles */
        #skills {
            padding: 40px 0;
        }
        .skills {
            padding: 40px 0; /* Add more padding for a spacious feel */
            margin-bottom: 40px; /* Increase bottom margin for spacing */
            box-shadow: 0 0 20px var(--shadow-color3); /* Soft glowing shadow around section */
        }
        .skill-box {
            text-align: center;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0px 4px 10px var(--shadow-color3); /* Glow effect for futuristic touch */
            color: var(--primary-color);
            border: 2px solid var(--skill-box-text-hover);
            transition: transform 0.2s, background-color 0.3s ease;
        }

        .skill-box:hover {
            transform: scale(1.05);
            color: var(--skill-box-text-hover);
            background-color: var(--skill-box-bg-hover);
            border: 2px solid var(--skill-box-text-hover);
        }
        .skill_head{
            color: var(--hover-color);
            text-shadow: 1px 1px 1px #000;
        }
        .logo-text {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .logo {
            font-size: 48px; /* Adjust the size as needed */
            margin-right: 10px; /* Add spacing between the logo and text */
        }
        
        .skill-box h3 {
            margin-top: 10px;
            font-size: 25px;
        }

        /* Custom background colors for each skill with a dark, metallic theme */
        .skill-1 {
            background-color: var(--skill-color-1);
        }
        
        .skill-2 {
            background-color: var(--skill-color-2);
        }
        
        .skill-3 {
            background-color: var(--skill-color-3);
        }
        
        .skill-4 {
            background-color: var(--skill-color-4);
        }
        
        .skill-5 {
            background-color: var(--skill-color-5);
        }
        
        .skill-6 {
            background-color: var(--skill-color-6);
        }
        
        .skill-7 {
            background-color: var(--skill-color-7);
        }
        
        .skill-8 {
            background-color: var(--skill-color-8);
        }
        
        .skill-9 {
            background-color: var(--skill-color-9);
        }
        
        .skill-10 {
            background-color: var(--skill-color-10);
        }
        
        .skill-11 {
            background-color: var(--skill-color-11);
        }
        
        .skill-12 {
            background-color: var(--skill-color-12);
        }

    /* Skills Start */



/* Home Page End */





/* Projects Page Start */



    /* Project Section Styles */
    #projects {
        padding: 40px 0;
    }

    .project-card {
        color: var(--primary-color); /* Golden text */
        text-align: center;
        background-color: var(--background-color); /* Dark background for cards */
        padding: 20px;
        border-radius: 8px;
        border: 2px solid var(--border-color) ;
        box-shadow: 0 4px 8px var(--background-color);
        transition: transform 0.2s;
    }

    .project-card:hover {
        transform: scale(1.02);
        background-color: var(--background-color); /* Slightly lighter dark background on hover */
        border: 1px solid var(--hover-color) ;
    }

    .project-card img {
        max-width: 100%;
        height: auto;
        border-radius: 8px; /* Rounded corners for images */
    }

    .project-card h3 {
        margin-top: 20px;
        font-size: 24px;
        color: var(--primary-color); /* Golden text for project title */
    }

    .project-card p {
        font-size: 16px;
        color: var(--text-color); /* Lighter gray text for project description */
    }

    .project-links {
        margin-top: 20px;
    }

    .project-links button {
        background-color: var(--navbar-resume-bg-color); /* Gold background */
        color: var(--navbar-resume-color);
        padding: 7px 7px 6px;
        font-size: 0.9rem; /* Smaller button size for simplicity */
        border-radius: 10px;
        font-weight: 500;
        border: 2px solid transparent;
        transition: background-color 0.3s ease;
    }

    .project-links button:hover {
        background-color: var(--navbar-resume-hover-bg-color); /* Subtle darker gold on hover */
        color: var(--navbar-resume-hover-color);
        border-color: 2px solid var(--navbar-resume-hover-border-color); /* Keep the gold border */
    }

    .mobtn {
        background-color: var(--navbar-resume-bg-color); /* Gold background */
        color: var(--navbar-resume-color);
        padding: 11px 10px 8px;
        font-size: 0.9rem; /* Smaller button size for simplicity */
        border-radius: 10px;
        font-weight: 500;
        border: 1px solid transparent;
        transition: background-color 0.3s ease;
    }

    .mobtn:hover {
        background-color: var(--navbar-resume-hover-bg-color); /* Subtle darker gold on hover */
        color: var(--navbar-resume-hover-color);
        border-color: var(--navbar-resume-hover-border-color); /* Keep the gold border */
    }

    .mobg {
        background-color: var(--background-color); /* Dark gray background for images */
        color: var(--primary-color); /* Golden text */
        border: 2px solid var(--border-color); /* Golden border */
        border-radius: 10px;

    }
    .mobg:hover{
        border: 2px solid var(--hover-color);
    }



    /* General slider styles */
    .carousel {
        max-width: 70%; /* Adjust the width to make it smaller on desktop */
        margin: 0 auto; /* Center the slider horizontally */
        border: 2px solid var(--border-color); /* Optional: Add a border for aesthetics */
        border-radius: 5px; /* Optional: Add rounded corners */
        overflow: hidden;
    }

    /* Adjust carousel images */
    .carousel img {
        height: auto; /* Maintain the aspect ratio */
        object-fit: cover; /* Ensure images are neatly cropped if needed */
        border-radius: 5px; /* Match the container's rounded corners */
    }

    /* About Section Styling */
    .project-view {
        background: var(--background-color); /* Dark metallic gradient background */
        padding: 40px 0; /* Add more padding for a spacious feel */
        margin-bottom: 40px; /* Increase bottom margin for spacing */
        box-shadow: 0 0 20px var(--shadow-color3); /* Soft glowing shadow around section */
    }

    .project-name {
        color: var(--primary-color); /* Uses the theme's primary color */
        text-shadow: 2px 2px 2px var(--hover-color);
    }
    .project-name:hover {
        transform: scale(1.05); /* Slight zoom effect */
        text-shadow: 3px 2px 2px var(--hover-color);
        behavior: smooth;
    }
    /* Profile Image Styling */
    .project-img {
        max-width: 100%;
        height: auto;
        max-height: 300px;
        width: auto;
        border: 4px solid var(--primary-color); /* Gold border for Iron Man theme */
        box-shadow: 0px 4px 15px var(--glow-effect); /* Glow effect around image */
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        border-radius: 5px;
    }

    .project-img:hover {
        transform: scale(1.05); /* Slight zoom effect */
        border: 4px solid var(--link-hover-color); /* Gold border for Iron Man theme */
        box-shadow: 0px 6px 20px var(--link-hover-color); /* Enhanced glow on hover */
    }

    /* About Section Title Styling */
    .project-title {
        font-size: 2rem;
        color: var(--primary-color); /* Gold color for the title */
        margin-bottom: 20px;
        text-shadow: 1px 1px 1px var(--hover-color);
    }

    /* About Section Text Styling */
    .project-text {
        font-size: 1.1rem;
        color: var(--text-color); /* Light gray text for readability */
        line-height: 1.6;
        margin-bottom: 20px;
    }

    /* Responsive Adjustments for Smaller Screens */
    @media (max-width: 767px) {
        .project-view {
            padding: 30px 0; /* Adjust padding for smaller screens */
        }
        .carousel {
            max-width: 100%; /* For smaller screens, allow the slider to take full width */
            border: none; /* Remove the border for cleaner mobile UI */
        }
    }

/* Projects Page End */





/* Contact Page Start */



    /* Contact Container Background */
    .cont-contain {
        justify-content: center;
        align-items: center;
        background: var(--gradient-bg); /* Dark metallic gradient */
        color:var(--primary-color); /* Gold text */
    }

    /* Contact Form Box */
    .cont-contain-box {
        background-color: var(--background-color); /* Dark gray */
        color:var(--primary-color); /* Gold text */
        border: 2px solid var(--border-color); /* Gold border */
        box-shadow: 0 4px 8px var(--shadow-color3); /* Soft gold glow */
    }

    /* Form Heading */
    .cont-contain-box h2 {
        color:var(--hover-color); /* Gold heading */
        font-weight: 600;
    }
    /* Floating Label Input Fields */
    .cont-contain-box .form-floating .form-control {
        background-color: var(--background-color); /* Dark gray input background */
        color: var(--primary-color); /* Gold text */
        border: 1px solid var(--border-color); /* Gold border */
    }

    .cont-contain-box .form-floating label:after {
        color:var(--primary-color); /* Gold label text */
        border-color: var(--border-color); /* Gold focus border */
        box-shadow: 2px 2px 8px var(--shadow-color3); /* Gold glow on focus */
        border: 2px solid var(--border-color); /* Gold border */
    }

    /* Focus State for Input Fields */
    .cont-contain-box .form-floating .form-control:focus {
        color: var(--primary-color);
        border-color: var(--border-color); /* Gold focus border */
        box-shadow: 0 0 8px var(--shadow-color3); /* Gold glow on focus */
        border: 2px solid var(--border-color); /* Gold border */
    }

    /* Textarea Field */
    .cont-contain-box textarea.form-control {
        background-color: var(--background-color); /* Dark gray background */
        color:var(--primary-color); /* Gold text */
    }

    /* Center the button container */
    .cont-contain-box .pt-3.pb-3 {
        display: flex;
        justify-content: center; /* Center the button horizontally */
        align-items: center; /* Align items vertically */
    }
    .cont-contain-box .pt-1.pb-1 {
        display: flex;
        justify-content: center; /* Center the button horizontally */
        align-items: center; /* Align items vertically */
    }

    /* Submit Button */
    .cont-contain-box .btn-primary {
        background-color: var(--navbar-resume-bg-color); /* Gold button */
        color: var(--navbar-resume-color); /* Dark text for contrast */
        font-weight: bold;
        border: 2px solid var(--navbar-resume-hover-bg-color);
        font-size: 1.0rem; /* Smaller font size */
        padding: 8px 16px; /* Smaller padding */
        width: 180px; /* Auto width based on content */
        transition: background-color 0.3s ease; /* Add smooth transition for hover */
        border-radius: 10px;
    }

    .cont-contain-box .btn-primary:hover {
        background-color: var(--navbar-resume-hover-bg-color); /* Darker gold hover effect */
        border-color: var(--navbar-resume-border-hover-color);
        color: var(--navbar-resume-hover-color); /* White text on hover */
    }
    .forms .reg {
        color:var(--hover-color);
        text-decoration:none;
        padding: 1px;
        padding-left: 15px;
        padding-right: 15px;
    }
    .forms .reg:hover {
        color:var(--primary-color);
    }

    .forms .forg {
        color:var(--hover-color);
        text-decoration:none;
        max-width: 180px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .forms .forg:hover {
        color:var(--primary-color);
    }
    /* Responsive Styles */
    @media (max-width: 768px) {
        .cont-contain {
            padding: 10px;
        }
        .cont-contain-box .form-floating label {
            font-size: 14px;
        }
        .cont-contain-box .btn-primary {
            font-size: 16px;
        }
    }



/* Contact Page End */