/* 
Theme Name: Pixel Bee Agency
Theme URI: https://pixel-bee.com
Description: Pixel Bee Agency Theme
Author: Pixel Bee Agency Team
Author URI: https://pixel-bee.com/
Template: hello-elementor
Version: 2.1
*/
.me-6{margin-right:5rem}
.section-bg .container
{
    max-width: 1240px;
}
.svg-container svg
{
    width:100%;
}
.palce-item:hover
{
	fill:#1D2127;
}
.section-bg{
background-image: url('./img/bg.png');
background-size: cover;
color: #fff;
height: 95vh;
padding: 4rem 0;
	position:relative;
}
.section-title h1
{
font-size: 41px;
font-weight:300;
}
.section-title p
{
font-size:12px;
font-weight:normal;
line-height: 30px;
}
.nav-pills .nav-link
{
text-align: left;
border:0px;
border-bottom: 1px solid white!important;
border-radius: 0px!important;
color: #fff;
font-size:22px;
font-weight: 200;
padding:20px 0 6px 0 ;
}
.nav-pills .nav-link
{
	transition: font-weight 0.3s ease;
}
.mb-3 p
{
	font-weight:200;
}
.nav-pills .nav-link:hover
{
	background-color: transparent!important; 
	font-weight: bold!important; 
	border:0px;
}

.nav-pills .nav-link.active
{
	background-color: transparent!important; 
	font-weight: 900!important; 
	border:0px;
}
.learn-more
{
    background-color: #2C9B51!important; 
color: #fff;
border: none;
cursor: pointer;
border-radius: 50px;
font-size: 0.875rem;
padding: 11px 30px;
text-align: center;
display: inline-block;
text-decoration: none!important; 
}

.learn-more:hover {
background-color: #218838!important; 
}

 /* Active region styling */
.active-region {
	stroke: #fff;
	stroke-width: 2;	
}

 /* Active region styling map 2 */
.active-regions {
    stroke: #2C9B51;
    stroke-width: 1;
}
#bishah,#alwajh,#tabuk,#alula,#jeddah,#aljubil,#riyadh,#region1,#region2,#region3,#region4,#region5{ cursor: pointer;}


/* button style*/
.btn-outline-primary
{
color: #fff !important;
border-color: #fff !important;
border-radius: 50px !important;
font-size:14px !important;
padding: 10px 24px !important;
	transition: background-color 0.3s ease; /* Smooth transition for font weight */
}
:not(.btn-check)+.btn:active, .btn-outline-primary:hover
{
background-color: #FF9900!important;
border-color:#FF9900 !important;
}

.detail-info {
    display: none; 
}
.detail-info.active {
    display: block; 
}
.info-box h4 ,.detail-info h4
{
	font-size:20px;
}
 .grid-container {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
    }

    .row1 {
      grid-column: span 2;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
    }

    .row2 {
      grid-column: span 2;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
    }

    .row3 {
      grid-column: span 2;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
    }

    .row3-0 {
      display: grid;
      grid-template-columns: repeat(1, 1fr);
      gap: 10px;
    }

    .row4 {
      grid-column: span 3;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
    }

    .row4-0 {
      display: grid;
      grid-template-columns: repeat(1, 1fr);
      gap: 10px;
    }

    .grid-item {
      position: relative;
      overflow: hidden;
      border-radius: 15px;
      text-align: center;
      color: white;
      font-weight: bold;
      background-color: #333;
    }

    .grid-item img {
      width: 100%;
      height: 100%!important;
      object-fit: cover;
      opacity: 0.7;
    }

    .overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      display: flex;
      text-align: left;
      justify-content: start;
      background-color: rgb(0 0 0 / 13%);
      padding: 10px;
      font-size: 10px;
        flex-direction: column;
        transition: background-color 0.3s ease; /* Smooth transition */
		cursor:pointer;
    }
    .grid-item.active .overlay {
    background-color: rgba(0, 0, 0, 0); /* Change to transparent when active */
}
    .overlay h5
    {
       font-size: 10px;
    padding-top: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    }
    .overlay strong
    {
       font-weight:500;
    }
    /* Responsive adjustments */
    @media (max-width: 768px) {
      .grid-container {
        display: flex;
        flex-direction: column;
      }

      .row1,
      .row2,
      .row3,
      .row4 {
        grid-template-columns: 1fr;
      }
    }
    .padding-right
    {
        padding-right:10px!important;
    }
    .mrg-bottom
    {
      margin-bottom:10px!important;  
    }
    .grid-item.active .overlay {
      background-color: rgba(0, 0, 0, 0);
    }

    .img-1 {
      height: 110px;
    }

    .img-2 {
      height: 110px;
    }

    .img-3 {
      height: 110px;
    }

    .img-4 {
      height: 110px;
    }

    .img-5 {
      height: 140px;
    }

    .img-6 {
      height: 65px;
    }

    .img-7 {
      height: 65px;
    }

    .img-8 {
      height: 135px;
    }

    .img-9 {
      height: 135px;
    }

    .img-10 {
      height: 61px;
    }

    .img-11 {
      height: 61px;
    }
    .last-col:first-child
    {
        margin-bottom:10px;
    }
   /* #detail-container {
    border-radius: 5px;
    background: transparent;*/
}
.detail-info {
    animation: fadeIn 0.3s ease-in-out;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.homeHeroSlide .container
{
	display:flex;
	align-items: center;
	max-width: 1240px;
}
.slick-dotted.slick-slider
{
	margin-bottom:0px!important;
}
@media only screen and (min-width: 1800px) {
	.slick-next {
        right: 18% !important;
    }
	.slick-dots {
        bottom: 20px;
        text-align: right;
        width:85vw!important;
    }
	 .homeHeroSlide .container::after
        {
            width: 85%!important;
        }
}
@media only screen and (min-width: 2000px) {
    .slick-next {
        right: 26% !important;
    }
	.slick-dots
	{
		width: 75vw !important;
	}
}
.elementor-sticky--active{z-index:9999!important}

/*me*/
.active-regions {
    stroke: #FF9900!important;
    stroke-width: 1;
}
.homeHeroSlide {
padding-inline-end:20px!important;
	padding-inline-start:20px!important;
}
.slick-next {
    right: 5%!important;
}
.animated-item{
	width: 100%!important;
}
.slick-dots{
	    width: 98%!important;
}
.slick-dots li{
	    margin: 0 1px!important;
}