.selector-for-some-widget {
  box-sizing: content-box;
}

/* Agile Dev Animation */
.body-agiledev {
  width: 100%;
  height: 100vh;
  background-image: url('../img/agiledev_bgm.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
canvas {
  z-index: -200;
  position: fixed;
  width: 100%;
  height: 100%;
}

/* Home Animation */
.background{
position: absolute;
left: 0;
z-index: -20;
top: 0;
width: 100%;
height: 1200px;
background-color: #21252b;
}
.circle{
  fill: #e4131d;
  }
.point{
  fill: #8491A3
}
svg{
  display: block;
  width: 30px;
  height: 30px;
  position: absolute;
  transform: translateZ(0px);
}
.career-bg{
  background-image: url('../img/career_bg.png');
}

/*Talents*/
.talent-bg{
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  position: relative !important;
}
.talents-bg{
  background-image: url('../img/talents_bg.png');
  background-repeat: no-repeat;
  background-position: bottom;
}

/*Google Ads*/
#googledisplay{
  background-image: url('../img/googleads-bg.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom;
}

/* Loader */
.bgfade{
    position: fixed;
    z-index: 1031;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(255,255,255,0.9);
}
.loader,
.loader:after {
  border-radius: 50%;
  width: 16em;
  height: 16em;
}
.loader {
  margin: 60px auto;
  font-size: 10px;
  position: relative;
  text-indent: -9999em;
  border-top: 1.1em solid rgba(255, 255, 255, 0.2);
  border-right: 1.1em solid rgba(255, 255, 255, 0.2);
  border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
  border-left: 1.1em solid #CD062D;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;
}
@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/*Agile Mobile Animation*/
.area{
    background: #0D0805;  
    background: -webkit-linear-gradient(to left, #8f94fb, #4e54c8);  
    width: 100%;
    height:100%;
}
.circles{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.circles li{
    position: absolute;
    display: block;
    list-style: none;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.2);
    animation: animate 25s linear infinite;
    bottom: -150px;
    
}
.circles li:nth-child(1){
    left: 25%;
    width: 80px;
    height: 80px;
    animation-delay: 0s;
}
.circles li:nth-child(2){
    left: 10%;
    width: 20px;
    height: 20px;
    animation-delay: 2s;
    animation-duration: 12s;
}
.circles li:nth-child(3){
    left: 70%;
    width: 20px;
    height: 20px;
    animation-delay: 4s;
}
.circles li:nth-child(4){
    left: 40%;
    width: 60px;
    height: 60px;
    animation-delay: 0s;
    animation-duration: 18s;
}
.circles li:nth-child(5){
    left: 65%;
    width: 20px;
    height: 20px;
    animation-delay: 0s;
}
.circles li:nth-child(6){
    left: 75%;
    width: 110px;
    height: 110px;
    animation-delay: 3s;
}
.circles li:nth-child(7){
    left: 35%;
    width: 150px;
    height: 150px;
    animation-delay: 7s;
}
.circles li:nth-child(8){
    left: 50%;
    width: 25px;
    height: 25px;
    animation-delay: 15s;
    animation-duration: 45s;
}
.circles li:nth-child(9){
    left: 20%;
    width: 15px;
    height: 15px;
    animation-delay: 2s;
    animation-duration: 35s;
}
.circles li:nth-child(10){
    left: 85%;
    width: 150px;
    height: 150px;
    animation-delay: 0s;
    animation-duration: 11s;
}
@keyframes animate {

    0%{
        transform: translateY(0) rotate(0deg);
        opacity: 1;
        border-radius: 0;
    }
    100%{
        transform: translateY(-1000px) rotate(720deg);
        opacity: 0;
        border-radius: 50%;
    }

}

/* Navbar */
.bg-navbar{
  background-color: #21252b;
}
.active{
  font-weight: 600 !important;
}
.link-menu {
    text-decoration: none;
}
.nihover-cont{
  border-radius: 50rem;
  width: fit-content;
}
.nihover-cont:hover{
  border-radius: 50rem;
  width: fit-content;
}
.nihover{
    border-radius: 50rem;
    width: fit-content;
}
.nihover:hover{
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 50rem;
    width: fit-content;
}
.nihover:focus{
    outline: none; !important;
}
.nihoverclear:hover{
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 50rem;
    width: fit-content;
}
.sqbutton {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
}
.sqbutton:hover {
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
}
.sqmenu:hover{
  height: 48px;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
}
.navbar-collapse {
  transition: all .2s linear;
}
.navbar {
  transition: all .5s linear;
}
.navbar-toggler span {
  display: block;
  background-color: #ffffff;
  height: 2px;
  width: 24px;
  margin-top: 6px;
  margin-bottom: 3px;
  position: relative;
  left: 0;
  opacity: 1;
  transition: all 0.35s ease-out;
  transform-origin: center left;
}
.navbar-toggler span:nth-child(1) {
  transform: translate(0%, 0%) rotate(0deg);
}
.navbar-toggler span:nth-child(2) {
  opacity: 1;
}
.navbar-toggler span:nth-child(3) {
  transform: translate(0%, 0%) rotate(0deg);
}
.navbar-toggler span:nth-child(1) {
  margin-top: 0.3em;
}
.navbar-toggler:not(.collapsed) span:nth-child(1) {
  transform: translate(15%, -33%) rotate(45deg);
}
.navbar-toggler:not(.collapsed) span:nth-child(2) {
  opacity: 0;
}
.navbar-toggler:not(.collapsed) span:nth-child(3) {
  transform: translate(15%, 33%) rotate(-45deg);
}

/* Links */
.nav-link:focus{
  outline: none !important;
}
.link-unstyled {
    font-style: inherit !important;
    color: inherit !important;
    text-decoration: none !important;
    vertical-align: inherit !important;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    outline: none; !important;
}
.link-unstyled:hover {
    border-width: 3px !important;
}
.link-unstyled:active {
    outline: none; !important;
}
.servicessq{
    box-shadow:inset 0px 0px 0px 1px #e4131d;
    outline-offset: -1px;
}
.servicessq:hover{
    box-shadow:inset 0px 0px 0px 3px #e4131d;
    outline-offset: -3px;
}
.servicessqprox{
    box-shadow:inset 0px 0px 0px 1px #707070;
    outline-offset: -1px;
}
.sqbuttonclear {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
}
.sqbuttonclear:hover {
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 50%;
}
.bg-form{
  background-image: url('../img/form_bg.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* Agile Dev */
#agiledel-bg{
  background-image: url("../img/agiledelivery_bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  height: auto;
}
#usa-bg{
  background-image: url("../img/usa_bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  height: auto;
}
.logo_clients{
  max-width: 200px;
}
#logoonikom {
  max-width: 120px;
} 

/* Media */
@media (max-width: 1399.98px) {
  
}
@media (max-width: 1199.98px) {
  .logo_clients{
    max-width: 180px;
  }
}
@media (max-width: 991.98px) {
  .bg-nav{
    background-color: rgba(0, 0, 0, 1);
  }
  .logo_clients{
    max-width: 160px;
  }
  #agiledel-bg{
    background-image: url("../img/agiledelivery_bg.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: unset;
    height: auto;
  }
  #usa-bg{
    background-image: url("../img/usa_bg.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: unset;
    height: auto;
  }
  .body-agiledev {
    width: 100%;
    height: 100vh;
    background-image: url('../img/agiledev_bgm.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: unset;
  }
}

.offcanvas-height{
  height: 80vh !important;
}

@media (max-width: 767.98px) {
  .offcanvas-height{
    height: 100vh !important;
  }
}
@media (max-width: 575.98px) {
  .logo_clients{
  max-width: 180px;
}
@media (max-width: 440px){
 
}
@media (max-width: 360px){
    #logoonikom {
        max-width: 90px;
    }     
}

.rsbutton:hover {
    background-color: #f2f3f4;
    border-radius: 50%;
}
.ok-cd, .ok-cd:hover{
    color: #000;
    text-decoration: none;
    text-transform: none;
}
.navbar-light .navbar-toggler {
    color: none !important;
    border-color: transparent !important;
}
.navbar-toggler:focus {
    box-shadow: none !important;
}
.cd-ok {
    width: 400px;
    margin: 30px;
}
.cd-in {
    width: 450px;
    margin: 8px;
}
.tx-lf {
    text-align: start !important;
    border: none !important;
}
.li-ok {
    color: #CD062D; 
    text-decoration: none;
}
.li-ok:hover {
    color: #CD062D; 
    text-decoration: none;
}
.contact-button {
    width: 32px;
}
.ok-hi {
    color: #CD062D;
}
.ok-hi2, .ok-hi2:hover{
    color: #209BCB;
}
.ok-hi3, .ok-hi3:hover{
    color: #25d366;
}
.ok-bg {
    background: url(img/background.png) fixed center no-repeat;
    background-size: cover;
    
}
.bprofile div:hover, .bprofile div:focus{
    border: solid 3px #209BCB !important;
    background-color: #f2f3f4 !important;
}
.card-body {
    min-height: 200px;
}
.bg-ea {
    background-color: #eaeaea;
}
.img-ok {
    max-width: 20vw;
}
.flbutton:hover {
    height: 94px;
    width: 94px;
    background-color: #f2f3f4;
    border-radius: 50%;
}
.card-body {
    min-height: auto !important;
}

/* About Us */
.arrow-up {
  width: 0; 
  height: 0; 
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  
  border-bottom: 5px solid black;
}