body {
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: rgb(255, 255, 255);
}
        html {
            scroll-behavior: smooth;
        }
.header {
    width: 100%;
    height: 45px;
    background-color: #333DA5;
}

.header2 {
    width: 100%;
    height: 80px;
    display: flex;
    align-items: center;
    background-color: rgb(255, 255, 255);
}

.header2 ul {
    display: flex;
    justify-content: space-evenly;
    list-style: none;
    /* Important: remove bullets */
    margin: 0;
    padding: 0;
}

.header2 ul li {
    position: relative;
    /* Crucial for absolute positioning of submenu */
    padding: 0 20px;
    /* Space between main menu items */
}

.header2 ul li a {
    color: #273272;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
}

.header2 ul li a:hover {
    color: #151c46;
    text-decoration: none;
    font-size: 14px;
    font-weight: 650;

}
/* Submenu styles */
.header2 ul li ul {
    display: none;
    position: absolute;
    top: 100%;
    /* Directly below the parent li */
    left: 0;
    background-color: rgb(255, 255, 255);
    min-width: 150px;
    padding: 30px 0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    /* Optional: nice shadow */
}

.header2 ul li ul li {
    padding: 8px 20px;
    color: #273272;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

.header2 ul li ul li a {
    color: #273272;
    text-decoration: none;
}
.header2 ul li ul li a:hover {
    color: #273272;
    font-weight: 700;
    text-decoration: none;
}
/* Show submenu on hover */
.header2 ul li:hover>ul {
    display: block;
}

.container-lg {
    width: 100%;
    height: 45px;
    background-color: #333DA5;
}

#hc {
    width: 100%;
    height: 45px;
    margin: 0;
    color: white;
    display: flex;
    align-items: center;
    font-size: 18px;
}

#hc .spanc {
    display: block;
}

.img {
    margin: 10px auto;
    width: 100%;
    height: 500px;
    background: linear-gradient(rgba(183, 0, 255, 0.212), rgba(174, 0, 255, 0.4)),
        url(img/main.jpg);
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    text-align: center;
}

.img h2 {
    font-size: 50px;
}

.img p {
    font-size: 20px;
}




#social {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#social i {
    color: rgb(255, 255, 255);
    padding: 0px;
}

#buttoncolumon {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

#buttoncolumon a {
    background-color: #333DA5;
    padding: 8px 20px;
    font-size: 16px;
    color: white;
    border-radius: 5px;
    transition:0.6s;

}


#buttoncolumon a:hover {
    background-color: transparent;
    padding: 8px 20px;
    font-size: 16px;
    color: #333DA5;
    border-radius: 5px;
    border: 1px solid #333DA5;
    text-decoration: none;
transition:0.6s;
}

.img h2 {
    font-size: 60px;
    font-weight: 700;
    color: white;
}

.img p {
    width: 30%;
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    color: white;
}

.img a {
    background-color: rgba(165, 42, 42, 0);
    border: 2px solid white;
    padding: 8px 20px;
    font-size: 16px;
    color: white;
    border-radius: 5px;
    margin-top: 20px;
    transition: 0.5s;
    text-decoration: none;
}

.img a:hover {
    background-color:white;
    border: 2px solid white;
    padding: 8px 20px;
    font-size: 16px;
    color: black;
    border-radius: 5px;
    margin-top: 20px;
     transition: 0.5s;
      text-decoration: none;
}

#info {
    padding:70px 10px;

}



#info h4 {
    font-size: 20px;
    font-weight: 700;
    padding: 10px;
    color: #333DA5;
}

#info h2 {
    font-size: 30px;
    font-weight: 700;
    padding: 10px;

}

#info p {
    font-size: 14px;
    font-weight: 400;
    padding: 10px;

}

#info img {
    width: 80%;
    height: auto;

}

.featuresection {

    background-color: rgba(108, 133, 245, 0.089);
    padding-top: 20px;
    padding-bottom: 20px;

}

.featuresection2 {

    background-color: rgba(108, 133, 245, 0.089);
    padding-top: 20px;
    padding-bottom: 20px;

}

#feature div {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

#feature .box1 {
    width: 90%;
    height: 300px;
    color: #333DA5;
    background-color: rgb(255, 255, 255);
    border-radius: 10px 10px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.144);
    transition: 0.3s;
}

#feature .box1:hover {
    width: 90%;

    color: white;
    background-color: #333DA5;
    border-radius: 10px 10px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;

    box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.144);
    text-align: center;
     transition: 0.5s;
}

#feature .box1c {
    width: 90%;
    height: 340px;
    color: white;
    background-color: #333DA5;
    border-radius: 10px 10px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    margin-top: -40px;
    box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.144);
       transition: 0.3s;
}

#feature .box1c:hover {
    width: 90%;
    
    color: black;
    background-color: white;
    border-radius: 10px 10px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;

    box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.144);
    text-align: center;
     transition: 0.5s;
}


#feature i {
    font-size: 60px;
}

#feature h3 {
    font-weight: 700;
}

#feature p {
    font-weight: 400;
    text-align: center;

}


#feature2 {
    padding: 0px 0px;
    margin: auto;
}

#feature2 div {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

#feature2 .box1 {
    width: 90%;
    height: 350px;
    color: #333DA5;
    background-color: rgb(255, 255, 255);
    border-radius: 10px 10px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    margin-top: 20px;
    box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.144);
    text-align: center;
    transition: 0.3s;
}

#feature2 .box1:hover {
    width: 90%;
    height: 350px;
    color: white;
    background-color: #333DA5;
    border-radius: 10px 10px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    margin-top: 20px;
    box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.144);
    text-align: center;
     transition: 0.5s;
}

#feature2 h3 {
    font-weight: 700;
}

#feature2 p {
    font-weight: 400;
    text-align: center;
   
}

#feature2 a {
    font-size: 14px;
    color: white;
    background-color: #333DA5;
    padding: 6px 20px;
    border-radius: 5px;
    margin-top: 10px;
      transition:0.5s;
}

#feature2 a:hover {
    font-size: 14px;
    color: white;
    background-color: black;
    padding: 6px 20px;
    border-radius: 5px;
    margin-top: 10px;
    transition:0.5s;
}




.bag {
    width: 90%;
    height: auto;
    color: white;
    background-color: #333DA5;
    border-radius: 50px 0px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    margin: auto;
    box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.144);
    text-align: center;
}

.bag2 {
    width: 90%;
    height: auto;
    color: white;
    background-color: #333DA5;
    border-radius: 50px 0px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    margin: auto;
    box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.144);
}

.bag h3 {
    font-size: 40px;
    font-weight: 700;
}

.bag p {
    font-weight: 300;
    text-align: center;
}

.footer {
    padding: 40px 0px;
    background-color: #333DA5;
    color: white;
}

.footer i {
    padding: 10px;
    color: white;
}

.footer a {
    display: block;
    padding: 5px 0px;
    color: white;
}
.footer a:hover {
    display: block;
    padding: 5px 0px;
    color: rgb(255, 15, 15);
}
.footer img {
    width: 100px;
    height: auto;
}

.footer h3 {
    font-size: 20px;
    font-weight: 700;
    color: white;
}


#menu {
    display: block;
}


@media (max-width: 600px) {
    #menu {
        display: none;
    }

    #buttoncolumon {
        display: none;
    }

    #hc #spanc {
        display: none;
    }

    .img {
        margin:10px auto;
        width: 100%;
        height: 500px;
        background: linear-gradient(rgba(183, 0, 255, 0.212), rgba(174, 0, 255, 0.4)),
            url(img/main.jpg);
        background-size: cover;
        background-position: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: white;
        text-align: center;
    }

    .img h2 {
        font-size: 40px;
    }

    .img p {
        font-size: 16px;
    }

    .bag h3 {
        font-size: 30px;
        font-weight: 700;
    }

    .bag p {
        font-weight: 300;
        text-align: center;
    }

    #feature .box1 {
        width: 90%;
        height: 300px;
        color: #333DA5;
        background-color: rgb(255, 255, 255);
        border-radius: 50px 0px;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        padding: 10px;
        margin-top: 20px;
        box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.144);
    }

    #feature .box1c {
        width: 90%;
        height: 300px;
        color: white;
        background-color: #333DA5;
        border-radius: 50px 0px;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        padding: 10px;
        margin-top: 20px;
        box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.144);
    }

    #social i {
        color: rgb(255, 255, 255);
        padding: 0px 10px;
    }
}