/*<GOOGLE FONTS>*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');
/*<.GOOGLE FONTS>*/

/*<VARIABLES CSS>*/
:root {
    /*<Colors>*/
    --hue-color:242;
    /*<.Colors>*/

    /*<HSL Color Mode>*/
    --skin-color: hsl(223, 95%, 64%); --title-color: hsl(var(--hue-color), 8%, 95%); --text-color: hsl(var(--hue-color), 8%, 85%); --body-color: hsl(var(--hue-color), 19%, 5%); --box-color: hsl(var(--hue-color), 14%, 10%); --scroll-bar-color: hsl(var(--hue-color), 12%, 38%); --scroll-thumb-color: hsl(var(--hue-color), 12%, 26%); 
    /*<.HSL Color Mode>*/

    /*<Font and Typography>*/
    --body-font: 'Poppins', sans-serif;
    /*<.Font and Typography>*/

    /* <.5rem = 8px, 1rem = 16px, 1.5rem = 24px ...> */
    --biggest-font-size: 3rem; --h1-font-size: 2.25rem; --h2-font-size: 1.5rem; --h3-font-size: 1.25rem; --normal-font-size: 1rem; --small-font-size: .875rem; --smaller-font-size: .813rem; 
    /* <..5rem = 8px, 1rem = 16px, 1.5rem = 24px ...> */

    /*<Font Weight>*/
    --font-medium: 500; --font-bold: 600;
    /*<.Font Weight>*/

    /*<Margenes Bottom>*/
    --mb-0-25: .25rem; --mb-0-5: .5rem; --mb-0-75: .75rem; --mb-1: 1rem; --mb-1-5: 1.5rem; --mb-2: 2rem; --mb-2-5: 2.5rem; --mb-3: 3rem;
    /*<.Margenes Bottom>*/

    /*<Z Index>*/
    --z-fixed: 10; --z-modal: 100;
    /*<.Z Index>*/
}

/* <Responsive Typography> */
@media screen and (max-width: 1024px) {
    :root { --biggest-font-size: 2rem; --h1-font-size: 1.5rem; --h2-font-size: 1.25rem; --h3-font-size: 1.125rem; --normal-font-size: .938rem; --small-font-size: .813rem; --smaller-font-size: .75rem; }
}
/* <.Responsive Typography> */

/*<.VARIABLES CSS>*/

/*<BASE>*/
*       { margin:0; padding:0; box-sizing:border-box; }
html    { scroll-behavior:smooth; }
body,
button,
input   { font-family:var(--body-font); font-size:var(--normal-font-size); }
body    { background-color:var(--body-color); color:var(--text-color); }
h1, h2  { color:var(--title-color); font-weight:var(--font-bold); }
ul      { list-style:none; }
a       { text-decoration:none; }
img     { max-width:100%; height:auto; }
button  { cursor:pointer; }
button,
input   { border:none; outline:none; }
/*<.BASE>*/

/*<LAYOUT>*/
.container { max-width:1250px; margin-left:auto; margin-right:auto; }
.grid      { display:grid; }
/*<.LAYOUT>*/

/*<REUSABLE CSS CLASSES>*/
.section                { padding:6.5rem 0 2rem; }
.section__title         { text-align:center; font-size:var(--h1-font-size); margin-bottom:var(--mb-3); }
.section__title::before { content:attr(data-heading); display:block; font-size:var(--normal-font-size); font-weight:var(--font-medium); color:var(--skin-color); }
/*<.REUSABLE CSS CLASSES>*/

/*<SIDEBAR>*/
.sidebar                       { position:fixed; width:100px; height:100vh; background-color:var(--body-color); border-right:1px solid var(--box-color); }
.nav__logo                     { position:absolute; left:0; right:0; top:1.8rem; width:40px; height:40px; border-radius:50%; background-color:var(--skin-color); text-align:center; margin:auto; }
.nav__logo-text                { font-size:1.125rem; color:var(--title-color); font-weight:var(--font-bold); line-height:40px; }
.nav__menu                     { position:fixed; transform:rotate(-90deg) translateX(-100%); transform-origin:left top; width:100vh; }
.menu                          { display:flex; }
.nav__list                     { display:flex; flex-direction:row-reverse; margin:-2px auto 0 auto; }
.nav__link                     { float:right; height:100%; line-height:100px; padding:0 1rem; color:var(--title-color); font-weight:var(--font-medium); position:relative; transition:.4s; }
.nav__link.active-link::after,
.nav__link:hover::after        { position:absolute; content:''; width:6px; height:6px; background-color:var(--skin-color); border-radius:50%; bottom:1.8rem; left:0; right:0; margin:auto; }
.btn__share                    { position:absolute; bottom:1.8rem; left:0; right:0; text-align:center; }
.social__share                 { font-size:1.5rem; }
/* <Active Link> */
.nav__link.active-link,
.nav__link:hover               { color:var(--skin-color); }
/* <.Active Link> */
/*<.SIDEBAR>*/



/*<MAIN>*/
.main { margin-left: 100px; }

/*<Home Section>*/
.home                       { background:url('../img/jpg/home-bg-beta.jpg'); background-size:cover; background-position:center center; height:100vh; }
.home__container            { position:relative; height:100%; align-items:center; }
.home__social               { position:absolute; top:1.8rem; left:0; display:flex; align-items:center; column-gap:3.5rem; }
.home__social-follow        { font-weight:var(--font-medium); position:relative; }
.home__social-follow::after { content:''; position:absolute; width:1rem; height:2px; background-color:var(--text-color); right:-45%; top:50%; }
.home__social-links         { display:inline-flex; column-gap:1rem; }
.home__social-link          { font-size:1.08rem; color:var(--text-color); transition:.3s; }
.home__social-link:hover    { transform:translateY(.25rem); }
.home__img                  { display:none; }
.home__title                { font-size:var(--biggest-font-size); }
.home__subtitle             { font-size:var(--h3-font-size); font-weight:var(--font-medium); margin-bottom:var(--mb-0-75); }
.home__description          { max-width:450px; margin-bottom:var(--mb-2); }
.my__info                   { display:flex; column-gap:1.8rem; position:absolute; left:0; bottom:1.8rem; }
.info__item                 { display:flex; align-items:center; }
.info__title,
.info__subtitle             { font-size:var(--small-font-size); }
.info__title                { font-weight:var(--font-medium); }
.info__icon                 { font-size:1.8rem; color:var(--skin-color); margin-right:var(--mb-0-75); }
/*<.Home Section>*/

/*<Buttons>*/
.button               { display:inline-flex; align-items:center; column-gap:.5rem; background-color:var(--skin-color); color:var(--title-color); padding:.75rem 1.4rem; border-radius:.25rem; font-weight:var(--font-medium); position:relative; z-index:1; }
.button::after        { position:absolute; content:''; left:0; top:0; width:100%; height:100%; background-color:#343a40; z-index:-1; transform:scale(0); border-radius:.25rem; transition:.3s;  }
.button:hover::after  { transform:scale(1); transform-origin:center; }
.button__icon         { font-size:1.25rem; }
/*<.Buttons>*/

/*<About Section>*/
.about__container   { grid-template-columns:repeat(2, 1fr); column-gap:4rem; align-items:center; }
.about__img         { width:480px; border-radius:0.75rem; justify-self:center; }
.about__heading     { font-size:var(--h3-font-size); margin-bottom:var(--mb-0-75); }
.about__description { text-align:justify; padding-right:6rem; margin-bottom:var(--mb-2); }
.about__info        { grid-template-columns:repeat(3, 140px); column-gap:.5rem; margin-bottom:var(--mb-3); }
.about__box         { text-align:center; border-radius:.25rem; padding:1rem 1.25rem; background-color:var(--box-color); }
.about__icon        { font-size:1.5rem; color:var(--skin-color); margin-bottom:var(--mb-0-75); }
.about__title       { font-size:var(--small-font-size); }
.about__subtitle    { font-size:var(--smaller-font-size); }
/*<.About Section>*/

/*<Qualification Section>*/
.qualification__container          { grid-template-columns:repeat(2, 340px); column-gap:3rem; justify-content:center; }
.qualification__title              { font-size:var(--h1-font-size); font-weight:var(--font-medium); margin-bottom:var(--mb-2); }
.timeline__item                    { position:relative; padding-left:3rem; margin-bottom:var(--mb-2-5); }
.timeline__item:last-child         { margin-bottom:0; }
.timeline__item::before            { content:''; width:1px; position:absolute; left:.48rem; top:0; height:100%; background-color:var(--skin-color); }
.circle__dot                       { position:absolute; left:0; top:0; height:1rem; width:1rem; border:2px solid var(--skin-color); border-radius:50%; background-color:var(--skin-color); transition:.3s; }
.timeline__item:hover .circle__dot { background-color:var(--body-color); }
.timeline__title                   { font-size:var(--normal-font-size); font-weight:var(--font-medium); margin-bottom:var(--mb-0-25); }
.timeline__text                    { font-size:var(--smaller-font-size); margin-bottom:var(--mb-1); }
.timeline__date                    { display:flex; align-items:center; column-gap:.4rem; font-size:var(--small-font-size); color:var(--skin-color); }
/*<.Qualification Section>*/

/*<Skills Section>*/
/*<.Skills Section>*/

/*<Work Section>*/
/* <Active Item Work> */
/* <.Active Item Work> */
/* <Portfolio Popup> */
/* <.Portfolio Popup> */
/*<.Work Section>*/

/*<Services Section>*/
/* <Active Modal>*/
/* <.Active Modal>*/
/*<.Services Section>*/

/*<Testimonial Section>*/
/* <Swiper Class> */
/* <.Swiper Class> */
/*<.Testimonial Section>*/

/*<Contact Section>*/
/*<.Contact Section>*/
/*<.MAIN>*/

/*<FOOTER>*/
/*<.FOOTER>*/

/*<SCROLL UP>*/
/* <Show Scroll Up>*/
/* <.Show Scroll Up>*/
/*<.SCROLL UP>*/

/*<SCROLL BAR>*/
/*<.SCROLL BAR>*/

/*<BREAKPOINTS>*/
/* <For Large Devices> */
@media screen and (max-width: 1408px) {}
@media screen and (max-width: 1216px) {}
@media screen and (max-width: 1024px) {}
/* <.For Large Devices> */

/* <For Medium Devices> */
@media screen and (max-width: 768px) {}
@media screen and (max-width: 576px) {}
/* <.For Medium Devices> */

/* <For Small Devices> */
@media screen and (max-width: 350px) {}
/* <.For Small Devices> */

/*<.BREAKPOINTS>*/