/* General Section Styles */

.top-bar {
    padding: 3px 0;
    font-size: 14px;
    color: #ffffff;
    background: #343a40;
}

.layout_padding_right {
  padding: 0 80px 0 0;
}

.sme-plans {
    padding: 50px 15px;
    background-color: #f9f9f9;
    font-family: Arial, sans-serif;
 }
 
 .sme-plans .section-title {
    text-align: center;
    font-size: 28px;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
 }
 
 .sme-plans .section-description {
    text-align: center;
    font-size: 16px;
    color: #555;
    margin-bottom: 40px;
 }
 
 /* Plan Card Styles */
 .plan-card {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
 }
 
 .plan-card:hover {
    transform: scale(1.05);
 }
 
 .plan-title {
    font-size: 20px;
    font-weight: bold;
    color: #007bff;
    margin-bottom: 10px;
 }
 
 .plan-price {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    margin-bottom: 15px;
 }
 
 .plan-features {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
 }
 
 .plan-features li {
    font-size: 14px;
    color: #555;
    margin-bottom: 5px;
 }
 
 .plan-features li:last-child {
    margin-bottom: 0;
 }


 .sip-trunk-services {
   padding: 50px 15px;
   background-color: #f9f9f9;
   font-family: Arial, sans-serif;
}

.sip-trunk-services .section-title {
   text-align: center;
   font-size: 28px;
   font-weight: bold;
   color: #333;
   margin-bottom: 10px;
}

.sip-trunk-services .section-description {
   text-align: center;
   font-size: 16px;
   color: #555;
   margin-bottom: 40px;
}
 
 .call-rates {
   width: 100%;
   border-collapse: collapse;
   margin-top: 15px;
}

.call-rates th,
.call-rates td {
   border: 1px solid #ddd;
   padding: 8px;
   text-align: center;
}

.call-rates th {
   background-color: #007bff;
   color: white;
   font-weight: bold;
}

.call-rates tr:nth-child(even) {
   background-color: #f9f9f9;
}

.call-rates tr:hover {
   background-color: #f1f1f1;
}

.contact_us_section {
   padding: 50px 15px;
   background-color: #f9f9f9;
}

.section-title {
   font-size: 28px;
   font-weight: bold;
   text-align: center;
   margin-bottom: 15px;
}

.section-description {
   text-align: center;
   font-size: 16px;
   margin-bottom: 30px;
   color: #555;
}

.office-card {
   background-color: #fff;
   border: 1px solid #ddd;
   border-radius: 8px;
   padding: 20px;
   text-align: center;
   margin-bottom: 20px;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.office-card h5 {
   font-size: 20px;
   margin-bottom: 10px; 
   color: #007bff;
}

.office-card p {
   font-size: 14px;
   color: #555;
   margin-bottom: 5px;
}

.office-card .btn {
   margin: 5px;
   font-size: 14px;
}

.btn-whatsapp {
   display: inline-block;
   background-color: #25d366; /* WhatsApp green */
   color: #fff;
   padding: 10px 20px;
   font-size: 16px;
   font-weight: bold;
   text-align: center;
   text-decoration: none;
   border-radius: 5px;
   transition: background-color 0.3s ease;
}

.btn-whatsapp i {
   margin-right: 10px;
   font-size: 18px;
}

.btn-whatsapp:hover {
   background-color: #1ebc57; /* Darker WhatsApp green */
   text-decoration: none;
}

.why-choose-aliencloud {
   background-color: #f9f9f9;
}

.feature-box {
   background: #fff;
   border: 1px solid #ddd;
   border-radius: 8px;
   padding: 20px;
   text-align: left;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
   transition: transform 0.3s ease;
}

.feature-box:hover {
   transform: scale(1.05);
}

.feature-icon {
   font-size: 36px;
   color: #007bff;
   margin-bottom: 15px;
}

.feature-box h4 {
   font-size: 18px;
   font-weight: bold;
   margin-bottom: 10px;
   color: #333;
}

.feature-box p {
   font-size: 14px;
   color: #555;
}


.sip-trunk-steps {
   background-color: #f9f9f9;
}

.section-title {
   font-size: 28px;
   font-weight: bold;
   color: #333;
}

.section-description {
   font-size: 16px;
   color: #555;
   margin-bottom: 30px;
}

.step-card {
   background: #fff;
   border: 1px solid #ddd;
   border-radius: 8px;
   padding: 20px;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
   transition: transform 0.3s ease;
}

.step-card:hover {
   transform: scale(1.05);
}

.step-icon {
   font-size: 36px;
   color: #007bff;
   margin-bottom: 15px;
}

.step-card h4 {
   font-size: 18px;
   font-weight: bold;
   color: #333;
   margin-bottom: 10px;
}

.step-card p {
   font-size: 14px;
   color: #555;
   margin: 0;
}


.nav-item.active > .nav-link,
.dropdown-item.active {
    /* background-color: #007bff; */
    color: #fff;
    border-radius: 5px;
}

.dropdown-menu {
   background-color: #2c2f33; /* Dark background for the menu */
   border: none; /* Remove border */
   border-radius: 5px; /* Add rounded corners */
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* Add shadow for depth */
   padding: 5px 0; /* Add spacing between menu items */
}

.dropdown-item {
   color: #fff; /* White text for better contrast */
   padding: 10px 20px; /* Add more padding for a clean look */
   transition: background 0.3s ease, color 0.3s ease; /* Smooth transition */
   font-size: 14px; /* Adjust font size for readability */
   border-radius: 5px; /* Round corners for individual items */
}

.dropdown-item:hover, 
.dropdown-item:focus {
   background-color: #007bff; /* Blue background on hover */
   color: #fff; /* White text on hover */
}

.navbar .dropdown-menu::before {
   content: '';
   position: absolute;
   top: -10px;
   left: 20px;
   width: 0;
   height: 0;
   border-left: 8px solid transparent;
   border-right: 8px solid transparent;
   border-bottom: 10px solid #2c2f33; /* Triangle pointing to the dropdown */
}



.voip-recommendations-section {
   background-color: #f9f9f9;
   color: #333;
}

.section-title {
   font-size: 28px;
   font-weight: bold;
   color: #007bff;
   margin-bottom: 10px;
}

.section-description {
   font-size: 16px;
   color: #555;
   margin-bottom: 20px;
}

h3 {
   font-size: 22px;
   font-weight: bold;
   color: #007bff;
   margin-bottom: 15px;
}

h4 {
   font-size: 18px;
   font-weight: bold;
   color: #333;
   margin-bottom: 10px;
}

.installation-type {
   background: #fff;
   border: 1px solid #ddd;
   border-radius: 5px;
   padding: 15px;
   margin-bottom: 20px;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.btn-primary {
   background-color: #007bff;
   border: none;
   color: #fff;
   padding: 10px 20px;
   border-radius: 5px;
   text-decoration: none;
   transition: background-color 0.3s ease;
}

.btn-primary:hover {
   background-color: #0056b3;
}


.yealink-setup-section {
   background-color: #f9f9f9;
   color: #333;
}

.section-title {
   font-size: 28px;
   font-weight: bold;
   color: #007bff;
   margin-bottom: 10px;
}

.section-description {
   font-size: 16px;
   color: #555;
   margin-bottom: 20px;
   line-height: 1.6;
}

.setup-steps h3 {
   font-size: 22px;
   font-weight: bold;
   color: #333;
   margin-top: 20px;
}

.setup-steps p {
   font-size: 14px;
   line-height: 1.8;
   color: #555;
}

.setup-steps ul {
   margin-top: 10px;
   padding-left: 20px;
   list-style-type: disc;
   color: #555;
}

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

.setup-steps a {
   text-decoration: underline;
   color: #007bff;
}

.setup-steps a:hover {
   text-decoration: none;
   color: #0056b3;
}

figure {
   margin-top: 15px;
   text-align: center;
}