@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap");

:root{--header-height:3rem;--font-semi:600;--hue-color:224;--first-color:hsl(var(--hue-color),89%,60%);--first-color-alt:hsl(var(--hue-color),89%,55%);--title-color:hsl(var(--hue-color),56%,12%);--text-color:hsl(var(--hue-color),12%,45%);--text-color-light:hsl(var(--hue-color),8%,75%);--input-color:hsl(var(--hue-color),29%,95%);--body-color:#FBFBFF;--container-color:#fff;--scroll-bar-color:hsl(var(--hue-color),12%,90%);--scroll-thumb-color:hsl(var(--hue-color),12%,75%);--body-font:"Poppins",sans-serif;--big-font-size:2rem;--h2-font-size:1.25rem;--normal-font-size:.938rem;--smaller-font-size:.75rem;--mb-2:1rem;--mb-4:2rem;--mb-5:2.5rem;--mb-6:3rem;--z-back:-10;--z-fixed:100}
@media screen and (min-width:968px){:root{--big-font-size:3.0rem;--h2-font-size:2rem;--normal-font-size:1rem;--smaller-font-size:.875rem}}
body.dark-theme{--title-color:hsl(var(--hue-color),8%,95%);--text-color:hsl(var(--hue-color),8%,75%);--body-color:hsl(var(--hue-color),40%,8%);--container-color:hsl(var(--hue-color),24%,12%);--scroll-bar-color:hsl(var(--hue-color),12%,48%);--scroll-thumb-color:hsl(var(--hue-color),12%,36%)}
*,::before,::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:var(--header-height) 0 0 0;font-family:var(--body-font);font-size:var(--normal-font-size);background-color:var(--body-color);color:var(--text-color);transition:background-color .4s;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%239C92AC' fill-opacity='0.1'%3E%3Cpath d='M0 38.59l2.83-2.83 1.41 1.41L1.41 40H0v-1.41zM0 1.4l2.83 2.83 1.41-1.41L1.41 0H0v1.41zM38.59 40l-2.83-2.83 1.41-1.41L40 38.59V40h-1.41zM40 1.41l-2.83 2.83-1.41-1.41L38.59 0H40v1.41zM20 18.6l2.83-2.83 1.41 1.41L21.41 20l2.83 2.83-1.41 1.41L20 21.41l-2.83 2.83-1.41-1.41L18.59 20l-2.83-2.83 1.41-1.41L20 18.59z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")}
::-webkit-scrollbar{width:.6rem;background-color:var(--scroll-bar-color);border-radius:.5rem}
::-webkit-scrollbar-thumb{background-color:var(--scroll-thumb-color);border-radius:.5rem}
::-webkit-scrollbar-thumb:hover{background-color:var(--text-color-light)}
h1,h2,p{margin:0}
h1,h2{color:var(--title-color)}
ul{margin:0;padding:0;list-style:none}
a{text-decoration:none}
img{max-width:100%;height:auto;display:block}
.section-title{position:relative;font-size:var(--h2-font-size);color:var(--first-color);margin-top:var(--mb-2);margin-bottom:var(--mb-4);text-align:center}
.section-title::after{position:absolute;content:"";width:64px;height:.18rem;left:0;right:0;margin:auto;top:2rem;background-color:var(--first-color)}
.section{padding-top:3rem;padding-bottom:2rem}
.bd-grid{max-width:1024px;display:grid;margin-left:var(--mb-2);margin-right:var(--mb-2)}
.l-header{width:100%;position:fixed;top:0;left:0;z-index:var(--z-fixed);background-color:var(--body-color);box-shadow:0 1px 4px rgba(146,161,176,.15);transition:background-color .4s}
.nav{height:var(--header-height);display:flex;justify-content:space-between;align-items:center;font-weight:var(--font-semi)}
@media screen and (max-width:767px){.nav__menu{position:fixed;top:var(--header-height);right:-100%;width:80%;height:100%;padding:2rem;background-color:var(--container-color);transition:.5s}body.rtl-mode .nav__menu{left:-100%;right:auto}body.rtl-mode .show{left:0;right:auto}}
.nav__item{margin-bottom:var(--mb-4)}
.nav__link{position:relative;color:var(--text-color-light)}
.nav__link:hover{position:relative;color:var(--first-color)}
.nav__link:hover::after{position:absolute;content:"";width:100%;height:.18rem;left:0;top:2rem;background-color:var(--first-color)}
.nav__logo{color:var(--title-color)}
.nav__toggle{color:var(--title-color);font-size:1.5rem;cursor:pointer}
.nav__div{display:flex;align-items:center;gap:1rem}
.change-theme{font-size:1.25rem;color:var(--title-color);cursor:pointer}
.change-theme:hover{color:var(--first-color)}
.active-link{color:var(--first-color)}
.active-link::after{position:absolute;content:"";width:100%;height:.18rem;left:0;top:2rem;background-color:var(--first-color)}
.show{right:0}
.home{position:relative;row-gap:5rem;padding:4rem 0 5rem}
.home__data{align-self:center}
.home__title{font-size:var(--big-font-size);margin-bottom:var(--mb-5); min-height: 150px;}
.home__subtitle-scramble { font-size: var(--h2-font-size); color: var(--text-color); font-weight: 400; }
@media screen and (min-width: 968px) { .home__title { min-height: 220px; } }
.home__title-color{color:var(--first-color)}
.home__social{display:flex;flex-direction:column}
.home__social-icon{width:max-content;margin-bottom:var(--mb-2);font-size:1.5rem;color:var(--title-color)}
.home__social-icon:hover{color:var(--first-color)}
.home__img{position:absolute;right:0;bottom:0;width:260px}
.home__blob{fill:var(--first-color)}
.home__blob-img{width:360px}
.button{display:inline-block;background-color:var(--first-color);color:#fff;padding:.75rem 2.5rem;font-weight:var(--font-semi);border-radius:.5rem;transition:.3s}
.button:hover{background-color:var(--first-color-alt);box-shadow:0 10px 36px rgba(0,0,0,.15)}
.about__container{row-gap:2rem;text-align:center}
.about__subtitle{margin-bottom:var(--mb-2)}
.about__text{text-align:justify}
.about__img{justify-self:center}
.about__img img{width:200px;border-radius:.5rem}
.skills__container{row-gap:2rem;text-align:center}
.skills__subtitle{margin-bottom:var(--mb-2)}
.skills__text{margin-bottom:var(--mb-4)}
.skills__data{display:flex;justify-content:space-between;align-items:center;position:relative;font-weight:var(--font-semi);padding:.5rem 1rem;margin-bottom:var(--mb-4);border-radius:.5rem;background-color:var(--container-color);box-shadow:0 4px 25px rgba(14,36,49,.15)}
.skills__icon{font-size:2rem;margin-right:var(--mb-2);color:var(--first-color)}
.skills__names{display:flex;align-items:center}
.skills__bar{position:absolute;left:0;bottom:0;background-color:var(--first-color);height:.25rem;border-radius:.5rem;z-index:var(--z-back)}
.skills__edutech{width:90%}.skills__lms{width:85%}.skills__webdev{width:85%}.skills__elearning{width:80%}.skills__itinfra{width:80%}.skills__google{width:95%}.skills__microsoft{width:90%}.skills__ai{width:80%}.skills__programming{width:80%}
.skills__img{border-radius:.5rem}
.work__container{row-gap:2rem}
.work__item{box-shadow:0 4px 25px rgba(14,36,49,.15);border-radius:.5rem;overflow:hidden;background-color:var(--container-color);display:flex;flex-direction:column;transition:background-color .4s}
.work__item_link{display:block;overflow:hidden}
.work__img{transition:transform .5s ease}
.work__item_link:hover .work__img{transform:scale(1.1)}
.work__description{padding:1rem;font-size:var(--smaller-font-size);color:var(--text-color);line-height:1.6;flex-grow:1;text-align:justify}
.contact__input{width:100%;font-size:var(--normal-font-size);font-weight:var(--font-semi);padding:1rem;border-radius:.5rem;border:none;background-color:var(--input-color);color:var(--title-color);outline:none;margin-bottom:var(--mb-4)}
body.dark-theme .contact__input{background-color:var(--container-color)}
.contact__button{display:block;border:none;outline:none;font-size:var(--normal-font-size);cursor:pointer;margin-left:auto}
.footer{background-color:var(--container-color);color:var(--text-color);text-align:center;font-weight:var(--font-semi);padding:2rem 0;transition:background-color .4s}
.footer__title{font-size:2rem;margin-bottom:var(--mb-4);color:var(--title-color)}
.footer__social{margin-bottom:var(--mb-4)}
.footer__icon{font-size:1.5rem;color:var(--title-color);margin:0 var(--mb-2)}
.footer__icon:hover{color:var(--first-color)}
.footer__copy{font-size:var(--smaller-font-size);color:var(--text-color-light)}
.lang-switcher{display:flex;align-items:center;gap:.5rem;font-weight:var(--font-semi)}
.lang-switcher a{color:var(--text-color);cursor:pointer}
.lang-switcher a:hover,.lang-switcher a.lang-active{color:var(--first-color)}
@media screen and (max-width:320px){.home{row-gap:2rem}.home__img{width:200px}}
@media screen and (min-width:576px){.home{padding:4rem 0 2rem}.home__social{padding-top:0;padding-bottom:2.5rem;flex-direction:row;align-self:flex-end}.home__social-icon{margin-bottom:0;margin-right:var(--mb-4)}.home__img{width:300px;bottom:25%}.about__container{grid-template-columns:repeat(2,1fr);align-items:center;text-align:initial}.skills__container{grid-template-columns:.7fr;justify-content:center;column-gap:1rem}.work__container{grid-template-columns:repeat(2,1fr);column-gap:2rem;padding-top:2rem}.contact__form{width:360px;padding-top:2rem}.contact__container{justify-items:center}}
@media screen and (min-width:768px){body{margin:0}.section{padding-top:4rem;padding-bottom:3rem}.section-title{margin-bottom:var(--mb-6)}.section-title::after{width:80px;top:3rem}.nav{height:calc(var(--header-height) + 1.5rem)}.nav__list{display:flex;padding-top:0}.nav__item{margin-left:var(--mb-6);margin-bottom:0}.nav__toggle{display:none}.nav__link{color:var(--text-color)}.nav__link:hover,.active-link{color:var(--first-color)}.home{padding:8rem 0 2rem}.home__img{width:400px;bottom:10%}.about__container{padding-top:2rem}.about__img img{width:300px}.skills__container{grid-template-columns:repeat(2,1fr);column-gap:2rem;align-items:center;text-align:initial}.work__container{grid-template-columns:repeat(3,1fr);column-gap:2rem}}
@media screen and (min-width:992px){.bd-grid{margin-left:auto;margin-right:auto}.home{padding:10rem 0 2rem}.home__img{width:450px}}
body.rtl-mode{direction:rtl}
body.rtl-mode .home__img{left:0;right:auto}
@media screen and (min-width:576px){body.rtl-mode .home__img{left:-1rem;bottom:30%}}
@media screen and (min-width:768px){body.rtl-mode .home__img{left:-5rem;bottom:20%}}
@media screen and (min-width:992px){body.rtl-mode .home__img{left:-7.5rem;bottom:18%}}
@media screen and (max-width:575px){body.rtl-mode .home__social{align-self:flex-start}}
@media screen and (min-width:576px){body.rtl-mode .home__social{flex-direction:row-reverse}body.rtl-mode .home__social-icon{margin-left:var(--mb-4);margin-right:0}}
body.rtl-mode .about__container{text-align:right}
body.rtl-mode .skills__icon{margin-left:var(--mb-2);margin-right:0}
body.rtl-mode .contact__button{margin-right:auto;margin-left:0}
@media screen and (min-width:768px){body.rtl-mode .nav__item{margin-right:var(--mb-6);margin-left:0}body.rtl-mode .skills__container{text-align:right}}
.whatsapp-float{position:fixed;width:60px;height:60px;bottom:40px;left:40px;background-color:#25D366;color:#fff;border-radius:50px;text-align:center;font-size:30px;box-shadow:2px 2px 6px rgba(0,0,0,.25);z-index:100;display:flex;align-items:center;justify-content:center;animation:pulse 2s infinite;transition:transform .3s ease}
.whatsapp-float:hover{transform:scale(1.1);animation-play-state:paused}
@keyframes pulse{0%{transform:scale(.95);box-shadow:0 0 0 0 rgba(37,211,102,.7)}70%{transform:scale(1.05);box-shadow:0 0 0 10px rgba(37,211,102,0)}100%{transform:scale(.95);box-shadow:0 0 0 0 rgba(37,211,102,0)}}
body.rtl-mode .whatsapp-float{left:auto;right:40px}
.footer__visitors{font-size:var(--smaller-font-size);color:var(--text-color-light);margin-top:var(--mb-2);display:flex;align-items:center;justify-content:center;gap:.5rem}