/* your styles go here */
h2{font-family:"Zalando Sans",Arial,sans-serif; font-weight:700;margin-bottom:3rem}
h3, .h3{font-family:"Ephesis", cursive;;font-size:2.5rem;color:#06abc1}
.h4new{font-family:"Ephesis", cursive;;font-size:1.5rem;margin-bottom:2.5rem!important}
h4{font-family:Roboto,Arial,sans-serif;font-weight:600;color:#111;font-size:1.3rem;letter-spacing:-1px;}
.h5{font-family:Roboto,Arial,sans-serif;font-weight:800;font-size:1.25rem;color:rgba(0,0,0,0.65);}
body{font-family:"Inter",Arial,sans-serif;font-weight:400;font-size:0.925rem;color:rgba(0,0,0,0.65);}
.about-item-content a, a:hover{color:black;font-weight:800!important;text-decoration:none;}
.strong{font-weight:900!important}
.fa-bars{color:#333}
li{margin-bottom:1.5rem}
p{margin-bottom:1rem}
@media (max-width:600px){
    container img{float:none;margin-bottom:3rem}
    body{font-family:"Inter",Arial,sans-serif;font-weight:300;font-size:0.925rem;color:rgba(0,0,0,0.65);}
    
}
/* initial states */
.logo-light {display: none;}
.logo-dark {display: block;}
.navbar{padding:0rem 1rem!important}

@media screen and (max-width:562px){
    .logo-dark{width:150px}
    .logo-light{width:150px}
    
}
  /* hover states */
.navbar:hover .logo-light {display: none;}
.navbar:hover .logo-dark {display: block;}
.navbar-dark .navbar-nav .nav-link{color:#333;font-weight:600!important}
.navbar-dark .navbar-icon-link{color:#333}
.navbar-dark .navbar-icon-link-badge{background-color:#06abc1!important;color:#fff!important}

.logos img{width:70%;margin:15% 0}
.techstack img{width:70%;margin:5% 0}

.bg-light{background-color:whitesmoke;padding:3%}
.bg-med{background-color:lightgray;padding:3%} 
.bg-gray-100{background-color:#f1f1f1 !important}
.bg-teal-100{background: rgb(6,171,193);
background: linear-gradient(133deg, rgba(6,171,193,1) 0%, rgba(20,195,196,1) 67%, rgba(6,171,193,1) 100%);}
.bg-yellow-100{background: #ffc107;
background: linear-gradient(133deg, #ffc107 0%, #ffc107c9 67%, #ffc107 100%);}
.bg-blue-100{background-color:#210a80 !important}

.btn{letter-spacing:0.03em;font-size:0.875rem!important;border-radius:4px!important}
.btn-sm{font-size:0.875rem!important}
.btn-teal{background:#000!important;color:white}
.btn-yellow{background:#ffc107!important;color:black;margin-top:20px}
.btn-black,btn-black:hover{color:white!important;background:black}

.card-header{text-transform:uppercase!important}
.card-header a{color:black!important}
.proddesc{min-height:3rem}
.shadow{box-shadow: 1px 1px 5px lightgrey;}
.hero-heading{letter-spacing:0.01em!important}
.col-md-4 img{width:100%!important}

@media screen and (max-width:562px){
    h5{font-size:0.75rem}
    h2{font-size:1.7rem}
    .lead{font-size:0.925rem;}
    h3, .h3{font-family:"Ephesis",cursive;font-size:2rem;color:#06abc1;padding:0.75rem 0}
    .strong{font-weight:900!important}
}

.banner-image{
    background-image:url('https://storage.googleapis.com/shopit-client-b2a1e007db456.appspot.com/c9c4f19798b09405ffafa7afcc86f070.png');
    background-color:rgba(128, 128, 128, 0);
    background-repeat:no-repeat;
    background-size:contain;
    background-position:115% 50%;
    position:relative;
    filter:contrast(1.3);
}
.circle-slider-bg{padding-right:0px!important;background-size:25%}

@media screen and (max-width:562px){
/*force my image botom right to edge */
.banner-image{
    background-image:url('https://storage.googleapis.com/shopit-client-b2a1e007db456.appspot.com/c9c4f19798b09405ffafa7afcc86f070.png');
    background-color:rgba(128, 128, 128, 0);
    background-repeat:no-repeat;
    background-size:70%;
    background-position:160% 100%;
    position:relative;
    filter:contrast(1.3);
    }
    /* nudge my image right no margin right */
.circle-slider-bg{padding-right:0px!important;background-size:40%}
}
  
.angle{
     -webkit-transform: rotate(-12deg);
     -moz-transform: rotate(-12deg);
     -ms-transform: rotate(-12deg);
     -o-transform: rotate(-12deg);
     filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
     left: 20%;
     top: 10px;
     position: absolute;
 }
 
 @media screen and (max-width:562px){
.angle{
     -webkit-transform: rotate(-7deg);
     -moz-transform: rotate(-7deg);
     -ms-transform: rotate(-7deg);
     -o-transform: rotate(-7deg);
     filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
     left: 15px;
     top: 10px;
     position: relative;
     margin-bottom:50px;
 }
 .angle h3{font-size:2rem!important}
 }
.about-item-block {
display: flex;
align-items: top;
border: 1px solid rgba(0, 0, 0, 0.04);
border-radius: 5px;
padding: 7% 0% 5% 2%;
margin-bottom: 20px;
background: #fff;
box-shadow: 1px 1px 20px lightgray;
height:100%;
}
.about-item-block:hover{background:#06abc150!important}
about-item-block .about-item-icon img {width: 30px;}
.img-fluid {max-width: 100%;height: auto;margin-bottom:5%}
.fas, .far{font-size:1rem;}

.avatar {width:100px;border-radius:50%}
.quotes{font-size:1.2rem!important;color:#333;font-family:'PT Serif',serif;}
.quotename{font-size:0.925rem;color:#000;font-weight:800;margin-bottom:5%}
.carousel-item{height:225px;min-height:175px}
.carousel-indicators {color:black!important;top:225px!important}

@media screen and (max-width:562px){
    .avatar {width:70px;border-radius:50%}
    .quotes{font-size:0.865rem!important;color:#333;font-family:'PT Serif',serif;}
    .quotename{font-size:0.75rem;color:#000;font-weight:800;margin-bottom:5%}
    .carousel-item{height:250px;min-height:250px}
    .carousel-indicators {color:black!important;top:250px!important}
}

/* Client Work template page CSS https://demo.ayroui.com/templates/business-template/*/
.about-five {background-color: var(--light-3);padding-top: 60px;padding-bottom:60px;}
.about-image-five .shape {position: absolute;left: 30px;top: -30px;z-index: -1;}
.about-image-five {position: relative;z-index: 2;border: 20px white solid;background: white;border-radius: 9px;padding:20px}
.about-image-five img{width:80%!important}
.about-five-content {padding-left: 0px;}
.about-five-content .small-title {position: relative;margin-top:2rem}
.text-lg {font-size: 1.15em;line-height: 1.5;}
.about-five-content .main-title {margin-top: 20px;margin-bottom:40px;}
.fw-bold {font-weight: 700 !important;}
.about-five-content .about-five-tab nav {border: none;background-color: #efefef;padding: 15px;border-radius: 5px;}
.about-five-content .about-five-tab nav .nav-tabs {border: none;}
.nav-tabs {border-bottom: 1px solid #dee2e6;}
.about-five-content .about-five-tab nav button.active {background-color: #06abc1;color: white;}
.nav {display: flex;flex-wrap: wrap;padding-left: 0;margin-bottom: 0;list-style: none;}
.about-five-content .about-five-tab nav .nav-tabs {border: none;}
.nav-tabs {border-bottom: 1px solid #dee2e6;}
.about-five-content .about-five-tab nav button:last-child {margin-right: 0;}
.about-five-content .about-five-tab nav button {border: none;color: #333;font-weight: 600;padding: 0;margin-right: 20px;position: relative;background-color: #fff;padding: 10px 18px;border-radius: 4px;text-transform: capitalize;}

/* new snippet tabs styling */
/* Style the tab */
.tab {  overflow: hidden;  background-color: #06abc1;}

/* Style the buttons that are used to open the tab content */
.tab button {float: left;border-radius: 8px;outline: none;cursor: pointer;padding: 14px 16px;transition: 0.3s;background-color: white;margin: 15px 10px;border: none;}

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

/* Create an active/current tablink class */
.tab button.active {  background-color: #06abc1;color: white;border-radius: 8px;margin: 15px 10px;}

/* Style the tab content */
.tabcontent {  display: none;  padding: 25px 12px;  border-top: none; border:1px solid #ededed}

.btn-call{background:#06abc1;color:black;text-align:center;position: relative;margin-top:3%}
.btn-call a{color:white!important;}