<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
        integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
        <!-- <h1>IMAGE SLIDER</h1> -->
                <button id="prev" onclick="prev()"></button>
                <button id="next" onclick="next()"></button>
                    <p>No Limit Public Adjusters</p>
                    <h2>Insurance claim <br> assistance experts</h2>
                    <p>Leave the stress to Us, We'll handle your claim</p>
                    <img src="https://images.unsplash.com/photo-1484417894907-623942c8ee29?q=80&w=1932&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                        alt="">
                    <img src="https://plus.unsplash.com/premium_photo-1679079456083-9f288e224e96?q=80&w=1770&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                        alt="">
                    <img src="https://images.unsplash.com/photo-1561908818-526e64312efd?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1yZWxhdGVkfDJ8fHxlbnwwfHx8fHw%3D"
                        alt="">
                    <img src="https://images.unsplash.com/photo-1485827404703-89b55fcc595e?q=80&w=1770&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                        alt="">
                    <img src="https://images.unsplash.com/photo-1503437313881-503a91226402?q=80&w=1932&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                        alt="">
                    <img src="https://images.unsplash.com/photo-1497493292307-31c376b6e479?q=80&w=1771&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                        alt="">
                    <img src="https://plus.unsplash.com/premium_photo-1663134285459-0022b0e78970?q=80&w=1770&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                        alt="">
                    <img src="https://images.unsplash.com/photo-1473968512647-3e447244af8f?q=80&w=1770&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                        alt="">
                    <img src="https://images.unsplash.com/photo-1457305237443-44c3d5a30b89?q=80&w=1774&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                        alt="">
</body>
</html>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    #main {
        height: 100%;
        width: 100%;
        /* background-image: url(https://img.freepik.com/free-vector/white-abstract-background-design_23-2148825582.jpg?w=1060&t=st=1701062942~exp=1701063542~hmac=bfc8c76f240fe8332176dee6534a9c99b90f5f039252cc6a3153310c96c7a5a1);
    font-family: 'Lilita One', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px; */
    }
    /* h1{
    color: rgba(0, 0, 0, 0.646);
    font-size: 60px;
    word-spacing: 15px;
    text-align: center;
    letter-spacing: 2px;
    margin-top: 60px;
}
#main>h1 span{
    -webkit-text-stroke: 1px black;
    text-stroke: 4px rgb(255, 255, 255);
    color: aliceblue;
} */
    #wrapper {
        height: 100vh;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    #wrapper i {
        font-size: 25px;
        pointer-events: none
    }
    #image-container {
        height: 100%;
        width: 100%;
        overflow: hidden;
        padding: 0px 0px;
    }
    #image-carousel {
        display: flex;
        height: 100%;
        width: 100%;
        gap: 100px;
        position: relative;
    }
    #image-carousel img {
        position: absolute;
        height: 100%;
        width: 100%;
        object-fit: cover;
        transition: 1s;
        padding: 0px 0px;
    }
    button {
        cursor: pointer;
        padding: 14px;
        border-radius: 50%;
        color: rgb(255 255 255 / 20%);
        border: 2px solid #00000047;
        background-color: transparent;
    }
    .slider-btn {
        position: absolute;
        z-index: 1;
        left: 12%;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    .slider-text-div{
        position: absolute;
        z-index: 1;
        top: 44%;
        left: 20%;
    }
    .slider-info p{
        color: #696E77;
    }
</style>