/*
Theme Name: Twenty Twenty Child Theme
Author: Salam El-Banna
Author URI: https://salambanna.com
Description: Twenty Twenty Child Theme
Version: 2.22
Template: twentytwenty
Text Domain: twentytwenty-child
*/

#primary {
    max-width: 420px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.bg-primary {
    background-color: #3978d3 !important;
}

.color-primary {
    color: #3978d3 !important;
}

.color-green {
    color: #18aa18 !important;
}

.wms-btn-primary {
	width: 200px !important;
    border-width: 2px !important;
    font-weight: 500 !important;
    border-radius: 30px !important;
    padding: 8px 18px !important;
    color: #fff !important;
    border-color: #3978d3 !important;
    background: #3978d3 !important;
}

.wms-btn-primary:hover,
.wms-btn-primary:active {
    color: #fff !important;
    background: #3978d3 !important;
    border-color: #3978d3 !important;
}

.wms-btn-primary:disabled {
    color: #3978d3 !important;
    border-color: #3978d3 !important;
}

.form-label {
    color: #3978d3 !important;
    margin-left: 3px !important;
}

.wms-form-input {
    height: 48px !important;
	border-width: 2px !important;
    border-radius: 30px !important;
    padding: 10px 18px !important;
    color: #3978d3 !important;
    border-color: #3978d3 !important;
}
.wms-form-input::placeholder {
  color: #3978d3;
  opacity: 1; /* Firefox */
}
.wms-form-input:-ms-input-placeholder { /* Internet Explorer 10-11 */
 color: #3978d3;
}
.wms-form-input::-ms-input-placeholder { /* Microsoft Edge */
 color: #3978d3;
}

.offcanvas-title {
    color: #3978d3 !important;
}

.offcanvas-body .nav-link {
    color: #3978d3 !important;
}

.text-link {
    color: #3978d3 !important;
    text-decoration: none;
}

.embed-responsive-item {
    min-height: 200px;
    border-radius: 20px;
}

.video-tips-container {
    max-width: 500px;
    margin: auto;
    padding-bottom: 20px;
}

.wms-radio-container {
  position: relative;
  padding-left: 25px;
  cursor: pointer;
  font-size: 16px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.wms-radio-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.wms-radio-checkmark {
  position: absolute;
  top: 3px;
  left: 2px;
  height: 18px;
  width: 18px;
  background-color: #eee;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.wms-radio-container:hover input ~ .wms-radio-checkmark {
  background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.wms-radio-container input:checked ~ .wms-radio-checkmark {
  background-color: #2196F3;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.wms-radio-checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.wms-radio-container input:checked ~ .wms-radio-checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.wms-radio-container .wms-radio-checkmark:after {
 	top: 3px;
	left: 3px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: white;
}

.side-banner {
    position: relative;
}

.side-banner-title {
    position: absolute;
    transform: rotate(-90deg);
    margin-left: -25px;
    top: 46%;
    font-size: 45px;
    color: #fff;
}

.side-banner-arrow {
    position: absolute;
    margin-left: 15px;
}

.side-banner-image {
    max-height: 340px;
    max-width: 100%;
}

    .wms-img-button-outline {
        width: 240px;
        border-width: 3px !important;
        border-radius: 15px !important;
        padding: 20px !important;
        color: #3978d3 !important;
        border-color: #3978d3 !important;
        background: #fff !important;
    }
    .wms-img-button-outline img{
        width: 40px;
        float: left;
    }