/* GLOBAL */
::-webkit-scrollbar { width: 0; }
::selection         { background: #000; color: #FFF; }
*     { margin: 0; padding: 0; text-decoration: none; text-rendering: optimizelegibility; -webkit-font-smoothing: antialiased; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
html  { overflow-x: hidden; width: 100%; scroll-behavior: smooth; }
body  { margin: 0; overflow-x: hidden; font-family: "montserrat", serif; width: 100%; }

a.blink       { display: inline-block; padding: 10px 25px; border-radius: 10px; background-color: #2e83ff; margin: 30px 0; color: #FFFFFF; transition: all 0.6s ease 0s; font-weight: 600; }
a.blink:hover { box-shadow: 0 0 10px 1px rgba(46,131,255,0.45); transform: scale(0.95); }
.loaded       { opacity: 1; }
/* END GLOBAL */

/* NAVBAR */
nav                           { text-transform: uppercase; text-decoration: none; z-index: 1000; width: 98%; position: fixed; top: 10px; background-color: #f9f9f9; color: #2E83FF; height: 120px; line-height: 120px; transition: all 0.6s ease 0s; border-radius: 25px; margin: 10px 0; left: 50%; transform: translate(-50%); }
nav .main                     { z-index: 1001; }
nav .main ul                  { font-size: 16px; float: right; display: inline-block; list-style: none; overflow: hidden; margin-right: 20px; }
nav .main ul li               { padding: 0 20px; text-align: center; display: inline-block;}
nav .main ul li a             { color: #2E83FF; position: relative; }
nav .main ul li a:after       { position: absolute; content: ""; bottom: -6px; left: unset; right: 0; width: 0; height: 2px; background: #fff; transition: .5s cubic-bezier(.785,.135,.15,.86); }
nav .main ul li a:hover:after { width: 100%; left: 0; background: #2E83FF; }
nav .main .logo               { display: inline-block; text-align: left; font-size: 28px; font-weight: 600; margin-left: 20px; }
nav .main .logo a             { color: inherit; }
nav .menu                     { display: none; transition: all 0.6s ease 0s; }
.progress                     { position: fixed; width: 98%; height: 80px; top: 10px; background: #fff; border-radius: 25px !important; left: 50%; transform: translate(-50%); z-index: 999; }
.progress-bar                 { height: 80px; width: 0; transition: all 0.1s ease 0s; border-radius: 25px !important; top: 0; background-color: #2E83FF; }
.active                       { transform: translateY(0%) !important; opacity: 1; }
.scrolled                     { height: 80px; line-height: 80px; top: 0; background-color: #20262f; color: #FFF !important; }
.scrolled ul li a             { color: #FFF !important; }

.mobile                     { display: none; position: fixed; background-color: #2e88ff; z-index: 10; max-height: 40px; top: 20px; margin: 20px; border-radius: 25px !important; width: calc(100% - 35px); transition: all .4s ease 0s; overflow: hidden; }
.mobile.expanded            { width: 100%; max-height: 1000px; margin: 0; top: 0; border-radius: 10px 10px 0 0; z-index: 10; text-align: center; }
.mobile ul                  { display: block; position: relative; padding-top: 150px; padding-bottom: 30px; text-align: center; color: #fff; list-style: none; transition: all .3s ease 0s; }
.mobile ul li               { padding: 10px 30px; font-size: 22px; font-weight: 500; }
.mobile ul li a             { color: #FFFFFF; position: relative; }
.mobile ul li a:after       { position: absolute; content: ""; bottom: -6px; left: unset; right: 0; width: 0; height: 2px; background: #fff; transition: .5s cubic-bezier(.785,.135,.15,.86); }
.mobile ul li a:hover:after { width: 100%; left: 0; background: #FFFFFF; }
nav.scrolled ~ .mobile ul   { padding-top: 100px; }
/* END NAVBAR */

/* MAINPAGE */
.mainpage           { overflow: hidden; height: 85vh; background-color: #fff; transition: all 0.0s ease 0s; }
.mainpage div       { position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.mainpage div img   { display: block; width: 280px; margin: 30px auto; }
.mainpage div p     { text-decoration: none; text-transform: uppercase; font-size: 24px; font-weight: 300; letter-spacing: 2px; text-align: center;}
/* END MAINPAGE */

/* ABOUT */
.about      { overflow: hidden; min-height: 60vh; background-color: #fff; max-width: 60%; margin: 200px auto 50px auto; text-align: center; padding: 50px 0; }
.about h1   { text-decoration: none; text-transform: uppercase; font-size: 24px; font-weight: 600; letter-spacing: 2px; text-align: center; margin-bottom: 20px; }
.about h3   { text-decoration: none; font-size: 20px; font-weight: 300; text-align: center; margin: 10px 0; }
/* END ABOUT */

/* WHY ME */
.whyme            { background-color: #2E83FF; height: 500px; background-size: cover; color: #fff; }
.whyme .center    { position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; }
.whyme .center h2 { font-weight: 600; font-size: 36px; }
.whyme .center h3 { font-weight: 400; font-size: 24px; margin: 0 auto; max-width: 50%; }
/* END WHY ME*/

/* PROJECTS */
.pj                                          { background-color: #fff; overflow: hidden; margin-top: 100px; }
.pj ::selection                              { background: transparent; color: #000; }
.pj h1                                       { text-align: center; color: #000; font-size: 24px;}
.pj articles                                 { display: flex; flex-wrap: wrap; margin: 50px; align-items: center; justify-content: center; list-style-type: none;}
.pj articles article                         { flex: 0 0 40%; max-width: 45%;  margin: 20px; }
.pj articles article .internal               { position: relative; text-align: center; padding: 30px; transition: all 0.6s ease 0s; border-radius: 15px; z-index: 5; background-color: #FFFFFF; box-shadow: 0 0 6px 1px rgba(0,0,0,0.2);}
.pj articles article .internal .description  { font-size: 30px !important;}
.pj articles article .internal .icon         { border-radius: 100%; background-color: #fff; margin: 20px; display: inline-block;}
.pj articles article .internal .icon i       { font-size: 30px; padding: 25px; transition: all 0.6s ease 0s;}
.pj articles article .internal h1            { text-align: center; margin: 10px; font-size: 24px; color: #000; font-weight: 600;}
.pj articles article .internal p             { text-align: center; margin: 10px; font-size: 18px; color: #000; font-weight: 400;}
.pj articles article .internal i             { transition: all 0.6s ease 0s;}
.pj articles article .selector               { position: relative; margin-top: -27px; background-color: #2E83FF; border-radius: 15px; height: 55px; text-align: center; color: #fff; z-index: 1; transition: all 0.6s ease 0s; box-shadow: 0 2px 6px 1px rgba(0,0,0,0.2); }
.pj articles article .selector i             { position: relative; margin-top: 28px; font-size: 28px; transition: all 0.6s ease 0s; }
.pj articles article .selector.selected      { background-color: #FF123A; }
.pj articles article .selector.selected i    { transform: rotate(180deg); }
/* END PROJECTS */

/* COMMERCIAL */
.commercial                     { background-color: #20262F; margin: 100px 0 50px 0; text-align: center; padding: 50px; }
.commercial h1                  { color: #FFFFFF; padding: 30px; }
.commercial .cards              { display: flex; max-width: 1250px; margin: 0 auto; align-content: space-between; flex-wrap: wrap; flex-direction: row; justify-content: center; padding: 30px; text-align: center!important; }
.commercial .cards .card        { display: block; flex: 1 0 21%;  padding: 12px 30px; border-radius: 15px; background-color: rgba(51,51,51,0.4); backdrop-filter: blur(20px); color: #fff; margin: 10px; }
.commercial .cards .card .tag   { padding: 3px 15px; font-size: 20px; }
.commercial .cards .card img    { display: inline-block; height: 60px; vertical-align: middle; padding: 20px; }
/* END COMMERCIAL */

/* NUMBERS */
.numbers                { margin: 100px 0; text-align: center; padding: 10px; }
.numbers ul             { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; list-style-type: none; overflow: hidden; margin: 10px auto; }
.numbers ul li          { margin: 20px 20px 0 20px; padding: 5px; }
.numbers ul li .round   { padding: 10px 40px; border-radius: 15px; font-size: 18px; background-color: #2e83ff; color: #FFFFFF; font-weight: 600; margin: 10px; box-shadow: 0 3px 6px 2px rgba(46,131,255,0.5); }
/* END NUMBERS */

/* FEEDBACKS */
.feedbacks                                    { background-color: #2E83FF; padding: 50px 20px; }
.feedbacks h1                                 { color: #FFFFFF; text-align: center; margin-bottom: 10px; }
.feedbacks h3                                 { text-align: center; font-weight: 400; font-size: 18px; margin: 0 auto; max-width: 70%; color: #FFFFFF; }
.feedbacks articles                           { position: relative; display: block; text-align: center; margin: 0 auto; }
.feedbacks articles article                   { display: inline-block; margin: 50px 20px 0 20px; padding: 20px; border-radius: 15px; border: 1px solid #ffffff; background-color: #FFFFFF; text-align: center; max-width: 500px; transition: .3s; }
.feedbacks articles article .profile          { display: inline-block;  padding: 10px 20px; box-shadow: 0 0 6px 1px rgba(0,0,0,0.2); border-radius: 25px; }
.feedbacks articles article .profile img      { display: inline-block; max-height: 42px; max-width: 42px; border-radius: 50px; vertical-align: middle; margin: 0 10px 0 0; }
.feedbacks articles article .profile h1       { display: inline-block; font-size: 28px; color: #000000; font-weight: 800; vertical-align: middle; margin: 0; }
.feedbacks articles article .profile h1 small { display: block; font-size: 14px; color: #666666; font-weight: 300; }
.feedbacks articles article p                 { margin-top: 10px; }
/* END FEEDBACKS*/

/* BLOG */
.blog     { padding: 75px 0 45px 0; text-align: center; }
.blog h4  { font-weight: 500; }
/* END BLOG */

/* PREFOOTER */
.prefooter                            { background-color: #2E83FF; padding: 50px 20px; text-align: center; }
.prefooter p                          { color: #fff; font-size: 24px; text-transform: uppercase; padding: 0.4em 1em; opacity: 0; }
.prefooter .block                     { position: relative; display: inline-block; }
.prefooter .block p                   { animation: showblock 0.0001s linear forwards; animation-delay: 1.4s; color: #fff; font-size: 24px; text-transform: uppercase; padding: 0.4em 1em; opacity: 0; font-weight: 500; }
.prefooter .block:after               { top:0; left:0; position: absolute; content: ''; width: 0; height: 100%; background: #20262f; animation: reveal 1.5s cubic-bezier(0.19,1,0.22,1) forwards; animation-delay: .5s; }
.prefooter .block:nth-child(2):after  { animation-delay: .7s; }
/* END PREFOOTER */

/* FOOTER */
footer                            { padding: 80px 10%; background: #20262f; position: relative; }
footer section                    { display: inline-table; margin: 0 20px 0 0;}
footer section:nth-child(1)       { text-align: left; }
footer section:nth-child(2)       { text-align: right; margin-right: 0; float: right; }
footer section h3                 { color: #f9f9f9; font-size: 30px; font-weight: 500; }
footer section .title             { font-size: 14px; color: rgba(255,255,255,0.6); text-transform: uppercase; letter-spacing: 1px; margin: 0 0 14px; }
footer section a                  { display: block; text-align: right; text-decoration: none !important; color: rgba(255,255,255,0.75); transition: 0.3s; margin: 6px 0; font-size: 16px; }
footer small                      { display: inline-block; color: #f9f9f9; margin-top: 75px; width:100%; }
footer small span                 { float: left; font-size: 14px; color: rgba(255,255,255,0.5); }
footer .social                    { display: inline-block; width: 45px; height: 45px; background: #f1f1f1; margin: 10px; border-radius: 30%; box-shadow: 0 5px 15px -5px #00000070; color: #3498db; overflow: hidden; position: relative; text-align: center; }
footer .social i                  { line-height: 45px; font-size: 22px; transition: .2s linear; }
footer .social:hover i            { transform: scale(1.3); color: #f1f1f1; }
footer .social::before            { content: ""; position: absolute; width: 120%; height:120%; transform: rotate(45deg); left: -110%; top: 90%; }
footer .social:hover::before      { animation: sliderbtn .7s 1; top:-10%; left:-10%}
footer .stg::before               { background: #14171A; }
/* END FOOTER */


@media only screen and (max-width: 1124px) {
  nav .main                   { display: none; }
  nav .menu                   { display: block; text-align: center; font-size: 22px; line-height: 120px; z-index: 10000; }
  .scrolled i                 { line-height: 80px !important; }
  .mobile                     { display: inline-block; }
  .about                      { max-width: 95%; }
  .whyme h3                   { max-width: 95% !important; }
  .pj articles                { margin: 50px 0; }
  .pj articles article        { flex: 0 0 100%; max-width: 95%;  margin: 20px 10px; }
  .commercial .cards .card    { flex: 1 0 100%; }
  .feedbacks h3               { max-width: 70%; }
  footer                      { text-align: center; padding-top: 75px; padding-bottom: 75px; }
  footer small                { display: block; text-align: center; margin: 20px 0 10px; }
  footer section              { margin: 6px 0; text-align: center !important; }
  footer section:nth-child(1) { width: 100% !important; }
  footer section:nth-child(2) { float: none; text-align: center; }
  footer section a            { text-align: center; }
}

@keyframes reveal {
  0% { left: 0; width: 0; }
  50% { left: 0; width: 100%; }
  100% { left: 100%; width: 0; }
}

@keyframes showblock {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slider {
  0%  { left: -110%; top: 90% }
  50% { left: 10%; top: -30% }
  100% { top: -10%; left: -10% }
}

/*@media (prefers-color-scheme: dark) {*/
/*  .mainpage { background-color: #14171A; }*/
/*}*/