/* Bootstrap Primary Color Override */
:root {
--bs-primary: #ff8a00;
--bs-primary-rgb: 255, 138, 0;
}
/* Poppins Font Family */
body {
font-family: 'Poppins', sans-serif;
line-height: 1.6;
font-size: 14px;
}
.text-primary{
color: #ff8a00 !important;
border-color: #ff8a00 !important;
}
h1, .h1 { font-size: 1.75rem; }
h2, .h2 { font-size: 1.5rem; }
h3, .h3 { font-size: 1.25rem; }
h4, .h4 { font-size: 1.125rem; }
h5, .h5 { font-size: 1rem; }
h6, .h6 { font-size: 0.875rem; }
/* Utility Bar */
.utility-bar {
border-bottom: 1px solid #e9ecef;
}
.utility-bar .list-inline-item {
margin-right: 1.5rem;
}
.utility-bar a {
text-decoration: none;
font-size: 0.75rem;
}
/* Logo Design */
.navbar-brand img {
min-height: 70px;
width: auto;
}
.brand-name {
font-weight: 700;
font-size: 1.25rem;
color: #007bff;
line-height: 1;
}
.brand-tagline {
font-size: 0.625rem;
color: #6c757d;
line-height: 1;
}
/* Navigation */
.navbar-nav .nav-link {
font-weight: 500;
font-size: 1rem;
padding: 0.5rem 1rem;
transition: color 0.3s ease;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
color: #fff !important;
}
/* Dropdown Menus */
.dropdown-menu-lg {
width: 100vw;
padding: 1rem;
left: 0 !important;
position: fixed !important;
padding-top: 10px !important;
margin-top: 0px !important;
}
.dropdown-menu {
border: none;
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
border-radius: 0.375rem;
}
.nav-item.dropdown:hover .dropdown-menu {
display: block;
}
.dropdown-header {
font-weight: 600;
font-size: 1.1rem;
color: #000000;
padding: 0.5rem 0;
border-bottom: 1px solid #e9ecef;
margin-bottom: 0.5rem;
}
.dropdown-item {
padding: 0.5rem 0;
color: #000;
font-weight: 400;
font-size: 0.9rem;
}
.dropdown-item:hover {
background: unset !important;
color: #ff8a00;
}
/* Button Styles */
.btn-primary {
background-color: #ff8a00;
border-color: #ff8a00;
font-weight: 500;
padding: 0.5rem 1rem;
}
.btn-primary:hover {
background-color: #e67e00;
border-color: #e67e00;
}
/* Main Content */
main {
min-height: 70vh;
padding: 2rem 0;
}
/* Footer */
footer {
margin-top: auto;
background: linear-gradient(360deg, #ffffff, #f0fcff) !important;
position: relative;
overflow: hidden;
}
footer a {
text-decoration: none;
transition: all 0.3s ease;
font-size: 1rem;
position: relative;
display: inline-block;
color: #333 !important;
}
footer a::after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: -2px;
left: 0;
background: linear-gradient(90deg, #007bff, #0056b3);
transition: width 0.3s ease;
}
footer a:hover {
color: #007bff !important;
transform: translateX(5px);
}
footer a:hover::after {
width: 100%;
}
footer h5 {
font-size: 1.1rem;
font-weight: 700;
color: #000;
margin-bottom: 1.5rem;
position: relative;
padding-bottom: 0.5rem;
}
footer h5::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 30px;
height: 3px;
background: linear-gradient(90deg, #ff8a00, #ff8a00);
border-radius: 2px;
}
footer ul li {
margin-bottom: 0.75rem;
transition: all 0.3s ease;
}
footer ul li:hover {
transform: translateX(3px);
}
footer .contact-info p {
font-size: 1rem;
border-left: 3px solid transparent;
padding-left: 0.75rem;
transition: all 0.3s ease;
color: #333;
}
footer .contact-info p:hover {
border-left-color: #ff8a00;
background: rgba(0, 123, 255, 0.05);
border-radius: 0 4px 4px 0;
}
footer .social-icons {
display: flex;
gap: 1rem;
}
footer .social-icons a {
display: inline-flex ;
align-items: center;
justify-content: center;
width: 45px;
height: 45px;
background: #ff8a00;
border-radius: 50%;
transition: all 0.3s ease;
border: 1px solid #ff8a001c;
}
footer .social-icons a:hover {
transform: translateY(-3px) scale(1.1);
background: linear-gradient(135deg, #007bff, #0056b3);
box-shadow: 0 8px 25px rgba(0, 123, 255, 0.3);
}
footer .social-icons a i {
font-size: 1.2rem;
color: #fff !important;
}
footer hr {
border-color: rgba(0, 0, 0, 0.1);
margin: 2rem 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.2), transparent);
}
footer .bottom-footer {
background: #ff8a001c;
padding: 1.5rem 0;
margin-top: 2rem;
border-radius: 16px;
border: 1px solid rgba(0, 123, 255, 0.1);
}
footer .qr-section img {
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
transition: transform 0.3s ease;
}
footer .qr-section img:hover {
transform: scale(1.05);
}
/* Contact Page Styles */
.contact-card {
background: #fff;
border: 1px solid #e9ecef;
border-radius: 10px;
padding: 2rem;
text-align: center;
transition: transform 0.3s ease;
}
.contact-card:hover {
transform: translateY(-5px);
}
.card-icon {
width: 60px;
height: 60px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1rem;
font-size: 1.5rem;
}
.phone-number {
font-size: 1rem;
font-weight: 700;
color: #333;
margin: 0;
}
.contact-info h5 {
color: #007bff;
margin-bottom: 0.5rem;
font-size: 0.9rem;
}
.contact-info p {
margin-bottom: 0.5rem;
color: #000;
font-size: 0.8rem;
}
.hero-title {
font-size: 1.5rem;
font-weight: 700;
color: #1e3c72;
line-height: 1.2;
}
.hero-subtitle {
font-size: 1.1rem;
color: #000000;
line-height: 1.6;
max-width: 800px;
margin: 0 auto;
}
.about-content {
background: #ffffff;
}
.about-heading {
font-size: 2rem;
font-weight: 700;
color: #1e3c72;
position: relative;
}
.about-heading::after {
content: '';
position: absolute;
bottom: -10px;
left: 0;
width: 60px;
height: 4px;
background: linear-gradient(90deg, #ff8a00, #e67e00);
border-radius: 2px;
}
.about-paragraphs p {
font-size: 1rem;
line-height: 1.8;
color: #495057;
margin-bottom: 1.5rem;
}
/* Visual Elements */
.about-visual {
position: relative;
padding: 2rem;
}
.phone-image-container {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.phone-image {
position: relative;
z-index: 2;
}
.phone-image img {
max-width: 100%;
max-height:400px;
border-radius: 15px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}
/* Floating Icons */
.floating-icons {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 3;
}
.icon-item {
position: absolute;
animation: float 3s ease-in-out infinite;
}
.icon-item:nth-child(1) { top: 10%; left: 10%; animation-delay: 0s; }
.icon-item:nth-child(2) { top: 15%; right: 15%; animation-delay: 0.5s; }
.icon-item:nth-child(3) { top: 50%; right: 10%; animation-delay: 1s; }
.icon-item:nth-child(4) { bottom: 20%; right: 20%; animation-delay: 1.5s; }
.icon-item:nth-child(5) { bottom: 15%; left: 15%; animation-delay: 2s; }
.icon-item:nth-child(6) { bottom: 25%; left: 10%; animation-delay: 2.5s; }
.icon-item:nth-child(7) { top: 30%; left: 5%; animation-delay: 3s; }
.icon-item:nth-child(8) { top: 40%; left: 20%; animation-delay: 3.5s; }
.icon-circle {
width: 50px;
height: 50px;
background: rgba(255, 255, 255, 0.9);
border-radius: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(10px);
border: 2px solid rgba(255, 255, 255, 0.3);
font-size: 0.7rem;
font-weight: 600;
color: #1e3c72;
}
.icon-circle i {
font-size: 1rem;
margin-bottom: 2px;
}
.icon-circle span {
font-size: 0.6rem;
font-weight: 700;
}
/* Connection Lines */
.connection-lines {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.lines-svg {
width: 100%;
height: 100%;
}
/* Navigation Dots */
.nav-dots {
display: flex;
justify-content: center;
gap: 8px;
margin-top: 2rem;
}
.dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: #dee2e6;
cursor: pointer;
transition: all 0.3s ease;
}
.dot.active {
background: #ff8a00;
transform: scale(1.2);
}
.dot:hover {
background: #ff8a00;
transform: scale(1.1);
}
/* Animations */
@keyframes float {
0%, 100% {
transform: translateY(0px);
}
50% {
transform: translateY(-10px);
}
}
/* Responsive */
@media (max-width: 768px) {
.brand-name {
font-size: 1rem;
}
.dropdown-menu-lg {
width: 100%;
}
.utility-bar .list-inline-item {
margin-right: 1rem;
}
.contact-card {
padding: 1.5rem;
}
.phone-number {
font-size: 0.9rem;
}
.hero-title {
font-size: 1.8rem;
}
.hero-subtitle {
font-size: 1rem;
}
.about-heading {
font-size: 1.5rem;
}
.about-visual {
padding: 1rem;
}
.icon-circle {
width: 40px;
height: 40px;
font-size: 0.6rem;
}
.icon-circle i {
font-size: 0.8rem;
}
.icon-circle span {
font-size: 0.5rem;
}
}
/* Blog Page Styles */
.blog-hero {
color: #000;
position: relative;
overflow: hidden;
}
.blog-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
pointer-events: none;
}
.blog-hero-title {
font-size: 3rem;
font-weight: 700;
position: relative;
z-index: 2;
}
.blog-hero-subtitle {
font-size: 1.2rem;
opacity: 0.9;
position: relative;
z-index: 2;
max-width: 600px;
margin: 0 auto;
}
/* Featured Post */
.featured-post-card {
background: white;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
.featured-post-card:hover {
transform: translateY(-5px);
}
.featured-post-image {
position: relative;
height: 300px;
overflow: hidden;
}
.featured-post-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.featured-post-card:hover .featured-post-image img {
transform: scale(1.05);
}
.featured-badge {
position: absolute;
top: 20px;
left: 20px;
background: linear-gradient(135deg, #ff8a00, #e67e00);
color: white;
padding: 8px 16px;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 600;
}
.featured-post-content {
padding: 2rem;
}
.featured-post-title {
font-size: 1.8rem;
font-weight: 700;
color: #1e3c72;
margin-bottom: 1rem;
line-height: 1.3;
}
.featured-post-excerpt {
font-size: 1rem;
color: #6c757d;
line-height: 1.6;
margin-bottom: 1.5rem;
}
/* Blog Post Cards */
.blog-post-card {
background: white;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
height: 100%;
}
.blog-post-card:hover {
transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}
.post-image {
position: relative;
height: 200px;
overflow: hidden;
}
.post-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.post-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.7);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s ease;
}
.blog-post-card:hover .post-overlay {
opacity: 1;
}
.read-more-btn {
color: white;
font-size: 1.5rem;
transition: transform 0.3s ease;
}
.read-more-btn:hover {
transform: scale(1.2);
color: #ff8a00;
}
.post-content {
padding: 1.5rem;
}
.post-meta {
display: flex;
gap: 1rem;
font-size: 0.8rem;
color: #6c757d;
margin-bottom: 1rem;
}
.post-category {
color: #ff8a00;
font-weight: 600;
}
.post-title {
font-size: 1.2rem;
font-weight: 600;
color: #1e3c72;
margin-bottom: 0.75rem;
line-height: 1.4;
}
.post-excerpt {
font-size: 0.9rem;
color: #6c757d;
line-height: 1.5;
margin-bottom: 1rem;
}
.post-footer {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 1rem;
border-top: 1px solid #e9ecef;
}
.author-info {
display: flex;
align-items: center;
gap: 0.5rem;
}
.author-avatar {
width: 30px;
height: 30px;
border-radius: 50%;
object-fit: cover;
}
.author-name {
}
.post-stats {
display: flex;
gap: 1rem;
font-size: 0.8rem;
color: #6c757d;
}
.post-stats span {
display: flex;
align-items: center;
gap: 0.25rem;
}
/* Pagination */
.blog-pagination .page-link {
color: #1e3c72;
border: none;
padding: 0.75rem 1rem;
margin: 0 0.25rem;
border-radius: 8px;
transition: all 0.3s ease;
}
.blog-pagination .page-link:hover {
background: #ff8a00;
color: white;
transform: translateY(-2px);
}
.blog-pagination .page-item.active .page-link {
background: #ff8a00;
border-color: #ff8a00;
}
/* Sidebar */
.blog-sidebar {
position: sticky;
top: 2rem;
}
.sidebar-widget {
background: white;
border-radius: 12px;
padding: 1.5rem;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
margin-bottom: 2rem;
}
.widget-title {
font-size: 1.2rem;
font-weight: 700;
color: #1e3c72;
margin-bottom: 1rem;
position: relative;
}
.widget-title::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 30px;
height: 3px;
background: linear-gradient(90deg, #ff8a00, #e67e00);
border-radius: 2px;
}
/* Search Widget */
.search-form {
position: relative;
}
.search-btn {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
color: #6c757d;
font-size: 1rem;
}
.search-form .form-control {
padding-right: 40px;
border-radius: 25px;
border: 2px solid #e9ecef;
transition: border-color 0.3s ease;
}
.search-form .form-control:focus {
border-color: #ff8a00;
box-shadow: 0 0 0 0.2rem rgba(255, 138, 0, 0.25);
}
/* Category List */
.category-list {
list-style: none;
padding: 0;
margin: 0;
}
.category-list li {
margin-bottom: 0.75rem;
}
.category-list a {
display: flex;
justify-content: space-between;
align-items: center;
color: #6c757d;
text-decoration: none;
padding: 0.5rem 0;
transition: all 0.3s ease;
border-radius: 6px;
padding-left: 0.5rem;
}
.category-list a:hover {
color: #ff8a00;
background: rgba(255, 138, 0, 0.1);
transform: translateX(5px);
}
.category-list span {
background: #e9ecef;
color: #6c757d;
padding: 0.25rem 0.5rem;
border-radius: 12px;
font-size: 0.7rem;
font-weight: 600;
}
/* Popular Posts */
.popular-posts {
display: flex;
flex-direction: column;
gap: 1rem;
}
.popular-post {
display: flex;
gap: 1rem;
padding: 0.75rem 0;
border-bottom: 1px solid #e9ecef;
}
.popular-post:last-child {
border-bottom: none;
}
.post-thumbnail {
width: 60px;
height: 60px;
border-radius: 8px;
overflow: hidden;
flex-shrink: 0;
}
.post-thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
}
.post-info h5 {
font-size: 0.9rem;
font-weight: 600;
margin-bottom: 0.25rem;
line-height: 1.3;
}
.post-info h5 a {
color: #1e3c72;
text-decoration: none;
transition: color 0.3s ease;
}
.post-info h5 a:hover {
color: #ff8a00;
}
.post-info .post-date {
font-size: 0.75rem;
color: #6c757d;
}
/* Tag Cloud */
.tag-cloud {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.tag {
background: #f8f9fa;
color: #6c757d;
padding: 0.5rem 1rem;
border-radius: 20px;
text-decoration: none;
font-size: 0.8rem;
transition: all 0.3s ease;
border: 1px solid #e9ecef;
}
.tag:hover {
background: #ff8a00;
color: white;
transform: translateY(-2px);
text-decoration: none;
}
/* Newsletter Widget */
.newsletter-widget p {
font-size: 0.9rem;
color: #6c757d;
margin-bottom: 1rem;
}
.newsletter-form .form-control {
border-radius: 8px;
border: 2px solid #e9ecef;
transition: border-color 0.3s ease;
}
.newsletter-form .form-control:focus {
border-color: #ff8a00;
box-shadow: 0 0 0 0.2rem rgba(255, 138, 0, 0.25);
}
/* Responsive Blog */
@media (max-width: 768px) {
.blog-hero-title {
font-size: 2rem;
}
.blog-hero-subtitle {
font-size: 1rem;
}
.featured-post-title {
font-size: 1.4rem;
}
.post-title {
font-size: 1.1rem;
}
.sidebar-widget {
padding: 1rem;
}
.blog-sidebar {
margin-top: 2rem;
}
}
/* Contact Page Styles */
.contact-title {
font-size: 2.5rem;
font-weight: 700;
color: #1e3c72;
margin-bottom: 2rem;
}
.info-points {
background: #f8f9fa;
border-radius: 12px;
padding: 2rem;
margin-bottom: 2rem;
}
.info-point {
display: flex;
align-items: flex-start;
gap: 1rem;
margin-bottom: 1.5rem;
}
.info-point:last-child {
margin-bottom: 0;
}
.info-icon {
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 1.2rem;
}
.info-point:nth-child(1) .info-icon {
background: linear-gradient(135deg, #ff8a00, #ff8a00);
color: #333;
}
.info-point:nth-child(2) .info-icon {
background: linear-gradient(135deg, #ff8a00, #ffa726);
color: white;
}
.info-point:nth-child(3) .info-icon {
background: linear-gradient(135deg, #9c27b0, #ba68c8);
color: white;
}
.info-text p {
margin: 0;
font-size: 0.95rem;
line-height: 1.6;
color: #495057;
}
/* Contact Form */
.contact-form {
background: white;
border-radius: 12px;
padding: 2rem;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}
.form-label {
font-weight: 600;
color: #1e3c72;
margin-bottom: 0.5rem;
}
.form-control, .form-select {
border: 2px solid #e9ecef;
border-radius: 8px;
padding: 0.75rem 1rem;
transition: all 0.3s ease;
}
.form-control:focus, .form-select:focus {
border-color: #ff8a00;
box-shadow: 0 0 0 0.2rem rgba(255, 138, 0, 0.25);
}
.form-note {
font-size: 0.8rem;
color: #6c757d;
font-style: italic;
}
/* Contact Info Section */
.contact-info-section {
background: white;
border-radius: 12px;
padding: 2rem;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
height: fit-content;
}
.contact-info-title {
font-size: 1.5rem;
font-weight: 700;
color: #1e3c72;
position: relative;
}
.contact-info-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 0;
width: 40px;
height: 3px;
background: linear-gradient(90deg, #ff8a00, #e67e00);
border-radius: 2px;
}
.contact-info-item {
display: flex;
align-items: flex-start;
gap: 1rem;
margin-bottom: 2rem;
padding: 1rem;
border-radius: 8px;
transition: all 0.3s ease;
}
.contact-info-item:hover {
background: rgba(255, 138, 0, 0.05);
transform: translateX(5px);
}
.contact-info-item:last-child {
margin-bottom: 0;
}
.contact-icon {
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 1.3rem;
color: white;
}
.contact-info-item .contact-icon {
background: linear-gradient(135deg, #ff8a00, #e67e00);
}
.contact-info-item:nth-child(2) .contact-icon {
background: linear-gradient(135deg, #007bff, #0056b3);
}
.contact-info-item:nth-child(3) .contact-icon {
background: linear-gradient(135deg, #28a745, #20c997);
}
.contact-details h5 {
font-size: 1rem;
font-weight: 600;
color: #1e3c72;
margin-bottom: 0.5rem;
}
.contact-details p {
margin: 0;
font-size: 0.9rem;
color: #6c757d;
line-height: 1.5;
}
/* Responsive Contact */
@media (max-width: 768px) {
.contact-title {
font-size: 2rem;
}
.info-points {
padding: 1.5rem;
}
.contact-form {
padding: 1.5rem;
}
.contact-info-section {
margin-top: 2rem;
padding: 1.5rem;
}
.info-point {
flex-direction: column;
text-align: center;
}
.contact-info-item {
flex-direction: column;
text-align: center;
}
}
/* Neden İKPort Page Styles */
.hero-section {
position: relative;
overflow: hidden;
}
.hero-content h6 {
font-size: 1rem;
font-weight: 600;
}
.hero-title {
font-size: 3rem;
font-weight: 700;
color: #1e3c72;
line-height: 1.2;
}
.hero-text p {
font-size: 1.1rem;
line-height: 1.7;
color: #495057;
}
/* Hero Visual */
.hero-visual {
position: relative;
height: 400px;
display: flex;
align-items: center;
justify-content: center;
}
.image-frames {
position: relative;
display: flex;
gap: 20px;
z-index: 2;
}
.frame-left, .frame-right {
width: 200px;
height: 250px;
border-radius: 15px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
position: relative;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.frame-content {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
position: relative;
overflow: hidden;
border-radius: 15px;
}
.frame-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 15px;
transition: transform 0.3s ease;
z-index: 1;
}
.frame-content:hover .frame-image {
transform: scale(1.05);
}
.overlay-icon {
font-size: 3rem;
color: white;
opacity: 0.8;
z-index: 2;
position: relative;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.geometric-shapes {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.shape {
position: absolute;
border-radius: 50%;
opacity: 0.3;
}
.shape-1 {
width: 60px;
height: 60px;
background: linear-gradient(135deg, #ff8a00, #e67e00);
top: 20%;
right: 10%;
animation: float 3s ease-in-out infinite;
}
.shape-2 {
width: 40px;
height: 40px;
background: linear-gradient(135deg, #007bff, #0056b3);
bottom: 30%;
left: 15%;
animation: float 3s ease-in-out infinite 1s;
}
.shape-3 {
width: 50px;
height: 50px;
background: linear-gradient(135deg, #28a745, #20c997);
top: 60%;
right: 20%;
animation: float 3s ease-in-out infinite 2s;
}
.dot-line {
position: absolute;
left: 20px;
top: 0;
bottom: 0;
display: flex;
flex-direction: column;
justify-content: space-around;
z-index: 3;
}
.dot {
width: 8px;
height: 8px;
background: #007bff;
border-radius: 50%;
animation: pulse 2s ease-in-out infinite;
}
.dot:nth-child(2) { animation-delay: 0.4s; }
.dot:nth-child(3) { animation-delay: 0.8s; }
.dot:nth-child(4) { animation-delay: 1.2s; }
.dot:nth-child(5) { animation-delay: 1.6s; }
/* Statistics Section */
.stat-card {
background: white;
border-radius: 15px;
padding: 2rem;
text-align: center;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
transition: transform 0.3s ease;
height: 100%;
}
.stat-card:hover {
transform: translateY(-5px);
}
.stat-number {
font-size: 2.5rem;
font-weight: 700;
color: #1e3c72;
margin-bottom: 0.5rem;
}
.stat-label {
font-size: 1.1rem;
font-weight: 600;
color: #495057;
margin-bottom: 1rem;
}
.stat-icons {
display: flex;
justify-content: center;
gap: 0.5rem;
}
.stat-icons i {
font-size: 1.2rem;
}
/* Features Section */
.features-section {
background: white;
}
.feature-card {
background: white;
border-radius: 15px;
padding: 2rem;
text-align: center;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
height: 100%;
border: 1px solid #e9ecef;
}
.feature-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}
.feature-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, #007bff, #0056b3);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
font-size: 2rem;
color: white;
}
.feature-title {
font-size: 1.3rem;
font-weight: 700;
color: #1e3c72;
margin-bottom: 1rem;
}
.feature-description {
font-size: 0.95rem;
line-height: 1.6;
color: #6c757d;
}
/* Animations */
@keyframes pulse {
0%, 100% {
transform: scale(1);
opacity: 0.7;
}
50% {
transform: scale(1.2);
opacity: 1;
}
}
/* Responsive Neden İKPort */
@media (max-width: 768px) {
.hero-title {
font-size: 2rem;
}
.hero-text p {
font-size: 1rem;
}
.hero-visual {
height: 300px;
margin-top: 2rem;
}
.frame-left, .frame-right {
width: 150px;
height: 200px;
}
.overlay-icon {
font-size: 2rem;
}
.stat-number {
font-size: 2rem;
}
.stat-label {
font-size: 1rem;
}
.feature-card {
padding: 1.5rem;
}
.feature-icon {
width: 60px;
height: 60px;
font-size: 1.5rem;
}
.feature-title {
font-size: 1.1rem;
}
}
/* Additional Content Styles */
.additional-content {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}
.content-card {
background: white;
border-radius: 15px;
padding: 2rem;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
height: 100%;
transition: transform 0.3s ease;
}
.content-card:hover {
transform: translateY(-5px);
}
.content-title {
color: #1e3c72;
font-weight: 600;
margin-bottom: 1rem;
font-size: 1.5rem;
}
.content-text {
color: #495057;
line-height: 1.7;
margin-bottom: 1.5rem;
}
.content-list {
list-style: none;
padding: 0;
margin: 0;
}
.content-list li {
padding: 0.5rem 0;
color: #495057;
position: relative;
padding-left: 1.5rem;
}
.content-list li::before {
content: '✓';
position: absolute;
left: 0;
color: #ff8a00;
font-weight: bold;
}
.satisfaction-stats {
display: flex;
gap: 2rem;
margin-top: 1.5rem;
}
.stat-item {
text-align: center;
flex: 1;
}
.stat-item .stat-number {
font-size: 2rem;
font-weight: 700;
color: #ff8a00;
display: block;
}
.stat-item .stat-label {
font-size: 0.9rem;
color: #6c757d;
margin-top: 0.5rem;
}
/* CTA Section Styles */
.cta-section {
background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
color: white;
position: relative;
overflow: hidden;
}
.cta-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
pointer-events: none;
}
.cta-title {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 1rem;
position: relative;
z-index: 2;
}
.cta-text {
font-size: 1.1rem;
line-height: 1.7;
margin-bottom: 2rem;
position: relative;
z-index: 2;
}
.cta-buttons {
position: relative;
z-index: 2;
}
.cta-buttons .btn {
padding: 0.75rem 2rem;
font-weight: 600;
border-radius: 50px;
transition: all 0.3s ease;
}
.cta-buttons .btn-outline-primary {
border-color: white;
color: white;
}
.cta-buttons .btn-outline-primary:hover {
background-color: white;
color: #1e3c72;
}
/* Responsive adjustments for additional content */
@media (max-width: 768px) {
.satisfaction-stats {
flex-direction: column;
gap: 1rem;
}
.cta-title {
font-size: 2rem;
}
.cta-buttons .btn {
display: block;
width: 100%;
margin-bottom: 1rem;
}
.cta-buttons .btn:last-child {
margin-bottom: 0;
}
.content-card {
padding: 1.5rem;
}
.content-title {
font-size: 1.3rem;
}
}
/* Features Showcase Section */
.features-showcase {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
position: relative;
overflow: hidden;
}
.features-showcase::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
pointer-events: none;
}
.features-content {
position: relative;
z-index: 2;
}
.features-title {
font-size: 2.5rem;
font-weight: 700;
color: #1e3c72;
margin-bottom: 1.5rem;
}
.features-description {
font-size: 1.1rem;
color: #6c757d;
line-height: 1.6;
}
.features-list {
margin-top: 2rem;
}
.banner-features .feature-item {
display: flex;
align-items: flex-start;
margin-bottom: 1.5rem;
padding: 0.8rem;
background: white;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
}
.banner-features .feature-item:hover {
transform: translateY(-5px);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}
.banner-features .feature-icon {
width: 40px;
height: 40px;
background: linear-gradient(135deg, #ff8a00 0%, #e67e00 100%);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin-right:0.5rem;
flex-shrink: 0;
}
.banner-features .feature-icon i {
color: white;
font-size: 1.2rem;
}
.banner-features .feature-text h6 {
font-size: 0.875rem;
font-weight: 600;
color: #1e3c72;
margin-bottom: 0.5rem;
text-align: left;
}
.banner-features .feature-text p {
font-size: 0.8rem;
color: #6c757d;
margin: 0;
text-align: left;
}
.features-visual {
position: relative;
z-index: 2;
}
.visual-container {
position: relative;
padding: 2rem;
}
.main-visual {
position: relative;
z-index: 2;
}
.main-visual img {
border-radius: 20px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
transition: transform 0.3s ease;
}
.main-visual:hover img {
transform: scale(1.02);
}
.floating-elements {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
}
.floating-card {
position: absolute;
background: white;
padding: 0.75rem 1rem;
border-radius: 12px;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.9rem;
font-weight: 500;
color: #1e3c72;
animation: float 3s ease-in-out infinite;
}
.floating-card i {
color: #ff8a00;
font-size: 1rem;
}
.floating-card.card-1 {
top: 10%;
left: -10%;
animation-delay: 0s;
}
.floating-card.card-2 {
top: 50%;
right: -15%;
animation-delay: 1s;
}
.floating-card.card-3 {
bottom: 20%;
left: 5%;
animation-delay: 2s;
}
@keyframes float {
0%, 100% {
transform: translateY(0px);
}
50% {
transform: translateY(-10px);
}
}
/* Responsive */
@media (max-width: 768px) {
.features-title {
font-size: 2rem;
}
.floating-card {
display: none;
}
.visual-container {
padding: 1rem;
}
}
/* Hero Section Styles */
.hero-section {
position: relative;
display: flex;
align-items: center;
overflow: hidden;
}
.hero-background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.hero-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.3);
}
.hero-particles {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
}
.hero-content {
position: relative;
z-index: 3;
color: white;
}
.hero-badge {
display: inline-flex;
align-items: center;
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
border-radius: 25px;
padding: 8px 20px;
margin-bottom: 2rem;
font-size: 0.9rem;
font-weight: 500;
}
.hero-badge i {
color: #ff8a00;
margin-right: 8px;
}
.hero-title {
font-size: 3.5rem;
font-weight: 700;
line-height: 1.2;
margin-bottom: 1.5rem;
color: #000;
}
.hero-title .highlight {
background: linear-gradient(45deg, #ff8a00, #ff6b35);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-description {
font-size: 1.2rem;
line-height: 1.6;
margin-bottom: 2rem;
opacity: 0.9;
}
.hero-stats {
display: flex;
gap: 2rem;
margin-bottom: 2rem;
}
.stat-item {
text-align: center;
}
.stat-number {
font-size: 2rem;
font-weight: 700;
color: #ff8a00;
display: block;
}
.stat-label {
font-size: 0.9rem;
opacity: 0.8;
}
.hero-buttons {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.hero-buttons .btn {
padding: 12px 30px;
border-radius: 50px;
font-weight: 600;
transition: all 0.3s ease;
}
.hero-buttons .btn-primary {
background: #ff8a00;
border-color: #ff8a00;
box-shadow: 0 4px 15px rgba(255, 138, 0, 0.3);
}
.hero-buttons .btn-primary:hover {
background: #e67e00;
border-color: #e67e00;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(255, 138, 0, 0.4);
}
.hero-buttons .btn-outline-light {
border: 2px solid rgba(255, 255, 255, 0.3);
backdrop-filter: blur(10px);
}
.hero-buttons .btn-outline-light:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.5);
transform: translateY(-2px);
}
.hero-visual {
position: relative;
height: 500px;
}
.floating-card {
position: absolute;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 15px;
padding: 15px 20px;
display: flex;
align-items: center;
gap: 10px;
color: white;
font-weight: 500;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
animation: float 6s ease-in-out infinite;
z-index: 2;
}
.floating-card i {
font-size: 1.2rem;
color: #ff8a00;
}
.floating-card.card-1 {
top: 10%;
left: 10%;
animation-delay: 0s;
}
.floating-card.card-2 {
top: 20%;
right: 15%;
animation-delay: 2s;
}
.floating-card.card-3 {
bottom: 30%;
left: 5%;
animation-delay: 4s;
}
.hero-main-image {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
}
.image-container {
position: relative;
overflow: hidden;
}
.image-container img {
width: 100%;
height: auto;
border-radius: 20px;
}
.image-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.4);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s ease;
}
.image-container:hover .image-overlay {
opacity: 1;
}
.overlay-content {
display: flex;
flex-direction: column;
align-items: center;
color: white;
text-align: center;
}
.overlay-content i {
font-size: 3rem;
margin-bottom: 10px;
color: #ff8a00;
}
@keyframes float {
0%, 100% {
transform: translateY(0px);
}
50% {
transform: translateY(-20px);
}
}
/* Responsive Hero */
@media (max-width: 768px) {
.hero-title {
font-size: 2.5rem;
}
.hero-stats {
flex-direction: column;
gap: 1rem;
}
.hero-buttons {
flex-direction: column;
}
.floating-card {
display: none;
}
.hero-visual {
height: 300px;
margin-top: 2rem;
}
}
/* Tabs Section Styles */
.tabs-section {
position: relative;
overflow: hidden;
}
.tabs-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
pointer-events: none;
}
.tabs-container {
position: relative;
z-index: 2;
}
.tabs-nav {
border: none;
background: white;
border-radius: 15px;
padding: 10px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
margin-bottom: 30px;
display: flex;
justify-content: center;
}
.tabs-nav .nav-item {
margin: 0 5px;
}
.tabs-nav .nav-link {
border: none;
background: transparent;
color: #6c757d;
font-weight: 600;
padding: 15px 25px;
border-radius: 12px;
transition: all 0.3s ease;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
min-width: 140px;
}
.tabs-nav .nav-link i {
font-size: 1.5rem;
color: #ff8a00;
transition: all 0.3s ease;
margin-right: 0px !important;
}
.tabs-nav .nav-link span {
font-size: 0.9rem;
font-weight: 600;
}
.tabs-nav .nav-link:hover {
background: rgba(255, 138, 0, 0.1);
color: #ff8a00;
transform: translateY(-2px);
}
.tabs-nav .nav-link.active {
background: linear-gradient(135deg, #ff8a00 0%, #e67e00 100%);
color: white;
box-shadow: 0 5px 15px rgba(255, 138, 0, 0.3);
}
.tabs-nav .nav-link.active i {
color: white;
}
.tab-content-wrapper {
background: white;
border-radius: 20px;
padding: 40px;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
position: relative;
overflow: hidden;
}
.tab-content-wrapper::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #ff8a00 0%, #e67e00 100%);
}
.tab-content-text h3 {
font-size: 2rem;
font-weight: 700;
color: #1e3c72;
margin-bottom: 1rem;
}
.tab-content-text p {
font-size: 1.1rem;
color: #6c757d;
line-height: 1.6;
margin-bottom: 1.5rem;
}
.feature-list {
list-style: none;
padding: 0;
margin: 0;
}
.feature-list li {
display: flex;
align-items: center;
margin-bottom: 12px;
font-size: 1rem;
color: #495057;
}
.feature-list li i {
color: #ff8a00;
margin-right: 12px;
font-size: 1.1rem;
width: 20px;
text-align: center;
}
.tab-content-image {
position: relative;
border-radius: 15px;
overflow: hidden;
}
.tab-content-image img {
transition: transform 0.3s ease;
}
.tab-content-image:hover img {
transform: scale(1.05);
}
/* Responsive adjustments for tabs */
@media (max-width: 768px) {
.tabs-nav {
flex-direction: column;
gap: 10px;
}
.tabs-nav .nav-link {
min-width: auto;
flex-direction: row;
justify-content: center;
}
.tab-content-wrapper {
padding: 25px;
}
.tab-content-text h3 {
font-size: 1.5rem;
}
}
/* FAQ Section Styles */
.faq-section {
position: relative;
overflow: hidden;
}
.faq-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
pointer-events: none;
}
.faq-title {
font-size: 2.5rem;
font-weight: 700;
color: #1e3c72;
margin-bottom: 1rem;
position: relative;
}
.faq-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: linear-gradient(90deg, #ff8a00, #ff6b35);
border-radius: 2px;
}
.faq-subtitle {
font-size: 1.1rem;
color: #6c757d;
margin-bottom: 3rem;
}
.faq-section .accordion {
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
border-radius: 20px;
overflow: hidden;
background: white;
}
.faq-section .accordion-item {
border: none;
border-bottom: 1px solid #f1f3f4;
transition: all 0.3s ease;
}
.faq-section .accordion-item:last-child {
border-bottom: none;
}
.faq-section .accordion-item:hover {
background: linear-gradient(135deg, #f8f9ff 0%, #f0f4ff 100%);
transform: translateX(5px);
}
.faq-section .accordion-button {
background: white;
border: none;
padding: 1.5rem 2rem;
font-size: 1.1rem;
font-weight: 600;
color: #1e3c72;
position: relative;
transition: all 0.3s ease;
}
.faq-section .accordion-button:not(.collapsed) {
background: linear-gradient(135deg, #ff8a00 0%, #ff6b35 100%);
color: white;
box-shadow: 0 5px 15px rgba(255, 138, 0, 0.3);
}
.faq-section .accordion-button:focus {
box-shadow: 0 0 0 0.25rem rgba(255, 138, 0, 0.25);
border: none;
}
.faq-section .accordion-button::after {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ff8a00'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
transition: all 0.3s ease;
}
.faq-section .accordion-button:not(.collapsed)::after {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
transform: rotate(180deg);
}
.faq-section .accordion-body {
padding: 2rem;
font-size: 1rem;
line-height: 1.7;
color: #495057;
background: white;
border-top: 1px solid #f1f3f4;
}
.faq-section .accordion-body::before {
content: '💡';
display: inline-block;
margin-right: 10px;
font-size: 1.2rem;
}
/* FAQ Responsive */
@media (max-width: 768px) {
.faq-title {
font-size: 2rem;
}
.faq-subtitle {
font-size: 1rem;
}
.faq-section .accordion-button {
padding: 1.2rem 1.5rem;
font-size: 1rem;
}
.faq-section .accordion-body {
padding: 1.5rem;
font-size: 0.95rem;
}
}
/* Services Section Styles */
.services-section {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
position: relative;
}
.services-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
pointer-events: none;
}
.service-card {
background: #ffffff;
border-radius: 16px;
padding: 2rem;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
height: 100%;
position: relative;
overflow: hidden;
}
.service-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #ff8a00, #ff6b35);
border-radius: 16px 16px 0 0;
}
.service-card:hover {
transform: translateY(-8px);
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
}
.service-icon {
width: 50px;
height: 50px;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
font-size: 2rem;
color: #ffffff;
position: relative;
overflow: hidden;
}
.service-icon::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%);
border-radius: 20px;
}
.phone-icon {
background: linear-gradient(135deg, #20c997 0%, #17a2b8 100%);
}
.sms-icon {
background: linear-gradient(135deg, #ffc107 0%, #fd7e14 100%);
}
.communication-icon {
background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
}
.integration-icon {
background: linear-gradient(135deg, #e83e8c 0%, #fd7e14 100%);
}
.service-title {
font-weight: 600;
font-size: 1.25rem;
color: #2c3e50;
text-align: center;
margin-bottom: 2rem;
}
.service-subtitle {
font-size: 0.875rem;
color: #6c757d;
text-align: center;
margin-bottom: 1.5rem;
line-height: 1.4;
}
.service-options {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.service-option {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.75rem 1rem;
border-radius: 8px;
text-decoration: none;
border-color: #ff8a00;
border: 1px solid #ff8a00;
font-weight: 500;
font-size: 0.875rem;
transition: all 0.3s ease;
color: #333333;
}
.service-option:hover {
background: #ff8a00;
color: #fff;
border-color: #ff8a00;
transform: translateX(4px);
}
.service-option span {
flex: 1;
}
.service-option i {
font-size: 0.75rem;
transition: transform 0.3s ease;
}
.service-option:hover i {
transform: translateX(4px);
}
/* Responsive Design for Services Section */
@media (max-width: 768px) {
.service-card {
padding: 1.5rem;
}
.service-icon {
width: 60px;
height: 60px;
font-size: 1.5rem;
margin-bottom: 1rem;
}
.service-title {
font-size: 1.125rem;
}
.service-subtitle {
font-size: 0.8rem;
}
.service-option {
padding: 0.625rem 0.875rem;
font-size: 0.8rem;
}
}
@media (max-width: 576px) {
.services-section {
padding: 2rem 0;
}
.service-card {
padding: 1.25rem;
}
.service-options {
gap: 0.5rem;
}
}
/* Top Banner Section Styles */
.top-banner-section {
position: relative;
overflow: hidden;
}
.top-banner-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
}
.banner-content {
color: #000000;
position: relative;
z-index: 2;
}
.banner-badge {
display: inline-flex;
align-items: center;
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
border-radius: 50px;
margin-bottom: 1.5rem;
font-size: 1rem;
font-weight: 500;
}
.banner-badge i {
color: #ffd700;
margin-right: 0.5rem;
font-size: 0.75rem;
}
.banner-title {
font-size: 3rem;
font-weight: 700;
line-height: 1.2;
margin-bottom: 1.5rem;
color: #000000;
}
.banner-title .highlight {
background: #000000;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
position: relative;
}
.banner-title .highlight::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(45deg, #ff8a00, #ff8a00);
border-radius: 2px;
}
.banner-description {
font-size: 1.125rem;
line-height: 1.6;
margin-bottom: 2rem;
color: #000000;
}
.banner-features {
margin-bottom: 2rem;
}
.banner-features .row {
margin: 0 -0.5rem;
}
.banner-features .col-md-4 {
padding: 0 0.5rem;
}
.banner-buttons {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.banner-buttons .btn {
padding: 0.875rem 2rem;
font-weight: 600;
border-radius: 50px;
transition: all 0.3s ease;
}
.banner-buttons .btn-primary {
background: linear-gradient(45deg, #ff8a00, #ff8a00);
border: none;
color: #333;
box-shadow: 0 4px 15px rgba(255, 138, 0, 0.3);
}
.banner-buttons .btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(255, 138, 0, 0.4);
}
.banner-buttons .btn-outline-primary {
border: 2px solid rgba(255, 255, 255, 0.3);
color: #ffffff;
background: transparent;
backdrop-filter: blur(10px);
}
.banner-buttons .btn-outline-primary:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.5);
transform: translateY(-2px);
}
.banner-visual {
position: relative;
z-index: 2;
}
.banner-visual .image-container {
position: relative;
border-radius: 20px;
overflow: hidden;
}
.banner-visual .image-container img {
width: 100%;
height: auto;
transition: transform 0.3s ease;
}
.banner-visual .image-container:hover img {
transform: scale(1.05);
}
.banner-visual .image-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, rgba(102, 126, 234, 0.8), rgba(118, 75, 162, 0.8));
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s ease;
}
.banner-visual .image-container:hover .image-overlay {
opacity: 1;
}
.banner-visual .overlay-content {
text-align: center;
color: #ffffff;
}
.banner-visual .overlay-content i {
font-size: 3rem;
margin-bottom: 0.5rem;
display: block;
}
.banner-visual .overlay-content span {
font-weight: 600;
font-size: 1.125rem;
}
/* Responsive Design for Top Banner */
@media (max-width: 768px) {
.banner-title {
font-size: 2rem;
}
.banner-description {
font-size: 1rem;
}
.banner-buttons {
flex-direction: column;
}
.banner-buttons .btn {
width: 100%;
text-align: center;
}
.feature-item {
padding: 0.5rem;
}
.feature-icon {
width: 35px;
height: 35px;
}
.feature-icon i {
font-size: 0.875rem;
}
}
@media (max-width: 576px) {
.top-banner-section {
padding: 3rem 0;
}
.banner-title {
font-size: 1.75rem;
}
.banner-badge {
font-size: 0.75rem;
padding: 0.375rem 0.75rem;
}
.feature-item {
margin-bottom: 0.75rem;
}
}
/* Bootstrap Background Utilities */
.bg-light {
--bs-bg-opacity: 1;
background-color: #f9fcff !important;
}
/* Blog Detail Page Styles */
.blog-detail-hero {
background: #ffffff;
color: #ffffff;
position: relative;
}
.blog-detail-hero .container {
position: relative;
z-index: 2;
}
/* Breadcrumb Styles */
.breadcrumb {
background: transparent;
padding: 0;
margin: 0;
}
.breadcrumb-item a {
color: rgba(0, 0, 0, 0.8);
text-decoration: none;
transition: color 0.3s ease;
}
.breadcrumb-item a:hover {
color: #000000;
}
.breadcrumb-item.active {
color: #050505;
}
/* Article Header */
.article-header {
text-align: center;
}
.article-meta {
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
}
.article-category {
background: rgba(255, 255, 255, 0.2);
padding: 0.25rem 0.75rem;
border-radius: 20px;
font-size: 0.875rem;
font-weight: 500;
color: #000;
}
.article-date, .article-read-time {
font-size: 0.875rem;
opacity: 0.9;
color: #000;
}
.article-title {
font-size: 2.5rem;
font-weight: 700;
line-height: 1.2;
margin: 1.5rem 0;
color: #000000;
}
.article-author-info {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
margin-top: 2rem;
}
.author-avatar {
width: 50px;
height: 50px;
border-radius: 50%;
border: 3px solid rgba(255, 255, 255, 0.3);
}
.author-details {
text-align: left;
}
.author-name {
display: block;
font-weight: 600;
font-size: 1.125rem;
color: #000000;
}
.author-title {
display: block;
font-size: 0.875rem;
opacity: 0.8;
color: #000000;
}
/* Article Content */
.blog-detail-article {
background: #ffffff;
border-radius: 15px;
padding: 3rem;
margin-top: -2rem;
position: relative;
z-index: 3;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.article-featured-image {
border-radius: 10px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.article-content {
font-size: 1.125rem;
line-height: 1.8;
color: #333333;
}
.article-content h2 {
font-size: 1.75rem;
font-weight: 600;
color: #2c3e50;
margin: 2rem 0 1rem 0;
padding-bottom: 0.5rem;
border-bottom: 2px solid #ff8a00;
}
.article-content h2:first-of-type {
margin-top: 0;
}
.article-content p {
margin-bottom: 1.5rem;
}
.article-content .lead {
font-size: 1.25rem;
font-weight: 500;
color: #555555;
border-left: 4px solid #ff8a00;
padding-left: 1rem;
margin: 2rem 0;
}
.article-content ul, .article-content ol {
margin: 1.5rem 0;
padding-left: 2rem;
}
.article-content li {
margin-bottom: 0.5rem;
}
/* Article Quote */
.article-quote {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
border-left: 5px solid #ff8a00;
padding: 2rem;
margin: 2rem 0;
border-radius: 10px;
position: relative;
}
.article-quote::before {
content: '"';
font-size: 4rem;
color: #ff8a00;
position: absolute;
top: -1rem;
left: 1rem;
font-family: serif;
}
.article-quote p {
font-size: 1.25rem;
font-style: italic;
margin: 0 0 1rem 0;
color: #2c3e50;
}
.article-quote cite {
font-weight: 600;
color: #ff8a00;
font-style: normal;
}
/* Article Tags */
.article-tags h5 {
font-size: 1.125rem;
font-weight: 600;
color: #2c3e50;
margin-bottom: 1rem;
}
.tags {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.tag {
background: #f8f9fa;
color: #666666;
padding: 0.5rem 1rem;
border-radius: 25px;
font-size: 0.875rem;
font-weight: 500;
transition: all 0.3s ease;
border: 1px solid #e9ecef;
}
.tag:hover {
background: #ff8a00;
color: #ffffff;
border-color: #ff8a00;
}
/* Social Share */
.social-share h5 {
font-size: 1.125rem;
font-weight: 600;
color: #2c3e50;
margin-bottom: 1rem;
}
.share-buttons {
display: flex;
gap: 0.75rem;
}
.share-btn {
width: 45px;
height: 45px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
text-decoration: none;
transition: all 0.3s ease;
font-size: 1.125rem;
}
.share-btn.facebook {
background: #1877f2;
}
.share-btn.twitter {
background: #1da1f2;
}
.share-btn.linkedin {
background: #0077b5;
}
.share-btn.whatsapp {
background: #25d366;
}
.share-btn:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
/* Related Articles */
.related-articles {
background: #f8f9fa;
}
.section-title {
font-size: 2rem;
font-weight: 700;
color: #2c3e50;
text-align: center;
margin-bottom: 2rem;
}
.related-article-card {
background: #ffffff;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
height: 100%;
}
.related-article-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}
.related-article-card .article-image {
height: 200px;
overflow: hidden;
}
.related-article-card .article-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.related-article-card:hover .article-image img {
transform: scale(1.05);
}
.related-article-card .article-content {
padding: 1.5rem;
}
.related-article-card h4 {
font-size: 1.25rem;
font-weight: 600;
color: #2c3e50;
margin-bottom: 1rem;
line-height: 1.4;
}
.related-article-card p {
color: #666666;
margin-bottom: 1rem;
line-height: 1.6;
}
.read-more {
color: #ff8a00;
text-decoration: none;
font-weight: 600;
font-size: 0.875rem;
transition: color 0.3s ease;
}
.read-more:hover {
color: #e67300;
}
.read-more i {
margin-left: 0.5rem;
transition: transform 0.3s ease;
}
.read-more:hover i {
transform: translateX(3px);
}
/* Comments Section */
.comments-section {
background: #ffffff;
}
.comment-form {
background: #f8f9fa;
padding: 2rem;
border-radius: 10px;
margin-bottom: 2rem;
}
.comment-form h5 {
font-size: 1.25rem;
font-weight: 600;
color: #2c3e50;
margin-bottom: 1.5rem;
}
.comment-form .form-control {
border: 1px solid #e9ecef;
border-radius: 8px;
padding: 0.75rem 1rem;
transition: border-color 0.3s ease;
}
.comment-form .form-control:focus {
border-color: #ff8a00;
box-shadow: 0 0 0 0.2rem rgba(255, 138, 0, 0.25);
}
.comment-form .btn-primary {
background: #ff8a00;
border-color: #ff8a00;
padding: 0.75rem 2rem;
font-weight: 600;
border-radius: 8px;
transition: all 0.3s ease;
}
.comment-form .btn-primary:hover {
background: #e67300;
border-color: #e67300;
transform: translateY(-2px);
}
/* Comments List */
.comment-item {
display: flex;
gap: 1rem;
padding: 1.5rem 0;
border-bottom: 1px solid #e9ecef;
}
.comment-item:last-child {
border-bottom: none;
}
.comment-avatar {
flex-shrink: 0;
}
.comment-avatar img {
width: 50px;
height: 50px;
border-radius: 50%;
border: 2px solid #e9ecef;
}
.comment-content {
flex: 1;
}
.comment-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.5rem;
}
.comment-author {
font-weight: 600;
color: #2c3e50;
margin: 0;
}
.comment-date {
font-size: 0.875rem;
color: #666666;
}
.comment-text {
color: #555555;
line-height: 1.6;
margin-bottom: 1rem;
}
.comment-actions {
display: flex;
gap: 1rem;
}
.reply-btn, .like-btn {
color: #ff8a00;
text-decoration: none;
font-size: 0.875rem;
font-weight: 500;
transition: color 0.3s ease;
}
.reply-btn:hover, .like-btn:hover {
color: #e67300;
}
.like-btn i {
margin-right: 0.25rem;
}
/* Responsive Design */
@media (max-width: 768px) {
.blog-detail-hero {
padding: 3rem 0;
}
.article-title {
font-size: 2rem;
}
.blog-detail-article {
padding: 2rem;
margin-top: -1rem;
}
.article-content {
font-size: 1rem;
}
.article-content h2 {
font-size: 1.5rem;
}
.article-content .lead {
font-size: 1.125rem;
}
.article-quote {
padding: 1.5rem;
}
.article-quote p {
font-size: 1.125rem;
}
.share-buttons {
justify-content: center;
}
.comment-item {
flex-direction: column;
gap: 0.75rem;
}
.comment-header {
flex-direction: column;
align-items: flex-start;
gap: 0.25rem;
}
.comment-actions {
flex-wrap: wrap;
}
}
@media (max-width: 576px) {
.article-meta {
flex-direction: column;
gap: 0.5rem;
}
.article-author-info {
flex-direction: column;
text-align: center;
}
.blog-detail-article {
padding: 1.5rem;
}
.related-article-card .article-content {
padding: 1rem;
}
.comment-form {
padding: 1.5rem;
}
}
/* Pricing Page Styles */
.pricing-hero {
color: #000;
text-align: center;
padding: 4rem 0;
}
.pricing-title {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 2rem;
color: #000;
}
.pricing-subtitle {
font-size: 1.125rem;
color: #666666;
margin-bottom: 2rem;
line-height: 1.6;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
/* Pricing Toggle */
.pricing-toggle-container {
margin-top: 2rem;
}
.pricing-toggle {
display: inline-flex;
background: rgba(255, 255, 255, 0.2);
border-radius: 50px;
padding: 0.5rem;
position: relative;
}
.toggle-btn {
background: transparent;
border: none;
color: #000;
padding: 0.75rem 2rem;
border-radius: 25px;
font-weight: 600;
font-size: 1rem;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
}
.toggle-btn.active {
background: #ffffff;
color: #333333;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.toggle-btn:hover {
transform: translateY(-2px);
}
.discount-badge {
background: #ffd700;
color: #333333;
font-size: 0.75rem;
font-weight: 700;
padding: 0.25rem 0.5rem;
border-radius: 12px;
position: absolute;
top: -0.5rem;
right: 0.5rem;
}
.toggle-label {
font-size: 1rem;
font-weight: 600;
}
/* Pricing Plans */
.pricing-plans {
background: #f8f9fa;
padding: 4rem 0;
}
.pricing-card {
background: #ffffff;
border-radius: 15px;
padding: 2rem;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
position: relative;
height: 100%;
border: 2px solid transparent;
}
.pricing-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
.pricing-card.featured {
border-color: #ff8a00;
transform: scale(1.05);
}
.pricing-card.featured:hover {
transform: scale(1.05) translateY(-5px);
}
/* Discount Badge */
.discount-badge-card {
position: absolute;
top: -10px;
right: 20px;
background: #ffd700;
color: #333333;
font-size: 0.875rem;
font-weight: 700;
padding: 0.5rem 1rem;
border-radius: 20px;
transform: rotate(15deg);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
/* Preferred Badge */
.preferred-badge {
position: absolute;
top: -15px;
left: 50%;
transform: translateX(-50%);
background: #28a745;
color: #ffffff;
font-size: 0.75rem;
font-weight: 600;
padding: 0.25rem 1rem;
border-radius: 15px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Plan Header */
.plan-header {
text-align: center;
margin-bottom: 2rem;
}
.plan-name {
font-size: 1.5rem;
font-weight: 700;
color: #2c3e50;
margin-bottom: 0.5rem;
}
.plan-employees {
color: #666666;
font-size: 0.875rem;
margin: 0;
}
/* Plan Pricing */
.plan-pricing {
text-align: center;
margin-bottom: 2rem;
}
.original-price {
text-decoration: line-through;
color: #999999;
font-size: 1rem;
margin-bottom: 0.5rem;
}
.current-price {
/* display: flex; */
flex-direction: column;
align-items: center;
gap: 0.25rem;
}
.price-amount {
font-size: 2.5rem;
font-weight: 700;
color: #2c3e50;
}
.price-period {
font-size: 0.875rem;
color: #666666;
}
/* Plan Features */
.plan-features {
margin-bottom: 2rem;
}
.plan-features ul {
list-style: none;
padding: 0;
margin: 0;
}
.plan-features li {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.5rem 0;
color: #555555;
font-size: 0.875rem;
}
.plan-features i {
color: #28a745;
font-size: 1rem;
flex-shrink: 0;
}
/* Plan Action */
.plan-action {
text-align: center;
}
.plan-action .btn {
width: 100%;
padding: 0.875rem 2rem;
font-weight: 600;
border-radius: 8px;
transition: all 0.3s ease;
}
.plan-action .btn:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(255, 138, 0, 0.3);
}
/* Support Section */
.support-section {
background: #ffffff;
text-align: center;
padding: 4rem 0;
}
.support-avatars {
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
margin-bottom: 2rem;
}
.support-avatar {
width: 60px;
height: 60px;
border-radius: 50%;
border: 3px solid #ffffff;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
.support-avatar:hover {
transform: scale(1.1);
}
.support-avatar:nth-child(2) {
transform: translateY(-10px);
}
.support-title {
font-size: 1.75rem;
font-weight: 700;
color: #2c3e50;
margin-bottom: 1rem;
}
.support-description {
color: #666666;
font-size: 1.125rem;
margin-bottom: 2rem;
line-height: 1.6;
}
/* Responsive Design */
@media (max-width: 768px) {
.pricing-title {
font-size: 2rem;
}
.pricing-toggle {
flex-direction: column;
gap: 0.5rem;
}
.toggle-btn {
width: 100%;
justify-content: center;
}
.pricing-card {
margin-bottom: 2rem;
}
.pricing-card.featured {
transform: none;
}
.pricing-card.featured:hover {
transform: translateY(-5px);
}
.price-amount {
font-size: 2rem;
}
.support-avatars {
flex-direction: column;
gap: 0.5rem;
}
.support-avatar:nth-child(2) {
transform: none;
}
}
@media (max-width: 576px) {
.pricing-hero {
padding: 3rem 0;
}
.pricing-title {
font-size: 1.75rem;
}
.pricing-card {
padding: 1.5rem;
}
.plan-name {
font-size: 1.25rem;
}
.price-amount {
font-size: 1.75rem;
}
.support-title {
font-size: 1.5rem;
}
.support-description {
font-size: 1rem;
}
}
/* SSS Page Styles */
.sss-hero {
color: #000;
text-align: center;
padding: 4rem 0;
}
.sss-title {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 1rem;
color: #000;
}
.sss-subtitle {
font-size: 1.125rem;
opacity: 0.9;
margin-bottom: 2rem;
color: #000;
}
/* Search Box */
.search-container {
max-width: 500px;
margin: 0 auto;
}
.search-box {
position: relative;
background: rgba(255, 255, 255, 0.1);
border-radius: 50px;
padding: 0.75rem 1.5rem;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.search-icon {
position: absolute;
left: 1.5rem;
top: 50%;
transform: translateY(-50%);
color: rgba(255, 255, 255, 0.7);
font-size: 1.125rem;
}
.search-input {
background: transparent;
border: none;
color: #ffffff;
font-size: 1rem;
padding-left: 2.5rem;
width: 100%;
outline: none;
}
.search-input::placeholder {
color: rgba(255, 255, 255, 0.7);
}
/* Category Navigation */
.category-nav {
background: #ffffff;
border-radius: 15px;
padding: 2rem;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
position: sticky;
top: 2rem;
}
.category-title {
font-size: 1.25rem;
font-weight: 700;
color: #2c3e50;
margin-bottom: 1.5rem;
padding-bottom: 0.5rem;
border-bottom: 2px solid #ff8a00;
}
.category-list {
list-style: none;
padding: 0;
margin: 0;
}
.category-list li {
margin-bottom: 0.5rem;
}
.category-link {
display: block;
padding: 0.75rem 1rem;
color: #666666;
text-decoration: none;
border-radius: 8px;
transition: all 0.3s ease;
font-weight: 500;
}
.category-link:hover {
background: #f8f9fa;
color: #ff8a00;
text-decoration: none;
}
.category-link.active {
background: #ff8a00;
color: #ffffff;
}
/* FAQ Categories */
.faq-category {
margin-bottom: 3rem;
}
.category-heading {
font-size: 1.25rem;
font-weight: 600;
color: #2c3e50;
margin-bottom: 2rem;
padding-bottom: 0.5rem;
border-bottom: 3px solid #ff8a00;
}
/* Accordion Styles */
.sss-content .accordion-item {
border: 1px solid #e9ecef;
border-radius: 10px;
margin-bottom: 1rem;
overflow: hidden;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
}
.sss-content .accordion-item:hover {
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
transform: translateY(-2px);
}
.sss-content .accordion-button {
background: #ffffff;
border: none;
padding: 1.5rem;
font-weight: 600;
color: #2c3e50;
font-size: 1.125rem;
text-align: left;
transition: all 0.3s ease;
}
.sss-content .accordion-button:not(.collapsed) {
background: #ff8a00;
color: #ffffff;
box-shadow: none;
}
.sss-content .accordion-button:focus {
box-shadow: none;
border: none;
}
.sss-content .accordion-button::after {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%232c3e50'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
transition: all 0.3s ease;
}
.sss-content .accordion-button:not(.collapsed)::after {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.sss-content .accordion-body {
padding: 1.5rem;
background: #f8f9fa;
color: #555555;
line-height: 1.6;
font-size: 1rem;
}
/* Contact Section */
.contact-section {
background: #f8f9fa;
}
.contact-title {
font-size: 1.75rem;
font-weight: 700;
color: #2c3e50;
margin-bottom: 1rem;
}
.contact-description {
color: #666666;
font-size: 1.125rem;
margin-bottom: 2rem;
line-height: 1.6;
}
.contact-buttons {
display: flex;
justify-content: center;
gap: 1rem;
flex-wrap: wrap;
}
.contact-buttons .btn {
padding: 0.875rem 2rem;
font-weight: 600;
border-radius: 8px;
transition: all 0.3s ease;
}
.contact-buttons .btn:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
/* Responsive Design */
@media (max-width: 768px) {
.sss-title {
font-size: 2rem;
}
.sss-subtitle {
font-size: 1rem;
}
.search-box {
padding: 0.5rem 1rem;
}
.search-input {
font-size: 0.875rem;
padding-left: 2rem;
}
.category-nav {
position: static;
margin-bottom: 2rem;
}
.category-heading {
font-size: 1.5rem;
}
.sss-content .accordion-button {
padding: 1rem;
font-size: 1rem;
}
.sss-content .accordion-body {
padding: 1rem;
font-size: 0.875rem;
}
.contact-buttons {
flex-direction: column;
align-items: center;
}
.contact-buttons .btn {
width: 100%;
max-width: 300px;
}
}
@media (max-width: 576px) {
.sss-hero {
padding: 3rem 0;
}
.sss-title {
font-size: 1.75rem;
}
.category-nav {
padding: 1.5rem;
}
.category-title {
font-size: 1.125rem;
}
.category-link {
padding: 0.5rem 0.75rem;
font-size: 0.875rem;
}
.contact-title {
font-size: 1.5rem;
}
.contact-description {
font-size: 1rem;
}
}
/* Personnel Management Dashboard Styles */
.personnel-hero {
color: #000;
text-align: center;
padding: 4rem 0;
}
.personnel-title {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 1.5rem;
color: #000;
line-height: 1.2;
}
.personnel-title .highlight {
color: #4fc3f7;
font-weight: 800;
}
.personnel-subtitle {
font-size: 1.125rem;
opacity: 0.9;
margin-bottom: 2rem;
line-height: 1.6;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
/* Dashboard Section */
.dashboard-section {
background: #f8f9fa;
min-height: 100vh;
}
/* Sidebar Styles */
.dashboard-sidebar {
background: #ffffff;
height: 100vh;
position: fixed;
width: 250px;
box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
z-index: 1000;
}
.sidebar-header {
padding: 2rem 1.5rem;
border-bottom: 1px solid #e9ecef;
}
.app-logo {
text-align: center;
}
.logo-text {
font-size: 1.5rem;
font-weight: 700;
color: #ff8a00;
text-transform: lowercase;
}
.sidebar-nav {
padding: 1rem 0;
}
.nav-list {
list-style: none;
padding: 0;
margin: 0;
}
.nav-item {
margin-bottom: 0.5rem;
}
.nav-link {
display: flex;
align-items: center;
padding: 1rem 1.5rem;
color: #666666;
text-decoration: none;
transition: all 0.3s ease;
/* border-radius: 0 25px 25px 0; */
margin-right: 1rem;
}
.nav-link:hover {
background: #ff8a00;
color: #fff;
text-decoration: none;
}
.nav-link.active {
background: #ff8a00;
color: #ffffff;
}
.nav-link i {
margin-right: 1rem;
font-size: 1.125rem;
width: 20px;
text-align: center;
}
.nav-link span {
font-weight: 500;
}
/* Dashboard Content */
.dashboard-content {
margin-left: 250px;
padding: 2rem;
}
/* Top Bar */
.dashboard-topbar {
background: #ffffff;
padding: 1.5rem 2rem;
border-radius: 15px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
margin-bottom: 2rem;
}
.welcome-text h3 {
font-size: 1.5rem;
font-weight: 700;
color: #2c3e50;
margin: 0;
}
.welcome-text p {
color: #666666;
margin: 0.5rem 0 0 0;
font-size: 0.875rem;
}
/* Dashboard Grid */
.dashboard-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 2rem;
margin-bottom: 2rem;
}
/* Dashboard Cards */
.dashboard-card {
background: #ffffff;
border-radius: 15px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
overflow: hidden;
transition: all 0.3s ease;
}
.dashboard-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}
.card-header {
padding: 1.5rem 2rem;
border-bottom: 1px solid #e9ecef;
}
.card-header h4 {
font-size: 1.25rem;
font-weight: 700;
color: #2c3e50;
margin: 0;
}
.card-body {
padding: 1.5rem 2rem;
}
/* User Profile Card */
.user-info {
display: flex;
justify-content: space-between;
align-items: center;
}
.user-details h4 {
font-size: 1.5rem;
font-weight: 700;
color: #2c3e50;
margin: 0 0 0.5rem 0;
}
.user-title {
color: #ff8a00;
font-weight: 600;
margin: 0 0 0.25rem 0;
}
.user-department {
color: #666666;
font-size: 0.875rem;
margin: 0;
}
.user-avatar img {
width: 60px;
height: 60px;
border-radius: 50%;
border: 3px solid #ff8a00;
}
.user-details-list {
margin: 1rem 0;
}
.detail-item {
display: flex;
justify-content: space-between;
margin-bottom: 0.5rem;
padding: 0.5rem 0;
border-bottom: 1px solid #f8f9fa;
}
.detail-item:last-child {
border-bottom: none;
}
.detail-item .label {
color: #666666;
font-weight: 500;
}
.detail-item .value {
color: #2c3e50;
font-weight: 600;
}
/* Leave Information Card */
.leave-summary {
display: flex;
align-items: center;
gap: 2rem;
margin-bottom: 1.5rem;
}
.leave-days {
text-align: center;
}
.days-number {
font-size: 3rem;
font-weight: 700;
color: #ff8a00;
display: block;
}
.days-text {
color: #666666;
font-size: 0.875rem;
}
.leave-progress {
flex: 1;
}
.progress-bar {
height: 8px;
background: #e9ecef;
border-radius: 4px;
overflow: hidden;
margin-bottom: 0.5rem;
}
.progress-fill {
height: 100%;
background: #ff8a00;
border-radius: 4px;
}
.progress-labels {
display: flex;
justify-content: space-between;
font-size: 0.75rem;
color: #666666;
}
.leave-list {
margin-bottom: 1rem;
}
.leave-item {
display: flex;
justify-content: space-between;
padding: 0.5rem 0;
border-bottom: 1px solid #f8f9fa;
}
.leave-item:last-child {
border-bottom: none;
}
.leave-type {
color: #2c3e50;
font-weight: 500;
}
.leave-date {
color: #666666;
font-size: 0.875rem;
}
/* Employee Distribution Card */
.chart-container {
text-align: center;
margin-bottom: 1rem;
}
.donut-chart {
width: 120px;
height: 120px;
border-radius: 50%;
background: conic-gradient(#ff8a00 0deg 144deg, #e9ecef 144deg 360deg);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
position: relative;
}
.donut-chart::before {
content: '';
width: 80px;
height: 80px;
background: #ffffff;
border-radius: 50%;
position: absolute;
}
.chart-center {
position: relative;
z-index: 1;
text-align: center;
}
.chart-label {
display: block;
font-size: 0.75rem;
color: #666666;
margin-bottom: 0.25rem;
}
.chart-number {
display: block;
font-size: 1.5rem;
font-weight: 700;
color: #2c3e50;
}
.total-employees {
text-align: center;
}
.total-number {
display: block;
font-size: 2rem;
font-weight: 700;
color: #ff8a00;
}
.total-label {
color: #666666;
font-size: 0.875rem;
}
/* Upcoming Leaves Card */
.leaves-list {
margin-bottom: 1rem;
}
.leave-person {
display: flex;
align-items: center;
gap: 1rem;
padding: 0.75rem 0;
border-bottom: 1px solid #f8f9fa;
}
.leave-person:last-child {
border-bottom: none;
}
.person-avatar img {
width: 40px;
height: 40px;
border-radius: 50%;
border: 2px solid #e9ecef;
}
.person-info {
flex: 1;
}
.person-name {
display: block;
font-weight: 600;
color: #2c3e50;
margin-bottom: 0.25rem;
}
.leave-duration {
color: #666666;
font-size: 0.875rem;
}
/* Holidays Card */
.holidays-list {
margin-bottom: 1rem;
}
.holiday-item {
display: flex;
justify-content: space-between;
padding: 0.5rem 0;
border-bottom: 1px solid #f8f9fa;
}
.holiday-item:last-child {
border-bottom: none;
}
.holiday-name {
color: #2c3e50;
font-weight: 500;
}
.holiday-date {
color: #666666;
font-size: 0.875rem;
}
/* Birthdays Card */
.birthdays-list {
margin-bottom: 1rem;
}
.birthday-person {
display: flex;
align-items: center;
gap: 1rem;
padding: 0.75rem 0;
border-bottom: 1px solid #f8f9fa;
}
.birthday-person:last-child {
border-bottom: none;
}
.birthday-date {
color: #ff8a00;
font-weight: 600;
font-size: 0.875rem;
}
/* Activity Calendar Card */
.activities-list {
margin-bottom: 1rem;
}
.activity-item {
display: flex;
justify-content: space-between;
padding: 0.5rem 0;
border-bottom: 1px solid #f8f9fa;
}
.activity-item:last-child {
border-bottom: none;
}
.activity-name {
color: #2c3e50;
font-weight: 500;
}
.activity-date {
color: #666666;
font-size: 0.875rem;
}
/* Card Actions */
.card-action {
text-align: center;
padding-top: 1rem;
border-top: 1px solid #f8f9fa;
}
.action-link {
color: #ff8a00;
text-decoration: none;
font-weight: 600;
font-size: 0.875rem;
transition: color 0.3s ease;
}
.action-link:hover {
color: #e67300;
text-decoration: none;
}
/* Responsive Design */
@media (max-width: 1200px) {
.dashboard-grid {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
}
@media (max-width: 768px) {
.dashboard-sidebar {
position: static;
width: 100%;
height: auto;
margin-bottom: 2rem;
}
.dashboard-content {
margin-left: 0;
padding: 1rem;
}
.dashboard-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
.personnel-title {
font-size: 2rem;
}
.personnel-subtitle {
font-size: 1rem;
}
.nav-link {
padding: 0.75rem 1rem;
}
.card-header, .card-body {
padding: 1rem;
}
}
@media (max-width: 576px) {
.personnel-hero {
padding: 3rem 0;
}
.personnel-title {
font-size: 1.75rem;
}
.dashboard-topbar {
padding: 1rem;
}
.welcome-text h3 {
font-size: 1.25rem;
}
.user-info {
flex-direction: column;
text-align: center;
gap: 1rem;
}
.leave-summary {
flex-direction: column;
text-align: center;
gap: 1rem;
}
}
/* Dashboard Preview Section */
.dashboard-preview {
padding: 4rem 0;
}
.dashboard-image-container {
text-align: center;
background: #ffffff;
border-radius: 20px;
padding: 2rem;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.dashboard-preview-image {
width: 100%;
height: auto;
border-radius: 15px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
transition: transform 0.3s ease;
}
.dashboard-preview-image:hover {
transform: scale(1.02);
}
/* Responsive adjustments for dashboard preview */
@media (max-width: 768px) {
.dashboard-preview {
padding: 2rem 0;
}
.dashboard-image-container {
padding: 1rem;
}
}
/* Personnel Features Section */
.personnel-features {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
position: relative;
}
.personnel-features::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
z-index: 1;
}
.personnel-features .container {
position: relative;
z-index: 2;
}
.features-content {
padding-right: 3rem;
}
.features-title {
font-size: 2.5rem;
font-weight: 700;
color: #2c3e50;
margin-bottom: 1rem;
line-height: 1.2;
}
.features-subtitle {
font-size: 1.1rem;
color: #6c757d;
margin-bottom: 2.5rem;
line-height: 1.6;
}
.features-list {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.feature-content {
flex: 1;
}
.feature-title {
font-size: 1.25rem;
font-weight: 600;
color: #2c3e50;
margin-bottom: 0.5rem;
line-height: 1.3;
}
.feature-description {
font-size: 0.95rem;
color: #6c757d;
line-height: 1.5;
margin: 0;
}
.features-image-container {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
padding: 2rem;
}
.features-image {
max-width: 100%;
height: auto;
border-radius: 15px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
transition: transform 0.3s ease;
}
.features-image:hover {
transform: scale(1.02);
}
@media (max-width: 768px) {
.features-content {
padding-right: 0;
margin-bottom: 2rem;
}
.features-title {
font-size: 2rem;
}
.features-subtitle {
font-size: 1rem;
}
.feature-item {
padding: 1rem;
}
.feature-icon {
font-size: 2rem;
width: 50px;
height: 50px;
}
.feature-title {
font-size: 1.1rem;
}
.feature-description {
font-size: 0.9rem;
}
.features-image-container {
padding: 1rem;
}
}
@media (max-width: 576px) {
.features-title {
font-size: 1.75rem;
}
.feature-item {
flex-direction: column;
text-align: center;
gap: 0.75rem;
}
.feature-icon {
align-self: center;
}
}
/* Bayilik Sayfası Stilleri */
.bg-gradient-primary {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.hero-title {
font-size: 3rem;
font-weight: 700;
margin-bottom: 1rem;
}
.hero-subtitle {
font-size: 1.25rem;
opacity: 0.9;
}
.advantage-card {
background: white;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.advantage-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}
.advantage-icon {
color: #667eea;
}
.advantage-title {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 1rem;
color: #333;
}
.advantage-description {
color: #666;
line-height: 1.6;
}
.model-card {
background: white;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.model-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}
.model-header {
padding: 2rem;
}
.model-title {
font-size: 1.75rem;
font-weight: 700;
margin-bottom: 0.5rem;
}
.model-subtitle {
font-size: 1rem;
opacity: 0.9;
margin-bottom: 0;
}
.model-features {
list-style: none;
padding: 0;
margin: 0;
}
.model-features li {
padding: 0.75rem 0;
border-bottom: 1px solid #f0f0f0;
font-size: 0.95rem;
}
.model-features li:last-child {
border-bottom: none;
}
.eligible-card {
background: white;
border-radius: 15px;
padding: 2rem;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
display: flex;
align-items: center;
transition: transform 0.3s ease, box-shadow 0.3s ease;
margin-bottom: 1rem;
}
.eligible-card:hover {
transform: translateY(-3px);
box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}
.eligible-icon {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 1.5rem;
flex-shrink: 0;
}
.eligible-icon i {
font-size: 1.5rem;
}
.eligible-content h4 {
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 0.5rem;
color: #333;
}
.eligible-content p {
color: #666;
margin-bottom: 0;
line-height: 1.6;
}
.form-card {
background: white;
border-radius: 20px;
padding: 3rem;
box-shadow: 0 15px 50px rgba(0,0,0,0.1);
}
.bayilik-form .form-control,
.bayilik-form .form-select {
border: 2px solid #e9ecef;
border-radius: 10px;
padding: 0.75rem 1rem;
font-size: 1rem;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.bayilik-form .form-control:focus,
.bayilik-form .form-select:focus {
border-color: #667eea;
box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
}
.bayilik-form .form-label {
font-weight: 600;
color: #333;
margin-bottom: 0.5rem;
}
.section-title {
font-size: 2.5rem;
font-weight: 700;
color: #333;
margin-bottom: 1rem;
}
.section-subtitle {
font-size: 1.1rem;
color: #666;
line-height: 1.6;
}
/* Responsive Bayilik Sayfası */
@media (max-width: 768px) {
.hero-title {
font-size: 2rem;
}
.hero-subtitle {
font-size: 1rem;
}
.section-title {
font-size: 2rem;
}
.eligible-card {
flex-direction: column;
text-align: center;
}
.eligible-icon {
margin-right: 0;
margin-bottom: 1rem;
}
.form-card {
padding: 2rem;
}
}
@media (max-width: 576px) {
.hero-title {
font-size: 1.75rem;
}
.section-title {
font-size: 1.75rem;
}
.model-card {
margin-bottom: 2rem;
}
}
/* Documentation Styles */
.documentation-hero {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
position: relative;
overflow: hidden;
}
.documentation-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
}
.documentation-title {
font-size: 3rem;
font-weight: 700;
margin-bottom: 1rem;
position: relative;
z-index: 2;
}
.documentation-subtitle {
font-size: 1.2rem;
margin-bottom: 2rem;
opacity: 0.9;
position: relative;
z-index: 2;
}
.search-container {
position: relative;
z-index: 2;
}
.search-box {
position: relative;
max-width: 500px;
margin: 0 auto;
}
.search-icon {
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
color: #6c757d;
z-index: 3;
}
.search-input {
width: 100%;
padding: 15px 15px 15px 45px;
border: none;
border-radius: 50px;
font-size: 1rem;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.search-input:focus {
outline: none;
box-shadow: 0 4px 25px rgba(0, 0, 0, 0.15);
transform: translateY(-2px);
}
.documentation-content {
background: #f8f9fa;
}
.docs-sidebar {
background: white;
border-radius: 10px;
padding: 2rem;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
position: sticky;
top: 20px;
}
.sidebar-title {
font-weight: 600;
margin-bottom: 1.5rem;
color: #333;
border-bottom: 2px solid #ff8a00;
padding-bottom: 0.5rem;
}
.docs-nav {
list-style: none;
padding: 0;
margin: 0;
}
.docs-nav li {
margin-bottom: 0.5rem;
}
.docs-nav-link {
display: block;
padding: 0.75rem 1rem;
color: #6c757d;
text-decoration: none;
border-radius: 8px;
transition: all 0.3s ease;
font-weight: 500;
}
.docs-nav-link:hover,
.docs-nav-link.active {
background: #ff8a00;
color: white;
transform: translateX(5px);
}
.docs-main {
background: white;
border-radius: 10px;
padding: 3rem;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.docs-section {
margin-bottom: 4rem;
}
.docs-section:last-child {
margin-bottom: 0;
}
.section-title {
font-size: 2rem;
font-weight: 700;
color: #333;
margin-bottom: 1rem;
position: relative;
}
.section-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 0;
width: 60px;
height: 3px;
background: #ff8a00;
border-radius: 2px;
}
.section-description {
font-size: 1.1rem;
color: #6c757d;
margin-bottom: 2rem;
line-height: 1.6;
}
/* Guide Steps */
.guide-steps {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.step-card {
display: flex;
align-items: flex-start;
gap: 1.5rem;
padding: 1.5rem;
background: #f8f9fa;
border-radius: 10px;
border-left: 4px solid #ff8a00;
transition: all 0.3s ease;
}
.step-card:hover {
transform: translateX(5px);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.step-number {
width: 40px;
height: 40px;
background: #ff8a00;
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 1.2rem;
flex-shrink: 0;
}
.step-content h4 {
font-weight: 600;
color: #333;
margin-bottom: 0.5rem;
}
.step-content p {
color: #6c757d;
margin: 0;
line-height: 1.6;
}
/* Feature Grid */
.feature-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.feature-item {
text-align: center;
padding: 2rem;
background: #f8f9fa;
border-radius: 10px;
transition: all 0.3s ease;
}
.feature-item:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}
.feature-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, #ff8a00, #ff6b35);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
color: white;
font-size: 2rem;
}
.feature-item h4 {
font-weight: 600;
color: #333;
margin-bottom: 1rem;
}
.feature-item p {
color: #6c757d;
line-height: 1.6;
margin: 0;
}
/* Code Examples */
.code-example {
margin-top: 2rem;
}
.code-example h4 {
font-weight: 600;
color: #333;
margin-bottom: 1rem;
}
.code-block {
background: #2d3748;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.code-block pre {
margin: 0;
padding: 1.5rem;
color: #e2e8f0;
font-family: 'Courier New', monospace;
font-size: 0.9rem;
line-height: 1.5;
}
.code-block code {
color: #e2e8f0;
}
/* Info Cards */
.info-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-top: 2rem;
}
.info-card {
background: #f8f9fa;
padding: 2rem;
border-radius: 10px;
border-left: 4px solid #ff8a00;
}
.info-card h5 {
font-weight: 600;
color: #333;
margin-bottom: 1rem;
}
.info-card ul {
list-style: none;
padding: 0;
margin: 0;
}
.info-card li {
padding: 0.5rem 0;
color: #6c757d;
position: relative;
padding-left: 1.5rem;
}
.info-card li::before {
content: '✓';
position: absolute;
left: 0;
color: #ff8a00;
font-weight: bold;
}
/* Management Features */
.management-features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
margin-top: 2rem;
}
.management-item {
text-align: center;
padding: 2rem;
background: #f8f9fa;
border-radius: 10px;
transition: all 0.3s ease;
}
.management-item:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}
.management-item i {
font-size: 3rem;
color: #ff8a00;
margin-bottom: 1rem;
}
.management-item h4 {
font-weight: 600;
color: #333;
margin-bottom: 1rem;
}
.management-item p {
color: #6c757d;
line-height: 1.6;
margin: 0;
}
/* Reports Grid */
.reports-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
margin-top: 2rem;
}
.report-card {
background: white;
padding: 1.5rem;
border-radius: 10px;
border: 2px solid #e9ecef;
transition: all 0.3s ease;
}
.report-card:hover {
border-color: #ff8a00;
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}
.report-card h5 {
font-weight: 600;
color: #333;
margin-bottom: 0.75rem;
}
.report-card p {
color: #6c757d;
margin: 0;
line-height: 1.5;
}
/* API Example */
.api-example {
margin-top: 2rem;
}
.api-example h4 {
font-weight: 600;
color: #333;
margin-bottom: 1rem;
}
/* FAQ List */
.faq-list {
margin-top: 2rem;
}
.faq-item {
background: #f8f9fa;
padding: 2rem;
border-radius: 10px;
margin-bottom: 1.5rem;
border-left: 4px solid #ff8a00;
}
.faq-item:last-child {
margin-bottom: 0;
}
.faq-item h5 {
font-weight: 600;
color: #333;
margin-bottom: 1rem;
}
.faq-item p {
color: #6c757d;
line-height: 1.6;
margin: 0;
}
/* Responsive Design */
@media (max-width: 768px) {
.documentation-title {
font-size: 2rem;
}
.documentation-subtitle {
font-size: 1rem;
}
.docs-sidebar {
margin-bottom: 2rem;
position: static;
}
.docs-main {
padding: 2rem;
}
.section-title {
font-size: 1.5rem;
}
.step-card {
flex-direction: column;
text-align: center;
}
.feature-grid,
.info-cards,
.management-features,
.reports-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 576px) {
.documentation-hero {
padding: 3rem 0;
}
.documentation-title {
font-size: 1.75rem;
}
.docs-main {
padding: 1.5rem;
}
.step-card,
.feature-item,
.info-card,
.management-item,
.report-card,
.faq-item {
padding: 1.5rem;
}
}
/* Updates Styles */
.updates-hero {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
position: relative;
overflow: hidden;
}
.updates-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
}
.updates-title {
font-size: 3rem;
font-weight: 700;
margin-bottom: 1rem;
position: relative;
z-index: 2;
}
.updates-subtitle {
font-size: 1.2rem;
margin-bottom: 2rem;
opacity: 0.9;
position: relative;
z-index: 2;
}
.version-filter {
position: relative;
z-index: 2;
display: flex;
justify-content: center;
gap: 1rem;
flex-wrap: wrap;
}
.filter-btn {
padding: 0.75rem 1.5rem;
border: 2px solid rgba(255, 255, 255, 0.3);
background: transparent;
color: white;
border-radius: 25px;
font-weight: 500;
transition: all 0.3s ease;
cursor: pointer;
}
.filter-btn:hover,
.filter-btn.active {
background: white;
color: #667eea;
border-color: white;
}
.updates-content {
background: #f8f9fa;
}
.latest-update {
position: relative;
margin-bottom: 4rem;
}
.update-badge {
position: absolute;
top: -10px;
left: 20px;
background: #ff8a00;
color: white;
padding: 0.5rem 1rem;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 600;
z-index: 10;
}
.update-card {
background: white;
border-radius: 15px;
padding: 2rem;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
border: 1px solid #e9ecef;
}
.update-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}
.update-card.featured {
border: 2px solid #ff8a00;
background: linear-gradient(135deg, #fff 0%, #fff8f0 100%);
}
.update-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
flex-wrap: wrap;
gap: 1rem;
}
.update-version {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.version-number {
font-size: 1.2rem;
font-weight: 700;
color: #333;
}
.version-date {
font-size: 0.9rem;
color: #6c757d;
}
.update-type {
padding: 0.5rem 1rem;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
}
.update-type.major {
background: #dc3545;
color: white;
}
.update-type.minor {
background: #ffc107;
color: #333;
}
.update-type.bugfix {
background: #28a745;
color: white;
}
.update-title {
font-size: 1.5rem;
font-weight: 700;
color: #333;
margin-bottom: 1rem;
}
.update-description {
color: #6c757d;
line-height: 1.6;
margin-bottom: 1.5rem;
}
.update-features h5,
.update-changes h6 {
font-weight: 600;
color: #333;
margin-bottom: 1rem;
}
.update-features ul,
.update-changes ul {
list-style: none;
padding: 0;
margin: 0;
}
.update-features li,
.update-changes li {
padding: 0.5rem 0;
color: #6c757d;
position: relative;
padding-left: 1.5rem;
line-height: 1.5;
}
.update-features li::before,
.update-changes li::before {
content: '✓';
position: absolute;
left: 0;
color: #ff8a00;
font-weight: bold;
}
.update-features i {
margin-right: 0.5rem;
color: #ff8a00;
}
/* Timeline */
.updates-timeline {
position: relative;
margin-bottom: 4rem;
}
.updates-timeline::before {
content: '';
position: absolute;
left: 20px;
top: 0;
bottom: 0;
width: 2px;
background: #e9ecef;
z-index: 1;
}
.timeline-item {
position: relative;
margin-bottom: 3rem;
padding-left: 60px;
}
.timeline-marker {
position: absolute;
left: 11px;
top: 20px;
width: 20px;
height: 20px;
background: #ff8a00;
border-radius: 50%;
border: 4px solid white;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
z-index: 2;
}
/* Coming Soon */
.coming-soon {
background: white;
border-radius: 15px;
padding: 3rem;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
.coming-soon-title {
font-size: 2rem;
font-weight: 700;
color: #333;
margin-bottom: 2rem;
text-align: center;
position: relative;
}
.coming-soon-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 3px;
background: #ff8a00;
border-radius: 2px;
}
.upcoming-features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.upcoming-card {
text-align: center;
padding: 2rem;
background: #f8f9fa;
border-radius: 10px;
transition: all 0.3s ease;
border: 2px solid transparent;
}
.upcoming-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
border-color: #ff8a00;
}
.upcoming-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, #ff8a00, #ff6b35);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
color: white;
font-size: 2rem;
}
.upcoming-card h5 {
font-weight: 600;
color: #333;
margin-bottom: 1rem;
}
.upcoming-card p {
color: #6c757d;
line-height: 1.6;
margin-bottom: 1rem;
}
.release-date {
display: inline-block;
background: #ff8a00;
color: white;
padding: 0.5rem 1rem;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 600;
}
/* Responsive Design */
@media (max-width: 768px) {
.updates-title {
font-size: 2rem;
}
.updates-subtitle {
font-size: 1rem;
}
.version-filter {
flex-direction: column;
align-items: center;
}
.filter-btn {
width: 200px;
}
.update-header {
flex-direction: column;
align-items: flex-start;
}
.timeline-item {
padding-left: 40px;
}
.timeline-marker {
left: 6px;
}
.upcoming-features {
grid-template-columns: 1fr;
}
.coming-soon {
padding: 2rem;
}
}
@media (max-width: 576px) {
.updates-hero {
padding: 3rem 0;
}
.updates-title {
font-size: 1.75rem;
}
.update-card {
padding: 1.5rem;
}
.coming-soon {
padding: 1.5rem;
}
.upcoming-card {
padding: 1.5rem;
}
}