*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
@font-face {
    font-family: "Epilogue";

    src: url("../fonts/Epilogue-VariableFont_wght.ttf");
}
@font-face {
    font-family: "Montserrat";
    src: url("../fonts/ArbFONTS-Montserrat-Arabic-Regular.ttf");
}

@font-face {
    font-family: "Montserrat";
    src: url("../fonts/Montserrat-Arabic-Regular.ttf");
}

@font-face {
    font-family: "Epilogue"  ;
    src: url("../fonts/Epilogue-Regular.ttf");
}

@font-face {
    font-family: "Montserrat-thin"  ;
    src: url("../fonts/Montserrat-Arabic-Thin.ttf");
}
@font-face {
    font-family: "Montserrat-light"  ;
    src: url("../fonts/ArbFONTS-Montserrat-Arabic-Light.ttf");
}

@font-face {
    font-family: "Montserrat-bold"  ;
    src: url("../fonts/ArbFONTS-Montserrat-Arabic-Bold.ttf");
}

@font-face {
  font-family: "Inter-bold"  ;
  src: url("../fonts/ArbFONTS-NotoIKEAArabic-Bold.ttf");
}
@font-face {
  font-family: "Inter-regular"  ;
  src: url("../fonts/ArbFONTS-NotoIKEAArabic-Regular.ttf");

}
@font-face {
  font-family: "Inter-light"  ;
  src: url("../fonts/Inter_18pt-Light.ttf");
}
@font-face {
  font-family: "Inter-semiBold"  ;
  src: url("../fonts/Inter_18pt-SemiBold.ttf");
}
body{
    direction: rtl;
    font-family: "Montserrat";
    
}


:root{
    --main-color: #2D2D2D;
    --secondary-color: #ffffff;
}

a{
    text-decoration: none;
    color: var(--main-color);

}

ul{
    list-style: none;
    padding: 0;
}

h1{
    font-size: 60px;
}

h2{
    font-size: 24px;
}

.main-container{
    width: 90%;
    margin: auto;
}

header{
    height: 100px;
    margin-top: 30px;
    overflow: hidden;
    
}


header .main-container{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-links{
  display: flex;
  gap: 20px;
}

.contact-link{
    width: fit-content;
    height: 48px;
    font-size: 16px;
    background-color: var(--main-color);
    color: white;
    align-content: center;
    padding: 0 20px;
    transition: all 0.3s ease-in-out;
    border: 1px solid transparent;
    outline: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: slide-right 0.5s ease-in-out;
    font-weight: bold;

}

.contact-link:hover{
    background-color: white;
    color: var(--main-color);
    border: 1px solid var(--main-color);
    

}


.blog-link{
  text-align: center;
  align-content: center;
  font-size: 16px;
  cursor: pointer;
  animation: slide-right 0.5s ease-in-out;
  font-weight: bold;
  transition: all 0.3s ease-in-out;


  
}

.blog-link:hover{
  color: #667085;
}


.logo{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    animation: slide-left 0.5s ease-in-out;
}

.logo p{
    font-size: 16px;
    font-weight: bold;
}

@keyframes slide-left{
    0%{
        transform: translateX(100%);
    }
    100%{
        transform: translateX(0);
    }
}

@keyframes slide-right{
    0%{
        transform: translateX(-100%);
    }
    100%{
        transform: translateX(0);
    }
}
/* landing */

.landing{
    margin-top: 100px;
}

.landing .main-container .land-container{
    display: grid;
    grid-template-columns:  1fr 2fr;
    justify-content: space-between;
    align-items: center;
    gap: 100px;

}

.landing-content{
    grid-column: 2 / span 1;
    display: flex;
        flex-direction: column;
        gap: 30px;
}


.landing-content p{
    font-size:18px;
    font-weight:100;
    line-height: 1.6;   
    color: #666666;
    font-family: "Montserrat-light";
    width: 95%;
  
}

.landing-img{
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.landing-img .img-container{
    width: 320px;
    height: 475px;
    grid-column: 1 / span 1;  
    position: relative;  
}

.landing-img img{
    width: 100%;
    height: 100%;
    border-radius: 200px 200px 0 0; 
}

.personal-img{
    animation: show 1s ease-in-out;
    /* add delay to the animation */
    

}

@keyframes show{
    0%{
        opacity: 0;

    }
    100%{
        opacity: 1;
    }
}


.cover{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
}

 .shape1{
    width: 113px;
    height: 113px;
    background-color: #FF6250;
    border-radius: 0 200px 0 0;
    top: 0;
    right: -56px;
    position: absolute;
    animation: fadeShapes 3s ease-in-out forwards;
     animation: fadeCilecle infinite; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 4s; /* don't forget to set a duration! */
    
}


@keyframes fadeCilecle{
  
  0%{
        border-radius: 50% ;
        width: 0;
        height: 0;


  }
  50%{

    border-radius: 0 200px 0 0;
    width: 113px;
    height: 113px;
    
  }
  100%{
    border-radius: 50%;
    width: 0px;
    height: 0px;
  }

}

 .shape2{
    width: 100px;
    height: 100px;
    background-color: #009379;
    border-radius: 0 30px  30px;
    bottom: 13%;
    left: -50px;
    position: absolute;
}

.top-arrow{
    
    top: 10px;
    left: 10px;
    position: absolute;
}

.bottom-arrow{
    
    bottom: 10%;
    right: -40px;
    position: absolute;
}

@keyframes fadeShapes{
    0%{
        opacity: 0;
       

    }
    90%{
        opacity: 1;
        
    }


}


.img-container {
    position: relative;
    display: inline-block;
  }
  
  .personal-img {
    opacity: 0;
    animation: fadeInImage 1.5s forwards;
  }
  
   .shape2{
      transform: translateY(20px);
    animation: rotateIn 3s forwards infinite;
  }
  

  @keyframes rotateIn {
    0% {
      -webkit-transform: rotate(-200deg);
      transform: rotate(-180deg);
  }
  
  50% {
      -webkit-transform: translateZ(0);
      transform: translateZ(0);
  }
  100%{
    -webkit-transform: rotate(-200deg);
      transform: rotate(-180deg);
  }
  }
  .bottom-arrow {
    opacity: 0;
    animation: fadeInArrows 3s forwards infinite;
    transform: translateX(50px);
  }

  .top-arrow{
    opacity: 0;
    animation: fadeInTopArrow 3s forwards infinite;
    transform: translateX(-50px);
  }
  .shape1 {
    animation-delay: 1s; /* Delay for shape1 to appear after the image */
  }
  
  .shape2 {
    animation-delay: 1s; /* Delay for shape2 to appear after shape1 */
  }
  
  
  

  @keyframes fadeInImage {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  
  @keyframes fadeInShapes {
    0% {
      opacity: 0;
      transform: translateY(30px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes fadeInTopArrow {
    0% {
      opacity: 0;
      transform: translateX(-30px);
    }
    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }


  @keyframes fadeInArrows {
    0% {
      opacity: 0;
      transform: translateX(30px);
    }
    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }

  

.contact{
    margin: 100px 0 50px 0;

}

.contact-content{
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.contact-container{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.contact-content h2{
    font-size: 22px;
    font-weight: 500;
    line-height: 1.6;
}

.contact-content p{
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    font-family: "Montserrat-light";
    color: #666666;
}
.contact ul{
    display: flex;
    gap: 24px;
}

.contact ul .facebook svg path,
.contact ul .whatsapp svg path,
.contact ul .instagram svg path,
.contact ul .linkedin svg path,
.contact ul .phone svg path
{
    transition: all 0.3s ease-in-out;
}

.contact ul .facebook svg:hover path{
    fill: #4460A0;
}

.contact ul .whatsapp svg:hover path{
    fill: #67C15E;
}

.contact ul .linkedin svg:hover path{
    fill: #0077B5;
}
.contact ul .phone svg:hover path{
    fill: #25A019;
}


.instagram-icon {
    transition: fill 0.3s, stroke 0.3s;
}

.instagram-icon .background {
    transition: fill 0.3s ease-in-out;
}

.instagram-icon .foreground {
    stroke: white;
    transition: stroke 0.3s ease-in-out;
}

.instagram-icon:hover .background {
    fill: url(#instagram-gradient);
}

/* Ensure the circle (foreground) remains white */
.instagram-icon:hover .foreground {
    stroke: white;
}

/* Update the gradient to match the provided image */
#instagram-gradient stop:nth-child(1) {
    stop-color: #833AB4; /* Purple */
}

#instagram-gradient stop:nth-child(2) {
    stop-color: #FD1D1D; /* Reddish pink */
    offset: 50%;
}

#instagram-gradient stop:nth-child(3) {
    stop-color: #FCB045; /* Orange yellow */
}

.contact-form form{
    display: flex;  
    flex-direction: column;
    gap: 20px;

}

.contact-form input,textarea{
    color: rgba(102, 102, 102, 1);
    font-size: 17px;
    font-family: "Montserrat-light";  

      
}
.contact-form input{
    font-size: 16px;
    height: 60px;
    border: 1px solid  rgba(243, 243, 243, 1);
    padding: 0 20px 0 10px; 
    outline: none;
    background-color: rgba(243, 243, 243, 1);
    
}

.contact-form textarea{
    border: 1px solid rgba(243, 243, 243, 1);
    padding: 15px 20px 0 10px;
    outline: none;
    background-color: rgba(243, 243, 243, 1);
    resize: none;
}

.contact-form input:focus,
.contact-form textarea:focus{
    border: 1px solid #D9D9D9 ;
}


.contact-form button{
    width: 200px;
    height: 60px;
    font-family: "Montserrat";
    background-color: var(--main-color);
    color: white;
    font-size: 18px;
    border:  1px solid transparent;
    outline: none;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    padding: 0 20px;

}

.contact-form button:hover{
    background-color: white;
    color: var(--main-color);
    border: 1px solid var(--main-color);
    font-weight: 500;
}
.group-form{
    width: 100%;
    display: flex;
    gap: 20px;
}

.group-form input{
    width: 50%;
}



/* whats-icon */
.whats-icon,
.whats-icon1{
  position: fixed;

  right: 0;
  z-index: 9999;
  width: 70px;
  height: 70px;
  border-radius: 6px 0 0 6px;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}
.whats-icon1{
    top: 65%;
}

.whatsapp-option span{
    width: 50px;
    height: 50px;
    cursor: pointer;
    text-align: center;
    margin: 10px 6px 10px 0px;
    transition: all 0.3s linear;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 50px;
    font-size: 24px;
    background: #fff;
    box-shadow: 0 0 8px #cccccce0;
    border-radius: 50%;
}

/* .whatsapp-option::after{
    content:  attr(data-tooltip);
    background: var(--color-2);
    width: max-content;
    font-size: 16px;
    right: calc(100% + 15px);
    top: 7px;
    padding: 0 10px;
    box-shadow: -5px 2px 8px #cccccce0;
    position: absolute;
    opacity: 0;
    color: white;
    transition: all 0.4s ease;
    border-radius: 5px;
    letter-spacing: 1px;
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
    font-size: 16px;
    font-weight: bold;
    min-height: 48px;
    display: flex;align-items: center;justify-content: center;


}

.whatsapp-option::before {
    position: absolute;
    content: "";
    opacity: 0;
    transition: all 0.4s ease;
    right: 100%;

    visibility: hidden;
    border: 8px solid transparent;
    border-left-color: var(--color-2);
    top: 16px;
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
    right: 100%;
  }
  .whatsapp-option:hover::after,


.whatsapp-option:hover::before {
    opacity: 1;
    transform: translateX(0);
    -webkit-transform: translateX(0);
    visibility: visible;
  } */

.whats-icon i,
.whats-icon1 i{
  font-size: 40px;
  color: #1A6533;
}

@keyframes pulse-border {
    0% {
        /* padding: 25px; */
        transform: scale(1);
        opacity: 0.75;
    }
    75% {
        /* padding: 50px; */
        transform: scale(1.5);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 0;
    }
}

  .whatsapp-container {
    position: fixed;
    left: 10px;
    bottom: 10px;
    z-index: 1000;
  }
  .whatsapp-main{
    background-color: white;
    padding: 10px;
    border-radius: 50%;
    left: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;

    border: 1px solid #fff;
    /* animation-name: pulse;

    animation-duration: 1.5s;
    animation-timing-function: ease-out;
    animation-iteration-count: infinite; */
  }
    /* .whatsapp-main::before{
        content: "";
        position: absolute;
        border-radius: 50%;
        padding: 32px;
        border: 5px solid #28a745;
        opacity: 0.75;
        animation-name: pulse-border;
        animation-duration: 1.5s;
        animation-timing-function: ease-out;
        animation-iteration-count: infinite;
        top: -2px;
        left: -4px;
    } */
  .whatsapp-main i,
  .whatsapp-option i {
    font-size: 50px;
    color: #1A6533;
    cursor: pointer;
  }

  .whatsapp-options {
    display: flex;
    flex-direction: column;
    position: absolute;
    bottom: 0px;
    left: 0;

  }
  .whatsapp-option i{
    color: white;
  }

  .whatsapp-option {
    margin-bottom: 10px;
    background-color: #1A6533;
    padding: 10px;
    border-radius: 50%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
  }


  .whatsapp-options a {
    visibility: hidden; /* Initially hidden */
    opacity: 0;
    transform: translateY(100%);
  }
  
  .whatsapp-options a:first-child {
    animation: displayTop 0.5s ease-in-out forwards;
  }
  
  .whatsapp-options a:nth-child(2) {
    animation: displayTop 0.5s ease-in-out 0.2s forwards;
  }
  
  .whatsapp-options a:nth-child(3) {
    animation: displayTop 0.5s ease-in-out 0.4s forwards;
  }
  
  .whatsapp-options a:nth-child(4) {
    animation: displayTop 0.5s ease-in-out 0.6s forwards;
  }
  
  @keyframes displayTop {
    0% {
      visibility: visible;
      opacity: 0;
      transform: translateY(100%);
    }
    100% {
      visibility: visible;
      opacity: 1;
      transform: translateY(0);
    }
  }
  



.custom-select-wrapper {
  position: relative;
  display: inline-block;
  width: 200px; /* Adjust width as needed */
}

.custom-select {
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 4px;
}

.custom-select .icon__arrow {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.custom-select select {
  width: 100%;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 16px;
  padding-right: 30px;
}

.custom-options {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  border: 1px solid #ccc;
  background: #fff;
  border-radius: 4px;
  z-index: 1;
}

.custom-options div {
  padding: 10px;
  cursor: pointer;
}

.custom-options div:hover {
  background: #f0f0f0;
}

.custom-select.open .custom-options {
  display: block;
}


.face-icon{
    background: var(--main-color);
    border: 1px solid var(--main-color);
    transition: all 0.3s ease;
}

.face-icon:hover{
    background-color: #4460A0;
    border: 1px solid #4460A0;
}

.whatsapp-option.whats-icon {
    position: relative;
    background: var(--main-color);
    transition: background 0.3s ease-in-out;
    overflow: hidden;
}

.whatsapp-option.whats-icon::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to right, #61FD7D, #2BB826);
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    z-index: -1; /* Ensure it overlays correctly */
}

.whatsapp-option.whats-icon:hover::before {
    opacity: 1;
}

.whatsapp-option.whats-icon:hover {
    background: transparent; /* Hide the original background */
}

.whatsapp-option.linkedin-icon{
    background: var(--main-color);
    transition: all 0.3s ease;
}

.whatsapp-option.linkedin-icon:hover{
    background: #006699;
}

.whatsapp-option.insta-icon{
    
    position: relative;
    background: var(--main-color);
    overflow: hidden;
    transition: background 0.3s ease-in-out;

    
}

.whatsapp-option.insta-icon::before {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(10deg, #F58529 0%, #DD2A7B 50%, #515BD4 100%);
    opacity:0;
    transition: opacity 0.3s ease-in-out;
    z-index: -1;


}


.whatsapp-option.insta-icon:hover::before {
    opacity: 1;
}


.whatsapp-option.insta-icon:hover{
   
    background: transparent

}

.page-header{
  margin: 25px 0;
    color: var(--main-color);
    font-size: 70px;
    font-family: "Inter-Bold";
  }
  .page-header .main-container{
    padding: 10px  0;
    border-top: 1px solid rgba(0, 0, 0, 0.34);
    border-bottom: 1px solid rgba(0, 0, 0, 0.34);
}

.last-articles{
  font-family: "Inter-Bold";
margin-bottom: 50px;

}

.articles-container{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 20px;
}
.article:nth-child(1){
  
  grid-row: 1/3;
  grid-column: 1/2;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.article:nth-child(1) .article-img{
  width: 100%;
  height: 70%;
}
.article:nth-child(1) .article-img img{
  width: 100%;
  height: 100%;
}

.article:nth-child(2),
.article:nth-child(3){
  display: flex;
  gap: 10px;

}


.article:nth-child(2) .article-img,
.article:nth-child(3) .article-img{
  width: 50%;
  height: 100%;
}

.article:nth-child(2) .article-img img,
.article:nth-child(3) .article-img img{
  width: 100%;
}
.article-info 
 {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.article:nth-child(2){
  grid-row: 1/1;
  grid-column: 2/2;
}

.article:nth-child(3){
  grid-row: 2/3;
  grid-column: 2/3;
}


.article:nth-child(2) h2 ,
.article:nth-child(3) h2 {
  font-family: "Inter-Bold";
  font-size: 18px;
}

.article{
  transition: all 0.3s ease;
}
.article p  {
  font-family: "Inter-Regular";
  font-size: 16px;
  color: #667085;

  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-wrap: break-word;

}


.article-date p{
  text-align: left;
  font-family: "Inter-Regular";
  font-size: 14px;
  color: #5387FF;
}

.article-header {
  margin: 30px 0;
}

/* network */

.network{
  margin: 70px  0  ;
}

.network-info h2{
  font-family: "Inter-Bold";

}
.network-info p{
  font-family: "Inter-Regular";
  color: #667085;
}

.network-img{
  height: 240px;

}


.network-img img{
  width: 100%;
  height: 100%;
}


/* all articles */

.all-article-card{
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 20px;
  transition: all 0.3s ease;
}
.all-article-card .all-article-img{

  width: 100%;
  height: 240px;
}
.all-article-card .all-article-img img{
  width: 100%;
  height: 100%;
} 

.all-article-info h2{

  font-family: "Inter-Bold";

}
.all-article-info p{
  font-family: "Inter-Regular";
  color: #667085;
}

.info-date p{
  font-family: "Inter-Regular";
  color: #5387FF;
  font-size: 14px;
}
/* details */

.details-page{
  margin: 50px 0;
}

.article-details-date p{
  font-family: "Inter-Regular";
  color: #5387FF;
  font-size: 14px;
  margin-bottom: 20px;

}
.article-details-header h2{
  margin: 0;
  font-family: "Inter-Bold";
}

.article-details,
.article-details-body,
aside,
.aside-item,
.aside-body{
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.aside-item{
  transition: all 0.3s ease;
}
.article-details-img img{
  width: 100%;
}
.article-details-text p,
.aside-item-text p{
  font-family: "Inter-Regular";
  color: #667085;
  font-size: 16px;
}

.aside-header h2{
  font-family: "Inter-bold";
  margin-bottom: 0px;  
}


.aside-item-img {
  height: 240px;
}
.aside-item-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;

}
.aside-item-text h2{
  font-family: "Inter-bold";
}

.aside-item-date p{
  font-family: "Inter-Regular";
  color: #5387FF;
  font-size: 14px;
}

.article-info,
.all-article-info,
.aside-item-text{
  padding: 15px 24px ;
}

.all-article-card:hover,
.article:hover,
.aside-item:hover{
  box-shadow: 0 16px 42px 0  rgba(83, 135, 255, 0.15);
}