.custom-cursor__cursor {
    width: 25px;
    height: 25px;
    border-radius: 100%;
    border: 1px solid #FFA500;
    /* Bright orange */
    position: fixed;
    pointer-events: none;
    transform: translate(-50%, -50%);
    z-index: 999991;
    transition: all 200ms ease-out;
}

.custom-cursor__cursor-two {
    width: 10px;
    height: 10px;
    border-radius: 100%;
    border: 1px solid #FFA500;
    opacity: 0.3;
    position: fixed;
    transform: translate(-50%, -50%);
    pointer-events: none;
    transition: width 0.3s, height 0.3s, opacity 0.3s;
    z-index: 999991;
}

/* Additional styles for hover effects */
.custom-cursor__hover {
    border: 1px solid #FFA500;
    opacity: 0.4;
}

.custom-cursor__innerhover {
    width: 25px;
    height: 25px;
    opacity: 0.4;
}

.single-service-cap {
    margin: 15px;
    /* Adjust the value as needed */
}

.services-section {
    position: relative;
    width: 100%;
    height: 100vh;
    /* Full viewport height */
    padding: 60px 0;
    /* Adjust as needed */
    background-color: #f9f9f9;
    /* Fallback background color */
    overflow: hidden;
    /* Prevent overflow */
}

.pattern-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 1;
    /* Behind the content */
}

.auto-container {
    position: relative;
    /* For z-index stacking */
    z-index: 2;
    /* Above the pattern layer */
    max-width: 1200px;
    /* Maximum width */
    margin: 0 auto;
    /* Centering */
    padding: 0 20px;
    /* Responsive padding */
    height: 100%;
    /* Ensure container fills full height */
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Center the content vertically */
}

/* Section Title */
.sec-title {
    text-align: center;
    /* Center align the title */
    margin-bottom: 40px;
    /* Space below the title */
}

.sec-title .title {
    font-size: 24px;
    /* Size for the title */
    color: #ff5f13;
    /* Title color */
}

.sec-title h2 {
    font-size: 30px;
    /* Size for the heading */
    color: #333;
    /* Heading color */
}

/* Service Block */

.service-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 200px;
    /* Adjust the height of each block */
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    margin: 15px;
    /* Space between blocks */
    flex: 1 1 200px;
    /* Allow flexibility in sizing */
}

.service-block:hover {
    transform: translateY(-5px);
    /* Slight lift effect on hover */
}

.icon-box {
    font-size: 60px;
    /* Increase icon size */
    color: #ff5f13;
    /* Change to desired icon color */
    margin-bottom: 15px;
    /* Space between icon and title */
}

h5 {
    font-size: 18px;
    /* Adjust title size */
    margin: 10px 0;
    /* Space above and below title */
}

/* Responsive Styles */
@media (max-width: 768px) {
    .service-block {
        height: auto;
        /* Allow height to adjust based on content */
    }

    .sec-title h2 {
        font-size: 24px;
        /* Smaller heading on mobile */
    }

    .sec-title .title {
        font-size: 20px;
        /* Smaller title on mobile */
    }
}

.card {
position: relative;
width: 100%;
max-width: 250px; /* Ensures cards don't stretch too wide on larger screens */
height: 270px; /* Card height */
background: rgba(255, 255, 255, 0.05);
box-shadow: 0 15px 35px rgba(153, 93, 3, 0.507);
border-radius: 15px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
backdrop-filter: blur(40px);
border: solid 2px transparent;
background-clip: padding-box;
box-shadow: 0px 10px 10px rgba(187, 87, 5, 0.301);
margin: 20px 20px 20px 20px;
}

/* Project container responsive adjustments */
.project-caption {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: -0.5em;
}

.row {
display: flex;
justify-content: center; /* Center items horizontally */
flex-wrap: wrap; /* Allow items to wrap */
}

.col-lg-3,
.col-md-3,
.col-sm-6,
.col-12 {   
display: flex; /* Allow flexbox on columns */
justify-content: center; /* Center the cards in each column */
align-items: center; /* Center items vertically */
padding: 0.2em; /* Reduced padding to decrease space */
flex: 1 0 200px; /* Flex-grow to ensure columns are flexible */
}

@media (max-width: 768px) {
.col-sm-6, 
.col-12 {
flex: 0 0 100%; /* On mobile, make columns take full width */
max-width: 100%; /* Ensure max width is 100% */
}
}

.content {
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
opacity: 0.5;
transition: 0.5s;
}

/* Image container styling */
.img {
position: relative;
width: 100px; /* Reduced width for better scaling */
height: 100px; /* Reduced height for better scaling */
border-radius: 50%;
overflow: hidden;
border: 8px solid rgba(255, 147, 7, 0.836); /* Adjust border size */
display: flex;
justify-content: center;
align-items: center;
}

.img img {
display: block;
max-width: 100%;
max-height: 100%;
object-fit: cover;
object-position: center;
}

/* Card content styling */
.cardContent {
text-align: center;
}

.cardContent h3 {
color: #0a0000;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 500;
font-size: 14px; /* Reduced font size */
margin: 10px 0 5px; /* Reduced margin */
line-height: 1.1em;
}

.cardContent h3 span {
font-size: 10px;
font-weight: 300;
text-transform: initial;
}

/* Social icons */
.sci {
position: absolute;
bottom: 30px; /* Adjusted to fit the new card size */
display: flex;
justify-content: center;
align-items: center;
}

.sci li {
margin: 0 5px; /* Reduced margin between icons */
transform: translateY(40px);
opacity: 0;
transition: 0.5s;
transition-delay: calc(0.1s * var(--i));
}

.sci li a {
font-size: 18px; /* Reduced font size */
}

/* Hover effects */
.card:hover .content {
opacity: 1;
transform: translateY(-20px);
}

.card:hover .sci li {
transform: translateY(0px);
opacity: 1;
}

/* Responsive adjustments for tablets */
@media (max-width: 768px) {
.card {
margin: 0.5em;
width: 90%; /* Allow card to scale on smaller screens */
max-width: 220px; /* Slightly reduce card width on mobile */
}

.img {
width: 90px; /* Further reduce image size */
height: 90px;
border: 6px solid rgba(255, 147, 7, 0.836);
}

.cardContent h3 {
font-size: 12px; /* Reduce font size on mobile */
}

.sci {
bottom: 20px; /* Adjust position of icons */
}

.sci li a {
font-size: 16px; /* Reduce icon size on mobile */
}
}

/* Responsive adjustments for mobile phones */
@media (max-width: 576px) {
.card {
width: 100%;
max-width: 200px; /* Adjust width to fit smaller screens */
height: auto; /* Allow the card to adjust its height */
}

.img {
width: 80px; /* Further reduce image size */
height: 80px;
border: 5px solid rgba(255, 147, 7, 0.836); /* Reduce border size */
}

.cardContent h3 {
font-size: 10px; /* Reduce font size further */
}

.cardContent h3 span {
font-size: 8px; /* Reduce span font size */
}

.sci {
bottom: 15px; /* Adjust icon position on mobile */
}

.sci li a {
font-size: 14px; /* Further reduce icon size */
}
}

.technology-section {
position: relative;
background: url(images/background/1.jpg) no-repeat center center;
background-size: cover;
overflow: hidden;
background-position: center;
padding: 50px 20px;
}

.pattern-layer-one,
.pattern-layer-two {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-size: cover;
pointer-events: none;
}

.pattern-layer-one {
background-image: url(images/background/pattern-5.png);
opacity: 0.5;
}

.pattern-layer-two {
background-image: url(images/background/pattern-6.png);
opacity: 0.5;
}

.auto-container {
position: relative;
z-index: 1;
}

.sec-title {
text-align: center;
margin-bottom: 40px;
}

.sec-title h2 {
color: #0f0400; /* Coral color for title */
font-size: 2.5em;
text-transform: uppercase;
margin: 0;
animation: fadeIn 1s ease-in-out;
display: flex;
flex-wrap: wrap;
justify-content: center;
}


.technology-block {
position: relative;
margin: 15px;
animation: slideIn 0.5s ease forwards;
opacity: 0; /* Initial opacity for fade-in effect */
}

.technology-block:nth-child(1) { animation-delay: 0.1s; }
.technology-block:nth-child(2) { animation-delay: 0.2s; }
.technology-block:nth-child(3) { animation-delay: 0.3s; }
.technology-block:nth-child(4) { animation-delay: 0.4s; }
.technology-block:nth-child(5) { animation-delay: 0.5s; }
.technology-block:nth-child(6) { animation-delay: 0.6s; }
.technology-block:nth-child(7) { animation-delay: 0.7s; }
.technology-block:nth-child(8) { animation-delay: 0.8s; }
.technology-block:nth-child(9) { animation-delay: 0.9s; }
.technology-block:nth-child(10) { animation-delay: 1s; }
.technology-block:nth-child(11) { animation-delay: 1.1s; }
.technology-block:nth-child(12) { animation-delay: 1.2s; }

.inner-box {
background: rgba(255, 255, 255, 0.1); /* Semi-transparent white for glass effect */
padding: 20px;
border-radius: 15px; /* Increased border-radius for a smoother look */
text-align: center;
position: relative;
overflow: hidden;
transition: transform 0.3s, background 0.3s;
backdrop-filter: blur(15px); /* Glass effect */
border: 2px solid rgba(255, 127, 80, 0.5); /* Orange border */
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); /* Subtle shadow for depth */
}

.inner-box:hover {
transform: translateY(-10px);
background: rgba(255, 127, 80, 0.3); /* Light coral on hover */
}

.process {
font-size: 30px;
color: #fff;
background: rgba(0, 0, 0, 0.5);
border-radius: 50%;
width: 40px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 10px;
left: 10px;
}

.icon img {
width: 50px; /* Adjust as necessary */
}

h6 {
color: #FF7F50; /* Coral color for text */
margin-top: 60px; /* Space from icon */
font-size: 1.1em;
font-weight: bold; /* Bold font for headings */
text-transform: uppercase; /* Uppercase for emphasis */
}

.overlay-link {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
transition: background 0.3s; /* Smooth transition for overlay */
}

.overlay-link:hover {
background: rgba(255, 127, 80, 0.2); /* Light coral on hover for overlay */
}

@keyframes slideIn {
from {
transform: translateY(50px);
opacity: 0; /* Initial opacity */
}
to {
transform: translateY(0);
opacity: 1; /* Final opacity */
}
}

@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

.glassIco {
--width: 100px; /* Set width for icons */
box-sizing: border-box;
transition: 200ms;
width: var(--width);
height: var(--width);
color: #fff;
font-size: 30px;
border-radius: 5px;
background: rgba(255, 255, 255, 0.05); /* Glass effect background */
backdrop-filter: blur(2px); /* Glass effect */
border: 1px solid rgba(255, 255, 255, 0.2); /* Semi-transparent border */
border-right-color: rgba(255, 255, 255, 0.1); /* Lighter right border */
border-bottom-color: rgba(255, 255, 255, 0.1); /* Lighter bottom border */
box-shadow: 0 20px 30px rgba(0, 0, 0, 0.1); /* Shadow for depth */
margin: 20px;
overflow: hidden;
display: flex; /* Flexbox for centering */
justify-content: center;
align-items: center;
position: relative;
}

.glassIco:before {
content: "";
position: absolute;
display: block;
width: 50%; /* Width of the skewed background */
height: 100%; /* Full height */
background: rgba(255, 255, 255, 0.5); /* White background */
filter: blur(0px); /* No blur */
transition: 400ms; /* Smooth transition */
transform: skewX(45deg) translateX(calc(var(--width) + 50%)); /* Initial position */
}

.glassIco:hover {
transform: translateY(-20px); /* Move up on hover */
}

.glassIco:hover:before {
transform: skewX(45deg) translateX(calc(var(--width) * -1 - 50%)); /* Move skewed background */
}

.glassIco > * {
opacity: 0.8; /* Slight opacity for content */
}   


/* General container */
.ag-format-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}

body {
background-color: #000;
font-family: Arial, sans-serif;
}

/* Courses box container */
.ag-courses_box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding: 50px 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
}

/* Individual course item (now 6 cards per row) */
.ag-courses_item {
-ms-flex-preferred-size: calc(16.66667% - 20px); /* Six items per row */
flex-basis: calc(16.66667% - 20px);
margin: 0 10px 30px;
overflow: hidden;
border-radius: 28px;
background: #fff;
border-radius: 10px;
overflow: hidden;
text-align: center;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Course item link */
.ag-courses-item_link {
display: block;
padding: 30px 20px;
background-color: #121212;
overflow: hidden;
position: relative;
text-align: center;
}

/* Hover effects */
.ag-courses-item_link:hover,
.ag-courses-item_link:hover .ag-courses-item_date {
text-decoration: none;
color: #FFF;
}

.ag-courses-item_link:hover .ag-courses-item_bg {
-webkit-transform: scale(10);
-ms-transform: scale(10);
transform: scale(10);
}

/* Title of the course */
.ag-courses-item_title {
min-height: 30px;
margin: 0 0 0px;
overflow: hidden;
font-weight: bold;
font-size: 30px;
color: #FFF;
z-index: 2;
position: relative;
}

/* Date box */
.ag-courses-item_date-box {
font-size: 14px;
color: #FFF;
z-index: 2;
position: relative;
}

.ag-courses-item_date {
font-weight: bold;
color: #f9b234;
-webkit-transition: color .5s ease;
-o-transition: color .5s ease;
transition: color .5s ease;
}

/* Round background shape in each card */
.ag-courses-item_bg {
height: 128px;
width: 128px;
background-color: #f9b234;
z-index: 1;
position: absolute;
top: -75px;
right: -75px;
border-radius: 50%;
-webkit-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}

/* Dynamic background colors for each card */
.ag-courses_item:nth-child(2n) .ag-courses-item_bg {
background-color: #3ecd5e;
}

.ag-courses_item:nth-child(3n) .ag-courses-item_bg {
background-color: #e44002;
}

.ag-courses_item:nth-child(4n) .ag-courses-item_bg {
background-color: #952aff;
}

.ag-courses_item:nth-child(5n) .ag-courses-item_bg {
background-color: #cd3e94;
}

.ag-courses_item:nth-child(6n) .ag-courses-item_bg {
background-color: #4c49ea;
}

.ag-courses_item:nth-child(7n) .ag-courses-item_bg {
background-color: #3ecd5e;
}

.ag-courses_item:nth-child(8n) .ag-courses-item_bg {
background-color: #f9b234;
}

.ag-courses_item:nth-child(9n) .ag-courses-item_bg {
background-color: #e44002;
}

.ag-courses_item:nth-child(10n) .ag-courses-item_bg {
background-color: #952aff;
}

.ag-courses_item:nth-child(11n) .ag-courses-item_bg {
background-color: #cd3e94;
}

.ag-courses_item:nth-child(12n) .ag-courses-item_bg {
background-color: #4c49ea;
}

/* Round image styling */
.ag-courses-item_image {
width: 80px; /* Set image width */
height: 80px; /* Set image height */
border-radius: 50%; /* Makes the image round */
object-fit: cover; /* Ensures the image maintains aspect ratio */
margin-bottom: 15px; /* Space between image and title */
display: block;
margin-left: auto;
margin-right: auto;
}

/* Responsive adjustments */

/* For screens below 979px, display 4 cards per row */
@media only screen and (max-width: 979px) {
.ag-courses_item {
-ms-flex-preferred-size: calc(25% - 30px);
flex-basis: calc(25% - 30px);
}
.ag-courses-item_title {
font-size: 24px;
}
}

@media (max-width: 768px) {
.ag-courses_item {
width: 100%; /* Full width, one card per row */
margin: 10px 0; /* Margin for spacing between cards */
}
}

/* For screens below 639px, display 1 card per row */
@media only screen and (max-width: 639px) {
.ag-courses_item {
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
}
.ag-courses-item_title {
font-size: 24px;
}
.ag-courses-item_link {
padding: 22px 40px;
}
.ag-courses-item_date-box {
font-size: 16px;
}
}
.single-slider {
min-height: 900px;
background-repeat: no-repeat;
background-image: url('assets/img/hero/about.png'); /* Fallback for data-background */
background-size: cover;
background-position: center;
}