/*
Theme Name: Upay
Text Domain: Upay
Version: 1.0
Description: Upay Official
Tags: Upay, responsive
Author: Pradeep Kumara
Author URI: https://www.facebook.com/pradiyo

*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;800&display=swap');


.upay-nav .nav-item a {
  color: #fff;
/*   margin: 0 33px; */
}
.main_pg_text_color {
    color: #253784;
}
.main_pg_bg_color {
    background-color: #253784;
}
.theme-text-orange{
    color: #E85A1A;
}
.theme-bg-orange{
    background-color: #E85A1A;
}
.theme-text-black{
color: #000000;
}
.theme-bg-light-gray{
	background-color: #e3e9ed;
}
.theme-bg-dark-gray-gradient{
	background: rgb(222,222,222);
	background: radial-gradient(circle, rgba(222,222,222,1) 9%, rgba(183,183,183,1) 30%, rgba(183,183,183,1) 80%);
}
.header-m-warap-1{
  background-image: url('assets/images/Banner-home.jpg');
}

.upay-nav .nav-link {
  color: #fff;
  /*margin: 0 33px;*/
}
.header-nav{
	width: 100%;
    display: flex;
    justify-content: space-between;
}


ul li a {
  font-size: 14px;
}

/*Dilshan */
.ul-div {
  width: 100%
}

.nav-ul {
  display: flex;
  justify-content: space-between;
}

.service-div {
  border-right: 2.5px solid #E85A1A;
}

.box-heading-blue {
  font-size: 35px;
  font-weight: 800;
}
.cs-text-justify{
	text-align: justify;
}
.cs-ml-20{
	margin-left: 20%;
}
.cs-ml-mi-14{
	    margin-left: -14%;
}
.cs-pl-10{
	padding-left:10%;
}
.nav-item .dropdown-menu,.nav-item .dropdown-menu:hover{
	    background: transparent;
}
	.font-Montserrat {
		font-family: 'Montserrat', sans-serif;	
	}
	.font-Poppins{
		font-family: 'Poppins', sans-serif;
	}
	.font-bold{
		font-weight:800;
	}
	.font-semi-bold{
		font-weight:500;
	}
	.font-regular{
		font-weight:400;
	}
	
	 .outerdiv
    {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .innerdiv
    {
        transform: scale(0.9);
        margin: 1rem;
        display: grid;
        grid-gap: 1.5rem;
/*         grid-template-rows: repeat(2,22rem); */
        grid-template-columns: repeat(4,17rem);
    }
    .eachdiv
    {
        padding: 1rem 2rem;
        border-radius: 0.8rem;
        box-shadow: 5px 5px 20px #6d6b6b6b;
        color: white;
    }
    .div1
    {
        background: #E86026;
        grid-column: 1/3;
        grid-row: 1/2;
        background-repeat: no-repeat;
    }
    .div2
    {
        background:#E86026;
        grid-column: 3/4;
        grid-row: 1/2;
    }
    .div3
    {
        background: #E86026;
        grid-column: 4/5;
        /*grid-row: 1/3;*/
        color: white;
    }

    .userdetails
    {
        display: flex;
    }
    .imgbox
    {
        margin-right: 1rem;
    }
    .imgbox img
    {
        border-radius: 50%;
        width: 3rem;
        border: 2px solid #cec5c5;
    }
    .detbox
    {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .detbox p
    {
        margin: 0;
    }
    .detbox .name
    {
        color: hsl(0, 0%, 81%);
        font-size: 0.9rem;
        margin-bottom: 0.1rem;
		font-weight:600;
    }
    .detbox .name.dark
    {
        color: #49505A;
    }
    .detbox .designation
    {
        color: hsl(0, 0%, 81%);
        opacity: 50%;
        font-size: 0.8rem;
    }
    .detbox .designation.dark
    {
        color: #49505A;
    }
    .review h4
    {
        font-size: 1.4rem;
        color: #F3DEFF;
        font-weight: 600;
        line-height: 1.5;
        margin-bottom: 0.8rem;
    }
    
    .review p
    {
        font-size: 0.95rem;
        color: white;
        font-weight: 400;
        opacity: 90%;
        line-height: 1.5;
    }
    
    .attribution
    {
        font-size: 1rem;
        line-height: 1.5;
        position: fixed;
        bottom: 1rem;
        right: 1rem;
        text-align: right;
    }
    .attribution a
    {
        text-decoration: none;
    }

    .card-style {
     /* CSS styles for the card */
     background-color: #ffffff;
     padding: 20px;
     border-radius: 10px;
     box-shadow: 2px 2px 10px #ccc;
   }


    @media only screen and (max-width: 1000px)
    {
        .innerdiv
        {
            transform: scale(0.7);
        }
    }
    @media only screen and (max-width: 800px)
    {
        .innerdiv
        {
            transform: scale(0.6);
        }
    }
    @media only screen and (max-width: 600px)
    {
        .div1 {
/*             background-position-x: 10rem; */
        }
        .innerdiv
        {
            display: flex;
            flex-direction: column;
            transform: scale(1);
            margin: 2rem;
            margin-bottom: 5rem;
        }
        .attribution
        {
            position: relative;
        }
    }
	
@media only screen and (max-width: 768px) {
  	.cs-ml-20{
		margin-left: unset;
	}
	.cs-ml-mi-14{
	    margin-left: unset;
	}
	.cs-mob-width-50{
		width:50%;
		margin-bottom: 11px;
	}
}