/* 
    light shade: #EEE5E5
    dark blue shade: #031D44
    Light Green: #00BF3A
    light brown: #676767
    orange: #FF8F21

    possible background option for top container
    background: linear-gradient(to right bottom,#f7f5fb 50%,#fff 50%);
*/


/* primary color: #031d44 */
/* secondary color: #ff8f21 */
/* additional color: #EAF0F1 */
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap');


html {
  scroll-behavior: smooth;
}

body{
    margin:0;
    background: whitesmoke;
    font-family: 'Open Sans', sans-serif;
    /* font-family: 'Raleway', sans-serif; */
    overflow-x: hidden;
}

a{
    text-decoration: none;
    color:#f1f1f1;
    font-weight: bolder;
}

a:hover{
    text-decoration: none;  
    color:#ff8f21;
}

a:active{
    text-decoration: none;
    color: #ff8f21;
}

p{
    /* text-transform: lowercase ; */
    color: #000000;
}

.card-body p{
    color: #000000;
}

.hide{
    display: none !important;
}

.show{
    display: unset;
    background: #18212a;
}

.navbar-toggler {
    background-color: #f1f1f1;
    margin-left: auto;
}

.ft-2rem{
    font-size: 1.5rem;
    text-align: justify;
    /* font-size: 140%;
    line-height: 2rem;
    
    color: #555454; */
}

@-webkit-keyframes fadein {
    from {
      opacity: 0;
    }
    to {
        opacity: 1;
    }
  }
  @-webkit-keyframes fadeout {
    from {
      opacity: 1;
    }
    to {
        opacity: 0;
    }
  }

/* loading gears animation css starts */
body .loader {
    height: 100%;
    margin: auto;
    /* width: 400px; */
  }
   
  body .loader_cogs {
    width: 100px;
    height: 100px;
    top: -120px !important;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
  }
  body .COGfirst {
    position: relative;
    width: 100px;
    height: 100px;
    -webkit-transform-origin: 50px 50px;
            transform-origin: 50px 50px;
    -webkit-animation: rotate 10s infinite linear;
            animation: rotate 10s infinite linear;
  }
  body .COGfirst div:nth-of-type(1) {
    -webkit-transform: rotate(30deg);
            transform: rotate(30deg);
  }
  body .COGfirst div:nth-of-type(2) {
    -webkit-transform: rotate(60deg);
            transform: rotate(60deg);
  }
  body .COGfirst div:nth-of-type(3) {
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
  }
  body .COGfirst div.firstPart {
    width: 100px;
    border-radius: 15px;
    position: absolute;
    height: 100px;
    background: #ff8f21;
  }
  body .COGfirst div.firstHole {
    width: 50px;
    height: 50px;
    border-radius: 100%;
    background: white;
    position: absolute;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
  }
  body .COGsecond {
    position: relative;
    width: 80px;
    -webkit-transform: rotate(16deg);
            transform: rotate(16deg);
    top: 28px;
    -webkit-transform-origin: 40px 40px;
            transform-origin: 40px 40px;
    animation: rotate_left 10s .1s infinite reverse linear;
    left: -24px;
    height: 80px;
  }
  body .COGsecond div:nth-of-type(1) {
    -webkit-transform: rotate(30deg);
            transform: rotate(30deg);
  }
  body .COGsecond div:nth-of-type(2) {
    -webkit-transform: rotate(60deg);
            transform: rotate(60deg);
  }
  body .COGsecond div:nth-of-type(3) {
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
  }
  body .COGsecond div.secondPart {
    width: 80px;
    border-radius: 10px;
    position: absolute;
    height: 80px;
    background: #00BF3A;
  }
  body .COGsecond div.secondHole {
    width: 40px;
    height: 40px;
    border-radius: 100%;
    background: white;
    position: absolute;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
  }
  body .COGthird {
    position: relative;
    width: 60px;
    top: -65px;
    -webkit-transform-origin: 30px 30px;
            transform-origin: 30px 30px;
    -webkit-animation: rotate_left 10.2s .4s infinite linear;
            animation: rotate_left 10.2s .4s infinite linear;
    -webkit-transform: rotate(4deg);
            transform: rotate(4deg);
    left: 79px;
    height: 60px;
  }
  body .COGthird div:nth-of-type(1) {
    -webkit-transform: rotate(30deg);
            transform: rotate(30deg);
  }
  body .COGthird div:nth-of-type(2) {
    -webkit-transform: rotate(60deg);
            transform: rotate(60deg);
  }
  body .COGthird div:nth-of-type(3) {
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
  }
  body .COGthird div.thirdPart {
    width: 60px;
    border-radius: 8px;
    position: absolute;
    height: 60px;
    background: #6c7079;
  }
  body .COGthird div.thirdHole {
    width: 30px;
    height: 30px;
    border-radius: 100%;
    background: white;
    position: absolute;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
  }
   
  /* Animations */
  @-webkit-keyframes rotate {
    from {
      -webkit-transform: rotate(0deg);
              transform: rotate(0deg);
    }
    to {
      -webkit-transform: rotate(360deg);
              transform: rotate(360deg);
    }
  }
  @keyframes rotate {
    from {
      -webkit-transform: rotate(0deg);
              transform: rotate(0deg);
    }
    to {
      -webkit-transform: rotate(360deg);
              transform: rotate(360deg);
    }
  }
  @-webkit-keyframes rotate_left {
    from {
      -webkit-transform: rotate(16deg);
              transform: rotate(16deg);
    }
    to {
      -webkit-transform: rotate(376deg);
              transform: rotate(376deg);
    }
  }
  @keyframes rotate_left {
    from {
      -webkit-transform: rotate(16deg);
              transform: rotate(16deg);
    }
    to {
      -webkit-transform: rotate(376deg);
              transform: rotate(376deg);
    }
  }
  @-webkit-keyframes rotate_right {
    from {
      -webkit-transform: rotate(4deg);
              transform: rotate(4deg);
    }
    to {
      -webkit-transform: rotate(364deg);
              transform: rotate(364deg);
    }
  }
  @keyframes rotate_right {
    from {
      -webkit-transform: rotate(4deg);
              transform: rotate(4deg);
    }
    to {
      -webkit-transform: rotate(364deg);
              transform: rotate(364deg);
    }
  }
/* loading gears animation css ends */

.loader-wrapper {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #031d44;
    display:flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}


.brand-name{
    font-family: 'Raleway', sans-serif;
    /* color: #031d44; */
    background: -webkit-linear-gradient(#FF8F21,#00BF3A);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.brand-name::selection{
    background: #ff8f21 ;
}

nav{
    height: 6rem;
}

.navbar-brand img{
    width: 7rem;
    height: 5rem;
}

.navbar-brand{
    margin-right: unset;
}



.navbar-light .navbar-nav .active > .nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .show > .nav-link {
    color: #676767;
}

.navbar-light .navbar-nav .nav-link:hover {
    color: #676767;
}

.nav-item:hover{
    color: #676767;
}

.navbar-light .navbar-nav .nav-link {
    font-weight: bolder;
    width: 100%;
    padding-left: 2rem;
    padding-right: 2rem;
    color: #f1f1f1;
}

.nav-item:hover{
    background: #f1f1f1;
}

.active{
    background: #f1f1f1;
    
}


.text-container{
    /* text-align: center;
    -ms-transform: translateY(12rem);
    transform: translateY(12rem); */
    color: #676767;
}

.text-container h1{
    font-family: 'Raleway', sans-serif;
}

.text-container p{
    font-weight: bold;
}


.heading{
    text-align: center;
    color: #318051;
}

h2::before{
    
        width: 30px;
        content: " ";
        position: absolute;
        border-top: solid 3px #f08040;
        /* left: 0; */
        bottom: 0;
    
}

/* h4::before{
    
    width: 30px;
    content: " ";
    position: absolute;
    border-top: solid 3px #fe4e46;
    bottom: 0;

} */

.nav-link:hover::before{
    /* width: 30px;
    content: " ";
    position: absolute;
    border-top: solid 3px #fe4e46;
    bottom: 0; */
}

.heading::selection {
    color: #031d44;
    background-color: #ff8f21;
}

p::selection{
    color: #031d44;
    background-color: #ff8f21;
}

.heading h2{
    display: inline-block;
    font-family: 'Raleway', sans-serif;
}

.heading{
    font-family: 'Raleway', sans-serif;
}

.display-4{
    font-size: 3.2rem;
}

.top-container{
    min-height:100vh;
    height:500px;
    background: #eee5e5;
    /* background: linear-gradient(to right bottom,#00BF3A 50%,#fff 50%); */
    /* background-image: '../images/logo.png'; */
    background: url('../images/bg-mobile.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    /* for centering text */
    display: flex;
    align-items: center; 
    justify-content: center;
}

.vert-middle{
    padding-top: calc(10rem + 55px);
    padding-bottom: 10rem;
}

.typewrite{
    text-align:left;
    font-family: 'Raleway', sans-serif;
    font-size: 1.2rem;
}

.autotype-services{
    color: #031d44;
    font-family: 'Raleway', sans-serif;
    font-size: larger;
}

.about-container{
    /* min-height: 100vh; */
    min-height: 500px;
    padding-top: 20px;
}

.card {
    border:0;
    border-radius: 0;
    background: none;
    /* width: 15rem; */
    margin-left: auto !important;
    margin-right: auto !important;
    background: white;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    border-top-left-radius: calc(.25rem - 1px);
    border-top-right-radius: calc(.25rem - 1px);
    border-radius: calc(.25rem - 1px);
}

.card-img-top{
    /* width: 15rem;
    height: 15rem; */
    /* border-radius: 50%; */
}

.card-img-top-founder-card{
    width: 20rem;
    height: 20rem;
    
}

.card-img-container {
    padding: 1rem;
    padding-top: 1.7rem;
}

.service-card-minheight-112px{
    min-height: 72px;
}

.card-body{
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.clr-white{
    color: white !important;
}

.founder-pic{
    margin: auto;
    
}


.service-container{
    min-height: 100vh;
    padding-top: 20px;
    padding-bottom: 20px;
}

.certificate-container{
    min-height: 50vh;
    padding-top: 20px;
    padding-bottom: 20px;
}

.highlight-container{
    /* min-height: 100vh; */
    padding-top: 20px;
    padding-bottom: 20px;
    height: 100%;
    min-height: 100vh;
}

.green-clr{
    color:green;
}

.list-group-item{
    border:0;
}

.list-group-item:hover{
    background: #ff8f21;
color: white;

}

.brand-container{
    /* background: #031d44; */
    padding-top: 20px;
    padding-bottom: 20px;
    min-height: 250px;
}

.brand-container img{
    width: 90%;
    margin-bottom: 1rem;
}

.footer-container{
    text-align: center;
    
}

.footer{
    padding-top: 20px;
    padding-bottom: 20px;
}

.important-links-list{
    list-style: none;
    width: max-content;
}

.important-links-list li{
    text-align: center;
    padding: 2px;
}



.fas{
    color: #318051;
    margin-right: 5px;
}

.fab {
    color: #318051;
    margin-right: 5px;
}

.list-group-item{margin: 4px;}

.bg-theme-primary {
    background-color: #676767 !important;
}
.bg-theme-secondary {
    background-color: #18212a !important;
}

.pl-2p{
    padding-left: 2%;
}

.pl-4p{
    padding-left: 4%;
}

.pl-10p{
    padding-left: 10%;
}
.card-body{
    /* background: #EAF0F1; */
    max-height: max-content;
    text-align: center;
    font-weight: bold;
    min-height: 88px;
}


/* autotyping Css */
.a-t-c1{
    display: inline-block;
    margin-left: 5px;
    background: #000;
    position: absolute;
    opacity: 1;
    overflow: hidden;
    width: 3px;
}
.a-t-c2{
    display: inline-block;
    margin-left: 5px;
    background: #000;
    position: absolute;
    opacity: 1;
    overflow: hidden;
    width: 16px;
    height: 5px;
    margin-top: 33px;
    
}

@keyframes blink-caret {
    from, to { opacity:0; }
    50% { opacity: 1; }
  }


  /* text overlay over image */
  .image { 
    position: relative; 
    width: 100%; /* for IE 6 */
 }
 .image img{
     width:50%;
 }

.image img:hover{
filter: grayscale(100%);
}

.image img:hover h2 span{
    background: red;
}

 
.image h2 { 
    position: absolute; 
    /* top: 200px;  */
    left: 0; 
    width: 100%; 
    bottom:10px;
 }
.image h2 span { 
    color: white; 
    font: bold 24px/45px Helvetica, Sans-Serif; 
    letter-spacing: -1px;  
    background: rgb(0, 0, 0); /* fallback color */
    background: rgba(0, 0, 0, 0.7);
    padding: 10px; 
 }


 /* fade effect */
 


.hide{
    /* animation-name: fadein; */
    /* animation-duration: 3s; */
    display: none; 
}

.p-4rem{
    
}
.brand-container .p-4rem{
    padding-bottom: 4rem;
}

.navbar-nav{
    width: 100%;
}

.float-right{
    display: flex;
}

/* .navbar-light .navbar-nav .nav-link:hover  {
    color: white;
} */

.btn{
    border-radius: 0;
    font-weight: bolder;
    /* width: 100%; */
    padding-left: 2rem;
    padding-right: 2rem;
}

.btn .fas{
    color: #fff;
}

.btn:hover{
    color: white;
}


/* Media Queries start */

    /* 
        Extra small devices (portrait phones, less than 576px) 
        No media query for `xs` since this is the default in Bootstrap
    */

    /* Small devices (landscape phones, 576px and up) */
    @media (min-width: 576px) { 
        .top-container{
            background: url('../images/bg-mobile.jpg');
            background-size: cover;
            background-repeat: no-repeat;
        }
     }

    /* Medium devices (tablets, 768px and up) */
    @media (min-width: 768px) { 
        .top-container{
            background: url('../images/bg-mobile.jpg');
            background-size: cover;
            background-repeat: no-repeat;
        }
     }

     @media (max-width: 992px) { 
        .float-right {
            margin: auto;
        }
     }
     

    /* Large devices (desktops, 992px and up) */
    @media (min-width: 992px) {  
        .list-group-item{
            margin-top: 1rem;
            padding: 2rem;
        }

        .brand-container .pb-4{
            padding-bottom: 4rem;
        }
        
        .p-4rem{
            padding:4rem;
        }

        .top-container{
            background: url('../images/bg-desktop.jpg');
            background-size: cover;
            background-repeat: no-repeat;
        }

    }

    /* Extra large devices (large desktops, 1200px and up) */
    @media (min-width: 1200px) { 
        .top-container{
            background: url('../images/bg-desktop.jpg');
            background-size: cover;
            background-repeat: no-repeat;
        }
     }

/* Media Queries Ends */