@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700;1,900&display=swap');

/* --- GLOBAL STYLES --- */
body{ 
    font-family: 'Source Sans Pro', sans-serif; 
    font-weight: 400; 
    font-size: 17px; 
    color: #444; 
    line-height: 1.6; 
    background: #f7f7f7;
}
h1{
    font-weight: 800; 
    font-size: 4.5rem; 
    font-family: 'Barlow Semi Condensed', sans-serif; 
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); 
}
h2{
    font-size: 2.8rem; 
    line-height: 1.2; 
    font-family: 'Barlow Semi Condensed', sans-serif;
    margin-bottom: 2.5rem; 
    font-weight: 600; 
    color: #333333;
}
h3{
    font-size: 1.8em; 
    margin-top: 15px; 
    font-weight: 700; 
    color: #303030;
}

/* --- BANNER (Text Over Image) --- */
.banner{
    /* Assuming you have a background image named bg.jpg in the images folder */
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(../images/bg.jpg) center center; 
    background-size: cover; 
    padding: 120px 0; 
    color: #fff;
    text-align: center; 
}

.banner h1{
    margin-top: 0; 
}


/* --- PRODUCT BOXES (.box) --- */
.box{
    /* FIX: Increased margin-bottom significantly for a definitive vertical gap */
    margin-bottom: 45px; 
    background: #fff; 
    color: #303030;
    padding: 30px; 
    position: relative;
    border-radius: 10px; 
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    /* Essential for button alignment and working with Bootstrap's g-x classes */
    display: flex;
    flex-direction: column;
    height: 100%;
}
.box img{
    display: none; /* Hide old images */
}

/* New style for icons (BLUE) */
.product-icon {
    font-size: 3.5rem;
    color: #007bff; /* Vibrant Blue for Icons */
    margin-bottom: 15px;
    height: 80px; 
    display: flex;
    justify-content: center;
    align-items: center;
}

.box h3{
    font-size:1.5em; 
    font-weight: 700; 
    color:#333333; 
    margin-top: 0;
}

/* --- BUTTONS (ORANGE with BLACK HOVER) --- */
.box a, .btnc{
    background: #FF6B1F; /* Vibrant Orange */
    border: none;
    border-radius: 5px; 
    padding: 10px 25px; 
    color: #fff;
    text-decoration: none;
    display: inline-block;
    font-weight: 700; 
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.box a{
    position: static; 
    margin-top: auto; /* Pushes the button to the bottom */
    text-align: center;
}

.box a:hover, .btnc:hover{
    background-color: #212121; /* Black/Dark Grey on hover */
    color: #fff; 
    transform: translateY(-2px);
}


/* Keeping other existing styles and re-applying useful ones */
.section1, .section2, .clients, .div1, .support {
    padding: 60px 0; /* Adjusted from 50px 0 */
}
.logo img{width:240px;}

/* --- HEADER / NAVIGATION --- */
header {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    position: sticky;
    top: 0;
    z-index: 1020;
    background-color: #fff !important;
}
.nav-link{color:#000; font-weight:400; transition: color 0.3s ease;}
.nav-link:hover {color: #007bff;}

/* --- SECTION 2 (Why Choose) - Cleaned up to use modern flex/grid and apply blue accents */
.section2{background:#e9ecef;}

.section2 ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.section2 ul li{
    width: 48%; 
    float: none; 
    margin-bottom: 30px;
    display: flex; 
    align-items: flex-start;
}

.icon{
    width: 60px; 
    height: 60px;
    flex-shrink: 0;
    float: none; 
    background: #007bff; /* Blue icon background */
    border-radius: 50%; 
    padding: 10px; 
    margin-right: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.icon img{
    width: 70%;
    filter: brightness(0) invert(1); /* Makes the icon image white */
}
.text{width:auto; float:none; } 
.text h4 {
    font-weight: 700;
    color: #007bff; /* Blue accent for text headings */
    margin-bottom: 5px;
    font-size: 1.2em;
}

/* --- Support Section Icon Sizing --- */
.support-icon-wrapper i {
    /* Increase the icon size */
    font-size: 3rem; 
    /* You might want to adjust the icon color to match other accents */; 
    transition: color 0.3s ease;
}

/* Optional: Center the icon wrapper contents if they shift */
.support-icon-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px; /* Ensure there's space for the larger icon */
    margin-bottom: 15px; /* Add some space below the icon */
}


/* --- CLIENTS / PARTNERS --- */
.clients{background:#e3e3e3;}
.cl-img{background:#fff; border-radius:20px; padding:20px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);}

/* --- FOOTER --- */
footer{background:#212121; color:#ccc; padding:60px 0 20px 0;}
footer h4 {
    color: #fff;
    font-weight: 700;
    margin-bottom: 20px;
    border-bottom: 2px solid #007bff; 
    padding-bottom: 10px;
    display: inline-block;
}
footer ul {list-style: none; padding: 0;}
footer ul li a {color: #aaa; text-decoration: none; transition: color 0.3s ease; padding: 3px 0; display: block;}
footer ul li a:hover {color: #007bff;}
.copy {margin-top: 30px; padding-top: 20px; border-top: 1px solid #333; text-align: center; color: #666;}


/* --- CONTACT / SERVICES PAGES --- */
.div1{padding:60px 0;}
.in-banner{background:url(../images/banner-in.jpg) center; background-size:cover; padding:80px 0;}
.s-box ul{margin:0;padding:0;}
.s-box ul li{list-style: disc; margin-left:20px;}
.s-box{border: 2px solid #212121;
    padding: 20px;
    border-radius: 20px;
    min-height: 454px;
    margin-bottom: 20px;}
    .support{padding:60px 0;}
    .box-c{padding:20px; border-radius: 20px; border:1px solid #ccc; box-shadow: 0 0 20px 0 #ccc;}