@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@700&family=Source+Sans+Pro&display=swap");
.technique--clamp h1,
.technique--clamp h2,
.technique--clamp p {
  font-size: clamp(var(--min), var(--val), var(--max));
}
.technique--clamp h1 {
  --min: 2.0em;
  --val: 5vw;
  --max: 3em;
}
.technique--clamp h2 {
  --min: 1.6em;
  /* minimum value */
  --val: 4vw;
  /* preferred value = 4% viewport width */
  --max: 2.0em;
  /* maximum value */
}
.technique--clamp p {
  --min: 1.5em;
  --val: 2.5vw;
  --max: 1.3em;
}

.technique--multiplier {
  --text-multiplier: 1;
}
@media (min-width: 48rem) {
  .technique--multiplier {
    --text-multiplier: 1.2;
  }
}
.technique--multiplier h1 {
  font-size: calc(2.0em * var(--text-multiplier));
}
.technique--multiplier h2 {
  font-size: calc(1.6em * var(--text-multiplier));
}
.technique--multiplier p {
  font-size: calc(1.0em * var(--text-multiplier));
}

.technique--og h1 {
  font-size: 2.0em;
}
.technique--og h2 {
  font-size: 1.6em;
}
.technique--og p {
  font-size: 1.5em;
}
@media (min-width: 48rem) {
  .technique--og h1 {
    font-size: 2.0em;
  }
  .technique--og h2 {
    font-size: 1.6em;
  }
  .technique--og p {
    font-size: 1.3em;
  }
}

html,
body {
  margin: auto;
  padding: 0;
  font-family: "roboto";
  font-size: 1.0em;
  font-weight: 400;
  line-height: 1.4;
  background-color: #fff;
}

.loader  {
  animation: rotate 1s infinite;  
  height: 50px;
  width: 50px;
}

.loader:before,
.loader:after {   
  border-radius: 50%;
  content: '';
  display: block;
  height: 20px;  
  width: 20px;
}
.loader:before {
  animation: ball1 1s infinite;  
  background-color: #cb2025;
  box-shadow: 30px 0 0 #f8b334;
  margin-bottom: 10px;
}
.loader:after {
  animation: ball2 1s infinite; 
  background-color: #00a096;
  box-shadow: 30px 0 0 #97bf0d;
}

@keyframes rotate {
  0% { 
    -webkit-transform: rotate(0deg) scale(0.8); 
    -moz-transform: rotate(0deg) scale(0.8);
  }
  50% { 
    -webkit-transform: rotate(360deg) scale(1.2); 
    -moz-transform: rotate(360deg) scale(1.2);
  }
  100% { 
    -webkit-transform: rotate(720deg) scale(0.8); 
    -moz-transform: rotate(720deg) scale(0.8);
  }
}

@keyframes ball1 {
  0% {
    box-shadow: 30px 0 0 #f8b334;
  }
  50% {
    box-shadow: 0 0 0 #f8b334;
    margin-bottom: 0;
    -webkit-transform: translate(15px,15px);
    -moz-transform: translate(15px, 15px);
  }
  100% {
    box-shadow: 30px 0 0 #f8b334;
    margin-bottom: 10px;
  }
}

@keyframes ball2 {
  0% {
    box-shadow: 30px 0 0 #97bf0d;
  }
  50% {
    box-shadow: 0 0 0 #97bf0d;
    margin-top: -20px;
    -webkit-transform: translate(15px,15px);
    -moz-transform: translate(15px, 15px);
  }
  100% {
    box-shadow: 30px 0 0 #97bf0d;
    margin-top: 0;
  }
}

/* unvisited link */
a:link {
color: #182838;

}

/* visited link */
a:visited {
 color: #000;
}

/* mouse over link */
a:hover {
  color: #4ac8ee;
  text-decoration: underline;
}

/* selected link */
a:active {
  color: #000;
  text-decoration: underline;
}

.a {
  background: 
    linear-gradient(to right, rgba(100, 100, 200, 10), rgba(100, 100, 200, 10)),
    linear-gradient(to right, rgba(100, 0, 100, 1), rgba(255, 0, 180, 1), rgba(0, 100, 200, 1));
  background-size: 100% 0.1em, 0 0.1em;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 400ms;
}

.a:hover,
.a:focus
.a :visited {
  background-size: 0 0.1em, 100% 0.1em;
}

.white-text {
  color: #fff;
}

.white-text:link {
    color: #4ac8ee;
}

.white-text:visited {
    color: #fff;
}

.white-text:hover {
    color: #4ac8ee;
}

h1 {
  font-size: 2.0rem;
  font-weight: bold;
  color:#182838;
  line-height: 2.2rem;
}

h2 {
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 2.0rem;
  color:#182838;
}

h3 {
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.8rem;
  color:#182838;
}

h4 {
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.8rem;
  color: #000;
}

h5 {
  font-size: 1.2rem;
    font-weight: 300;
  line-height:1.7rem;
  color:#000;
}


h6 {
  line-height: 1.0rem;
  font-size: 1.6rem;
  color:#000;
}

.home {
  position: relative;
  color: #FFF;
  background-position: top center;
  background-size: 100%;
  padding-top: 70px;
  padding-bottom: 70px;
background-image: linear-gradient(-225deg, #2D58A3 10%, #001528 51%, #002f5b 100%);
}

.home2 {
  position: relative;
  color: #FFF;
  background-position: top center;
  background-size: 100%;
  padding-left:15px;
  padding-right:15px;
padding-top:50px;
padding-bottom:50px;
    background-image: url("../img/carousel/slider1.jpg"), linear-gradient(rgba(1,5,10,2),rgba(1,60,60,2));
    background-blend-mode: overlay;
 background-attachment: fixed;
 background-position: center;
 background-repeat: no-repeat;
 background-size: cover;
}

.home22 {
  position: relative;
  color: #FFF;
  background-position: top center;
  background-size: 100%;
padding-top:50px;
padding-bottom:50px;
    background-image: url("../img/carousel/slider1.jpg"), linear-gradient(rgba(1,0,5,2),rgba(10,61,60,2));
    background-blend-mode: overlay;
 background-attachment: fixed;
 background-position: center;
 background-repeat: no-repeat;
 background-size: cover;
}

.home0 {
  position: relative;
  color: #FFF;
  background-position: top center;
  background-size: 100%;
  padding-top: 50px;
  padding-bottom: 50px;
  background-image: linear-gradient(-225deg, #2D58A3 0%, #001528 51%, #002f5b 100%);
  background: linear-gradient(to bottom, #323232 0%, #3F3F3F 40%, #1C1C1C 150%), linear-gradient(to top, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.25) 200%);
  background-blend-mode: multiply;
}


.home1 {
  position: relative;
  background-position: top center;
  background-color:#ebf0f4;
  background: linear-gradient(-45deg, #ebf0f4, #f6f6f5, #f5f5f5, #ebf0f4);
	background-size: 400% 400%;
  width: 100%;
  height: auto;
  padding-bottom: 30px;
  padding-top: 50px;
  padding-left:20px;
  padding-right:20px;
  animation: gradient 15s ease infinite;
}
@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

.home01 {
  position: relative;
  background-position: top center;
  color:#FFF;
  background-color:#ebf0f4;
  background: linear-gradient(-45deg, #001528, #002f5b, #2D58A3, #001528);
  background-size: 400% 400%;
  height: auto;
  padding-bottom: 35px;
  padding-top: 35px;
  padding-left:15px;
  padding-right:15px;
  animation: gradient 15s ease infinite;
}

.home02 {
  position: relative;
  background-position: top center;
  color:#FFF;
  background-color:#ebf0f4;
  background: linear-gradient(-45deg, #001528, #002f5b, #2D58A3, #001528);
  background-size: 400% 400%;
  background-image: linear-gradient(-225deg, #2D58A3 0%, #001528 51%, #002f5b 100%);
  width: 100%;
  height: auto;
  padding-bottom: 35px;
  padding-top: 35px;
  padding-left:15px;
  padding-right:15px;
  animation: gradient 15s ease infinite;
}
.footer-cta {
  color: #FFF;
  position: relative;
  background-size: 100%;
  padding-top: 50px;
  padding-bottom: 50px;
  padding-left:20px;
  padding-right:20px;
  background-image: linear-gradient(-225deg, #2D58A3 0%, #001528 51%, #002f5b 100%);
}

.footer-section {
  color: #FFF;
  position: relative;
  background-size: 100%;
  padding-top: 35px;
  padding-bottom: 35px;
  padding-left:15px;
  padding-right:15px;
  background-image: linear-gradient(-225deg, #2D58A3 0%, #001528 51%, #002f5b 100%);
}

.gray-section {
position: relative;
  background-position: top center;
  background-size: 100%;
  background-color: #f8f9fa;
  padding-top: 35px;
  padding-bottom: 35px;
  padding-left:15px;
  padding-right:15px;
}

.light-blue-section {
  position: relative;
  background-position: top center;
  background-size: 100%;
  padding-top: 35px;
  padding-bottom: 35px;
  padding-left:15px;
  padding-right:15px;
  background: rgb(224,237,245);
background: linear-gradient(90deg, rgba(224,237,245,1) 0%, rgba(221,228,244,1) 35%, rgba(206,231,237,1) 92%, rgba(224,241,245,1) 100%);
}

.deep-blue-section {
  color: #FFF;
  position: relative;
  background-size: 100%;
  padding-top: 35px;
  padding-bottom: 35px;
  padding-left:15px;
  padding-right:15px;
  background-image: linear-gradient(-225deg, #2D58A3 0%, #001528 51%, #002f5b 100%);
}

.white-section {
  position: relative;
  background-color: #fff;
  padding-top: 35px;
  padding-bottom: 35px;
  padding-left:15px;
  padding-right:15px;
}

.blog-post-section {
  position: relative;
  background-color: #fff;
  padding-top: 40px;
  padding-bottom: 35px;
  padding-left:15px;
  padding-right:15px;
font-family: "roboto";
  font-size: 1.2em;
  font-weight: 400;
  line-height: 1.4;
}


.welcome-text {
  color: #FFF;
  font-size: 2.3rem;
  line-height: 2.6rem;
}

.hero-text {
  color: #182838;
  font-size: 2.5rem;
  font-weight: bold;
  line-height: 2.7rem;
  background: -webkit-linear-gradient(#eee, #4ac8ee);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}


.intro {
  color:#2D58A3;
  font-size: 2.6rem;
  line-height: 3.0rem;

}

.staff-name {
  font-size: 1.9rem;
  line-height: 2.0rem;
  text-align:left;
  color:#2958a6;
}
.staff-title {
  color:#000;
  font-style: italic;
  text-align:left;

}
.img-box {
  padding-top: 10px;
  padding-bottom: 10px;
  padding-right: 15px;
  padding-left: 15px;
  background-color:#FFF;
}

.staff-box {
  position: relative;
  background-color: #fff;
  background-position: top center;
  background-size: 100%;
  padding-top: 50px;
  padding-bottom: 50px;
}

.projects-with-title {
 padding-top: 0px;
 margin: 10px;
 padding-bottom: 15px;
 box-shadow: rgba(0, 0, 0, 0.20) 0px 0px 10px;
 border-top: 2px solid #5ea4f3;
 text-align:center;
 opacity: 1;
  transform: translate3d(0, 20px, 0); /* ADDED - start y position as 20px */

  cursor: pointer;
  transition: 0.25s all ease-in-out;
}

.projects-with-title:hover {
  opacity: 1;
  transform: translate3d(0, 0, 0); /* ADDED - move y to 0 on hover */
}
.projects-with-title h4 {
 margin: 10px;
 text-align:center;
}
.projects-with-title h5 {
 margin: 10px;
 text-align:center;
}
.projects-with-title h6 {
 margin: 10px;
 text-align:center;
 font-weight: lighter;
}

.projects-with-title p {
 margin: 10px;
font-weight: light;
 text-align:center;
}
.projects-without-title {
 padding: 0px;
  margin: 10px;
 box-shadow: rgba(0, 0, 0, 0.20) 0px 0px 10px;
  border-top: 2px solid #5ea4f3;
  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  }
  @-webkit-keyframes slideInUp {
  0% {
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  }
  }
  @keyframes slideInUp {
  0% {
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  }
  } 

.fadeInLeftBig {
  -webkit-animation-name: fadeInLeftBig;
  animation-name: fadeInLeftBig;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  }
  @-webkit-keyframes fadeInLeftBig {
  0% {
  opacity: 0;
  -webkit-transform: translate3d(-2000px, 0, 0);
  transform: translate3d(-2000px, 0, 0);
  }
  100% {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
  }
  @keyframes fadeInLeftBig {
  0% {
  opacity: 0;
  -webkit-transform: translate3d(-2000px, 0, 0);
  transform: translate3d(-2000px, 0, 0);
  }
  100% {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
  } 

.post-image {
 padding-top: 20px;
 padding-bottom: 20px;
}

.post-content {
 padding-top: 20px;
 padding-bottom: 20px;
}

.footer {
 color: #FFF;
 position: relative;
 background-image: linear-gradient(-225deg, #2D58A3 0%, #001528 51%, #002f5b 100%);
 background-position: top center;
 background-size: 100%;
}

.footer-link {
  color: #4ac8ee;
}

.copyright {
  color: #FFF;
  padding-bottom: 20px;
  padding-top: 20px;
  background-color: #000;
}

.lead {
  font-size: 1.25rem;
  font-weight: 300;
}



hr {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

small,
.small {
  font-size: 80%;
  font-weight: 400;
}

mark,
.mark {
  padding: 0.2em;
  background-color: #fcf8e3;
}

.blockquote {
  padding: 0.5rem 1rem;
  margin-bottom: 2rem;
  font-size: 1.25rem;
  border-left: 5px solid #4ac8ee;
}

.blockquote-footer {
  color: #6c757d;
}

.blockquote-footer::before {
  content: "\2014 \00A0";
}

.text-primary {
  color: #2958a6 !important;
}

a.text-primary:hover, a.text-primary:focus {
  color: #2958a6 !important;
}
.clearfix {
	padding-top: 100px
}

.svg-icon {
  width: 70px;
  height: 70px;
  vertical-align: text-bottom;
  stroke: currentColor;
  stroke-width: 3;
  --layer1: currentColor;
  --layer2: currentColor;
  --layer3: currentColor;
}

.svg-icon.svg-icon-light {
  stroke-width: 2;
}

.svg-icon.svg-icon-heavy {
  stroke-width: 4;
}

.svg-icon-big {
  width: 100px;
  height: 100px;
}

.svg-icon-sm {
  width: 32px;
  height: 32px;
}
.btn-light {
  margin-top:10px;   
}
.btn-special {
 background: #3a7bd5;  /* fallback for old browsers */
 background: -webkit-linear-gradient(to right, #2D58A3, #4ac8ee);  /* Chrome 10-25, Safari 5.1-6 */
 background: linear-gradient(to right, #2D58A3, #4ac8ee); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
 color: #fff;
 margin-top:10px;
}

a.btn-special:link {
 background: #3a7bd5;  /* fallback for old browsers */
 background: -webkit-linear-gradient(to right, #2D58A3, #4ac8ee);  /* Chrome 10-25, Safari 5.1-6 */
 background: linear-gradient(to right, #2D58A3, #4ac8ee); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
 color: #fff;

}

a.btn-special:visited {
 background: #3a7bd5;  /* fallback for old browsers */
 background: -webkit-linear-gradient(to right, #2D58A3, #000);  /* Chrome 10-25, Safari 5.1-6 */
 background: linear-gradient(to right, #2D58A3, #000); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
 color: #fff;

}

a.btn-special:hover {
 background: #f10;  /* fallback for old browsers */
 background: -webkit-linear-gradient(to right, #f10, #000);  /* Chrome 10-25, Safari 5.1-6 */
 background: linear-gradient(to right, #2D58A3, #000); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
 color: #fff;
}


.palment-btn {
  color: #fff;
  background-image: linear-gradient(-225deg, #2D58A3 0%, #001528 51%, #002f5b 100%)
}

a.palment-btn:link {
  color: #fff;
  background-image: linear-gradient(-225deg, #2D58A3 0%, #001528 51%, #002f5b 100%)
}

a.palment-btn:visited {
  color: #fff;
  background-image: linear-gradient(-225deg, #2D58A3 0%, #001528 51%, #002f5b 100%)
}

.palment-btn:hover {
	color: #fff;
background-image: linear-gradient(-225deg, #002f5b 0%, #001528 51%, #2D58A3 100%)
}

.palment-cta {
  padding: 15px;
  background-color: #ebf0f4;
  color: #000;
}

.submit-button{
  padding: 15px 40px;
  background: #000;
  border:0;
  color: #fff;
  text-transform: uppercase;
  font-family: helvetica;
  font-size: 12px;
  letter-spacing: 3px;
  position: relative;
  transition:         all .4s cubic-bezier(0.645, 0.045, 0.355, 1);
  cursor: pointer;
  display: block;
  margin: 10px auto;
}

.submit-button::after,
.submit-button::before{
  content: "";
  position: absolute;
  top: 50%;
  right: 0px;
  transform: translateY(-50%);
    opacity: 0;
  transition:         all .4s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.submit-buttonn::after{
    width: 30px;
    height: 1px;
    background: white;
    transform: translateX(-3px);
    margin-top: 0px;
}

.submit-button::before{
    content: "";
    transform: rotate(-135deg) translateX(50%);
    width: 11px;
    height: 11px;
    background: transparent;
    border-left: 1px solid white;
    border-bottom: 1px solid white;
  margin-top: -1px;
}


.submit-button:hover{
  padding: 15px 60px 15px 20px;
}

.submit-button:hover::after,
.submit-button:hover::before{
  opacity: 1;
  right: 15px;
}



.bg-header {
  width: 100%;
  height: auto;
  padding-bottom: 100px;
  padding-top: 100px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.7),  rgba(0, 0, 0, 0.7)), url('../img/slider1.jpg');
}

}


.pricing-table{
  background-color: #FFF;
  font-family: 'Montserrat', sans-serif;
}

.pricing-table .block-heading {
  padding-top: 50px;
  margin-bottom: 40px;
  text-align: center; 
}

.pricing-table .block-heading h2 {
  color: #3b99e0;
}

.pricing-table .block-heading p {
  text-align: center;
  max-width: 420px;
  margin: auto;
  opacity: 0.7; 
}

.pricing-table .heading {
  text-align: center;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1); 
}

.pricing-table .item {
  background-color: #ffffff;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  border-top: 2px solid #5ea4f3;
  padding: 30px;
  overflow: hidden;
  position: relative; 
}

.pricing-table .col-md-5:not(:last-child) .item {
  margin-bottom: 30px; 
}

.pricing-table .item button {
  font-weight: 600; 
}

.pricing-table .ribbon {
  width: 160px;
  height: 32px;
  font-size: 12px;
  text-align: center;
  color: #fff;
  font-weight: bold;
  box-shadow: 0px 2px 3px rgba(136, 136, 136, 0.25);
  background: #4dbe3b;
  transform: rotate(45deg);
  position: absolute;
  right: -42px;
  top: 20px;
  padding-top: 7px; 
}

.pricing-table .item p {
  text-align: center;
  margin-top: 20px;
  opacity: 0.7; 
}

.pricing-table .features .feature {
  font-weight: 600; }

.pricing-table .features h4 {
  text-align: center;
  font-size: 14px;
  padding: 5px; 
}

.pricing-table .price h4 {
  margin: 15px 0;
  font-size: 28px;
  text-align: center;
  color: #2288f9; 
}

.pricing-table .buy-now button {
  text-align: center;
  margin: auto;
  font-weight: 600;
  padding: 9px 0; 
}

.values {
 background-color: #ffffff;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  border-top: 2px solid #5ea4f3;
  padding: 20px;
  margin-top:5px;
  margin-bottom:5px;
  overflow: hidden;
  position: relative; 
}

.services {
 background-color: #ffffff;
  box-shadow: rgba(0, 0, 0, 0.20) 0px 5px 10px;
  border-top: 2px solid #5ea4f3;
  padding: 10px;
  margin:10px;
  overflow: hidden;
  position: relative; 
}