/*
 * Components CSS - v3 - 2015-08-22
 * http://www.myresponsee.com
 * Copyright 2015, Vision Design - graphic zoo
 * Free to use under the MIT license.
*/
/* Tabs */
.tab-item {
    background: none repeat scroll 0 0 #fff;
    display: none;
    padding: 1.25em 0;
}

.tab-item.tab-active {
    display: block;
}

.tab-content > .tab-label {
    display: none;
}

.tab-nav > .tab-label {
    float:left;
}

a.tab-label, a.tab-label:link, a.tab-label:visited, a.tab-label:hover {
    background: none repeat scroll 0 0 #262626;
    color: #fff;
    margin-right: 1px;
    padding: 0.625em 1.25em;
    transition: background 0.20s linear 0s;
    -o-transition: background 0.20s linear 0s;
    -ms-transition: background 0.20s linear 0s;
    -moz-transition: background 0.20s linear 0s;
    -webkit-transition: background 0.20s linear 0s;
    border-radius: 4px 4px 0 0; /* Rounded top for tabs */
}

a.tab-label:hover, a.tab-label.active-btn {
    background: none repeat scroll 0 0 #999;
}

.tab-label.active-btn {
    cursor: default;
}

.tab-content {
    text-align: left;
    padding: 20px;
    background: #f9f9f9;
    border-radius: 0 8px 8px 8px; /* Rounded content area */
}

@media screen and (max-width:768px) {    
    .tab-nav > .tab-label {
        margin: 0.5px 0;
        width: 100%;
    }
}

/* Custom forms */
form.customform input, form.customform select, form.customform textarea, form.customform button {
    font-size:0.9em;
    font-family:inherit;
    margin-bottom:1.25em;
} 

form.customform input, form.customform select {height: 2.7em;}

form.customform input, form.customform textarea, form.customform select { 
    background: none repeat scroll 0 0 #f5f5f5;
    transition: background 0.20s linear 0s;
    -o-transition: background 0.20s linear 0s;
    -ms-transition: background 0.20s linear 0s;
    -moz-transition: background 0.20s linear 0s;
    -webkit-transition: background 0.20s linear 0s;
    border-radius: 6px; /* Rounded inputs */
}

form.customform input:hover, form.customform textarea:hover, form.customform select:hover, form.customform input:focus, form.customform textarea:focus, form.customform select:focus {background: none repeat scroll 0 0 #fff;}

form.customform input, form.customform textarea, form.customform select {
    background: none repeat scroll 0 0 #f5f5f5;
    border: 1px solid #e0e0e0;
    padding: 0.625em;
    width: 100%;
}

form.customform input[type="file"] {
    border: 1px solid #e0e0e0;
    height: auto;
    max-height: 2.7em;
    min-height: 2.7em;
    padding: 0.4em;
    width: 100%;
}

form.customform input[type="radio"], form.customform input[type="checkbox"] {
    margin-right: 0.625em;
    width:auto;
    padding:0;
    height:auto;
}

form.customform option {padding: 0.625em;}

form.customform select[multiple="multiple"] {height: auto;}

form.customform button {
    width: 100%;
    background: none repeat scroll 0 0 #444;
    border: 0 none;
    color: #fff;
    height: 2.7em;
    padding: 0.625em;
    cursor:pointer;
    width: 100%;
    transition: background 0.20s linear 0s;
    -o-transition: background 0.20s linear 0s;
    -ms-transition: background 0.20s linear 0s;
    -moz-transition: background 0.20s linear 0s;
    -webkit-transition: background 0.20s linear 0s;
    border-radius: 6px; /* Rounded button */
}	

form.customform button:hover {background: none repeat scroll 0 0 #666;}

/* Icon font - MFG labs */
@font-face {
    font-family: 'mfg';
    src: url('../font/mfglabsiconset-webfont.eot');
    src: url('../font/mfglabsiconset-webfont.svg#mfg_labs_iconsetregular') format('svg'),
         url('../font/mfglabsiconset-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/mfglabsiconset-webfont.woff') format('woff'),
         url('../font/mfglabsiconset-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

i, .icon {
    font-family: 'mfg';
    font-size: 1em;
    font-style: normal;
    font-weight: normal;
    color:#e3e3e3;
    transition: color 0.3s ease; /* Smooth icon color change */
}

i:hover, .icon:hover {
    color: #04aa6d; /* Vibrant hover color */
}

.icon2x {font-size: 2em;}
.icon3x {font-size: 3em;}

.gradient {
    color: #999;
    text-shadow: 1px 1px 1px rgba(27, 27, 27, 0.19);
    transition: all 0.1s ease-in-out 0s;
}

.gradient:hover, .gradient .current {
    color: #eee;
    text-shadow: 0 0 3px rgba(255, 255, 255, 0.25);
}

/* ... (rest of icon codes remain the same, no changes needed) */