/* Styles for all 26 letters */

/* Style for letter A */
.navbar.a {
    width: 250px;
    background: linear-gradient(135deg, #2c3e50, #4a6491);
    color: white;
    padding: 20px;
    height: 100%;
    box-shadow: 3px 0 10px rgba(0,0,0,0.1);
}

/* Style for letter B */
.navbar.b {
    width: 250px;
    background: linear-gradient(135deg, #1a5f7a, #159895);
    color: white;
    padding: 20px;
    height: 100%;
    box-shadow: 3px 0 10px rgba(0,0,0,0.1);
}

/* Style for letter C */
.navbar.c {
    width: 250px;
    background: linear-gradient(135deg, #645cba, #ab47bc);
    color: white;
    padding: 20px;
    height: 100%;
    box-shadow: 3px 0 10px rgba(0,0,0,0.1);
}

/* Style for letter D */
.navbar.d {
    width: 250px;
    background: linear-gradient(135deg, #d83a56, #ff6b6b);
    color: white;
    padding: 20px;
    height: 100%;
    box-shadow: 3px 0 10px rgba(0,0,0,0.1);
}

/* Style for letter E */
.navbar.e {
    width: 250px;
    background: linear-gradient(135deg, #226f54, #87c38f);
    color: white;
    padding: 20px;
    height: 100%;
    box-shadow: 3px 0 10px rgba(0,0,0,0.1);
}

/* Style for letter F */
.navbar.f {
    width: 250px;
    background: linear-gradient(135deg, #f9a826, #f9a826);
    color: white;
    padding: 20px;
    height: 100%;
    box-shadow: 3px 0 10px rgba(0,0,0,0.1);
}

/* Style for letter G */
.navbar.g {
    width: 250px;
    background: linear-gradient(135deg, #3e9ba9, #3e9ba9);
    color: white;
    padding: 20px;
    height: 100%;
    box-shadow: 3px 0 10px rgba(0,0,0,0.1);
}

/* Style for letter H */
.navbar.h {
    width: 250px;
    background: linear-gradient(135deg, #8b5a2b, #b5651d);
    color: white;
    padding: 20px;
    height: 100%;
    box-shadow: 3px 0 10px rgba(0,0,0,0.1);
}

/* Style for letter I */
.navbar.i {
    width: 250px;
    background: linear-gradient(135deg, #6c5ce7, #a29bfe);
    color: white;
    padding: 20px;
    height: 100%;
    box-shadow: 3px 0 10px rgba(0,0,0,0.1);
}

/* Style for letter J */
.navbar.j {
    width: 250px;
    background: linear-gradient(135deg, #e17055, #e17055);
    color: white;
    padding: 20px;
    height: 100%;
    box-shadow: 3px 0 10px rgba(0,0,0,0.1);
}

/* Style for letter K */
.navbar.k {
    width: 250px;
    background: linear-gradient(135deg, #00b894, #00b894);
    color: white;
    padding: 20px;
    height: 100%;
    box-shadow: 3px 0 10px rgba(0,0,0,0.1);
}

/* Style for letter L */
.navbar.l {
    width: 250px;
    background: linear-gradient(135deg, #0984e3, #74b9ff);
    color: white;
    padding: 20px;
    height: 100%;
    box-shadow: 3px 0 10px rgba(0,0,0,0.1);
}

/* Style for letter M */
.navbar.m {
    width: 250px;
    background: linear-gradient(135deg, #e84393, #fd79a8);
    color: white;
    padding: 20px;
    height: 100%;
    box-shadow: 3px 0 10px rgba(0,0,0,0.1);
}

/* Style for letter N */
.navbar.n {
    width: 250px;
    background: linear-gradient(135deg, #6a89cc, #6a89cc);
    color: white;
    padding: 20px;
    height: 100%;
    box-shadow: 3px 0 10px rgba(0,0,0,0.1);
}

/* Style for letter O */
.navbar.o {
    width: 250px;
    background: linear-gradient(135deg, #303960, #303960);
    color: white;
    padding: 20px;
    height: 100%;
    box-shadow: 3px 0 10px rgba(0,0,0,0.1);
}

/* Style for letter P */
.navbar.p {
    width: 250px;
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: white;
    padding: 20px;
    height: 100%;
    box-shadow: 3px 0 10px rgba(0,0,0,0.1);
}

/* Style for letter Q */
.navbar.q {
    width: 250px;
    background: linear-gradient(135deg, #8e44ad, #9b59b6);
    color: white;
    padding: 20px;
    height: 100%;
    box-shadow: 3px 0 10px rgba(0,0,0,0.1);
}

/* Style for letter R */
.navbar.r {
    width: 250px;
    background: linear-gradient(135deg, #27ae60, #2ecc71);
    color: white;
    padding: 20px;
    height: 100%;
    box-shadow: 3px 0 10px rgba(0,0,0,0.1);
}

/* Style for letter S */
.navbar.s {
    width: 250px;
    background: linear-gradient(135deg, #f39c12, #e67e22);
    color: white;
    padding: 20px;
    height: 100%;
    box-shadow: 3px 0 10px rgba(0,0,0,0.1);
}

/* Style for letter T */
.navbar.t {
    width: 250px;
    background: linear-gradient(135deg, #16a085, #1abc9c);
    color: white;
    padding: 20px;
    height: 100%;
    box-shadow: 3px 0 10px rgba(0,0,0,0.1);
}

/* Style for letter U */
.navbar.u {
    width: 250px;
    background: linear-gradient(135deg, #2980b9, #3498db);
    color: white;
    padding: 20px;
    height: 100%;
    box-shadow: 3px 0 10px rgba(0,0,0,0.1);
}

/* Style for letter V */
.navbar.v {
    width: 250px;
    background: linear-gradient(135deg, #c0392b, #e74c3c);
    color: white;
    padding: 20px;
    height: 100%;
    box-shadow: 3px 0 10px rgba(0,0,0,0.1);
}

/* Style for letter W */
.navbar.w {
    width: 250px;
    background: linear-gradient(135deg, #7f8c8d, #95a5a6);
    color: white;
    padding: 20px;
    height: 100%;
    box-shadow: 3px 0 10px rgba(0,0,0,0.1);
}

/* Style for letter X */
.navbar.x {
    width: 250px;
    background: linear-gradient(135deg, #34495e, #2c3e50);
    color: white;
    padding: 20px;
    height: 100%;
    box-shadow: 3px 0 10px rgba(0,0,0,0.1);
}

/* Style for letter Y */
.navbar.y {
    width: 250px;
    background: linear-gradient(135deg, #d35400, #e67e22);
    color: white;
    padding: 20px;
    height: 100%;
    box-shadow: 3px 0 10px rgba(0,0,0,0.1);
}

/* Style for letter Z */
.navbar.z {
    width: 250px;
    background: linear-gradient(135deg, #2c3e50, #34495e);
    color: white;
    padding: 20px;
    height: 100%;
    box-shadow: 3px 0 10px rgba(0,0,0,0.1);
}

/* Container styles for each letter */
.container.a {
    border-left: 5px solid #2c3e50;
}

.container.b {
    border-left: 5px solid #1a5f7a;
}

.container.c {
    border-left: 5px solid #645cba;
}

.container.d {
    border-left: 5px solid #d83a56;
}

.container.e {
    border-left: 5px solid #226f54;
}

.container.f {
    border-left: 5px solid #f9a826;
}

.container.g {
    border-left: 5px solid #3e9ba9;
}

.container.h {
    border-left: 5px solid #8b5a2b;
}

.container.i {
    border-left: 5px solid #6c5ce7;
}

.container.j {
    border-left: 5px solid #e17055;
}

.container.k {
    border-left: 5px solid #00b894;
}

.container.l {
    border-left: 5px solid #0984e3;
}

.container.m {
    border-left: 5px solid #e84393;
}

.container.n {
    border-left: 5px solid #6a89cc;
}

.container.o {
    border-left: 5px solid #303960;
}

.container.p {
    border-left: 5px solid #e74c3c;
}

.container.q {
    border-left: 5px solid #8e44ad;
}

.container.r {
    border-left: 5px solid #27ae60;
}

.container.s {
    border-left: 5px solid #f39c12;
}

.container.t {
    border-left: 5px solid #16a085;
}

.container.u {
    border-left: 5px solid #2980b9;
}

.container.v {
    border-left: 5px solid #c0392b;
}

.container.w {
    border-left: 5px solid #7f8c8d;
}

.container.x {
    border-left: 5px solid #34495e;
}

.container.y {
    border-left: 5px solid #d35400;
}

.container.z {
    border-left: 5px solid #2c3e50;
}

/* Products section styles for each letter */
#products.a {
    border-top: 3px solid #2c3e50;
}

#products.b {
    border-top: 3px solid #1a5f7a;
}

#products.c {
    border-top: 3px solid #645cba;
}

#products.d {
    border-top: 3px solid #d83a56;
}

#products.e {
    border-top: 3px solid #226f54;
}

#products.f {
    border-top: 3px solid #f9a826;
}

#products.g {
    border-top: 3px solid #3e9ba9;
}

#products.h {
    border-top: 3px solid #8b5a2b;
}

#products.i {
    border-top: 3px solid #6c5ce7;
}

#products.j {
    border-top: 3px solid #e17055;
}

#products.k {
    border-top: 3px solid #00b894;
}

#products.l {
    border-top: 3px solid #0984e3;
}

#products.m {
    border-top: 3px solid #e84393;
}

#products.n {
    border-top: 3px solid #6a89cc;
}

#products.o {
    border-top: 3px solid #303960;
}

#products.p {
    border-top: 3px solid #e74c3c;
}

#products.q {
    border-top: 3px solid #8e44ad;
}

#products.r {
    border-top: 3px solid #27ae60;
}

#products.s {
    border-top: 3px solid #f39c12;
}

#products.t {
    border-top: 3px solid #16a085;
}

#products.u {
    border-top: 3px solid #2980b9;
}

#products.v {
    border-top: 3px solid #c0392b;
}

#products.w {
    border-top: 3px solid #7f8c8d;
}

#products.x {
    border-top: 3px solid #34495e;
}

#products.y {
    border-top: 3px solid #d35400;
}

#products.z {
    border-top: 3px solid #2c3e50;
}

/* Services section styles for each letter */
#services.a {
    border-top: 3px solid #2c3e50;
}

#services.b {
    border-top: 3px solid #1a5f7a;
}

#services.c {
    border-top: 3px solid #645cba;
}

#services.d {
    border-top: 3px solid #d83a56;
}

#services.e {
    border-top: 3px solid #226f54;
}

#services.f {
    border-top: 3px solid #f9a826;
}

#services.g {
    border-top: 3px solid #3e9ba9;
}

#services.h {
    border-top: 3px solid #8b5a2b;
}

#services.i {
    border-top: 3px solid #6c5ce7;
}

#services.j {
    border-top: 3px solid #e17055;
}

#services.k {
    border-top: 3px solid #00b894;
}

#services.l {
    border-top: 3px solid #0984e3;
}

#services.m {
    border-top: 3px solid #e84393;
}

#services.n {
    border-top: 3px solid #6a89cc;
}

#services.o {
    border-top: 3px solid #303960;
}

#services.p {
    border-top: 3px solid #e74c3c;
}

#services.q {
    border-top: 3px solid #8e44ad;
}

#services.r {
    border-top: 3px solid #27ae60;
}

#services.s {
    border-top: 3px solid #f39c12;
}

#services.t {
    border-top: 3px solid #16a085;
}

#services.u {
    border-top: 3px solid #2980b9;
}

#services.v {
    border-top: 3px solid #c0392b;
}

#services.w {
    border-top: 3px solid #7f8c8d;
}

#services.x {
    border-top: 3px solid #34495e;
}

#services.y {
    border-top: 3px solid #d35400;
}

#services.z {
    border-top: 3px solid #2c3e50;
}

/* About section styles for each letter */
.about.a {
    border-left: 5px solid #2c3e50;
}

.about.b {
    border-left: 5px solid #1a5f7a;
}

.about.c {
    border-left: 5px solid #645cba;
}

.about.d {
    border-left: 5px solid #d83a56;
}

.about.e {
    border-left: 5px solid #226f54;
}

.about.f {
    border-left: 5px solid #f9a826;
}

.about.g {
    border-left: 5px solid #3e9ba9;
}

.about.h {
    border-left: 5px solid #8b5a2b;
}

.about.i {
    border-left: 5px solid #6c5ce7;
}

.about.j {
    border-left: 5px solid #e17055;
}

.about.k {
    border-left: 5px solid #00b894;
}

.about.l {
    border-left: 5px solid #0984e3;
}

.about.m {
    border-left: 5px solid #e84393;
}

.about.n {
    border-left: 5px solid #6a89cc;
}

.about.o {
    border-left: 5px solid #303960;
}

.about.p {
    border-left: 5px solid #e74c3c;
}

.about.q {
    border-left: 5px solid #8e44ad;
}

.about.r {
    border-left: 5px solid #27ae60;
}

.about.s {
    border-left: 5px solid #f39c12;
}

.about.t {
    border-left: 5px solid #16a085;
}

.about.u {
    border-left: 5px solid #2980b9;
}

.about.v {
    border-left: 5px solid #c0392b;
}

.about.w {
    border-left: 5px solid #7f8c8d;
}

.about.x {
    border-left: 5px solid #34495e;
}

.about.y {
    border-left: 5px solid #d35400;
}

.about.z {
    border-left: 5px solid #2c3e50;
}

/* Common styles */
.navbar h2 {
    text-align: center;
    margin-top: 0;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.navbar ul {
    list-style-type: none;
    padding: 0;
}

.navbar ul li {
    margin-bottom: 10px;
}

.navbar ul li a {
    color: #e0e0e0;
    text-decoration: none;
    display: block;
    padding: 12px 15px;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.navbar ul li a:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
    transform: translateX(5px);
}

.navbar ul li a.active {
    background-color: #3498db;
    color: white;
}