*{
    
}
html {
    padding:0 0 0 0;
    margin: 0 0 0 0;
}
body {
    padding:0 0 0 0;
    margin:0 0 0 0; 
    background-color:#0e304c;
    font-family: "cairo", sans-serif !important;
    font-weight: 400 !important;
    font-style: normal !important;
}
.navbar-inverse {
    background-color: transparent !important;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19) !important;
    border:none !important;
    margin-bottom:0px !important;
}

.active {
    color:#94D351;
}
#logo{
    max-height:100%;
    width:auto;
}
.navbar-brand{
    height:80px !important;
    padding: 0px 0px !important;
}

footer {
    box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.2), 0 4px 8px 0 rgba(0, 0, 0, 0.19) ;
    width:100% !important;
    background-color:#0e304c;
    color:white;
}
.sectionfoot {
    width:90%;
    margin-left:5%;
}
.navbar-nav>li>a {
    line-height:50px !important;
    color:#0e304c !important;
    background-color:white !important;
}
.navbar-nav>li>p {
    line-height:50px !important;
    color:#0e304c !important;
    background-color:white !important;
    padding-top: 15px;
    padding-bottom: 15px;
    margin:0px 0px;
}
.navbar-nav>li>a:hover {
    color:#94D351 !important;
}

footer .nav>li>a {
    color:white !important;
}
footer .nav>li>a:hover {
    color:#94D351 !important;
}
footer .nav>li>a:focus, footer .nav>li>a:hover {
    background-color:transparent !important;
}
#whoWeAre {
    width:90%;
    margin-left:5%;
    text-align:center;
}
#column_1 {
   background: linear-gradient(to right, #0e304c, #3b8ea5);
   transition:width 2s, transform 2s;
   height:300px;
    color: white;
    text-align: center;
}

#column_2 {
    background: linear-gradient(to right, #94d351, #c1e88c);
    transition:width 2s, transform 2s;
    height:300px;
    color: white;
    text-align: center;
}
#column_3 {
    background: linear-gradient(to right, #545454, #a6a6a6);

    transition:width 2s, transform 2s;
    height:300px;

    color: white;
    text-align: center;
}

.container {
    width:100% !important;
}
.move {
    width:80%;
    text-align:horizontal;
}

.btn-primary {
    background-color:#94D351 !important;
    border-color:#659432 !important;
}
.welcome_msg {
    width:90%;
    padding-left:5px;
    padding-top:5px;
    text-align:center;
    background-color:white;
    color:#0e304c;
    border-right:dashed thin;
    border-right-width:80%;
}
h4 {
    font-family: "cairo", sans-serif !important;
    font-style: normal !important;
    font-weight:bold;
}
.product_section {
    background-color:#0e304c;
    width:100%;
    color:white;
    text-align:center;
    font-weight:600px;
}
.dropdown:hover .dropdown-menu {
    display: block;
}
#home_dom_select {
    background-color:#0e304c;
}
.form-control, .dombut {
    height:38px;
}
.glyphicon-shopping-cart {
    color:#0e304c;
}
.modal-header {
    background-color:#0e304c;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    color:white;
}

.card_div{
    width:94%;
    height:320px;
    padding:3%,3%;
    border-radius:5px;
    background-color:white;
    border-width:thin;
    border-color:#94D351;
    border-style:solid;
    display:inline-block;
    transition: transform .2s; /* Animation */
    
}
#our_services {
    width:100%;
    height:650px;
    background-image:url('https://www.ambitiodev.co.za/Images/chevron_blue.png');
    background-size:100%,100%;
    background-repeat:no-repeat;
}
.center_card {
    text-align:center;
}   
.card_div p {
    padding:5px 5px;
}

#our_services div.container{
    padding-top:40px;
}
.card_div img {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19) !important;
}
.card_div:hover {
  transform: scale(1.08); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}
.dropdown-menu {
    border-radius:5px !important;
}
.popup {
  position: fixed;
  top: 20%;
  right: -300px; /* Initially off-screen */
  width: 300px;
  height: auto;
  border: 2px solid white;
  color:white;
  font-weight: bold;
  border-radius:10px;
  padding: 5px;
  transition: right 0.5s ease-in-out; /* Smooth slide animation */
  z-index: 1000; /* Ensure it's on top */
  text-align:center;
}

.popup.show {
  right: 0; /* Slide in */
}

.close-btn1 {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
}
* {box-sizing: border-box}

/* Style the tab */
.tab {
  float: left;
  border: 1px solid #FFF;
  background-color: #0e304c;
  width: 20%;
  height: 800px;
  margin-left:5%;
  margin-top: 20px;
    border-radius: 10px;
}

/* Style the buttons inside the tab */
.tab button {
  display: block;
  background-color: inherit;
  color: white;
  padding: 0px 8px;
  width: 90%;
  margin-left:10%;
  border: none;
  outline: none;
  text-align: left;
  cursor: pointer;
  transition: 0.3s;
  font-size: 17px;

}

/* Change background color of buttons on hover */
.tab button:hover {
  color: #94D351;
}

/* Create an active/current "tab button" class */
.tab button.active {
  font-weight:bold;
}

/* Style the tab content */
.tabcontent {
  float: left;
  padding: 0px 12px;
  border: 1px solid #ccc;
  width: 70%;
  border-left: none;
  height: 800px;
  background-color:white;
    margin-top: 20px;
    border-radius: 10px;
}

.pill {
    background: #0e304c;
    border-radius: 20px;
    color: white;
    display: inline-block;
    font-weight: bold;
    line-height: 1;
    padding: 4px 16px;
    text-transform: uppercase;
    transition: color 300ms, background-color 300ms, box-shadow 300ms;
}
.address_block {
    background-color:#f4f4f4;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
}

.col_design {
    min-height: 100% !important;
    display: flex !important;
    align-items: center !important;
}
.address_link {
    color:#0e304c;
    text-decoration:none;
}
.address_link:hover {
    color:#94D351;
    text-decoration:none;
}
.gen_button {
    background-color:#0e304c !important;
    color:white;
}
.gen_button:hover {
    color:#94D351 !important;
}
/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 28px;
  float:right;
  vertical-align:middle;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #94D351;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(18px);
  -ms-transform: translateX(18px);
  transform: translateX(18px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}
.contact_Pref {
    width:80%;
}
.contact_Pref p {
    vertical-align:middle;
}
.hostedDiv {
    width:100%;
    background-color:#f4f4f4;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    margin-bottom:10px;
    padding:20px 20px;
}
.changepackCol {
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        margin:2px 2px;
        width:49.5% !important;
}
.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
/* Show main dropdown on hover */
.navbar-nav > li.dropdown:hover > .dropdown-menu {
  display: block;
}

/* Submenu container */
.dropdown-submenu {
  position: relative;
}

/* Hide submenus by default */
.dropdown-submenu > .submenu {
  display: none !important;
  position: absolute;
  top: 0;
  left: 100%;
  margin-top: -1px;
  z-index: 1000;
  min-width: 180px;
  background-color: #fff;
  border: 1px solid #ccc;
}

/* Show submenu on hover */
.dropdown-submenu:hover > .submenu {
  display: block !important;
}

/* Optional: submenu arrow alignment */
.dropdown-submenu > a {
  position: relative;
  padding-right: 20px;
}

.dropdown-submenu > a .glyphicon-play {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}

/* Optional: submenu item spacing */
.submenu li a {
  white-space: nowrap;
  padding: 8px 15px;
  color: #333;
}

.product-image  {
    height: 200px;
    width: 100%;
    object-fit: contain;
}
.product-card {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 15px;
    margin-bottom: 20px;
    height: 310px;
}
.cartsum {
  position: fixed;
  top: 10%;
  right: -300px; /* Initially off-screen */
  width: 300px;
  height: auto;
  border: 2px solid white;
  color:white;
  font-weight: bold;
  border-radius:10px;
  padding: 5px;
  transition: right 0.5s ease-in-out; /* Smooth slide animation */
  z-index: 1000; /* Ensure it's on top */
  text-align:center;
  background-color:#0e304c;
}
.cartsum.show {
  right: 0; /* Slide in */
}
.ItemPrice {
    font-weight:bold;
    color:#94D351;
}
.cartRow img {
    width:100%;
    height:100%;
    object-fit:contain;
}
.cartRow {
    border-radius:10px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
}
.cartnav {
    display:hidden;
}
.shop_table_row {
    height:150px;
    border-collapse: separate;
    border-spacing: 0 10px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
}
.red_button {
    background-image: linear-gradient(rgb(253, 0, 0) 0px, rgb(126, 0, 0) 90%, rgb(190, 0, 0) 100%) !important;
    color:white !important;
}
.red-link {
    color: rgb(126, 0, 0);
}
.red-link:hover {
    color:rgb(190, 0, 0);
}