body{ direction: rtl; } .header-container, .navmenu ul { direction: rtl; } .navmenu ul li { text-align: right; } .logo img{ width: 150%; height: 150%; } .btn-getstarted { margin-left: 0; margin-right: auto; } :root{ --main-color : #C91430; } .active{ color: var(--main-color) !important; } .btn-getstarted{ background-color: var(--main-color) !important; } @media (max-width:768px) { .header .logo img { max-height: 36px; } } .additional-services .service-box { background-color: #ffffff; border-radius: 15px; padding: 20px; transition: transform 0.3s ease, box-shadow 0.3s ease; box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); border-top: 3px solid var(--main-color); } .additional-services .service-box:hover { transform: translateY(-8px); box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.15); } .additional-services .service-title { font-weight: 700; color: var(--main-color); margin-top: 15px; font-size: 1.25rem; } .additional-services .service-description { color: #6c757d; font-size: 1rem; margin: 10px 0; } .additional-services .btn-link { color: var(--main-color); font-weight: 600; display: inline-flex; align-items: center; text-decoration: none; transition: color 0.3s ease; } .additional-services .btn-link:hover { color: #0056b3; } .additional-services .btn-link i { font-size: 1.2rem; transition: transform 0.3s ease; } .additional-services .btn-link:hover i { transform: translateX(5px); } .additional-services .service-box img { border-radius: 10px; transition: transform 0.3s ease; } .additional-services .service-box:hover img { transform: scale(1.05); } .additional-services .service-box:hover::before { opacity: 1; } .features.section { background-color: #f9f9f9; padding: 60px 0; } .features .section-title h2 { color: var(--main-color); font-weight: 700; font-size: 2.5rem; margin-bottom: 15px; } .features .section-title p { color: #555; font-size: 1rem; max-width: 600px; margin: 0 auto; } .custom-tabs .nav-link { font-size: 1.1rem; color: #555; border: none; transition: color 0.3s ease, background-color 0.3s ease; padding: 10px 20px; border-radius: 8px; } .custom-tabs .nav-link.active { background-color: var(--main-color); color: #fff; font-weight: 600; } .custom-tabs .nav-link:hover { color: var(--main-color); } .custom-tab-content .tab-pane { padding: 30px 0; } .features .feature-image { max-width: 80%; border-radius: 12px; box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease; } .features .feature-image:hover { transform: scale(1.05); } .features h3 { color: var(--main-color); font-size: 1.8rem; font-weight: 700; margin-bottom: 20px; } .features p.fst-italic { font-size: 1rem; color: #666; } .features ul { list-style-type: none; padding: 0; } .features ul li { font-size: 1rem; color: #333; margin-bottom: 10px; display: flex; align-items: center; } .features ul li i { color: var(--main-color); margin-right: 8px; font-size: 1.2rem; } .features .feature-image, .custom-tabs .nav-link { transition: all 0.3s ease; } .custom-tab-content .tab-pane.active { animation: fadeIn 0.5s ease-in-out; } @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .img-re{ width: 45% !important; height: 40% !important; } .img-re-2{ width: 60% !important; height: 60% !important; } .img-res-3{ width: 60% !important; height: 60% !important; } .img-ref-4{ width: 65% !important; height: 65% !important; } .res-img-5{ width: 70% !important; height: 90% !important; } body { font-family: 'Almarai', sans-serif !important; } .call-now { position: fixed; visibility: visible; opacity: 1; right: 15px; bottom: 125px; z-index: 100000; background-color: var(--accent-color); width: 54px; height: 54px; border-radius: 50px; transition: all 0.4s; } .call-now i { font-size: 24px; color: var(--contrast-color); line-height: 0; } .call-now:hover { background-color: color-mix(in srgb, var(--accent-color), transparent 20%); color: var(--contrast-color); } .call-now.active { visibility: visible; opacity: 1; bottom: 75px; } .navmenu li a{ font-size: 16px !important; font-weight: 500; } .tab-pane a{ background-color: var(--main-color); color: #fff; } .image{ width: 80%; height: 80%; } ul li a i { font-size: 12px; margin-right: 4px; } ul li a { display: flex; align-items: center; padding: 8px 12px; } ul li a:hover { background-color: #f4f4f4; border-radius: 5px; } ul li .dropdown ul li a { padding: 6px 12px; font-size: 16px; } ul li .dropdown ul { display: none; list-style: none; padding: 0; } ul li .dropdown:hover > ul { display: block; position: absolute; background-color: #fff; border-radius: 5px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } #additional-services *{ text-align: right; } .btn-primary{ background-color: var(--main-color); color: #f4f4f4; } .section-title p{ font-size: 1.2rem; }