/* -------------------------------------------------- */
/* RESET                                              */
/* -------------------------------------------------- */
* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

body {
    font-family: "Inter", sans-serif;
    font-weight: 400;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
    color: inherit;
}

/* -------------------------------------------------- */
/* HEADER / NAVBAR                                    */
/* -------------------------------------------------- */
.header {
    background: #25282b;
    color: white;
    height: 64px;
    display: flex;
    align-items: center;
    position: sticky;
    top: 0px;
    left: 0px;
    width: 100%;
    z-index: 999;


}

.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 90%;
    margin: 0 auto;
}

.logo {
    display: flex;
    align-items: center;
}

.logoimage {
    width: 5rem;
}

/* -------------------------------------------------- */
/* DESKTOP NAV                                        */
/* -------------------------------------------------- */
.nav {
    display: flex;
    align-items: center;
    flex-grow: 1;
    justify-content: flex-end;
    overflow: hidden;
}

/* UL for main links */
.nav--ul__one {
    display: flex;
}

/* Common styling for ALL nav items (li, span, div, a) */
.nav-link,
.nav-item {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 300;
    margin-left: 1.6rem; /* DESKTOP horizontal spacing */
}

/* Remove left margin from first UL item */
.nav--ul__one .nav-link:first-child {
    margin-left: 0;
}

/* Hamburger hidden on desktop */
.hamburger-menu {
    display: none;
    cursor: pointer;
}

.nav a {
  border-bottom: 2px solid transparent; /* start invisible */
  transition: border-color 0.5s ease,font-size 0.25s ease;   /* smooth change */
}

.nav a:hover {
        color:#00aaff;
        font-size: 1.1rem;;
}

.nav a.active {
  border-bottom: 3px solid #cc0a0a;
  font-weight: 600;
}

.nav a.active:hover {
        color:#fff;

}


/* -------------------------------------------------- */
/* MOBILE NAV                                         */
/* -------------------------------------------------- */
@media (max-width: 800px) {

    .hamburger-menu {
        display: block;
        z-index: 4;
    }



    .nav {
        position: absolute;
        top: 64px;
        width: 0%;
        visibility: hidden;
        height: calc(100vh - 64px);
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items:normal;
        text-align: center;
        padding-top: 1.5rem;
        background-color: rgba(37, 40, 43, 0.85);
        backdrop-filter: blur(5px);    /* blur intensity */
        -webkit-backdrop-filter: blur(5px); /* Safari support */
        color: white;
        z-index: 1;

        transition: 0.35s cubic-bezier(0, 0.58, 0.07, 1.01);
        visibility: visible;
        right: -100%;
    }


    .nav.active {
        
        right: 0;
        padding-left: 25px;
        width: 100%;
        visibility: visible;

    }

    .nav a.active {
        border-bottom: 2px solid #cc0a0a;
        font-weight: 600;
    }

    .nav a.active:hover {
        color:#fff;
        font-size: 1.1rem;
}

    

    /* Mobile: stack items vertically */
    .nav--ul__one {
        flex-direction: column;
        align-items: center;
    }

    .nav-link,
    .nav-item {
        margin-left: 0;
        margin-bottom: 1rem; /* MOBILE vertical spacing */
        width:100%;
        font-size:1.1rem;
    }

    .nav-item:last-child {
        margin-bottom: 0;
    }

}


/* -------------------------------------------------- */
/* LANG SWITCHER                                         */
/* -------------------------------------------------- */
.lang-switcher {
    font-size: 1.1rem;
    font-weight: 150;
    display: flex;
    gap: 8px;
    margin-left: 2vw; /* pushes switcher to the right if nav is flex */
 
}

.lang-switcher button {
  display: flex;              /* make button a flex container */
  align-items: center;        /* vertical centering */
  justify-content: center;    /* horizontal centering */
  background: none;
  border: 1px solid #ccc;
  padding: 4px 8px;          /* balanced padding */
  cursor: pointer;
  line-height: 1;             /* prevents text from sitting too high/low */
  transition: 0.25s ease-in;
  color: white;
  
}

.lang-switcher button.active {
  border-color: white;
  background-color: red;
  color: white;
  font-weight: bold;
}

.lang-label {
    display: none;
}

@media (max-width: 800px) {
    .lang-switcher {
        margin-left:0vw;
    }

    .lang-label {
    display: inline-block;
}
}

/* -------------------------------------------------- */
/* PROMO                                              */
/* -------------------------------------------------- */
.promo {

    background: url('/img/hero-bg.webp') no-repeat center/cover;
    display:flex;
    height:45vw;
    overflow: hidden;
    scroll-margin-top: 64px;
}


.promo .leaf {
    margin-left:5vw;
    margin-top:2vw;
    width: 25vw;
    height: 35vw;

}

.promo .text {
    color: white;
    display: flex;
    flex-direction: column;
    position: relative;
    left: -7vw;
    top: 10vw;
    width:60vw;
    text-shadow: 2px 2px 2px rgba(0,0,0,0.6);

}

.promo .text h1 {
    font-weight: 400;
    font-size: 4vw;
}

.promo .text p {
    margin-top: 1vw;
    font-weight: 150;
    font-size: 1.6vw;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.6);
}

.get-started-btn {
    align-self:flex-end;
    margin-top:25px;
    margin-right: 25px;
    height:45px;
    width:250px;
    background-color:#6a0606;
    color: white;
    border-width: 1px;
    border-color: red;
    border-radius: 45px;
    font-size: 14pt;
}


.get-started-btn:hover {
    background-color:red;
}

@media (max-width: 800px) {
.promo {
        background: url('/img/hero-bg.webp') no-repeat center/cover;
        display:flex;
        height:160vw;
    }

    .promo .leaf {
        margin-left:5vw;
        margin-top:15vw;
        width: 35vw;
        height: 50vw;

    }

    .promo .text h1 {
        font-size: 7.75vw;
        font-weight: 450;
        margin-top: 16.5vw;
        margin-left:0vw;
        width:60vw;
    }

    .promo .text .desc-text {
        margin-top:10vw;
        margin-left:-25vw;
        width:85vw;
    }

    .promo .text p {
        margin-top: 2.5vw;
        font-weight: 150;
        font-size: 4vw;
        font-weight: 200;
    }


    .get-started-btn {
        width: 150px;
        height: 35px;
    }

}

/* -------------------------------------------------- */
/* ABOUTUS                                            */
/* -------------------------------------------------- */

.about-us {
    background: url('/img/about-us-circles.webp') no-repeat center/cover, linear-gradient(to right, #a70908, #6a0606);
    display:flex;
    flex-direction: column;
    height:47.5vw;
    color:white;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
    overflow: hidden;
    scroll-margin-top: 64px;;
}

.about-us .title{
    font-weight:800;
    font-size:2.25vw;
    margin-top:3vw;
    margin-left: 3vw;

}

.about-us .item1 {
    margin-top:1.5vw;
    margin-left: 3vw;
    display: flex;
    flex-direction: row;
    align-items: center;
}


.about-us .item2 {
    margin-top:1.5vw;
    margin-left: 10vw;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.about-us .item3 {
    margin-top:1.5vw;
    margin-left: 17vw;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.about-us .icon {
    width:10.0vw;
    height: 10.0vw;
    filter: drop-shadow(0px 1px 1px rgba(0,0,0,0.75));
}

.about-us .desc-text {
    font-weight: 200;
    font-size: 2.0vw;
    width: clamp(0px,75vw,800px);
}


@media (max-width: 800px) {
    .about-us {
        height: 97.5vw;
    }

    .about-us .title{
        margin-top:10vw;
        font-size: 4.5vw;
    }

    .about-us .item1,
    .about-us .item2,
    .about-us .item3 {
        margin-top:4vw;
        margin-left:3vw;
    }

    .about-us .icon {
        width:20vw;
        height: 20vw;;
    }

    .about-us .desc-text {
        font-size: clamp(0pt,3.75vw,20pt);
        width: clamp(0px,70vw,800px);
    }

}

/* -------------------------------------------------- */
/* VISION MISSION                                     */
/* -------------------------------------------------- */

.vision-mission {
    background: linear-gradient(-28deg, #f2f2f2, #e5e5e5);
    display:flex;
    flex-direction: column;
    height:67.5vw;
    color:#373b40;
    text-shadow: 0px 1px 1px rgba(0,0,0,0.25);
    overflow:hidden;
    scroll-margin-top: 64px;
    
}

.vision-mission .title{
    font-weight:800;
    font-size:2.25vw;
    margin-top:3vw;
    margin-left: 3vw;
    color: #cc0a0a;

}

.vision-mission .vision .icon,
.vision-mission .mission .icon
 {
    height:25vw;
    filter: drop-shadow(3px 3px 3px rgba(0,0,0,0.5));
}


.vision-mission .vision {
    display:flex;
    flex-direction: row-reverse;
    margin-top:3vw;
    margin-left:3vw;
    width:90vw;
}

.vision-mission .vision .text {
    margin-right: 2vw;
    margin-top: 3vw;
}

.vision-mission .vision .text .subtitle {
    font-weight: 700;
    font-size:2vw;
    color: #a70908;
}

.vision-mission .vision .text .desc {
    font-weight: 200;
    font-size:2vw;
}

.vision-mission .mission {
    display:flex;
    flex-direction: row;
    margin-top:3vw;
    margin-left:3vw;
    width:90vw;
}

.vision-mission .mission .text {
    margin-left: 2vw;
    margin-top: 3vw;
}


.vision-mission .mission .text .subtitle {
    font-weight: 700;
    font-size:2vw;
    color: #a70908;
}

.vision-mission .mission .text .desc {
    font-weight: 200;
    font-size:2vw;
}


@media (max-width: 800px) {

    .vision-mission {
        height: 220vw;
    }

    .vision-mission .title{
        margin-top:10vw;
        font-size: 4.5vw;
    }

    .vision-mission .vision,
    .vision-mission .mission {
        display:flex;
        flex-direction: column;
        align-items: center;
        margin-top: 12.5vw;;
    }
    
    .vision-mission .vision .icon,
    .vision-mission .mission .icon  {
        height:50vw;
    }

     .vision-mission .vision .text,
      .vision-mission .mission .text {
        margin-top:5vw;
        margin-left:5vw;
      }

    .vision-mission .vision .text .subtitle,
    .vision-mission .vision .text .desc,
    .vision-mission .mission .text .subtitle,
    .vision-mission .mission .text .desc
    {
              font-size: clamp(0pt,3.75vw,20pt);
    }
    

}


/* -------------------------------------------------- */
/* SERVICES                                           */
/* -------------------------------------------------- */

.services {
    background: linear-gradient(to right, #a70908, #6a0606);
    display:flex;
    flex-direction: column;
    height:120vw;
    color:white;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
    overflow: hidden;
    scroll-margin-top: 64px;
}

.services .title {
    font-weight:800;
    font-size:2.25vw;
    margin-top:3vw;
    margin-left: 3vw;
}

.services .title-text {
    font-weight: 200;
    font-size:1.75vw;
    margin-left: 3vw;
    width:92.5vw;
}

.services .svc-container {
    display: flex;
    display: row;
    justify-content: center;
}

.services .svc-group-title {
    margin-top: 4.5vw;
    margin-bottom: 2vw;
    align-self: center;
    font-size:1.75vw;
    font-weight: 700;
}

.services .svc-container .svc-item {
    display: flex;
    flex-direction: column;
     background-color: rgba(0, 0, 0, 0.25);
     border-radius: 15px; 
     box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.4);
     width: 25vw;
     margin: 2vw;
     padding: 1vw;
}

.services .svc-container .svc-item .icon {
    filter: drop-shadow(0px 1px 1px rgba(0,0,0,0.5));
    width:7.5vw;
    align-self: center;
}

.services .svc-container .svc-item .text .name {
    font-weight:600;
    font-size: 1.5vw;
    margin-top: -0vw;
    margin-bottom:0.75vw;
}


.services .svc-container .svc-item .text .desc {
    font-weight: 200;
    font-size:1.15vw;
}

.services .svc-container .svc-item .text .desc ul {
    list-style:disc;
    margin-left:1.5vw;
}


@media (max-width: 800px) {

    .services {
        height: 600vw;
    }

    .services .title{
        margin-top:10vw;
        font-size: 4.5vw;
    }

    .services .title-text {
        font-size:3.75vw;
        width:90vw;
    }

    .services .svc-group-title {
        font-size:3.75vw;
        margin-top: 10vw;
    }

    .services .svc-container {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .services .svc-container .svc-item {
        width:70vw;
    }

    .services .svc-container .svc-item .icon {
        width:30vw;
    }

    .services .svc-container .svc-item .text .name {
        font-size: 3.5vw;
        margin-left:2vw;
    }

    .services .svc-container .svc-item .text .desc {
        font-size:3.25vw;
        margin-left:4vw;
        margin-bottom:5vw;
    }

}

/* -------------------------------------------------- */
/* WHYUS                                           */
/* -------------------------------------------------- */

.whyus {
    background: linear-gradient(-28deg, #f2f2f2, #e5e5e5);
    display:flex;
    flex-direction: column;
    height:87.5vw;
    color:#373b40;
    text-shadow: 0px 1px 1px rgba(0,0,0,0.25);
    overflow: hidden;
    scroll-margin-top: 64px;   
}

.whyus .title{
    font-weight:800;
    font-size:2.25vw;
    margin-top:3vw;
    margin-left: 3vw;
    color: #cc0a0a;

}

.whyus .item {
    display:flex;
    flex-direction: row;
    align-items: center;
    margin-left: 5vw;
}

.whyus .item .icon {
    height: 10vw;
}

.whyus .item .text {   
    margin-left: 1.25vw;
}

.whyus .item .text .subtitle {
    font-weight: 700;
    font-size:2vw;
    color: #a70908;
}

.whyus .item .text .desc {
    font-weight: 200;
    font-size:2vw;
}


@media (max-width: 800px) {

    .whyus {
        height: 185vw;
    }

    .whyus .title{
        margin-top:10vw;
        font-size: 4.5vw;
    }

    .whyus .item .icon {
        height: 20vw;
    }

    .whyus .item {
        margin-top:2vw;
    }

    .whyus .item .text .subtitle,
    .whyus .item .text .desc {
        font-size: clamp(0pt,3.75vw,20pt);
        width: 65vw;
    }
}


/* -------------------------------------------------- */
/* CAROUSEL                                           */
/* -------------------------------------------------- */

@keyframes scroll {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(calc((var(--sWidth) + var(--sGap)) * var(--sQuantity) * -1), 0, 0); }
}


.slider {
	/*background: white;
	box-shadow: 0 10px 20px -5px rgba(0, 0, 0, .125);*/
	height: var(--sHeight);
	margin-top:4vw;
    align-self: center;
	overflow:hidden;
	position: relative;
	width: 91vw;
    max-width: calc((var(--sWidth)+var(--sGap))*var(--sQuantity));
	
	&::after {
		right: 0;
		top: 0;
		transform: rotateZ(180deg);
	}

	&::before {
		left: 0;
		top: 0;
	}
	
	.slide-track {
		animation: scroll var(--sAnimation) linear infinite;
		display: flex;
		width: calc((var(--sWidth) + var(--sGap)) * var(--sQuantity) * 2);
	}
	
	.slide {
		height: var(--sHeight);
		width: (var(--sWidth)+var(--sGap));

    img {
       	height: var(--sHeight);
		width: var(--sWidth);
        margin-right: var(--sGap);
    }

	}
}


/* -------------------------------------------------- */
/* CONTACT US                                         */
/* -------------------------------------------------- */

.contact-us {
    background: linear-gradient(to right, #a70908, #6a0606);
    display:flex;
    flex-direction: column;
    height: clamp(525px,60vw,625px);
    color:white;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
    overflow: hidden;
    scroll-margin-top: 64px;   
}

.contact-us .title {
    font-weight:800;
    font-size:2.25vw;
    margin-top:3vw;
    margin-left: 3vw;
}

.contact-us .title-text {
    font-weight: 200;
    font-size:1.75vw;
    margin-left: 3vw;
    width:92.5vw;
}

.contact-us .cForm {
    display:flex;
    flex-direction: column;
    margin-top: 3vw;
    margin-left: 3vw;
    font-size:clamp(10pt, 1.25vw,14pt);
    font-weight: 200;
    
}

.contact-us .cForm input{
    border-radius: 5px;

}

.contact-us .cForm .fName,
.contact-us .cForm .lName,
.contact-us .cForm .email,
.contact-us .cForm .submit {
    height: 50px;
    display: flex;
    justify-content: flex-start;


    .label {
        display: inline-block;
        width:150px;
    }

    input {
        height:35px;
        border-style: solid;
        border-radius: 10px;
        padding:10px;
        font-family: "Inter", sans-serif;
        font-weight: 400;
        font-size:clamp(10pt, 1.25vw,14pt);
        color:hsl(213, 8%, 50%);
        width: clamp(200px, 50vw,500px);
        background: linear-gradient(120deg, hsl(0, 0%, 100%) 65%, hsl(0, 0%, 90%));
        text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
    }

    .submitBtn {
        margin-top: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: "Inter", sans-serif;
        font-size:clamp(10pt, 1.25vw,14pt);
        color: white;
        border-style: none;
        border-radius: 10px;
        background-color: rgb(48, 124, 237);
        background: linear-gradient(120deg, rgb(64, 139, 252) 65%, rgb(35, 94, 183));
        padding: 0;
        text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
    }
}

.contact-us .cForm .details {
    display: flex;
    justify-content: flex-start;

    .label {
        display: inline-block;
        width:150px;
    }

    textarea {
        height:175px;
        border-style: solid;
        border-radius: 10px;
        padding:10px;
        font-family: "Inter", sans-serif;
        font-weight: 400;
        font-size:clamp(10pt, 1.25vw,14pt);
        color:hsl(213, 8%, 40%);
        font-family: "Inter", sans-serif;
        width: clamp(200px, 50vw,500px);
        text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
    }
}


@media (max-width: 800px) {

    .contact-us {
        height: clamp(750px,300vw,850px);
    }

    .contact-us .title{
        margin-top:10vw;
        font-size: 4.5vw;
    }

    .contact-us .title-text {
        font-size:3.75vw;
        width:90vw;
    }
    .contact-us .cForm {
        font-size:3.75vw;
        margin-top:5vw;
    }

    .contact-us .cForm .fName,
    .contact-us .cForm .lName,
    .contact-us .cForm .email,
    .contact-us .cForm .submit {
        display: flex;
        flex-direction: column;
        margin-top: 10px;

        height:85px;

        input {
            margin-top: 5px;
            width:90vw;
            height:45px;
            align-self: center;
            font-size:16pt;
            
        }

        .submitBtn {
            font-size:14pt;
            border-radius: 10px;
            font-weight:600;
            text-shadow: 1px 1px 1px rgba(0,0,0,0.6);

        }
    }


    .contact-us .cForm .details {
        display: flex;
        flex-direction: column;
        margin-top: 10px;

        textarea {
            margin-top: 5px;
            width:90vw;
            height:175px;
            align-self: center;
            font-size:16pt;
        }
    }

}


/* -------------------------------------------------- */
/* FOOTER                                              */
/* -------------------------------------------------- */

/* Footer Base */
.site-footer {
  background-color: #25282b; /* Dark tech-inspired tone */
  color: #e0e1dd;
  padding: 40px 20px;
}

.site-footer a {
  color: #e0e1dd;
  text-decoration: none;
  transition: color 0.2s ease, font-size 0.25s ease;
  font-weight: 200;
}

.site-footer a:hover {
  color: #00aaff; /* Accent highlight */
  font-size: 1.05rem;;
}

/* Layout */
.footer-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
}

.footer-container > div {
  flex: 1 1 100px;
  margin: 20px;
}

/* Section Titles */
.footer-container h4 {
  margin-bottom: 15px;
  font-size: 1.1rem;
  color: #f5f5f5;
  border-bottom: 2px solid #a70908;
  padding-bottom: 5px;
}

.site-footer .footer-container .footer-about .logoimage {
    margin-bottom: 2vw;
    width:10rem;
}

/* Lists */
.footer-links ul,
.footer-social ul {
  list-style: none;
  padding: 0;
}

.footer-links li,
.footer-social li {
  margin-bottom: 8px;
}

/* Contact Info */
.footer-contact p {
  margin: 5px 0;
  font-weight: 200;
}

/* Bottom Bar */
.footer-bottom {
  text-align: center;
  border-top: 1px solid #2c3e50;
  margin-top: 30px;
  padding-top: 15px;
  font-size: 0.9rem;
  color: #a9a9a9;
}

/* Responsive Design */
@media (max-width: 800px) {
  .footer-container {
    flex-direction: column;
    justify-items: center;
    align-items: center;
    text-align: left;
    
  }

  .footer-container > div {
    margin: 0px 0;
    width: 70vw;
    margin-bottom: 50px;
  }

  .site-footer .footer-container .footer-about{
    margin-bottom:25px
  }

  .site-footer .footer-container .footer-about .logoimage {
    margin-bottom: 0vw;
    width:10rem;
}



}

 /* -------------------------------------------------- */
/* COOKIE CONSENT                                   */
/* -------------------------------------------------- */
.cookie-consent {
    position: fixed;
    bottom: 20px;
    right: 20px;
    max-width: 320px;
    background: rgba(255,255,255,0.25);
    backdrop-filter: blur(5px);
    padding: 18px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    z-index: 9999;
    opacity: 1;
    transition: opacity 0.3s ease;
    font-weight: 500;
    font-size: 12pt;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
}

.cookie-consent.hidden {
    opacity: 0;
    pointer-events: none;
}

.cookie-consent .cookie-accept {
    margin-top: 10px;
    background-color:#a70908;
    color: white;
    width:100px;
    height: 35px;
    border-width: 1px;
    border-color: red;
    border-radius: 30px;
    font-size: 12pt
    
}

.cookie-consent .cookie-accept:hover {
    background-color: #cc0a0a;
}


/* -------------------------------------------------- */
/* FORM BANNER                                        */
/* -------------------------------------------------- */

.banner {
    margin-top: 5px;
    margin-bottom: 5px;
    padding: 10px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 10pt;
    text-align: center;
    width:90vw;
    align-self: center;
    
}   

.banner.success { background: rgba(101, 101, 101, 0.35); color: cornflowerblue; }
.banner.error   { background: rgba(101, 101, 101, 0.35); color: #ff7381; }
.hidden { display: none; }

@media (max-width: 800px) {
    
    .banner {
        font-size: 13pt;
    }
    
}

/* -------------------------------------------------- */
/* ANIMATIONS                                         */
/* -------------------------------------------------- */

.fadeInLeft {
            -webkit-animation: fadeInLeft 1.2s both;
            -moz-animation: fadeInLeft 1.2s both;
            -o-animation: fadeInLeft 1.2s both;
            animation: fadeInLeft 1.2s both;
        }

        @-webkit-keyframes fadeInLeft {
            0% {
                opacity: 0;
                -webkit-transform: translateX(-50px);
            }

            100% {
                opacity: 1;
                -webkit-transform: translateX(0px);
            }
        }
        @-moz-keyframes fadeInLeft {
            0% {
                opacity: 0;
                -moz-transform: translateX(-50px);
            }

            100% {
                opacity: 1;
                -moz-transform: translateX(0px);
            }
        }
        @-o-keyframes fadeInLeft {
            0% {
                opacity: 0;
                -o-transform: translateX(-50px);
            }

            100% {
                opacity: 1;
                -o-transform: translateX(0px);
            }
        }
        @keyframes fadeInLeft {
            0% {
                opacity: 0;
                transform: translateX(-50px);
            }

            100% {
                opacity: 1;
                transform: translateX(0px);
            }
        }



        .fadeInTop {
            -webkit-animation: fadeInTop 1.2s both;
            -moz-animation: fadeInTop 1.2s both;
            -o-animation: fadeInTop 1.2s both;
            animation: fadeInTop 1.2s both;
        }

        @-webkit-keyframes fadeInTop {
            0% {
                opacity: 0;
                -webkit-transform: translateY(-50px);
            }

            100% {
                opacity: 1;
                -webkit-transform: translateY(0px);
            }
        }
        @-moz-keyframes fadeInTop {
            0% {
                opacity: 0;
                -moz-transform: translateY(-50px);
            }

            100% {
                opacity: 1;
                -moz-transform: translateY(0px);
            }
        }
        @-o-keyframes fadeInTop {
            0% {
                opacity: 0;
                -o-transform: translateY(-50px);
            }

            100% {
                opacity: 1;
                -o-transform: translateY(0px);
            }
        }
        @keyframes fadeInTop {
            0% {
                opacity: 0;
                transform: translateY(-50px);
            }

            100% {
                opacity: 1;
                transform: translateY(0px);
            }
        }



        .fadeInRight {
            -webkit-animation: fadeInRight 1.2s both;
            -moz-animation: fadeInRight 1.2s both;
            -o-animation: fadeInRight 1.2s both;
            animation: fadeInRight 1.2s both;
        }

        @-webkit-keyframes fadeInRight {
            0% {
                opacity: 0;
                -webkit-transform: translateX(50px);
            }

            100% {
                opacity: 1;
                -webkit-transform: translateX(0px);
            }
        }
        @-moz-keyframes fadeInRight {
            0% {
                opacity: 0;
                -moz-transform: translateX(50px);
            }

            100% {
                opacity: 1;
                -moz-transform: translateX(0px);
            }
        }
        @-o-keyframes fadeInRight {
            0% {
                opacity: 0;
                -o-transform: translateX(50px);
            }

            100% {
                opacity: 1;
                -o-transform: translateX(0px);
            }
        }
        @keyframes fadeInRight {
            0% {
                opacity: 0;
                transform: translateX(50px);
            }

            100% {
                opacity: 1;
                transform: translateX(0px);
            }
        }


        .fadeInBottom {
            -webkit-animation: fadeInBottom 1.2s both;
            -moz-animation: fadeInBottom 1.2s both;
            -o-animation: fadeInBottom 1.2s both;
            animation: fadeInBottom 1.2s both;
        }

        @-webkit-keyframes fadeInBottom {
            0% {
                opacity: 0;
                -webkit-transform: translateY(50px);
            }

            100% {
                opacity: 1;
                -webkit-transform: translateY(0px);
            }
        }
        @-moz-keyframes fadeInBottom {
            0% {
                opacity: 0;
                -moz-transform: translateY(50px);
            }

            100% {
                opacity: 1;
                -moz-transform: translateY(0px);
            }
        }
        @-o-keyframes fadeInBottom {
            0% {
                opacity: 0;
                -o-transform: translateY(50px);
            }

            100% {
                opacity: 1;
                -o-transform: translateY(0px);
            }
        }
        @keyframes fadeInBottom {
            0% {
                opacity: 0;
                transform: translateY(50px);
            }

            100% {
                opacity: 1;
                transform: translateY(0px);
            }
        }

        /*set initial opacity as 0*/
        .animated,.animatedL,.animatedR, .animatedT,.animatedB {
            opacity: 0;
        }