@font-face {
    font-family: "Montserrat Bold";
    src: url(./Montserrat-Bold.ttf);
}
@font-face {
    font-family: "Montserrat Regular";
    src: url(./Montserrat-Regular.ttf);
}
@font-face {
    font-family: "Montserrat Medium";
    src: url(./Montserrat-Medium.ttf);
}
body h1{
    font-family: "Montserrat Bold"!important;
}
body p{
    font-family: "Montserrat Regular"!important;
}
body a{
    font-family: "Montserrat Medium"!important;
}

.headerMenu {
    display: flex;
    justify-content: space-around;
    margin-top: 1.5%!important;
  }
  .headerMenu a{
    color:#27c0e8;
}
  .headerMenu a:hover {
    text-decoration: none;
  }
  
  .hamburger {
    display: none; /* Hide hamburger by default */
    font-size: 24px;
    cursor: pointer;
  }
  
  .mobileMenu {
    display: none; /* Hide mobile menu by default */
    flex-direction: column;
    position: absolute; /* Absolute positioning */
    top: 5%; /* Adjust based on your layout */
    left: 0; /* Align it to the left */
    background-color: white; /* Change as needed */
    width: 100%;
    z-index: 1000; /* Ensure it's on top */
    animation: slideIn 0.3s ease; /* Animation */
  }
  
  .mobileMenu a {
    padding: 10px;
    text-align: center;
    border-top: 1px solid #ccc; /* Optional separator */
  }
  
  .socialMediaLogo{
    text-align: center;
}
.socialMediaLogo a{
    text-decoration: none;
}
.socialMediaLogo a:hover{
    text-decoration: none;
}
  @keyframes slideIn {
    from {
        transform: translateY(-20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
  }

  
.droneMainPicClass{
    position: relative;
    overflow: hidden;
}
.droneMainPicClass pre{
    color: white;
    overflow: hidden;
    font-size: 55px;
    line-height: 1;
    font-family: "Montserrat Bold";
}
.text-block {
    position: absolute; 
    bottom: 20%;
    right: 53%;
    color: white!important;
    padding-left: 20px;
    padding-right: 20px;
}
.droneSecondInformationCard{
    position: relative;
}
.text-block-second-pic{
    position: absolute; 
    bottom: 27%;
    right: 1%;
    color: white!important;
    padding-left: 20px;
    padding-right: 20px;
}
.text-block-second-pic pre{
    color: white;
    overflow: hidden;
    font-size: 55px;
    line-height: 1;
    font-family: "Montserrat Bold";
}
.buttonFordroneMainInfoClass{
    background-color: transparent!important;
    border-radius: 15px!important;
    border-color: white!important;
}
.droneMainInformationCard{
    display: flex;
    justify-content: space-around;
    margin-top: 5%;
    margin-bottom: 5%;
    color: white;
}
.cardInfo{
    width: 25%;
    background-color: #0eaacc;
    border-radius: 45px;
}
.cardInfoHeader{
    text-align: center;
}
.cardInfoText{
    margin-left: 5%;
}
.cardInfoFooter{
    padding-bottom:10%;
    text-align: center;
}
.cardInfo h2{
    text-align: center;
    font-family: "Montserrat Bold";
}
.video-container {
    position: relative;
    width: 100%;
    margin-top:1%;
    overflow: hidden;
}

.video-container video {
    width: 100%;
    object-fit: cover; /* Ensure video covers the container */
}

.overlay-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 6em;
    font-weight: bold;
    text-align: center;
    animation: fadeIn 2s ease-in-out infinite alternate;
}

.footer{
    background-color: #1b1b1b;
    color: white;
    justify-content: space-around;
    padding-top: 6%;
    padding-bottom: 6%;
}
.footerText{
    width: 50%;
    position: relative;
    left: 7%;
}
.footerInput{
    width:50%;
    position: relative;
}
.inputGroup{
    width: 50%!important;
}
.buttonContactUsFooter{
    margin-top:3%;
    background-color: #27c0e8;
    color: white;
    border: none;
    border-radius: 10px;
    padding:1% 3% 1% 3%;
}
.serviceLastSection{
    display: flex;
    justify-content: space-around;  
    width: 100%;

}
.discoverService{
    text-align: center;
    width: 100%;
    margin-top: 4%;
}
.discoverService h1{
    color:#10223E;
    font-size: 80px;
}
.discoverService p {
    color: #787878;
    font-size: 34px;
}
.container1 {
    display: flex;
    justify-content: space-between; /* Even spacing between items */
    gap: 20px; /* Optional, for space between divs */
    padding: 2% 8% 8% 8%;
}

/* Each item is a flex container to ensure its content (text) stays at the bottom */
.droneService {
    position: relative; /* Needed to position text at the bottom */
    flex: 1; /* Ensure the items take up equal space */
    height: 550px; /* Set a fixed height for the items */
    background-size: cover; /* Make the background image cover the entire div */
    background-position: center; /* Center the image */
    border-radius: 50px;
}

.text {
    position: absolute;
    bottom: 1%;
    border-radius: 46px;
    left: 1%;
    width: 98%;
    background-color: #EDF1F0;
    color: black;
    padding: 6% 6% 2% 6%;
    font-size: 18px;
}
.text p{
    font-size:13px;
}
@media screen and (max-width: 1570px) {
    .droneMainPicClass h1{
        font-size: 35px;
    }
    .droneSecondInformationCard h1{
        font-size: 35px;
    }
}
@media screen and (max-width: 1500px) {
    .droneMainPicClass h1{
        font-size: 30px;
    }
    .droneSecondInformationCard h1{
        font-size: 30px;
    }
    p{
        font-size: 15px;
    }
    p{
        font-size: 15px;
    }
}
@media screen and (max-width: 1430px) {
    .droneMainPicClass h1{
        font-size: 30px;
    }
    .droneSecondInformationCard h1{
        font-size: 30px;
    }
    p{
        font-size: 10px;
    }
    p{
        font-size: 10px;
    }
}
@media screen and (max-width: 768px) {
    .droneMainPicClass pre{
        font-size: 33px;
    }
    .droneMainPicClass h1{
        font-size: 25px;
    }
    .droneSecondInformationCard h1{
        font-size: 25px;
    }
    p{
        font-size: 11px;
    }
    .headerMenu{
        justify-content: space-between;
        font-size: 13px;
    }
    .text-block {
        bottom: 15%;
    }
    .text-block-second-pic{
        right:0%;
    }
    .cardInfoFooter a{
        font-size: small;
    }
    .text-block a{
        font-size: small;
    }
    .text-block-second-pic a {
        font-size: small;
    }
    .text-block-second-pic{
        padding-left:0%;
        padding-right: 0%;
        width: 45%;    
        bottom: 11%;
    }
    .text-block-second-pic pre {
        font-size: 33px;
    }
    .container1{
        flex-direction: column;
        height: 2000px;
    }
}

@media (max-width: 600px) {
    .headerMenu {
        display: none; /* Hide header menu on small screens */
    }
    .hamburger {
        display: block; /* Show hamburger icon */
        margin-right: 5%;
    }
    .mobileMenu {
        display: none; /* Still hidden until toggled */
    }
    .socialMediaLogo{
      padding: 0% !important;
      text-align: left;
    }
    .socialMediaLogo img{
      margin-top:2%;
    }
    .colLogo{
      padding-right:0%!important
    }
    .droneMainPicClass img{
        height: 210px;
    }
    .text-block {
        bottom: 10%;
        width: 100%;
        right: -4%;
    }
    .text-block h1{
        font-size: medium;
    }
    .text-block p{
        font-size: xx-small;
    }
    .droneMainInformationCard{
        flex-direction: column;
        align-items: center;
    }
    .cardInfo{
        width: 80%;
        margin-bottom: 6%;
    }
    .text-block-second-pic{
        width: 95%;
        right: 3%;
        bottom:20%;
    }
    .text-block-second-pic h1{
        font-size: medium;
    }
    .text-block-second-pic p{
        font-size: xx-small;
    }
    .droneSecondInformationCard {
        margin-top:15%;
    }
    .droneSecondInformationCard img{
        height: 245px;
    }
    .footer {
        flex-direction: column;
    }
    .footerInput{
        width: 93%;
        left:7%;
    }
    .footerText{
        width: 93%;
    }
    .inputGroup{
        width: 70%!important;
    }
  }