@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');








#nav_bar{
    background-color: #060A09;
}

.nav_logo {
    width: 100px;
}

.nav_menu {
    font-size: 16px;
    font-weight: 500;
    line-height: 22px;
    color: #FFFFFF;
    font-family: "Inter";
}

.nav_menu a {
  background:
    linear-gradient(
      to right,
      rgb(7, 7, 7),
      rgb(10, 10, 10)
    ),
    linear-gradient(
      to right,
      rgba(255, 0, 0, 1),
      rgba(255, 0, 180, 1),
      rgba(0, 100, 200, 1)
  );
  background-size: 100% 3px, 0 3px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 400ms;
}

a:hover {
  background-size: 0 3px, 100% 3px;
}

.glow-on-hover {
    width: 155px;
    height: 36px;
    border: .5px solid #807373;
    outline: none;
    color: #fff;
    background: #111;
    cursor: pointer;
    position: relative;
    z-index: 0;
    border-radius: 4px;
    font-family: "Inter";
    font-size: 16px;
    font-weight: 500;
    line-height: 18px;
}

.glow-on-hover:before {
    content: '';
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    position: absolute;
    top: -2px;
    left:-2px;
    background-size: 400%;
    z-index: -1;
    filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: glowing 20s linear infinite;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    border-radius: 10px;
}

.glow-on-hover:active {
    color: #000
}

.glow-on-hover:active:after {
    background: transparent;
}

.glow-on-hover:hover:before {
    opacity: 1;
}

.glow-on-hover:after {
    z-index: -1;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: #111;
    left: 0;
    top: 0;
    border-radius: 10px;
}

@keyframes glowing {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}

svg.bi.bi-list{
    color: #FFFFFF;
  }

#hero_section{
    background-color: #060A09;
}

.hero_maindiv {
    /*width: 100%;
    #height: 500px;*/
    position: relative;

    min-height: 100vh; /* make the hero section at least 100% of the viewport height */
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 0rem;
      
}
.mt-auto { /* add this class to push the button to the bottom */
    margin-top: auto;
  }

.hero_bg {
    width: 100%;
    height: 100%;
    background-image: url(../images/Hero_background.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    object-fit: cover;
    border-radius: 10px;
}

.hero_text {
    position: absolute;
    top: 0;
    width: 100%;
    padding: 10%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
}

.hero_text h2 {
    font-size: 72px;
    font-weight: 700;
    line-height: 80px;
    font-family: "Inter";
    text-align: center;
}

.hero_text p {
    font-family: "Inter";
    margin: 20px 0px;
    font-size: 20px;
    font-weight: 500;
    color: #DADADA;
    line-height: 30px;
    text-align: center;
}

.hero_button {
    text-decoration: none;
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 500;
    font-family: "Inter";
    line-height: 18px;
}

.hero_button_large {
    font-size: 24px; /* Increase font size to make the button larger */
    padding: 15px 30px; /* Add more padding to make the button wider and taller */
    margin-top: 30px; /* Add more margin top to increase spacing between the button and top text */
    margin-top: auto;
  }

.hero_button:hover i{
    transition: transform .5s ease-out;
   transform: translate(8px);
}

.hero_button_large {
    display: inline-block; /* add this to make the button only as wide as its content */
    max-width: 250px; /* add a max-width to limit the button's width */
    padding: 15px 30px;
    border: none;
    border-radius: 20px;
    background-color: #b61f1f;
    color: #FFFFFF;
    font-size: 20px;
    font-weight: 500;
    font-family: "Inter";
    cursor: pointer;
    transition: all 0.3s ease-out;
  }
  
  .hero_button_large:hover {
    background-color: #ffffff; /* change the background color on hover */
    color: #ff0000; /* change the text color on hover */
  }

  @media (max-width: 1024px) {
    .hero_text {
        padding: 8%;
        justify-content: center; /* Align items to the center for iPads */
        min-height: 80vh; /* Reduce the min-height */
    }
    .hero_text h2 {
        font-size: 56px;
        line-height: 64px;
    }
    .hero_text p {
        font-size: 18px;
        line-height: 26px;
    }
    .button-container {
        margin-top: 30px; /* Add spacing between the text and button */
    }
    .hero_button_large {
        font-size: 22px;
        padding: 12px 25px;
    }
}

@media (max-width: 768px) {
    .hero_text {
        padding: 5%;
        justify-content: flex-start; /* Align items to the top */
        min-height: auto; /* Reset the min-height */
        margin-top: 20px; /* Add margin to create spacing from the header */
    }
    .hero_text h2 {
        font-size: 48px;
        line-height: 56px;
    }
    .hero_text p {
        font-size: 16px;
        line-height: 24px;
    }
    .button-container {
        margin-top: 20px; /* Add spacing between the text and button */
    }
    .hero_button_large {
        font-size: 20px;
        padding: 10px 20px;
    }
}

@media (max-width: 576px) {
    .hero_text {
        padding: 2%;
        margin-top: 20px; /* Ensure spacing from the header */
    }
}



#AI_section{
    background-color: #060A09;
}

.AI_head_text {
    padding-left: 5%;
    margin-top: 5%;
}

.AI_head_text h2 {
    padding-bottom: 10px;
    font-size: 48px;
    font-weight: 600;
    line-height: 67.2px;
    padding: 15px;
    color: #FFFFFF;
    font-family: "Inter";
}

.AI_head_text p {
    padding: 15px;
    font-size: 20px;
    font-weight: 400;
    color: #DADADA;
    font-family: "Inter";
    line-height: 30px;
}

.image_div{
    width: 100%;  
}

.icon_image{
    width: 100%;
    height: 100%;
}

#threat_section{
    background-color: #060A09;
}

.threat_section_text_div {
    padding-right: 5%;

}

.threat_section_text_div h2 {
    padding: 15px;
    padding-bottom: 10px;
    font-size: 48px;
    font-weight: 600;
    line-height: 58px;
    font-family: "Inter";
    color: #FFFFFF;
}

.threat_section_text_div p {
    font-size: 20px;
    font-weight: 400;
    padding: 15px;
    color: #DADADA;
    font-family: "Inter";
    line-height: 30px;
}

#fight_section{
    background-color: #060A09;
}

.fight_section_text_div {
    padding-left: 5%;
}

.AI_threat_text h2 {
    margin-top: 20px;
    font-size: 48px;
    font-weight: 600;
    line-height: 58px;
    font-family: "Inter";
    text-align: center;
}

.AI_threat_text p {
    font-size: 20px;
    font-weight: 400;
    color: #DADADA;
    font-family: "Inter";
    padding: 15px;
    line-height: 30px;
    text-align: center;
}

.AI_threat_text img {
    width: 100%;
    height: 100%;
}

.fight_section_text_div h2 {
    padding: 15px;
    margin-top: 5%;
    padding-bottom: 10px;
    font-size: 48px;
    font-weight: 600;
    line-height: 58px;
    font-family: "Inter";
}

.fight_section_text_div p {
    padding: 15px;
    font-size: 20px;
    font-weight: 400;
    color: #DADADA;
    font-family: "Inter";
    line-height: 30px;
}

#AI_threat_section {
    background-color: #020001;
    position: relative;
}

#icon_section{
    background-color: #060A09;
}

.icon_section_head h2 {
    padding-top: 5%;
    padding-bottom: 10px;
    font-size: 48px;
    font-weight: 600;
    line-height: 58px;
    text-align: center;
    font-family: "Inter";
}

.icon_section_head p {
    font-size: 20px;
    font-weight: 400;
    line-height: 30px;
    color: #DADADA;
    font-family: "Inter";
}

.icon_img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding: 12px;
}

.icon_text {
    text-decoration: none;
    color: #FFFFFF;
    font-family: "Inter";
    font-size: 24px;
    font-weight: 500;
    line-height: 33.6px;
    transition: .3s;
}

.icon_text:hover {
    color: #5187EC;
}

.middle_div {
    border-left: .5px solid #605a5a;
    border-right: .5px solid #605a5a;
}

#about_section{
    background-color: #060A09;
}

.about_text {
    margin-top: 5%;
}

.about_text h2 {
    padding: 15px;
    font-family: "Inter";
    font-size: 48px;
    font-weight: 600;
    line-height: 58px;
    color: #FFFFFF;
    padding-top: 5%;
    padding-bottom: 15px;
}

.about_text p {
    padding: 15px;
    font-size: 20px;
    font-weight: 400;
    color: #DADADA;
    font-family: "Inter";
    line-height: 30px;
}

.about_logo{
    display: block;
    margin-left: auto;
    margin-right: auto;
}

#email_section {
    background-color: #060A09;
}

.email_maindiv {
    position: relative;
    margin-top: 10%;
    margin-bottom: 10%;
}

.email_bg {
    width: 100%;
    height: 400px;
    background-color: rgb(22, 25, 25);
    border-radius: 20px;
    background-image: url("../images/Element.svg");
}

.email_text_div {
    position: absolute;
    width: 100%;
    top: 0;
    color: #FFFFFF;
    padding: 8%;
}

.email_text_div h2 {
    text-align: center;
    font-size: 48px;
    font-weight: 600;
    line-height: 58px;
    margin-bottom: 22px;
    font-family: "Inter";
}

.email_text_div p {
    text-align: center;
    font-size: 20px;
    font-weight: 400;
    line-height: 30px;
    font-family: "Inter";
    color: #DADADA;
}

.signup {
    width: 460px;
    height: 50px;
    background-color: #5D5D5D;
    box-shadow: 2px 4px 8px 0 rgba(0,0,0,0.11);
    border-radius: 100px;
    margin: auto;
}

#email-signup {
    height: 50px;
    background-color: black;
    padding: 0px 5px 0px 10px;
    width: 300px;
    background-color: #5D5D5D;
    font-size: 18px;
    font-weight: 400;
    line-height: 21.78px;
    color: #383838;
    outline-style: none;
    border: none;
    border-radius: 100px;
}

#btn {
    height: 44px;
    width: 144px;
    background-color: rgb(255, 255, 255);
    border: none;
    font-size: 16px;
    font-weight: 500;
    line-height: 30px;
    text-align: center;
    border-radius: 100px;
    float: right;
    color: rgb(0, 0, 0);
    margin-top: 3px;
    margin-right: 3px;
    transition: .3s;
}

#btn:hover{
    background-color:#9747FF;
    color: #FFFFFF;
}

  #email-signup:focus{
    background-color:#f2f2f2;
}
  
#footer_bg {
    background-color: #000000;
}

.row {
    align-items: center;
}

.footer_top {
    border-top: .5px solid #808080;
}

.footer_text p {
    color: #808080;
    font-size: 14px;
    line-height: 18px;
    font-family: "Inter";
    font-weight: 400;
}

.footer_icon{
    text-align: end;
}

.footer_icon_div {
    text-decoration: none;
}
.footer_icon i {
    padding: 10px;
    font-size: 15px;
    font-weight: 700;
    border-radius: 50%;
    background: rgb(25, 25, 25);
    color: rgb(255, 255, 255);
    transition: .3s;
}

.footer_icon {
    display: flex; /* Establishes a flex container */
    flex-direction: row; /* Aligns children inline */
    align-items: center; /* Centers items vertically */
    justify-content: flex-end; /* Aligns content to the right */
    white-space: nowrap; /* Prevents wrapping at white spaces */
}

.footer_icon i, .footer_icon span {
    display: inline-block; /* Keeps elements inline */
}


.icon_hov:hover {
    background-color: #DADADA;
    color: #000;
}

.h_rule_container {
    background-color: #000000;
}
.h_rule {
    height: 0.5px; /* set the height of the div to 1px */
    width: 80%; /* adjust the width as needed */
    margin: 0 auto; /* center the horizontal rule */
    background-color: #808080; 
}



@media (max-width: 768px) {
    .hero_text .mt-auto {
      margin-top: 20px; /* adjust this value to your liking */
    }
  }



@media only screen and (max-width: 1289px) {
    .hero_text h2 {
        font-size: 65px;
    }
}

@media only screen and (max-width: 1200px) {
    .footer_icon i {
        padding: 7px;
    }

    .AI_head_text h2 {
        font-size: 40px;
        line-height: 55.2px;
    }

    .threat_section_text_div h2 {
        font-size: 40px;
        line-height: 50px;
    }

    .fight_section_text_div h2 {
        font-size: 40px;
        line-height: 50px;
    }

    .AI_threat_text h2 {
        font-size: 40px;
        line-height: 50px;
    }

    .icon_section_head h2{
        font-size: 40px;
        line-height: 50px;
    }

    .about_text h2 {
        font-size: 40px;
        line-height: 50px;
    }

    .email_text_div h2 {
        font-size: 40px;
        line-height: 50px; 
    }
}

@media only screen and (max-width: 1136px) {
    .AI_head_text h2 {
        font-size: 35px;
        line-height: 51.2px;
    }
    .threat_section_text_div h2 {
        font-size: 35px;
        line-height: 45px;
    }

    .fight_section_text_div h2 {
        font-size: 35px;
        line-height: 45px;
    }

    .AI_threat_text h2 {
        font-size: 35px;
        line-height: 45px;
    }

    .icon_section_head h2{
        font-size: 35px;
        line-height: 45px;
    }

    .about_text h2 {
        font-size: 35px;
        line-height: 45px;
    }

    .email_text_div h2 {
        font-size: 35px;
        line-height: 45px;
    }
    
}

@media only screen and (max-width: 1166px) {
    .hero_text h2 {
        font-size: 60px;
    }
}

@media only screen and (max-width: 1101px) {
    .hero_text p {
        font-size: 18px;
    }

    .AI_head_text p {
        font-size: 18px;
    }

    .threat_section_text_div p {
        font-size: 18px;
    }

    .fight_section_text_div p {
        font-size: 18px;
    }

    .AI_threat_text p {
        font-size: 18px;
    }

    .icon_section_head p {
        font-size: 18px;
    }

    .icon_text {
        font-size: 18px;
    }

    .about_text p {
        font-size: 18px;
    }

    .email_text_div p {
        font-size: 18px;
    }
}

@media only screen and (max-width: 1078px) {
    .hero_text h2 {
        font-size: 55px;
        line-height: 66px;
    }
}

@media only screen and (max-width: 1038px) {
    .AI_head_text h2 {
        font-size: 30px;
        line-height: 44.2px;
    }
}

@media only screen and (max-width: 990px) {
    .hero_text h2 {
        font-size: 48px;
        line-height: 60px;
    }
}

@media only screen and (max-width: 992px) {
    
    .hero_maindiv {
        height: 450px;
    }

    .hero_text p {
        font-size: 17px;
    }
    
    .AI_head_text p {
        font-size: 17px;
    }

    .threat_section_text_div {
        padding-left: 5%;
    }

    .threat_section_text_div p {
        font-size: 17px;
    }

    .fight_section_text_div p {
        font-size: 17px;
    }

    .AI_threat_text p {
        font-size: 17px;
    }

    .icon_section_head p {
        font-size: 17px;
    }

    .about_text p {
        font-size: 17px;
    }

    .email_text_div p {
        font-size: 17px;
    }
    
    .middle_div {
        border-left: none;
        border-right: none;
        border-top: .5px solid #605a5a;
        border-bottom: .5px solid #605a5a;
    }
    .footer_logo {
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 15px;
    }
    .footer_icon {
        text-align: center;
        margin-top: 15px;
    }
}

@media only screen and (max-width: 939px) {
    .hero_text p {
        font-size: 16px;
    }

    .AI_head_text p {
        font-size: 16px;
    }

    .threat_section_text_div p {
        font-size: 16px;
    }

    .fight_section_text_div p {
        font-size: 16px;
    }

    .AI_threat_text p {
        font-size: 16px;
    }

    .icon_section_head p {
        font-size: 16px;
    }

    .about_text p {
        font-size: 16px;
    }

    .email_text_div p {
        font-size: 16px;
    }
}

@media only screen and (max-width: 885px) {
    .hero_text p {
        font-size: 15px;
        line-height: 27px;
    }

    .AI_head_text p {
        font-size: 15px;
        line-height: 27px;
    }

    .threat_section_text_div p {
        font-size: 15px;
        line-height: 27px;
    }

    .fight_section_text_div p {
        font-size: 15px;
        line-height: 27px;
    }

    .AI_threat_text p {
        font-size: 15px;
        line-height: 27px;
    }

    .icon_section_head p {
        font-size: 15px;
        line-height: 27px;
    }

    .about_text p {
        font-size: 15px;
        line-height: 27px;
    }

    .email_text_div p {
        font-size: 15px;
        line-height: 27px;
    }
}

@media only screen and (max-width: 867px) {
    .hero_text h2 {
        font-size: 40px;
        line-height: 50px;
    }
}

@media only screen and (max-width: 863px) {

    .AI_head_text h2 {
        font-size: 40px;
        line-height: 40px;
    }

    .threat_section_text_div h2 {
        font-size: 40px;
        line-height: 40px;
    }

    .fight_section_text_div h2 {
        font-size: 40px;
        line-height: 40px;
    }

    .AI_threat_text h2 {
        font-size: 40px;
        line-height: 40px;
    }

    .icon_section_head h2 {
        font-size: 40px;
        line-height: 50px;
    }

    .about_text h2 {
        font-size: 40px;
        line-height: 40px;
    }

    .email_text_div h2 {
        font-size: 40px;
        line-height: 40px;
    }
}

@media only screen and (max-width: 831px) {
    .hero_text p {
        font-size: 14px;
        line-height: 25px;
    }
}

@media only screen and (max-width: 778px) {
    .hero_text p {
        font-size: 13px;
        line-height: 23px;
    }
}


@media only screen and (max-width: 768px) {
    
    .hero_maindiv {
        height: 400px;
    }
    
    
    .AI_head_text h2 {
        font-size: 35px;
    }
    .threat_section_text_div h2 {
        font-size: 35px;
    }
    
    .fight_section_text_div h2 {
        font-size: 35px;
    }
    .icon_section_head h2 {
        font-size: 35px;
    }
    .email_text_div h2 {
        font-size: 35px;
    }
    .hero_button_large {
        margin-top: 20px; /* reduce the margin top on mobile devices */
      }
}

@media only screen and (max-width: 727px) {
    .hero_text h2 {
        font-size: 35px;
        line-height: 45px;
    }
}

@media only screen and (max-width: 639px) {
    .hero_text h2 {
        font-size: 30px;
        line-height: 40px;
    }
}

@media only screen and (max-width: 551px) {
    .hero_text h2 {
        font-size: 25px;
        line-height: 33px;
    }
}
@media only screen and (max-width: 654px) {
    

    .hero_text p {
        font-size: 15px;
        line-height: 25px;
    }

    .AI_head_text p {
        font-size: 15px;
        line-height: 25px;
    }

    .threat_section_text_div p {
        font-size: 15px;
        line-height: 25px;
    }

    .fight_section_text_div p {
        font-size: 15px;
        line-height: 25px;
    }

    .AI_threat_text p {
        font-size: 15px;
        line-height: 25px;
    }

    .icon_section_head p {
        font-size: 15px;
        line-height: 25px;
    }

    .icon_text {
        font-size: 17px;
        line-height: 27.6px;
    }

    .about_text p {
        font-size: 15px;
        line-height: 25px;
    }

    .email_text_div p {
        font-size: 15px;
        line-height: 25px;
    }
}

@media only screen and (max-width: 584px) {
    

    .hero_text p {
        font-size: 14px;
        line-height: 22px;
    }

    .AI_head_text p {
        font-size: 14px;
        line-height: 23px;
    }

    .threat_section_text_div p {
        font-size: 14px;
        line-height: 23px;
    }

    .fight_section_text_div p {
        font-size: 14px;
        line-height: 23px;
    }

    .AI_threat_text p {
        font-size: 14px;
        line-height: 23px;
    }

    .icon_section_head p {
        font-size: 14px;
        line-height: 23px;
    }

    .icon_text {
        font-size: 16px;
        line-height: 25.6px;
    }

    .about_text p {
        font-size: 14px;
        line-height: 23px;
    }

    .email_text_div p {
        font-size: 14px;
        line-height: 23px;
    }

    .footer_text p {
        font-size: 13px;
    }
}

@media only screen and (max-width: 537px) {
    
    .AI_head_text h2 {
        font-size: 30px;
    }
    .threat_section_text_div h2 {
        font-size: 30px;
    }
    .fight_section_text_div h2 {
        font-size: 30px;
    }
    .email_text_div h2 {
        font-size: 30px;
    }
    
}
@media (max-width:540px){
    .signup {
        display: inline-flex;
        width: 78vw;
        height: auto;
        margin: 0;
        flex-wrap: wrap;
        border-radius: 0.2rem;
    }
    #btn{
      width:100%;
      border-radius:0.2rem;
    }
    #email-signup {
        width: 78vw;
        border-radius: 0.2rem;
        text-align: center;
    }
    #btn {
        margin-right: 0px;
        margin-left: 8px;
    }
    
  }