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

.hero{
width:100%;
height:100vh;
position:relative;
overflow:hidden;
}

.bg-video{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
object-fit:cover;
z-index:-2;
}

.overlay{
position:absolute;
width:100%;
height:100%;
background:rgba(0,0,0,.45);
z-index:-1;
}

header{
position:absolute;
top:40px;
right:80px;
}

.logo img{
max-width:40%;
}

@media screen and (max-width: 768px) {
  .logo img {
    max-width: 100%; /* Limits the maximum width */
    height: auto;     /* Preserves the original aspect ratio */
  }
}

.content{
position:absolute;
right:8%;
top:35%;
color:#fff;
max-width:550px;
}

.content h1{
font-size:38px;
line-height:1.2;
font-weight:300;
padding-left:30px;
}

.brands{
position:absolute;
bottom:40px;
left:50%;
transform:translateX(-50%);
background:#fff;
border-radius:80px;
padding:30px;
width:90%;
}

.brand-slider{
display:flex;
justify-content:space-around;
align-items:center;
gap:50px;
}

.brand-slider img{
height:60px;
}

.whatsapp{
position:fixed;
right:25px;
bottom:25px;
width:65px;
height:65px;
background:#25d366;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:34px;
color:#fff;
text-decoration:none;
box-shadow:0 10px 25px rgba(0,0,0,.4);
}

.popup{
    position:absolute;
    bottom:90px;
    left:50%;
    transform:translateX(-50%);
    background:#fff;
    color:#000;
    padding:18px 25px;
    border-radius:8px;
    font-size:18px;
    text-align:center;
    min-width:220px;
    opacity:0;
    visibility:hidden;
    transition:.35s;
}

.popup::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:-14px;
    transform:translateX(-50%);
    border:14px solid transparent;
    border-top-color:#fff;
}

.logo-item:hover .popup{
    opacity:1;
    visibility:visible;
    bottom:105px;
}

.logo-section{
    display:flex;
    justify-content:center;
    gap:40px;
    padding:80px;
    background:#fff;
    border-radius:50px;
}

.logo-item{
    position:relative;
    cursor:pointer;
}

.logo-item img{
    height:60px;
}

.popup{
    position:absolute;
    bottom:90px;
    left:50%;
    transform:translateX(-50%);
    width:240px;
    background:#fff;
    border-radius:10px;
    box-shadow:0 10px 30px rgba(0,0,0,.25);
    overflow:hidden;
    opacity:0;
    visibility:hidden;
    transition:.35s;
}

.popup img{
    width:100%;
    display:block;
}

.popup h4{
    padding:15px;
    text-align:center;
    margin:0;
    font-size:18px;
}

.popup::after{
    content:'';
    position:absolute;
    bottom:-15px;
    left:50%;
    transform:translateX(-50%);
    border-width:15px 15px 0;
    border-style:solid;
    border-color:#fff transparent transparent;
}

.logo-item:hover .popup{
    opacity:1;
    visibility:visible;
    bottom:105px;
}

/* Base styles for the button */
        .my-button {
            background-color: #006600;
            color: white;
            padding: 20px 30px;
            font-size: 18px;
            border: none;
            border-radius: 50px;
            cursor: pointer;
			 
			
            
            /* Crucial: Smooths the transition over 0.3 seconds */
            transition: background-color 0.3s ease, transform 0.2s ease;
        }

        /* Hover styles triggered when the mouse moves over the button */
        .my-button:hover {
            background-color: #0056b3; /* Darker blue shade */
            transform: scale(1.05);     /* Slightly enlarges the button */
        }