@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

:root {
    --color-corp: #0FB8D3;
    --color-corp-dark: #23282D;
    --color-gray: #00000080;
    --color-sky: #E2EFFF;
}

.form-control:focus {
    box-shadow: none;
}

.form-control-lg {
    background: #e7e7e7 !important;
    padding: 23px !important;    
}

button:focus:not(:focus-visible){
    box-shadow: none;
}

.modal-backdrop {
    --bs-backdrop-opacity: 0.7;
}

/* Scroller */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey; 
}
 
::-webkit-scrollbar-thumb {
    background: #0fb8d3;
}

::-webkit-scrollbar-thumb:hover {
    background: #068498;
}

body {
  font-family: 'Montserrat', sans-serif;
}

.text-corp {
  color: var(--color-corp);
}

.text-corp-dark {
  color: var(--color-corp-dark);
}

.text-gray{
  color: var(--color-gray);
}

.bg-corp{
  background: var(--color-corp);
}

.bg-corp-dark{
  background: var(--color-corp-dark);
}

.bg-sky{
  background: var(--color-sky);
}

.btn-primary {
  --bs-btn-bg: var(--color-corp);
  --bs-btn-border-color: var(--color-corp);
  --bs-btn-hover-color: var(--color-corp);
  --bs-btn-hover-bg: transparent;
  --bs-btn-hover-border-color: var(--color-corp);
  --bs-btn-active-bg: var(--color-corp);
  --bs-btn-active-border-color: var(--color-corp);
}

.btn-secondary {
  --bs-btn-bg: var(--color-corp-dark);
  --bs-btn-border-color: var(--color-corp-dark);
  --bs-btn-hover-color: var(--color-corp-dark);
  --bs-btn-hover-bg: transparent;
  --bs-btn-hover-border-color: var(--color-corp-dark);
  --bs-btn-active-bg: var(--color-corp-dark);
  --bs-btn-active-border-color: var(--color-corp-dark);
}

.dropdown-menu{
  min-width: 1rem;
}

/*Header*/
header .contacts{
  font-size: 14px;
}

header .dropdown-toggle::after {
  display: none;
}

header .dropdown-menu{
  background: white;
}

header .dropdown-item{
  color: var(--color-corp-dark);
}

/*index.html*/
/*Banner*/
.index-banner .square-title::after{
  content: '';
  width: 80px;
  height: 80px;
  transform: rotate(-11deg);
  left: -5px;
  bottom: -15px;
  background: var(--color-corp-dark);
  border-radius: 7px;
  position: absolute;
  z-index: -1;
}

/*Advantages*/
.border-right-dashes{
  border-right: 1px dashed var(--color-corp);
}

/*Service*/
.border-box{
  border: 3px solid var(--color-corp-dark);
}

.img-shadow{
  box-shadow: 6px 4px 23px 0px rgba(0, 0, 0, 0.25);
  border-radius: 18px 18px 0 0;
}

.img-shadow-bottom{
  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.10), 0px 18px 18px 0px rgba(0, 0, 0, 0.09), 0px 40px 24px 0px rgba(0, 0, 0, 0.05), 0px 71px 28px 0px rgba(0, 0, 0, 0.01), 0px 111px 31px 0px rgba(0, 0, 0, 0.00);
}

.blue-cube{
  width: 45px;
  height: 45px;
  transform: rotate(-11deg);
  top: -38px;
  left: 35px;
}

/* Payment */
.payment .border-box-1 {
  background: #263238;
}

.payment .border-box-2 {
  background: #E2EFFF;
}

.payment .box-bottom {
  border-radius: 0 0 13px 13px;
  height: 150px;
}

.payment button{
  width: 60px;
  height: 60px;
}

.payment button:focus:not(:focus-visible){
  background: var(--color-corp-dark) !important;
  border-color: var(--color-corp-dark) !important;
  width: 140px;
  height: 140px;
}

.payment button:focus:not(:focus-visible) img{
  transform: scale(1.3);
}

/* Partners */
.slider-partners .slick-slide {
  padding: 0 30px;
}

.left-partners, .right-partners {
  cursor: pointer;
  bottom: 45px;
  width: 45px;
}

.left-partners {
  left: -30px;
}

.right-partners {
  right: -30px;
}

/* Support */
.bg-support {
  background: rgba(15, 184, 211, 0.30);
}

/* Team */
.our-team p {
    font-size: 14px;
}

.our-team img {
    width: 300px;
    height: 300px;
}

/* Loyalty program */
.loyalty-program .btn-call {
  bottom: 30px;
  right:0;
}

/* Pills */
.nav-pills:after {
    content: "";
    height: 4px;
    background: #0fb8d3;
    top: 50%;
    position: absolute;
    z-index: -1;
    width: 90%;
    margin: 0 auto;
    left: 0;
    right: 0;
}

.nav-justified .nav-item, .nav-justified>.nav-link {
    align-items: center;
    justify-content: center;
    display: flex;
}

.nav-justified .nav-item span {
    width: 95px;
    height: 95px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    background: #263238;
    border: 3px solid #0fb8d3;
}

/* Footer */
footer .info p{
  font-size: 14px;
}

footer .menu a{
  font-size: 15px;
}

/*Breakpoint*/
@media (max-width: 992px) {

  /*index.html*/
  .index-banner .square-title::after{
    width: 65px;
    height: 65px;
  }

  .index-advantages .box.bg-corp-dark{
    background: white !important;
  }

  .index-advantages .border-right-dashes{
    border-right: none;
  }

  .index-advantages .advantages{
    padding: 20px 40px;
  }

  .index-advantages .advantages h5{
    font-size: 15px;
  }

  .index-advantages .advantages p{
    font-size: 11px;
  }

  .payment button{
    width: 50px;
    height: 50px;
  }

  .payment button:focus:not(:focus-visible){
    width: 90px;
    height: 90px;
  }

  .payment button:focus:not(:focus-visible) img{
    transform: scale(1.2);
  }

  .range-list span{
    padding-left: 5px;
    font-size: 10px!important
  }

  .slider-partners{
    padding: 0 10px;
  }

  .slider-partners .slick-slide{
    padding: 0 20px;
  }

  .left-partners, .right-partners{
    cursor: pointer;
    bottom: 5px;
    width: 20px;
  }

  .left-partners{
    left: 5px;
  }

  .right-partners{
    right: 5px;
  }

  .our-team p{
    font-size: 10px;
  }

  .loyalty-program svg{
    width: 90px;
    height: 90px;
  }

  footer .info p{
    font-size: 12px;
  }

  footer .menu a{
    font-size: 11px;
  }

}

@media (max-width: 576px) {
  .navbar .navbar-brand{
    max-width: 150px;
  }

  .index-banner .square-title::after{
    width: 60px;
    height: 60px;
  }

  h1{
    font-size: 26px;
  }

  h2{
    font-size: 20px;
  }

  .payment .box-bottom{
    height: 110px; 
  }
}