.modal-busy{
	display: none;
	position: fixed;
	z-index: 999;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	background-color: black;
	filter: alpha(opacity=60);
	opacity: 0.6;
	-moz-opacity: 0.8;
}

.center-busy{
	z-index: 1000;
	margin: 300px auto;
	padding: 0px;
	width: 130px;
	filter: alpha(opacity=100);
	opacity: 1;
	-moz-opacity: 1;
}

.center-busy img{
	height: 80px;
	width: 80px;
}

.download-video iframe {
	width: 100%;
	height: 370px;
}







/*
 * Homepage Event List Redesign (Based on grid.html)
 * -------------------------------------------------- 
*/

/* 1. The Masonry Container */
.card-columns {
    column-count: 3; /* Forces 3 columns on large screens */
    column-gap: 3rem;
}

/* 2. Mobile Responsiveness */
@media (max-width: 768px) {
    .card-columns {
        column-count: 2; /* 2 columns on tablet */
    }
}
@media (max-width: 576px) {
    .card-columns {
        column-count: 1; /* 1 column on phone */
    }
}

/* 3. Card Styling */
.event-grid-item.card {
    border: none; /* Removes default border */
    border-radius: 0; /* Sharp corners */
    margin-bottom: 3rem;
    background: #fff;
    
    /* --- MODIFIED LINE --- */
    /* I've made the shadow darker and more spread out for better separation */
    box-shadow: 0 4px 12px rgba(0,0,0,0.1); 
    
    /* Fix for CSS Columns cutting cards in half */
    display: inline-block;
    width: 100%;

    /* --- HOVER ANIMATION (from previous step) --- */
    transition: all 0.3s ease-in-out; 
}

/* --- HOVER ANIMATION (from previous step) --- */
.event-grid-item.card:hover {
    transform: translateY(-5px); /* Lifts the card up slightly */
    box-shadow: 0 8px 20px rgba(0,0,0,0.15); /* Makes the shadow more pronounced */
}


.event-grid-item .card-body {
    padding: 15px;
}


/* --- START: NEW IMAGE SHINE EFFECT --- */
.event-image-wrapper {
    position: relative; /* Container for the overlay */
    overflow: hidden; /* This clips the shine effect */
    display: block;
    border-radius: 0;
}

/* The "shine" element using ::after */
.event-image-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    width: 50%; /* Width of the shine */
    height: 100%;
    
    /* The shine gradient */
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.3) 50%, /* Shine color/opacity */
        rgba(255, 255, 255, 0) 100%
    );
    
    /* Start position: hidden on the left */
    left: -100%;
    
    /* Skew the shine */
    transform: skewX(-25deg);
    
    /* Animation speed */
    transition: left 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* The hover trigger */
/* When hovering the card, move the shine element across */
.event-grid-item.card:hover .event-image-wrapper::after {
    left: 150%; /* End position: off the right */
}
/* --- END: NEW IMAGE SHINE EFFECT --- */


/* 4. Text Typography */
.project-name {
    font-size: 14px;
    font-weight: 600; /* Bold */
    margin-bottom: 4px;
    line-height: 1.4;
}
.project-name a {
    color: #333;
    text-decoration: none;
    font-size: 18px;
}
.project-name a:hover {
    color: #{{ $setting->front_end_color }}; /* Uses theme color */
}

.client-info {
    font-size: 16px;
    color: #666;
    margin-bottom: 5px;
}
.client-info i {
    color: #{{ $setting->front_end_color }}; /* Uses theme color */
    margin-right: 4px;
}

.event-location {
    font-size: 16px;
    color: #666;
    margin-bottom: 5px;
}
.event-location i {
    color: #{{ $setting->front_end_color }}; /* Uses theme color */
    margin-right: 4px;
}

.event-date {
    font-size: 16px;
    color: #666;
    /*margin-top: 8px; /* Added a small space above the date */
}
.event-date i {
    color: #{{ $setting->front_end_color }}; /* Uses theme color */
    margin-right: 4px;
}



/*
 * START: Assignment 6 - Event Detail Gallery Styles
 * -------------------------------------------------- 
*/

/* Improved Hover Effect */
        
        #thumbnail-carousel .item a {
            display: block;
            border-radius: 8px;
            overflow: hidden;
            border: 1px solid #eee; 
            box-shadow: 0 3px 6px rgba(0,0,0,0.05); 
            transition: all 0.25s ease-in-out; 
            position: relative; 
        }
        #thumbnail-carousel .item img {
            height: 180px;
            width: 100%;
            object-fit: cover; 
            transition: all 0.25s ease-in-out; 
            border-radius: 8px; 
        }
        #thumbnail-carousel .item a:hover {
            cursor: zoom-in;
            box-shadow: 0 8px 20px rgba(0,0,0,0.12);
            transform: scale(1.03) translateY(-3px); 
            border-color: #ddd; 
        }
        #thumbnail-carousel .item a:hover img {
            filter: brightness(1.05); 
        }


        /* --- Elegant Event-Theme Arrow Styles (Matches Screenshot) --- */

        #thumbnail-carousel.owl-carousel {
            position: relative; 
            padding: 30px 0;
        }

        #thumbnail-carousel .owl-nav .owl-prev {
            left: 0;
        }

        #thumbnail-carousel .owl-nav .owl-next{
            right: 0;
        } 

        #thumbnail-carousel .owl-nav .owl-prev,
        #thumbnail-carousel .owl-nav .owl-next {
            position: absolute !important; 
            top: 50% !important;
            transform: translateY(-50%) !important;
            z-index: 10;
            background: rgba(0, 0, 0, 0.4) !important; 
            color: #fff !important; 
            width: 45px;
            height: 45px;
            padding: 0 !important; 
            margin: 0 !important; 
            border-radius: 50% !important;
            border: none !important; 
            box-shadow: none !important; 
            transition: all 0.3s ease !important;
            display: flex !important;
            align-items: center;
            justify-content: center;
        }


        #thumbnail-carousel .owl-nav .owl-prev:hover, 
        #thumbnail-carousel .owl-nav .owl-next:hover,
        #thumbnail-carousel .owl-nav .owl-prev:active, 
        #thumbnail-carousel .owl-nav .owl-next:active,
        #thumbnail-carousel .owl-nav .owl-prev:focus, 
        #thumbnail-carousel .owl-nav .owl-next:focus {
            background: rgba(0, 0, 0, 0.8) !important; 
            color: #fff !important;
            box-shadow: none !important;
            outline: none !important; 
            transform: translateY(-50%) scale(1.05) !important; 
        }

        #thumbnail-carousel .owl-nav .owl-prev span,
        #thumbnail-carousel .owl-nav .owl-next span {
            font-size: 32px !important;    
            line-height: 1;                
            position: relative;
            top: -2px; 
        }
        #thumbnail-carousel .owl-nav .owl-prev span { left: -1px; }
        #thumbnail-carousel .owl-nav .owl-next span { left: 1px; }
/*
 * END: Assignment 6 Styles
 * -------------------------------------------------- 
*/

/*
============================================================
MODIFICATION START: Assignment 7 - Client Box Styles
============================================================
*/

/*
       * --------------------------------------------------
       * CLIENT LOGO STYLES (Updated)
       * --------------------------------------------------
       */

      /* New wrapper for the link */
      .client-item-wrapper {
          display: block;
          text-decoration: none;
          color: #555;
          transition: color 0.3s ease;
      }
      .client-item-wrapper:hover {
          text-decoration: none;
          color: #111; /* Darken text on hover */
      }

      /* The main box for each logo */
      .client-logo-box {
          background-color: #ffffff;
          border: 1px solid #e9e9e9;
          border-radius: 8px; /* Rounded corners */
          transition: all 0.3s ease-in-out;
          text-align: center;
          overflow: hidden; /* Ensures image zoom stays contained */
          padding: 30px 15px; /* Generous spacing */
          margin-bottom: 15px; /* Space between box and name */
      }

      /* This adds the 'lift' and 'shadow' effect on hover */
      .client-item-wrapper:hover .client-logo-box {
          box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
          transform: translateY(-5px);
          border-color: #ddd;
      }

      /* Styling the logo image */
      .client-logo-box img {
          /* Grayscale by default */
          filter: grayscale(100%);
          opacity: 0.7;
          transition: all 0.3s ease-in-out;
          
          /* max-height removed as requested */
          width: auto;
          max-width: 100%;
      }

      /* This is the hover effect: remove gray filter and zoom */
      .client-item-wrapper:hover .client-logo-box img {
          /* Full color on hover */
          filter: grayscale(0%);
          opacity: 1;
          transform: scale(1.05);
      }

      /* Styling the client name text */
      .client-name {
          font-size: 1rem;
          font-weight: 600;
          margin-bottom: 0;
          text-align: center; /* Center the name */
          /* Color is inherited from the <a> tag */
      }

/*
============================================================
MODIFICATION END: Assignment 7
============================================================
*/

@media only screen and (max-width: 992px) {
    .main-menu  {
        display: none !important;
    }
}



/*
============================================================
Service Page
============================================================
*/

 /* Section Background */
        .services-section {
            background-color: #f9f9f9;
            padding: 80px 0;
            font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
        }

        /* Section Title Styling */
        .section-title {
            position: relative;
            margin-bottom: 60px;
            font-weight: 700;
            color: #333;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        
        /* The green underline under the title */
        .section-title::after {
            content: '';
            display: block;
            width: 60px;
            height: 3px;
            background: #376FD1; /* Matches the green in your logo */
            margin-top: 15px;
        }

        /* CARD STYLING */
        .service-card {
            background: #fff;
            border: none;
            border-radius: 8px;
            padding: 30px 20px;
            height: 100%; /* Makes all cards equal height */
            transition: all 0.3s ease;
            border-bottom: 3px solid transparent; /* Hidden border for hover effect */
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
        }

        /* Hover Effect: Lift up and show green border */
        .service-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0,0,0,0.1);
            border-bottom: 3px solid #376FD1;
        }

        /* Icon Styling */
        .icon-wrapper {
            width: 60px;
            height: 60px;
            background: rgba(139, 195, 74, 0.1); /* Light green background */
            color: #376FD1;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            margin-bottom: 20px;
            transition: all 0.3s ease;
        }

        .service-card:hover .icon-wrapper {
            background: #376FD1;
            color: #fff;
        }

        .category-title {
            font-weight: 700;
            margin-bottom: 20px;
            font-size: 1.1rem;
            color: #333;
        }

        /* List Styling */
        .service-list li {
            position: relative;
            padding-left: 15px;
            margin-bottom: 8px;
            font-size: 0.9rem;
            color: #666;
            line-height: 1.5;
        }

        /* Custom Bullet Point (Green Dash) */
        .service-list li::before {
            content: '-';
            position: absolute;
            left: 0;
            color: #376FD1;
            font-weight: bold;
        }
        
/*
============================================================
Service Page Close
============================================================
*/



/*
============================================================
About Page
============================================================
*/

.about-section h2 {
            font-weight: 700;
            color: #333;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 1rem;
        }

        .text-green {
            color: #376FD1 !important;
        }

        /* --- SECTION 1: ABOUT US (Keep existing) --- */
        .about-section {
            padding: 80px 0;
            background-color: #fff;
        }

        .about-img-holder {
            position: relative;
            padding-bottom: 20px;
            padding-right: 20px;
        }
        
        .about-img {
            width: 100%;
            border-radius: 4px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            position: relative;
            z-index: 2;
        }

        .about-img-holder::before {
            content: '';
            position: absolute;
            bottom: 0;
            right: 0;
            width: 80%;
            height: 80%;
            background-color: #376FD1;
            z-index: 1;
            border-radius: 4px;
        }

        .about-content-box {
            padding: 20px;
            background: #fff;
            border-left: 4px solid #376FD1;
            margin-bottom: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            transition: transform 0.3s;
        }

        .about-content-box:hover {
            transform: translateX(10px);
            border-left-width: 8px;
        }

        .about-content-box h4 {
            font-weight: 700;
            color: #333;
            font-size: 1.2rem;
        }

        /* --- SECTION 2: WHAT WE DO (NEW SLIDE REPLICA) --- */
        .process-section {
            background-color: #f4f4f4; /* Slightly darker to make white boxes pop */
            padding: 100px 0;
            text-align: center;
        }

        /* The Content Text Area */
        .process-text-area {
            margin-bottom: 20px;
            min-height: 140px; /* Ensures alignment even if text length varies */
            padding: 0 10px;
        }

        .process-title {
            font-weight: 700;
            color: #333;
            font-size: 1.1rem;
            margin-bottom: 10px;
        }

        .process-desc {
            font-size: 0.85rem;
            color: #666;
            line-height: 1.5;
        }

        /* The Dark Arch Segment (The Number Box) */
        .arch-segment {
            background-color: #333; /* Dark grey matching slide */
            color: #fff;
            height: 120px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2.5rem;
            font-weight: 700;
            box-shadow: 0 10px 20px rgba(0,0,0,0.2);
            transition: all 0.3s ease;
            position: relative;
            border: 2px solid #444;
        }

        .arch-segment:hover {
            background-color: #376FD1; /* Green on hover */
            border-color: #376FD1;
            transform: scale(1.05);
        }

        /* Custom Shapes to mimic the Arc segments */
        /* Segment 1: Rounded Left */
        .segment-1 {
            border-top-left-radius: 60px;
            border-bottom-left-radius: 10px;
            border-top-right-radius: 10px;
            border-bottom-right-radius: 10px;
        }
        /* Segment 2 & 3: Keystones (Rounded Top) */
        .segment-2, .segment-3 {
            border-top-left-radius: 40px;
            border-top-right-radius: 40px;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
        }
        /* Segment 4: Rounded Right */
        .segment-4 {
            border-top-right-radius: 60px;
            border-bottom-right-radius: 10px;
            border-top-left-radius: 10px;
            border-bottom-left-radius: 10px;
        }

        /* ARCH LAYOUT LOGIC 
           Push columns 1 and 4 down to create the curve 
        */
        @media (min-width: 992px) {
            .arch-col-low {
                margin-top: 80px; /* Pushes outer columns down */
            }
            .arch-col-high {
                margin-top: 0px; /* Keeps inner columns up */
                margin-bottom: 80px; /* Spacer */
            }
            
            /* Add connectors */
            .process-row {
                position: relative;
            }
        }

        /* Mobile Adjustments */
        @media (max-width: 991px) {
            .arch-col-low, .arch-col-high {
                margin-top: 0;
                margin-bottom: 40px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
            }
            .arch-segment {
                height: 80px;
                border-radius: 10px !important; /* Reset fancy shapes on mobile */
            }
            .process-text-area {
                min-height: auto;
            }
        }
        
        
/*
============================================================
About Page Close
============================================================
*/

/*Footer*/

.footer-item img {
    width: auto;
    height: 65px;
}

.dev-text p {
    text-align: left !important;
}