@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Itim&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
#loading{
  position: fixed;
  width: 100%;
  height: 100vh;

  background: #fff
  url("../gif/autusloader.gif")
  no-repeat center center;
  
  z-index: 99999;
  }
.navbarbgcolour{
    background-color: rgb(255, 255, 255);
    
}

.sectiononebg{
    background-color: tomato;
}
.iconimg{
    width: 80px;
    height: 80px;
}
.navbar .nav-item:not(:last-child) {
    margin-right: 10px;
    font-weight: bold;
    
  }
 
  .dropdown-toggle::after {
     transition: transform 0.15s linear; 
  }
   
  .show.dropdown .dropdown-toggle::after {
    transform: translateY(3px);
  }
  .dropdown-menu {
    margin-top: 0px;
    border: none;
    
    
  }

  
  .dropdown-item{
    font-weight: bold;
    transition: transform .30s linear; 
  }
  .dropdown-item:hover{
      background-color: rgb(245, 121, 6);
      transform: translate(0px, -2px);
  }
  .bg-aboutus{
    background-color: rgb(11, 147, 189);
  }
  .contactusbackround{
    background-image: url('../images/contactusbg.jpg');
    background-size: cover;
    
  }
  .text-tamoto{
    color: tomato;
  }
  .text-tamoto{
    color: tomato;
  }
  .text-other{
    color: midnightblue;
  }
  .enjoyride{
    background-image: url('../images/enjoytheride.jpg');
    background-size: cover;
  }


  .custlogin{
    border: 2px solid;
  }
  .custheading{
    font-family: 'Itim', cursive;
  }
  .login-icon{
    position: absolute;
    margin-top: 15px;
   color: rgb(7, 7, 7);
  }
  
  .inp {
    display: grid;
    position: relative;
    margin: 10px;
    width: 100%;
    max-width: 280px;
    height: 53px;
  }
  .inp .borderr {
    position: absolute;
    left:0;
    bottom: 0;
    height: 18px;
    fill: none;
  }
  .inp .borderr path {
    stroke: #c8ccd4;
    stroke-width: 2;
  }
  .inp .borderr path d {
    transition: all 0.2s ease;
  }
  .inp .check {
    position: absolute;
    top: 20px;
    right: 20px;
    fill: none;
    transform: translate(0, 9px) scale(0);
    transition: all 0.3s cubic-bezier(0.5, 0.9, 0.25, 1.3);
    transition-delay: 0.15s;
  }
  .inp .check path {
    stroke: rgb(16, 218, 9);
    stroke-width: 2;
  }
  .inp .inputt {
    -webkit-appearance: none;
    width: 80%;
    border: 0;
    font-family: inherit;
    padding: 0;
    height:38px;
    margin-left: 20px;
    font-size: 16px;
    font-weight: 500;
    background: none;
    border-radius: 0;
    color: #223254;
    transition: all 0.15s ease;
  }
  .inp .inputt:focus {
    outline: none;
  }
  .inp .inputt:focus + .borderr path {
    stroke: #07f;
  }
  .inp .inputt:valid + .borderr path {
    animation: elasticInput 0.8s ease forwards;
  }
  .inp .inputt:valid + .borderr + .check {
    transform: translate(0, 0) scale(1);
  }
  ::placeholder {
    border: none;
    color: #9098a9;
  }
  @-moz-keyframes elasticInput {
    33% {
      d: path("M0,12 L226,12 C220,12 220.666667,12 228,12 C239,12 245,1 253,1 C261,1 268,12 278,12 C284.666667,12 285.333333,12 280,12");
    }
    66% {
      d: path("M0,12 L226,12 C220,12 220.666667,12 228,12 C239,12 245,17 253,17 C261,17 268,12 278,12 C284.666667,12 285.333333,12 280,12");
    }
  }
  @-webkit-keyframes elasticInput {
    33% {
      d: path("M0,12 L226,12 C220,12 220.666667,12 228,12 C239,12 245,1 253,1 C261,1 268,12 278,12 C284.666667,12 285.333333,12 280,12");
    }
    66% {
      d: path("M0,12 L226,12 C220,12 220.666667,12 228,12 C239,12 245,17 253,17 C261,17 268,12 278,12 C284.666667,12 285.333333,12 280,12");
    }
  }
  @-o-keyframes elasticInput {
    33% {
      d: path("M0,12 L226,12 C220,12 220.666667,12 228,12 C239,12 245,1 253,1 C261,1 268,12 278,12 C284.666667,12 285.333333,12 280,12");
    }
    66% {
      d: path("M0,12 L226,12 C220,12 220.666667,12 228,12 C239,12 245,17 253,17 C261,17 268,12 278,12 C284.666667,12 285.333333,12 280,12");
    }
  }
  @keyframes elasticInput {
    33% {
      d: path("M0,12 L226,12 C220,12 220.666667,12 228,12 C239,12 245,1 253,1 C261,1 268,12 278,12 C284.666667,12 285.333333,12 280,12");
    }
    66% {
      d: path("M0,12 L226,12 C220,12 220.666667,12 228,12 C239,12 245,17 253,17 C261,17 268,12 278,12 C284.666667,12 285.333333,12 280,12");
    }
  }
  .aboutusheaderbg{
  background-image: url('../images/contactusbg.jpg');
  background-size: cover;
  max-width: 100vw;
  width: 100%;
  height: 450px;
  }
  .imgabout{
    display: block;
  }

.cardabout{
  overflow: hidden;
}

  .card-img-top{
   
    transition: transform .5s ease;
    
  }
  .card-img-top:hover{
    transform: scale(1.09);
    
  }
.progress-bar-animated1{
  animation-name: bar-animated1;
  animation-duration: 3s;
  animation-iteration-count: 1;
  animation-timing-function: linear;

}

  @keyframes bar-animated1
  {0%   { width:0%;}
  25%  { width:25%;}
  50%  {width:50%;}
  75%  {width:75%;}
  100% { width:100%;}
  }

  .progress-bar-animated2{
    animation-name: bar-animated2;
    animation-duration: 3s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
  }
  @keyframes bar-animated2
  {0%   { width:0%;}
  25%  { width:25%;}
  50%  {width:50%;}
  75%  {width:75%;}
  100% { width:100%;}
  }
  .progress-bar-animated3{
    animation-name: bar-animated3;
    animation-duration: 3s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
  }
  @keyframes bar-animated3
  {0%   { width:0%;}
  25%  { width:25%;}
  50%  {width:50%;}
  75%  {width:75%;}
  100% { width:100%;}

  }
  .progress-bar-animated4{
    animation-name: bar-animated4;
    animation-duration: 3s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
  }
  @keyframes bar-animated4
  {0%   { width:0%;}
  25%  { width:25%;}
  50%  {width:50%;}
  75%  {width:75%;}
  100% { width:100%;}
  }

  .border-bottom1{
    border-bottom: 2px dotted rgb(11, 160, 206);
  }
  .box-shadow{
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  }
  .box-shadow-lg{
    box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.2), 0 8px 22px 0 rgba(0, 0, 0, 0.19);
  }
  .bg-insurancecard1{
    background: linear-gradient(130deg, rgba(2,0,36,1) 0%, rgb(1, 135, 158) 0%, rgb(255, 255, 255) 100%);
    color: rgb(0, 0, 0);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

  }
  .bg-insurancecard2{
    background: linear-gradient(230deg, rgba(2,0,36,1) 0%, rgb(79, 12, 235) 0%, rgb(255, 255, 255) 100%);
    color: rgb(0, 0, 0);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    
  }
  .bg-insurancecard3{
    background: linear-gradient(230deg, rgba(2,0,36,1) 0%, rgb(233, 14, 141) 0%, rgb(245, 245, 245) 100%);
    color: rgb(0, 0, 0);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    
   
  }
  .bg-insurancecard4{
    background: linear-gradient(130deg, rgba(2,0,36,1) 0%, rgb(173, 143, 9) 0%, rgb(255, 255, 255) 100%);
    color: rgb(0, 0, 0);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    
  }
  .bg-insurancecard5{
    background: linear-gradient(230deg, rgba(2,0,36,1) 0%, rgb(110, 9, 5) 0%, rgb(255, 198, 198) 100%);
    color: rgb(0, 0, 0);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    
  }
  .bg-insurancecard6{
    background: linear-gradient(130deg, rgba(2,0,36,1) 0%, rgb(13, 138, 90) 0%, rgb(165, 243, 223) 100%);
    color: rgb(7, 7, 7);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    
  }
  .bg-insurancecard7{
    background: linear-gradient(210deg, rgba(2,0,36,1) 0%, rgb(9, 92, 170) 0%, rgba(232,232,232,1) 100%);
    color: rgb(10, 10, 10);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    
  }
  .bg-insurancecard8{
    background: linear-gradient(130deg, rgba(2,0,36,1) 0%, rgba(103,18,164,1) 0%, rgb(255, 255, 255) 100%);
    color: rgb(7, 7, 7);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    
  }
  .featurette-heading {
    font-weight: 300;
    line-height: 1;
    letter-spacing: -.05rem;
  }
  .udesin{
    position: absolute;
    left: 38%;
    margin-top: -15%;
  }
  .sdesin {
    position: relative;
    width: 100px;
    height: 100px;
    background: rgb(7, 117, 168);
    transform: rotate(45deg);
    border-radius: 20px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  }
  .falogo{
  display: block;
  position: relative;
  padding: 26px;
    transform: rotate(-45deg);
  }
  .cardud{
    border: 1px solid transparent;
    border: 1px solid rgb(7, 117, 168);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  }
  .cardud:hover{
    background-color: rgb(222, 224, 224);
  }
  .carousel-item{
height: 80vh;
min-height: 300px;
background-size: cover;

  }

.carousel-item::before{
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: black;
opacity: 0.7;
}
.carousel-caption{
  bottom: 150px;
  padding-left: 100px;
  padding-right: 100px;
  
}
.carousel-caption h5{
  font-size: 60px;
  font-weight: 700;
  display: inline-block;

}
.carousel-caption p{
  font-size: 20px;
  font-weight: 300;

}


.blogsmall{
  margin-top: 50px;
  font-size: 50px;
  font-weight: 800;
  text-align: center;
  color: rgb(1, 66, 141)
  
  }
  .blogsbg{
  font-size: 100px;
  font-weight: 500;
  text-align: center;
  font-family: 'Alfa Slab One', cursive;
  color: rgb(2, 61, 129)
  }
  .investheader{
  margin-top: 20px;
  }
  .investmentcard{
    border: 1px solid transparent;
    border: 1px solid rgb(7, 117, 168);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  }

.textinvestmentheading{
  font-size: 35px;
  font-weight: 800;
  color: rgb(1, 66, 141)
  
}
.investmentbackround{
  background-image: linear-gradient(rgb(250, 250, 250), rgb(134, 188, 204));
}
.fristtextmutualfund{
  font-size: 30px;
  color: rgb(2, 49, 134);
}
.contactinput{
  outline: none;
  border: none;
  border-bottom: 2px solid rgb(5, 0, 0);
 
}
.form-control:focus{
  border-color: rgb(41, 160, 11);
  -webkit-box-shadow: none;
  box-shadow: none;
}















  
  /* RESPONSIVE CSS
  -------------------------------------------------- */
  
  @media (max-width: 40em) {
    /* Bump up size of carousel content */

  
    .featurette-heading {
      font-size: 50px;
    }

   
  }
  
  @media (max-width: 768px) {
    .featurette-heading {
      margin-top: 7rem;
    }
    .imgabout{
      display: none;
    }
    .logobrand{
      display: none;
      
    }
    .navbar{
      padding: 15px;
    }
    .navbar-nav{
      text-align: center;
      margin-bottom: 15px;
    }
    .dropdown-menu{
      text-align: center;
    }
    .sectiononebg{
      margin-top: 120px;
    }
    .footerblog{
      text-align: center;
    }
    .carousel-item{
  
      height: 25vh;
      min-height: 150px;
      background-size: cover;
      
        }
      
      .carousel-item::before{
      content: "";
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: black;
      opacity: 0.7;
      }
      .carousel-caption{
        display: block;
        bottom: 20px;
        padding-left: 10px;
        padding-right: 10px;
        
      }
      .carousel-caption h5{
        
        font-size: 20px;
        font-weight: 700;
        display: block;
      
      }
      .carousel-caption p{
        font-size: 8px;
        font-weight: 300;
      
      }

      
.blogsmall{
  margin-top: 20px;
  font-size: 20px;
  font-weight: 800;
  text-align: center;
  color: rgb(1, 66, 141)
  
  }
  .blogsbg{
  font-size: 30px;
  font-weight: 500;
  text-align: center;
  font-family: 'Alfa Slab One', cursive;
  color: rgb(2, 61, 129)
  }
  
  .sdesin {
    position: absolute;
    width: 80px;
    height: 80px;
    background: rgb(7, 117, 168);
    transform: rotate(45deg);
    border-radius: 20px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  }
    
  .falogo{
    display: block;
  position: relative;
  padding: 15px;
    transform: rotate(-45deg);
  }

        
  }