<?php include 'header.php';?>

<style>
.bump {
    margin-top: 18px;
}
.cicrimg {
    margin-bottom: -28%;
    width: 54%;
    margin-top: 6%;
}
.buildh3 {
    font-size: 24px;
    width: 24%;
}






   .section {
  background: #f45b69;
  padding: 50px 0;
}

.section .container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.section h1 {
  font-size: 2.5rem;
}

.section h2 {
  font-size: 1.3rem;
}

/* TIMELINE
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.timeline {
  white-space: nowrap;
  /*overflow-x: hidden;*/
}

.timeline ol {
  font-size: 0;
  width: 100vw;
  padding: 250px 0;
  transition: all 1s;
}

.timeline ol li {
  position: relative;
  display: inline-block;
  list-style-type: none;
  width: 200px;
  height: 3px;
  background: #193778;
}

.timeline ol li:last-child {
  width: 280px;
}

.timeline ol li:not(:first-child) {
  margin-left: 14px;
}

.timeline ol li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(100% + 1px);
  bottom: 0;
  width: 12px;
  height: 12px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: #e30a7e;
}

.timeline ol li div {
  position: absolute;
  left: calc(100% + 7px);
  width: 280px;
  padding: 15px;
  font-size: 1rem;
  white-space: normal;
  color: #193778;
  background: #eaeaea96;
}

.timeline ol li div::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
}

.timeline ol li:nth-child(odd) div {
  top: -16px;
  transform: translateY(-100%);
}

.timeline ol li:nth-child(odd) div::before {
  top: 100%;
  border-width: 8px 8px 0 0;
  border-color: white transparent transparent transparent;
}

.timeline ol li:nth-child(even) div {
  top: calc(100% + 16px);
}

.timeline ol li:nth-child(even) div::before {
  top: -8px;
  border-width: 8px 0 0 8px;
  border-color: transparent transparent transparent white;
}

.timeline time {
  display: block;
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 8px;
}

/* TIMELINE ARROWS
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.timeline .arrows {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
  margin-top: 5%;
}

.timeline .arrows .arrow__prev {
  margin-right: 0px;
}

.timeline .disabled {
  opacity: 0.5;
}

.timeline .arrows img {
  width: 35px;
  height: 35px;
}

/* GENERAL MEDIA QUERIES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media screen and (max-width: 599px) {
  .timeline ol,
  .timeline ol li {
    width: auto;
  }

  .timeline ol {
    padding: 0;
    transform: none !important;
  }

  .timeline ol li {
    display: block;
    height: auto;
    background: transparent;
  }

  .timeline ol li:first-child {
    margin-top: 25px;
  }

  .timeline ol li:not(:first-child) {
    margin-left: auto;
  }

  .timeline ol li div {
    position: static;
    width: 94%;
    height: auto !important;
    margin: 0 auto 25px;
  }

  .timeline ol li:nth-child(odd) div {
    transform: none;
  }

  .timeline ol li:nth-child(odd) div::before,
  .timeline ol li:nth-child(even) div::before {
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    border: none;
    border-left: 1px solid white;
    height: 25px;
  }

  .timeline ol li:last-child,
  .timeline ol li:nth-last-child(2) div::before,
  .timeline ol li:not(:last-child)::after,
  .timeline .arrows {
    display: none;
  }
}


.timelinebtn {
    border: 0px;
    background: none;
}
.timelinehg {
    height: auto!important;
}


.ldr p {
    text-align: center!important;
    padding-bottom: 20px;
    color: #353535;
    font-weight: 500;
}


.commonbanner {
    background: url(./images/banner/stuff1.png);
    margin-left: auto;
    margin-right: auto;
    background-position: center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
}
.breadcrumb {
    margin-left: auto;
    margin-right: auto;
    display: flex;
    font-weight: 400;
}
.brdcrumbwht.active {
    color: #000;
    z-index: 9;
}
.page-title-heading p {
    text-align: left;
    width: 56%;
    /*color: #193778;*/
}
.center {
    text-align: justify;
    font-size: 38px;
}
.ttm-page-title-row-inner {
    padding: 73px 0px 61px;
}
 a {
    color: #000;
}
</style>

<div class="ttm-page-title-row commonbanner">
            <div class="ttm-page-title-row-inner ttm-bgcolor-darkgrey">
                <div class="container">
                    <div class="row align-items-center">
                        <div class="col-lg-12">
                            <div class="page-title-heading">
                                 <h3 class="center" style="z-index: 999;position: relative;color:#193778;"><span style="color:#193778;"> Overview</span></h3>
                                 <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500.</p>
                            </div>
                            <ol class="breadcrumb mb-0">
                                <li class="breadcrumb-item bditm"><a href="#"> <i class="fas fa-home" style="color: #000;"></i> </a></li>
                                <li class="breadcrumb-item brdcrumbwht"> <i class="fas fa-chevron-right"></i> About Us</li>
                                <li class="breadcrumb-item brdcrumbwht active"> <i class="fas fa-chevron-right"></i> Overview</li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>                    
        </div>


        
        
        
        <section class="">
            
            <div class="auto-container">
                
                <div class="wrapper wph4">
                    <div class="print-tab prntab" data-tab-id="1">
                        <ul class="print-tab-menu abouttab cnt">
                            <li data-tab-menu="overview" class="active"><a>Overview</a></li>
                            <li data-tab-menu="vission-mission"><a> Vision - Mission</a></li>
                            <li data-tab-menu="journey"><a> Our Journey</a></li>
                            <li data-tab-menu="leadership"><a href="leadership.php">Leadership Team </a></li>
                            <li data-tab-menu="sisters"><a href="ursuline-sisters.php">Ursuline Sisters</a></li>
                            <li data-tab-menu="committee"><a href="management-committee.php">Management Committee</a></li>
                            <li data-tab-menu="bandra"><a href="Bandra-HFH-society.php">Bandra HFH Society</a></li>
                            <li data-tab-menu="awards"><a href="awards-recognitions.php">Accreditation & Awards</a></li>
                            
                        </ul>
                    </div>
                    
                    <hr class="dotted-hr1 cnt">
                    
                    <div class="print-tab-content mt-40">
                            <div data-tab-content="overview" id="overview">
                                 <p class="cnt">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. but also the leap into electronic typesetting, remaining essentially unchanged.but also the leap into </p>
                                <p class="cnt">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. but also the leap into electronic typesetting, remaining essentially unchanged.but also the leap into </p>
                                <p class="cnt">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. but also the leap into electronic typesetting, remaining essentially unchanged.but also the leap into </p>
                                
                            </div>
                            
                            

                            <div data-tab-content="vission-mission" id="vission-mission" class="mg-65">
                               <section class="ptb-100 bckgradiant">
            <div class="row cnt" id="vission">
                
                <div class="col-md-6">
                    <div class="cardab">
                        <h4 class="drnamee titleab">Vision </h4>
                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry'sLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's</p>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="cardab">
                        <h4 class="drnamee titleab">Mission</h4>
                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry'sLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's</p>
                    </div>
                </div>
            </div>
    </section>
                            </div>
                            

                            <div data-tab-content="journey" id="journey">
                                <section class="timeline">
                    <ol>
                        <li>
                            <div class="timelinehg">
                                <time>1934</time>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                            </div>
                        </li>
                        <li>
                            <div class="timelinehg">
                                <time>1937</time> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's. 
                            </div>
                        </li>
                        <li>
                            <div class="timelinehg">
                                <time>1940</time> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
                            </div>
                        </li>
                        <li>
                            <div class="timelinehg">
                                <time>1943</time> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard.
                            </div>
                        </li>
                        <li>
                            <div class="timelinehg">
                                <time>1946</time> Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                            </div>
                        </li>
                        <li>
                            <div class="timelinehg">
                                <time>1956</time> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has beens. 
                            </div>
                        </li>
                        <li>
                            <div class="timelinehg">
                                <time>1967</time> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. 
                            </div>
                        </li>
                        
                        <li>
                            <div class="timelinehg">
                                <time>1977</time> Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                            </div>
                        </li>
                        <li>
                            <div class="timelinehg">
                                <time>1985</time> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. 
                            </div>
                        </li>
                        
                        <li>
                            <div class="timelinehg">
                                <time>2000</time> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since 
                            </div>
                        </li>
                        <li>
                            <div class="timelinehg">
                                <time>2005</time> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's  
                            </div>
                        </li>
                        <li>
                            <div class="timelinehg">
                                <time>2010</time> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. 
                            </div>
                        </li>
                        <li></li>
                    </ol>

                    <div class="arrows">
                        <button class="arrow arrow__prev disabled timelinebtn" disabled>
                            <img src="images/banner/left.png" alt="prev timeline arrow">
                        </button>
                        <button class="arrow arrow__next timelinebtn">
                            <img src="images/banner/right.png" alt="next timeline arrow">
                        </button>
                    </div>
                </section>
                            </div>
                            
                         
                            
                            
                        </div>
                        
                    
  
                </div>
                
            </div>


</section>





    
    
    
 
        
        
        
        <script>
            (function () {
  // VARIABLES
  const timeline = document.querySelector(".timeline ol"),
    elH = document.querySelectorAll(".timeline li > div"),
    arrows = document.querySelectorAll(".timeline .arrows .arrow"),
    arrowPrev = document.querySelector(".timeline .arrows .arrow__prev"),
    arrowNext = document.querySelector(".timeline .arrows .arrow__next"),
    firstItem = document.querySelector(".timeline li:first-child"),
    lastItem = document.querySelector(".timeline li:last-child"),
    xScrolling = 280,
    disabledClass = "disabled";

  // START
  window.addEventListener("load", init);

  function init() {
    setEqualHeights(elH);
    animateTl(xScrolling, arrows, timeline);
    setSwipeFn(timeline, arrowPrev, arrowNext);
    setKeyboardFn(arrowPrev, arrowNext);
  }

  // SET EQUAL HEIGHTS
  function setEqualHeights(el) {
    let counter = 0;
    for (let i = 0; i < el.length; i++) {
      const singleHeight = el[i].offsetHeight;

      if (counter < singleHeight) {
        counter = singleHeight;
      }
    }

    for (let i = 0; i < el.length; i++) {
      el[i].style.height = `${counter}px`;
    }
  }

  // CHECK IF AN ELEMENT IS IN VIEWPORT
  // http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport
  function isElementInViewport(el) {
    const rect = el.getBoundingClientRect();
    return (
      rect.top >= 0 &&
      rect.left >= 0 &&
      rect.bottom <=
        (window.innerHeight || document.documentElement.clientHeight) &&
      rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
  }

  // SET STATE OF PREV/NEXT ARROWS
  function setBtnState(el, flag = true) {
    if (flag) {
      el.classList.add(disabledClass);
    } else {
      if (el.classList.contains(disabledClass)) {
        el.classList.remove(disabledClass);
      }
      el.disabled = false;
    }
  }

  // ANIMATE TIMELINE
  function animateTl(scrolling, el, tl) {
    let counter = 0;
    for (let i = 0; i < el.length; i++) {
      el[i].addEventListener("click", function () {
        if (!arrowPrev.disabled) {
          arrowPrev.disabled = true;
        }
        if (!arrowNext.disabled) {
          arrowNext.disabled = true;
        }
        const sign = this.classList.contains("arrow__prev") ? "" : "-";
        if (counter === 0) {
          tl.style.transform = `translateX(-${scrolling}px)`;
        } else {
          const tlStyle = getComputedStyle(tl);
          // add more browser prefixes if needed here
          const tlTransform =
            tlStyle.getPropertyValue("-webkit-transform") ||
            tlStyle.getPropertyValue("transform");
          const values =
            parseInt(tlTransform.split(",")[4]) +
            parseInt(`${sign}${scrolling}`);
          tl.style.transform = `translateX(${values}px)`;
        }

        setTimeout(() => {
          isElementInViewport(firstItem)
            ? setBtnState(arrowPrev)
            : setBtnState(arrowPrev, false);
          isElementInViewport(lastItem)
            ? setBtnState(arrowNext)
            : setBtnState(arrowNext, false);
        }, 1100);

        counter++;
      });
    }
  }

  // ADD SWIPE SUPPORT FOR TOUCH DEVICES
  function setSwipeFn(tl, prev, next) {
    const hammer = new Hammer(tl);
    hammer.on("swipeleft", () => next.click());
    hammer.on("swiperight", () => prev.click());
  }

  // ADD BASIC KEYBOARD FUNCTIONALITY
  function setKeyboardFn(prev, next) {
    document.addEventListener("keydown", (e) => {
      if (e.which === 37 || e.which === 39) {
        const timelineOfTop = timeline.offsetTop;
        const y = window.pageYOffset;
        if (timelineOfTop !== y) {
          window.scrollTo(0, timelineOfTop);
        }
        if (e.which === 37) {
          prev.click();
        } else if (e.which === 39) {
          next.click();
        }
      }
    });
  }
})();

        </script>
    
    
    
    
  <script>
      	// Effect of Show more button
	$(".show-more").click(function(event) {
		var txt = $(".hide-part").is(':visible') ? 'Show more' : 'Show less';
		$(".hide-part").toggleClass("show-part");
		$(this).html(txt);
		event.preventDefault();
	});
  </script>

<?php include 'footer.php';?>
