@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400&family=Montserrat:wght@600;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@100..900&display=swap');

#shadow-host-companion {
  display : none;
}

.footerIconContainer {
  display : flex;
  align-items : center;
  justify-content : center;
  flex-direction : column;
}

.social {
  width : 40px;
  height : 40px;
  fill : var(--grey);
  margin : 10px;
}

@keyframes tilt-n-move-shaking {
  0% { transform:translate(0,0) }
 1.78571% { transform:translate(10px,0) }
 3.57143% { transform:translate(-10px,0) }
 5.35714% { transform:translate(10px,0) }
 7.14286% { transform:translate(-10px,0) }
 8.92857% { transform:translate(10px,0) }
 10.71429% { transform:translate(0,0) }
 100% { transform:translate(0,0) }
}


:root {
  --themeFont : 'League Spartan';
  --bodyFont : 'League Spartan';
  --themecolor : #FE8500;
  --grey : #FE8500;
  --lightgrey : #FE8500;

  --hex-width: 300px;
  --hex-between: 10px;

  /* Other hexagon dimentions */
  --hex-height: calc(var(--hex-width) / 1.73 /* sqrt(3) */);
  --hex-margin: calc(var(--hex-width) / 2);
  --hex-border: calc(var(--hex-margin) / 1.73 /* sqrt(3) */);
  --hex-transition: all .2s ease;
}

#whatsapp-icon {
  width : 80px;
  height : 80px;
  position : fixed;
  bottom : 20px;
  right : 10px;
  cursor : pointer;
  animation: tilt-n-move-shaking 4s infinite;
  z-index: 99!important;
}

body {
  margin : 0;
  padding : 0;
  overflow-x: hidden;
  width : 100vw;
}

.blog > * {
  text-align : left;
  width : 50%;
}

.blog > h4 {
    font-family : var(--themeFont);
    font-weight : bold;
    color : var(--themecolor);
    font-size : 22px;
}

.blog > p {
  font-size : 20px;
}

.blog {
  margin-bottom : 0!important;
  margin-top : 50px;
}

.blog > img {
  width : 50%;
  height : auto;
  margin : 50px 0;
}

#mobile-nav-container {
  display : none;
}

.highlight {
  width : 100vw;
  background-color : var(--themecolor);
  padding : 50px 0;
  display : flex;
  align-items : center;
  justify-content : center;
  margin : 50px 0;
}

.highlight > * {
  color : white;
  font-size : 30px;
  width : 50%;
}

.faq {
  flex-direction : column;
  justify-content : flex-start;
  text-align : left;
  margin : 50px 0 0 0;
}

.faq > * {
  font-size : 20px;
  margin : 5px 0;
  width : 40%;
}

.faq > h2 {
  font-size : 26px;
}

.faq > h3 {
  font-size : 22px;
}

.div-list {
  display : flex;
  flex-direction : row;
  align-items : center;
  justify-content : center;
  flex-wrap : wrap;
  width : 100%;
}

.div-list > div {
  height : 50vh!important;
  width : 20vw!important;
  display : flex;
  flex-direction : column;
  align-items : center;
  justify-content : center;
  padding : 20px;
  background-color : white;
  border-radius : 30px;
  border : 0;
  background-color : white;
  margin : 50px;
}
#cybersure-solutions {
  flex-wrap : nowrap;
  justify-content : space-between;
  align-items : center;
  width : 95%!important;
  padding : 0;
  margin : 0;
}

#cybersure-solutions > div {
  width : 45%!important;
  height : 72vh!important;
}

#cybersure-solutions > div > * {
  margin : 5px;
}


#cybersure-solutions > div > img {
  width : 15vw;
  height : 15vw;
}

.color-section {
  display : flex;
  flex-direction : column;
  align-items : center;
  justify-content : center;
  flex-wrap : wrap;
  background-color : var(--themecolor);
  width : 100%;
  padding : 50px 0;
  margin : 50px 0;
}

.color-section > h2 {
  color : white;
  margin : 0;
}

#cybersure-solutions > div > * {
  width : 80%!important;
  text-align : left!important;
}

.div-list > div > h3 {
  width : 70%;
  text-align : center;
}

.div-list > div > img {
  width : 80%;
  height : 50%;
  object-fit : contain;
  object-position : center;
}

#cybersure-heading > img {
  width : 30%;
  height : 50vh;
  object-fit: contain;
  object-position: center;
}

#cybersure-heading > div {
  width : 50%;
  height : auto;
}

#cybersure-heading > div > * {
  text-align : left;
}

nav {
  display : flex;
  flex-direction : row;
  align-items : center;
  justify-content : space-around;
  width : 100%;
  height : 12vh;
  background-color : white;
  position : relative;
  transition-duration : 0.5s;
  border-top : 5px solid var(--themecolor);
}

nav > a > p {
  width :10%;
  height : auto;
  padding-top : 5px;
  padding-bottom : 5px;
  font-family : var(--themeFont);
  font-size : 20px;
  font-weight : bold;
}

nav > img {
  height : 80%;
  width : auto;
}

h1, h2, h3, h4, h5, h6 {
  margin : 10px 0;
}

h1 {
  font-family : var(--themeFont);
  font-weight : bold;
  color : var(--grey);
  font-size : 30px;
}

h2 {
  font-family : var(--themeFont);
  font-weight : bold;
  color : var(--grey)!important;
  font-size : 28px;
  text-transform: uppercase;
}

h3 {
  font-family : var(--themeFont);
  font-weight : bold;
  color : var(--themecolor);
  font-size : 26px;
}

h4 {
  font-family : var(--themeFont);
  font-weight : bold;
  color : var(--themecolor);
  font-size : 22px;
}

.flex-container {
  display : flex;
  flex-direction : row;
  align-items : center;
  justify-content : center;
}

.ad {
  position :sticky;
  width : 20vw;
  height : auto;
  top : 100px;
  left : 5px;
}

.flex-column-container {
  display : flex;
  flex-direction : column;
  align-items : center;
  justify-content : center;
  width : auto;
}

.buttonContainer {
  display : flex;
  flex-direction : row;
  align-items : center;
  justify-content : space-between;
  width : 30%;
}

button {
  height : 50px;
  width : 200px;
  font-family : var(--themeFont);
  transition-duration : 0.5s;
  cursor : pointer;
  border-radius : 50px;
  font-size : 16px;
  text-transform: uppercase;
  font-weight : bold;
}

button:hover {
  background-color : #FFCB71;
  border : 4px solid #FFCB71;
  color : #C97F0C;
}

.fullButton {
  background-color : var(--themecolor);
  color : white;
  border : 4px solid var(--themecolor);
}

.greyButton {
  background-color : var(--grey);
  border : 4px solid var(--grey);
  color : white;
}

.greyButton:hover {
  background-color : #3C3C3C;
  border : 4px solid #3C3C3C;
  color : white;
}

.emptyButton {
  background-color : rgb(0,0,0,0);
  color : var(--themecolor);
  border :4px solid var(--themecolor);
}

p, ul, ol, li {
  font-family : var(--bodyFont);
}

section > p,section > ul,section > ol {
  font-family : var(--bodyFont);
  text-align : left;
  width : 50vw;
}

p  > a {
  color : var(--themecolor);
  text-decoration : underline;
}

/* Footer */

footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    padding-top : 30px;
    padding-bottom : 30px;
    width : 100%;
    position : relative;
    background-color : white;
    z-index : 10;
    margin : 0;
    border-top : 5px solid var(--themecolor);
}

footer > * {
  max-width : 70%;
  text-align: center;
  font-family : var(--contentFont);
}


.footerIconTextContainer {
  display : flex;
  flex-direction : row;
  justify-content : flex-start;
  align-items: center;
  max-width : 100%;
}

.footerText {
  font-size : 20px;
  color : var(--grey);
  text-align : left;
  max-width : 30vw;
}

.contact-text {
  color : var(--grey);
  font-family : var(--themeFont);
  font-weight : bold;
}

.footerText:hover {
  text-decoration : underline;
  transform : scale(1);
}

.icon-text-container {
  width : 30vw;
  height : auto;
  display : flex;
  align-items : center;
  justify-content : flex-start;
  flex-direction : row;
  text-align : left;
}

.icon-text-container > a {
  width : 90%;
}

#copyright {
  text-align : center;
}

#copyright:hover {
  text-decoration : none;
}

.footerIcon {
  width : 30px;
  height : 30px;
  margin : 10px;
  fill : var(--themecolor)!important;
}

.icon {
  width : 40px!important;
  height : 40px!important;
  margin : 10px;
  fill : var(--themecolor);
}

#footerContainer {
  display : flex;
  flex-direction : row;
  align-items : center;
  justify-content: space-between;
  width : 100%;
}

#footerIconContainer {
  display : flex;
  flex-direction : column;
}

#footerCredit {
  color : var(--grey);
  width : 100%;
  text-align : right;
  font-size : 16px
}

#credit {
  color : var(--gold);
}

#credit:hover {
  cursor : pointer;
  text-decoration : underline;

}

#footerSectionDiv {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  width : 100%;
}

#footerNavDiv {
  display : flex;
  flex-direction: row;
  align-items: stretch;
  justify-content:  space-around;
  padding-top : 10px;
  padding-bottom : 10px;
  width : 40%;
}

.footerLink {
  color : var(--grey);
  font-size : 20px;
  font-weight : light;
}

hr {
  border : 1px solid var(--grey);
  width : 80%;
}

#footerCredit {
  color : white;
  width : 100%;
  text-align : right;
  font-size : 20px;
  font-family : var(--bodyFont);
}

/* End Footer */

::-webkit-scrollbar {
  background-color : var(--themecolor)
}

::-webkit-scrollbar-thumb {
  background-color : rgb(255,255,255,0.4);
  border-radius: 50px;
}

.headContainer {
  width : 100%;
  height : auto;
  background-color : var(--grey);
  margin : 0;
  padding : 0;
  display : flex;
  align-items : center;
  justify-content : center;
}

.headContainer > h2 {
  color : white;
  padding : 20px;
}

p {
  font-family : var(--bodyFont);
  font-size : 20px;
  margin : 5px 0;
}

section {
  display : flex;
  flex-direction : column;
  align-items : center;
  justify-content : center;
  padding : 0;
  margin : 0;
  width : 100vw;
  text-align : center;
  padding : 50px 0;
}

section > img {
  width : 40%;
  height : auto;
}
section#contact {
  padding-bottom : 70px;
  padding-top : 50px;
}



ul li {
  font-family : var(--bodyFont);
  text-align : left;
}

nav > a {
  text-decoration : none;
  transition-duration : 0.1s;
  color : var(--grey);
}

nav > a:hover {
  text-decoration : underline;
  color : var(--themecolor);
}

a {
  text-decoration : none;
}

#hamburger-container {
  display : none;
}


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

  h1 {
    font-size : 36px;
  }
  h2 {
    font-family : var(--themeFont);
    font-weight : bold;
    color : var(--grey);
    max-width : 40%!important;
    text-align : center;
  }

  section > p,section > ul,section > ol {
    width : 80%;
  }

  section > img {
    width : 60%;
    height : auto;
  }

  .buttonContainer {
    display : flex;
    flex-direction : column;
    align-items : center;
    justify-content : space-between;
    width : 90%;
  }

  .button {
    font-family : var(--themeFont);
    font-weight : bold;
    transition-duration : 0.5s;
    cursor : pointer;
  }

  .button:hover {
    background-color : #FFCB71;
    border : 4px solid #FFCB71;
    color : #C97F0C;
  }



  .fullButton {
    background-color : var(--themecolor);
    color : white;
    border : 7px solid var(--themecolor);
  }

  .emptyButton {
    background-color : rgb(0,0,0,0);
    color : var(--themecolor);
    border :7px solid var(--themecolor);
  }



  /* Footer */

  footer {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
      width : 100%;
      position : relative;
      background-color : var(--themecolor);
  }

  footer > * {
    max-width : 70%;
    text-align: center;
    font-family : var(--contentFont);
  }


  .footerIconTextContainer {
    display : flex;
    flex-direction : row;
    justify-content : flex-start;
    align-items: center;
    max-width : 100%;
  }

  .footerText {
    color : white;
    text-align : left;
    max-width : 60vw;
  }

  #footerContainer {
    display : flex;
    flex-direction : column;
    align-items : center;
    justify-content: space-between;
    width : 100%;
  }

  #footerCredit {
    text-align : center;
    max-width : 90%;
  }

  #footerNavDiv {
    display : flex;
    flex-direction: row;
    align-items: stretch;
    justify-content:  space-around;
    width : 90%;
    flex-wrap : wrap;
  }

  .footerLink {
    color : white;
    font-weight : light;
    margin : 10px;
  }

  hr {
    border : 3px solid white;
    width : 90%;
  }

  #copyright {
    text-align : center;
    max-width : 90%;
  }

  .flex-container {
    display : flex;
    flex-direction : column;
    align-items : center;
    justify-content : center;
  }



  nav {
    flex-direction : column;
    align-items : center;
    justify-content : center;
    position : absolute;
    width : 100%;
    height : 100vh;
    left : -120%;
    top : 0;
    z-index : 95;
    background-color : white;
  }

nav > a {
  width :65%;
}

  nav > a > p {
    width :100%;
    height : auto;
    padding-top : 8px;
    padding-bottom : 8px;
    font-family : var(--themeFont);
    font-size : 24px;
    color : var(--themeFont);
    text-align : center;
    margin : 10px;
  }

  nav > a {
    width : 90%;
    text-align : center;
  }

  nav > a > button {
    font-size : 22px;
    width : 90%;
  }



  nav > img {
    display : none;
  }

  #mobile-nav-container {
    display : flex;
    flex-direction : row;
    align-items : center;
    justify-content : space-between;
    height : 10vh;
    width : 100%;
    margin : 0;
    padding : 0;
    border-top : 3px solid var(--themecolor);
  }



  #mobile-nav-container > img, #mobile-nav-container > a  {
    height : 40%;
    width : auto;
    margin : 5px;
  }

  #mobile-nav-container > a > button {
    height : 100%;
    width : 200px;
  }

  #hamburger-container {
    display : flex;
    align-items : center;
    justify-content : center;
    position : relative;
    background-color : var(--themecolor);
    z-index : 97;
    width : 90px;
    height : 70%;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
  }

  .hamburger {
    display : block;
    height : 90%;
    width : auto;
    position : absolute;
    left : 0;
    top : 0;
    transition-duration: 0.5s;
    font-size : 40px;
    color : white;
    background-color : rgb(0,0,0,0);
    border-radius : 50px;
    border : none;
    cursor : pointer;
    z-index : 99;
    line-height : 5px;
  }

  #hamburgerX {
    z-index : 97!important;
    opacity : 0;
    }

    section > * {
      max-width : 90%!important;
    }

    .icon-text-container {
      width : 90vw;
    }

    .buttonContainer > a > button {
      margin : 20px 0 20px 0;
    }

    /* CyberSure */
    .highlight {
      width : 100vw;
      background-color : var(--themecolor);
      padding : 50px 0;
      display : flex;
      align-items : center;
      justify-content : center;
      margin : 50px 0 0 0;
    }

    .highlight > * {
      color : white;
      font-size : 30px;
      width : 80%;
    }

    .div-list {
      flex-direction : column;
      padding : 50px 0;
      margin : 0;
    }

    .div-list > div {
      height : 80vh!important;
      width : 90%!important;
      display : flex;
      flex-direction : column;
      align-items : center;
      justify-content : center;
      padding : 20px;
      background-color : white;
      border-radius : 30px;
      border : 0;
      background-color : white;
      margin : 50px 0;
    }

    .div-list > div > img {
      width : 80%;
      height : auto;
    }

    #cybersure-heading > img {
      width : 90%;
      height : auto;
      object-fit: contain;
      object-position: center;
    }

    #cybersure-heading > div {
      width : 90%;
      height : auto;
    }

    .social {
      fill : white;
    }

    #whatsapp-icon {
      width : 50px;
      height : 50px;
      position : fixed;
      bottom : 20px;
      right : 20px;
      cursor : pointer;
    }

    .footerIcon {
      fill : white!important;
    }
}