/*
Theme Name: Africa BSI
Theme URI: https://bsi-africa.com
Author: Intside
Author URI: https://intside.com/
Description: Africa BSI is official WordPress theme based on Bootstrap
Version: 0.1
Tags: blue, black, white, light, one-column, two-columns, right-sidebar, fluid-layout, responsive-layout, custom-header, custom-menu, editor-style, featured-images, translation-ready
Text Domain: bsi-africa
*/


/**
 * Table of Contxents:
 *
 * 1.0 - Basic Structure
 * 2.0 - Media Queries
 * ----------------------------------------------------------------------------
 */

/**
 * 1.0 Basic Structure
 * ----------------------------------------------------------------------------
 */

:root {
  --color-primary: #c12d28;
}

html {
  font-size: 16px;
}

body {
  background-color: #fff;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.3;
  color: #333333;
}

h1 {
  font-size: 1.875rem;
}
h2 {
  font-size: 1.675rem;
}
h3 {
  font-size: 1.5rem;
}
h5 {
  font-size: 1.125rem;
} 
h6 {
  font-size: 1rem;
} 

h1, 
h2, 
h6 {
  text-transform: uppercase;
}

h1, 
h2, 
h3 {
  font-weight: 700;
}
 
h4, 
h5, 
h6 {
  font-weight: 600;
}

h1,
h2 {
  margin: 0 0 1rem;
}

ul {
  margin: 0;
  padding: 0;
}
ul li {
  list-style-type: none;
}

p {
  margin-bottom: 1rem;
}

a {
  display: inline-block;
}
a, a:hover {
  text-decoration: none;
  color: var(--color-primary);
}

/* Image */
figure,
img {
  max-width: 100%;
  height: auto;
}

.img_full {
  width: 100%;
  height: auto;
}
.img_costum {
  max-width: 200px;
  width: auto;
  max-height: 60px;
  height: auto;
}

/* Border */
.radius_circle {
  position: relative;
  z-index: 50;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 1000px;
}
.radius_default {
  border-radius: 16px;
}
.radius_custom {
  border-radius: 24px;
}

.border_custom {
  background-color: var(--color-primary);
  width: 100%;
  height: 4px;
  margin-bottom: 1rem;
}

/*  */
.primary_text {
  color: var(--color-primary);
}
.secondary_text {
  color: #7b7b7b;
}

.text_bg_primary {
  background-color: var(--color-primary);
  color: #fff;
}
.text_bg_secondary {
  background-color: #fff;
  color: #333333;
}

/*  */
.site {
  display: flex;
  flex-direction: column;
  overflow: scroll;
  scrollbar-width: none;
  height: 100vh;
}

.site-main {
  margin: auto 0;
}

/* Form */
.form-select, 
.form-control {
  padding: .5rem 1rem;
  border-radius: 24px;
}
.form-select:focus,
.form-control:focus {
  border: 1px solid rgba(32, 76, 229, 0.65);
  box-shadow: none;
}
.form-check-input:checked {
  background-color: #fff;
  border-color: rgba(32, 76, 229, 0.65);
}
.form-check-input:checked[type=radio] {
  background-image: url(assets/images/checked.svg);
  background-repeat: no-repeat;
  background-size: initial;
}
.form-check-input:disabled {
  border: 1px solid #333333;
}
.iti {
  display: block;
}
.iti__selected-country-primary:hover,
.iti__selected-country:hover {
  background-color: transparent !important;
}

#main-form  {
  margin: auto 0;
}
#main-form .form-step {
  display: none;
}
#main-form .form-step-active {
  display: block;
}
#main-form .content_form {
  margin-bottom: 138px;
}
#main-form .item-form {
  background-color: #FBFBFB;
  padding: 1.25rem;
  width: 100%;
  height: auto;
}
#main-form .item-form label {
  cursor: pointer;
}


.toast {
  position: absolute;
  right: 0 !important;
  display: none;
}

/*  */
.errorMessage {
  position: relative;
  padding: 1rem;
  margin: 10px;
  font-weight: 600;
  color: #212121;
  border: 1px solid #eee;
  background-color: rgba(193, 70, 66, 0.21);
  border-radius: 5px;
}
.errorMessage .bi {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  cursor: pointer;
}

.servicesType {
  background-color: #F7F7F7;
  width: 158px;
  height: 158px;
  padding: 1rem;
  text-align: center;
  border: 1px solid #333333;
  border-radius: 8px;
}

 
/* btn */
.btn-primary, 
.btn-secondary,
.btn-light {
  padding: .5rem 1rem;
  border-radius: 24px;
}
.btn-primary {
  background-color: var(--color-primary);
  border-color:  var(--color-primary);
  color: #fff;
}
.btn-secondary {
  background-color: #E2E2E2;
  border-color: #E2E2E2;
  color: #7B7B7B;
}
.btn-light {
  background-color: #fff;
  border-color: #fff;
  color: var(--color-primary);
}
.btn-custom {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-primary);
}
.btn:hover, 
.btn:focus-visible, 
.btn-check:focus+.btn, 
.btn:focus, 
.btn:first-child:active, 
:not(.btn-check)+.btn:active, 
.btn:first-child:active:focus-visible, 
:not(.btn-check)+.btn:active:focus-visible {
  box-shadow: none;
  transition:  .5s ease-in;
}
.btn:hover.btn-primary, 
.btn:focus-visible.btn-primary, 
.btn-check:focus+.btn.btn-primary,
 .btn:focus.btn-primary, 
 .btn:first-child:active.btn-primary, 
 :not(.btn-check)+.btn:active.btn-primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.btn:hover.btn-light, 
.btn:focus-visible.btn-light, 
.btn-check:focus+.btn.btn-light, 
.btn:focus.btn-light, 
.btn:first-child:active.btn-light, 
:not(.btn-check)+.btn:active.btn-light {
  background-color: #fff;
  border-color: #fff;
  color: var(--color-primary);
}
.btn:hover.btn-secondary, 
.btn:focus-visible.btn-secondary, 
.btn-check:focus+.btn.btn-secondary,
.btn:focus.btn-secondary, 
.btn:first-child:active.btn-secondary, 
:not(.btn-check)+.btn:active.btn-secondary {
  background-color: #E2E2E2;
  border-color: #E2E2E2;
  color: #7B7B7B;
}


/* Header */
nav.navbar {
  background-color: #fff;
  box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.05);
}
nav .navbar-nav .menu-item {
  position: relative;
}
nav .menu-item a {
  display: block;
  margin: .5rem 0 ;
  text-transform: uppercase;
  color: #333333;
}
nav .menu-item a:hover {
  color: var(--color-primary);
}
nav .sub-menu {
  display: none;
}
nav .navbar-nav .menu-item-has-children::before  {
  content: '';
  position: absolute;
  top: 10px;
  right: 0;
  background-image: url(assets/images/down-line.svg);
	background-repeat: no-repeat;
	background-position: center;
  width: 1rem;
  height: 1rem;
  margin-left: .375rem;
  transition: transform 0.2s ease-in-out;
} 
nav .navbar-nav .menu-item-has-children:hover::before {
  transform: rotate(-180deg); 
}

nav .navbar-nav .menu-item-has-children:hover .sub-menu {
  display: block;
  overflow: hidden;
}
nav .navbar-nav .menu-item a {
  display: block;
  margin: .5rem 0 ;
  text-transform: uppercase;
  color: #333333;
}
nav .navbar-nav .menu-item a:hover,
nav .navbar-nav .menu-item a[aria-current="page"] {
  color: var(--color-primary);
}

nav .navbar-nav .menu-item .sub-menu {
  display: none;
}

nav .navbar-nav .menu-item .sub-menu .menu-item a {
  font-size: .875rem;
  padding: 0.5rem 0.75rem;
} 
 
/* Slick */
.slick-slide {
  margin: 0 12px;
}

/* bloc background */
.light {
  background-color: #fcf6f6;
} 
.dark {
  background-color: #f7f7f7;
}

/* Content */
.content {
  background-color: #fff;
  padding: 1.5rem;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
}
.content_dark {
  background-color: var(--color-primary);
  padding: 1.5rem;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
  color: #fff;
}

/* Block full */
.block-full ul li, 
.block-full ol li  {
  list-style-type: square;
} 

/* Pricing */
.pricing_header {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.pricing_header h4 {
  font-weight: 500;
}
.pricing_icon {
  background-color: rgba(193, 71, 66, 0.1);
  padding: 1rem;
  border-radius: 16px;
}
.pricing_label {
  text-transform: uppercase;
}
.pricing_label,
.pricing_price  {
  font-weight: 700;
}
.pricing_price {
  font-size: 3.375rem;
}
.pricing-features-options li,
.pricing-features-options-star li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: 1rem;
}
.pricing-features-options li::before,
.pricing-features-options-star li::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background-repeat: no-repeat;
  background-size: contain;
  width: 1.5rem;
  height: 1.5rem;
}
.pricing-features-options li::before {
  background-image: url(assets/images/check-circle-red.svg);
}
.pricing-features-options-star li::before {
  background-image: url(assets/images/check-circle-white.svg);
}
.pricing_star {
  position: relative;
  background-color: var(--color-primary);
  padding: 1.5rem;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
  color: #fff;
}
.pricing_star .pricing_icon {
  background-color: #fff;
}
.pricing_star .star {
  position: absolute;
  top: -10px;
  right: 24px;
  z-index: 1;
  background-color: #fff;
  text-align: center;
  padding: 10px;
  border-radius: 8px;
}

.pricing-item {
  transition: all .3s ease;
}

.pricing-selected {
  transform: scale(1.08);
  border: 2px solid blue;
}

/* Contacts */ 
.contacts {
  background: linear-gradient(90deg, #c14742 38.81%, rgba(0, 0, 0, 0) 100%, rgba(112, 41, 38, 0.578348) 100%), url('assets/images/contact.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  color: #fff;
}
.contacts p {
  color: #f1dddd;
}


/* Footer */
footer section:first-child a {
  color: #333333;
}
footer section:first-child h5 + p,
footer section:first-child h5 + div ul li {
  margin-bottom: .5rem;
}
footer section:first-child h5 + div ul li:last-child,
footer section:first-child h5 + ul li:last-child {
  margin-bottom: 0;
}
footer section:first-child #customForm {
  margin-bottom: 1.5rem;
}
footer section:first-child form {
  display: flex;
}
footer section:first-child #customForm input[type=email]  {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
footer section:first-child .gform_body + div {
  margin: 0;
}
footer section:first-child #customForm  input[type=submit] {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
footer section:first-child .footer-social p {
	font-size: 0.625rem;
	font-weight: 600;
	font-style: italic;
}
footer section:first-child .blog-icons {
  padding-top: 24px;
  border-top: 1px solid #eee;
}
footer section:last-child {
  background-color: var(--color-primary);
  padding: 1rem 0;
  color: #fff;
}
footer section:last-child ul li  {
  margin-bottom: .5rem;
}
footer section:last-child ul li:last-child  {
  margin-bottom: 0;
}
footer section:last-child a, 
footer section:last-child .menu-item a, 
footer section:last-child .current-menu-item a:hover {
  color: #fff !important;
}
 
footer h5 {
	margin-bottom: 1rem;
}

/*  */
.progress-container {
  height: 8px;
  background-color: #C14742;
}

/**
 * 2.0 Media Queries
 * ----------------------------------------------------------------------------
 */

/* WordPress Media Queries */

/* X-Small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
}

/* Small devices (landscape phones, 576px, up to 768px) */
@media (min-width: 576px) and (max-width: 767.98px) {
}

@media (max-width: 600.98px) {
}

@media (min-width: 601px) and (max-width: 782.98px) {
}

@media (min-width: 783px) {
}

/* Large devices (desktops, 768px,) */
@media (min-width: 768px)  {
  /* Footer */
  footer section:last-child ul li {
    position: relative;
    padding-left: 1rem;
    margin-bottom: 0;
  }
  footer section:last-child ul li:first-child {
    padding-left: 0;
  }
  footer section:last-child ul li:first-child::before{
    content: none;
  }
  footer section:last-child ul li::before{
    content: '|';
    position: absolute;
    top: 0;
    left: 6px;
  }
} 

/* Medium devices (tablets, 768px, up to 992px) */
@media (min-width: 768px) and (max-width: 991.98px) {
}

/* Large devices (desktops, 992px,) */
@media (min-width: 992px)  {
  h1 {
    font-size: 3rem;
  }
  h2 {
    font-size: 2.5rem;
  }
  h3 {
    font-size: 2rem;
  }
  h4 {
    font-size: 1.5rem;
  }
  
  /* Header */
  .menu-navigation-menu-container {
    margin: 0 auto;
  }
	nav .navbar-nav .menu-item {
		padding: 1rem 0;
	}
  nav .navbar-nav .menu-item a {
    margin: 0 1.25rem 0 .875rem
  }
  nav .navbar-nav .menu-item .sub-menu .menu-item  {
    padding: 0;
  }
  nav .navbar-nav .menu-item .sub-menu .menu-item a {
    margin: 0;
  }
  nav .navbar-nav .menu-item .sub-menu {
    background-color: #fff;
    position: absolute;
    top: 100%;   
    left: 0;
    z-index: 1000;
    width: 250px;
    border-radius: 8px;
    box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.05);
  }
  nav .navbar-nav .menu-item-has-children::before  {
    top: 50%; 
    transform: translateY(-50%);
  } 
  nav .navbar-nav  .menu-item-has-children:hover::before {
    transform: translateY(-50%) rotate(-180deg); 
  } 
  
  /* Content */
  .content_sticky {
    position: sticky;
    top: 32px;
  }

  /* Form */
  #main-form .item-form {
   padding: 4rem 2.5rem 2.5rem;
  }
  
  /* Post */
  .post-content-container {
    padding-top: 2.5rem;
  }

 
}

/* Large devices (desktops, 992px, up to 1200px) */
@media (min-width: 992px) and (max-width: 1199.98px) {
}

/* Large devices (desktops, 1200px,) */
@media (min-width: 1200px)  {
 
}

/* X-Large devices (large desktops, 1200px, up to 1400px) */
@media (min-width: 1200px) and (max-width: 1399.98px) {
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
}
