body {
    margin: 0;
    padding: 0;
    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400; /* Example weight value, replace with your desired weight */
    font-style: normal;
    font-variation-settings: "wdth" 100;
}

h1 span {
    color: #64a2ff;
}

h1 {
    color: #111111;
    font-weight: 650;
    text-align: center;
    font-family: sans-serif;
}

.banner {
    display: flex;
    align-items: center; /* Center items vertically */
    justify-content: center; /* Center content horizontally */
    position: relative;
    height: 100vh; /* Full viewport height */
    overflow: hidden; /* Ensure no overflow from the banner */
    background: rgba(0, 0, 0, 0.5); /* Optional: overlay for better text visibility */
}


.banner-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0; /* Place background behind other elements */
}

.banner-bg .image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cover the entire area */
    position: absolute;
    top: 0;
    left: 0;
}

.banner-text {
    position: relative;
    z-index: 1; /* Ensure text is above the background image */
    color: white; /* Text color */
    padding: 30px;
    max-width: 60%; /* Ensure text takes up a significant portion of the width */
    text-align: left; /* Align text to the left */
    display: flex; /* Align children in a row */
    flex-direction: row; /* Side by side */
    align-items:left; /* Vertically center text */
}

.banner-text h2 {
    font-size: 5.5rem; /* Adjust as needed */
    margin: 0;
}

.dcs-logo {
    position: absolute;
    top: 20px; /* Adjust top position as needed */
    left: 20px; /* Adjust left position as needed */
    z-index: 1; /* Ensure logo is above the background image */
}

.dcs-logo img {
    max-height: 100px; /* Adjust size as needed */
    width: auto; /* Maintain aspect ratio */
}

.aws-pic {
    position: relative; /* Ensure it can be placed next to text */
    z-index: 1; /* Ensure image is above the background image */
    display: flex;
    align-items: center; /* Center content vertically */
    padding: 20px;
    width: 196px; /* Adjust width as needed */
    height: 196px; /* Maintain aspect ratio */
    margin-left: 20px; /* Space between text and AWS pic */
}

.aws-pic img {
    width: 100%; /* Ensure the image fits within its container */
    height: auto; /* Maintain aspect ratio */
}

.contact {
    position: fixed; /* Fix the position relative to the viewport */
    bottom: 20px; /* Position above the bottom edge */
    right: 20px; /* Position from the right edge */
    z-index: 1001; /* Ensure it's above other content */
    cursor: pointer;
}
/* Style for the icon container */
.icon-txt {
    display: flex;
    align-items: center; /* Center-aligns the icon horizontally */
    justify-content: center; /* Center-aligns the icon vertically */
    background-color: white; /* White background */
    padding: 20px; /* Padding around the icon */
    border-radius: 30px; /* Optional: rounded corners */
    cursor: pointer; /* Change cursor to pointer */
    border-color:2px solid #007bff;
}

/* Style for the icon itself */
.icon-txt {
    font-size: 34px; /* Large icon size */
    color: rgb(104, 118, 250); /* Blue color for the icon */
}

/* Style for the dialog */
.dialog {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
    display: none; /* Hidden by default */
    align-items: center;
    justify-content: center;
}

/* Style for the dialog content */
.dialog-content {
    background: white;
    padding: 20px;
    border-radius: 8px;
    max-width: 500px;
    width: 90%;
    position: relative;
}

/* Style for the dialog title */
#dialogTitle {
    border-bottom: 5px solid blue; /* Sets a 5px solid blue border at the bottom */
    text-align: center; /* Center-aligns text */
    padding-bottom: 10px; /* Optional: space between text and border */
    margin-bottom: 20px; /* Optional: space below the border */
}

.details span a:hover{
      color: #007bff;
      font-weight: 700;
}
/* Style for the close button */
.close-btn {
    font-size: 34px;
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 10px;
    font-weight: 600;
}
.details
{
   font-weight: 400;
    font-size: large;
    font-family: 'Times New Roman', Times, serif;
    padding-top:7px;
    padding-left: 10px;
}

/*officee*/

.company {
    padding: 20px;
}

.dcs h1 {
    padding: 30px 0;
    text-align: center;
}

.container h1 {
    font-size: 2.5rem;
    margin-bottom: 20px;
    color: #333;
}
/* Flexbox container for image and text */
.office {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-top: 20px;
}

/* Image container styling */
.images {
    flex: 1;
    max-width: 100%;
    opacity: 0; /* Hide initially for animation */
    transform: translateX(-70px); /* Slide from the left */
     animation: slide-in 1s forwards 1s;
}

.images img {
    width: 100%;
    height: auto;
    display: block;
}

/* Text container styling */
.text {
    flex: 1;
    max-width: 50%;
    padding-right: 7px;
    opacity: 0; /* Hide initially for animation */
    transform: translateX(50px); /* Slide from the right */
    animation: slide-in 1s forwards 1s; /* Apply animation with delay */
    padding-top: 90px;
}

.text p {
    margin: 0; /* Remove default margin */
    font-size: 1.25rem;
}

/* Keyframes for slide-in animation */
@keyframes slide-in {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/*technical-capabilities */
.technical-capabilities {
    padding: 10px;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}
.container-2 h1 {
    font-size: 2.5rem;
    margin-bottom: 20px;
    color: #333;
}
.content {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.image-container {
    flex: 1;
    max-width: 100%;
    opacity: 0; /* Hide initially for animation */
    transform: translateY(-70px); /* Slide from the left */
     animation: slide-in 1s forwards 2s;
}

.image-container img {
    width: 100%;
    height: auto;
    display: block;
}

.text-container {
    flex: 1;
    max-width: 50%;
    padding-left: 20px; /* Add some space between image and text */
    opacity: 0; /* Hide initially for animation */
    transform: translateY(50px); /* Slide from the right */
    animation: slide-in 1s forwards 2.5s; /* Apply animation with delay */
}

.text-container p {
    margin: 0;
    font-size: 1.25rem;
}
/* Keyframes for slide-in animation */
@keyframes slide-in {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* Service Section */
.service {
    padding: 20px;
}

.header-2 {
    text-align: center;
    margin-bottom: 20px;
}

.header-2 h1 {
    font-size: 2.5rem;
    margin-bottom: 20px;
    color: #333;
}


.round-box {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Space between each round element */
    justify-content: center;
    padding: 10px 0; /* Consistent padding */
}

.round {
    flex: 1;
    max-width: 450px; /* Adjust as needed */
    min-width: 250px; /* Ensure minimum width for uniformity */
    position: relative;
    height: 300px; /* Fixed height for consistency */
    display: flex;
    align-items: center;
    justify-content: center;
    border: 5px solid #532dfc; /* Add a border, adjust width and color as needed */
}


.round-inner {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden; /* Ensure content doesn't overflow */
}

.round-font {
    background-color:rgb(100, 162, 255);;
    padding: 20px;
    cursor: pointer;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2; /* Ensure it's above .round-back */
    font-size: 2rem;
    color: #ffffff;
}

.round-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #eff2f3;
    padding: 20px;
    transform: translateY(100%); /* Hide below the .round-font */
    transition: transform 0.3s ease; /* Smooth transition */
    z-index: 1; /* Ensure it's below .round-font */
    display: flex;
    align-items: center;
    justify-content: center;
}

.round:hover .round-back {
    transform: translateY(0); /* Show when hovering */
}

.round-back p {
    margin: 0;
    font-size: 1rem;
    text-align: center; /* Center align text */
    line-height: 1.4; /* Improve readability */
    color: #0e0d0d; /* Ensure text is readable on background */
}

/*AWS Value Proposition */
  
.matter{
    margin-top: 30px;
    padding: 40px;
}
.matter h1 {
    font-size: 2.5rem;
    margin-bottom: 20px;
    color: #333;
}
.boxs{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-bottom: 30px;
}
.card {
    width: 550px;
    height: 250px;
    padding: 3px;
    margin: 10px;
    box-shadow: 3px 3px 3px rgb(7, 7, 8);
    text-align: center;
    background-color: #e0f4f7;
    transition: background-color 0.3s, transform 0.3s; /* Smooth transition for background and scaling */
    border: #050505;
}

.card:hover {
     color: #faf8f8;
    font-weight: bolder;
    font-size: large;
    background-color:rgb(90, 91, 92);;
}
.card:hover .card-header {
    color: #faf8f8;
   font-weight: bolder;
   font-size: large;
   background-color:rgb(97, 98, 100);;
}
.card:hover .pa {
    color: #faf8f8;
   padding-top: 50px;
   font-size:4rem;
   background-color:rgb(90, 91, 92);;
}
.card-header {
    color: #000000;
    font-size: 2rem;
    font-weight: bolder;
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: color 0.3s; /* Smooth transition for color change */
}

.card-header span i {
    margin-left: 10px;
    font-size: 4.75rem; /* Adjust icon size */
    color: #4144ec;
    transition: transform 0.3s, font-size 0.3s; /* Smooth transition for scaling and font size */
    border: #3e3f41;
}

.card:hover .card-header span i {
    transform: scale(1.5); /* Enlarge icons to 150% of their original size */
    font-size: 3.5rem; /* Optional: Increase font size if desired */
}


/*use cases*/

.use {
    background: url(../img/pics/user.jpg) no-repeat center center;
    background-size: cover;
    padding: 40px;
    min-height: 400px; /* Adjust as needed */
    text-align: center;
    background-color: #f8f9fa; /* Fallback color */
}

/* Header Styling */
.use h1 {
    font-size: 2.5rem;
    margin: 0 0 20px 0; /* Margin below heading */
    color: #333;
}

/* Flexbox Container for Squares */
.square-boxs {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping of squares if needed */
    gap: 20px; /* Space between each square */
    justify-content: center; /* Center align the squares horizontally */
    align-items: center;
}

/* Styling for Individual Squares */
.squares {
    width: 150px; /* Fixed width for each square */
    height: 200px; /* Fixed height to match width, adjust as needed */
    padding: 30px;
    background-color: #ffffff; /* White background for squares */
    border: 1px solid #ddd; /* Light border for definition */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    text-align: center; /* Center text horizontally */
    display: flex; /* Use Flexbox for alignment */
    flex-direction: column; /* Align children in a column */
    justify-content: center; /* Center content vertically */
    align-items: center; /* Center content horizontally */
    transition: transform 0.5s, box-shadow 0.5s; /* Smooth transition effects */
}

.squares:hover {
    transform: translateY(-10px); /* Slight lift on hover */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Deeper shadow on hover */
}


/* Header inside square boxes */
.heads {
    font-size: 1.25rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

/* Icon styling */
.heads span i {
    margin-right: 10px;
    color: #007bff; /* Primary color for icons */
    font-size: 1.5rem; /* Adjust icon size */
}

/* Body text inside square boxes */
.lines {
    font-size: 1rem;
    color: #555;
}


/*Characteristics & Profiles of Target Customers */

.cards {
    padding-top: 30px;
    font-size: 2rem;
    display: flex; /* Make sure this is added to apply flex styling */
    justify-content: center;
}

.cards p {
    font-size: 1rem;
}

.box {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 30px;
    padding: 30px;
}

/* Individual Box */
.box-1 {
    width: 350px; /* Adjust width as needed */
    margin: 10px;
    box-shadow: 3px 3px 3px rgb(7, 7, 8);
    background-color: #f5feff;
    padding: 20px;
    text-align: center;
    border-radius: 8px; /* Optional: Rounded corners */
    transition: background-color 0.3s; /* Smooth transition */
    animation: autoHover 6s infinite; /* Apply automatic hover effect */
    animation-delay: var(--animation-delay); /* Apply staggered delay */
}

/* Animation Definition */
@keyframes autoHover {
    0% {
        background-color: #f5feff; /* Initial background color */
    }
    50% {
        background-color: #4a93e6; /* Background color halfway through animation */
    }
    100% {
        background-color: #f5feff; /* Return to initial background color */
    }
}

/* Staggered Effect */
.box-1:nth-child(1) {
    --animation-delay: 0s;
}
.box-1:nth-child(2) {
    --animation-delay: 1.5s;
}
.box-1:nth-child(3) {
    --animation-delay: 2.5s;
}
.box-1:nth-child(4) {
    --animation-delay: 3.8s;
}
.box-1:nth-child(5) {
    --animation-delay: 5s;
}

.sub-head {
    font-size: 1.8rem;
    font-weight: bolder;
    color: #050505;
    margin-bottom: 10px; /* Space between header and body */
    border-bottom: 2px solid #ffffff; /* Line between header and body */
    padding-bottom: 10px; /* Space for line */
}

.sub-body {
    font-size: 1rem;
    color: #1f1c1c;
}


/* Customer Engagement & Delivery Mechanisms Section */
.ticks {
    padding: 40px;
    text-align: center;
    background-color: #9fb5ca; /* Light background color for contrast */
    padding-bottom: 30px;
}

.ticks h1 {
    font-size: 2.5rem;
    margin-bottom: 20px;
    color: #333;
}

.ticks p {
    font-size: 1rem;
    margin-bottom: 30px;
    color: #666;
}

/* Container for all square boxes */
.square-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px; /* Space between boxes */
}


.square {
    width: 250px; /* Fixed width */
    height: 200px; /* Fixed height to match width, adjust as needed */
    padding: 50px;
    background-color: #ffffff; /* White background for squares */
    border: 1px solid #ddd; /* Light border for definition */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    text-align: center; /* Center text horizontally */
    display: flex; /* Use Flexbox for alignment */
    flex-direction: column; /* Align children in a column */
    justify-content: center; /* Center content vertically */
    align-items: center; /* Center content horizontally */
    transition: transform 0.5s, box-shadow 0.5s; /* Smooth transition effects */
    margin:5px;

}
.square:hover {
    transform: translateY(10px); /* Slight lift on hover */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Deeper shadow on hover */
}

.head {
    font-size: 1.5rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

/* Icon styling */
.head span i {
    margin-right: 10px;
    color: #007bff; /* Primary color for icons */
    font-size: 1.5rem; /* Adjust icon size */
}

/* Body text inside square boxes */
.line {
    font-size: 1rem;
    color: #555;
}


/* Footer Styles */
#footer {
    background-color: #464545;
    color: #ffffff; /* Ensure text is readable on dark background */
    margin-top: 20px;
}

.footer-top {
    padding: 20px 0;
    border-bottom: 1px solid #6c757d; /* Optional: Adds a border for separation */
}

.footer-contact {
    padding: 0 15px; /* Add some horizontal padding */
    text-align: center; /* Center-align text within footer-contact */
}

.footer-contact p, .footer-contact h4 {
    margin: 0;
    color: #ffffff; /* Ensure text color contrasts with the background */
}

.dcs img {
    max-height: 100px; /* Adjust size as needed */
    width: auto; /* Maintain aspect ratio */
    display: block; /* Ensure image does not have extra space below */
    margin: 0 auto; /* Center image horizontally */
}

.row {
    display: flex;
    flex-wrap: wrap; /* Ensure columns stack on smaller screens */
    justify-content: center; /* Center columns within the row */
}

.col-lg-3, .col-md-6 {
    margin-bottom: 20px; /* Add space between columns */
    flex: 1 0 200px; /* Ensure columns are flexible and can wrap if needed */
    max-width: 300px; /* Limit the max width of each column */
}

.container-1 {
    width: 90%; /* Adjust container width */
    max-width: 1200px; /* Set a max-width for larger screens */
    margin: 0 auto; /* Center align the container */
}

.py-4 {
    padding-top: 1.5rem; /* Padding for top */
    padding-bottom: 1.5rem; /* Padding for bottom */
}

.copyright {
    font-size: 0.875rem; /* Smaller font size for copyright text */
    color: #ffffff; /* Ensure text color contrasts with the background */
    text-align: center; /* Center-align copyright text */
}
a {
    color: white;
}

a:hover {
    color: #66a3ff;
}

/* Responsive Design */
@media (max-width: 767px) {
    .footer-top {
        text-align: center; /* Center-align text on small screens */
    }

    .row {
        justify-content: center; /* Center columns on small screens */
    }
}
@media (max-width: 767px) {
    .banner-text h2 {
        font-size: 2.5rem; /* Smaller font size for headers */
    }

    .office, .content, .round-box, .square-box {
        flex-direction: column; /* Stack items vertically */
    }

    .images, .text, .image-container, .text-container, .squares {
        width: 100%; /* Full width on small screens */
    }

    .text-container, .box-1 {
        padding: 10px; /* Adjust padding for smaller screens */
    }

    .footer-contact {
        text-align: center; /* Center-align text */
    }

    .row {
        justify-content: center; /* Center columns */
    }
}

@media (max-width: 576px) {
    .banner-text h2 {
        font-size: 2rem; /* Even smaller font size for very small screens */
    }

    .banner-text {
        padding: 10px; /* Reduce padding */
    }

    .aws-pic {
        width: 100%; /* Ensure AWS image fits on small screens */
        margin-left: 0; /* Remove margin */
    }

    .office, .content, .round-box, .square-box {
        padding: 0; /* Remove padding */
    }

    .squares {
        width: 90%; /* Adjust square width */
    }

    .text-container, .box-1 {
        padding: 5px; /* Further reduce padding */
    }

    .footer-contact {
        font-size: 0.875rem; /* Smaller font size for footer */
    }
}