@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;700&display=swap');

*{
    margin: 0 auto;
    padding: 0;
    font-family: 'Montserrat';
    color: rgb(7, 16, 38);
}
#snackbar {
  visibility: hidden; /* Hidden by default. Visible on click */
  min-width: 250px; /* Set a default minimum width */
  margin-left: -125px; /* Divide value of min-width by 2 */
  background-color: #6a7ea5; /* Black background color */
  color: #fff; /* White text color */
  text-align: center; /* Centered text */
  border-radius: 2px; /* Rounded borders */
  padding: 16px; /* Padding */
  position: fixed; /* Sit on top of the screen */
  z-index: 1; /* Add a z-index if needed */
  left: 50%; /* Center the snackbar */
  bottom: 30px; /* 30px from the bottom */
}

/* Show the snackbar when clicking on a button (class added with JavaScript) */
#snackbar.show {
  visibility: visible; /* Show the snackbar */
  /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
  However, delay the fade out process for 2.5 seconds */
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
  from {bottom: 30px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
  from {bottom: 30px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}


body{
    overflow-x: hidden;
    overflow-y: auto;
    color: rgb(14, 30, 71);
     
}
 .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,102,203, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E")  !important;
}

.logo{
  width: 350px;
}
.footer-logo{
  width: 300px;
}

  video {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
  .banner{

        background-image: url('./assets/banner-bg.png');
        background-size: cover;
        background-repeat: no-repeat;
  }
  /* Add some content at the bottom of the video/page */
  .content {
    position: relative;
/* bottom: 0; */
    background: transparent;
    color: #f1f1f1;
    width: 100%;
    height: 100%;
    padding: 20px;
   
  }
  .navbar-nav{
    width: 50%;

  }
  .section1{
    background: rgba(0, 0, 0, 0.5);
    display: flex ;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding:30px 0px ;
    height: fit-content;


  }
  
  
  .section3 .expertise{
      background: rgb(7, 16, 38);
      color: white;
    
  }
  .container{
    width: 100%;
    position: relative;
    display: flex;
    justify-content: space-between;
    flex-wrap:wrap;
    
  }
  
  .container .cards{
    position: relative;
  }
  
  .container .cards .face{
   max-width:250px;
   min-width: 150px;
   min-height: 300px;
   max-height: 250px;
    transition:.4s;
    border-radius: 11px;
    
  }
 
  
  .container .cards .face.face1{
    position: relative;
    background-image: linear-gradient(160deg, #2d3a99, rgb(7, 16, 38));
    
    /* background: #333; */
    display: flex;
    justify-content: center;
    align-content:center;
    align-items: center;
    z-index: 1;
    transform: translateY(200px);
  }
  
  .container .cards:hover .face.face1{
    transform: translateY(0);
    box-shadow:
      inset 0 0 60px #253dfc,
      inset 20px 0 80px rgb(7, 16, 38),
      inset -20px 0 80px #253dfc,
      inset 20px 0 300px rgb(7, 16, 38),
      inset -20px 0 300px rgb(7, 16, 38),
      0 0 50px #fff,
      -10px 0 80px rgb(221, 233, 228);
      /* 10px 0 80px #0ff; */
     
  }
  #user-email,#user-name{
    width: 48%;
  }
  
  
  .container .cards .face.face1 .content{
    opacity: .2;
    transition:  0.5s;
    text-align: center;
    
     
    
    
   
  
  }
  
  .container .cards:hover .face.face1 .content{
    opacity: 1;
   
  }
  
  .container .cards .face.face1 .content i{
    font-size: 3em;
    color: white;
    display: inline-block;
     
  }
  
  .container .cards .face.face1 .content h3{
    font-size: 1em;
    color: white;
    text-align: center;
    
  
  }
  
  .container .cards .face.face1 .content a{
     transition: .5s;
  }
  
  .container .cards .face.face2{
     position: relative;
     background: whitesmoke;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 20px;
    box-sizing: border-box;
    box-shadow: 0 10px 40px rgba(189, 183, 183, 0.8);
    transform: translateY(-100px);
  }
  
  .container .cards:hover .face.face2{
      transform: translateY(0);
  
  
  }
  
  .container .cards .face.face2 .content p, a{
    font-size: 10pt;
    margin: 0 ;
    padding: 0;
    color:#333;
  }
  
  .container .cards .face.face2 .content a{
    text-decoration:none;
    color: black;
    box-sizing: border-box;
    outline : 1px dashed #333;
    padding: 10px;
    margin: 15px 0 0;
    display: inline-block;
  }
  
  .container .cards .face.face2 .content a:hover{
   background-image: linear-gradient(160deg, #2d3a99, rgb(7, 16, 38)); ;
    color: whitesmoke; 
    box-shadow: inset 0px 0px 10px rgba(0,0,0,0.5);
  }
  

  .custom-shape-divider-top-1707936937 {
    position: relative;
    top: 0px;
    left: -37px;
    width: calc(100% + 59.3px);
    overflow: hidden;
    line-height: 0;
}
.custom-shape-divider-bottom-1707938957 {
  position: relative;
  bottom: 0px;
  left: -37px;
  width: calc(100% + 59.3px);
  overflow: hidden;
  line-height: 0;
  transform: rotate(180deg);
}

.custom-shape-divider-bottom-1707938957 svg {
  position: relative;
  display: block;
  width: calc(100% + 59.3px);
  height: 192px;
}

.custom-shape-divider-bottom-1707938957 .shape-fill:nth-child(1) {
  fill: #808be5
}
.custom-shape-divider-bottom-1707938957 .shape-fill:nth-child(2) {
  fill: #2d3a99
}
.custom-shape-divider-bottom-1707938957 .shape-fill:nth-child(3) {
  fill: white
}
ul{
  list-style: none;
}

.custom-shape-divider-bottom-2-1707938957 {
  position: relative;
  /* bottom: 0; */
  top: -0px;
  left: -36px;
  width: calc(100% + 59.3px);
  overflow: hidden;
  line-height: 0;
  transform: rotate(360deg);
}
/* .services{
  padding-top: 50px; padding-bottom: 100px;
} */
.custom-shape-divider-bottom-2-1707938957 svg {
  position: relative;
  display: block;
  width: calc(100% + 59.3px);
  height: 192px;
}
#footer img{
  margin-top: 24px;
  width: 400px;
}

.custom-shape-divider-bottom-2-1707938957 .shape-fill:nth-child(1) {
  fill: #808be5
}
.custom-shape-divider-bottom-2-1707938957 .shape-fill:nth-child(2) {
  fill: #2d3a99
}
.custom-shape-divider-bottom-2-1707938957 .shape-fill:nth-child(3) {
  fill: rgb(7, 16, 38)
}
.footer{
  position: relative;
  top: 0px;
  /* bottom: 0; */
  height: fit-content;
}
.card{
  background-image: linear-gradient(160deg, #243CFC, rgb(7, 16, 38));
  border: 2px solid rgb(7, 16, 38);
  
}
.btns{
  background-image: linear-gradient(160deg, #243CFC, rgb(7, 16, 38));
  border: 2px solid #243CFC;
  color: white;
  font-weight: 600;
  border-radius: 10px;
  padding: 8px 5px;
}
.btns-outline{
  background-color: white;
  border: 2px solid #243CFC;
  color: #243CFC;
  font-weight: 600;
  border-radius: 10px;
  padding: 8px 5px;
}
.copyright-footer {
 background-image: linear-gradient(160deg, #243CFC, rgb(7, 16, 38));
  
   position: relative; top: 75px;
 }
@media (max-width:425px) {

  .services{
    position: relative;
    top: 320px;

  }
  #footer img{
    margin-top: 24px;
    width: 250px;
  }
  .custom-shape-divider-bottom-2-1707938957 svg {
    width: calc(100% + 36.3px) ; 
 
  }
  .custom-shape-divider-bottom-2-1707938957 {
    width: calc(100% + 36.3px);
    position: relative;
    top: 326px;
    display: none;
  }
  #user-email,#user-name{
    width: 100%;
  }
  .custom-shape-divider-bottom-1707938957 svg {
    
    width: calc(100% + 36.3px) !important; 
  }
  .custom-shape-divider-bottom-1707938957 {
    display: none;
    width: calc(100% + 36.3px) !important;

  }
  .custom-shape-divider-top-1707936937 {
    display: none;
    width: calc(100% + 36.3px);

}
.expertise{
  position: relative;
  top: 326px;
}
.footer{
  position: relative;
  top: 326px;
}
.copyright-footer {
  background-color: rgb(7, 16, 38);
  position: relative;
  top: 300px;
}
}
@media (max-width:768px) {

  .services{
    position: relative;
    top: 320px;

  }
  #user-email,#user-name{
    width: 100%;
  }
  .custom-shape-divider-bottom-2-1707938957 svg {
    display: block;
    width: calc(100% + 36.3px);
 
  }
  .custom-shape-divider-bottom-2-1707938957 {
    
    width: calc(100% + 36.3px);
    position: relative;
    top: 326px;

  }
  .custom-shape-divider-bottom-1707938957 svg {

    width: calc(100% + 36.3px) !important; 
  }
  .custom-shape-divider-bottom-1707938957 {

    width: calc(100% + 36.3px) !important;

  }
  .custom-shape-divider-top-1707936937 {

    width: calc(100% + 36.3px);

}
.expertise{
  position: relative;
  top: 326px;
}
.footer{
  position: relative;
  top: 326px;
}
.copyright-footer {
  background-color: rgb(7, 16, 38);
  position: relative;
  top: 300px;
}
}
@media (max-width:1024px) {
  body{
    overflow-x: hidden;
    overflow-y: auto;
    color: rgb(14, 30, 71);
    max-width: 100%;
     
}
  .logo {
    width: 160px;
}
  .services{
    position: relative;
    top: 320px;

  }
  .custom-shape-divider-bottom-2-1707938957 svg {
    display: block;
    width: calc(100% + 36.3px);
 
  }
  .custom-shape-divider-bottom-2-1707938957 {
    width: calc(100% + 36.3px);
    position: relative;
    top: 326px;

  }
  .custom-shape-divider-bottom-1707938957 svg {

    width: calc(100% + 36.3px) !important; 
  }
  .custom-shape-divider-bottom-1707938957 {

    width: calc(100% + 36.3px) !important;

  }
  .custom-shape-divider-top-1707936937 {

    width: calc(100% + 36.3px);

}
.expertise{
  position: relative;
  top: 326px;
}
.footer{
  position: relative;
  top: 326px;
}
.copyright-footer {
  background-color: rgb(7, 16, 38);
  position: relative;
  top: 300px;
}
}
@media (max-width:1440px) {

  .services{
    position: relative;
    top: 20px;

  }
  .custom-shape-divider-bottom-2-1707938957 svg {
    display: block;
    width: calc(100% + 56.3px);
 
  }
  .custom-shape-divider-bottom-2-1707938957 {
    width: calc(100% + 56.3px);
    position: relative;
    top: 26px;

  }
  section, footer{
    padding:0 20px;
  }
  .custom-shape-divider-bottom-1707938957 svg {

    width: calc(100% + 56.3px);
  }
  .custom-shape-divider-bottom-1707938957 {

    width: calc(100% + 56.3px);

  }
  .custom-shape-divider-top-1707936937 {

    width: calc(100% + 56.3px);

}
.expertise{
  position: relative;
  top: 26px;
}
.footer{
  position: relative;
  top: 26px;
}
.copyright-footer {
  background-color: rgb(7, 16, 38);
  position: relative;
  top: 86px;
}
}