/*change text font*/
html, body { 
	font-family: 'hebeda', sans-serif;   
	
}  

/*header*/

header {  
	direction: ltr;
	
} 

header .navbar ul { 
  direction: rtl;
}

header .brand-name img {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 5px;
}

/*about me*/
.about-me .about-content .text .info .list label {
  padding-right: 0px; 
}


/*skills*/ 
.skills .skills-content .skill-box .skill-bar .skill-bar-in { 
	right: 0; 
	text-align: left;
}

.skills .skills-content .skill-box .skill-bar .skill-bar-in span { 
	left: 0px; 
}

/*-----------------*/


/*fonts ar*/
.section-title h1 { 
  font-size: 30px; 
}

/*for sub title insection-title*/
.section-title h4 {
	color: #e7eaf6;
	font-size: 18px; 
}

header .navbar ul li a {
  font-size: 17px; 
}

.home .home-content .block h6 { 
  font-size: 24px; 
}

.home .home-content .block h1 {
  font-size: 70px; 
}

.home .home-content .block h3 {
  font-size: 30px;
  margin-top: 22px;
}

.home .home-content .block .cv-btn a { 
  font-size: 18px; 
  padding: 10px 20px;
}

.about-me .about-content .text .myName { 
  font-size: 24px;
}

.about-me .about-content .text h6 span { 
  font-size: 24px; 
}

.about-me .about-content .text p {
  font-size: 17px; 
  line-height: 30px;
}

.about-me .about-content .text .info .list { 
  display: flex; 
  align-items: center;
}

.about-me .about-content .text .info .list .fa {
  font-size: 21px;
  margin-left: 4px;  
}

.about-me .about-content .text .info .list label span { 
  font-size: 17px; 
  margin-left: 7px; 
}

.about-me .about-content .text .info .list p { 
  font-size: 17px;  
}

.about-me .about-content .text .info .list .special {
  font-size: 18px;  
}

.services .service-content .box h5 {
  font-size: 22px; 
}

.services .service-content .box p {
  font-size: 17px; 
}

.services .service-content .box .icon {
	width: 55px;
	height: 55px; 
}

.services .service-content .box .icon .fa-solid
{
	font-size: 28px; 
	line-height: 55px;   
}


.skills .skills-content .section-title p {
  font-size: 17px; 
}

.skills .skills-content .skill-box .skill-bar .skill-bar-in span { 
  font-size: 17px; 
}

.skills .skills-content .skill-box h6 {
  font-size: 19px; 
}

.portfolio .filter-buttons ul li { 
  font-size: 17px; 
}

.portfolio .portfolio-gallery .item .overlay h4 { 
  font-size: 30px; 
}

.message-text .text h1 {
  font-size: 18px; 
}

.message-text .text ul li #checkmark {
  font-size: 22px; 
}

.message-text .text ul li {
  font-size: 17px; 
}

.message-text .button a { 
  font-size: 17px; 
    padding: 10px 14px;
}
 
.packages .hour {
	font-size: 20px;
  font-weight: 700;
}

.packages .button {   
padding: 10px 14px;  
font-size: 17px;  
}

.packages .duration {
  font-size: 26px; 
}

.packages .list li { 
  font-size: 17px; 
}

.packages .text2 { 
  font-size: 24px;
}

.packages .text2 .dh {
  font-size: 16px;
}

.filter-card p { 
  font-size: 17px; 
}

.filter-footer p { 
  font-size: 17px; 
} 

.notebien {   
    font-size: 17px; 
} 

.x-icon { 
  margin-left: 3px; 
}

/*testimonials*/
.testimonials .testimonials-content { 
	direction: ltr;
} 

.testimonials .testimonials-content .testi-slider .slide .fa.fa-quote-left {
  font-size: 40px; 
}
 
.testimonials .testimonials-content .testi-slider .slide .testemonial-p {
  font-size: 17px; 
    direction: rtl;
}

.testimonials .testimonials-content .testi-slider .slide .rating .fa { 
  font-size: 16px;
}

.testimonials .testimonials-content .testi-slider .slide h3 { 
  font-size: 19px; 
}

.contact-us .contact-form .contact-info .inner-contact h3 {
  font-size: 19px;
}

.contact-us .contact-form .contact-info .inner-contact p { 
  font-size: 17px; 
}

.copyright p { 
  font-size: 17px; 
}

/*Accordion start*/    

/* --- Accordion Header --- */
.accordion-header { 
    font-size: 17px; 
}
    

.accordion-header::after {
  content: '';
  position: absolute;
  left: 20px !important;
  right: auto !important;
  top: 50%;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 9px solid #e7eaf6;
  margin-top: -6px;
  transition: transform 0.5s ease;
}

/* --- Triangle Icon (على اليمين) --- */

.accordion-content li { 
  font-size: 17px;
    padding-right: 20px;
}


.accordion-content li::before {
  content: '◀'; /* هنا قمت بتغيير الرمز */
  position: absolute;
  right: 0;
  color: #e7eaf6;
  font-size: 15px;
  line-height: 1.7;
}

.badge { 
    display: inline-flex;       /* تفعيل خاصية المرونة للمحتوى */
  align-items: center;        /* توسيط عمودي */
  justify-content: center;
  font-size: 15px;
  padding: 2px 10px;
  border-radius: 12px;
  color: #fff;
  font-weight: bold;
  margin-top: -2px;
  margin-right: 10px;
}
 
/* Accordion end */

/* whatsapp start */

.whatsapp-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    flex-direction: column; /* Stacks items vertically */
    align-items: center;    /* Centers horizontally */
    gap: 8px;               /* Space between text and icon */
    z-index: 1000;
    text-decoration: none;
}

.whatsapp-text { 
  font-size: 17px; 
} 

.whatsapp-container:hover .whatsapp-float {
    transform: scale(1.1);
}
 
/* whatsapp end */  



/*Responsive 1*/
@media(max-width: 991px) {  
	
	.home .home-content .block h6 {
		font-size: 28px;
	}
	
	.home .home-content .block h1 { 
    font-size: 70px; 
	}
	
	.home .home-content .block h3 { 
    	font-size: 30px; 
	}
	
	.home .home-content .block .cv-btn a {
    padding: 8px 16px;
    font-size: 16px;
  }
}

/*Responsive 2*/
@media(max-width: 802px) {  /*@media(max-width: 767px) {*/
	

	
	 /*make section title smaller*/ 
	.section-title h1 {  
		font-size: 30px; 
	}   
	
	.section-title h4 { 
	  font-size: 20px;
	}
	
	

	.about-me .about-content .text .myName { 
		font-size: 36px; 
	}  
	
	content .text h6 span {
	  font-size: 36px;
	} 
	
	.services .service-content .box h5 {
  		font-size: 23px;
	}

	
	.services .service-content .box p {
	font-size: 17px;   
	} 

	
	.message-text .text h1 { 
		font-size: 19px;  
		color: #ffa500;
	} 
	
	.message-text .text ul li {
  		font-size: 17px;

	} 
	
	  .message-text .button a {
		padding: 9px 15px;
		font-size: 17px;
	  }
	
	   .testimonials .testimonials-content .testi-slider .slide .testemonial-p {
		  font-size: 17px;
		}
	
	.packages .button {   
		padding: 10px 15px;   
		font-size: 15px;  
	}
    
    .accordion-header { 
    font-size: 17px; 
}
    
    .accordion-content li { 
  font-size: 17px;
}
    
  .message-text .text ul li #checkmark {
  font-size: 18px;
}
   .packages .hour {
  font-size: 26px;
  font-weight: 700;
}
    
    .packages .list li {
  font-size: 18px;
}
    
    .portfolio .filter-buttons ul li {
  font-size: 19px;
}
    
    .portfolio .portfolio-gallery .item .overlay h4 {
  font-size: 25px;
}
    
.contact-us .contact-form .contact-info .inner-contact h3 {
  font-size: 22px;
}    
    
}
	
	 
	 /*media 650px*/
@media(max-width: 650px) { 

	.home .home-content .block h6 {
		font-size: 20px;  
	}
	
	.home .home-content .block h1 { 
    font-size: 47px;  
      text-shadow: 
            /* زيادة سمك الإطار الخارجي (تم رفع القيمة إلى 5px) */
            0px -5px 0 #e7eaf6, 
            0px  5px 0 #e7eaf6,
            -5px 0px 0 #e7eaf6,
             5px 0px 0 #e7eaf6,
            -5px -5px 0 #e7eaf6,
             5px -5px 0 #e7eaf6,
            -5px  5px 0 #e7eaf6,
             5px  5px 0 #e7eaf6,
            /* إضافة طبقة إضافية لملء الفراغات وجعل الحواف أكثر حدة */
            -3px 9px 0 #e7eaf6,
             3px 9px 0 #e7eaf6,
             0px 9px 0 #e7eaf6,
            /* الظلال السفلية (أكثر كثافة وعمقاً) */
            0 12px 2px rgba(0,0,0,.2),
            0 0 10px rgba(0,0,0,.25),
            0 8px 8px rgba(0,0,0,.45),
            0 16px 16px rgba(0,0,0,.35);
        
	}
	
	.home .home-content .block h3 { 
    font-size: 24px;  
	} 
	
		
	.home .home-content .block .cv-btn a { 
		padding: 8px 15px;
       font-size: 15px; 
	}
    
    .about-me .about-content .text p {
		font-size: 17px;  
	}
    
    .skills .skills-content .skill-box h6 {
  font-size: 20px; 
}
    
       .packages .list li {
  font-size: 17px;
}
    
  
}
	
/*Responsive 500px*/
@media(max-width: 500px) {  
    
    .section-title h1 {  
		font-size: 27px; 
	}
    
      .section-title h4 {
    font-size: 18px;
  }
	
.about-me .about-content .text .myName {
    font-size: 21px;
  }
	
	.about-me .about-content .text h6 span {
  font-size: 21px; 

}
    
    .about-me .about-content .text p {
		font-size: 15px;  
	}
	
.about-me .about-content .text .info .list .fa {
  font-size: 18px;
  margin-left: 4px; 
}
	
.about-me .about-content .text .info .list label span {
  font-size: 15px; 
  margin-left: 7px; 
}
    
    .about-me .about-content .text .info .list .fa {
  font-size: 18px;
  margin-left: 4px;
}
	
.about-me .about-content .text .info .list p {
  font-size: 15px;
}
	
.about-me .about-content .text .info .list .special {
  font-size: 15px;
}	
    
    .about-me .about-content .text .social-links a .fa-brands { 
  font-size: 18px; 
}
    
    .services .service-content .box h5 {
    font-size: 20px;
  }
    
     .services .service-content .box p {
    font-size: 15px;
  }
    
    .services .service-content .box .icon {
  width: 50px;
  height: 50px;
}
    
    .services .service-content .box .icon .fa-solid {
  font-size: 23px; 
   line-height: 50px;
}
    
  .skills .skills-content .section-title p {
    font-size: 15px;
  }
    
    .skills .skills-content .skill-box h6 {
    font-size: 18px;
  }
    
    .skills .skills-content .skill-box .skill-bar .skill-bar-in span {
  font-size: 13px;
} 
    
    
    .accordion-header {
    font-size: 15px;
  }
    
    .badge { 
    margin-left: 12px; 
  }
 
   .accordion-header::after {
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 7px solid #e7eaf6;
  }    
    
   .accordion-content li::before { 
  font-size: 12px;
  line-height: 2.7;
}
    
    .accordion-header::after { 
        left: 5px !important; 
        top: 13px;
  }

      .accordion-content li {
    font-size: 15px;
  } 
    
    
    .message-text .text h1 {
    font-size: 17px;
    color: #ffa500;
  }
    
     .message-text .text ul li {
    font-size: 15px;
  }
    
     .message-text .text ul li #checkmark {
    font-size: 15px;
  }
    
    .testimonials .testimonials-content .testi-slider .slide .fa.fa-quote-left {
  font-size: 34px;
}
    
     .testimonials .testimonials-content .testi-slider .slide .testemonial-p {
    font-size: 15px;
  }
    
    .testimonials .testimonials-content .testi-slider .slide .rating .fa {
  font-size: 14px;
}
    
    .testimonials .testimonials-content .testi-slider .slide h3 {
  font-size: 17px;
}
    
     .packages .hour {
    font-size: 20px;
    font-weight: 700;
  }
    
    .hourtwo {
  margin-top: 10px;
  color: #ffa500 !important;
  font-size: 17px;
}
    
      .packages .list li {
    font-size: 15px;
  }
    
    .packages .text2 {
  font-size: 22px;
}
    
    .notebien {
  font-size: 15px;
}
    
        .validity {    
    font-size: 15px;  
} 
    .filter-card h3 {
  font-size: 19px; 
}
    
    .filter-card p {
  font-size: 15px;
}
    
    .filter-card i {
  font-size: 24px; 
}
    
    .filter-footer p {
  font-size: 15px;
}
    
      .portfolio .filter-buttons ul li {
    font-size: 16px;
  }
    .inner-contact i {
  font-size: 28px; 
}
    .inner-contact h3 { 
  font-size: 19px; 
}
    
    
	
.copyright p {
	font-size: 15px;
} 
    
  .whatsapp-text {
    font-size: 14px;
  }
    
    .whatsapp-container { 
  right: 5px; 
}
    
} 

    
    
	 



























