@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;600;700;800;900&display=swap');

:root{
    --cool: linear-gradient( 135deg, #5EFCE8 10%, #736EFE 100%);
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    font-family: 'Work Sans', sans-serif;
}

/* custom scroll bar */
html::-webkit-scrollbar{
    width: 0.4rem;
    background: transparent;
}
html::-webkit-scrollbar-thumb{
    background: #177EE5;
}
/* Selection color */
::selection{
    background: #177EE5;
    color: #177EE5;
}

#get_btn:hover{
    transform: translate(0px, -6px);
}

html{
    scroll-behavior: smooth;
}

header.sticky{
    position: sticky;
    top: 0;
    padding: 0px 20px;
    width: 100%;
    left: 0;
    height: 80px;
    z-index: 1000;
	box-shadow: 0 2px 4px 0 rgba(0,0,0,.1), 0 0 2px 0 rgba(0,0,0,.06);
    transition: 0.4s all ease-in-out;
    background: #2c375c;
    -webkit-backdrop-filter: saturate(180%) blur(32px);
    backdrop-filter: saturate(180%) blur(32px);
}

#goToTopBtn {
  
    position: fixed;
    bottom: 40px;
    right: 32px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: #fff;
    z-index: 1;
    border: none;
    outline: none;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s, visibility 0s linear 0.3s;
  }
  
  #goToTopBtn.show {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
  }

.hero_box{
    background-image: url('./img/waves.svg');
    background-repeat: no-repeat;
    background-position-y: bottom;
    background-position-x: left;
    background-blend-mode: exclusion;
    background-size: cover;
}

@keyframes menu_log {
    0% {
        opacity: 0;
        transform: translateY(20px);
      }
      100% {
        opacity: 1;
        transform: translateY(0);
      }
}

#feature_slab:hover > .feature_dot{
    display: block;
    animation: menu_log 0.4s ease-in-out;
}

.notch{
    background-color:white;
    box-shadow: 0 0 4px -2px rgba(14,41,66,.125),0 5px 20px -8px rgba(14,41,66,.2),0 14px 40px -20px rgba(14,41,66,.125);
    -webkit-clip-path: polygon(0 0,0 100%,100% 100%);
    clip-path: polygon(0 0,0 100%,100% 100%);
    filter: drop-shadow(0 0 5px #0e2942);
    height: 1rem;
    left: calc(36% - 0.5rem);
    pointer-events: none;
    position: absolute;
    top: calc(-0.5rem + 1px);
    transform: rotate(135deg);
    width: 1rem;
}

.notch2{
    left: calc(48% - 0.5rem);
}

#resources_slab:hover > .resources_dot{
    display: block;
    animation: menu_log 0.4s ease-in-out;
}
/* styles.css */
.video-container {
    position: relative;
    max-width: 700px;
    margin: 0 auto;
}

.overlay {
    /* position: absolute; */
    top: 0;
    left: 0;
    border-radius: 12px;
    background: (linear-gradient(90deg, #E0E1F5 0%, #F2F1E3 100.31%));
    box-shadow: 0px 1.4113px 2.96096px 0px rgba(45, 48, 57, 0.03), 0px 3.39155px 7.11561px 0px rgba(45, 48, 57, 0.04), 0px 6.38599px 13.39806px 0px rgba(45, 48, 57, 0.05), 0px 11.39152px 23.89985px 0px rgba(45, 48, 57, 0.05), 0px 21.30658px 44.70204px 0px rgba(45, 48, 57, 0.06);
}

.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 15px 15px;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-color: #177EE5;
    color: #fff;
    border: none;
    cursor: pointer;
    animation: animate 2s linear infinite;
}

@keyframes animate {
    0%{
        box-shadow: 0 0 0 0 rgba(62, 150, 233, 0.7);
    }
    40%{
        box-shadow: 0 0 0 50px rgb(255, 193, 7, 0);
    }
    80%{
        box-shadow: 0 0 0 50px rgb(255, 193, 7, 0);
    }
    100%{
        box-shadow: 0 0 0 rgb(255, 193, 7, 0);
    }
}

.tabbox{
    display: none;
}

#reason1{
    display: block;
}

.cta_wrapper{
    background-image: url('./img/waves.svg');
    background-size: cover;
    background-position: center;
}
.tab_btn_holder button.active{
    border-bottom-color: #81BBF4;
}

#get_btn1:hover{
    transform: translate(0px, -6px);
}

#get_btn2:hover{
    transform: translate(0px, -6px);
}

#get_btn3:hover{
    transform: translate(0px, -6px);
}

#get_btn4:hover{
    transform: translate(0px, -6px);
}

#get_btn5:hover{
    transform: translate(0px, -6px);
}

#get_btn6:hover{
    transform: translate(0px, -6px);
}

.cta1{
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)); 
    transition: all;
}

.cta2{
    background: rgba(255, 255, 255, 0.30);
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
    transition: all;
}

#ctaHero{
    background-image: url('./img/waves.svg');
    background-size: cover;
    background-position: center; 
}

.point_s .inner_ul .ul_wrap .mui .li0::before{
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background: #177EE5;
    margin-right: 27px;
    margin-top: calc(1em - 8px);
    left: 0;
    position: absolute;
}

.wrap_in{
    border-radius: 8px 8px 0px 0px;
}

.ryt::before{
    position: absolute;
    left: 0;
    height: 8px;
    width: 2px;
    background-color: #252E48;
    content: "";
    transform: translateX(-3px) rotate(-45deg);
    transform-origin: left bottom;
}

.ryt::after{
    position: absolute;
    left: 0;
    top: 6px;
    height: 2px;
    width: 13px;
    background-color: #252E48;
    content: "";
    transform: translateX(-2px) rotate(-45deg);
    transform-origin: left bottom;
}

.dtls01{
    border-radius: 0px 0px 8px 8px;
}

.hide {
    display: none;
}

.checkbox-sm:checked + .inp .hide {
    display: block;
}

.dot form input[type=file]{
    width: 100%;
    box-sizing: border-box;
    color: #444;
    padding: 5px;
    background: #fff;
    border-radius: 6px;
    border: 1px solid #3b82f6;
  }

  .dot form input[type=file]::file-selector-button{
    margin-right: 20px;
    border: none;
    background: #3b82f6;
    padding: 10px 20px;
    border-radius: 10px;
    color: #fff;
    cursor: pointer;
    transition: background .2s ease-in-out;
  }

  .dot form input[type=file]::file-selector-button:hover{
    background: #3073df;
  }

  .inner_btn_wrap{
    scrollbar-width: none;
  }

  .inner_btn_wrap a{
    transition: all ease-out .3s!important;
    -webkit-transition: all ease-out .3s!important;
    -moz-transition: all ease-out .3s!important;
    -ms-transition: all ease-out .3s!important;
  }

  .inner_btn_wrap a:hover{
    background: #e8f0fe;
    border-radius: 9999px;
    color: #1a73e8;
    border: 1px solid #d2e3fc;
    transition: all ease-out .3s!important;
    -webkit-transition: all ease-out .3s!important;
    -moz-transition: all ease-out .3s!important;
    -ms-transition: all ease-out .3s!important;
  }
  .tag_innner a{
    transition: all ease-out .3s!important;
    -webkit-transition: all ease-out .3s!important;
    -moz-transition: all ease-out .3s!important;
    -ms-transition: all ease-out .3s!important
  }

    
  .tag_innner a:hover{
    background: #e8f0fe;
    color: #1a73e8;
    border: 1px solid #d2e3fc;
    transition: all ease-out .3s!important;
    -webkit-transition: all ease-out .3s!important;
    -moz-transition: all ease-out .3s!important;
    -ms-transition: all ease-out .3s!important;
  }

  .blog_c{
    flex: 0 0 auto;
  }

  .blog_card{
    transition: all ease-out .3s!important;
    -webkit-transition: all ease-out .3s!important;
    -moz-transition: all ease-out .3s!important;
    -ms-transition: all ease-out .3s!important;
  }

  .related_blog_list li{
    padding-right: 10px;
    transition: all ease-out .3s!important;
    -webkit-transition: all ease-out .3s!important;
    -moz-transition: all ease-out .3s!important;
    -ms-transition: all ease-out .3s!important;
  }

  .related_blog{
    box-shadow: 0 0 20px rgba(0,0,0,.08);
    overflow: hidden;
  }

  .related_blog2{
    box-shadow: 0 0 20px rgba(0,0,0,.08);
    max-height: 480px;
    overflow: hidden;
  }

  .counter{
    counter-reset: my-awesome-counter 0;
    border-top: 1px solid #e2e2e2;
  }

  .counter li {
    position: relative;
    counter-increment: my-awesome-counter 1;
}

.related_blog_list2 li a span{
    position: absolute;
    background: 0 0;
    z-index: 0;
    width: 20px;
    height: 18px;
    top: 2px;
    left: 0;
    color: #373737;
    text-align: center;
    border-radius: 100%;
    line-height: 20px;
    font-weight: 600;
    font-style: normal;
    font-size: 15px;
}

  .related_blog_list2 li a span::before{
    content: counter(my-awesome-counter);
    margin-right: 15px;
  }

  .related_blog_list li:hover{
    background: #f6f9fb;
    padding-left: 30px;
    transition: all ease-out .3s!important;
    -webkit-transition: all ease-out .3s!important;
    -moz-transition: all ease-out .3s!important;
    -ms-transition: all ease-out .3s!important;
  }

  .active{
    color: #177EE5;
  }

  .inner_ul li::before{
    content: '';
    position: absolute;
    z-index: 0;
    width: 10px;
    height: 10px;
    top: 7px;
    left: -40px;
    color: #fff;
    text-align: center;
    border-radius: 100%;
    line-height: 18px;
    font-weight: 700;
    font-size: 12px;
    font-style: normal;
    background: #177EE5;
  }

  .inner_ul2 li::before{
    content: '';
    position: absolute;
    z-index: 0;
    width: 10px;
    height: 10px;
    top: 7px;
    left: 0px;
    color: #fff;
    text-align: center;
    border-radius: 100%;
    line-height: 18px;
    font-weight: 700;
    font-size: 12px;
    font-style: normal;
    background: #177EE5;
  }

  .sub_heding::after{
    content: "";
    position: absolute;
    z-index: 1;
    width: 100%;
    background: #8bbff3;
    height: 2px;
    bottom: 0px;
    left: 0;
  }

  .blog_rh::before{
    content: "";
    position: absolute;
    z-index: 0;
    width: calc(100% - 220px);
    height: 1px;
    right: 0;
    top: 20px;
    background: rgba(0, 0, 0, .1);
  }

  /* .blog_box::after{
    height: 300px;
    content: '';
    position: absolute;
    z-index: 0;
    width: 100%;
    bottom: -200px;
    left: 0;
    transform: rotateY(-1);
    background: #8bd0ff;
    background: linear-gradient(0deg, rgb(246 249 251) 0%, rgba(246, 249, 251, 0) 100%);
  } */