*,
::before,
::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  background-color: white;
  font-family: 'Work Sans', sans-serif;
  font-weight: 400;
  line-height: 1.45;
  color: #333;
}

@media (prefers-reduced-motion: no-preference) {
  * {
    scroll-behavior: smooth;
  }
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  color: rgb(4, 4, 45);
}

.container-custom {
  width: 75%;
  margin: 0 auto;
}

.navbar-brand {
  font-family: 'Work Sans', sans-serif;
  font-weight: bold;
}

.accordion-button:not(.collapsed) {
  background-color: #77c9ff;
}



.accordion-button.collapsed:focus {
  outline: 0;
  box-shadow: none;
}

.accordion-button:focus {
  box-shadow: none;
}

:root {
  --btn-color: #040434;
  --btn-bg: #76c9ff;
  --btn-border-color: #6ab4e5;
  --btn-hover-color: #fff;
  --btn-hover-bg: #528cb2;
  --btn-hover-border-color: #528cb2;
  --btn-focus-shadow-rgb: 49, 132, 253;
  --btn-active-color: #fff;
  --btn-active-bg: #528cb2;
  --btn-active-border-color: #528cb2;
  --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --btn-disabled-color: #fff;
  --btn-disabled-bg: #91d3ff;
  --btn-disabled-border-color: #91d3ff;
  --fb-bg: #3b5998;
  --twiter-bg: #00acee;
  --insta-bg: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  --lin-color: #0077b5;
  --git-color: #171515;

}

.btn-primary {
  color: var(--btn-color);
  background: var(--btn-bg);
  border-color: var(--btn-border-color);
}

.btn-primary:hover {
  background: var(--btn-hover-bg);
  border-color: var(--btn-hover-border-color);
}

.btn-primary:active {
  background: var(--btn-active-bg);
  border-color: var(--btn-active-border-color);
}

.btn-primary:disabled {
  background: var(--btn-disabled-bg);
  border-color: var(--btn-disabled-border-color);
}

.btn-check:checked+.btn,
.btn.active,
.btn.show,
.btn:first-child:active,
:not(.btn-check)+.btn:active {

  background: var(--btn-active-bg);
  border-color: var(--btn-active-border-color);
}

/* 
i.fa-brands.fa-square-facebook {
  color: var(--fb-bg);
}

i.fab.fa-twitter {
  color: var(--twiter-bg);
}

i.fab.fa-instagram {
  color: #fff;

  background: var(--insta-bg);
}

i.fab.fa-linkedin {
  color: var(--lin-color);
}

i.fab.fa-github {
  color: var(--git-color);
} */


/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
  h1 {
    font-size: calc(1.61803398875 * 1.05em);
  }

  h2 {
    font-size: calc(1.61803398875 * 1em);
  }

  h3 {
    font-size: calc(1.61803398875 * 0.95em);
  }

  h4 {
    font-size: calc(1.61803398875 * 0.9em);
  }

  h5 {
    font-size: calc(1.61803398875 * 0.85em);
  }

  h6 {
    font-size: calc(1.61803398875 * 0.8em);
  }

  p {
    font-size: calc(1em + 0.1vw);
  }
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {
  h1 {
    font-size: calc(1.61803398875 * 1.075em);
  }

  h2 {
    font-size: calc(1.61803398875 * 1.025em);
  }

  h3 {
    font-size: calc(1.61803398875 * 0.975em);
  }

  h4 {
    font-size: calc(1.61803398875 * 0.925em);
  }

  h5 {
    font-size: calc(1.61803398875 * 0.875em);
  }

  h6 {
    font-size: calc(1.61803398875 * 0.825em);
  }

  p {
    font-size: calc(1em + 0.075vw);
  }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {
  h1 {
    font-size: calc(1.61803398875 * 1.1em);
  }

  h2 {
    font-size: calc(1.61803398875 * 1.05em);
  }

  h3 {
    font-size: calc(1.61803398875 * 1em);
  }

  h4 {
    font-size: calc(1.61803398875 * 0.95em);
  }

  h5 {
    font-size: calc(1.61803398875 * 0.9em);
  }

  h6 {
    font-size: calc(1.61803398875 * 0.85em);
  }

  p {
    font-size: calc(1em + 0.05vw);
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) {
  h1 {
    font-size: calc(1.61803398875 * 1.125em);
  }

  h2 {
    font-size: calc(1.61803398875 * 1.075em);
  }

  h3 {
    font-size: calc(1.61803398875 * 1.025em);
  }

  h4 {
    font-size: calc(1.61803398875 * 0.975em);
  }

  h5 {
    font-size: calc(1.61803398875 * 0.925em);
  }

  h6 {
    font-size: calc(1.61803398875 * 0.875em);
  }

  p {
    font-size: calc(1em + 0.03vw);
  }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  h1 {
    font-size: calc(1.61803398875 * 1.15em);
  }

  h2 {
    font-size: calc(1.61803398875 * 1.1em);
  }

  h3 {
    font-size: calc(1.61803398875 * 1.05em);
  }

  h4 {
    font-size: calc(1.61803398875 * 1em);
  }

  h5 {
    font-size: calc(1.61803398875 * 0.95em);
  }

  h6 {
    font-size: calc(1.61803398875 * 0.9em);
  }

  p {
    font-size: calc(1em + 0.02vw);
  }
}




/* Fun Fact: Type 'scale' is named after a musical 'scale' which is the distance between notes. */
hr {

  color: rgb(255, 255, 255);

}

.custom-card,
.card-header {
  border: none;
}

a {
  text-decoration: none;
}

a:hover {
  cursor: pointer;
}

.reveal {
  position: relative;
  opacity: 0;
}

.reveal.active {
  opacity: 1;
}

.active.fade-bottom {
  animation: fade-bottom 1s ease-in;
}

.active.fade-left {
  animation: fade-left 1s ease-in;
}

.active.fade-right {
  animation: fade-right 1s ease-in;
}

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

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

@keyframes fade-left {
  0% {
    transform: translateX(-100px);
    opacity: 0;
  }

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

@keyframes fade-right {
  0% {
    transform: translateX(100px);
    opacity: 0;
  }

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


@media only screen and (min-width=576px) {}

.navbar-nav a:hover {
  text-decoration: underline;
  font-weight: 600;
}

.navbar-nav a:active {
  font-weight: bolder;
}

.navbar-text a:hover {
  text-decoration: none;
}

.navbar-brand {
  font-family: 'Work Sans', sans-serif;
  font-weight: bold;
}

.custom-icon:hover {
  transform: scale(1.5);
}

.custom-btn-color {
  background-color: #ffe038;
}

.services a:hover {
  text-decoration: underline;
  font-weight: 500;
}

.custom-footer a:hover {
  text-decoration: underline;
  font-weight: 600;
}

.custom-contact a:hover {
  text-decoration: underline;
  font-weight: 500;
}

.active {
  font-weight: 500;
}

.banner {
  background-color: #1e45ac;
  color: #fff;
  background: linear-gradient(45deg, rgb(118, 201, 255), #1e45ac);
}

footer {
  background-color: #77c9ff;
}

.rot-re {
  position: relative;
}

.rot {
  position: absolute;
  top: 10%;
  right: 15%;
  margin: auto;
  width: 40px;
  height: 50px;
  color: white;
  animation: mymove 10s infinite;
}

.rot-small {
  position: absolute;
  top: 5%;
  right: 0;
  margin: auto;
  width: 45px;
  height: 50px;
  color: bisque;
  animation: mymove-small 10s infinite;
}


@keyframes mymove {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes mymove-small {
  100% {
    transform: rotate(-360deg);
  }
}

.icon-hov:hover {
  transform: scale(1.1);
}

.fnav {
  list-style-type: none;
  padding-left: 0;
}

.fnav li {
  padding: 0.2rem 0;
}



/* animation */

svg#freepik_stories-programming:not(.animated) .animable {
  opacity: 0;
}

svg#freepik_stories-programming.animated #freepik--background-complete--inject-7 {
  animation: 2.8s 1 forwards cubic-bezier(.36, -0.01, .5, 1.38) slideDown;
  animation-delay: 0s;
}

svg#freepik_stories-programming.animated #freepik--Screens--inject-7 {
  animation: 1s 1 forwards cubic-bezier(.36, -0.01, .5, 1.38) slideUp;
  animation-delay: 0s;
}

svg#freepik_stories-programming.animated #freepik--Character--inject-7 {
  animation: 1s 1 forwards cubic-bezier(.36, -0.01, .5, 1.38) slideDown;
  animation-delay: 0s;
}

svg#freepik_stories-programming.animated #freepik--Plant--inject-7 {
  animation: 1s 1 forwards cubic-bezier(.36, -0.01, .5, 1.38) slideDown;
  animation-delay: 0s;
}

svg#freepik_stories-programming.animated #freepik--Devices--inject-7 {
  animation: 1s 1 forwards cubic-bezier(.36, -0.01, .5, 1.38) slideDown;
  animation-delay: 0s;
}

svg#freepik_stories-programming.animated #freepik--Desk--inject-7 {
  animation: 1s 1 forwards cubic-bezier(.36, -0.01, .5, 1.38) slideDown;
  animation-delay: 0s;
}

@keyframes slideDown {
  0% {
    opacity: 0;
    transform: translateY(-30px);
  }

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

@keyframes slideUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }

  100% {
    opacity: 1;
    transform: inherit;
  }
}



@media only screen and (max-width:576px) {
  .container-custom {
    width: 100%;
  }

  .ban {
    height: auto;
  }

  .fnav li {
    font-size: medium;
  }
}



/*  */

/* 
.timeline {
  padding: 50px;
} */
.timeline-content {
  margin-left: 1.8rem;
}

.timeline ul {
  padding: 0;
}





.timeline .default-line {
  content: "";
  position: absolute;
  width: 4px;
  background: #bdc3c7;
  height: 600px;
  visibility: hidden;
}

.timeline .draw-line {
  width: 4px;
  height: 100%;
  position: absolute;
  background: #77c9ff;
}

.timeline ul li {
  list-style-type: none;
  position: relative;
  margin: 0 auto;
  height: auto;
  background: transparent;
}

.timeline ul li.in-view {
  transition: 0.125s ease-in-out, background-color 0.2s ease-out, color 0.1s ease-out, border 0.1s ease-out;
}

.timeline ul li.in-view::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  transform: translateX(-50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;

  background-color: #77c9ff;
  background-size: 20px 20px;
  background-repeat: no-repeat;
  background-position: center;
  transition: 0.125s ease-in-out, background-color 0.2s ease-out, color 0.1s ease-out, border 0.1s ease-out;
}

.timeline ul li::before {
  content: "";
  position: absolute;
  left: 0%;
  top: 0;
  transform: translateX(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: inherit;
  background: #bdc3c7;
  transition: all 0.4s ease-in-out;
}

@media screen and (max-width: 576px) {
  .timeline-ul {
    padding-left: .5rem;
  }
}

@media screen and (max-width: 768px) {

  .timeline .default-line,
  .timeline .draw-line {
    width: 2px;
  }

  .timeline-content {
    margin-left: 1.2rem;
  }
}