@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@200;300;400;500;700;800;900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@100;200;300;400;500;600;700&family=Tajawal:wght@200;300;400;500;700;800;900&display=swap');

*{
    padding: 0;
    margin: 0;
    direction: rtl;
    font-family: "IBM Plex Sans Arabic", serif;
}

:root {
    --Blue: #0066CC;
    --BlueHover: #0058BE;
    --white: #ffffff;
    --Black:#1D1D1F;
    --Gray:#F5F5F7;
    --BordarColor:#E9E9E9;
    --BorderHover:#D9D9D9;
    --TagColor:#FF2D55;
    --Seation1Color:#FFE9F3;
    --Section2Color:#E9F2FF;

}

h2{
    font-weight: 500;
    font-size: 34px;  
}

h5{
    font-weight: 400;
    font-size: 18px;  
}

h6{
    font-weight: 400;
    font-size: 14px; 
}


a{
    text-decoration: none;
}

p{
    margin-bottom: 0;
}

hr {
    border: none;
    width: 1312px;
    height: 1px;
    background-color: var(--BorderHover);
    margin: 20px 0;
}


body{
   /* display: grid;*/
    align-items: center;
    justify-content: center;
    width: 100%;
}

span{
    color: var(--Blue);
}

.fomosection{
    width: 100%;
    height:50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.fomo{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--white);
    align-items: center;
    padding: 11px 64px;
    gap: 10px;
}

#closeFomo{
    cursor: pointer;
}

.navbar-brand{
    width:437.33px;
}

.outlineBlack{
    width: 125px;
    height: 45px; 
    color: #1D1D1F;
    border: 1px solid #1D1D1F;
    border-radius: 8px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}


.outlineBlack:hover{
    width: 125px;
    height: 45px; 
    color: var(--white);
    background: var(--Black);
    border-radius: 8px;

}

nav{
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--white);
    

}

nav.a{
    color: var(--Black);
}

.bg-body-tertiary{
    background-color: var(--white);
}

.navbar {
    position: relative;
    padding: 0 24px;
    border-bottom: 1px solid #F5F5F7;
}


.tagandbtn{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.collapse.navbar-collapse {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: max-content; 
    
}

.dropdown-menu{
    text-align: right;
    direction: rtl;
}

.dropdown-menu[data-bs-popper]{
    left: auto;
}

.hero{
    background-color: var(--Gray);
    width: 100%;
    height: 700px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    text-align: center;
}

.herosection{
    display: grid;
    align-items: center;
    justify-content: center;
    position: absolute;
    width: 1161px;
    left: calc(50% - 1161px/2 + 0.5px);
    top: 250px;
    z-index: 2;
}

.secondary-hero-section{
    width: 100%;
    height:300px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url(../img/secondaryhero1.png);
    margin-bottom: 85px;
}

.secondary-hero-section h1{
    color: var(--white);
}


.secondary-hero-section2{
    width: 100%;
    height:300px;
    display: grid;
    align-items: center;
    justify-content: center;
    background-image: url(../img/secondaryhero2.png);
    margin-bottom: 85px;
}

.secondary-hero-section2 h1{
    color: var(--white);
    text-align: center;
    padding-top: 32px;
}


.filter{
    width: 805px;
    height: 70px;
    border-radius: 850px;
    background-color: var(--white);
    background-image: url(../img/Filter.png);
    background-size: cover;
    
}

.herosection1{
    text-align: center;
    gap: 42px;
}

.herosection1 h1{
    margin-top: 32px;
    margin-bottom: 12px;
}

.herosection3 img{
    width: 500px;
}

.herosection3{

    align-self: center; /* توسيط العنصر أفقيًا */
    margin-top: auto; /* يدفع العنصر إلى الأسفل */
    margin-bottom: 20px; /* إضافة هامش سفلي إن لزم الأمر */
    
}

/* sections */ 

.section1{
    margin-top: 85px;
    margin-bottom: 85px;
    display: grid;
    align-items: center;
    justify-self: center;
}

.section1 h2{
    text-align: center;
    font-weight: 400;
    font-size: 34px;

}

.categories{
    width: 1312px;
    display: flex;
    align-items: center;
    justify-content: space-between; 
    margin-top: 24px;
}

.categorysingle{

    display: grid;
    align-items: center;
    justify-content: center;
    width: 125px;
    height: 125px;
    border: 1px solid var(--BordarColor);
    border-radius: 8px;

}

.categorysingle p{
    font-weight: 500;
    color: var(--Black);
    text-align: center;
}

.icon{
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon .ph-laptop,.ph-presentation,.ph-google-photos-logo,.ph-read-cv-logo,.ph-books,.ph-instagram-logo,.ph-app-store-logo,.ph-device-mobile-camera{
    font-size: 38px;
}



/*section2*/


.section2{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 85px;
}

.servicesother{
    width: 1312px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.servicesother1{
    background-color: var(--Seation1Color);
    width: 639px;
    height: 393px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.servicesother1 p{
    width: 408px;
    font-size: 18px;
    color: var(--Black);
}

.servicesother1SECTION{
    display: grid;
    align-items: center;
    justify-content: center;
    width: 408px;
    height: 286px;
    position: absolute;
    right: 50px;
    top:20px;
}

.servicesother1 img{
    position: absolute;
    width: 304px;
    height: 304px;
    left: -8px;
    bottom: -42.72px;  
}

.servicesother2{
    background-color: var(--Section2Color);
    width: 639px;
    height: 393px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.servicesother2 p{
    width: 408px;
    font-size: 18px;
    color: var(--Black);
    z-index: 2;
}

.servicesother2 h1{
    font-weight: 500;
    width: 100%;
    font-size: 42px;
    color: var(--Black);
}

.servicesother2SECTION{
    display: grid;
    align-items: center;
    justify-content: center;
    height: 286px;
    position: absolute;
    right: 50px;
    top:20px;
}

.servicesother2 img{
    position: absolute;
    width: 304px;
    height: 304px;
    left: -10px;
    bottom: -15px;  
    
}

.BLUEbtn{
    width: 150px;
    height: 50px;
    background: var(--Blue);
    border-radius: 12px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 10px;
    gap: 10px;
    color: var(--white);
}

.BLUEbtn:hover{
    background: var(--BlueHover);
}

.BLACKbtn{
    width: 150px;
    height: 50px;
    background: var(--Black);
    border-radius: 12px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 10px;
    gap: 10px;
    color: var(--white);
}

.BLACKbtn:hover{
    background: #000;
}

.ph-arrow-up-left{
    font-size: 20px;
    color: var(--white);
}


/* section3 */

.section3{
    display: grid;
    align-items: center;
    justify-content: center;
    margin-bottom: 85px;

}

.section3-Header h2{
    margin-bottom: 12px;
    text-align: center;
}

.section3-Header h6{
    margin-bottom: 12px;
    text-align: center;
}

/*prodects-section*/

.prodects-section{
    display: grid;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 25.33px;
}


.blog-container{
    display: grid;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 25.33px; 
    
}



/* card style*/

.card{
    width: 310px;
    height: 403.78px;
    border-radius: 14.18px;
    border: 1px solid var(--BordarColor);
    display: flex;
    align-items: center;
}

.cardimg img{
    width: 310px;
    height: 207px;
    object-fit: cover;
    border-radius: 14.18px 14.18px 0px 0px;
}

.card-top{
    display: grid;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
}

.cardshare{
    border-radius: 500px;
    background-color: var(--white);
    width: 28.35PX;
    height: 28.35PX;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.cardshare:hover{
    background-color: var(--BlueHover);
}

.cardshare:hover .ph-share-fat{
    color: var(--white);
}


.ph-share-fat{
    font-size: 15px;
    color: var(--Black);
}

.cardtag1{
    width:auto;
    height: 28.35px;
    border-radius:28.35px;
    color: var(--white);
    background-color: var(--TagColor);
    display: flex;
    justify-content: center;
    align-items: center;
    padding-right: 8px;
    padding-left: 8px;

}

.cardtag1 p{
    font-size: 12px;
    color: var(--white);
    margin: 0;
}

.material{
    width:279.76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 2;
    position: absolute;
    left: 15.12px;
    top: 18.9px;
}

.card-Bottom{
    width: 279.76px;
    display: grid;
    align-items: center;
    justify-content: center;
}

.card-Bottom-title{
    width: 279.76px;
}

.card-Bottom-title h5{
    font-weight: 500;
}

.card-Bottom-title p {
    width: 250px;       
    white-space: nowrap;   
    overflow: hidden;     
    text-overflow: ellipsis;
    margin-bottom: 4px;
}


#cardtitle{
    font-weight: 500;
}


#carddescription{
    margin-bottom: 15px;
    font-size: 12px;
}

.card-Bottom-details{
    width: 279.76px;
    margin-top: 8px;
}


.card-Bottom-title hr{
    width:279.76px;
    margin: 0;
}

.card-Bottom-details hr{
    width:279.76px;
    margin-top: 8px;
}

.card-category{
    width: 279.76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.price,.type,.rate{
    width: 75px;
    justify-content: center;
    align-items: center;
    display: grid;
    width: auto;
}


#price,#type,#rate{
    font-weight: 500;
    font-size: 14px;
    color: var(--Black); 
    text-align: center;
}

.iconcard{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6.5px;
}


.card-dateandcta{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card-dateandcta .ph-arrow-up-left{
    color: var(--Blue);
    font-size: 20px;

}

.card-dateandcta a{
    color: var(--Blue);
    gap: 3px;
    display: flex;
    justify-content: center;
    align-items: center;
}


.card:hover{
    border: 1px solid var(--BorderHover);
}

.card:hover .card-dateandcta a{

    text-decoration: underline;
    
}

.section3-Bottom{
    width: 100%;
    height:70px;
    display: flex;
    align-items: center;
    justify-content: center;
}



/*plugin section */



.section4{

    display: grid;
    align-items: center;
    justify-content: center;
    margin-bottom: 85px; 

}

.section4 h2{
    margin-bottom: 24px;
    height: 50px;
    font-weight: 400;
    text-align: center;
}


.plugincard{
    width: 310px;
    height: 296.28px;
    border-radius: 17.22px;
    border: 1px solid var(--BordarColor);
    text-align: center;
    padding: 21px 21.5278px;
}

.plugincard-details img{
    width: 80px;
    height: 80px;
    border-radius: 175px;
    object-fit: cover;
    box-shadow: 0px 15.5px 34.4444px rgba(112, 144, 176, 0.12);
    margin-bottom: 12px;
}

.plugincard-details{
    display: grid;
    align-items: center;
    justify-content: center;
}

.plugincard-details p{
    width: 200px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-align: center;
}


.plugincard-CTA{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 16px;
    
}

.pluginsection{
    width: 1312px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 42px;
}

.deet123{
    display: flex;
    align-items: center;
    justify-content: center;
    object-fit: cover;
}



.deet123 img{
    object-fit: cover;
}



/* Testimonials Section  */

.carousel {
	width: 1312px;
    height: 401px;
	margin: 0 auto;
	padding-top: 50px;
    background-color: var(--Gray);
    border-radius: 12px;
    margin-bottom: 85px;
}
.carousel .carousel-item {
	color: #999;
	font-size: 14px;
	text-align: center;
	overflow: hidden;
	min-height: 340px;
}
.carousel .carousel-item a {
	color: #eb7245;
}
.carousel .img-box {
	width: 64px;
	height: 64px;
	margin: 0 auto;
	border-radius: 50%;
}
.carousel .img-box img {
	width: 100%;
	height: 100%;
	display: block;
	border-radius: 50%;
}
.carousel .testimonial {	
	padding: 30px 0 10px;
    font-size: 34px;
    font-family: "IBM Plex Sans Arabic", serif;
    text-align: center;
    color: var(--Black);
    
}
.carousel .overview {	
	text-align: center;
	padding-bottom: 5px;
}
.carousel .overview b {
	color: #333;
	font-size: 15px;
	text-transform: uppercase;
	display: block;	
	padding-bottom: 5px;
}

.carousel-control-prev, .carousel-control-next {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: #999;
	text-shadow: none;
	top: 4px;
}
.carousel-control-prev i, .carousel-control-next i {
	font-size: 20px;
	margin-right: 2px;
}
.carousel-control-prev {
	left: auto;
	right: 40px;
}
.carousel-control-next i {
	margin-right: -2px;
}
.carousel .carousel-indicators {
	bottom: 25px;
    list-style: none; /* إزالة أي ترقيم تلقائي */
}

.carousel-indicators li, .carousel-indicators li.active {
    text-indent: -9999px; /* إخفاء النص */
	width: 11px;
	height: 11px;
	margin: 1px 5px;
	border-radius: 50%;
    
}

.carousel-indicators li {	
	background: var(--white);
	border: none;
}
.carousel-indicators li.active {		
	background: var(--Blue);		
}


/*footer Section*/ 

.footer{
    width: 100%;
    height: 347px;
    background: var(--white);
    border-top: 1px solid var(--Gray);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 64px 0px 48px;
    gap: 64px;
}

.footerlogo{
    text-align: center;
    font-size:30px;
    font-weight: 500;
    font-family: "Tajawal", serif;
    margin-bottom:32px;
}

.footer-list span{
    color: var(--TagColor);
}

.footer-list{
    list-style-type: none;
    width: 455px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: center;
    padding-left: 0;
    font-size: 18px;
    font-weight: 400;
}

.footer-bottom{
    width: 1280px;
    height: 76px;
    padding-top: 0;
    border-top: 1px solid #EAECF0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.footer-bottom p{
    direction: ltr;
}

.footer-list a{
    color:var(--Black);
}


/*Newsletter*/

.Newsletter{
    display: flex;
    align-items: center;
    justify-content: center;
}

.newsletter-subscribe {
    color:#313437;
    background-color:#fff;
  }
  
  .newsletter-subscribe p {
    color:#7d8285;
    line-height:1.5;
  }
  
  .newsletter-subscribe h2 {
    font-size:24px;
    font-weight:bold;
    margin-bottom:25px;
    line-height:1.5;
    padding-top:0;
    margin-top:0;
    color:inherit;
  }
  
  .newsletter-subscribe .intro {
    font-size:16px;
    max-width:500px;
    margin:0 auto 25px;
  }
  
  .newsletter-subscribe .intro p {
    margin-bottom:35px;
  }
  
  .newsletter-subscribe form {
    display: flex;
    align-items: center;
    justify-content:center;
  }
  
  .newsletter-subscribe form .form-control {
    width: 276px;
    border:none;
    border-radius:8px;
    border: 1px solid #D0D5DD;
    color:inherit;
    height:45px;
    margin-right:10px;
  }
  
  .newsletter-subscribe form .btn {
    border:none;
    font-size:14px;
    width: 120px;
    height: 44px;
    border-radius: 8px;

  }
  
  
  .newsletter-subscribe form .btn-primary {
    background-color:#055ada !important;
    color:#fff;
    outline:none !important;
  }
  
  
  /* Single product page*/

.signlemainsection{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 64px;
    margin-bottom: 85px;
}

.product-details{
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 592px;
    width: 1312px;
    border-radius: 15px;
}

.details-table{
    border-radius: 15px;
    border: 1px solid #E9E9E9;
    width: 464px;
    height: auto;
    padding: 24px;
}

.details-Carousel{
    width: 812px;
    height: 592px;
    background: #E7E7E7;
    border-radius: 15px;   
}

.details-Carousel .carousel-item{
    border-radius: 15px;
}

.details-table-first{
    margin-bottom: 32px;
}

.details-table-second{
    width: 416px;
    height: 246px;
    margin-bottom: 32px;
}

.details-table-bottom{
    width: 416px;
    height: 151px;
    gap: 18px;
}

.product-copyright{
    color: #777777;
    text-align: center;
    margin-top: 12px;
}


.product-cta{
    width: 416px;
    height: 112px;
}

.downloadbtn{
    width: 416px;
    height: 50px;
    background: var(--Blue);
    border-radius: 10px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 10px;
    font-weight: 500;
    gap: 10px;
    color: var(--white);
    margin-bottom: 12px;
}

.downloadbtn:hover{
    background: var(--BlueHover);
}

.previewbtn{
    width: 416px;
    height: 50px;
    border: 1px solid var(--Black);
    border-radius: 10px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 10px;
    gap: 10px;
    font-weight: 500;
    color: var(--Black);
}

.previewbtn .ph-eye{
    font-size: 20px;
    color: var(--Black);
}

.downloadbtn .ph-file-arrow-down{
    font-size: 20px;
    color: var(--white);
}

#projectname{
    width: 100%;
}

/* Table Content*/


.tablerow{
    width: 416px;
    height: 41px;
    border-bottom: 1px solid #E9E9E9;
    display: flex;
}

.tablelable{
    padding: 10px;
    gap: 4px;
    width: 148px;
    height: 41px;
    border-left: 1px solid #E9E9E9;
    display: flex;
    
}

.tablelable .ph-tag,.ph-laptop,.ph-file,.ph-user,.ph-hash,.ph-star{
    font-size: 14px;
    color: var(--Black);
}

#pricevalue,#categoryvalue,#typevalue,#authorvalue,#ratevalue{
    padding: 10px;
    width: 268px;
    height: 41px; 
}


#tagsvalue{
    padding: 10px;
    width: 268px;
    height: 41px; 
    color: var(--TagColor);
    font-weight: 500;

}

/* Carousel section MAIN*/


#carouselExample{
    width: 812px;
    height: 592px;
    padding-top: 0;
}

.carousel-control-prev{
    position: absolute;
    width: 61px;
    height: 40px;
    right: 739px;
    top: 276px;
    background: var(--white);
    backdrop-filter: blur(15px);
    border-radius: 50px;
    opacity:1;
}

.carousel-control-next {
    position: absolute;
    width: 61px;
    height: 40px;
    right: 12px;
    top: 276px;
    background: var(--white);
    backdrop-filter: blur(15px);
    border-radius: 50px;
    opacity:1;

}

.details-Carousel .ph-caret-left,.ph-caret-right{

    color: var(--Black);
    font-size: 20px;
    font-weight: bold;
}



.filtertabs{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 1105px;
    padding-bottom: 24px;
}

.tab1{
    width: 150px;
    height: 50px;
    background: var(--white);
    border-radius: 800px;
    backdrop-filter: blur(10px);  
    gap: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tab1 p{
    color: var(--Black);
    font-weight: 500;
}

.tab1 .ph-images,.ph-browsers,.ph-device-mobile-speaker,.ph-google-play-logo,.ph-linkedin-logo,.ph-presentation-chart,.ph-puzzle-piece{
    font-size: 20px;
    color: var(--Black);
}

.tab1:hover{
    background: var(--BorderHover);
    cursor: pointer;
}



/* Join us page */

.joinus-herosection{
   margin-top: 64px;
   display: grid;
   align-items: center;
   justify-content: center; 
   margin-bottom: 32px;
}

.joinus-herosection-title{
    text-align: center;
    font-weight: 500;
    margin-bottom: 32px;
}

.joinus-herosection-description h3{
    text-align: center;
    font-weight: 400;
    margin-bottom: 32px;
    width: 1145px;
}


.joinusBottom{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 132px;
}

.joinus-formsection{
    background-color: var(--Gray);
    width: 1312px;
    height: 621px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.joinusimage img{ 
    width: 752px;
    height: 621px;
    border-radius: 15px;
}

.joinusreguest{
    padding-top: 28px;
    margin: 0 auto;
    width: 515px;
}



button{
    padding: 10px;
    gap: 10px;
    width: 515px;
    height: 50px;
    background: #0066CC;
    border-radius: 12px;
    border: none;
    color: var(--white);
}

.form-control::placeholder{
    font-family: 'IBM Plex Sans Arabic';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 21px;
    color: #D9D9D9;
}

form{
    height: 100%;
    justify-content: space-between;
    align-items: center;
}


/* About us Page*/


.aboutusimages-section{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 85px;
}

.aboutusimages{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 1312px;
}

.image1{
    width: 660px;
    height: 400px;
    border-radius: 15px;
}

.image2{
    width: 297px;
    height: 400px;
    border-radius: 15px;
}


.Featuressection{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 85px;
    
}


.Features{
    display: grid;
    align-items: center;
    justify-content: space-between;
    border-radius: 15px;
    width: 1312px;
    height: 556px;
    background-color: var(--Gray);
    padding: 50px 0px;
    gap: 40px;
}

.vision{
    display: grid;
    align-items: center;
    justify-content: center;
}

.visiontitle{
    font-weight: 500;
    font-size: 42px;
    color: var(--Blue);
    text-align: center;
    height: 63px;
}

.visiondescription h3{
    padding-left: 88px;
    padding-right: 88px;
    height: 84px;
    font-weight: 400;
    font-size: 28px;
    text-align: center;
    color: #1D1D1F; 
    margin-top: 24px;
}

.mision{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 24px;
    padding-left: 88px;
    padding-right: 88px;
}

.whatwedoNo1,.whatwedoNo2,.whatwedoNo3{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.whatwedoNo1 h4{
    font-weight: 400;
    font-size: 22px;
    text-align: center;
    color: #1D1D1F; 
    width: 390px;
}

.whatwedoNo1 img{
    width: 48px;
    height: 48px;
}

.whatwedoNo2 h4{
    font-weight: 400;
    font-size: 22x;
    text-align: center;
    color: #1D1D1F; 
    width: 390px;  
}

.whatwedoNo3 h4{
    font-weight: 400;
    font-size: 22px;
    text-align: center;
    color: #1D1D1F; 
    width: 390px;
}

.imageHRsection{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 64px;
}

.imageHRsection img{
    width: 100%;
}


.reguestjoin{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 64px;
    
}

.joinus-aboutus{
    width: 1312px;
    border-radius: 15px;
    background-color: var(--Section2Color);
    display: grid;
    align-items: center;
    justify-content: center;
    padding-top: 64px;
    padding-bottom: 64px;
    gap: 24px;
}

.joinus-aboutus h1{
    width: 1054px;
    height: 63px;
    font-weight: 500;
    font-size: 42px;
    text-align: center;
    color: var(--Black);
}

.joinus-aboutus h4{
    width: 1054px;
    height: 66px;
    font-weight: 400;
    font-size: 22px;
    text-align: center;
    color: var(--Black);
}


.CTAJOIN{
    display: flex;
    align-items: center;
    justify-content: center; 
}



/* دليل UX بالعربي */

.Blog-Card{
   width: 310px;
   height: 369px; 
   display: grid;
   gap: 12px;
   cursor: pointer;
}

.Blog-Card img{
    width:310px;
    height: 310px;
    border-radius: 15px;   
}

.Blog-Card p{
    display: flex;
    align-items: center;
    text-align: right;
    color: #777777;
    font-weight: 400;
    font-size: 12px;
}

.Blog-Card h6{
    width: 310px;
    font-weight: 500;
    font-size: 14px;
    display: flex;
    align-items: center;
    text-align: right;
    color: #1D1D1F; 
}


.Blog-Card:hover h6{
    text-decoration:underline;
}


.blogconainor{
    width: 650px;
    display: flex;
    align-items: center;
    justify-content: space-around;
}


/*Blog Simgle page*/


.article-container{
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 42px 0; 
    gap: 20px;
    flex-direction: column;
}


.article-image{
    width: 1312px;
    height: 350px;
    border-radius: 15px;
    object-fit: fill; 
}

.article-content{
    width: 1312px;
    height: auto;
    font-weight: 400;
    font-size: 22px;
    display: flex;
    align-items: center;
    text-align: right;
    color: var(--Black);
    line-height: 40px;
}


.BlogimageSection{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 32px;
}

.blogimag img{
    width: 1312px;
    border-radius: 15px;
    object-fit: cover;
}

.blogcontentSection {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 85px;

}


.blogcontentSection h4{
    width: 1312px;
    height: auto;
    font-weight: 400;
    font-size: 22px;
    display: flex;
    align-items: center;
    text-align: right;
    color: var(--Black);
    line-height: 40px;
}


.article-interiorimage {
    width: 1312px;
    height: 500px;
    border-radius: 15px;
    object-fit: cover;

}


.policy{
    display: grid;
    justify-content: center;

}


.policysection{
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    margin-bottom: 24px;
}

.policy h4{
    font-size: 22px;
    font-weight: 500;
}

.tab1:hover, .tab1.active {
    background: var(--Gray);
    color: #fff;
    border: 1px solid var(--Blue);
}


/*toast Message Start*/


.toast-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 15px 20px;
    border-radius: 8px;
    display: none;
    z-index: 1000;
    transition: opacity 0.3s ease-in-out;
}

.toast-container.show {
    display: block;
    opacity: 1;
}

.toast-container.hide {
    opacity: 0;
}


/*toast Message End*/

/* memberheader Page */

.memberheader img{
    width: 1312px;
    height: 400px;
}

#membersContainer{
    display: flex;
    align-items: center;
    justify-content: center; 
    margin: 85px 0;
}

.membersection{
    width: 1312px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.memberHeader{
    width: 1312px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.memberHeader h2{
    font-weight: 400;
    font-size: 34px;
    text-align: right;
    color: #1D1D1F;
}

.memberHeader select{
    width:120px;
}

.MemberCard{
    width: 310px;
    height: 315.41px;
    background: #FFFFFF;
    border: 1px solid #E9E9E9;
    border-radius: 17px; 
    padding: 5px 0px 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

}

#MemberCardCover{
    width: 297.24px;
    height: 97.56px;
    border-radius: 16px; 
}

#MemberCardAvatar{
    width: 78.41px;
    height: 78.41px;
    border: 4px solid #FFFFFF;
    border-radius: 90px;
    position: relative;
    bottom: 40px;
    right: 20px;
}

.membersocialmedia{
    width: 256px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
}


.members{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.MemberCardMeddil1{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 256px;
}

#MemberBage{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 4px 8px;
    width: 83px;
    height: 26px;
    background: linear-gradient(90deg, #FF2D55 0%, #991B33 100%);
    border-radius: 5px;
    font-weight: 400;
    font-size: 12px;
    color: #FFFFFF;
}


.MemberCardRow{
    display: flex;
    align-items: center;
    justify-content:flex-start;
}

.memberline{
    width: 256px;
    border: 1px solid #E9E9E9;

}

.MemberCardMeddil{
    display: flex;
    flex-direction: column;
    padding: 0px;
    gap: 11px;
    width: 256px;
    height: 78px;
    margin-bottom: 10px;
}

.MemberCardBottom{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    padding: 0px;
    gap: 5px;
    width: 256px;
    height: 53px;
    margin-bottom: 10px;
}

.MemberCardBottom p{
    width: 256px;
    height: 18px;
    font-weight: 400;
    font-size: 12px;
    color: #777777;
}

.MemberCardHeader{
    width: 297.24px;
    height: 136.41px;
}

.MemberCardMeddil2{
    width: 256px;
}
.MemberCardMeddil3{
    width: 256px;
}


.socialmedia .ph-behance-logo,.ph-pinterest-logo,.ph-facebook-logo,.ph-instagram-logo,.ph-linkedin-logo,.ph-x-logo{
    font-size: 26px;
    color: var(--Black);
    display: inline;
    gap: 8px;
}


@media screen and (max-width: 440px) and (min-width:400px){

   .fomo{
        padding: 11px 10px;
        
   }

   #fomoSection h5{
    font-size: 12px;
   }

   .hero{
    height: 430px;
    background-image: url(../img/Hero\ Section430.png);
    background-size: cover;
   }

   .hero h5{
    font-size:14px;
    font-weight: 500;
    display: none;
   }

   .herosection{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
    left:0px;
    top: 180px;
   }

   .navbar-brand{
    width: auto;
   }
   
   .herosection1 h1{
    width: 398px;
    font-size: 34px;
    display: none;
   }
   .herosection3 img{
    width: 300px;
    display: none;
   }

   .categories{
    width: 398px;
    flex-wrap: wrap;
    height: 400px;
    gap: 16px 0px;
   }

   .categorysingle{
    width: 186px;
    height: 88px;
    display: flex;
    justify-content: space-evenly;
   }

   .section2{
    display: grid;
   }

   .servicesother{
    display: grid;
    width: 100%;
   }

   .servicesother1,.servicesother2{
    width: 398px;
    height: 244.78px;
    border-radius: 10px;
    margin-bottom: 10px;
   }

   .servicesother1 img{
    width: 174.4px;
    height: 174.4px;
    bottom: -20px;
    left: -6px;
   }

   .servicesother2 img{
    width: 174.4px;
    height: 174.4px;
    bottom: -10px;
    left: -6px;
   }

   .servicesother2 h1{
    font-size: 26.16px;
   }

   .servicesother1 p{
    font-size: 11.21px;
    width: 254.12px;
   }

   .servicesother2 p{
    font-size: 11.21px;
    width: 254.12px;
   }

   .BLUEbtn,.BLACKbtn{
    padding: 6px;
    gap: 6.23px;
    width: 93.43px;
    height: 31.14px;
    border-radius: 8px;
    font-size: 12px;
   }

   .ph-arrow-up-left{
    font-size: 18px;
   }

   .prodects-section{
    display: flex;
    flex-direction: column;
    width: 398px;
   }


   .collapse.navbar-collapse {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 100%; 
    
}

   hr{
    width: 398px;
   }

   .pluginsection{
    width: 100%;
    display: grid;
    gap: 16px 43px;
   }
   
   .plugincard{
    width: 398px;
   }
   
   .carousel{
    width: 398px;
    height: auto;
    padding-top:32px;
   }

   .carousel .testimonial{
    font-size: 18px;
   }

   .footer{
    width: 100%;
    height: 377px;
    padding: 32px 0px;
    gap: 64px;
   }

   .footer-list{
    width: 398px;
    height: 86px;
    gap: 32px;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
   }

   .footer-bottom{
    width: 100%;
    display:grid;
    gap: 24px 32px;
    justify-content:center;
    padding-bottom: 10px;
   }

   .footer-bottom p{
    text-align: center;
    padding-top: 10px;
   }

   .newsletter-subscribe form .form-control{
    width: 271px;
   }

   .navbar-toggler{
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
   }

   .navbar{
    padding: 0;
   }

   .navbar .outlineBlack{
    display: none;
   }

      .navbar .tagandbtn{
    display: none;
   }


   .navbar .tagandbtn{
    display: none;
   }

   .servicesother1SECTION{
    right: 20px;
    width: 277.17px;
    height: 178.44px;
    top: 40px;
   }

   .servicesother2SECTION{
    width: 254.12px;
    right: 20px;
    height: 178.44px;
    top: 40px;

   }

   .section3-Header h2{
    width: 398px;
   }

   .section4{
    width: 100%;
   }


   /* Single page*/

   .product-details{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 398px;
    flex-direction: column-reverse;
    height: auto;
   }

   .details-Carousel{
    width: 398px;
    height: 290.17px;
   }

   #carouselExample{
    width: 398px;
    height: 290.17px;
   }

   .details-table{
    width: 398px;
   }

    .downloadbtn,.previewbtn,.product-cta,.details-table-bottom{
        width: 356.83px;
    }
    .product-copyright{
        text-align: center;
    }
    
    .tablerow,.details-table-second{
        width:356.83px;
    }

    #pricevalue,#categoryvalue,#typevalue,#authorvalue,#ratevalue,#tagsvalue{
        padding: 10px;
        width: 229px;
        height: 36px; 
    }
    

    .secondary-hero-section2{
        margin-bottom: 0;
    }

    .secondary-hero-section{
        margin-bottom: 20px;
    }

    .reguestjoin{
        margin-bottom: 42px;
    }

    .joinus-aboutus h1{
        width: 348px;
        font-weight: 500;
        font-size: 42px;

    }

    .joinus-aboutus{
        width: 398px;
        padding: 42px;
    }
    .joinus-aboutus h4{
        width: 348px;
        height: 165px;
    }

    .image2,.image3{
        display: none;
    }

    .image1{
        width: 398px;
        height: 241.21px;
    }
    .joinus-herosection-description h3{
        width: 398px;
    }

    .Features{
        width: 398px;
        height: auto;
        padding: 32px 0px;
    }

    .mision{
        display: flex;
        flex-direction: column; 
        padding: 0;
        height: auto;
        
    }

    .visiondescription h3{
        width: 398px;
        font-weight: 500;
        font-size: 22px;
        text-align: center;
        height: auto;
        padding: 0;
    }

    .whatwedo{
        width: 398px;
    }


    .whatwedoNo1,.whatwedoNo2,.whatwedoNo3{
        gap: 0;

    }

    .whatwedoNo1,.whatwedoNo2,.whatwedoNo3 h4{
        width: 365px;

    }

    .whatwedoNo1,.whatwedoNo2,.whatwedoNo3 img{
        margin-bottom: 20px;
    }

    .imageHRsection{
        margin-top:0;
    }

    .aboutusimages{
        width: 398px;
    }

    .joinus-formsection{
        flex-direction: column-reverse;
        width: 398px;
        background-color: #fff;
        height: auto;
    }

    .joinusimage img{
        width: 398px;
        height: 328.67px;
    }

    .joinusreguest{
        width: 398px; 
    }

    button{
        width: 398px;
    }


    .policysection{
        display: flex;
        align-items: flex-start;
        justify-content: center;
        flex-direction: column;
        margin-bottom: 24px;
        width: 398px;
    }
    
    .policy p{
        font-size: 14px;
        font-weight: 400;
    }

    .blog-container{
        flex-direction: column;
        display: flex;
    }

    .article-image{
        width: 398px;
    }

    .article-content{
        width: 398px;
        text-align: right;
    }

    .article-title{
        width: 398px;
        text-align: center;
    }

    .product-details .carousel-control-next , .carousel-control-prev{
        display: none;
    }

    .product-details .carousel{
        background-color:#fff;
    }

    .article-interiorimage{
        width: 398px;
        height: 200px;
        border-radius: 15px;
    }

}

@media screen and (max-width: 400px) and (min-width:360px){

    body{
        width: 100%;
    }

    .fomo{
    padding: 11px 10px;   
    }

   #fomoSection h5{
    font-size: 12px;
   }

   .hero{
    height: 430px;
    background-image: url(../img/Hero\ Section360.png);
    background-size: cover;
   }

    
   .hero h5{
    font-size:14px;
    font-weight: 500;
    display: none;
   }


   .herosection{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
    left:0px;
    top: 180px;
   }


   .navbar-brand{
    width: auto;
   }
   
   .herosection1 h1{
    width: 333.21px;
    font-size: 28px;
    display: none;
   }
   
   .herosection3 img{
    width: 250px;
    display: none;
   }

   .categories{
    width: 333.21px;
    flex-wrap: wrap;
    height: 400px;
    gap: 16px 0px;

   }

   .categorysingle{
    width: 155.72px;
    height: 88px;
    display: flex;
    justify-content: space-evenly;
   }

   
   .section2{
    display: grid;
   }

   .servicesother{
    display: grid;
    width: 100%;
   }

   .servicesother1,.servicesother2{
    width: 333.21px;
    height: 244.78px;
    border-radius: 10px;
    margin-bottom: 10px;
   }

   .servicesother1 img{
    width: 146px;
    height: 146px;
    bottom: -20px;
    left: -6px;
   }

   .servicesother2 img{
    width: 146px;
    height: 146px;
    bottom: -10px;
    left: -6px;
   }

   .servicesother2 h1{
    font-size: 26.16px;
   }

   .servicesother1 p{
    font-size: 11.21px;
    width: 212px;
   }

   .servicesother2 p{
    font-size: 11.21px;
    width: 212px;
   }


   .BLUEbtn,.BLACKbtn{
    padding: 6px;
    gap: 6.23px;
    width: 93.43px;
    height: 31.14px;
    border-radius: 8px;
    font-size: 12px;
   }

   .ph-arrow-up-left{
    font-size: 18px;
   }

   .prodects-section{
    display: flex;
    flex-direction: column;
    width: 333.21px;
   }

   hr{
    width: 333.21px;
   }

   .pluginsection{
    width: 100%;
    display: grid;
    gap: 16px 43px;
   }
   
   .plugincard{
    width: 333.21px;
   }
   
   .carousel{
    width: 333.21px;
    height: auto;
    padding-top:32px;
   }

   .carousel .testimonial{
    font-size: 18px;
   }

   .footer{
    width: 100%;
    height: 377px;
    padding: 32px 0px;
    gap: 64px;
   }

   .footer-list{
    width: 333.21px;
    height: 86px;
    gap: 32px;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
   }

   .footer-bottom{
    width: 100%;
    display:grid;
    gap: 24px 32px;
    justify-content:center;
    padding-bottom: 10px;
   }

   .footer-bottom p{
    text-align: center;
    padding-top: 10px;
   }

   .newsletter-subscribe form .form-control{
    width: 225px;
   }

   .newsletter-subscribe form .btn-primary{
    width: 100px;
   }

   .navbar-toggler{
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
   }

   .navbar{
    padding: 0;
   }

   .navbar .outlineBlack{
    display: none;
   }

   .servicesother1SECTION{
    right: 1px;
    width: 277.17px;
    height: 178.44px;
    top: 40px;
   }

   .servicesother2SECTION{
    width: 254.12px;
    right: 40px;
    height: 178.44px;
    top: 40px;

   }

   .section3-Header h2{
    width: 333.21px;
   }

   .section4{
    width: 100%;
   }
   
   .section3-Header h6{
    display: none;
   }


   /* Single page*/

   .product-details{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 333.21px;
    flex-direction: column-reverse;
    height: auto;
   }

   .details-Carousel{
    width: 333.21px;
    height: 290.17px;
   }

   #carouselExample{
    width: 333.21px;
    height: 290.17px;
   }

   .details-table{
    width: 333.21px;
   }

    .downloadbtn,.previewbtn,.product-cta,.details-table-bottom{
        width: 298.74px;
    }
    .product-copyright{
        width: 298.74px;
        text-align: center;
    }
    
    .tablerow,.details-table-second{
        width:298.74px;
    }

    #pricevalue,#categoryvalue,#typevalue,#authorvalue,#ratevalue,#tagsvalue{
        padding: 10px;
        width: 192px;
        height: 36px; 
    }
    
    .secondary-hero-section2{
        margin-bottom: 0;
    }

    .secondary-hero-section{
        margin-bottom: 20px;
    }

    .reguestjoin{
        margin-bottom: 42px;
    }

    .joinus-aboutus h1{
        width: 348px;
        font-weight: 500;
        font-size: 42px;

    }

    .joinus-aboutus{
        width: 333.21px;
        padding: 42px;
    }
    .joinus-aboutus h4{
        width: 348px;
        height: 165px;
    }

    .image2,.image3{
        display: none;
    }

    .image1{
        width: 333.21px;
        height: 241.21px;
    }
    .joinus-herosection-description h3{
        width: 333.21px;
    }

    .Features{
        width: 333.21px;
        height: auto;
        padding: 32px 0px;
    }

    .mision{
        display: flex;
        flex-direction: column; 
        padding: 0;
        height: auto;
        
    }

    .visiondescription h3{
        width: 333.21px;
        font-weight: 500;
        font-size: 22px;
        text-align: center;
        height: auto;
        padding: 0;
    }

    .whatwedo{
        width: 333.21px;
    }


    .whatwedoNo1,.whatwedoNo2,.whatwedoNo3{
        gap: 0;

    }

    .whatwedoNo1,.whatwedoNo2,.whatwedoNo3 h4{
        width: 365px;

    }

    .whatwedoNo1,.whatwedoNo2,.whatwedoNo3 img{
        margin-bottom: 20px;
    }

    .imageHRsection{
        margin-top:0;
    }

    .aboutusimages{
        width: 333.21px;
    }

    .joinus-formsection{
        flex-direction: column-reverse;
        width: 333.21px;
        background-color: #fff;
        height: auto;
    }

    .joinusimage img{
        width: 333.21px;
        height: 328.67px;
    }

    .joinusreguest{
        width: 333.21px; 
    }

    button{
        width: 333.21px;
    }


    .policysection{
        display: flex;
        align-items: flex-start;
        justify-content: center;
        flex-direction: column;
        margin-bottom: 24px;
        width: 333.21px;
    }
    
    .policy p{
        font-size: 14px;
        font-weight: 400;
    }

    .blog-container{
        flex-direction: column;
        display: flex;
    }

    .article-image{
        width: 333.21px;
    }

    .article-content{
        width: 333.21px;
        text-align: right;
    }

    .article-title{
        width: 333.21px;
        text-align: center;
    }

    .filtertabs{
        display: none;
    }

    .collapse.navbar-collapse {
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        width: 100%; 
        
    }


    .product-details .carousel-control-next , .carousel-control-prev{
        display: none;
    }

    .product-details .carousel{
        background-color:#fff;
    }
        

    .article-interiorimage{
        width: 333.21px;
        height: 167.44px;
        border-radius: 12px;
    }

}