* {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        
    }

    body {
        line-height: 1.6;
        color: #fff;
        background: #fff;   /* Adjust this for night and day */
        font-size: 18px;
        font-weight: 400;
        font-family: "-apple-system", "BlinkMacSystemFont", "Roboto", "Helvetica Neue", sans-serif !important;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    body.stop {
        overflow: hidden;
    }

    .navbar-inverse {
        background-color: rgba(255, 255, 255, 0);
        background-image: none;
        /* border-color: #003300; */
        height: 13vh; /* Doubling the height of the header */
        position: absolute; /* Ensure relative positioning for pseudo-element */
        width: 100%; /* Ensure full width */
    }

    .navbar-inverse .navbar-nav>.active>a,
    .navbar-inverse .navbar-nav>.open>a,
    .navbar-inverse .navbar-nav>.open>a:hover,
    .navbar-inverse .navbar-nav>.open>a:focus {
        background-color: #000;
        color: #fff;
    }

    .navbar-inverse .navbar-nav>li>a {
        color: #fff;
        line-height: 90px; /* Vertically centering the nav items */
        font-size: clamp(14px, 1vw, 17px);
        font-family: 'Open Sans', sans-serif;
        font-weight: 100;
    }

    .navbar-inverse .navbar-nav>li>a:hover,
    .navbar-inverse .navbar-nav>li>a:focus {
        color: #848c9c;
    }

    .navbar-inverse .navbar-brand {
        color: #fff;
        line-height: 90px; /* Vertically centering the brand */
        font-size: clamp(14px, 1vw, 17px);
        font-family: 'Open Sans', sans-serif;
        font-weight: 100;
    }

    .navbar-inverse .navbar-brand:hover {
        color: #848c9c;
    }

    .navbar {
        border: none; /* Ensure no border */
    }

    .navbar-toggle {
        margin-top: 35px; /* Center the toggle button vertically */
    }

    .header-text {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
    }

    .name-top, .name-bottom {
        font-size: clamp(14px, 1.3vw, 18px); /* Adjust font size */
        font-weight: 100; /* Adjust font weight */
        font-family: 'Open Sans', sans-serif; /* Adjust font family */
        color: #fff; /* Adjust text color */
        line-height: 1; /* Adjust line height for closer vertical spacing */
    }

    .name-top::first-letter,
    .name-bottom::first-letter {
       font-size: clamp(18px, 4vw, 26px);  /* Larger font size for first letter */
    }

    /* Define CSS variables for default screen size */
    :root {
        --navbar-header-padding: 8vw; /* Adjust based on the padding-left of .navbar-header */
        --navbar-nav-padding: 8vw; /* Adjust based on the padding-right of .navbar-nav */
    }

    /* Apply padding to navbar elements */
    .navbar-header {
        padding-left: calc(var(--navbar-header-padding) - 15px); /* Use CSS variable for padding-left */
    }

    .navbar-nav {
        padding-right: calc(var(--navbar-nav-padding) - 15px);
        display: flex;
        justify-content: flex-end; /* Align items to the right */
    }
  
   .navbar-nav>li {
        margin-right: 1px; /* Default spacing between items */
    }

    /* Design line under header text */
    .navbar::after {
        content: '';
        display: block;
        position: absolute;
        bottom: 0.5vh;
        left: var(--navbar-header-padding); /* Adjusted left position with pixels */
        right: var(--navbar-nav-padding); /* Align with the right edge of .navbar-nav */
        width: calc(100% - var(--navbar-header-padding) - var(--navbar-nav-padding)); /* Adjusted width with pixels */
        height: 1px; /* Adjust the thickness of the line */
        box-shadow: 0 0.3px 0 0 #fff;
        background-color: transparent;
       .your-line-class {
    top: 8vh; /* Default positioning for larger screens */
    /* Add other styles as needed */
}

@media (max-width: 768px) {
    .your-line-class {
        top: 8vh; /* Adjust for smaller screens */
    }
}
   
    }

    /* Hamburger Menu Styles */
    .menu-button {
        display: flex;
        align-items: center;
        text-decoration: none;
        color: #fff; /* Ensure same color as menu text */
        font-size: 15px; /* Match font size with menu text */
        padding: 15px; /* Adjust padding as needed */
        height: 100%; /* Make sure button spans the full height of the navbar */
        position: relative; /* To allow absolute positioning of hamburger menu */
        flex-direction: row-reverse; /* Reverse the order of children */
        gap: 10px; /* Adds spacing between flex items */
        transition: color 0.3s; /* Smooth transition for text color */
    }

    .hamburger-menu {
        position: relative; /* Position relative to the menu button */
        width: 25px; /* Width to contain the lines properly */
        height: 15px; /* Adjust height as needed */
        display: flex;
        flex-direction: column;
        justify-content: center; /* Center lines vertically within the button */
    }

    .line {
        width: 20px; /* Adjust width as needed */
        height: 2px; /* Adjust thickness as needed */
        background-color: #fff; /* Ensure same color as menu text */
        transition: background-color 0.3s, transform 0.3s; /* Smooth transition for color and transformation */
        position: absolute; /* Position lines absolutely within the container */
        left: 0;
    }

    #line1 {
        top: 0; /* Top position for the first line */
    }

    #line2 {
        top: 50%; /* Center line vertically */
        transform: translateY(-50%); /* Center vertically within the container */
    }

    #line3 {
        bottom: 0; /* Bottom position for the third line */
    }

    /* Hover effect for the menu button */
    .menu-button:hover {
        color: #848c9c; /* Change text color on hover */
    }

    .menu-button:hover .hamburger-menu .line {
        background-color: #848c9c; /* Change line color on hover */
    }

    /* Transform lines into an "X" */
    .menu-button.open .hamburger-menu #line1 {
        transform: rotate(45deg); /* Rotate line1 to form one part of the "X" */
        top: 50%; /* Center line1 vertically */
        transform: translateY(-50%) rotate(45deg); /* Center vertically and rotate */
    }

    .menu-button.open .hamburger-menu #line2 {
        opacity: 0; /* Hide the middle line */
    }

    .menu-button.open .hamburger-menu #line3 {
        transform: rotate(-45deg); /* Rotate line3 to form the other part of the "X" */
        bottom: 50%; /* Center line3 vertically */
        transform: translateY(50%) rotate(-45deg); /* Center vertically and rotate */
    }

    /* Change MENU text to CLOSE */
    .menu-button.open {
        color: #848c9c; /* Color of the text when menu is open */
    }

  

@media (max-width: 768px) {
    .navbar-nav {
        padding-right: calc(var(--navbar-nav-padding) - 10px);
        display: flex;
        justify-content: flex-end; /* Align items to the right */
        margin-top: -117px; /* Increase the position height by 20px */
    }
   .navbar-nav>li {
            margin-right: -20px; /* Reduced spacing between items */
        }

       
        }
    }

  

    
       
    }
}
    
    
    
    
    
    
    
    
    
    
    

        
/* _________________________________________________HOVER MENU CSS_____________________________________________________ */
        #page {
            position: relative;
             transition: opacity 0.5s ease-in-out, filter 0.5s ease-in-out, transform 0.5s ease-in-out;
            margin-top: 10px; /* Adjust the margin to accommodate the header banner height**** BAR UNDER TOP CAROUSEL */
        }
    
    
 /* sticky menu background fade  */
        #page.menuopen {
            opacity: .9; /* Reduced opacity for darker tint */
            filter: brightness(0.10) blur(1px); /* Adjust brightness and blur */
            transform: scale(1.2);
           
        }

      
      /* menu button  */
        nav {
            
            display: flex;
            height: 18vw;     /* menuWIdthbutton  */
            justify-content: center;
            align-items: center;
            padding: 0 20px;
            position: fixed;
            top: 1vh;    /* Navmenu height  */
            left: 50%;
            transform: translateX(-50%);
            width: auto; /* Changed to auto */
            /*background-color: rgba(255, 255, 255, 0.2); /* nav menu background */
            border-radius: 5px;
            z-index: 9;
            
            border: 1px solid rgba(255, 255, 255, 0);
            transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1) .2s;
        }

        /* Adjust the top value for smaller screens */
@media (max-width: 800px) {
    nav {
        top: 100px; /* Increase this value to move the nav lower on smaller screens */
    }
}


/* _________NAV DROPDOWN WINDOW (Navigation Links)__________ */
       nav a {       
           
            display: none;
            
        }

    nav a.show {
    display: inline-block; /* Show navigation links when .show class is applied */
    /* Add other styles as needed */
    color: #fff;
    text-decoration: none;
    font-family: 'Open Sans', sans-serif;
    font-weight: 100;
    padding: 10px 20px;
    line-height: 1;
    font-size: clamp(10px, 1.3vw, 19px); /* Font size based on viewport width */
    letter-spacing: 2px; /* Space between letters */
    text-transform: capitalize;
    transition: .3s all cubic-bezier(0.075, 0.82, 0.165, 1) .6s;
}

/* Media query for reducing letter spacing and word spacing at smaller screen sizes */
@media (max-width: 768px) {
    nav a.show {
       margin-left: -16px;
         margin-right: -18px; /* Reduced spacing between items */
      font-size: clamp(0.8px, 1.8vw, 13px)
    }
}

        nav button {
            -webkit-appearance: none;
            background: rgba(0, 0, 0, .3);
            backdrop-filter: blur(5px);
            border: 1px solid rgba(255, 255, 255, .1);
            position: absolute;
            z-index: 99;
            left: 0;
            margin: auto;
            right: 0;
            top: 0;
            bottom: 0;
            width: 70px;
            height: 70px;
            border-radius: 100%;
            outline: 0;
            border: 0;
            cursor: pointer;
            transition: transform 1s ease-in-out;    /*-- THIS CONTROLS THE BUTTON APPEARANCE style  original:    .3s all cubic-bezier(0.075, 0.82, 0.165, 1) 0.2s; --*/   
            transform: scale(0);
        }
    
    nav button .menu-text {
    font-family: 'Open Sans', sans-serif;
    font-weight: 500;
    font-size: 18px; /* Adjusted for better fit */
    color: #fff;
    text-transform: uppercase;
    position: absolute; /* Absolute positioning within the button */
    top: 31%;
    left: 13%;
    transform: translate(-50%, -50%); /* Centering text */
    white-space: nowrap; /* Prevent text from wrapping */
    text-align: center;
}

     /*   nav button span {
            width: 40%;
            background: #fff;
            height: 2px;
            display: block;
            margin: 5px auto;
            transform: scalex(0);
            transition: .6s transform cubic-bezier(0.075, 0.82, 0.165, 1) 0s, .3s margin ease-in 0s;
        }
    */

        nav button:hover {
            border-color: rgba(255, 255, 255, .5);
        }

        nav button:hover span {
            margin: 10px auto;
          
        }

       

        header.sticky #logo {
            top: 0;
            transform: scale(.8);
            opacity: 0; 
            transition-delay: 0.5s;
        }

        header.sticky nav {
            top: 20px;
            padding: 0;
            width: 90px;
            height: 90px;
            transition-delay: 0.5s;
        }

        header.sticky nav button {
            transform: scale(1);
            transition-delay: 0.6s;
        }

        header.sticky nav button span {
            transform: scalex(1);
            transition: .6s transform cubic-bezier(0.075, 0.82, 0.165, 1) .8s, .3s margin ease-in 0s;
        }

        header.sticky nav a {
            padding: 0;
            opacity: 0;
            letter-spacing: 0px;
            transform: scale(0.3);
            transition-delay: 0.2s;
        }

      
/* <!-- _________________________________________________ CAROUSEL CSS TOPICS_________________________________________________________________________________________________________________________________ -->

/* General Carousel Styles */
    section {
            display: flex;
            min-height: 100vh; /*--this changes general carousel page height--*/
            padding: 50px; 
            justify-content: center;
            align-items: center;
            background: #222;
            color: #fff;
            position: relative;
        }
        section:after {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            background: #000;
            opacity: .5;
            height: 100%;
            width: 100%;
        }

.carousel-section {
  @import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700,700i,900,900i');
  @import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i');

  * {
    box-sizing: border-box;
  }

  html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    -webkit-justify-content: center;
    align-items: center;
    -webkit-align-items: center;
  }

  body {
    background-color: #eaeaea;
  }

  .carousel {
    width: 100%;
    height: 100%;
    display: flex;
    max-width: 900px;
    max-height: 550px;
    overflow: hidden;
    position: relative;
  }

  .carousel-item {
    visibility: hidden;
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: flex-end;
    -webkit-align-items: center;
    -webkit-justify-content: flex-end;
    position: absolute;
    background-color: #fff;
    flex-shrink: 0;
    -webkit-flex-shrink: 0;
    z-index: 0;
    opacity: 0;
    transition: opacity 0.5s ease, visibility 0.5s ease;
  }

  .carousel-item__info {
    height: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    display: -webkit-flex;
    -webkit-justify-content: center;
    -webkit-flex-direction: column;
    order: 1;
    left: 0;
    margin: auto;
    padding: 0 40px;
    width: 40%;
  }

  .carousel-item__image {
    width: 100%;
    height: 100%;
    order: 2;
    align-self: flex-end;
    flex-basis: 60%;
    -webkit-order: 2;
    -webkit-align-self: flex-end;
    -webkit-flex-basis: 60%;
   
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
  }

/* Specific styling for images in the Resume carousel */
#Resume .carousel-item__image {
    background-size: contain; /* Ensure entire image is visible */
    background-position: center center; /* Center the image */
    max-height: 1000px; /* Set a maximum height for the carousel item */
}
/* Specific styling for images in the Projects carousel */
#Projects .carousel-item__image {
    background-size: contain; /* Ensure entire image is visible */
    background-position: center center; /* Center the image */
    max-height: 1000px; /* Set a maximum height for the carousel item */
}
/* Specific styling for images in the Cloud carousel */
#Cloud .carousel-item__image {
    background-size: contain; /* Ensure entire image is visible */
    background-position: center center; /* Center the image */
    max-height: 1000px; /* Set a maximum height for the carousel item */
}

/* Specific styling for images in the Projects carousel */
#DevOps .carousel-item__image {
    background-size: contain; /* Ensure entire image is visible */
    background-position: center center; /* Center the image */
    max-height: 800px; /* Set a maximum height for the carousel item */
    margin: 4vw;
}

/* Specific styling for images in the Projects carousel */
#Frontend .carousel-item__image {
    background-size: contain; /* Ensure entire image is visible */
    background-position: center center; /* Center the image */
    max-height: 1000px; /* Set a maximum height for the carousel item */
}
/* Specific styling for images in the Projects carousel */
#Education .carousel-item__image {
    background-size: contain; /* Ensure entire image is visible */
    background-position: center center; /* Center the image */
    max-height: 700px; /* Set a maximum height for the carousel item */
    margin: 6vw;
}

/* Specific styling for images in the Projects carousel */
#Solutions .carousel-item__image {
    background-size: contain; /* Ensure entire image is visible */
    background-position: center center; /* Center the image */
    max-height: 80vh; /* Set a maximum height for the carousel item */
    margin: 4vw;

}
  .carousel-item__subtitle, .carousel-item__title, .carousel-item__description, .carousel-item__btn {
    transform: translateY(25%);
    opacity: 0;
    visibility: hidden;
    transition: 0.6s all ease-in-out;
  }

  .carousel-item__subtitle {
    font-family: 'Open Sans', sans-serif;
    letter-spacing: 3px;
    font-size: 0.56vw;
    line-height: 1vw;
    text-transform: uppercase;
    margin: 0;
    color: #7E7E7E;
    font-weight: 700;
  }

  .carousel-item__title {
    margin: 15px 0 0 0;
    font-family: 'Playfair Display', serif;
    font-size:  clamp(1px, 2.5vw, 50px);
    line-height: 2vw;
    letter-spacing: 3px;
    font-weight: 700;
    color: #2C2C2C;
  }

  .carousel-item__description {
    margin-top: 35px;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.8vw;
    color: #696767;
    line-height: 1.3vw;
    margin-bottom: 35px;
  }

  .carousel-item__container {}

  .carousel-item__btn {
    width: 35%;
    color: #2C2C2C;
    font-family: 'Open Sans', sans-serif;
    letter-spacing: 3px;
    font-size: 0.6vw;
    text-transform: uppercase;
    margin: 0px;
     line-height: 1vw;
    width: 35%;
    font-weight: 700;
    text-decoration: none;
  }

  .carousel__nav {
    position: absolute;

    left:    clamp(0.05vw, 26vw, 26vw);
    bottom: 2vw;
    
    z-index: 2;
    background-color: #fff; /* Make the background transparent or keep it white as per design */
}

  .carousel__icon {
    display: inline-block;
    vertical-align: middle;
    width: 2vw;
    fill: #5d5d5d;
  }

  .carousel__arrow {
    cursor: pointer;
    display: inline-block;
    padding: 11px 15px;
    position: relative;
  }

  .carousel__arrow:nth-child(1):after {
    content: '';
    right: -3px;
    position: absolute;
    width: 1px;
    background-color: #b0b0b0;
    height: 14px;
    top: 50%;
    margin-top: -7px;
  }

  .active {
    z-index: 1;
    visibility: visible;
    opacity: 1;
  }

  .active .carousel-item__subtitle,
  .active .carousel-item__title,
  .active .carousel-item__description,
  .active .carousel-item__btn {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }


  
  
   /* HOME SECTION CAROUSEL VIDEO____________________________________________________________________________________________________________________________________________ */
 
/* Base Styles for Carousel Item */
.carousel-item--video {
  position: relative; /* Container positioning for child absolute positioning */
}

/* Video Styles */
.carousel-item--video .carousel-item__video {
  width: 100vw;
  height: calc(91vw * 0.54); /* Video takes up the entire height of the viewport */
  object-fit: cover;
  display: block; /* Ensure it's a block element */

}
/* Info Overlay Styles */
.carousel-item--video .carousel-item__info {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white; /* Ensure text is readable over the video */
  text-align: center;
  background: rgba(0, 0, 0, 0.7); /* Semi-transparent background for readability */
}

/* Image Styles */
.carousel-item--video .carousel-item__image {
    width: clamp(10vw, 12vw, 8vw); /* Minimum 100px, fluid 14vw, maximum 200px */
    height: clamp(10vw, 12vw, 8vw); /* Minimum 100px, fluid 14vw, maximum 200px */
    border-radius: 50%;
    position: absolute; /* Position absolutely within the parent */
    top: calc(27% + 2vh); /* Adjust this value for smoother vertical positioning */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Offset the position to truly center */
    object-fit: cover;
    aspect-ratio: 1 / 1;
    transition: top 0.5s ease-in-out, width 0.5s ease-in-out, height 0.5s ease-in-out; /* Smooth transition for top, width, and height */
}


/* Title Styles */
.carousel-item--video .carousel-item__title {
  position: absolute;
  top: calc(17vw + 4%) ;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Open Sans', sans-serif;
  font-size: font-size: clamp(18px, 4vw, 26px); /* Font size based on viewport width */
  line-height: 4vw; /* Line height based on viewport width */
  letter-spacing: 0.3vw; /* Letter spacing based on viewport width */
  font-weight: 100;
  color: #fff;
}
  
  /* Description Top Styles */
.carousel-item--video .carousel-item__description-top {
  position: absolute;
  top: calc(36% + 1vw + 3.5vw); /* Positioned below the title with additional margin */
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Open Sans', sans-serif;
  font-size: clamp(14px, 1.3vw, 18px);/*clamp(1vw, 1.2vw, 1.2vw); Font size based on viewport width */
  color: #fff;
  line-height: 2.2vw; /* Line height based on viewport width */
  width: 80vw; /* Width based on viewport width */
  padding: 2.5vw; /* Padding based on viewport width */
  box-sizing: border-box; /* Ensure padding does not affect width calculation */
}

/* Description Styles */
.carousel-item--video .carousel-item__description {
  position: absolute;
  top: calc(37.5% + 1vw + 8vw); /* Positioned below the top description with additional margin */
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Open Sans', sans-serif;
  font-size: clamp(1vw, 1.2vw, 1.2vw); /* Font size based on viewport width */
  color: #fff;
  line-height: 1.5vw; /* Line height based on viewport width */
  width: 55vw; /* Width based on viewport width */
  padding: 0.5vw; /* Padding based on viewport width */
  box-sizing: border-box; /* Ensure padding does not affect width calculation */
}








  /* Default Button Styles */
.carousel-item--video .carousel-item__btn {
  position: absolute;
  top: calc(30% + 1vw + 24vw); /* Default position for larger screens */
  left: 50%;
  transform: translateX(-50%);
  padding: 0.5vw 2vw; /* Padding based on viewport width */
  font-size: 0.7vw; /* Font size based on viewport width */
  background-color: #fff;
  color: #000;
  text-decoration: none;
  border-radius: 2vw; /* Border radius based on viewport width */
  width: 15vw; /* Width based on viewport width */
  box-sizing: border-box; /* Ensure padding does not affect width calculation */
}
  
  
  /* Media Queries */
  
   /* 2600px */
@media (max-width: 3000px) {
    .carousel-item--video .carousel-item__image {
        top: calc(28% + 1.5vw); /* Adjust for smaller screens */
    }
    .carousel-item--video .carousel-item__title {
        top: calc(33.5% + 1.9vw); /* Adjust the text position similarly */
        font-size: 1.2vw; /* Adjust font size */
    }
    .carousel-item--video .carousel-item__description-top {
        top: calc(36% + 1.6vw); /* Adjust for smaller screens */
        font-size: 0.95vw; /* Adjust font size */
        width: 90vw; /* Adjust width */
    }
    .carousel-item--video .carousel-item__description {
        top: calc(45% + 2.3vw); /* Adjust the text position similarly */
        font-size: 0.9vw; /* Adjust font size */
        line-height: 2vw; /* Line height based on viewport width */
        width: 47vw; /* Adjust width */
    }
    .carousel-item--video .carousel-item__btn {
    top: calc(25% + 2vw + 21vw); /* Adjusted position for medium screens */
    padding: 0.7vw 2vw; /* Adjust padding if needed */
    font-size: 0.6vw; /* Adjust font size if needed */
    width: 12vw; /* Adjust width if needed */
    height: 1.6vw; /* Default height */
    display: flex;
    align-items: center;
    justify-content: center;

  }
}
  
     /* 2300px */
@media (max-width: 2300px) {
    .carousel-item--video .carousel-item__image {
        top: calc(28% + 1.5vw); /* Adjust for smaller screens */
    }
    .carousel-item--video .carousel-item__title {
        top: calc(36% + 1.5vw); /* Adjust the text position similarly */
        font-size: 1.2vw; /* Adjust font size */
    }
    .carousel-item--video .carousel-item__description-top {
        top: calc(37% + 2vw); /* Adjust for smaller screens */
        font-size: 0.95vw; /* Adjust font size */
        width: 90vw; /* Adjust width */
    }
    .carousel-item--video .carousel-item__description {
        top: calc(42% + 4vw); /* Adjust the text position similarly */
        font-size: 0.95vw; /* Adjust font size */
        line-height: 2vw; /* Line height based on viewport width */
        width: 50vw; /* Adjust width */
    }
    .carousel-item--video .carousel-item__btn {
    top: calc(25% + 2vw + 24vw); /* Adjusted position for medium screens */
    padding: 0.7vw 2vw; /* Adjust padding if needed */
    font-size: 0.7vw; /* Adjust font size if needed */
    width: 14vw; /* Adjust width if needed */
  }
}
  
   /* 1900px */
@media (max-width: 1900px) {
    .carousel-item--video .carousel-item__image {
        top: calc(28% + 1.5vw); /* Adjust for smaller screens */
    }
    .carousel-item--video .carousel-item__title {
        top: calc(36% + 2vw); /* Adjust the text position similarly */
        font-size: 1.4vw; /* Adjust font size */
    }
    .carousel-item--video .carousel-item__description-top {
        top: calc(37% + 3vw); /* Adjust for smaller screens */
        font-size: 1.2vw; /* Adjust font size */
        width: 90vw; /* Adjust width */
    }
    .carousel-item--video .carousel-item__description {
        top: calc(44% + 4vw); /* Adjust the text position similarly */
        font-size: 1.2vw; /* Adjust font size */
        line-height: 2vw; /* Line height based on viewport width */
        width: 55vw; /* Adjust width */
    }
    .carousel-item--video .carousel-item__btn {
    top: calc(30% + 2vw + 25vw); /* Adjusted position for medium screens */
    padding: 0.7vw 2vw; /* Adjust padding if needed */
    font-size: 0.8vw; /* Adjust font size if needed */
    width: 16vw; /* Adjust width if needed */
    }
}
  
  
  
  /* 1800px */
@media (max-width: 1800px) {
    .carousel-item--video .carousel-item__image {
        top: calc(28% + 1.5vw); /* Adjust for smaller screens */
    }
    .carousel-item--video .carousel-item__title {
        top: calc(36% + 2vw); /* Adjust the text position similarly */
        font-size: 1.4vw; /* Adjust font size */
    }
    .carousel-item--video .carousel-item__description-top {
        top: calc(37% + 2.5vw); /* Adjust for smaller screens */
        font-size: 1.2vw; /* Adjust font size */
        width: 90vw; /* Adjust width */
    }
    .carousel-item--video .carousel-item__description {
        top: calc(44% + 2.5vw); /* Adjust the text position similarly */
        font-size: 1.1vw; /* Adjust font size */
        line-height: 2vw; /* Line height based on viewport width */
        width: 55vw; /* Adjust width */
    }
    .carousel-item--video .carousel-item__btn {
    top: calc(30% + 2vw + 24vw); /* Adjusted position for medium screens */
    padding: 0.7vw 2vw; /* Adjust padding if needed */
    font-size: 0.7vw; /* Adjust font size if needed */
    width: 16vw; /* Adjust width if needed */
    }
}
  
  
     /*     1650px (LAPTOP SIZE)    */
@media (max-width: 1650px) {
    .carousel-item--video .carousel-item__image {
        top: calc(23% + 4vw); /* Slightly smaller adjustment */
    }
    .carousel-item--video .carousel-item__title {
        top: calc(30% + 4.5vw); /* Slightly smaller adjustment */
        font-size: 1.4vw; /* Adjust font size */
    }
    .carousel-item--video .carousel-item__description-top {
        top: calc(32% + 4.5vw); /* Slightly smaller adjustment */
        font-size: 1.2vw; /* Adjust font size */
        width: 85vw; /* Adjust width */
    }
    .carousel-item--video .carousel-item__description {
        top: calc(36% + 6.5vw); /* Slightly smaller adjustment */
        font-size: 1.1vw; /* Adjust font size */
        line-height: 2vw; /* Line height based on viewport width */
        width: 68vw; /* Adjust width */
    }
   .carousel-item--video .carousel-item__btn {
    top: calc(24% + 2vw + 24vw); /* Adjusted position for medium screens */
    padding: 0.7vw 2vw; /* Adjust padding if needed */
    font-size: 0.8vw; /* Adjust font size if needed */
    width: 18vw; /* Adjust width if needed */
    }
  }

  
    /* 1450px */
@media (max-width: 1450px) {
    .carousel-item--video .carousel-item__image {
        top: calc(28% + 1vw); /* Adjust for smaller screens */
    }
    .carousel-item--video .carousel-item__title {
        top: calc(36% + 1.8vw); /* Adjust the text position similarly */
        font-size: 1.8vw; /* Adjust font size */
    }
    .carousel-item--video .carousel-item__description-top {
        top: calc(39% + 2.2vw); /* Adjust for smaller screens */
        font-size: 1.6vw; /* Adjust font size */
        width: 90vw; /* Adjust width */
    }
    .carousel-item--video .carousel-item__description {
        top: calc(47% + 3.5vw); /* Adjust the text position similarly */
        font-size: 1.6vw; /* Adjust font size */
        line-height: 2vw; /* Line height based on viewport width */
        width: 60vw; /* Adjust width */
    }
    .carousel-item--video .carousel-item__btn {
    top: calc(30% + 2vw + 32vw); /* Adjusted position for medium screens */
    padding: 0.7vw 2vw; /* Adjust padding if needed */
    font-size: 0.8vw; /* Adjust font size if needed */
    width: 18vw; /* Adjust width if needed */
    }
}


/* 1350px */
@media (max-width: 1350px) {
    .carousel-item--video .carousel-item__image {
        top: calc(28% + 0.4vw); /* Adjust for smaller screens */
    }
    .carousel-item--video .carousel-item__title {
        top: calc(37% + 0.5vw); /* Adjust the text position similarly */
        font-size: 1.4vw; /* Adjust font size */
    }
    .carousel-item--video .carousel-item__description-top {
        top: calc(38% + 1vw); /* Adjust for smaller screens */
        font-size: 1.2vw; /* Adjust font size */
        width: 90vw; /* Adjust width */
    }
    .carousel-item--video .carousel-item__description {
        top: calc(45% + 1.5vw); /* Adjust the text position similarly */
        font-size: 1.2vw; /* Adjust font size */
        line-height: 2vw; /* Line height based on viewport width */
        width: 65vw; /* Adjust width */
    }
    .carousel-item--video .carousel-item__btn {
    top: calc(30% + 2vw + 21vw); /* Adjusted position for medium screens */
    padding: 0.7vw 2vw; /* Adjust padding if needed */
    font-size: 0.8vw; /* Adjust font size if needed */
    width: 20vw; /* Adjust width if needed */
  }
  }

  /* 1240px */
@media (max-width: 1240px) {
    .carousel-item--video .carousel-item__image {
        top: calc(26% + 1.3vw); /* Slightly smaller adjustment */
    }
    .carousel-item--video .carousel-item__title {
        top: calc(33% + 3vw); /* Slightly smaller adjustment */
        font-size: 1.4vw; /* Adjust font size */
    }
    .carousel-item--video .carousel-item__description-top {
        top: calc(36% + 3vw); /* Slightly smaller adjustment */
        font-size: 1.3vw; /* Adjust font size */
        width: 90vw; /* Adjust width */
    }
    .carousel-item--video .carousel-item__description {
        top: calc(42% + 3.5vw); /* Slightly smaller adjustment */
        font-size: 1.2vw; /* Adjust font size */
        line-height: 1.8vw; /* Line height based on viewport width */
        width: 75vw; /* Adjust width */
    }
   .carousel-item--video .carousel-item__btn {
    top: calc(30% + 2vw + 20vw); /* Adjusted position for medium screens */
    padding: 0.7vw 2vw; /* Adjust padding if needed */
    font-size: 1vw; /* Adjust font size if needed */
    width: 21vw; /* Adjust width if needed */
  }
  }
  
  
  
  
/* 1000px */
@media (max-width: 1000px) {
    .carousel-item--video .carousel-item__image {
        top: calc(35% + 1.2vw); /* Slightly smaller adjustment */
    }
    .carousel-item--video .carousel-item__title {
        top: calc(36% + 3vw); /* Slightly smaller adjustment */
        font-size: 1.8vw; /* Adjust font size */
    }
    .carousel-item--video .carousel-item__description-top {
        top: calc(35% + 4vw); /* Slightly smaller adjustment */
        font-size: 1.2vw; /* Adjust font size */
        width: 85vw; /* Adjust width */
    }
    .carousel-item--video .carousel-item__description {
        top: calc(39% + 5vw); /* Slightly smaller adjustment */
        font-size: 1.2vw; /* Adjust font size */
        line-height: 2vw; /* Line height based on viewport width */
        width: 75vw; /* Adjust width */
    }
   .carousel-item--video .carousel-item__btn {
    top: calc(10% + 2vw + 32vw); /* Adjusted position for medium screens */
    padding: 0.7vw 2vw; /* Adjust padding if needed */
    font-size: 1.2vw; /* Adjust font size if needed */
    width: 21vw; /* Adjust width if needed */
  }
  }

/* 900px */
@media (max-width: 900px) {
    .carousel-item--video .carousel-item__image {
        top: calc(39% + 1vw); /* Further reduced movement */
    }
    .carousel-item--video .carousel-item__title {
        top: calc(38% + 1.5vw); /* Further reduced movement */
        font-size: 2vw; /* Adjust font size */
    }
    .carousel-item--video .carousel-item__description-top {
        top: calc(38% + 2.5vw); /* Further reduced movement */
        font-size: 1.3vw; /* Adjust font size */
        width: 80vw; /* Adjust width */
    }
    .carousel-item--video .carousel-item__description {
        top: calc(40% + 4vw); /* Further reduced movement */
        font-size: 1.3vw; /* Adjust font size */
        line-height: 2vw; /* Line height based on viewport width */
        width: 70vw; /* Adjust width */
    }
    .carousel-item--video .carousel-item__btn {
    top: calc(15% + 2vw + 32vw); /* Adjusted position for medium screens */
    padding: 0.7vw 2vw; /* Adjust padding if needed */
    font-size: 1vw; /* Adjust font size if needed */
    width: 20vw; /* Adjust width if needed */
    }
    }
  
  
  /* 768px */
@media (max-width: 768px) {
    .carousel-item--video .carousel-item__image {
        top: calc(37% + 1vw); /* Further reduced movement */
    }
    .carousel-item--video .carousel-item__title {
        top: calc(38% + 1.5vw); /* Further reduced movement */
        font-size: 1.8vw; /* Adjust font size */
    }
    .carousel-item--video .carousel-item__description-top {
        top: calc(38% + 2.5vw); /* Further reduced movement */
        font-size: 1.2vw; /* Adjust font size */
        width: 80vw; /* Adjust width */
    }
    .carousel-item--video .carousel-item__description {
        top: calc(42% + 3vw); /* Further reduced movement */
        font-size: 1.2vw; /* Adjust font size */
        line-height: 2vw; /* Line height based on viewport width */
        width: 70vw; /* Adjust width */
    }
    .carousel-item--video .carousel-item__btn {
    top: calc(20% + 2vw + 30vw); /* Adjusted position for medium screens */
    padding: 0.7vw 2vw; /* Adjust padding if needed */
    font-size: 1vw; /* Adjust font size if needed */
    width: 20vw; /* Adjust width if needed */
    }
    }
  
  
  
/* 576px */
@media (max-width: 576px) {
    .carousel-item--video .carousel-item__image {
        top: calc(50% + 0.5vw); /* Minimal adjustment for very small screens */
    }
    .carousel-item--video .carousel-item__title {
        top: calc(48% + 3vw); /* Minimal adjustment for very small screens */
        font-size: 1.5vw; /* Adjust font size */
    }
    .carousel-item--video .carousel-item__description-top {
        top: calc(50% + 2vw); /* Minimal adjustment for very small screens */
        font-size: 1vw; /* Adjust font size */
        width: 100vw; /* Adjust width */
    }
    .carousel-item--video .carousel-item__description {
        top: calc(55.5% + 2vw); /* Minimal adjustment for very small screens */
        font-size: 1vw; /* Adjust font size */
        line-height: 1vw; /* Adjust line height */
        width: 80vw; /* Adjust width */
    }
      .carousel-item--video .carousel-item__btn {
    top: calc(40% + 3vw + 20vw); /* Further adjusted position for small screens */
    padding: 1vw 2vw; /* Adjust padding if needed */
    font-size: 0.8vw; /* Adjust font size if needed */
    width: 26vw; /* Adjust width if needed */

    }
    }







 





  /* .carousel-item--1 .carousel-item__image {
    background-image: url('https://images.pexels.com/photos/991012/pexels-photo-991012.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940');
    
    } */
  
  .carousel-item--21 .carousel-item__image { 
    background-image: url('https://www.un.org/sites/un2.un.org/files/styles/large-article-image-style-16-9/public/field/image/2022/06/silas-baisch-oczvgbqcjky-unsplash.jpg');
}
  
 
/*     RESUME      */  
  
  .carousel-item--11 .carousel-item__image {
    background-image: url('./images/newresume1.png');
    background-size: contain; /* Ensure entire image is visible */
    background-position: center center; /* Center the image */
    max-height: 700px; /* Set a maximum height for the carousel item */

}
  .carousel-item--12 .carousel-item__image {
    background-image: url('./images/newresume1.png');
    background-size: contain; /* Ensure entire image is visible */
    background-position: center center; /* Center the image */
    max-height: 700px; /* Set a maximum height for the carousel item */

}
  .carousel-item--13 .carousel-item__image {
    background-image: url('./images/Resumep2.png');
    background-size: contain; /* Ensure entire image is visible */
    background-position: center center; /* Center the image */
    max-height: 700px; /* Set a maximum height for the carousel item */

}
  .carousel-item--14 .carousel-item__image {
    background-image: url('./images/Resumep3.png');
    background-size: contain; /* Ensure entire image is visible */
    background-position: center center; /* Center the image */
    max-height: 700px; /* Set a maximum height for the carousel item */
   
}






 /*     PROJECTS      */

 .carousel-item--160 .carousel-item__image {
    background-image: url('./images/frontendsandbox3.png');
    background-size: contain; /* Ensure entire image is visible */
    background-position: center center; /* Center the image */
    max-height: 700px; /* Set a maximum height for the carousel item */
}


.carousel-item--161 .carousel-item__image {
    background-image: url('./images/projectsfront.png');
    background-size: contain; /* Ensure entire image is visible */
    background-position: center center; /* Center the image */
    max-height: 700px; /* Set a maximum height for the carousel item */
}

.carousel-item--162 .carousel-item__image {
    background-image: url('./images/clouds3.png');
    background-size: contain; /* Ensure entire image is visible */
    background-position: center center; /* Center the image */
    max-height: 700px; /* Set a maximum height for the carousel item */
}

.carousel-item--163 .carousel-item__image {
    background-image: url('./images/grafana1.png');
    background-size: contain; /* Ensure entire image is visible */
    background-position: center center; /* Center the image */
    max-height: 700px; /* Set a maximum height for the carousel item */
}
 
.carousel-item--164 .carousel-item__image {
    background-image: url('./images/travel.png');
    background-size: contain; /* Ensure entire image is visible */
    background-position: center center; /* Center the image */
    max-height: 700px; /* Set a maximum height for the carousel item */
}

.carousel-item--165 .carousel-item__image {
    background-image: url('./images/sabs.png');
    background-size: contain; /* Ensure entire image is visible */
    background-position: center center; /* Center the image */
    max-height: 700px; /* Set a maximum height for the carousel item */
}




 /*     CLOUD      */

.carousel-item--200 .carousel-item__image {
    background-image: url('./images/cloud.png');
    background-size: contain; /* Ensure entire image is visible */
    background-position: center center; /* Center the image */
    max-height: 700px; /* Set a maximum height for the carousel item */
}


.carousel-item--201 .carousel-item__image {
    background-image: url('./images/AWSCONSOLE.png');
    background-size: contain; /* Ensure entire image is visible */
    background-position: center center; /* Center the image */
    max-height: 700px; /* Set a maximum height for the carousel item */
}
    .carousel-item--202 .carousel-item__image {
    background-image: url('./images/AZURE.png');
    background-size: contain; /* Ensure entire image is visible */
    background-position: center center; /* Center the image */
    max-height: 700px; /* Set a maximum height for the carousel item */
}
    .carousel-item--203 .carousel-item__image {
    background-image: url('./images/GCP.png');
    background-size: contain; /* Ensure entire image is visible */
    background-position: center center; /* Center the image */
    max-height: 700px; /* Set a maximum height for the carousel item */  
}
.carousel-item--204 .carousel-item__image {
    background-image: url('./images/terraform.png');
    background-size: contain; /* Ensure entire image is visible */
    background-position: center center; /* Center the image */
    max-height: 700px; /* Set a maximum height for the carousel item */  
    
}




/* DevOps */  

.carousel-item--800 {
    display: flex; /* Enable flexbox layout */
    justify-content: space-between; /* Space out items */
    align-items: center; /* Vertically align items */
    flex-wrap: wrap; /* Allow items to wrap if the screen is smaller */
}

.carousel-item--800 .carousel-item__info {
    order: 1; /* Ensure this appears first (on the left) */
    flex: 1; /* Take up available space */
    max-width: 40%; /* Limit to 50% width */
}

.carousel-item--800 .carousel-item__video {
    order: 2; /* Ensure this appears second (on the right) */
    flex: 1; /* Take up available space */
    max-width: 60%; /* Limit to 50% width */
    text-align: right; /* Align video to the right within its container */
}

.carousel-item__media {
    width: 100%; /* Make video fill its container */
    height: auto; /* Maintain aspect ratio */
    max-height: 700px; /* Limit video height */
}

.carousel-item--801 .carousel-item__image {
    background-image: url('./images/githubvcontrol.png');
    background-size: contain; /* Ensure entire image is visible */
    background-position: center center; /* Center the image */
    max-height: 700px; /* Set a maximum height for the carousel item */  
}

.carousel-item--802 .carousel-item__image {
    background-image: url('./images/clouds3.png');
    background-size: contain; /* Ensure entire image is visible */
    background-position: center center; /* Center the image */
    max-height: 700px; /* Set a maximum height for the carousel item */  
}

.carousel-item--803 .carousel-item__image {
    background-image: url('.png');
    background-size: contain; /* Ensure entire image is visible */
    background-position: center center; /* Center the image */
    max-height: 700px; /* Set a maximum height for the carousel item */  
}

.carousel-item--804 {
    display: flex; /* Enable flexbox layout */
    justify-content: space-between; /* Space out items */
    align-items: center; /* Vertically align items */
    flex-wrap: wrap; /* Allow items to wrap if the screen is smaller */
}

.carousel-item--804 .carousel-item__info {
    order: 1; /* Ensure this appears first (on the left) */
    flex: 1; /* Take up available space */
    max-width: 40%; /* Limit to 50% width */
}

.carousel-item--804 .carousel-item__video {
    order: 2; /* Ensure this appears second (on the right) */
    flex: 1; /* Take up available space */
    max-width: 60%; /* Limit to 50% width */
    text-align: right; /* Align video to the right within its container */
}

.carousel-item__media {
    width: 100%; /* Make video fill its container */
    height: auto; /* Maintain aspect ratio */
    max-height: 700px; /* Limit video height */
}


.carousel-item--805 .carousel-item__image {
    background-image: url('./images/ansible.png');
    background-size: contain; /* Ensure entire image is visible */
    background-position: center center; /* Center the image */
    max-height: 700px; /* Set a maximum height for the carousel item */  
}
 

.carousel-item--806 .carousel-item__image {
    background-image: url('./images/eks.png');
    background-size: contain; /* Ensure entire image is visible */
    background-position: center center; /* Center the image */
    max-height: 700px; /* Set a maximum height for the carousel item */  
}

.carousel-item--807 .carousel-item__image {
    background-image: url('./images/grafana1.png');
    background-size: contain; /* Ensure entire image is visible */
    background-position: center center; /* Center the image */
    max-height: 700px; /* Set a maximum height for the carousel item */  
}

.carousel-item--808 .carousel-item__image {
    background-image: url('./images/sast.png');
    background-size: contain; /* Ensure entire image is visible */
    background-position: center center; /* Center the image */
    max-height: 700px; /* Set a maximum height for the carousel item */  
}
 







/*    FRONTEND    */ 


.carousel-item--300 .carousel-item__image {
    background-image: url('./images/travel.png');
    background-size: contain; /* Ensure entire image is visible */
    background-position: center center; /* Center the image */
    max-height: 700px; /* Set a maximum height for the carousel item */  
}



.carousel-item--301 .carousel-item__image {
    background-image: url('./images/frontrough.png');
    background-size: contain; /* Ensure entire image is visible */
    background-position: center center; /* Center the image */
    max-height: 700px; /* Set a maximum height for the carousel item */  
}
 
.carousel-item--302 .carousel-item__image {
    background-image: url('./images/frontsolutions.png');
    background-size: contain; /* Ensure entire image is visible */
    background-position: center center; /* Center the image */
    max-height: 700px; /* Set a maximum height for the carousel item */  
}
 
.carousel-item--303 .carousel-item__image {
    background-image: url('./images/sandbox.png');
    background-size: contain; /* Ensure entire image is visible */
    background-position: center center; /* Center the image */
    max-height: 700px; /* Set a maximum height for the carousel item */  
}
 







/*    EDUCATION    */ 

.carousel-item--400 .carousel-item__image {
    background-image: url('./images/educated.png');
    background-size: contain; /* Ensure entire image is visible */
    background-position: center center; /* Center the image */
    max-height: 700px; /* Set a maximum height for the carousel item */  
}

.carousel-item--401 .carousel-item__image {
    background-image: url('./images/bootcourse.png');
    background-size: contain; /* Ensure entire image is visible */
    background-position: center center; /* Center the image */
    max-height: 700px; /* Set a maximum height for the carousel item */  
}

.carousel-item--402 .carousel-item__image {
    background-image: url('./images/diploma2.png');
    background-size: contain; /* Ensure entire image is visible */
    background-position: center center; /* Center the image */
    max-height: 700px; /* Set a maximum height for the carousel item */  
}


/*    Solutions  */ 
.carousel-item--1000 .carousel-item__image {
    background-image: url('./images/cloudsolutions.png');
    background-size: contain; /* Ensure entire image is visible */
    background-position: center center; /* Center the image */
    max-height: 700px; /* Set a maximum height for the carousel item */  
}  



.carousel-item--1001 .carousel-item__image {
    background-image: url('./images/frontsolutions.png');
    background-size: contain; /* Ensure entire image is visible */
    background-position: center center; /* Center the image */
    max-height: 700px; /* Set a maximum height for the carousel item */  
}  

.carousel-item--1002 .carousel-item__image {
    background-image: url('./images/electrical.png');
    background-size: contain; /* Ensure entire image is visible */
    background-position: center center; /* Center the image */
    max-height: 700px; /* Set a maximum height for the carousel item */  
}  

.carousel-item--1005 .carousel-item__image {
    background-image: url('./images/audi.png');
    background-size: contain; /* Ensure entire image is visible */
    background-position: center center; /* Center the image */
    max-height: 700px; /* Set a maximum height for the carousel item */  
}  



.carousel-item--3 .carousel-item__image {
    background-image: url('https://images.pexels.com/photos/92733/pexels-photo-92733.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260');
  }

  .carousel-item--4 .carousel-item__image {
    background-image: url('https://images.pexels.com/photos/1008732/pexels-photo-1008732.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260');
  }

  .carousel-item--5 .carousel-item__image {
    background-image: url('https://images.pexels.com/photos/1029614/pexels-photo-1029614.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940');
  }
  



}

       
  </style>