/* Importing Poppins font from Google Fonts  */
@import url('https://fonts.googleapis.com/css2?family=Poppins: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,700&display=swap');

/* Using root to define CSS variables for colors and font sizes, allowing for easy updates throughout the stylesheet */
:root {
    --gelos-gold: rgb(221, 171, 94);
    --gelos-bronze: rgb(160, 132, 99);
    --add-color-bronze:rgb(101,83,62);
    --gelos-charcoal: rgb(66, 71, 84);
    --gelos-blue: rgb(7, 122, 153);
    --add-color-blue:rgb(13,98,119);
    --gelos-blue-tint: rgb(148, 178, 191);
    --gelos-gold-shade:rgb(208,139,32);
    --gelos-gold-tint:rgb(238,231,174);
    --seccesfull-color:rgb(9, 165, 69);
    --add-color-blue-tint:rgb(78,111,126);
    --gelos-black: rgb(0, 0, 0);
    --gelos-white: rgb(255, 255, 255);
    --gelos-button:rgba(237, 22, 22, 0.902);
    --gelos-button-hover:rgb(176, 9, 9);
    --primary-color:rgb(253, 248, 239);   
    --successful-color: rgb(13, 212, 86);

    /* Font sizes defined as variables for easy adjustment */
    --font-size-h1: 44px;
    --font-size-h2: 36px;
    --font-size-h3: 24px;
    --font-size-h4: 22px;
   
    --font-size-body: 20px;
    --font-size-footer: 18px;

    /* Specifying font families for headings and body text */
    --add-font-family-title:'Poppins', 'Georgia', serif;
    --font-family-heading: 'Georgia', serif; 
    --font-family-body: 'Calibri', sans-serif;
}

/* Universal selector to apply box-sizing, padding, and margin resets */
*,
*::after,
*::before {
   /* Ensures padding and borders are included in total width and height */
   box-sizing: border-box; 
    /* Resets default padding */
    padding: 0; 
    /* Resets default margin */
    margin: 0;
   /* Removes default list styles */
   list-style: none;
    /* Removes default text decorations */
    text-decoration: none;
}

/* Enabling smooth scrolling for a better user experience */
html {
    scroll-behavior: smooth;
}

/* Body styling to set font and color */
body {
    font-family: var(--font-family-body); /* Applies body font */
    color: var(--gelos-black); /* Sets text color */
}

/* Main content container with a maximum width 1280px*/
.main-content {
    max-width: 1280px; /* Restricts content width for better readability */
    margin: 0;
    padding: 0;
}

/* Keyframes for background color animation */
@keyframes change-bgcolor {
    0% {
        background-color: var(--gelos-charcoal); /* Start color */
    }
    25% {
        background-color: var(--gelos-charcoal); /* Midway color */
    }
    50% {
        background-color: var(--add-color-bronze); /* Transition color */
    }
    75% {
        background-color: var(--add-color-bronze); /* Midway color */
    }
    100% {
        background-color: var(--gelos-charcoal); /* End color */
    }
}

/* Styling for heading elements */
h1 {
    font-family: var(--add-font-family-title); /* Applies heading font */
    font-size: var(--font-size-h1); /* Uses defined font size */
    
    
}

h2 {
    font-family: var(--font-family-heading); /* Applies heading font */
    font-size: var(--font-size-h2); /* Uses defined font size */
    
   
} 

h3 {
    font-family: var(--font-family-heading); /* Applies heading font */
    font-size: var(--font-size-h3); /* Uses defined font size */
    
    
} 



/* Skip link for accessibility */
header .skip-link {
    position: absolute; /* Positions the link */
    top: 30px; /* Places it at the top */
    left: 380px; /* Positions it horizontally */
    background: var(--gelos-black); /* Sets background color */
    color: var(--gelos-white); /* Sets text color */
    padding: 10px; /* Adds padding for touch targets */
    z-index: 10009; /* Ensures it appears above other content */
    border-bottom: 2px solid var(--gelos-gold); /* Decorative border */
    border-right: 2px solid var(--gelos-gold); /* Decorative border */
}

/* Change cursor on hover for skip link */
.skip-link:hover {
    cursor: pointer; /* Indicates the link is interactive */
    border-radius: 8px;
}



/* Navbar styles */
nav {
    height: 105px; /* Set height for the navbar */
    background: var(--gelos-charcoal); /* Background color from variable */
    border-bottom: 4px double var(--gelos-gold); /* Double border for visual separation */
    border-radius: 0 0 30px 30px; /* Rounded corners at the bottom */
    padding: 6px; /* Padding for internal spacing */
    position: fixed; /* Fixed position to stay on screen during scroll */
    width: 100%; /* Full width of the viewport */
    top: 10px; /* Distance from the top of the viewport */
    left: 0; /* Align to the left */
    z-index: 10000; /* High z-index to appear above other content */
    animation: change-bgcolor 10s infinite ease-in; /* Animation for background color change */
}

/* Logo image styling within the navbar */
header nav img {
    width: 160px; /* Set logo width */
    height: 50px; /* Set logo height */
    padding: 4px; /* Padding around the image */
    position: absolute; /* Positioning within the navbar */
    background-color: var(--gelos-white); /* White background for contrast */
    border-radius: 5px; /* Slightly rounded corners */
    cursor: pointer; /* Pointer cursor on hover */
    top: 20px; /* Position from the top */
    left: 20px; /* Position from the left */
    animation: bordered 5s infinite; /* Animation for the border effect */
}

/* Change background color on hover for the logo */
header nav img:hover {
    background-color: var(--gelos-blue-tint); /* Change background color on hover */
}

/* Keyframes for animated border effect on the logo */
@keyframes bordered {
    0% {
        border-bottom: 3px solid var(--gelos-black); /* Initial border color */
        border-right: 3px solid var(--gelos-black)
    }
   
   
    100% {
        border-bottom: 3px solid var(--gelos-gold-shade); /* Final border color */
        border-right: 3px solid var(--gelos-gold-shade);
    }
}

/* Styles for the navigation list to appear on the right */
nav ul {
    float: right; /* Aligns the list to the right */
    margin-right: 20px; /* Right margin */
    margin-bottom: 5px; /* Bottom margin */
}

/* List items within the navigation */
nav ul li {
    display: inline-block; /* Inline display for horizontal alignment */
    line-height: 20px; /* Line height for spacing */
    margin: 30px 5px; /* Margins around each item */
}

/* Styles for anchor links in the navigation */
nav ul li a {
    position: relative; /* Positioning for pseudo-elements */
    color: var(--gelos-white); /* Text color */
    font-size: var(--font-size-h3); /* Font size from variable */
    padding: 6px; /* Internal padding */
    text-transform: uppercase; /* Uppercase text */
}

/* Underline effect for links */
nav ul li a::before {
    position: absolute; /* Absolute positioning */
    content: ''; /* Empty content for pseudo-element */
    left: 0; /* Align to the left */
    bottom: -8px; /* Position below the text */
    height: 3px; /* Height of the underline */
    width: 100%; /* Full width */
    background: var(--gelos-gold); /* Color of the underline */
    transform: scaleX(0); /* Start hidden */
    transform-origin: right; /* Origin for scaling */
    transition: transform .4s linear; /* Smooth transition */
}

/* Animation for underline on hover */
nav ul li a:hover:before {
    transform: scaleX(1.05); /* Expand underline */
    transform-origin: left; /* Change origin to left */
}

/* Styles for search input */
.search-container input {
    height: 35px; /* Height of the input */
    border-radius: 10px; /* Rounded corners */
    padding-left: 7px; /* Padding for text */
}

/* Styles for search button */
.search-container form button {
    color: var(--gelos-white); /* Text color */
    background-color: var(--gelos-black); /* Background color */
    padding: 7px; /* Internal padding */
    border-radius: 6px; /* Rounded corners */
    border-bottom: 2px solid var(--gelos-gold); /* Bottom border */
    border-right: 2px solid var(--gelos-gold); /* Right border */
    cursor: pointer; /* Pointer cursor on hover */
}

/* Change background color on hover for search button */
.search-container form button:hover {
    background-color: var(--gelos-blue-tint); /* Change color on hover */
}

/* hide text  in the label that add to humburger menu Hamburger menu icon and close icon*/
.hide-text {
    display: none;
}


/* Styling for humburger menu Hamburger menu icon in label */
label #btn,
label #cancel {
    color: var(--gelos-white); /* Text color */
    font-size: 40px; /* Font size */
    float: right; /* Float to the right */
    line-height: 80px; /* Line height for vertical centering */
    margin-right: 50px; /* Right margin */
    cursor: pointer; /* Pointer cursor */
    display: none; /* Initially hidden */
}

#check {
    display: none; /* Hidden checkbox for toggle functionality */
}

/* 

^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   
                Responsive menu

 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^               

*/

/* Responsive header styles */



@media (max-width: 860px) {

    /* on Tablets size the style for navigation list  */
    ul {
        position: fixed; /* Fixed positioning for the menu */
        
        width: 70%; /* Set width */
        background: var(--gelos-blue); /* Background color */
        border-radius: 20px; /* Rounded corners */
        box-shadow: -2px 4px 6px rgba(0, 0, 0, 0.84); /* Shadow effect */
        border-right: 2px solid var(--gelos-gold); /* Right border */
        top: 110px; /* Positioning */
        left: -100%; /* Off-screen initially */
        padding-bottom: 10px;
        text-align: center; /* Centered text */
       
        transition: all .5s; /* Smooth transition for opening */
    }
    nav ul li {
        display: block; /* Stack items vertically */
        margin: 30px 0; /* Vertical margins */
        padding: 5px; /* Padding for items */
        line-height: 2.6; /* Line height for spacing */
    }
    nav ul li a{
        font-size: 29px;
        
    }
    
    /* Toggle button functionality  the humberger icon will show*/
    label #btn {
        display: block; /* Show toggle button */
        
    }
    #check:checked ~ ul {
        left: 0; /* Show menu when checked */
    }
    #check:checked ~ label #btn {
        display: none; /* Hide toggle button */
    }
    #check:checked ~ label #cancel {
        display: block; /* Show cancel button */
        
    }
    .skip-link{
        font-size: 20px;
    }


    .fa-search {
        font-size: 25px; /* Adjust font size for search icon */
        padding: 7px; /* Padding for icon */
    }
    .search-container input {
        height: 55px; /* Increase height for input */
        width: 280px; /* Set width for input */
        margin-bottom: 5px; /* Bottom margin */
    }
}

/* style for small screen mobile */

@media (max-width: 480px) {
   
    ul {
        
        
        width: 80%; /* Set width */
        margin-left: 3px;
        margin-top: 5px;
       
    }
  
    nav ul li {
       
        line-height: 1.2; /* Adjust line height */
    }
    .menu-icon {
        display: block; /* Show menu icon */
    }
    header .skip-link {
        margin-top: 70px; /* Adjust position for skip link */
      left: 260px; /* Adjust position for skip link */
    }
    nav ul li a {
        font-size: 22px; /* Adjust font size */
    }
   header label #btn,
    header label #cancel {
        color: var(--gelos-white); /* Text color */
        font-size: 30px; /* Font size */
       left: -180px; /* Right margin */
    }
    .fa-search {
        font-size: 20px; /* Adjust font size for search icon */
        padding: 5px; /* Padding for icon */
    }
    .search-container input {
        height: 40px; /* Increase height for input */
        width: 180px; /* Set width for input */
        margin-bottom: 5px; /* Bottom margin */
    }
}



/* 

%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
   
                Section1 style

%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%               

*/



/* Section 1 carousel styles */
.container {
    max-width: 1280px; /* Maximum width of the container */
    margin: auto; /* Center container */
    margin-bottom: 50px; /* Bottom margin add extra space to the top to display the radio buttons for navigate through the slides */
}

#main-content {
    margin-top: 150px; /* Space above main content */

}

/* Carousel styling which contain the slides */
.carousel {
    position: relative; /* Positioning for child elements */
    height: 600px; /* Height of the carousel */
    width: 100%; /* Full width */
    top: 2rem; /* Position from top */
         
    overflow: hidden;/* Hide overflow*/
    background-color: var(--gelos-black); /* Background color  for the top slides*/
    border-radius: 10px; /* Rounded corners */
    box-shadow: -2px 4px 6px 0 rgba(0,0,0,0.84); /* Shadow effect */
}

/* Slides container */
.slides {
    position: relative; /* Relative positioning for slides */
    display: flex; /* Flex layout for slides */
    top: 1rem; /* Positioning from top */
   padding-top: 30px;
   justify-content: start;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
}

/* Individual slide styles */
.slide {
    flex: 1; /* Flex property for equal sizing */
    min-width: 100%; /* Minimum width */
    background-size: cover; /* Cover background */
    background-position: center; /* Center background */
    position: relative; /* Positioning context */
    background-repeat: no-repeat; /* No repeating */
  
}

/* Specific slide backgrounds */
.slide:nth-of-type(1) {
    background-image: url('../images/hero_bg.jpg'); /* Background image for first slide */
}

.slide:nth-of-type(2) {
    background-image: url('../images/hero02.jpg'); /* Background image for second slide */
}


/* Content overlay styles */
.content {
    position: absolute; /* Absolute positioning */
  
    padding: 20px; /* Padding for content */

    height: 55vh; /* Height of content */
    left: 90px; /* Position from left */
    top: 90px; /* Position from top */
    right:290px; /* Position from right */
    border-radius: 20px; /* Rounded corners */
    color: var(--gelos-white); /* Text color */
    background-color: var(--gelos-charcoal); /* Background color */
    opacity: 0.93; /* Slight transparency */
    z-index: 20; /* Layering above other elements  to display above the image on the slide*/
}

/* Welcome title styles */
h1.welcome-title {
    
    font-weight: 600; /* Bold font */
    font-family: var(--add-font-family-title); /* Font family */
    color: var(--gelos-white); /* Text color */
    text-align: center; /* Center text */
    margin-bottom: 1rem; /* Bottom margin */
    margin-top: 0.1rem; /* Top margin */
    padding-top: 20px;
    text-transform: capitalize; /* Capitalize text */
    line-height: 1.5; /* Line height */
    letter-spacing: 2px; /* Spacing between letters */
    text-shadow: 0 2px 0 var(--gelos-gold), 2px 1px 0 rgba(255,255,255,0.6); /* Shadow effect */
}

/* Body text styles */
p, .body-text {
    font-family: var(--font-family-body); /* Font family */
    font-size: var(--font-size-h3); /* Font size */
    margin-bottom: 5px; /* Bottom margin */
    padding: 10px;
    line-height: 1.5; /* Line height */
    
}

/* Button styles */
.button {
    display: inline-block; /* Inline block display */
    padding: 10px 20px; /* Padding for button */
    font-size: var(--font-size-h3); /* Font size */
    color: var(--gelos-white); /* Text color */
    background-color: var(--gelos-button); /* Background color */
    border: none; /* No border */
    border-radius: 5px; /* Rounded corners */
    border-bottom: 2px solid var(--gelos-gold); /* Bottom border */
    border-right: 2px solid var(--gelos-gold); /* Right border */
    text-decoration: none; /* No underline */
    margin-top: 30px; /* Top margin */
    margin-left: 50px; /* Left margin */
}

/* Hover effect for buttons */
.button:hover {
    background-color: var(--gelos-button-hover); /* Change background on hover */
}

/* Arrow styles for navigation between the slides */
.arrow {
    position: absolute; /* Absolute positioning */
    padding: 15px;
    top: 60px; /* Center vertically */
    font-size: 24px; /* Font size */
    color: var(--gelos-white); /* Text color */
    border-radius: 5px; /* Rounded corners */
    border-bottom: 2px solid var(--gelos-gold); /* Bottom border */
    border-right: 2px solid var(--gelos-gold); /* Right border */
    cursor: pointer; /* Pointer cursor */
    text-decoration: none; /* No underline */
    transform: translateY(-50%); /* Center vertically */
    z-index: 10; /* Layering */
}

.arrow-left {
   left: 20px; /* Position left arrow */
}

.arrow-right {
    right:50px; /* Position right arrow */
}

/* Carousel button container styles */
.carousel-buttons {
    position: absolute; /* Absolute positioning */
    top: 260px; /* Center vertically */
    width: 100%; /* Full width */
    display: flex; /* Flexbox for layout */
    justify-content: space-between; /* Space between buttons */
    transform: translateY(-40%); /* Adjust vertical position */
    z-index: 100; /* Layering */
}


/* Style for radio buttons  on the top of the slides*/
.carousel input[type="radio"] {
    width: 20px;  /* Minimum touch target size */
    height: 20px;
    /* margin-right: 10px; Add spacing between elements */
    margin-top: 20px;
 
}

.radio1{
    transform: translateX(20px); 
}
.radio2{
    transform: translateX(60px);

}


/* Add hover or focus effects for visibility */
input[type="radio"]:focus, .arrow-up:focus, a:focus {
    outline: 2px solid var(--gelos-blue);  /* Visible outline when focused */
}

/* Button label styles */
.carousel-buttons label {
    background: var(--gelos-charcoal); /* Background color */
    color: var(--gelos-white); /* Text color */
    font-size: 24px; /* Font size */
    padding: 10px; /* Padding */
    cursor: pointer; /* Pointer cursor */
    z-index: 10; /* Layering to display on the top slide*/
}

/* Hover effect for button labels */
.carousel-buttons label:hover {
    background: var(--gelos-black); /* Change background on hover */
}



/* Transform slides based on checked radio button */

#slide1:checked ~ .slides {
    transform: translateX(0%); /* Show first slide */
}

#slide2:checked ~ .slides {
    transform: translateX(-100%); /* Show second slide */
}



/* 

^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   
                Responsive section1

 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^               

*/
/* Responsive styles for section 1 */



@media (max-width: 860px) {
    .carousel{
       height:  80vh;
    }
    .content {
        width: 700px; /* Set width */
        height: 45vh; /* Adjust height */
       
        left: 70px;
    }
    p, .body-text {
        font-size: 24px; /* Decrease font size */
    }
   
}



@media (max-width: 480px) {
    .main-content {
        margin-right: 5px;
    }
    .container{
        margin-left: 5px;
       
        
      
       
    }
    p, .body-text {
        display: none; /* Hide body text */
    }
    .content h1.welcome-title {
        padding: 5px;
        padding-top: 15px; /* Top padding */
        
        font-size: 1.7rem; /* Decrease font size */
        font-weight: 300; /* Decrease font weight */
        margin-bottom: 3px; /* Bottom margin */
    }
    .carousel {
        width: 100%; /* Decrease width */
        height: 100vh; /* Full height */
       

    }
    .slides{
       margin: 0;

       
        
    }
    .content {
        
        height: 43vh; /* Increase height */
        width: 320px; /* Set width */
        padding: 8px; /* Padding */
       margin-left: -25px;

    }
    .carousel-buttons {
        margin-top: 250px; /* Top margin */
    }
}


/* end section 1 */







    /* General section styles */
section {
    margin-bottom: 60px; /* Space below each section */
    margin-top: 100px; /* Space above each section */
}

section h2{
    color: var(--gelos-white); /* Text color */
    background-color: var(--add-color-blue); /* Background color */
    /*  use custom shape */
      clip-path: polygon(0% 15%, 15% 15%, 15% 0%, 85% 0%, 85% 15%, 100% 15%, 100% 85%, 85% 85%, 85% 100%, 15% 100%, 15% 85%, 0% 85%); /* Custom shape */
    border: 3px solid var(--gelos-gold); /* Border color */
    padding: 50px;
    margin-bottom: 50px;
}




/* 

%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
   
             Style section2

 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%              

*/
/* Styles for section headings */
 .section2 h2, .section3 h2   {
    font-size: var(--font-size-h2);
    font-weight: 600; /* Bold font */
   padding: 120px;
   padding-right: 0;
   margin-right: -80px;
   padding-left: 35rem;
   
    line-height: 1.2; /* Line height for readability */
    margin-bottom: 100px; /* Bottom margin */
   
}

/* Span within section heading */
section h2 span {
    color: var(--gelos-gold); /* Span text color */
    padding-left: 3px;
}

/* Offering content section styles */
.offering-content {
    display: flex; /* Flexbox layout */
    flex-direction: row; /* Row direction for items */
    padding: 70px; /* Padding for content */
    background-color: var(--primary-color); /* Background color */
}

/* Image styles in the offering section */
.image-offfering-section  {
    width: 600px !important; /* Fixed width */
    height: 400px;
    margin-left: 100px; /* Left margin */
    clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%); /* Custom shape */
    border: 3px solid var(--gelos-gold); /* Border color */
    /* display the animation */
    animation: changeBgImageSection2 10s infinite ease-in-out; 
}
/* create animation to change the background images */
@keyframes changeBgImageSection2 {
    0% {
        background-image: url('../images/DigitalTransformation_600_400.jpg');
    }
    50%{
        background-image: url('../images/CloudServices_600_400.jpg');
    }
    100%{
        background-image: url('../images/artificialIntelligence_600_400.jpg');
    }
    
}



/* Accordion styles */
.accordion {
    max-width: 600px; /* Max width for accordion */
    margin-left: 0px; /* Left margin */
    padding: 20px; /* Padding for accordion */
    padding-top: 20px; /* Additional top padding */
    border: 2px solid var(--gelos-gold); /* Border color */
}


/* Accordion button styles */
.accordion-button {
    display: flex; /* Flexbox layout */
    justify-content: space-between; /* Space between items */
    align-items: center; /* Center align items */
    background-color: var(--gelos-blue-tint); /* Background color */
    padding: 15px; /* Padding for button */
    border: 1px solid var(--gelos-gold-tint); /* Border color */
    cursor: pointer; /* Pointer cursor */
    font-size: 26px; /* Font size */
}
.accordion-content ol li{
    font-size: 20px;
   
    line-height: 1.4;
}

/* Accordion content styles */
.accordion-content {
    max-height: 0; /* Initial hidden state */
    overflow: hidden; /* Hide overflow */
    
    padding: 0 15px; /* Padding for content */
    border-left: 1px solid var(--gelos-charcoal); /* Left border */
    border-right: 1px solid var(--gelos-charcoal); /* Right border */
    border-bottom: 1px solid var(--gelos-charcoal); /* Bottom border */
}

/* Icon styling for accordion button */
.accordion-button::after {
    content: '+'; /* Plus icon */
    font-size: 26px; /* Icon size */
    color: var(--gelos-black); /* Icon color */
}

/* Change icon when accordion is expanded to - */
input[type="checkbox"]:checked + label::after {
    content: '−'; /* Minus icon */
}

/* Show accordion content when checked  with max hieght 1000px*/
input[type="checkbox"]:checked + label + .accordion-content {
    max-height: 1000px; 
    padding: 15px; /* Padding when expanded */
}

/* Hide the button - in the defualt   */
input[type="checkbox"] {
    display: none; /* Hide checkbox */
}
.accordion-button{
    display: flex;
    flex-direction: row;

}


/* add icon style  */
.accordion-button img{
    width: 50px;
    height: 50px;
    border: 3px double var(--gelos-gold-shade);
    border-radius: 20%;
    padding: 3px;
   
    background-color: var(--gelos-white);


}
.accordion-button:hover img{
    transform: scale(1.1);
    background-color: var(--gelos-gold-tint);
    border: 4px double var(--gelos-blue);

}



/* 
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^


Responsive styles for section 2 

^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

*/
@media(max-width:860px) {
   .section2 h2{
    padding-left: 20rem;
   }
    .offering-content {
        flex-direction: column; /* Stack items vertically */
        padding-left: 20px; /* Adjust padding */
    }
    .accordion-conten p{
        font-size: 18px; /* Adjust font size */

    }

    .accordion {
        margin-left: 70px; /* Left margin for accordion */
        margin-top: 10px; /* Top margin */
       
    }

    .accordion label{
        font-size: 24px; /* Adjust font size */
    }
    .accordion-button::after {
        
        font-size: 30px; /* Icon size */
       
    }
}
/* style small mobile */
@media(max-width:480px) {
    .section2{
        margin-top: 20px;
        margin-bottom:10px;
        margin-left: -50px;
        padding: 50px;
    }
    
    .section2 h2 {
        font-size: 26px;
      
     
            padding-left: 90px; /* Further adjust left padding */
            margin-bottom: 25px; /* Bottom margin */
  
            padding-top: 25px;
            padding-bottom: 25px;
            margin-right: -60px;
        }

    .offering-content {
        width: 440px; /* Set width */
    }

    .image-offfering-section {
        clip-path: polygon(0px 0px, 385px 0px, 350px 100px, 385px 200px, 0px 200px); /* Custom shape */
        margin-left: -10px; /* Negative left margin */
        margin-bottom: -120px;
        /* width: 380px; Set width */
        /* height: 70vh; Set height */
    }

    .accordion {
        margin-left: -10px; /* Negative left margin */
        width: 370px; /* Set width */
        
    }
    .accordion p{
        display: block;
    }
}






/*
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&

Styles for Section 3 

&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&

*/
.section3 {
    margin-top: 120px; /* Top margin for spacing */
    margin-bottom: 50px; /* Bottom margin for spacing */
    align-items: center; /* Center-align items */
    justify-content: center; /* Center-justify content */
}




/* Styles for section heading with a span */
.section3 h2 span {
    color: var(--gelos-white); /* Text color for the span */
    
    /* animation: color-change 5s infinite linear; */ /* Commented out animation */
}

/* Styles for the main heading in Section 3 */
.section3 h2 {
    background-color: var(--add-color-blue-tint); /* Background color for the heading */
    border: 3px solid var(--gelos-gold-shade); /* Initial border */
    
    color: var(--gelos-black); /* Text color for the span */

    font-size: var(--font-size-h2);
    font-weight: 600; /* Bold font */
   padding: 120px;
   padding-right: 0;
   margin-right: -80px;
   padding-left: 40rem;
   
    line-height: 1.2; /* Line height for readability */
    margin-bottom: 100px; /* Bottom margin */
   
}




/* Styles for the values grid layout  ( display background image) */
.values-grid {
  background-image: url('../images/companyValue.jpg');
  /* display background color in case the image fail to load */
  background-color: var(--gelos-charcoal);
  background-size: cover; /* Cover background */
  background-position: center; /* Center background */
  position: relative; /* Positioning context */
  background-repeat: no-repeat; /* No repeating */
   height: 100vh;
   width: 100%;
}



/* Styles for the container of value items */
.all-values-item {
    /* position: relative; Relative positioning */
    display: grid; /* Use grid layout */
    grid-template-columns: repeat(3, 1fr); /* Three-column layout */
    /* justify-content:space-between; */
    align-items: center;
  
   height: 100%;
   gap: 5px; /* Gap between columns */
    /* left: -190px; Move to the right */
    
}

/* Styles for individual value items */
.value-item {
  
    position: relative; /* Relative positioning */
    width: 280px; /* Set width */
    height: 290px; /* Set height */
     /* Move down */
     top: 60px;
   
    /* Move left */
    left: 100px;
    padding: 15px; /* Padding inside the item */
     /* Background color */
     background-color: var(--add-color-blue-tint);
    border-radius: 20px; /* Rounded corners */
    box-shadow: -2px 4px 6px rgba(0,0,0,0.84); /* Box shadow for depth */
    transition: all 0.5s ease; /* Smooth transition */
}


.value-item:hover {

    width: 290px; /* Set width */
    height: 360px; /* Set height */

}
/* Styles for headings inside value items */
.value-item h3 {
    color: var(--gelos-white); /* Text color */
    margin-bottom: -280px; /* Negative margin for positioning */
    padding-left: 50px; /* Padding on left */
    font-size: var(--font-size-h3); /* Font size */
    font-weight: 600; /* Font weight */
}

/* Initially hide paragraph text in value items */
.value-item p {
    display: none; /* Hidden by default */
}

/* Show paragraph text on hover */
.value-item:hover p {
    margin-top: 250px; /* Position on hover */
    display: block; /* Make it visible */
    padding-left: 8px; /* Padding */
    padding-right: 8px; /* Padding */
  
}

/* Adjust heading position on hover */
.value-item:hover h3 {
    margin-top: -100px; /* Adjust position */
    padding-bottom: 30px; /* Bottom padding */
}

/* Styles for images in value items with clipping */
.value-item img {
    clip-path: polygon(0% 15%, 15% 15%, 15% 0%, 85% 0%, 85% 15%, 100% 15%, 100% 85%, 85% 85%, 85% 100%, 15% 100%, 15% 85%, 0% 85%); /* Custom shape */
    width: 120px; /* Set width */
    height: 120px; /* Set height */
    background-color: var(--gelos-gold-tint);
    margin-left: 50px; /* Left margin */
    margin-top: 45px; /* Top margin */
    border: 6px solid var(--gelos-blue); /* Border color */
    transition: all 0.1s ease; /* Smooth transition */
}

/* Image hover effect */
.value-item:hover img {
    transform: translateY(-110px); /* Move image up on hover */
    
    border: 3px solid var(--gelos-gold); /* Change border color */
}

/*

^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
Responsive styles for Section 3 


 Breakpoints for responsive design 

^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
*/



@media(max-width:860px) {
    .all-values-item {
        grid-template-columns: repeat(2, 1fr); /* Two-column layout */
        grid-template-rows: 1fr 1fr; /* Two-row layout */
      
    left: 30px;
    padding-bottom: 8px;
   
       
    }
   
    
    #values-heading{
        font-size: 32px; /* Adjust font size */
            
    }
   
    
  .value-item h3{
    font-size: 30px;
  }
 
    
}

/* style for small screen */

@media(max-width:480px) {
   .values-grid{
    padding: 0;
    padding-bottom: 80px;
   bottom: -20px;
   top: 70px;

   
   }
    .section3 h2 {
        font-size: 22px;
        padding-left: 90px; /* Further adjust left padding */
        margin-bottom: 25px; 
     
        padding-top: 35px;
        padding-bottom: 35px;
        margin-right: 0px;
    }
    .all-values-item {
        grid-template-columns: 1fr; /* Single-column layout */
        grid-template-rows: 1fr 1fr 1fr; /* Three rows */
        row-gap: 8px; /* Gap between rows */
        margin-left: -10px; /* Adjust position */
   
    }
   
    .value-item {
       margin-top: 5px; /* Adjust top margin */
        width: 280px; /* Adjust width */
        height: 200px; /* Adjust height */
    }
    .value-item:hover {
   
        width: 220px;
        height: 200px;
        margin-bottom: -15px;
        
      }
    .value-item img {
     
       margin-left: 15px; /* Adjust left margin */
        margin-top: 15px; /* Adjust top margin */
    }
    
   .value-item:hover  img{
    transform: translateY(-50px);
    margin-left: 35px; /* Adjust left margin */
    background-color: var(--gelos-white);

   
  }
  /* hide the paragraph on small screen */
    .value-item:hover p{
   
            display: none; 
         }  
        
   
      
  
      .value-item h3{
        transform: rotate(-90deg); /* Rotate the title */
        margin-top: 15px;
        margin-left: 180px;
        font-size: 24px;
      }
      
      .value-item:hover h3 {
        transform: rotate(0deg); /* reRotate the title to make it straight */
       margin-top: -25px;     
       margin-left: -10px;
       
   }
   
      
     

      
   

   

}



 


/* End of Section 3 Styles */







/* 
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

            Styles for Section 4 


%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
*/
.section4 {
    padding-top: 60px;
    padding-bottom: 80px;
    margin-top: 150px;
     /* Padding around the section */
    background-color: var(--gelos-gold-tint); /* Background color */
    display: flex; /* Use flexbox layout */
    justify-content: center; /* Center content horizontally */
    flex-wrap: wrap; /* Allow wrapping of items */
}

/* Container for contact content */
.contact-content {
    display: flex; /* Use flexbox layout */
    justify-content: space-between; /* Space out columns */
    flex-wrap: wrap; /* Allow wrapping */
    max-width: 1200px; /* Max width for larger screens */
    width: 100%; /* Full width until max-width is reached */
    margin-left: 10px; /* Left margin for spacing */
}

/* Styles for contact details and form */
.contact-details, .contact-form {
    width: 48%; /* Each column takes up 48% of width */
    margin-bottom: 20px; /* Bottom margin for spacing */
    margin-top: 20px;
    padding-top: 120px;
}

/* Styles for contact details section */
.contact-details {
    background-color: var(--gelos-white); /* Background color */
    padding: 20px; /* Padding inside */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Box shadow for depth */
}
.contact-details h2{
    margin-top: 20px;
    margin-left: -20px;
    margin-right: -20px;
 
}
address{
    margin-top: 20px;
    
}
address p{
    font-size: var(--font-family-body);
    padding-top: 2px;
    margin-top: -25px;
}

/* Button styles */
.contact-details .button {
 
    padding: 10px 20px; /* Padding for button */
    font-size: 16px; /* Font size */
    color: var(--gelos-white); /* Text color */
    background-color: var(--gelos-button); /* Background color */
   
    border-radius: 5px; /* Rounded corners */
    border-bottom: 2px solid var(--gelos-gold); /* Bottom border */
    border-right: 2px solid var(--gelos-gold); /* Right border */
    text-decoration: none; /* No underline */
   
    margin-left: 20px; /* Left margin */
}

/* Hover effect for buttons */
.contact-details .button:hover {
    background-color: var(--gelos-button-hover); /* Change background on hover */
}



/* Styles for contact form section */
.contact-form {
    background-color: var(--gelos-white); /* Background color */
    padding-left: 30px; /* Left padding */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Box shadow for depth */
}


/* Styles for the contact */
#contact-form {
    margin-top: -50px; /* Negative top margin */
    margin-bottom: 20px; /* Bottom margin */
   margin-right: 120px;
   
}

/* Styles for form labels */
.contact-form label {
    display: block; /* Display labels as block elements */
    margin-bottom: 5px; /* Bottom margin for spacing */
}

/* Styles for form inputs and text areas */
.contact-form input,
.contact-form textarea {
    width: 100%; /* Full width */
    padding: 10px; /* Padding inside */
    margin-bottom: 15px; /* Bottom margin */
    border: 1px solid var(--gelos-blue-tint); /* Border styling  */
    border-radius: 4px; /* Rounded corners */
}

/* Styles for form submit button the default*/
.contact-form button {
    padding: 10px 20px; /* Padding */
    background-color: var(--gelos-button); /* Background color */
    color: var(--gelos-white); /* Text color */
    border-radius: 5px; /* Rounded corners */
    border-bottom: 2px solid var(--gelos-gold); /* Bottom border */
    border-right: 2px solid var(--gelos-gold); /* Right border */
    cursor: pointer; /* Pointer cursor */
    margin-top: 20px; /* Top margin */
}

/* Button hover effect */
.contact-form button:hover {
    background-color: var(--gelos-button-hover); /* Change background on hover */
}

/* Styles for embedded map iframe */
.map iframe {
    width: 100%; /* Full width */
    height: 250px; /* Fixed height */
    border: 0; /* No border */
    padding: 20px; /* Padding around iframe */
}

/* Styles for contact details and form sections */
.contact-details, .contact-form {
    width: 48%; /* Two columns */
    margin-bottom: 20px; /* Bottom margin */
    box-sizing: border-box; /* Include padding/margin in width */
}
.contact-details h2{
    padding-left: 150px;
}
/* style contact form  title*/
.contact-form  h2 {
    padding-left: 150px;
    margin-top: -75px;
    margin-left: -30px;
    margin-right: -5px;
}



#contact-form{
    margin-top: 50px;
}
/* Form labels */
.contact-form label {
    display: block; /* Block display */
    margin: 10px 0 5px; /* Margins for spacing */
}

/* Responsive form inputs */
.contact-form input, .contact-form textarea {
    width: 100%; /* Full width */
    padding: 8px; /* Padding */
    margin-bottom: 10px; /* Bottom margin */
    border: 1px solid var(--gelos-bronze); /* Border styling */
    border-radius: 4px; /* Rounded corners */
}

/* Validation styles for inputs */
.contact-form input:invalid, .contact-form textarea:invalid {
    border-color: var(--gelos-button); /* Border color for invalid inputs */
}

.contact-form input:valid, .contact-form textarea:valid {
    border-color: var(--seccesfull-color); /* Border color for valid inputs */
}

/* Focus styles for valid inputs */
.contact-form input:valid:focus, .contact-form textarea:valid:focus {
    border-color:var(--seccesfull-color); /* Border color on focus */
}

/* Focus styles for invalid inputs */
.contact-form input:invalid:focus, .contact-form textarea:invalid:focus {
    border-color: var(--gelos-button); /* Border color on focus */
}

/* Error message styling */
.contact-form .form-error {
    display: none; /* Hidden by default */
    color: var(--gelos-button); /* Error text color */
    font-weight: bold; /* Bold text */
}



/* Message for invalid form submission */
#contact-form:invalid:after {
    content: "Enter the complete details."; /* Message content */
    display: block; /* Display as block */
    color: var(--gelos-button); /* Error text color */
    font-weight: bold; /* Bold text */
    margin-top: 10px; /* Top margin */
}

/* Success message for valid form submission */
#contact-form:valid:after {
    content: "Form successfully Filled!"; /* Message content */
    display: block; /* Display as block */
    color: var(--seccesfull-color); /* Success text color */
    font-weight: bold; /* Bold text */
    margin-top: 20px; /* Top margin */
}




/* 
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

Responsive styles for Section 4 

^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

*/




@media (max-width: 860px) {
    /* Single column layout below 860px */
    .section4 {
        flex-direction: column; /* Stack columns vertically */
        padding: 1px; /* Adjust padding */
        margin-left: -15px;

    }

    .section4 h2{
        
        padding-left: 21rem;
        margin-left: -30px;
 
        font-size: 29px;
    }
    .contact-details, .contact-form {
        width: 100%; /* Full width for columns */
        margin-bottom: 20px; /* Bottom margin */
        
    }

    #contact-form {
        width: 60%;
        padding-bottom: 100px;
        padding-left: 20px;
        font-size: 24px;
    }
    .contact-form button {
        width: 30%; /* Button width */
        padding: 8px; /* Adjust padding */
        font-size: 20px;
        padding-top: 15px;
        padding-bottom: 15px;
        margin-top: 12px;
    }
    #contact-form {
        padding-right: 30px; /* Right padding */
    }
}



@media (max-width: 480px) {
    

    #contact-form {
        width: 80%;
        padding: 10px;
        padding-bottom: 30px;
        font-size: 24px;
        margin-left: -10px;
    }
    .contact-form button {
        width: 35%; /* Button width */
        padding: 6px; /* Adjust padding */
        font-size: 20px;
    }
    address{
        margin-top: 50px;
    }
    address p{
        display: block;

    }
    .section4 h2{
        padding: 30px;
        padding-left: 9rem;
       margin-right:-10px; 


        font-size: 26px;
        margin-top: 10px;
        margin-bottom: 10px;
    }

  
    .contact-form input{
        padding-top: 10px;
        padding-bottom: 10px;
        font-size: 18px;
    }
   
}
/* End of Section 4 Styles */


/* arrow-up */


   /* Animated Arrow Styles */
.animated-arrow {
    animation: moveArrow 2s infinite; /* Infinite animation for arrow */
}

@keyframes moveArrow {
    0% {
        transform: translateY(0); /* Start position */
    }
    50% {
        transform: translateY(-5px); /* Move up */
    }
    100% {
        transform: translateY(0); /* Return to start */
    }
}

/* Styles for the upward arrow button */
.arrow-up {
    position: fixed; /* Fixed positioning */
    bottom: 20px; /* Distance from bottom */
    right: 40px; /* Distance from right */
    font-size: 24px;
    background: var(--gelos-black); /* Background color */
    color: var(--gelos-white); /* Text color */
    border-radius: 50%; /* Circular shape */
    border-bottom: 3px solid var(--gelos-gold); /* Bottom border */
    border-right: 2px solid var(--gelos-gold); /* Right border */
    padding: 10px; /* Padding inside */
    cursor: pointer; /* Pointer cursor */
    text-decoration: none; /* Remove underline */
    z-index: 1000;
}
/* Style for links or buttons */
.arrow-up, a {
    padding: 10px;  /* Increase clickable area */
    display: inline-block; /* Ensure it behaves like a button */
    margin-top: 10px; /* Add spacing to prevent overlap */
}
/* Hover effect for the arrow button */
.arrow-up:hover {
    background: var(--gelos-blue-tint); /* Change background on hover */
    color: var(--gelos-black); /* Change text color on hover */
}



/* 
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%5

        Footer Styles 

%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
*/


.footer-container {
   

    background-color: var(--gelos-charcoal); /* Background color */
    
    border-top: 4px double var(--gelos-gold); /* Top border */
    border-radius: 30px 30px 0 0; /* Rounded top corners */
    margin-top: 20px; /* Top margin */
  padding: 30px;

 
    display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   grid-template-rows: 1fr 1fr ;
   align-items: center;
   
}


/* Footer list styles */
footer ul {
    list-style: none; /* Remove bullet points */
}

/* Individual footer column styles */
.footer-col1 {
    grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 2;
}
.footer-col2 {
    grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
}
.footer-col3 {
    grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 2;
}
/* Copyright section styles */
.copywrite {
    grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 2;
  grid-row-end: 3;
    background-color: var(--gelos-black); /* Background color */
   
}

.copywrite p {
    color: var(--gelos-gold); /* Text color */
    font-size: var(--font-family-body); /* Font size */
    padding-top: 20px; /* Padding */
    padding-bottom: 20px;
   
    text-align: center; /* Center text */
}

/* Header styles for footer columns */
.footer-col h3 {
    font-size: var(--font-size-h3); /* Font size */
    color: var(--gelos-white); /* Text color */
    text-transform: capitalize; /* Capitalize text */
    margin-bottom: 15px; /* Position from bottom */
    margin-left: 20px; /* Position from left */
    font-weight: 500; /* Font weight */
    padding-bottom: 2px;
    position: relative; /* Relative positioning for pseudo-element */
}

/* Underline effect for footer headers */
.footer-col h3::before {
    content: ''; /* Empty content for underline */
    position: absolute; /* Absolute positioning */
    left: 0; /* Position from left */
    bottom: -10px; /* Position from bottom */
    background-color: var(--gelos-bronze); /* Underline color */
    height: 2px; /* Underline height */
    box-sizing: border-box; /* Include padding in size */
    width: 120px; /* Underline width */
    
}

/* Margin for list items in footer columns */
.footer-col ul li{
    margin-bottom: 3px; /* Bottom margin */
    margin-left: 10px;
    padding-top: 10px;
}
.socialmedia-link, .contact-footer-help{
    padding-top: 10px;

}

/* Styles for footer links */
.footer-col ul li a {
    font-size: var(--font-size-h3); /* Font size */
    text-transform: capitalize; /* Capitalize text */
    text-decoration: none; /* Remove underline */
    font-weight: 300; /* Font weight */
    color: var(--primary-color); /* Link color */
    transition: all 0.3s ease; /* Smooth transition */
}

/* Hover effect for footer links */
.footer-col ul li a:hover {
    transform: translateX(10px); /* Shift links on hover */
}

/* Social media link styles */
.socialmedia-link a, .contact-footer-help a {
    display: inline-block; /* Inline block for links */
    height: 40px; /* Fixed height */
    width: 40px; /* Fixed width */
    background-color: var(--gelos-gold); /* Background color */
 padding-bottom: 10px;
    text-align: center; /* Center text */
    line-height: 20px; /* Center text vertically */
    border-radius: 50%; /* Circular shape */
    color: var(--gelos-white); /* Text color */
    transition: all 0.5s ease; /* Smooth transition */
}

/* Hover effect for social media links */
.footer-col .socialmedia-link a:hover, .contact-footer-help a:hover {
    color: var(--gelos-gold); /* Change text color on hover */
    background-color: var(--gelos-white); /* Change background on hover */
}







/* 

^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   
                Responsive Footer

 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^               

*/





@media (max-width: 480px) {

    /* display flex column on small screen  */

    footer  .footer-container {
        display: flex;
        flex-direction: column;
      
       width: 100%;
       

        
        }
        .footer-col{
            padding-top: 20px;
            padding-bottom: 20px;
            
          }
          .footer-col h3{
            font-size: 20px;
          }



          /* There is an issue, The copywrite did not display on small screen */
        .copywrite{
       
          padding-left: 5px;
          padding-right: 2px;
         
          
        }
      
      .copywrite p {
         
          padding-left: 10px;
          padding-right: 10px;
          font-size: 18px;
         
           /* start position text */
           text-align: start;
         
      }
}


 


/* Loader Styles */
.loader {
    background-color: var(--gelos-white); /* Loader background */
    overflow: hidden; /* Hide overflow */
    width: 100%; /* Full width */
    height: 10vh; /* Height of loader */
    margin-top: 50px; /* Top margin */
    margin-bottom: 50px; /* Bottom margin */
    display: flex; /* Flexbox layout */
    align-items: center; /* Center vertically */
    justify-content: center; /* Center horizontally */
    z-index: 100000; /* High stacking order */
}

.loader__element {
    border-radius: 50%; /* Circular shape */
    border: 5px solid var(--gelos-blue-tint); /* Border color */
    margin: 10px; /* Margin between loader elements */
}

.loader__element:nth-child(1) {
    animation: preloader .6s ease-in-out alternate infinite; /* Animation for first element */
}

.loader__element:nth-child(2) {
    animation: preloader .6s ease-in-out alternate .2s infinite; /* Delay for second element */
}

.loader__element:nth-child(3) {
    animation: preloader .6s ease-in-out alternate .4s infinite; /* Delay for third element */
}

@keyframes preloader {
    100% { 
        transform: scale(2); /* Scale effect */
    }
}



@media (max-width:480px) {
    .loader {
        display: none;
    }
    
}


/* 
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&


Style  Pages (case study 1 & case study 2

&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
*/



.banner-page {
  
    overflow: hidden; /* Hide overflow */
    /* position: relative; Relative positioning for inner elements */
   
  
    
    display: grid; /* Grid for layout */
    grid-template-columns: 1fr 1fr 1fr;
 
    /* justify-content: center;  items */
    justify-content: center;
    /* gap: 30px; */
   
}

.banner-slider {
   
    /* Width of the slider */
   /* Ensures the element takes the full width */

   /*Height of the slider*/
    /* padding-right: 30px;
    padding-left: 80px; */
margin-left: 10px;
margin-bottom: 10px;
grid-column-start: 1;
  grid-column-end: 3;
margin-top: 10px;
    background-color: var(--primary-color);
    border: 4px solid var(--gelos-gold);
    background-image: url('../images/bunnerCaseStudy1_1200_500.jpg');
    background-size: cover; /* Cover the background */
    background-position: center; /* Center the background */
    border-radius: 15px; /* Rounded corners */
    box-shadow: -2px 4px 6px 0 rgba(0,0,0,0.84); /* Shadow effect */
}

.banner-slider-second-page{
    margin-left: 10px;
    margin-bottom: 10px;
    grid-column-start: 1;
      grid-column-end: 3;
    margin-top: 10px;
        background-color: var(--primary-color);
        border: 4px solid var(--gelos-gold);
        background-image: url('../images/bunnerCaseStudy2_1200_500.jpg');
        background-size: cover; /* Cover the background */
        background-position: center; /* Center the background */
        border-radius: 15px; /* Rounded corners */
        box-shadow: -2px 4px 6px 0 rgba(0,0,0,0.84); /* Shadow effect */
}


/* .banner-slider, .banner-page-content { */
    /* flex: 1; Equal flex items */
/* } */

.banner-page-content{
 
z-index: 100;
   
    margin-left: -390px;
    margin-right: 10px;
    margin-top: 120px;
    margin-bottom: 100px;
    grid-column-start: 3;
    grid-column-end: 4;
   
    background-color: var(--primary-color);
    border-radius: 10px; /* Rounded corners */
    box-shadow: -2px 4px 6px 0 rgba(0,0,0,0.84); /* Shadow effect */
    padding: 50px;
}
.banner-page-content h1{
     
    padding-left: 30px; /* Padding for content */
    line-height:50px; /* Line height for spacing */
    color: var(--gelos-blue);
    padding-bottom: 20px;

}
/* 





  /*  */
  .control-icon{
   
    display: flex;
    /* justify-content: space-between; */
      }
    .home-page-icon{
        position: fixed;
        z-index: 2000;
    bottom: 10px;
    left:30px;
    background: var(--gelos-black);
    color:var(--gelos-white);
    border-radius: 50%;
        border-bottom: 3px solid var(--gelos-gold);
        border-right: 2px solid var(--gelos-gold);
    padding: 10px;
    cursor: pointer;
    text-decoration: none;
    }
    .home-page-icon:hover {
        background: var(--gelos-blue-tint);
        color:var(--gelos-black);
        
        }
        /* case study 2 */
     



        /* responsive */

        @media (max-width:480px) {
            /* .banner-page {
 display: block;
 grid-template-rows: 1fr 1fr 1fr;

            } */
            .banner-slider{
               

margin-right: -250px;
            }
          .banner-slider-second-page{
            margin-right: -230px;
          }   
.banner-page-content{
    margin-left: -60px;
    margin-right: 35px;
    
}

.banner-page-content p{
    display: block;
    font-size: 1.6rem;
    padding-left: 5px;
    padding-right: 8px;
}

             #banner-heading{
                font-size: 2.0rem;
            padding-left: 5px;   
              line-height: 1.5;
             }
            
        }



        
/* Side feedback container styling */
/* Side feedback container styling */
.side-feedback {
    position: fixed; /* Fixed position on screen */
    right: -70px; /* Offscreen initially */
    width: 120px; /* Width of feedback box */
    height: 220px; /* Height of feedback box */
    top: 40%; /* Vertically center */
    background-color: var(--gelos-blue); /* Background color */
    z-index: 1000;
    padding: 10px; /* Padding inside box */
    border-top: 3px solid var(--gelos-gold); /* Top border */
    border-right: 2px solid var(--gelos-gold); /* Right border */
    box-shadow: -2px 4px 6px 0px rgba(0, 0, 0, 0.84); /* Shadow effect */
    border-radius: 10px; /* Rounded corners */
    text-align: start; /* Align text to the start */
    transform: translateY(-20%); /* Initial upward position */
}

/* Hover effect for side feedback */
.side-feedback:hover {
    right: 6px; /* Move into view on hover */
}

/* Title for side feedback */
.side-feedback-title {
    left: -30px; /* Positioning */
    bottom: -70px; /* Positioning */
    transform: rotate(-90deg); /* Rotate title */
    position: relative; /* Relative positioning */
    z-index: 5; /* High stacking order */
}

/* Title text styling */
.side-feedback-title h3 {
    margin-top: -10px; /* Space above */
    margin-left: -50px; /* Space from left */
    font-size: 18px; /* Font size from variable */
    color: var(--gelos-white); /* Title color */
}

/* Feedback icons container */
.side-feedback-icons {
    display: flex; /* Use flexbox for layout */
    flex-direction: column; /* Vertical arrangement */
    justify-content: space-between; /* Space between items */
    border-top: 3px solid var(--gelos-gold); /* Top border */
    border-right: 2px solid var(--gelos-gold); /* Right border */
    width: 50px; /* Width of icons container */
    height: 150px; /* Height of icons container */
    position: absolute; /* Absolute positioning */
    left: 50px; /* Position from the left */
   
    background-color: var(--gelos-white); /* Background color */
    padding: 20px;
     /* Padding inside container */
    border-radius: 5px; /* Rounded corners */
    box-shadow: -2px 4px 6px 0px rgba(0, 0, 0, 0.84); /* Shadow effect */
}

/* Individual icon styling */
.side-feedback-icons  i {
    font-size: 28px; /* Icon size */
    padding-top: 5px;
    transform: translateX(-6px); /* Space between icons */
    color: var(--gelos-blue); /* Icon color */
    transition: all 0.3s ease; /* Smooth transition for hover effects */
}

.fa-comment{
   margin-left: -12px;
   margin-top: -25px;

}
/* Hover effect for icons */
.side-feedback-icons i:hover {
    color: var(--gelos-gold); /* Change color on hover */
   
    transform: translateX(-1.8px); /* Move upwards slightly */
    transform: scale(1.1); /* Slightly increase size */
}