@font-face {
    font-family: 'Squad Regular';
    src: url('fonts/SquadRegular.otf') format('opentype');
}


@font-face {
    font-family: 'Squad SemiBold';
    src: url('fonts/Squad-SemiBold.ttf') format('truetype');
}


@font-face {
    font-family: 'Squad Bold';
    src: url('fonts/Squad-Bold.ttf') format('truetype');

}

/* First Section */
 .dark-hero {
    background-image: url('cyber-security-concept-digital-art.jpg');
    background-size: cover;
    background-position: 50% 35%;
    width: 100%;
    color: #fff;
    min-height: 630px;
    padding-top: 50px; 
    padding-left: 170px; 
  }

  .dark-hero img {
    width: 200px;
    height: auto;
    max-height: 40px; /* Keep the logo from getting too tall*/
  }
/* End of First Section */



/* Second Section Siguria Kibernetike */
.cybersecurity-section h1 {
    font-size: 40px;
    font-family: 'Squad Bold' , sans-serif;
    margin-bottom: 30px;
  }

  .cybersecurity-section p {
    font-size: 20px;
    line-height: 1.4;
    color: #333;
    font-family: 'Squad Regular';

  }

  .cybersecurity-section p.highlight {
    margin-top: 20px;
    color: #6fbf73;
    font-family: 'Squad Regular';
  }
/* End of Second Section Siguria Kibernetike */



/* Third Section Kuptimi i mashtrimeve online*/
  .online-scams h2{
    font-family: 'Squad Bold';
    font-size: 40px;
    }

    #pills-tab{
      margin-top: 10px;
      margin-bottom: 80px !important;
    }

 /* Pills Navigation */
 .nav-pills .nav-link {
    padding: 15px 40px;
    font-size: 18px;
    border-radius: 0.8rem;
    font-family: 'Squad SemiBold', sans-serif;
    color: #000003;
    margin: 0 0.6rem;
    box-shadow: 0 3px 5px 1px rgb(149 149 149);
    width: 270px;
    margin-bottom: 20px
}

.nav-pills .nav-link.active {
    background-color: #e3f1df;
    color: #000003;
}
img.img-fluid {
    padding-right: 30px;
}

  ::marker {
    color: #5fac39; /*Ngjyra e bullet points*/
}

/* Phishing */
  .phishing-section img {
    max-width: 100%;
    height: auto;
    border-radius: 1%;
  }

  .phishing-section h3 {
    margin-top: 5px;
    margin-bottom: 20px;
    font-family: 'Squad Bold';
    font-size: 25px;
  }

.phishing-section h5 { 
    font-size: 17px;
    font-family: 'Squad Bold';
    margin-top: 10px;
    margin-bottom: 10px;
 }


/* Vishing */
.vishing-section img {
    max-width: 100%;
    height: auto;
    border-radius: 1%;
  }

.vishing-section h3{
    margin-top: 5px;
    margin-bottom: 20px;
    font-family: 'Squad Bold';
    font-size: 25px;
}

.vishing-section h5 { 
    font-size: 17px;
    font-family: 'Squad Bold';
    margin-top: 10px;
    margin-bottom: 10px;
 }


/* Smishing */
.smishing-section img {
    max-width: 100%;
    height: auto;
    border-radius: 1%;
  }

.smishing-section h3{
    margin-top: 5px;
    margin-bottom: 20px;
    font-family: 'Squad Bold';
    font-size: 25px;
}

.smishing-section h5 { 
    font-size: 17px;
    font-family: 'Squad Bold';
    margin-top: 10px;
    margin-bottom: 10px;
 }


 /* Mashtrimi CEO-s */
 .ceo-fraud img {
    max-width: 100%;
    height: auto;
    border-radius: 1%;
  }

.ceo-fraud h3{
    margin-top: 5px;
    margin-bottom: 20px;
    font-family: 'Squad Bold';
    font-size: 25px;
}

.ceo-fraud h5 { 
    font-size: 17px;
    font-family: 'Squad Bold';
    margin-top: 10px;
    margin-bottom: 10px;
 }
  /* End of Third Section Kuptimi i mashtrimeve online */


/*Fourth Section Situatat më të zakonshme të mashtrimeve online */
.scam-section {
    margin-top: 100px;
    margin-bottom: 100px;
    justify-content: center !important;
}

  .scam-section h2 {
    margin-bottom: 25px;
    font-family: 'Squad Bold';
    font-size: 40px;
  }

  .scam-item img {
    max-width: 100%;
    height: auto;
  }

  .scam-item h5 {
    margin-top: 1rem;
    font-family: 'Squad Bold';
  }

  /* Style Button */
  button.shembuj-button, button {
    background-color: #5fac39;
    border:1px solid #5fac39;
    padding: 5px 25px;
    border-radius: 5px;
    color: #fff;
    font-size: 15px;
    font-family: 'Squad Regular';
    margin-top: 25px;
}


  /* popup */
  .popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }
  
  .popup-content {
    position: relative;
    max-width: 80%;
    max-height: 80%;
    background: #fff;
    padding: 20px;
    text-align: center;
    border-radius: 8px;
  }
  
  .popup-content img {
    max-width: 100%;
    max-height: 100%;
  }
  
  .hidden {
    visibility: hidden;
    opacity: 0;
  }
  
  .popup.visible {
    visibility: visible;
    opacity: 1;
  }
  
  .close-popup {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    color: #000;
  }

/*End of Fourth Section Situatat më të zakonshme të mashtrimeve online*/


 /* Section 5 Si të mbroheni */
.si-te-mbroheni h2{
    font-family: 'Squad Bold';
    font-size: 40px;
    margin-bottom: 5rem !important;;

}

  .info-box {
    background-color: #ecf5ea;
    border-radius: 50px;
    padding: 60px 45px;    
    text-align: center;
    height: 300px;
  }

  .info-box h5 {
    color: #4db848;
    margin-bottom: 16px;
    font-weight: 600;
    font-size: 25px;
  }

  .info-box p {
    font-family: 'Squad SemiBold';
    font-weight: 500;
    font-size: 17px;
  }
 /* End of Section 5 Si të mbroheni */


 /* Section 6 Kontaktet */
  .contact-section {
    background-color: #f5f5f5;
    padding: 48px 0;
    margin-top: 80px;
  }
  
  .contact-section h2 {
    margin-bottom: 80px;
    text-align: center;
    font-family: 'Squad Bold';
    font-size: 35px;
  }
  .contact-section h5 {
    font-size: 20px;
    color: #4eb145; 
    margin-bottom: 40px;
    font-family: 'Squad Bold';
  }

  .contact-section p, a{
    color: black;
    font-family: 'Squad Regular';
    text-decoration: none;
    line-height: 18px;
  }

  /* Default: Show single-line format (desktop) */
.mobile-show {
  display: none;
}

.mobile-hide {
  display: block;
}
  /*End of Section 6 Kontaktet */


  /* Section7 Footer */
  .custom-container {
    background-color: #5fac39;
    border-radius: 20px 20px 0 0;
    padding: 15px;
    color: white;
}

.footergreenbar {
  width: 90%;
  margin: auto;
}
.text-left {
text-align: left !important;
}

.text-99 {
color: #d9d9d9;
font-size: 15px;
font-weight: 600;
line-height: 41.78px;
text-align: right;
}
  /* End of Section7 Footer */





  /* Responsive max 628*/
    @media screen and (max-width: 628px) {

    body {
        overflow-x: hidden !important;
    }

    .cybersecurity-section, .online-scams, .phishing-section, .vishing-section, .smishing-section, .ceo-fraud, .scam-section, .si-te-mbroheni, .contact-section  {
      padding-left: 20px;
      padding-right: 20px;
    }

    .cybersecurity-section h2, .online-scams h2, .phishing-section h2, .vishing-section h2, .smishing-section h2, .ceo-fraud h2, .scam-section h2, .si-te-mbroheni h2, .contact-section h2 {
      font-size: 30px;
    }

 /* Sec 1 */
      .dark-hero img {
      width: 150px;
      max-height: 40px;
    }
  
    .dark-hero {
      min-height: 270px;
      padding-top: 20px; 
      padding-left: 15px; 
    }
    /*  End of Sec 1 */
  

    /* Second Section Siguria Kibernetike */
    .cybersecurity-section h1 {
      font-size: 30px;
    }

    .cybersecurity-section p {
      font-size: 18px;
      line-height: 1.6;
      text-align: justify;
    }

    .cybersecurity-section {
      padding-bottom: 5px !important;
    }
/* End of Second Section Siguria Kibernetike */


/* Third Section Kuptimi i mashtrimeve online Part1*/
.online-scams h2{
  margin-bottom: 5px !important;
  }

img.img-fluid {
  text-align: center;
  padding: 0px !important;
} 

#pills-tab{
  margin-bottom: 30px !important;
}


/* Phishing Vishing Smishin Ceo fraud */
.phishing-section, .vishing-section, .smishing-section, .ceo-fraud  {
  text-align: justify !important;
}
/* End of Third Section Kuptimi i mashtrimeve online Part1 */

/* Fourth Section Situatat më të zakonshme të mashtrimeve online */
.scam-section {
  margin-top: 50px;
  margin-bottom: 50px;

}

.scam-section .scam-item {
  flex: 0 0 50%;
  max-width: 50%; 
}

/* End of Fourth Section Situatat më të zakonshme të mashtrimeve online */


 /* Section 6 Kontaktet */

.si-te-mbroheni h2{
  margin-bottom: 50px !important;
}

.info-box.third{
  padding-top: 35px  !important;
}

.contact-section h2{
  margin-bottom: 50px;
}

.contact-section h5{
  margin-bottom: 15px;
}


.mobile-show {
  display: block;
}

.mobile-hide {
  display: none;
} 

p.mobile-show.telll {
  line-height: 30px;
}

p.mobile-show.mailll {
  line-height: 30px;
}
/* End of Section 6 Kontaktet */
    }
/* End of Responsive */


@media screen and (max-width: 1399px) and (min-width: 1200px){
  .info-box {
    padding: 60px 25px;
    height: 350px;
}
}

@media screen and (max-width: 1199px) and (min-width: 992px){
  .info-box {
    padding: 60px 25px;
    height: 360px;
}
}

@media screen and (max-width: 991px) and (min-width: 768px){
  .info-box {
    padding: 60px 20px;
    height: 450px;
}
}