<div class="tracem-tab-1">
    <nav>
        <div class="nav nav-tabs" id="nav-tab" role="tablist">
            <a class="nav-item nav-link active" id="branding-tab" data-toggle="tab" href="#branding" role="tab" aria-controls="branding" aria-selected="true">Branding</a>
            <a class="nav-item nav-link" id="photography-tab" data-toggle="tab" href="#photography" role="tab" aria-controls="photography" aria-selected="false">Photography</a>
            <a class="nav-item nav-link" id="developing-tab" data-toggle="tab" href="#developing" role="tab" aria-controls="developing" aria-selected="false">Developing Team</a>
            <a class="nav-item nav-link" id="customization-tab" data-toggle="tab" href="#customization" role="tab" aria-controls="customization" aria-selected="false">Video Intro</a>
        </div><!-- .nav .nav-tabs -->
    </nav>
    <div class="tab-content" id="nav-tabContent">
        <div class="tab-pane fade show active" id="branding" role="tabpanel" aria-labelledby="branding-tab">
            <div class="about-us-area section-padding">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col">
                            <div class="about-us-img">
                                <img src="images/about/2.jpg" alt="A Man Works In Office">
                            </div><!-- .about-us-img -->
                        </div><!-- .col -->
                        <div class="col align-self-center">
                            <div class="about-us-text">
                                <h5>We are committed to providing first class services</h5>
                                <h2>Our Promises</h2>
                                <p>We publish a very broad range of fiction and non-fiction  international and
                                local, books for adults and young adults. We are capable of falling in love with any book, and many of our authors have led us into fascinating territory we would never otherwise have discovered. Lots of our books are award-winners around the world. If you are a writer or an agent and would like to send us your manuscript we would love to consider it. If you are a reader we hope that somewhere on our list you will find the book that makes the world a different place for you.</p>

                                <p>We publish a very broad range of fiction and non-fiction  international and
                                local, books for adults and young adults. We are capable of falling in love with any book, and many of our authors have led us into fascinating territory we would never otherwise have discovered. Lots of our books are award-winners around the world. If you are a writer or an agent and would like to send us your manuscript we would love to consider it. If you are a reader we hope that somewhere on our list you will find the book that makes the world a different place for you.</p>

                                <a class="btn-simple black" href="#">View Project <span><i class="fas fa-arrow-alt-circle-right"></i></span></a>
                            </div><!-- .about-us-text -->
                        </div><!-- .col -->
                    </div><!-- .row -->
                </div><!-- .container-fluid -->
            </div><!-- .about-us-area -->
        </div><!-- .tab-pane -->
        <div class="tab-pane fade" id="photography" role="tabpanel" aria-labelledby="nav-profile-tab">
            <div class="key-points-area section-margin">
                <div class="container-fluid no-padding">
                    <div class="row">
                        <div class="col align-self-center">
                            <div class="key-points-text">
                                <h3>Some Keypoints about our team</h3>
                                <div class="row no-gutters">
                                    <div class="col">
                                        <div class="single-key-point">
                                            <h4>Believe in creativity</h4>
                                            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor Aenean massa cum sociis</p>
                                        </div><!-- .single-key-point -->
                                    </div><!-- .col -->
                                    <div class="col">
                                        <div class="single-key-point">
                                            <h4>Believe in creativity</h4>
                                            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor Aenean massa cum sociis</p>
                                        </div><!-- .single-key-point -->
                                    </div><!-- .col -->
                                </div><!-- .row -->
                                <div class="row no-gutters">
                                    <div class="col">
                                        <div class="single-key-point">
                                            <h4>Believe in creativity</h4>
                                            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor Aenean massa cum sociis</p>
                                        </div><!-- .single-key-point -->
                                    </div><!-- .col -->
                                    <div class="col">
                                        <div class="single-key-point">
                                            <h4>Believe in creativity</h4>
                                            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor Aenean massa cum sociis</p>
                                        </div><!-- .single-key-point -->
                                    </div><!-- .col -->
                                </div><!-- .row -->
                            </div><!-- .key-points-text -->
                        </div><!-- .col -->
                        <div class="col">
                            <div class="about-us-img">
                                <img src="images/about/3.jpg" alt="A Man Works In Office">
                            </div><!-- .about-us-img -->
                        </div><!-- .col -->
                    </div><!-- .row -->
                </div><!-- .container-fluid -->
            </div><!-- .key-points-area -->
        </div><!-- .tab-pane -->
        <div class="tab-pane fade" id="developing" role="tabpanel" aria-labelledby="developing-tab">
            <div class="about-our-team-area">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col">
                            <div class="our-team-member-intro">
                                <div class="row no-gutters">

                                    <div class="col-md col-sm-6 col-12">
                                        <div class="single-team-member">
                                            <div class="member-overlay"></div>
                                            <img src="images/team/1.jpg" alt="Team Member">
                                            <div class="member-info">
                                                <h4>John Doe</h4>
                                                <div class="tracem-ovh">
                                                    <p>Web Designer</p>
                                                </div><!-- .tracem-ovh -->
                                            </div><!-- .member-info -->
                                        </div><!-- .single-team-member -->
                                    </div><!-- .col-md .col-sm-6 .col-12 -->

                                    <div class="col-md col-sm-6 col-12">
                                        <div class="single-team-member">
                                            <div class="member-overlay"></div>
                                            <img src="images/team/2.jpg" alt="Team Member">
                                            <div class="member-info">
                                                <h4>Jesica Doe</h4>
                                                <div class="tracem-ovh">
                                                    <p>Project Leader</p>
                                                </div><!-- .tracem-ovh -->
                                            </div><!-- .member-info -->
                                        </div><!-- .single-team-member -->
                                    </div><!-- .col-md .col-sm-6 .col-12 -->

                                    <div class="col-md col-sm-6 col-12">
                                        <div class="single-team-member">
                                            <div class="member-overlay"></div>
                                            <img src="images/team/3.jpg" alt="Team Member">
                                            <div class="member-info">
                                                <h4>Allen Coffey</h4>
                                                <div class="tracem-ovh">
                                                    <p>Web Developer</p>
                                                </div><!-- .tracem-ovh -->
                                            </div><!-- .member-info -->
                                        </div><!-- .single-team-member -->
                                    </div><!-- .col-md .col-sm-6 .col-12 -->

                                    <div class="col-md col-sm-6 col-12">
                                        <div class="single-team-member">
                                            <div class="member-overlay"></div>
                                            <img src="images/team/4.jpg" alt="Team Member">
                                            <div class="member-info">
                                                <h4>Andrew McDonnell</h4>
                                                <div class="tracem-ovh">
                                                    <p>UI/UX Designer</p>
                                                </div><!-- .tracem-ovh -->
                                            </div><!-- .member-info -->
                                        </div><!-- .single-team-member -->
                                    </div><!-- .col-md .col-sm-6 .col-12 -->

                                </div><!-- .row -->
                            </div><!-- .our-team-intro -->
                        </div><!-- .col -->
                    </div><!-- .row -->
                </div><!-- .container-fluid -->
            </div><!-- .about-our-team-area -->
        </div><!-- .tab-pane -->
        <div class="tab-pane fade" id="customization" role="tabpanel" aria-labelledby="customization-tab">
            <div class="our-video-intro-area background-image section-margin">
                <div class="background-overlay-b-1"></div>
                <div class="container-fluid">
                    <div class="row tracem-shrink">
                        <div class="col">
                            <div class="our-video-intro text-center">
                                <a href="https://vimeo.com/241522611" class="strip">
                                    <span><i class="fas fa-play"></i></span>
                                </a>
                                <h2>Let’s take a tour with our great intro</h2>
                            </div><!-- .our-video-intro -->
                        </div><!-- .col -->
                    </div><!-- .row -->
                </div><!-- .container-fluid -->
            </div><!-- .our-video-intro-area -->
        </div><!-- .tab-pane -->
    </div><!-- .tab-content -->
</div><!-- .tracem-tab-1 -->


                                    

<div class="tracem-tab-2">
    <nav>
        <div class="nav nav-tabs" id="nav-tab" role="tablist">
            <a class="nav-item nav-link active" id="camera-tab" data-toggle="tab" href="#camera" role="tab" aria-controls="camera" aria-selected="true"><i class="fas fa-camera"></i></a>
            <a class="nav-item nav-link" id="pencil-tab" data-toggle="tab" href="#pencil" role="tab" aria-controls="pencil" aria-selected="false"><i class="fas fa-pencil-alt"></i></a>
            <a class="nav-item nav-link" id="bullborn-tab" data-toggle="tab" href="#bullborn" role="tab" aria-controls="bullborn" aria-selected="false"><i class="fas fa-bullhorn"></i></a>
            <a class="nav-item nav-link" id="paper-plane-tab" data-toggle="tab" href="#paper-plane" role="tab" aria-controls="paper-plane" aria-selected="false"><i class="far fa-paper-plane"></i></a>
        </div><!-- .nav-tabs -->
    </nav>
    <div class="tab-content" id="nav-tabContent">
        <div class="tab-pane fade show active" id="camera" role="tabpanel" aria-labelledby="nav-home-tab">
            <div class="what-we-offer-one-area section-padding">
                <div class="container-fluid">
                    <div class="row tracem-shrink">
                        <div class="col">
                            <div class="what-we-offer-one">
                                <div class="row">
                                    <div class="col-md-4 col-sm-12">
                                        <div class="section-intro">
                                            <h4>What We Offer</h4>
                                            <h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid minima, fuga ullam quibusdam temporibus aliquid!</h3>
                                        </div><!-- .section-intro -->
                                    </div><!-- .col -->
                                    <div class="col-md-8 col-sm-12">
                                        <div class="services-area-one">
                                            <div class="row">
                                                <div class="col-lg col-md-6">
                                                    <div class="single-service-one">
                                                        <h4>Branding</h4>
                                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. magnam vitae.</p>
                                                    </div><!-- .single-service-one -->
                                                </div><!-- .col -->
                                                <div class="col-lg col-md-6">
                                                    <div class="single-service-one">
                                                        <h4>Photography</h4>
                                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. magnam vitae.</p>
                                                    </div><!-- .single-service-one -->
                                                </div><!-- .col -->
                                                <div class="col-lg col-md-6">
                                                    <div class="single-service-one">
                                                        <h4>Developing</h4>
                                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. magnam vitae.</p>
                                                    </div><!-- .single-service-one -->
                                                </div><!-- .col -->
                                                <div class="col-lg col-md-6">
                                                    <div class="single-service-one">
                                                        <h4>Customization</h4>
                                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. magnam vitae.</p>
                                                    </div><!-- .single-service-one -->
                                                </div><!-- .col -->
                                            </div><!-- .row -->
                                        </div><!-- .services-area-one -->
                                    </div><!-- .col -->
                                </div><!-- .row -->
                            </div><!-- .what-we-offer-one -->
                        </div><!-- .col -->
                    </div><!-- .row -->
                </div><!-- .container-fluid -->
            </div><!-- .what-we-offer-one-area -->
        </div><!-- .tab-pane -->
        <div class="tab-pane fade" id="pencil" role="tabpanel" aria-labelledby="nav-profile-tab">
            <div class="what-we-offer-two-area section-padding">
                <div class="container-fluid">
                    <div class="row tracem-shrink">
                        <div class="col">
                            <div class="what-we-offer-two">
                                <div class="row">
                                    <div class="col-md-4 col-sm-12">
                                        <div class="section-heading">
                                            <h2>What We Offer</h2>
                                        </div><!-- .section-intro -->
                                    </div><!-- .col -->
                                    <div class="col-md-8 col-sm-12">
                                        <div class="services-area-two">
                                        <div class="section-intro">
                                            <h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid minima fuga ullam</h3>
                                        </div><!-- .section-intro -->
                                            <div class="row no-gutters">
                                                <div class="col-lg col-md-6">
                                                    <div class="single-service-two">
                                                        <h4>Branding</h4>
                                                        <p>Lorem ipsum dolor sit amet vitae, consectetur adipisicing elit magnam.</p>
                                                    </div><!-- .single-service-two -->
                                                </div><!-- .col -->
                                                <div class="col-lg col-md-6">
                                                    <div class="single-service-two">
                                                        <h4>Photography</h4>
                                                        <p>Lorem ipsum dolor sit amet vitae, consectetur adipisicing elit magnam.</p>
                                                    </div><!-- .single-service-two -->
                                                </div><!-- .col -->
                                                <div class="col-lg col-md-6">
                                                    <div class="single-service-two">
                                                        <h4>Developing</h4>
                                                        <p>Lorem ipsum dolor sit amet vitae, consectetur adipisicing elit magnam.</p>
                                                    </div><!-- .single-service-two -->
                                                </div><!-- .col -->
                                            </div><!-- .row -->
                                        </div><!-- .services-area-two -->
                                    </div><!-- .col -->
                                </div><!-- .row -->
                            </div><!-- .what-we-offer-two -->
                        </div><!-- .col -->
                    </div><!-- .row -->
                </div><!-- .container-fluid -->
            </div><!-- .what-we-offer-two-area -->
        </div><!-- .tab-pane -->
        <div class="tab-pane fade" id="bullborn" role="tabpanel" aria-labelledby="nav-contact-tab">
            <div class="our-video-intro-area background-image section-margin">
                <div class="background-overlay-b-1"></div>
                <div class="container-fluid">
                    <div class="row tracem-shrink">
                        <div class="col">
                            <div class="our-video-intro text-center">
                                <a href="https://vimeo.com/241522611" class="strip">
                                    <span><i class="fas fa-play"></i></span>
                                </a>
                                <h2>Let’s take a tour with our great intro</h2>
                            </div><!-- .our-video-intro -->
                        </div><!-- .col -->
                    </div><!-- .row -->
                </div><!-- .container-fluid -->
            </div><!-- .our-video-intro-area -->
        </div><!-- .tab-pane -->
        <div class="tab-pane fade" id="paper-plane" role="tabpanel" aria-labelledby="nav-contact-tab">
            <div class="key-points-area section-margin">
                <div class="container-fluid no-padding">
                    <div class="row">
                        <div class="col align-self-center">
                            <div class="key-points-text">
                                <h3>Some Keypoints about our team</h3>
                                <div class="row no-gutters">
                                    <div class="col">
                                        <div class="single-key-point">
                                            <h4>Believe in creativity</h4>
                                            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor Aenean massa cum sociis</p>
                                        </div><!-- .single-key-point -->
                                    </div><!-- .col -->
                                    <div class="col">
                                        <div class="single-key-point">
                                            <h4>Believe in creativity</h4>
                                            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor Aenean massa cum sociis</p>
                                        </div><!-- .single-key-point -->
                                    </div><!-- .col -->
                                </div><!-- .row -->
                                <div class="row no-gutters">
                                    <div class="col">
                                        <div class="single-key-point">
                                            <h4>Believe in creativity</h4>
                                            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor Aenean massa cum sociis</p>
                                        </div><!-- .single-key-point -->
                                    </div><!-- .col -->
                                    <div class="col">
                                        <div class="single-key-point">
                                            <h4>Believe in creativity</h4>
                                            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor Aenean massa cum sociis</p>
                                        </div><!-- .single-key-point -->
                                    </div><!-- .col -->
                                </div><!-- .row -->
                            </div><!-- .key-points-text -->
                        </div><!-- .col -->
                        <div class="col">
                            <div class="about-us-img">
                                <img src="images/about/3.jpg" alt="A Man Works In Office">
                            </div><!-- .about-us-img -->
                        </div><!-- .col -->
                    </div><!-- .row -->
                </div><!-- .container-fluid -->
            </div><!-- .key-points-area -->
        </div><!-- .tab-pane -->
    </div><!-- .tab-content -->
</div><!-- .tracem-tab-2 -->