/*importing google fonts*/
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');

* {
    margin:0;
    padding:0;   
    box-sizing: border-box;
    font-family: "Merriweather", serif;
}
:root{  
    /* Defining CSS variables for colors */
    --white-color: #ffffff;
    --dark-color: #000000;
    --primary-color: #003cff;
    --secondary-color: #f2f2f2;
    --accent-color: #ff6347;
    --text-color: #333;
    --heading-color: #111;
    --link-color: #007bff;
    --link-hover-color: #00c6ff;

    /*defining CSS variables for font sizes */
    --font-size-sm: 0.875rem; /* 14px */
    --font-size-n: 1rem; /* 16px */
    --font-size-md: 1.125rem; /* 18px */
    --font-size-lg: 1.5rem; /* 20px */
    --font-size-xl: 2rem; /* 32px */
    --font-size-xxl: 2.5rem; /* 40px */
    --font-size-xxxl: 3rem; /* 48px */

    /*defining CSS variables for font weights */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extra-bold: 800;

    /*defining CSS variables for radius*/
    --border-radius-sm: 8px;
     --border-radius-m: 30px;
     --border-radius-circle: 50%;
     /*site max width*/
    --site-max-width: 1300px;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 75px;
}


/* Defining global styles (for whole website) */
ul {
        list-style: none;
}

a {
        text-decoration: none;
}

button {
        border:none;
        background: none;
        cursor: pointer;
}

img {
        max-width: 100%;
        height: auto;/*added*/  
}

.section-content {
        max-width: var(--site-max-width);
        margin: 0 auto;
        padding: 0 20px;
}

.section-title {
    text-align: center;
    padding: 60px 0 100px;
    text-transform: uppercase;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-extra-bold);

}

/* line below the section title */
.section-title::after {
    content: "";
    display: block;
    width: 80px;
    height: 5px;
    border-radius: var(--border-radius-sm);
    background-color: var(--primary-color);
    margin: 20px auto 0;
}

    /* Defining styles for the navbar */
header {
        position: fixed;
        width: 100%;
        z-index: 5;
        background-color: var(--white-color);
}

header .navbar {
        display: flex;
        padding: 10px 20px;
        justify-content: space-between;
        align-items: center; 
}

.navbar .nav-logo img {
        display: flex;
        align-items: center;
        gap: 10px;
}
    
.navbar .nav-menu {
        display: flex;
        gap: 10px;
}



.navbar .nav-menu .nav-link {
    color: var(--primary-color);
    font-size: var(--font-size-md);
    border-radius: var(--border-radius-m);
    padding: 10px 20px;
    transition: 0.3s ease;
}

.navbar .nav-menu .nav-link:hover{
    color: var(--link-hover-color);
    background-color: none;
}
 
.navbar :where(#menu-close-button, #menu-open-button) {
        display: none;
}

/*hero section styles*/
.hero-section{
    min-height: 100vh;
    background-color: var(--secondary-color);
    padding-top: 45px;/*important added*/
}

.hero-section .section-content{
    display: flex;
    align-items: center;
    min-height: 100vh;
    justify-content: space-between;
}

.hero-section .hero-details .title{ 
    font-size: var(--font-size-xxl);
    font-family: "Work Sans", sans-serif;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    
}

.hero-section .hero-details .subtitle {
    font-size: var(--font-size-lg);
    color: var(--text-color);
    margin-top: 8 px;
    max-width: 70%;
    font-weight: var(--font-weight-semibold);
}
.hero-section .hero-details .description { 
    font-size: var(--font-size-md);
    color: var(--text-color);
    margin: 24px 0 40px;
    max-width: 70%;
    font-weight: var(--font-weight-medium);
}
.hero-section .hero-details .buttons{
    display: flex;
    gap: 23px;
}

.hero-section .hero-details .button{
    padding: 10px 26px;
    border: 2px solid transparent;
    background: var(--primary-color);
    color: var(--secondary-color);
    border-radius: var(--border-radius-m);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    
}

.hero-section .hero-details .button:hover,
.hero-section .hero-details .contact-us {
    background: transparent;
    border-color:var(--primary-color);
    color: var(--primary-color);
        
}

.hero-section .hero-details .contact-us:hover
{
    color: var(--secondary-color);
    border-color: var(--primary-color);
    background: var(--primary-color);
    
    
}

.hero-section .hero-image-wrapper {
    max-width: 400px;
    margin-right: 30px;
    
}
.hero-image {
  transition: transform 0.4s ease;
}
@keyframes float {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-15px); }
  100% { transform: translateY(0); }
}

.hero-image, .about-image,.service-image, .gallery-image, .partner-image, .country-card, .feature-icon {
  animation: float 3s ease-in-out infinite;
}


.hero-section {
  background-image: url('images/background1.jpg');
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

}



/*about section styles*/
.about-section {
        padding: 120px 0;
        background: var();
        background-color: var(--light-blue-color);
}      
.about-section .section-content {
        display: flex;
        gap: 50px;
        align-items: center;
        justify-content: space-between;
}
.about-section .about-image-wrapper .about-image {
        width: 300px;    
        height: 300px;
        object-fit: cover;
        border-radius: var(--border-radius-circle);     
}
.about-section .about-details .section-title{
    padding: 0;
}
.about-section .about-details {
    max-width: 50%;
}
.about-section .about-details .text {
       line-height: 30px;
       margin: 50px 0 30px;
       text-align: center;  
       font-size: var(--font-size-md);
}
.about-section .social-link-list {
    display: flex;
    gap: 30px;
    justify-content: center;
}
.about-section .social-link-list .social-link {
   color: var(--primary-color);
   font-size: var(--font-size-lg);


}
.about-section .social-link-list .social-link:hover {
    color: var(--link-hover-color);
    
}


/*services section styles*/
.services-section {
        color: var();
        background-color: var(--secondary-color);
        padding: 50px 0 100px;
}
.services-section .services-list{
        display: flex;
        flex-wrap: wrap;
        gap: 110px;
        align-items: center; 
        justify-content: space-between;/*meaning*/
}
.services-section .services-list .service-item {
        display: flex;
        flex-direction: column;
        text-align: center;
        align-items: center;
        justify-content: space-between;/*meaning*/
        gap: 20px;
        width: calc(100% / 3 - 110px);       
}
.services-section .services-list .service-item .service-image {
        max-width: 83%;
        aspect-ratio: 1;
        margin-bottom: 15px;
        object-fit: contain;
}
.services-section .services-list .service-item .name{
        font-size: var(--font-size-lg);
        font-weight: var(--font-weight-bold);
        margin: 12px 0;
}
.services-section .services-list .service-item .text {
        font-size: var(--font-size-md);
}
.service-item {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.service-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.services-section {
  background-image: url('images/background8.jpg');
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

}

.learn-more {
  display: inline-block;
  margin-top: 0.5rem;
  color: var(--primary-color);
  font-weight: 700;
  font-family: "Work Sans", sans-serif;
  font-size: var(--font-size-md);
  text-decoration: none;
  transition: color 0.3s ease, transform 0.3s ease;
}

.learn-more:hover {
  color: var(--link-hover-color);
  transform: translateX(5px);
}
 /* Defining styles for the software section */
/* ensure relative positioning for overlay */
.software-section {
  position: relative;
  padding: 4rem 1rem;
  color: #fff;
  overflow: hidden;
}

.software-section .overlay {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

strong {
  font-weight: bold;
color: var(--link-hover-color);
}

.software-section .container {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  z-index: 1;
}

.section-title {
  font-size: 2.75rem;
  text-align: center;
  margin-bottom: 1rem;
  padding-top: 100px;
}

.lead {
  font-size: 1.25rem;
  text-align: center;
  max-width: 800px;
  margin: 0 auto 2.5rem;
}

.software-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
}

.software-feature {
  background: rgba(255,255,255,0.1);
  padding: 2rem;
  border-radius: 1rem;
  text-align: center;
}

.feature-icon {
        max-width: 100%;
        aspect-ratio: 1;
        margin-bottom: 15px;
        object-fit: contain;
}

.software-cta h2 {
  font-size: 2rem;
  margin-bottom: 0.75rem;
}

.software-cta p {
  font-size: 1.125rem;
  margin-bottom: 1.5rem;
}

.btn {
  display: inline-block;
  padding: 0.75rem 1.75rem;
  background: var(--primary-color);
  color: #fff;
  border-radius: 0.5rem;
  text-decoration: none;
  font-weight: bold;
}
.btn:hover {
  background: var(--link-hover-color);
  transform: translateY(-2px);
}

/* Responsive tweaks */
@media (max-width: 600px) {
  .section-title { font-size: 2rem; }
  .lead { font-size: 1rem; }
}


/*Partners section styles*/

.partners-section {
        padding: 50px 0 100px;
        background-color: var(--white-color);
}

.partners-section .slider-wrapper {
       overflow: hidden;
       margin: 0 60px 50px;   
}

.partners-section .partner {
        user-select: none;
        display: flex;  
        padding: 35px;
        text-align: center; 
        flex-direction: column;
        align-items: center;
}

.partners-section .section-content .text {
        font-size: var(--font-size-md);
        margin-bottom: 16px;
        text-align: center;
}

.partners-section .partner .partner-image {
        max-width: 100%;
        height: auto;
        object-fit: cover;
        margin-bottom: 15px; /*50px*/
        border-radius: var(--border-radius-sm);
        
}

.partners-section .swiper-pagination-bullet {
        width: 15px;
        height: 15px;
        background: var(--primary-color);
        opacity: 1;
}

.partners-section .swiper-slide-button {
        margin-top: -50px;
        color: var(--primary-color);
        transition: o.3s ease;
}

.partners-section .swiper-slide-button:hover {
        color: var(--link-hover-color);
}


/* Gallery section styles*/
.gallery-section {
        background-color: var(--secondary-color); 
        padding: 50px 0 100px;
}

.gallery-section .gallery-list {
        display: flex;
        flex-wrap: wrap;
        gap: 32px;
}

.gallery-section .gallery-list .gallery-item {
        overflow: hidden;
        border-radius: var(--border-radius-sm);
        width: calc(100% / 3 - 32px); 
}

.gallery-section .gallery-item .gallery-image {
        width: 100%;
        height: 100%;
        cursor: zoom-in;
        transition: 0.3s ease;
}
.gallery-section .gallery-item:hover .gallery-image {
        transform: scale(1.3);
}
.gallery-section {
  background-image: url('images/background6.jpg');
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

}


/*contact section styles*/
.contact-section {
        padding: 50px 0 100px;
        background-color: var(--white-color);
}

.contact-section .section-content {
        display: flex;
        gap: 50px;
        align-items: flex-start;/*meaning*/
        justify-content: space-between;
}

.contact-section .contact-info-list .contact-info {
        display: flex;
        gap: 20px;
        margin: 20px 0;
        align-items: center;    
}
.contact-section .contact-info-list .contact-info i {
        font-size: var(--font-size-md);
}

.contact-section .contact-form .form-input {
       width: 100%;
       height: 50px;
       padding: 0 12px;
       outline: none;
       margin-bottom: 16px;
       background-color: var(--secondary-color);
       border-radius: var(--border-radius-sm);
       border: 1px solid var(--medium-grey-color);
} 

.contact-section .contact-form {
        max-width: 50%;
        margin-top: 60px;
}

.contact-section .form-input:focus {
        border: 2px solid var(--primary-color);
}

.contact-section .contact-form textarea .form-input {
        height: 140px;
        padding: 12px;
        resize: vertical;
}

.contact-section .contact-form .submit-button {
        padding: 10px 26px;
        margin-top: 10px;
        color: var(--secondary-color);
        font-size: var(--font-size-md);
        font-weight: var(--font-weight-medium);
        background: var(--primary-color);
        border-radius: var(--border-radius-m);
        border: 1px solid var(--primary-color);
        transition: 0.3s ease; 
}

.contact-section .contact-form .submit-button:hover {
        color: var(--primary-color);
        background: transparent;
}
.contact-section .contact-info-list .contact-info i{
        color: var(--primary-color);
        font-size: var(--font-size-lg);
        margin-right: 10px;

}
.map-container {
    width: 100%;
    height: 300px;
    border-radius: var(--border-radius-sm);
    overflow: hidden;
    margin-top: 30px;
}


/* Defining styles for the footer */
.footer-section {
        padding: 20px 0;
        background: var(--dark-color)
}
.footer-section :where(.copyright-text, .social-link-list) {
        display: flex;
        justify-content: center;
        gap: 20px;
        align-items: center;
        color: var(--white-color);
}
.footer-section .copyright-text {
        padding-top: 10px;
}
.footer-section .social-link-list .social-link {
        color: var(--primary-color);
        transition: all 0.3s ease;
        font-size: var(--font-size-md);
        padding-top: 10px;
     
     }
.footer-section .social-link-list .social-link:hover {
         color: var(--link-hover-color);
         
     }


.country-presence {
  padding: 50px 20px;
  background-image: url('images/background11.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  text-align: center;
}

.country-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 20px;
  margin-top: 30px;
}

.country-card {
  background: var(--secondary-color);
  padding: 15px;
  border-radius: 10px;
  transition: transform 0.3s ease;
}

.country-card:hover {
  transform: translateY(-5px);
}

.country-card img {
  width: 40px;
  height: auto;
  margin-bottom: 10px;
}

.country-card p {
  font-size: 1rem;
  font-weight: 500;
  color: var(--dark-color);
}




    


/* Responsive media query for max-width 1024px */
@media screen and (max-width: 1024px) {
        
        .services-section .services-list{
        gap: 60px;}

    .services-section .services-list .service-item {
        width: calc(100% / 2 - 70px); /*meaning*/
        text-align: center;
    }

    .services-section .services-list .service-item .name{
        font-size: var(--font-size-lg);
        font-weight: var(--font-weight-bold);
        margin: 12px 0;
    }
        
}
    

/* Responsive media query for max-width 900px */
@media screen and (max-width: 900px) {
    :root {
        --font-size-md: 1rem; 
        --font-size-lg: 1.25rem; 
        --font-size-xl: 1.5rem;  
        --font-size-xxl: 1.8rem;
}

/*blur effect for the header when the mobile menu is open*/
body.show-mobile-menu header::before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        backdrop-filter: blur(5px);
        background: rgba(0, 0, 0,0.2);
}
/* Defining styles for the navbar */
.navbar :where(#menu-close-button,
 #menu-open-button) {
        display: block;
        font-size: var(--font-size-lg);
}

.navbar #menu-close-button {
        position: absolute;
        color: var(--secondary-color);
        right: 30px;
        top: 30px;
}
    
.navbar #menu-open-button {
        color:var(--primary-color);
}

 
.navbar .nav-menu {
        display: block;
        position: fixed;
        left: -300px;
        top: 0;
        width: 300px;
        height: 100%;
        background: var(--primary-color); 
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 100px;
        transition: left 0.2s ease;
}

body.show-mobile-menu .navbar .nav-menu {
        left: 0;
}
    
.navbar .nav-menu .nav-link {
        color: var(--white-color);
        display: block;
        margin-top: 17px;
        font-size: var(--font-size-lg);
}

/* Defining styles for the hero section */
.hero-section .section-content {
        flex-direction: column-reverse;
        gap: 50px;
        text-align: center;
        padding: 30px 20px 20px;
        justify-content: center;
       
} 

.hero-section .hero-details :is(.title, .subtitle, .description), 
.about-section .about-details, .contact-section .contact-form {
        max-width: 100%;
        justify-content: center;
        
}

.hero-section .hero-details .buttons {
        justify-content: center;
}

.hero-section .hero-image-wrapper{
        max-width: 270px;
        margin-right: 0;
        padding-top: 60px;
}
  
/*about section styles for mobile view*/
.about-section .section-content { 
        flex-direction: column;
        align-items: center;
        gap: 70px;
}

.about-section .section-content .about-image-wrapper {
        width: 100%;
        height: 100%;
        max-width: 250px;
        aspect-ratio: 1;
}   

.services-section .services-list{
        gap: 30px;}

 .services-section .services-list .service-item {
        width: calc(100% / 2 - 30px); /*meaning*/
        text-align: center;
    }
    
    .services-section .services-list .service-item .service-image {
        max-width: 200px;
        aspect-ratio: 1;
    }

    .gallery-section .gallery-list {
        gap: 30px;
    }

    .gallery-section .gallery-list .gallery-item {
        width: calc(100% / 2 - 32px); 
    }

    .contact-section .section-content {
        align-items: center;
        flex-direction: column-reverse;
    }

    
}


/* Responsive media query for max-width 640px */
@media screen and (max-width: 640px) {
        .services-section .services-list {
                gap: 60px;
            }
        .services-section .services-list .service-item,
        .gallery-section .gallery-list .gallery-item {
                width: 100%;
                text-align: center;
            }

            .partners-section .slider-wrapper{
                margin: 0 0 30px; 
            }
            
            .partners-section .swiper-slide-button {
                display: none;
            }

        
}