.gulf-war {
    background-image: url('wp-content/uploads/2024/03/gulfwar3.jpeg');
    background-size: cover;
    background-position: center;
    height: 500px;
    width: 100%;
}

.obomba-banner {
    

    width: 100%;
    padding: 0%;
    max-height: 900px;
}
.about-div {
    background-image: url('wp-content/uploads/2024/03/obomba_smoking_that_pack.jpeg');
    background-size: cover;
    background-position: center;
    min-height: 100vh;
    width: 100%;
}

.e-con-inner {
    background-color: #B4B5B9;
}
.about {
    background-color: white;
}
.elementor-element-DLhhlaz2 {
    background-color: #B4B5B9;
}
.home{
    background-color: #B4B5B9;
}
.elementor-element-DLhhlaz2{
    height:100px;
}
.text-white {
    color:white;
}
.text-black {
    color:black;
}
.website-icon {
    height: 60px;
    width: 60px;
}

.about-heading {
    color: black;

}
.telegram-inner-div{
    display:flex;
    justify-content: space-between;
    background-color: white;
}

.figure-img {
    width: auto;
    height: auto;
    min-width: 300px;
    min-height: 300px;
}
.background-black{
    background-color: black;
}

.background-white{
    background-color: white;
}
.transparent-background {
    background-color: rgba(255, 255, 255, 0); /* This makes the background fully transparent */
}

.buttons-container {
    display: flex;
    justify-content: space-around;
    margin-top: 20px; /* Adjust based on your layout */
}

.animated-button {
    background-color: #007bff; /* Button color */
    color: white; /* Text color */
    border: none;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    border-radius: 5px; /* Rounded corners */
    transition: transform 0.3s ease; /* Animation */
    cursor: pointer; /* Hand cursor on hover */
}

.animated-button:hover {
    transform: scale(1.1); /* Slightly enlarge the button on hover */
}

.image-container {
    text-align: center; /* Center the image in its container */

}

.buttons-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* If the buttons can't fit in one row, they will wrap to the next */
}

.animated-button {
    flex: 1;
    margin: 5px; /* Space around the buttons */
    background-color: #007bff; /* Button color */
    color: white; /* Text color */
    border: none;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    border-radius: 5px; /* Rounded corners */
    transition: transform 0.3s ease; /* Animation */
    cursor: pointer; /* Hand cursor on hover */
}

.animated-button2 {
    flex: 1;
    width:100%;
    margin: 5px; /* Space around the buttons */
    background-color: red; /* Button color */
    color: white; /* Text color */
    border: none;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    border-radius: 5px; /* Rounded corners */
    transition: transform 0.3s ease; /* Animation */
    cursor: pointer; /* Hand cursor on hover */
}

.about-section {
    height: 75vh;
    display: none;
}
.animated-button:hover {
    transform: scale(1.05); /* Button grow effect on hover */
}


.transparent-background {
    position: relative; /* Set relative positioning as a reference for absolute children */
}

.elementor-element-oWp5fb4E .elementor-widget-container {
    position: absolute;
    left: 0;
    top: 0;
}

.text-white p {
    color: #fff; /* This will make the text white. Make sure it is visible against the background */
}

.flying-plane-container {
    position: absolute;
    overflow: hidden; /* Prevents the plane from causing scrollbars when it's outside of the container */
    position: absolute; /* Position the overlay content absolutely */
  top: 0; /* Align to the top of the container */
  left: 0; /* Align to the left of the container */
  right: 0; /* Align to the right of the container */
  bottom: 0;
    
}

.flying-plane {
    position: absolute;
    width: 50vh;
    height: auto;
    animation-name: flyPlane;
    animation-duration: 5s; /* Animation duration explicitly set to 5 seconds */
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    
}




@keyframes flyPlane {
    0%, 100% {
        top: -20%; /* Starts outside the screen */
        left: -20%;
        transform: translateX(0) rotate(0deg);
    }
    25% {
        top: 10%; /* Jitter effect */
        left: 30%;
        transform: translateX(-50%) rotate(-5deg);
    }
    50% {
        top: 5%; /* Jitter effect */
        left: 60%;
        transform: translateX(-50%) rotate(5deg);
    }
    75% {
        top: 10%; /* Jitter effect */
        left: 90%;
        transform: translateX(-50%) rotate(-3deg);
    }
    95% {
        top: -20%;
        left: 110%; /* Goes outside of the screen */
        transform: translateX(-100%) rotate(0deg);
    }
}



.bomb {
    position: absolute;
    width: 8vh; /* Adjust to fit your bomb image */
    height: auto; /* Maintain aspect ratio */
    opacity: 0; /* Start fully transparent */
    animation: dropBomb 5s linear infinite;
    
    left: 25%; /* Start the bomb drop from 25% in from the left side of the screen */
    z-index: 1000; /* Ensure it's above other elements */
}
@keyframes dropBomb {
    0%, 24% {
        opacity: 0;
        top: 15%;
    }
    24.01% {
        opacity: 1;
        top: 15%;
    }
    50% {
        opacity: 1;
        top: 70%;
    }
    50.1% {
        opacity: 0;
        top: 70%;
    }
    /* Assuming the explosion starts at 50.1%, and we reset by 100% for the next cycle */
    100% {
        opacity: 0;
        top: 15%; /* Reset position for next drop if needed */
    }
}



@keyframes explosionEffect {
    from {
        opacity: 0;
        width: 0vh; /* Start small */
        height: 0vh;
        border-radius: 50%;
        background-color: yellow; /* Initial explosion color */
    }
    to {
        opacity: 1;
        width: 20vh; /* Expand */
        height: 20vh;
        border-radius: 50%;
        background-color: red; /* End explosion color */
        border: none;
    }
}

.about-big-time {
    position: absolute;
    left: 60%;
    top: 40%;

}
.explosion {
    position: absolute;
    left:24%;
    top:70%;
    z-index: 101000; /* Above the bomb */
    width: 200px;
    display: none;
  
}

#explosion {
    display: none; /* Hide the GIF initially */
}/* General styles for bombs - no change needed */
.bomb {
    position: absolute;
    width: 8vh;
    height: auto;
    opacity: 0; /* Start fully transparent */
    animation-duration: 5s; /* Keep in sync with JavaScript timing */
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    z-index: 1000; /* Ensure it's above other elements */
}

/* Specific positioning and animations for each bomb */
.bomb1 {
    animation-name: dropBomb1;
    left: 25%; /* Original bomb position */
}
.bomb2 {
    animation-name: dropBomb2;
    left: 50%; /* Second bomb position */
}
.bomb3 {
    animation-name: dropBomb3;
    left: 75%; /* Third bomb position */
}

/* Adjust keyframes for each bomb to control their dropping timing and opacity */
@keyframes dropBomb1 {
    0%, 20%, 100% {
        opacity: 0;
    }
    21% {
        opacity: 1;
        top: 15%;
    }
    40% {
        opacity: 1;
        top: 70%;
    }
    41% {
        opacity: 0;
    }
}

@keyframes dropBomb2 {
    0%, 45%, 100% {
        opacity: 0;
    }
    46% {
        opacity: 1;
        top: 15%;
    }
    65% {
        opacity: 1;
        top: 70%;
    }
    66% {
        opacity: 0;
    }
}

@keyframes dropBomb3 {
    0%, 70%, 100% {
        opacity: 0;
    }
    71% {
        opacity: 1;
        top: 15%;
    }
    90% {
        opacity: 1;
        top: 70%;
    }
    91% {
        opacity: 0;
    }
}

/* General styles for explosions - no change needed */
.explosion {
    position: absolute;
    z-index: 101000; /* Above the bomb */
    display: none;
}

/* Specific positions for each explosion */
.explosion1 {
    left: 24%;
    top: 70%;
}
.explosion2 {
    left: 49%;
    top: 70%;
}
.explosion3 {
    left: 74%;
    top: 70%;
}


.invisible-text {
    color: rgba(0, 0, 0, 0); /* Transparent color */
}

.aboot {
    position: absolute;
    top: 7%;
    right: 3%;
    width: 35vw;
    font-family: 'Coming Soon', sans-serif;
    font-size: 1.5vw;
}
.aboot-content {
  
    width: 28vw;
    font-family: 'Coming Soon', sans-serif;
    font-size: 1.5vw;
}

.aboot-header {
    font-family: 'Coming Soon', sans-serif;
    position: absolute;
    font-size: 8vw;
    color: rgb(1, 73, 171);
    top: 3%;
    right: 70%;
}
.big-links {
    position: absolute;
    top:35%;
    left:56%;
}

.section2{
    height: 100vh;
}


.image-container {
    position: relative;
    width: 100%; /* Container takes the full width of the parent */
    height: auto; /* Height is determined by the content */
    overflow: hidden; /* Ensures no overflow of the image */
  }
  
  .responsive-image {
    width: 100%; /* Image takes the full width of its parent */
    height: auto; /* Height is adjusted to maintain aspect ratio */
    max-height: 95vh;
    display: block; /* Removes bottom margin/whitespace inherent to inline elements */
  }

  #toggleButton {
    width: 72px;
    height: 72px;
    z-index: 100000;
    position: absolute;
    bottom:54%;
    left:38%;
    
    background: none;
    border: none;
    cursor: pointer;
    outline: none;
  }