<!-- Header-top-->

  <div class="container-fluid">

    <div class="row my-row-1">

      <div

        class="col-lg-6 col-xl-6 col-xxl-6 d-flex justify-content-center mx-auto mx-lg-0 justify-content-lg-start align-items-center logo-container">

        <a href="index.html">

          <div class="text-center">

            <!--Image-->

            <picture>

              <source srcset="https://i.ibb.co/J2MNrGq/Dru-tvo-Henosis-logo.webp" type="image/webp" />

              <source srcset="img/png/Društvo-Henosis-logo.png" type="image/png" />

              <img src="img/png/Društvo-Henosis-logo.png" alt="Logo" class="logo" />

            </picture>

            <p class="my-text-color small logo-p">

              Za svobodo v tukaj in zdaj

            </p>

          </div>

        </a>

      </div>

      <div

        class="col-lg-6 col-xl-6 col-xxl-6 d-flex justify-content-center mx-auto mx-lg-0 justify-content-lg-end align-items-center click-to-action col-b1">

        <div class="d-flex justify-content-end align-items-center my-pulse">

          <div class="pulse">

            <i class="fas fa-phone fa-5x my-fa-phone-1"></i>

          </div>

          <a href="tel:0038640706921">

            <p class="display-6 my-text-color">Stopi v stik z mano</p>

          </a>

        </div>

      </div>

    </div>

  </div>

  <!-- ./Header-top-->

.my-row-1 {

  background-color: #326796;

  background: -moz-radial-gradient(

    center,

    ellipse cover,

    #3f81bc 0%,

    #326796 100%

  );

  background: -webkit-radial-gradient(

    center,

    ellipse cover,

    #3f81bc 0%,

    #326796 100%

  );

  background: -webkit-gradient(

    radial,

    center center,

    0px,

    center center,

    100%,

    color-stop(0%, #3f81bc),

    color-stop(100%, #326796)

  );

  background: -o-radial-gradient(

    center,

    ellipse cover,

    #3f81bc 0%,

    #326796 100%

  );

  background: -ms-radial-gradient(

    center,

    ellipse cover,

    #3f81bc 0%,

    #326796 100%

  );

  background: radial-gradient(ellipse at center, #3f81bc 0%, #326796 100%);

  border-bottom: 1px solid #76abd9;

}

​

.my-text-color {

  color: #c2d2e0;

}

​

​

​

@media (max-width: 991px) {

  .click-to-action {

    padding-top: 10px;

    padding-bottom: 10px;

  }

}

​

@media (max-width: 575px) {

  .my-fa-phone-1 {

    height: 100px;

  }

}

​

.logo {

  width: 100px;

  height: 100px;

  margin-top: 10%;

}

​

.logo-p {

  margin-bottom: 10%;

}

.logo-container {

  padding-left: 2%;

}

​

.click-to-action {

  padding-right: 2%;

}

​

@media (max-width: 991px) {

  .col-b1 {

    border-top: thin solid #76abd9;

    width: 90%;

    margin-left: auto;

    margin-right: auto;

  }

}

.pulse i {

  color: #88a8c3;

}

​

@media (max-width: 575px) {

  .my-pulse {

    margin-top: 10px;

    margin-bottom: -10px;

  }

}

​

.pulse {

  height: 100px;

  width: 100px;

  border-radius: 50%;

  display: flex;

  justify-content: center;

  align-items: center;

  position: relative;

}

​

.pulse::before {

  content: "";

  position: absolute;

  border: 1px solid #88a8c3;

  width: calc(100% + 40px);

  height: calc(100% + 40px);

  border-radius: 50%;

  animation: pulse 1s linear infinite;

}

​

.pulse::after {

  content: "";

  position: absolute;

  border: 1px solid #88a8c3;

  width: calc(100% + 40px);

  height: calc(100% + 40px);

  border-radius: 50%;

  animation: pulse 1s linear infinite;

  animation-delay: 0.3s;

}

​

@keyframes pulse {

  0% {

    transform: scale(0.5);

    opacity: 0;

  }

​

  50% {

    transform: scale(1);

    opacity: 1;

  }

​

  100% {

    transform: scale(1.3);

    opacity: 0;

  }

}

​