@media (max-width: 768px) {

{
    border: 1px solid red; /* Temporary border for debugging */
}

{
	overflow: hidden;
	}

h3  {
	font-size: clamp(24px, 3vw, 36px);
	}

.cyber-world {
	font-size: clamp(20px, 5vw, 28px); /* Smaller font size */
    }

.banner {
	text-align: center; /* Center text */
	overflow: hidden;
	width: 100%;
	display: flex;
    }

nav {
    position: relative; /* Set position to relative for absolute positioning of the menu */
    flex-wrap: wrap;
    padding: 0; /* Remove any default padding */
    margin-left: auto;
}

.menu {
    display: none; /* Hide menu by default */
    flex-direction: column; /* Stack items vertically */
    position: absolute; /* Position the menu absolutely */
    top: 100%; /* Position it below the nav */
    left: 0; /* Align it to the left */
    text-align: left; /* Ensure text is aligned to the left */
}

.menu > li {
	position: relative;
    display: block; /* Stack menu items vertically */
    margin: 10px 0; /* Space between items */
    width: 100%;
    }

.hamburger {
    padding: 10px; /* Add some padding for better clickability */
    margin-right: 10px;
    cursor: pointer; /* Change cursor to pointer on hover */
    font-size: 30px; /* Adjust size as needed */
    color: white; /* Change color to match your design */
    transition: background-color 0.3s; /* Smooth transition for background color */
    display: block;
    position: static;
    margin-left: auto; /* Remove extra margins */
}

.hamburger:hover {
    background-color: rgba(255, 255, 255, 0.2); /* Change background on hover */
}

.hamburger.x {
    /* Styles for the "X" state */
    position: relative; /* Position relative for absolute children */
}

.hamburger.x:before,
.hamburger.x:after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 4px; /* Thickness of the lines */
    background-color: white; /* Color of the lines */
    transition: transform 0.3s ease; /* Smooth transition */
}

.hamburger.x:before {
    top: 50%; /* Center vertically */
    transform: rotate(45deg); /* Rotate to form one line of the "X" */
}

.hamburger.x:after {
    top: 50%; /* Center vertically */
    transform: rotate(-45deg); /* Rotate to form the other line of the "X" */
}

.menu.active {
    display: flex; /* Show menu when active */
    position: fixed; /* Make the menu absolute */
    top: 70px; /* Adjust this value based on your layout */
	left: 50px;
    background-color: #192841;
    text-align: left;
    padding: 0px 14px;
    height: calc(100vh - 107px); /* Adjust height to fill the viewport minus the nav height */
    overflow-y: auto; /* Allow scrolling if content exceeds the height */
    width: 85%; /* Set the desired width for the active menu */
    z-index: 1000; /* Ensure it appears above other elements */
    text-align: center;
    border-left: 1px solid #B0B3B8;
}

.menu.active>li{
	text-align: left;
	}
	
.so-bbbar {
	margin: 0;
	width: auto;
	margin-right: auto;
	}

.cross-button {
	padding: 10px; /* Add some padding for better clickability */
    margin-right: 10px;
    cursor: pointer; /* Change cursor to pointer on hover */
    font-size: 30px; /* Adjust size as needed */
    color: white; /* Change color to match your design */
    transition: background-color 0.3s; /* Smooth transition for background color */
    display: block;
    position: static;
    margin-left: auto; /* Remove extra margins */
    }

    /* ----------------------new addition starts ------------------------ */

.pie {
    display: inline-block;
    vertical-align: middle;
    margin: 10px 0px 10px 10px; /* Adjust horizontal spacing as desired */
    width: 13%;
    text-decoration: none;
    }

.cyber-world {
    display: inline-block;
    vertical-align: middle;
    margin: 10px 0px; /* Adjust horizontal spacing as desired */
    width: 40%;
    }
 
.menu .mobile-social,
.menu .mobile-download {
    display: block;  /* Make sure they appear as block elements in the menu */
    margin: 10px 0;  /* spacing to separate from standard menu items */
    text-align: center;
    }
   
    .mobile-social {
        height: 36px; /* Set the desired height */
        display: flex; /* Ensure it is a flex container */
        align-items: center; /* Center items vertically */
        justify-content: flex-end; /* Align items to the right */
        margin: 10px 0; /* Adjust margin as needed */
        width: 100%;
    } 
    
.download-bbbar {
    padding: 8px 12px; /* Adjust padding for smaller screens */
    }

.dropdown {
    position: absolute;
    background-color: #192841;
    border: 1px solid #cccccc;
    padding: 0px;
    list-style: none;
    z-index: 2000;
    white-space: nowrap;
    border-radius: 3px;
    top: 100%;
    left: 0;
    text-align: left;
    width: 80vw; /* Set width */
    height: calc(40vh - 10px);
	align-items: center; /* Center items vertically */
    justify-content: flex-end; /* Align items to the right */
}

    /* ----------------------experiance section starts here------------------------ */
    
.experience-container {
    position: relative;
    height: 95vh; /* Full height of the viewport */
    width: 100%;
}

.experience {

    max-width: 600px; /* Optional: Limit the width for better readability on smaller screens */
}

/* ----------------------experiance section ends here------------------------ */

/* --------------------------- badges slides -----------------------  */

.skills {
        height: 95vh;
        width: 100%; /* Full width of the viewport */
       /* background: #282F37; */
        padding: 0;
        overflow: hidden;
        }

    .slides {
        position: relative;
        width: 100%;
        height: 100%;
        max-height: 28vh;
        overflow: hidden;
    }

    .slide {
        position: absolute; /* Position slides absolutely */
        width: 100%; /* Full width */
        height: 100%; /* Full height */
        display: flex; /* Use flexbox for centering */
        justify-content: center; /* Center horizontally */
        align-items: center; /* Center vertically */
        background-color: #282F37; /* Background color for visibility */
        opacity: 0; /* Start hidden */
        transition: opacity 0.5s ease; /* Smooth transition */
        visibility: hidden; /* Hide the slide */
        overflow: hidden;
    }

    .slide.active {
        opacity: 1; /* Fully visible */
        visibility: visible; /* Make it visible */
    }


.skl-btt {
    display: flex; /* Use flexbox for button alignment */
 
}

/* Button styles for responsive design */
    .prev, .next {
        position: relative;
        background-color: #007BFF; /* Button background color */
        color: white; /* Button text color */
        border: none; /* Remove border */
        padding: 8px 12px; /* Adjust padding for a sleeker look */
        cursor: pointer; /* Change cursor on hover */
        border-radius: 20px; /* Make the buttons more rounded */
        font-size: 14px; /* Adjust font size */
        transition: background-color 0.3s; /* Smooth transition for hover effect */
        display: block;
    }

    .prev:hover, .next:hover {
        background-color: #0056b3; /* Darker shade on hover */
    }

    .badgr-badge {
        width: 100%; /* Set max width for badges */
        margin: 0; /* Center the badge */
        padding: 0 20px; /* Add left and right padding */
    }

/* --------------------------- end of badges slides ------------------------- */
.card-container{
	position: relative;
	}

.card-fortiles {
    height: 75vh; /* Keep the height of the container */
    display: flex; /* Ensure flexbox is applied */
    justify-content: flex-start; /* Align cards to the left */
    padding: 0; /* Add padding on the left and right */
    margin: 0;
    max-width: 100%;
    flex-direction: column; /* Stack content vertically */
    position: relative;

}

.card {
	position: relative;
    display: flex; /* Use flexbox for the card */
    flex-direction: row; /* Align image and content side by side */
    width: calc(92% - 30px); /* Adjust width to account for margins */
    padding: 10px 0 10px 10px;
    max-height: 150px; /* Set maximum height */
    margin: 5px 0; /* Use uniform margin */
    overflow: hidden; /* Ensure content does not overflow */
    background-color: rgba(126, 94, 96, 0.8); /* Semi-transparent background for readability */
    }

.fnt-text {
    position: absolute; /* Position the text absolutely within the card */
    top: 50%; /* Center vertically */
    transform: translateY(-50%) rotate(90deg); /* Rotate the text and center it */
    white-space: nowrap; /* Prevent text from wrapping */
    font-size: 48px; /* Adjust font size as needed */
    color: white; /* Set text color for visibility */
    z-index: 3; /* Ensure it appears above other elements */
    font-weight: bold; /* Make the font bold */
    letter-spacing: 10px; /* Add space between letters (adjust as needed) */
    right: -127px;
}

.card-image {
    flex: 0 0 40%; /* Set the image to take up 40% of the card width */
    position: relative; /* Position relative to the card */
    overflow: hidden; /* Ensure the image does not overflow */
}

.card-image img {
    width: 100%; /* Full width of the image container */
    height: auto; /* Maintain aspect ratio */
    object-fit: cover; /* Cover the area while maintaining aspect ratio */
}

.card-content {
    flex: 1; /* Allow content to take the remaining space */
    z-index: 2; /* Set a higher z-index to place it above the image */
    display: flex; /* Use flexbox for the content */
    flex-direction: column; /* Stack content vertically */
    justify-content: center; /* Center content vertically */
    color: lightgrey; /* Set text color for visibility */
    overflow: hidden;
    border-top-right-radius: 0; /* Remove border radius on the top right */
    border-bottom-right-radius: 0; /* Remove border radius on the bottom right */
    }

.card-content h2,
.card-content p {
    margin: 0;
    overflow: hidden; /* Prevent overflow */
    margin-bottom: 8px;
    text-overflow: ellipsis; /* Show ellipsis for overflowed text */
}

.contact-content {
    display: flex;
    flex-direction: column; /* Stack elements vertically */
}

/* --------------------------- end of cards slides ------------------------- */

.dummy-text,
.form-container {
      width: 100%; /* Make both sections full width */
      margin-bottom: 20px; /* Add some space between the rows */
    }

.dummy-text {
      order: 1; /* Dummy text first */
    }

.form-container {
      order: 2; /* Form second */
    }

    /* Reduce the width of input fields and textarea */
.form-group input,
.form-group textarea {
      width: 80%; /* Set to 80% of the parent container */
      max-width: 300px; /* Optional: Set a maximum width */
      margin: 0 auto; /* Center the input fields */
    }
    
.con-button{
	width: 80%;
	}
}

*{
box-sizing: border-box; /* Apply box-sizing globally */
}

@media (min-width: 768px) {
    .cross-button {
        display: none !important; /* Force hide the cross button */
    }
}