<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/all.css">
</head>

<body class="bg-light">
    <section class="container-fluid top-header-section">
        <div class="d-flex flex-column justify-content-center">
            <div class="row">
                <div class="col-md-3 col-xl-4  d-none d-lg-block">
                    <nav>
                        <ul class="my-3 justify-content-end">
                            <li class="mx-2 mx-xl-3 list-unstyled"><a href="#">Home</a></li>
                            <li class="mx-2 mx-xl-3 list-unstyled"><a href="#">About</a></li>
                            <li class="mx-2 mx-xl-3 list-unstyled"><a href="#">Contact</a></li>
                        </ul>
                    </nav>
                </div>
                <div class="col-12 col-sm-8 col-md-6 col-xl-4 mx-auto nav-center">
                    <img src="./images/down-arrow-bg.png" alt="down-arrow" class="down-arrow-img img-fluid">
                    <div class="brand-container">
                        <h1 class="brand">digital<span>.</span></h1>
                        <div class="gray-underline"></div>
                        <ul class="social-network my-2 px-2">
                            <li class="list-unstyled mx-2"><a href="#"><i class="fa fa-youtube"></i></a></li>
                            <li class="list-unstyled mx-2"><a href="#"><i class="fa fa-twitter"></i></a></li>
                            <li class="list-unstyled mx-2"><a href="#"><i class="fa  fa-facebook-f"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-md-3 col-xl-4 d-none d-lg-block">
                    <nav>
                        <ul class="my-3 justify-content-start">
                            <li class="mx-2 mx-xl-3 list-unstyled"><a href="#">Home</a></li>
                            <li class="mx-2 mx-xl-3 list-unstyled"><a href="#">About</a></li>
                            <li class="mx-2 mx-xl-3 list-unstyled"><a href="#">Contact</a></li>
                        </ul>
                    </nav>
                </div>
            </div>
            <div class="header-info pt-5">
                <h2 class="title">
                    This is the future of
                    web design.
                </h2>
                <p class="description">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod temporesse cillum dolore eu
                    fugiat nulla eu
                    fugiat nulla pariatur.
                </p>
                <button class="btn-primary-temp text-shadow text-uppercase">Read more</button>
            </div>
        </div>
    </section>
    <section class="container-fluid about-bg">
        <div class="row">
            <div class="col-12 col-xl-6 about px-5 my-5">
                <div class="about-info">
                    <h3 class="title w-75">
                        <span>We are </span>
                        <span>Creative</span>
                        Team
                    </h3>
                    <div class="underline-title-temp"></div>
                    <p class="description">
                        ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
                        dolore magna
                        aliqua.
                        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                        consequat. Duis
                        aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
                        pariaturLorem ipsum dolor
                        sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
                        magna aliqua. Ut enim ad
                        minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                        Duis aute irure
                        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                    </p>
                    <button class="btn-primary-temp text-shadow text-uppercase mb-4">Read more</button>
                </div>
            </div>
        </div>
    </section>
    <section class="team container-fluid py-5 px-5">
        <div class="row my-3">
            <div class="col-12 col-xl-5">
                <div class="team-info">
                    <h3 class="title">
                        <span>Our Best</span>
                        Team
                    </h3>
                    <div class="underline-title-temp"></div>
                    <p class="description w-75">
                        ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
                        dolore magna
                        aliqua.
                        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                        consequat. Duis
                        aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
                        pariaturLorem ipsum dolor
                        sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
                        magna aliqua. Ut enim ad
                        minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                        Duis aute irure
                        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                    </p>
                    <button class="btn-primary-temp text-shadow text-uppercase mb-4">Read more</button>
                </div>
            </div>
            <div class="col-12 col-xl-7">
                <div class="row my-3">
                    <div class="col-6 col-lg-4 d-flex flex-column">
                        <img src="./images/team/team-1.jpg" alt="team-1" class="img-fluid my-2">
                        <h4 class="person-name px-1 my-1">John Doe</h4>
                        <span class="job my-1 px-1">Graphic Designer</span>
                    </div>
                    <div class="col-6 col-lg-4 d-flex flex-column">
                        <img src="./images/team/team-2.jpg" alt="team-1" class="img-fluid my-2">
                        <h4 class="person-name px-1 my-1">John Doe</h4>
                        <span class="job my-1 px-1">Graphic Designer</span>
                    </div>
                    <div class="col-6 col-lg-4 d-flex flex-column">
                        <img src="./images/team/team-3.jpg" alt="team-1" class="img-fluid my-2">
                        <h4 class="person-name px-1 my-1">John Doe</h4>
                        <span class="job my-1 px-1">Graphic Designer</span>
                    </div>
                    <div class="col-6 col-lg-4 d-flex flex-column">
                        <img src="./images/team/team-4.jpg" alt="team-1" class="img-fluid my-2">
                        <h4 class="person-name px-1 my-1">John Doe</h4>
                        <span class="job my-1 px-1">Graphic Designer</span>
                    </div>
                    <div class="col-6 col-lg-4 d-flex flex-column">
                        <img src="./images/team/team-5.jpg" alt="team-1" class="img-fluid my-2">
                        <h4 class="person-name px-1 my-1">John Doe</h4>
                        <span class="job my-1 px-1">Graphic Designer</span>
                    </div>
                    <div class="col-6 col-lg-4 d-flex flex-column">
                        <img src="./images/team/team-6.jpg" alt="team-1" class="img-fluid my-2">
                        <h4 class="person-name px-1 my-1">John Doe</h4>
                        <span class="job my-1 px-1">Graphic Designer</span>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="work container-fluid">
        <div class="row g-0 my-5">
            <div class="col-12 col-lg-5 px-5">
                <div class="work-info">
                    <h3 class="title w-75">
                        <span>Our </span>
                        <span>Creative</span>
                        Work
                    </h3>
                    <div class="underline-title-temp"></div>
                    <p class="description">
                        ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
                        dolore magna
                        aliqua.
                        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                        consequat. Duis
                        aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
                        pariaturLorem ipsum dolor
                        sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
                        magna aliqua. Ut enim ad
                        minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                        Duis aute irure
                        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                    </p>
                    <button class="btn-primary-temp text-shadow text-uppercase mb-4">Read more</button>
                </div>
            </div>
            <div class="col-12 col-lg-7 py-5 px-2">
                <div class="d-flex flex-row">
                    <div class="d-flex flex-column w-50 px-3">
                        <div class="w-100 work-bg-1 my-3">

                        </div>
                        <div class="d-flex flex-row justify-content-end">
                            <div class="w-75 work-bg-2 my-3">
                            </div>
                        </div>

                    </div>
                    <div class="d-flex flex-column w-50 px-3">
                        <div class="w-100 work-bg-3 my-3">
                        </div>
                        <div class="w-100 work-bg-4 my-3">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="choose-us container-fluid gx-0">
        <div class="row gx-0">
            <div class="col-12 col-md-5 h-auto">
                <div class="choose-us-bg h-100"></div>
            </div>
            <div class="col-12 col-md-7 my-2">
                <div class="choose-info w-75 mx-auto">
                    <h3 class="title w-75 mt-4 mb-2">
                        <span>Why</span>
                        Choose us
                    </h3>
                    <div class="d-flex flex-column py-2">
                        <div class="d-flex flex-row my-3 justify-content-center align-items-center">
                            <div class="w-25">
                                <i class="et-icon icon-flag"></i>
                            </div>
                            <div class="w-75 d-flex flex-column px-4">
                                <h4 class="item-title">Lorem ipsum dolor</h4>
                                <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                                    eiusmod tempor incididunt ut labore et dolore magna
                                    aliqua. Ut enim ad minim veniam, quis nostrud.</p>
                            </div>
                        </div>
                        <div class="d-flex flex-row my-3 justify-content-center align-items-center">
                            <div class="w-25">
                                <i class="et-icon icon-desktop"></i>
                            </div>
                            <div class="w-75 d-flex flex-column px-4">
                                <h4 class="item-title">Lorem ipsum dolor</h4>
                                <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                                    eiusmod tempor incididunt ut labore et dolore
                                    magna
                                    aliqua. Ut enim ad minim veniam, quis nostrud.</p>
                            </div>
                        </div>
                        <div class="d-flex flex-row my-3 justify-content-center align-items-center">
                            <div class="w-25">
                                <i class="et-icon icon-lifesaver"></i>
                            </div>
                            <div class="w-75 d-flex flex-column px-4">
                                <h4 class="item-title">Lorem ipsum dolor</h4>
                                <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                                    eiusmod tempor incididunt ut labore et dolore
                                    magna
                                    aliqua. Ut enim ad minim veniam, quis nostrud.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="services container-fluid gx-0 position-relative p-md-3">
        <img src="./images/services/services-bg.jpg" alt="services-bg"
            class="position-absolute end-0 top-0 w-50 img-fluid h-100 z-0 d-none d-lg-block">
        <div class="row py-5 gx-5 mx-0 mx-md-5">
            <div class="col-12 col-lg-5 z-3 position-relative">
                <div class="services-info px-5 py-5">
                    <h3 class="title w-50 w-100  text-md-end text-start">
                        <span>Our</span>
                        <span>Best</span>
                        Services
                    </h3>
                    <p class="description">
                        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugiat, hic eaque nam illo ut
                        provident dolorem excepturi sunt doloremque pariatur ea debitis necessitatibus maxime blanditiis
                        tenetur placeat voluptas laborum praesentium quidem laboriosam cumque. Perspiciatis placeat,
                        consectetur adipisci temporibus fugiat, rem praesentium similique reprehenderit laudantium
                        itaque delectus vel voluptas sapiente excepturi.
                    </p>
                    <button class="btn-primary-temp text-shadow text-uppercase mb-4">Read more</button>
                </div>
            </div>
            <div class="col-12 col-lg-7 z-3 position-relative services-items p-3">
                <div class="w-100 px-md-2">
                    <div class="row">
                        <div class="col-12 col-md-6">
                            <div class="d-flex flex-column">
                                <div class="d-flex flex-column">
                                    <div
                                        class="w-100 d-flex flex-column align-items-center justify-content-center py-2 py-md-4">
                                        <i class="et-icon icon-global services-icon"></i>
                                        <h4 class="item-title">Lorem ipsum dolor</h4>
                                        <p class="description">Lorem ipsum dolor sit amet consectetur adipisicing elit.
                                            Nulla, beatae!</p>
                                    </div>
                                    <div
                                        class="w-100 d-flex flex-column align-items-center justify-content-center py-4">
                                        <i class="et-icon icon-global services-icon"></i>
                                        <h4 class="item-title">Lorem ipsum dolor</h4>
                                        <p class="description">Lorem ipsum dolor sit amet consectetur adipisicing elit.
                                            Nulla, beatae!</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-md-6">
                            <div class="d-flex flex-column">
                                <div class="w-100 d-flex flex-column align-items-center justify-content-center py-4">
                                    <i class="et-icon icon-global services-icon"></i>
                                    <h4 class="item-title">Lorem ipsum dolor</h4>
                                    <p class="description">Lorem ipsum dolor sit amet consectetur adipisicing elit.
                                        Nulla, beatae!</p>
                                </div>
                                <div class="w-100 d-flex flex-column align-items-center justify-content-center py-4">
                                    <i class="et-icon icon-global services-icon"></i>
                                    <h4 class="item-title">Lorem ipsum dolor</h4>
                                    <p class="description">Lorem ipsum dolor sit amet consectetur adipisicing elit.
                                        Nulla, beatae!</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="client-say container-fluid gx-0">
        <div class="row gx-0">
            <div class="col-12 col-lg-4 px-5">
                <div class="client-say-info px-4 py-5">
                    <h3 class="title text-white my-2">
                        <span>Our</span>
                        client say
                    </h3>
                    <div class="row py-2">
                        <div class="col-2 text-white px-1">
                            <i class="fa fa-quote-left quote-icon-small"></i>
                        </div>
                        <div class="col-10 description px-1 text-start">
                            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusantium, deserunt eligendi
                                vero recusandae perspiciatis ab voluptatem. Numquam dolorum eos magnam commodi ad esse
                                corrupti deserunt in sequi, beatae delectus nostrum!</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12 col-lg-4 h-auto vh-100">
                <div class="client-say-bg h-100"></div>
            </div>
            <div class="col-12 col-lg-4 bg-light">
                <div class="d-flex flex-column justify-content-center py-5 h-100">
                    <div class="w-100 text-center">
                        <i class="fa fa-quote-left quote-icon-medium"></i>
                    </div>
                    <div class="w-100 text-center px-5">
                        <p class="description text-dark">
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus rem, dolor maxime natus
                            cum, sit accusamus labore, ab odio aut neque temporibus porro reiciendis tenetur rerum vero
                            voluptas eum earum qui accusantium. Quisquam, itaque tempora ea aspernatur adipisci nobis
                            tenetur non deserunt mollitia et consectetur facilis. Alias, natus atque delectus ratione
                            ducimus, illum modi labore praesentium voluptas sapiente soluta ea eveniet, in doloribus sed
                            odit.
                        </p>
                        <span class="quote-more">&#9679; &#9679; &#9679;</span>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="social-footer container-fluid py-4">
        <div class="d-flex flex-column justify-content-center align-content-center">
            <h4 class="title text-white text-center pt-5 pb-2">
                <span class="d-inline">Get</span> in toucch
                </h3>
                <div class="d-flex flex-row justify-content-center flex-wrap">
                    <a class="icon d-flex flex-row justify-content-center align-items-center"><i
                            class="fa fa-youtube"></i></a>
                    <a class="icon d-flex flex-row justify-content-center align-items-center"><i
                            class="fa fa-dribbble"></i></a>
                    <a class="icon d-flex flex-row justify-content-center align-items-center"><i
                            class="fa fa-vk"></i></a>
                    <a class="icon d-flex flex-row justify-content-center align-items-center"><i
                            class="fa fa-facebook-f"></i></a>
                    <a class="icon d-flex flex-row justify-content-center align-items-center"><i
                            class="fa fa-behance"></i></a>
                </div>
        </div>
    </section>
    <section class="footer container-fluid pt-4">
        <div class="row">
            <div class="col-7 mx-auto">
                <div class="row gx-5">
                    <div class="col-12 col-md-4 px-2">
                        <div class="d-flex flex-row justify-content-center py-2">
                            <i class="icon et-icon icon-envelope"></i>
                            <div class="d-flex flex-column">
                                <strong class="info">
                                    Email:
                                </strong>
                                <span class="info">
                                    info@revanjo.com
                                </span>
                                <span class="info">
                                    info@revanjo.com
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-md-4 px-2">
                        <div class="d-flex flex-row justify-content-center py-2">
                            <i class="icon et-icon icon-mobile"></i>
                            <div class="d-flex flex-column">
                                <strong class="info">
                                    Phone:
                                </strong>
                                <span class="info">
                                    +98 91000000
                                </span>
                                <span class="info">
                                    +98 91000000
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-md-4 px-2">
                        <div class="d-flex flex-row justify-content-center py-2">
                            <i class="icon et-icon icon-map"></i>
                            <div class="d-flex flex-column">
                                <strong class="info">
                                    Address:
                                </strong>
                                <span class="info">
                                    Majd,Mashhad,Iran
                                </span>
                                <span class="info">
                                    Majd,Mashhad,Iran
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row mt-4">
            <div class="col-12 col-sm-8 col-md-6 col-xl-4 mx-auto footer-center">
                <img src="./images/up-arrow-bg.png" alt="down-arrow" class="up-arrow-img img-fluid">

                <div class="copyright">
                    <span>Copyright 2024</span>
                </div>
            </div>
        </div>
    </section>
</body>

</html>