:root {--primary-color: #0077b8;--secondary-color: #ef503b;--accent-color: #4cc9f0;--extra-dark-color: #142132;--dark-color: #14213d;--light-color: #f8f9fa;--transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);}
html{padding:0;margin:0;overflow-x: hidden;}
html:focus-within{scroll-behavior: smooth !important;}
body {font-family: 'Plus Jakarta Sans', sans-serif;overflow-x: hidden;color: #333;padding-top: 0;scroll-behavior: smooth !important; padding:0;margin:0; }
h1, h2, h3, h4, h5, h6 {font-weight: 700;}
p{font-size: 1.1rem;line-height: 1.7;color: #555;}
/* Navbar Styles */
.navbar {height: 80px;transition: var(--transition);background: rgba(255, 255, 255, 0.95);box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);padding: 0 0.1rem;}
.navbar-brand {margin-left: 20px;}
.navbar-brand img {height: 70px;transition: var(--transition);}
.nav-link {padding: 0 20px !important;font-weight: 600;transition: var(--transition);height: 80px;display: flex;align-items: center;color: var(--dark-color) !important;position: relative;}
.nav-link:after {content: '';position: absolute;bottom: 0;left: 50%;transform: translateX(-50%);width: 0;height: 3px;background: var(--primary-color);transition: var(--transition);}
.nav-link:hover:after {width: 70%;}
.navbar-collapse{background:#fff !important}
.cta-button {background: var(--secondary-color);border-radius: 0px;margin: 0 5px;color: white !important;font-weight: 600;transition: var(--transition);margin-left: 15px; /*box-shadow: 0 4px 15px rgba(247, 37, 133, 0.3);*/}
.cta-button:hover {background: #cc3b02;/*transform: translateY(-3px);*//*box-shadow: 0 12px 15px rgba(247, 37, 133, 0.4);*/color:white}
.language-btn {/*border: 2px solid var(--primary-color);*/border-radius: 0px;padding: 0;margin-right: 20px;color: var(--primary-color);font-weight: 600;transition: var(--transition);}
.language-btn:hover {background: var(--primary-color);color: white;}
/* Hero Slider */
.hero-slider {height: 85vh;position: relative;overflow: hidden;}
.slider-container {width: 100%;height: 100%;position: relative;}
.slide {position: absolute;width: 100%;height: 100%;opacity: 0;         /*transition: opacity 1.2s ease-out;*/transition: all 2s ease-in-out;
background-position: center;background-size: cover;display: flex;align-items: center;}
.slide.active {opacity: 1;}
.slide:nth-child(1) {background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.0)), url('../../img/gallery-01.webp');}
.slide:nth-child(2) {background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.0)), url('../../img/gallery-02.webp');}
.slide:nth-child(3) {background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.0)), url('../../img/gallery-03.webp');}
.slide:nth-child(4) {background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.0)), url('../../img/gallery-04.webp');}
.hero-text {color: white;text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);padding-left: 10%;max-width: 600px;}
.hero-text h1 {font-size: 4.8rem;font-weight: 800;margin-bottom: 1rem;animation: fadeInUp 1.2s ease;}
.hero-text p {font-size: 2.5rem;font-weight: 400;color: #fff;animation: fadeInUp 1.5s ease;}
.slider-dots {position: absolute;bottom: 30px;left: 50%;transform: translateX(-50%);display: flex;gap: 12px;}
.dot {width: 12px;height: 12px;border-radius: 50%;background: rgba(255, 255, 255, 0.5);cursor: pointer;transition: var(--transition);}
.dot.active {background: white;transform: scale(1.3);}
/* Services Section */
.services {padding: 100px 0;position: relative;z-index: 100;}
.section-title {text-align: center;margin-bottom: 60px;}
.section-title {color: #555;font-size: 1.1rem;line-height: 1.6;}
.lead {font-size: 1.1rem !important;font-weight: 400;}
.section-title h2 {font-size: 2.8rem;margin-bottom: 1rem;color: var(--dark-color);position: relative;display: inline-block;}
.section-title h2:after {content: '';position: absolute;bottom: -10px;left: 50%;
transform: translateX(-50%);width: 80px;height: 4px;background: var(--primary-color);}
.btn-outline-primary {--bs-btn-color: #0077b8; /* New border and text color */

                --bs-btn-border-color: #0077b8;

                --bs-btn-hover-color: #fff;

                --bs-btn-hover-bg: #0077b8;

                --bs-btn-hover-border-color: #0077b8;

                --bs-btn-focus-shadow-rgb: 0, 82, 204;

                --bs-btn-active-color: #fff;

                --bs-btn-active-bg: #0077b8;

                --bs-btn-active-border-color: #0077b8;

                --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);

                --bs-btn-disabled-color: #0077b8;

                --bs-btn-disabled-bg: transparent;

                --bs-btn-disabled-border-color: #0077b8;

                --bs-gradient: none;

        }

        

        .service-card {

            border-radius: 15px;

            overflow: hidden;

            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);

            transition: var(--transition);

            height: 100%;

            border: none;

            background: white;

        }

        

        .service-card:hover {

            transform: translateY(-10px);

            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);

        }

        

        .service-icon {

            font-size: 3.5rem;

            color: var(--primary-color);

            margin-bottom: 20px;

            transition: var(--transition);

        }

        

        .service-card:hover .service-icon {

            /*transform: scale(1.1);*/

            color: var(--secondary-color);

        }

        

        /* About Section */

        .about {

            padding: 100px 0;

            background: #f9fafc;

        }

        

        .about-img {

            border-radius: 15px;

            overflow: hidden;

            /*box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);*/

            /*height: 100%;*/

            /*max-height: 600px;*/

            /*background: #eef2ff;*/

            display: flex;

            align-items: center;

            justify-content: center;

            color: var(--primary-color);

            font-weight: 600;

            font-size: 1.1rem;

            /*transition: var(--transition);*/

        }

        

        .section-side-img {

            border-radius: 15px;

            overflow: hidden;

            /*box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);*/

            height: 100%;

            /*max-height: 900px;*/

            /*background: #eef2ff;*/

            display: flex;

            align-items: center;

            justify-content: center;

            color: var(--primary-color);

            font-weight: 600;

            font-size: 1.1rem;

            transition: var(--transition);

        }


        .feature-item {

            display: flex;

            align-items: flex-start;

            margin-bottom: 30px;

        }

        

        .feature-item i {

            font-size: 24px;

            color: var(--primary-color);

            margin-right: 15px;

            margin-top: 0;

            flex-shrink: 0;

            background: rgba(67, 97, 238, 0.1);

            width: 50px;

            height: 50px;

            border-radius: 50%;

            display: flex;

            align-items: center;

            justify-content: center;

            transition: var(--transition);

        }

        

        .feature-item:hover i {

            background: var(--primary-color);

            color: white;

            transform: rotate(10deg);

        }

        

        /* Why Choose Us */

        .why-choose-us {

            padding: 60px 0;

            background: white;

            /*background: linear-gradient(135deg, #f9fafc 0%, #eef2ff 100%);*/

        }

        

        /* Pricing Section */

        .pricing {

            padding: 100px 0;

            /*background: linear-gradient(135deg, #f9fafc 0%, #eef2ff 100%);*/

            background:#fff;

        }

        

        .price-card {

            border-radius: 15px;

            overflow: hidden;

            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);

            transition: var(--transition);

            border: none;

            background: white;

            text-align: center;

            padding: 40px 30px;

        }

        

        .price-card:hover {

            transform: translateY(-10px);

            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);

        }

        

        .price-value1 {

            font-size: 2.5rem;

            color: var(--primary-color);

            font-weight: 700;

            margin: 20px 0;

        }



        .price-value2 {

            font-size: 1.5rem;

            color: var(--primary-color);

            font-weight: 700;

            margin: 20px 0;

        }

.price-value3 {font-size: 1rem;color: var(--secondary-color);font-weight: 400;margin: 20px 0;}
.price-value span {font-size: 1rem;font-weight: 500;color: #777;}
/* Projects Section */
.projects {padding: 100px 0;background: white;}
.project-img {/*border-radius: 12px;*/border-radius: 0;overflow: hidden;margin-bottom: 25px;box-shadow: 0 8px 25px rgba(0, 0, 0, 0.09);/*transition: var(--transition);*/height: 450px;background: #eef2ff;display: flex;align-items: center;justify-content: center;color: #777;font-weight: 600;position: relative;}
.project-img:hover {transform: translateY(-8px) scale(1.02);box-shadow: 0 0 0 rgba(0, 0, 0, 0.15);}
.project-img:before {content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: linear-gradient(135deg, rgba(67, 97, 238, 0.8) 0%, rgba(76, 201, 240, 0.8) 100%);opacity: 0;transition: var(--transition);}
.project-img:hover:before {opacity: 0.9;}
.project-img:hover:after {content: 'View Project';position: absolute;color: white;font-weight: 700;font-size: 1.2rem;z-index: 2;}
/* Parallax Section */
.parallax {background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('../../img/parallax.webp');min-height: 450px;background-attachment: fixed;background-position: center;background-repeat: no-repeat;
background-size: cover;display: flex;align-items: center;padding: 80px 0;}

        
.cta-content {text-align: center;color: white;}
.cta-button-large {background: var(--secondary-color);border-radius: 40px;padding: 15px 40px;color: white;font-weight: 700;font-size: 1.1rem;transition: var(--transition);display: inline-block;margin-top: 30px;box-shadow: 0 5px 20px rgba(247, 37, 133, 0.4);}
.cta-button-large:hover {background: var(--secondary-color);transform: translateY(-5px);box-shadow: 0 10px 25px rgba(247, 37, 133, 0.5);color: white;}
/* Footer */
footer {/*background-color: var(--dark-color);*/background-color: var(--extra-dark-color);color: white;padding: 80px 0 30px;}
.footer-logo {margin-bottom: 20px;display: inline-block;}
.footer-about{font-size:1rem;color:#a7a9ab}
.footer-copyright{font-size:0.9rem;color:#8e8f90}
.social-icons a {color: white;font-size: 1.2rem;margin-right: 15px;transition: var(--transition);display: inline-flex;align-items: center;justify-content: center;width: 40px;height: 40px;border-radius: 50%;background: rgba(255, 255, 255, 0.1); text-decoration: none;}
.social-icons a:hover {color: var(--primary-color);background: white;transform: translateY(-3px);text-decoration: none;}
.footer-title {font-size: 1.2rem;margin-bottom: 25px;position: relative;padding-bottom: 10px;}
.footer-title:after {content: '';position: absolute;bottom: 0;left: 0;width: 40px;height: 3px;background: var(--primary-color);}
.footer-links {list-style: none;padding: 0;}
.footer-links li {margin-bottom: 12px;}
.footer-links a {color: rgba(255, 255, 255, 0.7);transition: var(--transition);text-decoration: none;}
.footer-links a:hover {color: white;padding-left: 5px;}
.contact-info {list-style: none;padding: 0;}
.contact-info li {margin-bottom: 15px;display: flex;align-items: flex-start;}
.contact-info i {margin-right: 15px;color: var(--primary-color);font-size: 1.1rem;margin-top: 4px;}
.ports{padding:100px 0}
.ports li{ font-size:0.9rem;font-weight:400}
.card {border: 1px solid rgba(110, 99, 99, 0.1) !important; /* very light gray */border-radius: 18px; /* optional, for rounded corners */background:linear-gradient(rgba(240, 240, 240, 0.6), rgba(255, 255, 255, 0.2));}
.card:hover {/*transform: translateY(-10px);*/transform: translateY(-8px) scale(1.02);box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);}
.custom-header {background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.1)), url('../../img/header-03.webp') center/cover no-repeat;height: 450px;}
.contact-section {margin-top: 60px; /* Overlap effect */margin-bottom: 50px;}
.map-placeholder iframe {border-radius: 8px;}
.btn-primary{}
/* Animations */
@keyframes fadeInUp {from {opacity: 0;transform: translateY(30px);}to {opacity: 1;transform: translateY(0);}}
.animate-fadeIn {animation: fadeInUp 1s ease;}
/* Section Spacing */
section {position: relative;}
/* Responsive Adjustments */
@media (prefers-reduced-motion: reduce) {html {/*scroll-behavior: auto; /* Revert to instant scrolling */scroll-behavior: smooth; /* Revert to instant scrolling */}}
@media (max-width: 992px) {.navbar {height: 70px;}.navbar-brand {margin-left: 0;}.hero-text h1 {font-size: 2.8rem;}.hero-text p {font-size: 1.2rem;}.nav-link {height: auto;padding: 10px 20px !important;}.about-img {min-height: 350px;margin-bottom: 40px;}
.navbar-brand img {height: 55px;transition: var(--transition);}}
@media (max-width: 768px) {.navbar-brand {margin-left: 0;}.hero-slider {height: 73vh;}.hero-text {padding-left: 7%;}.hero-text h1 {font-size: 2.5rem;}.hero-text p {font-size: 1.3rem;}.section-title h2 {font-size: 2.2rem;}.services, .about, .why-choose-us, .pricing, .projects {padding: 70px 0;}}