/**
*
* Version: 1.0
* Author: William
* Email: csgamvhs@gmail.com
* First Release: 08 February 2019
* Author URL: www.wcwebdev.com
**/

   html {
      scroll-behavior: smooth;
    }

    body {
      scroll-behavior: smooth;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    }

	.logo-inline {
		height: 1em;
		vertical-align: -0.15em;
		width: auto;
	}
	
	#typed-roles {
	  font-weight: 500;
	}
	
		
	.typed-cursor {
	  font-size: 1.2em;
	  opacity: 0.8;
	}


  /* Pricing section styles */
    .package-card { position: relative; border: none; border-radius: .75rem; overflow: hidden; transition: transform .3s, box-shadow .3s; }
    .package-card:hover { transform: translateY(-8px); box-shadow: 0 1rem 1.5rem rgba(0,0,0,0.1); }
    .package-header { color: #fff; padding: 1.5rem; text-align: center; }
    .package-starter    .package-header { background: #0d6efd; }
    .package-growth     .package-header { background: #6f42c1; }
    .package-enterprise .package-header { background: #198754; }
    .package-title { font-size: 1.6rem; font-weight: 600; margin-bottom: .25rem; }
    .package-price { font-size: 2.75rem; font-weight: 700; line-height:1; }
    .package-body { background: #fff; padding: 1.5rem; }
    .package-features { list-style:none; padding-left:0; }
    .package-features li { margin-bottom:.75rem; display:flex; align-items:center; }
    .package-features li i { font-size:1.1rem; margin-right:.5rem; }
    .package-starter    .package-features li i { color:#0d6efd; }
    .package-growth     .package-features li i { color:#6f42c1; }
    .package-enterprise .package-features li i { color:#198754; }
    .ribbon { position:absolute; top:0; right:0; background:#fd7e14; color:#fff; padding: .25rem .75rem; font-size:.85rem; font-weight:600; border-bottom-left-radius: .75rem; }


    .container {
      margin-left: auto;
      margin-right: auto;
    }
	
	
	.hero-video {
	  position: relative;
	  width: 100%;
	  height: 100vh;            /* full viewport height */
	  overflow: hidden;
	  
	  top: 0; left: 0;
	  object-fit: cover;
	  object-position: center center;  /* default */
	}
	
	.bg-video {
	  position: relative;
	  top: 50%;
	  left: 50%;
	  min-width: 100%;
	  min-height: 100%;
	  width: auto;
	  height: auto;
	  transform: translate(-50%, -50%);
	  object-fit: cover;
	}
	

	
	.bg-video {
	  position: absolute;
	  top: 50%; left: 50%;
	  width: auto; height: auto;
	  min-width: 100%;          /* fill width */
	  min-height: 100%;         /* fill height */
	  transform: translate(-50%, -50%);
	  z-index: -1;              /* behind content */
	  object-fit: cover;        /* cover the container */
	}
	
	.hero-content {
	  position: relative;
	  z-index: 1;               /* above video */
	  top: 50%;
	  transform: translateY(-50%);
	}


    .my-intro {
      position: absolute;
      top: 70%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: rgba(0, 0, 0, 0.6);
      padding: 2rem;
      border-radius: 0.5rem;
      text-align: center;
	  width: 550px;
      max-width: 90%;
	  color: white;
      align-items: center;
      justify-content: center;
      text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
      z-index: 10;
    }

    .my-intro .btn-primary {
      background-color: rgba(255, 255, 255, 0.85);
      color: #0f6464;
      border: 2px solid #fff;
      transition: background-color 0.3s, color 0.3s;
    }

    .my-intro .btn-primary:hover {
      background-color: #fff;
      color: #0f6464;
    }

    .navbar-brand img {
      height: 50px;
      width: auto;
    }

    .logo-inline {
      height: 1em;
      vertical-align: -0.15em;
      width: auto;
    }

    .project-card {
      transition: transform 0.3s, box-shadow 0.3s;
    }

    .project-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3) !important;
    }

    .service-card {
      border-radius: 1rem;
      padding: 3rem 2rem;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.25);
      text-align: center;
      color: #fff;
      transition: transform 0.3s, box-shadow 0.3s;
    }

    .service-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
    }

    .service-icon {
      width: 88px;
      height: 88px;
      background: #ffb73e;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 1.5rem;
      font-size: 2rem;
      color: #fff;
    }

    .service-card h3 {
      font-weight: 700;
      margin-bottom: 1rem;
      color: #000;
    }

    .service-card p {
      line-height: 1.7;
      color: #000;
    }
    
    .section-title {
      position: relative;
      margin-bottom: 2.5rem;
      font-weight: 700;
      color: #333;
    }
    
    .section-title::after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: -0.75rem;
      width: 60px;
      height: 3px;
      background: #0d6efd;
      transform: translateX(-50%);
    }

    @media (max-width: 767.98px) {
		
	 .bg-video {
		/* tweak the X-percent until the cup lands in the middle */
		object-position: 80% 50%;
	  }
		
      .hero {
        background-position: top center;
      }

      .my-intro {
        top: 60%;
        transform: translate(-50%, -50%);
        padding: 1.5rem;
		width: 90%;
        max-width: 400px;
      }

      .display-5 {
        font-size: calc(1.2rem + 1.5vw);
        font-weight: 200;
        line-height: 1.2;
      }

      .lead {
        font-size: 1rem;
        font-weight: 200;
      }

      .my-intro .btn-primary {
        font-size: medium;
      }

      .service-card h3 {
        font-size: medium;
        font-weight: 500;
      }
	  
	  .contact-button {
		  border-width: 2px;
		  padding: 0.75rem 2rem;
		  font-weight: 600;
		  letter-spacing: 0.5px;
		  transition: all 0.3s ease-in-out;
		  box-shadow: 0 4px 12px rgba(0, 128, 0, 0.2);
		}

		.contact-button:hover {
		  background-color: #198754; /* Bootstrap green */
		  color: white;
		  transform: translateY(-2px);
		  box-shadow: 0 6px 16px rgba(0, 128, 0, 0.35);
		}

	  
	  
	  .back_top {
		text-align: center;
		position: fixed;
		bottom: 15px;
		height: 37px;
		width: 37px;
		background-color: #a9143f;
		display: none;
		z-index: 10000;
		border-radius: 50px;
		right: 20px;
		transition: all 0.5s;
	}
	
	.back_top i {
		color: #fff;
		line-height: 38px;
		font-size: 35px;
		display: block;
	}
	  
    }