/* experimental code */
.bounce {
  animation: bounce 7s  ease;
  animation-delay: 1s;
  animation-iteration-count: infinite;
}

@keyframes bounce {
  0%,
  25%,
  50%,
  75%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px) ;
  }
  60% {
    transform: translateY(-5px) ;
  }
}


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

/*==================== VARIABLES CSS ====================*/
:root {
    --header-height: 3rem;

    /*========== Colors ==========*/
    /* Change favorite color */
    --hue-color: 75; /*Purple 250 - Green 142 - Blue 230 - Pink 340    this alone will control the color theme of your full website*/

    /* HSL color mode */
    --first-color: hsl(var(--hue-color), 69%, 61%);
    --first-color-second: hsl(var(--hue-color), 69%, 61%);
    --first-color-alt: hsl(var(--hue-color), 57%, 53%);
    --first-color-lighter: hsl(var(--hue-color), 92%, 85%);
    --title-color: hsl(var(--hue-color), 8%, 15%);
    --text-color: hsl(var(--hue-color), 8%, 45%);
    --text-color-light: hsl(var(--hue-color), 8%, 65%);
    --input-color: hsl(var(--hue-color), 70%, 96%);
    --body-color: hsl(var(--hue-color), 60%, 99%);
    --container-color: #fff;
    --scroll-bar-color: hsl(var(--hue-color), 12%, 90%);
    --scroll-thumb-color: hsl(var(--hue-color), 12%, 80%);

    /*========== Font and typography ==========*/
    --body-font: 'Poppins', sans-serif;

    /* .5rem = 8px, 1rem = 16px, 1.5rem = 24px ... */
    --big-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;

    /*========== Font weight ==========*/
    --font-medium: 500;
    --font-semi-bold: 600;

    /*========== Margenes Bottom ==========*/
    /* .25rem = 4px, .5rem = 8px, .75rem = 12px ... */
    --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;

    /*========== z index ==========*/
    --z-tooltip: 10;
    --z-fixed: 100;
    --z-modal: 1000;
}

/* Font size for large devices */
@media screen and (min-width: 968px) {
    :root {
        --big-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;
    }
}

/*========== Variables Dark theme ==========*/
body.dark-theme{
 /* HSL color mode */

 --first-color-second: hsl(var(--hue-color), 30%, 8%);


 --title-color: hsl(var(--hue-color), 8%, 95%);
 --text-color: hsl(var(--hue-color), 8%, 75%);

 --input-color: hsl(var(--hue-color), 29%, 16%);
 --body-color: hsl(var(--hue-color), 28%, 12%);
 --container-color:hsl(var(--hue-color),29%,16%);
 --scroll-bar-color: hsl(var(--hue-color), 12%, 48%);
 --scroll-thumb-color: hsl(var(--hue-color), 12%, 36%);

}

/*========== Button Dark/Light ==========*/

.nav__btns{
  display: flex;
  align-items: center;
}

.change-theme{
  font-size: 1.25rem;
  color: var(--title-color);
  margin-right: var(--mb-1);
  cursor: pointer;
}

.change-theme:hover{
  color: var(--first-color);
}
/*==================== BASE ====================*/
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0 0 var(--header-height) 0;
  font-family: var(--body-font);
  font-size: var(--normal-font-size);
  background-color: var(--body-color);
  color: var(--text-color);
}

h1, h2, h3, h4 {
  color: var(--title-color);
  font-weight: var(--font-semi-bold);
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
}

/*==================== REUSABLE CSS CLASSES ====================*/
.section {
  padding: 2rem 0 4rem;
}

.section__title {
  font-size: var(--h1-font-size);
  color: var(--title-color);
}

.section__subtitle {
  display: block;
  font-size: var(--small-font-size);
  margin-bottom: var(--mb-3);
}

.section__title, 
.section__subtitle {
  text-align: center;
}

/*==================== LAYOUT ====================*/
.container {
  max-width: 768px;
  margin-left: var(--mb-1-5);
  margin-right: var(--mb-1-5);
}

.grid {
  display: grid;
  gap: 1.5rem;
}

.header {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: var(--z-fixed);
  background-color: var(--body-color);
}

/*==================== NAV ====================*/
.nav{
  max-width: 968px;
  height: var(--header-height);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.nav__logo,.nav__toggle{
  color: var(--title-color);
  font-weight: var(--font-medium);
}

.nav__logo:hover{
  color:var(--first-color);
}

.nav__toggle{
  font-size: 1.1rem;
  cursor:pointer;
}

.nav__toggle:hover{
  color: var(--first-color);
}

@media screen and (max-width: 767px) {
  
  .nav__menu{
    position: fixed;
    bottom: -100%;
    left: 0;
    width: 100%;
    background-color: var(--body-color);
    padding: 2rem 1.5rem 4rem;
    box-shadow: 0 -1px 4px rgba(0, 0, 0, .15);
    border-radius: 1.5rem 1.5rem 0 0;
    transition: .3s;
  }
}

.nav__list{
  grid-template-columns: repeat(3,1fr);
  gap:2rem;
}

.nav__link{
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: var(--small-font-size);
  color: var(--title-color);
  font-weight: var(--font-medium);
}

.nav__link:hover{
  color:var(--first-color);
}

.nav__icon{
  font-size: 1.2rem;
}

.nav__close{

  position: absolute;
  right: 1.3rem;
  bottom: .5rem;
  font-size: 1.5rem;
  cursor: pointer;
  color:var(--first-color);
}
.nav__close:hover{
  color:var(--first-color-alt);
}

/* show menu */
.show-menu{
  bottom: 0;
}

/* Active link */
.active-link{
  color: var(--first-color);
}

/* Change background header */
.scroll-header{
  box-shadow: 0 -1px 4px rgba(0, 0, 0, .15);
}

/*==================== HOME ====================*/
.home__container{
  gap: 1rem;
}
.home__content{
  grid-template-columns: .5fr 3fr;
  padding-top: 3.5rem;
  align-items: center;
}
.home__social{
  display: grid;
  grid-template-columns: max-content;
  row-gap: 1rem;
}
.home__social-icon{
  font-size: 1.25rem;
  color: var(--first-color);

}

.home__social-icon:hover{
  color: var(--first-color-alt);
}
.home__blob{
  width: 200px;
  fill: var(--first-color);
}

.home__blob-img{
  width: 170px;
}
.home__data{
  grid-column: 1/3;
}
.home__title{
  font-size: var(--big-font-size);
}
.home__title__KSK{display: inline;
  color:orange;
  -webkit-text-stroke: 1px black;
}
.home__title__SKILL{display: inline;
  background-image: url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxUHExYUBxUXFxYYGSAbGRkZGCMbHRcYIBohGh0gHyIcHyshHCInIh8cIjIjJissLzAvGSE1PDUuOSkuLywBCgoKDg0OHBAQHC8nISYuOi4wOSwuNzAsLjcwMC43Li4uOjAuLDEuLDcuLi4uLi4uLjAxNy4uLi4uLi4vLi4uL//AABEIAQMAwgMBIgACEQEDEQH/xAAcAAEAAgIDAQAAAAAAAAAAAAAABgcEBQECAwj/xABHEAABAwIEAwUDCAgEBQUBAAABAAIDBBEFBhIhBzFBEyJRYXEyQoEUIzNSYnKRoRUWQ4KSorHBJFNUgzRjc8LRFzZEw/AI/8QAGQEBAAMBAQAAAAAAAAAAAAAAAAECAwQF/8QAMBEAAgECAwQKAgIDAAAAAAAAAAECAxESITEEUXHwEyIyQWGBkbHB0aHhQvEUM2L/2gAMAwEAAhEDEQA/ALrREQBERAEREAREQBERAEREAREQBERAEREAREQBERAEREAREQBERAEREAREQBERAEREAREQBERAEREAREQBERAEREAREQBERAESyWQBEslkARLJZAESyWQBEslkARLJZAESyWQBEslkARLJZAESyWQBEslkARLJZAESyID2REQBERAEREAREQHC5XCjOO57oMCuK+oZqHNjPnHA+BDL6fjZIpt2SBJkuq/bxFlxD/2/htXMOj3gRMd6OOoLzkzdif7WkpIPKWsYT/KVp0UgWIuVXkOacRkPcjw5/kyr3/os6LNVdBviGFSafrQVEc1/RvdKjopeHqCarhROk4hUcjgzEHPppD7lTG6E/i4aP5lKIpBMAYiCDuCDcEeRCrKLWqB6oiKAEREAREQBERAEREAREQBERAERcE25oAobm3iBT5fd2NOHT1JNmwxbnUeQcQDpJ8AC7cbKKZ24hPxJ0lPlWQRxMHz1WSQ1o5WjI333ALbucfYHvKtocSZC4RYe90MbyGzVBF5ntce+TZ3cZ1MbHbgd5z110dlbzlzxBJsy5lmxIkZqqXRN/wBHSEauotK+5Y3pcOLz9hq1mXq+StnZBlKGnpXuvoe4drKdLS4jtZGusSAbBrWC/gt9gGV6YTVeE4y0MnLtVPUAd5zAA5oF9hdo1FreffF7tBUsyRwuGXKgVFdMJXsv2bWs0BpILS43cbmxIA6X67W2dSnCLXpuYKzraCfGcNFfNUTVHzpZNG4ucIWgEhxu4i27DsABrHhdefDvLTMflldWxl1PFC9znNJaA8AFo1DrzNvAKecMKr9DYpXUEuzXSPfGOl2uNvi6NzT/ALasPNrxSUFU6MAaaeUgDbfs3FVntEovAu/TgwfPsmXGyYTDW00ZL+1eyd1yQGC+k6eTRyBPmPFdsh4JJihnkp55KaKKJ0j547gNc2xDTpc25tqNr+6rR4DydpQSNPu1Dh8DHG7+5XrxmxVuD4eYYLNM7gyzRazB33m3gQA0/fUutJydJbwV9BmjEcOo4psSkhqKeoc5jYahvaOOglr73aCRta5ceY2Wxy9mejkdfDpJcLmJ30u7WleftMds31sy1/aUsquH4x3C6OAv7KWGNrmutcanNvI0jY2JPPncA+RhuOZRhyNSyHFyypqpx2cEYaQGbgueN9RcNtxbchvJxRSpTuu+/dzYFkUmbn4fpbmxjY2Otoqojqpn3ta7ucRN9tW3PvKXseHgFpuDyIXz5UVU/DaSOCOZszZI2vnpntvG0u9pm5Iue93mgdNQOymmU8ebGwy5U1yQN3noHG8tPfm6C57zOvZ8jvpsbtXPUoWWJaAtNFgYViMeLxMlw54fG8Xa4df7gg7EHcEEFZ652rAIiIAiIgCIiAIiIAiIgCqDidnA4i99BhEgZEwH5XPzDWg2LBbnuQ0gbucQz6ylPE/NLsu04Zh9zUVB7OEN3cOjnAdSLgAfWc3zVFYlC6CN0VIC6OFwNRK0EtdOdQGp31G95jCdidbvf27Nlo3678vsGxo4Y39hJjEM0eGdqWNLNy54Fi55G7nHqQOTXNZ7NlM8L4PMqZWSiqbLSkhzdLe9IzmBqB07jYuHPfYdOnBnBXYpBVsxRhdSTBgAd7LpBe7meBA094dQ3e7dsaGvqeEtX2NRqmo5CXMHi2+5Z0bILjU3YO2O1wRrOcnJwi81+f2CQcacEcGRYhht2y07gHObzDNV2O/cf+T3X5KXZFzO3NNM2ZthIO7Kwe7IBvb7J9oeR8QVnUlXBminLqZzZYZWlp8wRZzSObT0IO4VFYHiMnDTEpI6skxB2iUfXi5skA+sAQ74ub1WEI9LBw/ktPoG04iTnLGOMqo+REUx822MMgHq1h/iVocQ5wMLqnMIIdA4A+IcLf3UF490PbMpamGxb3oyRvfUA9h9O6/8QsltecVyy4uPejj7M+kUoaPxYGn4q7jihCfjYHpwAkvT1LfCYH8Y2j/tUb4rVf6xYrDSMN2sdHDt9eVzS8/gWD90rc8BXCnhrJJNmhzL+WlrifyKivDCJ+YMWZNPzDpKiTrYm9v53t/BXStVnPcvgF/V9YzDIny1ZDY42lzj4NA//bKn8m6+IOKura8EQ09ixh5NNz2LfUG8h+0B0IXTjVmw1knyGgJ0RkGa3vybFrPMN2J+0R9VWNkDABlWiZHPYSEdpMftkXNz4NADb+DVio9HTxPWWnAEd4jcNn5lmFRhUjGSFoa9sl9LrcnAtBINtrW3sOXWvnYUcGqI2ZIklnrIWvfO+IDsxbctaCe9b2XC5DjYDvbCT50z7LmSUUGSrkSHQ6Vuxk8Qw+7GBcl/UA2sN3beuyi/KODzswG7qlzWmSRg7zwHDWG9Q1rNQAG9rn2itIznCKjJ66L7Bi5YzK2YPrsIbYXBxClbvY/6mIc77XcPeAN+825tGmqG1TGvpnBzHAOa4G4c0i4IPUEL5ZyvjMuAzNqML7xjHfA9l0RIaWvtyaTYXPJ2nrZXlk3E46R8cdCb0lUHS0v/ACpBvLAegsbuaOlpG+6FTaaOF3XPgCdoiLkAREQBERAEREAXCKK8TMXOCYdPJEbPc3s2HqHPOm48wCXfuqYpyaSBUWaMwHFqior2HuRn5NSeGog3kH3Wa5AejpYvBbDKlFVYZTCpyFUCcAD5TSuZyl076WmxcLci0hxDdi7kNDNl+fETFR4PEXvp4BLK24aRLMWyP3cQCQ10TLX/AGR52Vm8IMoT5cbPLjA0Pm0AR3BLWs1buLSRc6tgDsB52Ho1XGFPJrhvXOYO2WeLFNiJEeNj5LKDY6zeO42I1WGg7bh4FuVypXmPAoc005hrLFru8x4sSx1u69p8d/QgkcitRnXh9T5pBf8ART22laPa8A8e+PwI6HoqldNifDOQM1FsZPdBu+CXr3b20nqQNLvHZYRpwqZ03Z7n8A6UdfV8Max0b9xcF7D9HPHyD2+B8HcwQQb2IUx4j4ZFnSjZiWX+86NtpG+8Yxu5rh0fGbm3gXc+6vemzFQ8TIRTY6BBU/szfk/xiedjfa8btz52uojQVNVwrrCyvaXwye0B7E0Y21svsHtvyPjY7EOW2cpXtaa/INzlit/W3Bqihl701OzXF4uY064wPQtMfoW+K1+Ra35Rg+Kwk+wwyj0dHbb4x/mvCqc3JNfBXYGddFPdzNPLs3G0sVuYLOYafBo5tK1seJQZdqMSigka6CaCaGIs7zSXjVFy+rfQT0N1bDdO2jzXrmDdZOrP0bgeJSA7vf2Q9XsZHt/GT8Fl8N6luVMNq8RnA1PcIoQffLdm28i9xv5Rk9FCf02yLDTSMJ7R1V2zhbnGIWtaPXWL28gt/jDTjr6LCsvua9kLG6ntN2Ole3XLLcbFrQXfEvHMhWlG909G7vggZfCjLhxuofXYwbxQuLy5+wfP7ZJJ6NvrJ8S3zXTiHn2XNMnyXAtXYFwYA0d+pdew256SeTevM+A4zTjoq2xYTkoOfCzuEs9qpk5u5baL3cXbAm52aLmTYNh1HwujE+YHiSse3usZ3nNB5tjB5DoZHWvy25GjfWxyV3/FfIJFw2yO3KsfaVgDqmQd93MRt56Gnw5XPUjwAtk5p4hUeXLtmf2sw/ZRWc4H7RvpZ+8b25AqqMXz1iGc5fk+Eh0bX+zDDfUR9uTY28T3W2O6muRuE0WG6ZcxaZZBuIh9Ew+f+YfXu+R2KxnTSeOq89yBq4pa7PTHyVOjD8OILpXAAGVlrnvOALxa/e7rLHk61lpcjVQqHT4dSSagXmehlIItPEdTDZwBGto3Fhyf9ZW9nrBX4/QzU9EQ172jTfYEte1+k+AOnT8V8/S4JXZWcyqqoHx9jI0hzrW1A6gNibg2IJG29uovelhqRayW5c6g+kMvYoMap4p4xp1t7zTzY8d17T5tcC0+i2ah2TqxoqKiOA/NTNjrIPuTi0gH+40u/wB1TFcMlZgIiKAEREAREQHCrLjAP0lLh1ERcTVGpw+y0tYf5ZHn4FWaqtztPfHKMHlFTSy+nzcxB/FgWtDt33J+wINg7qLMNVM7Fp5oJ56hxgljsGBrj3WuPMXuB05DvKW1mWscy/vgtY6pYOhcC/8Ahn1C3o+6guUMgVWY2xSMaGU7+cpe3ZrXFr7Nvq1XBAuAL9bL6OlxCKn+mljb6vA/qV0154ZJRz8HmClxxWxHBn9nj1PHf6r43wvPmDcgj0at1TcXKPF2mLMdM5rHbOFhPH8RYO/BpU2xPH8NqGmPFamke082SSxuB+BKg2I5cy/iJJp6qKBx6x1LQPg2QuaB5ABVi6cu1FrgDV4lkCizGDJkSqiLrXMD33/C/wA5H6OB+C1UuOz4W35BxDgklh9wu+mjIFg+KT2ZLX8Tzte3dXvV8OaaTvYJilK+3sh72gg9O+x5/JqwMwsxPC4OwxGeOohlcGN+dZN3zu3SX/OsOxsRYDy2W8WpWWK/HJrzBnZEybJmftI+2kGHMlLgdOkzSAFoLGm+g6T3j5gWv7NtRUuHZJjG0FM07BziA55H2nd95+JK4ndHkXDSYhdlPFsOWt/n5vedz4uK+b8WxKXGJnTYk8vkdzJ6Do1o91o6ALOMJV5N3tEH0nT41h+aLxRy085I+jdpcSPuu3PrZQHPHD12CxzVGTXPY10bmzwtN7xGxd2ZN3AbAll+Q2+qWReG9Ji9BHUVbnmWQFwkZIW9i4OIAaBtdpG5dfcHkpRwpzM/MFO9lc8Plgf2bpB+0Z7j/iAR56b9Vl/qbcHdLW4KowbMTMCjbFk+N8lXM0B87o9T2ki5jhjF9h1JvctvYi1tvh/Dl8l6nPtS2na43drkaZXn7T3Etb027x6WC88QoavAsRqqTKTmRNeRLqvHGWxOANg9+7Wtc7SGt32v4rzbw/NW7tMyYnSsd1Jm7Z9vN0jm2/Erpcl2lK1/N/oEpiz7hOUWmPLMTpD1cxttRH1pJLOf6jUFpqzjNVVRDcJpo2OJsA4umcfQN0b/AAKy6HKGB0e9fiDJj4GoY1v4RWd/MptgWKYRhQ04LNRR327srA53qSdTvjdYt0lmotvxGRCaODMOZd5ZDTRnq4NisPINaZb/AHreq0udcApsvsczHayoqq1zCYxe7IyeTn63F1jYj2r8zpV5Q4vBUfQTxO+7I0/0KqniZkCpxiqNVgQbK2QND262tLHNaG3GogFpAB2N732SlVvPO0V4ZA78N6/WMMkJ3BqKN58rCeIH0DAPiFcCoDh3UWp4iD7GKQOH+7GYT+R/JfQCx2mNpgIiLABERAEREAVV5wj1Y7CD+0oZGD10VB/orTVdZ8/wWLYVM7k58kJPm8BjR8dZ/Ba0e0+D9gVdlLDsMxhsMONyVUU7rt1DR2OovOgDU1zm3Gm9wBcndT9/A6m/Y1Ew9WsP9GhQLLmRZcWqJWamxw08zo5pXPA0BjrEAXvcgbHl57K3Mc4pUGF3EMhncOkI1D+MkM/BxPkuutKeO1Jt/AIrLwQP/wAest5Ogv8AmJR/ReQ4IyftK1gH/QJ/+0LAxPi5WYu4x5fibHflpaZpfUbaR/CfVapmVsXzWb1zJi0m5NQ8sYP3H7j91isumS68kvQGdXZBoMLuMUxaLUObWRAu/hbI535KNYiygwp8T8CmnmcyRrnF8QjYWNOo2vZ+q4Fha1rqWS8OKXLbA/OdaG33EUIs53iG3Bc8eYYLeIWnlq48bJpMjYe1oeLGR47SZzbjcveSIW38z0sRyV4Tv3trySJLk4jYe7GsMnZR94ljZGgb6tD2y2HjcNsPVfNIN+SvPhZm5pb+jsVeztoCY43hwcyZjTYBrhsS0CwHMtAPMOtzmzhHFi0jpsHk7B7jdzC3VGSeZABBYT1tceQWNCqqLcZkFKQYjNTsdHTzSsjd7TGyOax19jqaDZ3xCt/gHhroYaieQENlcxjfPs9RJHld9vVpWNg/BXS8HGajUwc2RNLS71c47D0F/MKZ5qzHT5DpWtga0ODdMMLetupHMNHMu/qSAZr1Y1Fgp5tgq3iTPTV+Lytxd0jY2RsZqiY157QAO3Dj7IDiDa5uBsvGiylheI/8HirWE8hNF2Zv++5gPwWFFNPgYE2P0sNVBVHtS94DtT3XJ0ysuYn3JBb4h1h1W7oMr4Vm7bLtRJSzH9jL3x+7qN3/AAebdQFp2YpXdl3rNEmczguZwHUtfG8HkRBt+IlK9YuCDz9LWt+EB/vL/ZR2s4bYnl9xfhYL/t08pa63S4u13wF17UPEXFMt2bjLXPZytUROY70D7NN/N2pVvVkupJP0IJRFwOg/b1Mh+6xrf63UezJlfCcoytZXS1j5bai2LshoaeRcSxtr+AN/JTLA+MNHX2GKNfTu8SO0jv5OYL/EtAUS4mZbOKyS4lgMsU8Dmh0pbI0mMsYGbb2Is0bc73FlSnKpjw1W0ga3h/8AQtB5uxKkA9Wlzz+QP4L6IVD8Mqcv+RRuH0lbLP8AuQUwYD/G8hXusdqfX54A5REXMAiIgCIiAKA8ZaN0tCJ6T6SmlZM34HSfgNWo/dU9WNiFG3EIpIqkXZI0scPFrhY/kVaEsMkwUJnJtLFXOmxSOaWnqoo6mFkbwwF7gAdRPo43G41DoVOuHuGYRj0RkwykbqYQHsnHaOaTuD3y4EHexHgeVlBsSwx9Xh8tPU71OFSuB8X0rzfUPIW1eTWjxW6yjitNw4pDNWStnnqmse2KI8owDo1FwGjdzrkgeAB07901enaLd9MudwLde6LCoy5/ZxRsFydmNaPPkAqjzrxdc+8WVe60bGd7dz9xrhsPtOF/Ic14SYFivEl4kxb/AA9Pe7GvBAaPFseznu+0/Tz2NtlP8s8PqPLNpGs7SVu/bS2Jb5tHss9QL25krFRp0855vctAVflnh5U5mcanMb3wxHvOkkN5ZAOo1+y23vO6cgRuuMwY+yQDDeHkRbG86HvZ9JUu5W1HfRzu4ncDo0b+nEjPj8zyGlwIu7DUG9wHVUPvYctyy/JvXmegG/w3CmcLqF1XiQa+tlGhjeYY524YPIe09w56bDpfobllKer0X2CF5kwSPBzBh+HtbLWF7XTSt92RwtHDGejRcOJt9U7cm72jzdiWCz1FLQzx1TaZj3ufOw+xE0GSxDg8kG7e843I6Ly4aUZiFVi+MXf2LXuYXc5JiC57vXfSOl5D4LDyJTOlo8Wqajd3yZ0eo9XSBz5PxIYfirSs01LO3uwZuI8TcUqKbt4RBHGZTCHRsJeJAwSW+cc4eyedvFampp2YbXN/Wt5qYKmFpFQ64cI5QC2ZhJOksdcW3AbfbcBe+D0Xy3AaywuYqtso8u5Gxx/hLlm09D+teBgxC89A9wHi6E2eW+gYRbzht1UWjHRWV7P4YMaKoqOG1Q6mxVgnpJbl0ZAMc0Z21sB2a8bXaduh20uWxxvhzFjMQq8hPEkbt+xc7dp6hhduHA+4/l48gsnIlTDnqidhuOH52FuqCT3gwbAt8SzZpHVpHmVGMPxGr4Z1jo5htcdpHfuTR9HtPQ25O5g7HkQnWxO2Ul6MGwyvxKq8tv7HHA+aNp0uZJtNH6F25+6/8QrqwDHqfMUfaYVIJG8nD3mHwc07g+vPpcLWTYdQ8QKdksrGyNcO6/2ZIz1bqHeaQebb226qv8Q4a1uVpflGTZnP0+7cNk0+BB+blHUg26WBK55dHU/5l+AT7NOA4ZBDJPjlPCGMF3PDA13OwF2WcSSQAL8yFR2Y6rDZIy7LMNTBIXAESPBY6KxJv3nOO4bsTbe+9lPZc3MzvTSYdmH/AAlWdOkvBbG6Rrg9oId3oySANLvHYk7KtcOoGwVDm4lpdHTlz59Ju1zYnWLQTa4e/TED4yBbbNDCnibuvQFrcLcNMdQA+4FJSsiIPLt53Gol38W3awq1VFuHeFvw6ka7EPpp3Onm2t85IdVrdLN0tt5FSlcVWWKbAREWYCIiAIiIAiIgK44gUpy9VRYpTM1R27CsYBfXA7YOI62Nh5kMHK6r/EXf+ns7jhEEEjZbTUtTI0yFsJHss3tqFwNXO25vqFr/AKumZVsdHUtDmPaWuaeTmkWIPwVP4hgbaAnCMwOIhkcX4dUu/ZP/AMpx+NrddXTU3T10aias/wC1+vYEr4XZ1kzYyVuItaJYdJLmCzXtfqsbEkgjSb725egi3EzN0mPy/ozK4MlzplLOcjhzjB5Bg9517bWJABvp8IfUYS1+FYNAYq+aQiedzwAYgCWuY7mG6S7cC4Goi7nWbNeHAwzAnfJsKqI5apws+SxHaW30xkjSWi3stJ5XN1ZxjCTmlfcvl+AM7h5w/jyu0S1umSpI3dzbEDzbHf8AAu5nyGyrDP2KSZ2xIQYV32tcYYR0Jv8AOP8AQkEk/VYCrY4o5k/V2ieYDaaX5uPxBI7zv3W3N/HT4rQcGMo/oyL5ZXttLK20YP7OHnfyL9j90N5XKinNxTqy10QMPimGZWwunw+hPtuAJ6ubH849x83SFhP3isTAqP5BlupkcLGfW7+cQt+Fmg/HzWBxundiOIQ09Nu5sTWtHjJK8i35M/FT/OuFNw7BJoKf2YoGgeegtNz62ufVWvanBPVu7BEODdKMUosQp3/tO7/HEW/2Wp4G4r8jrHwT7CeO1j/mR3cBb7pk/BSP/wDn+K0VU7xkY38Gk/8AcorjNL+qmPMczZhnZI3/AKczrP8AgC6Qfuq7eKc4b8yTEzfhUuQMSbJho0s19rAehb70foLlhH1XN8VcmKYVTcQaON0g7r2B8Tx7cZI6fHYtOxt5L2z1lhuaaZ0TrCQd6J592QDa/wBk+yfI+ICgvBPG3Uj5cOxMFr2Fz42u5tINpWfA97zu4rKU3UpqS7UfYg0OEVVTwprOzxQF9PKe8R7MjRt2kfg9o5s5kbb91ytjM2a48GoTWU1pWkN7PSdnl5Abv0G9z5A9VxnWooHRdjmqSNrZPZD3Wdce8224I+sFVWJRnKEUlLiRNXh1S0vp3xvaHNkFntLTuBvpLrAtPtAG7mGElWak1n78PEGqzBxAdmOGRmOU1O59vmpWtc10O4vzcSdr9QL2uCNls+HuWDiMzIJmnRGWTVfqLmnpz+Je8eJ0mxYFGMt4VJO+I07Nc8h/w0ZGxI5zPvyiZYkX9pzeoa4H6Fyhl5mW6ZsMJ1vJL5ZDzlld7Tzfffpe+wHNbbRKNKOGIN+iIvOAREQBERAEREAREQHC1OZMBizLA6DE23Y7kR7THdHNPQj/AMg3BIW3XCJtO6BTOM4ee5Q56dokbtRYiBs4dGSm+x8QT8b2e6DSZcmy/WwRYuWwfOtLZi60elrgdbX8tvOxBIvZfSOLYXFjETocTjbIx3Nrv6jqCOhG4VeYplyoy7GYuy/SWHf5D/p4B/ync326AWI2AtuV2Uq9sufL6BrK8Mz1ib5cQe0YfQ91znGzHuvdwudrOcN/FjG/WCs7Bcw02OB36Imjk0+0GndvhccwPPkqWmy5+mIXx5FqzLDr7R9FK4MlZI3b3rarct7DujdxAK1uR6v9TcQa/MIkgAjeC10brvuLBtgNxex1C47oVpUVOOT00QJVl+l/WTMVRM7eOne4+WqMCBg/iBePuKyc9R9rh1YB/p5beojJCqTKuZRlTDpaqExy1dVUEFhdfswA4gyNB1WvrcBtftG+q3eTeIE2au3pMYYzU+CQsdGC3k2xa4Enobgi3JRUpzbxLSOXoDYcBI7UU7vGoP4CKP8A8lYfH3Bu1ihqoRuxxieR9V+7SfRwt/uLV5WzScn4JHLTMD5Zp3hmq+kEbFxtYkANtYEXJ5r0wvPJzpBVUeZuxiLoXOjlv2bA9pBaHa3EXDtLgQR7J9VOCaqOotEwWjS4/D8kiqq6RkcckbHlz3BoBe0G2/Xe1lXWfqZpfFjWUHslMLx23ZuBDgNrm3LunQ7rpcDtZV/juOtxHD6CHtDrgEokjIIABcOydcjSToBHO4ufFcYJTVlNDK6mf8mp52hsksruyZI0A2AJBe/mfogSb25K0Nnwda/fbPvQMnifWtxKtM9NK2SOaKN7LOBMTdAGhwv3HA3dY/XWLheCSSvjZPG6WZw+Ypbm+knVrl3HYxXJdbZzrk90HWZDlDKEuJEHL7CG/wCuqI7NG/OmhPM+EjiT4dmVcGVsqwZZYRQgukebyzPOqSV3Mlzj572G25PMkmam0RpxwruBhZHygMutdLXOEtVKB2strAAWtHGLDSxtgAABew2ADWtlqIvPlJyd2AiIoAREQBERAEREAREQBERAEREBG8xZMpMwHXXRaZR7M0Z0StPQ6m87dNVwo/WZXxGkaWUlRDXQ/wCTXRajb/qN3efN2397DRWjUaBSOJZajFzi2C1MR+vRTCYHzDL2b6WWoGB0VMdUEuK0zuXfpjqA6gmMD8F9CotltMl/f3cHzr+gqNzQwVNfIxu7Y20j7A9bBxsCfG3VZFHlOKf/AIGgxWY+E3Z00Z/e0k/mvoJFP+VLl/VhmVJhORKskGjho6Acw/SaqoaetnSktH7pClWFcPKalk7bFDJVzf5lQ7tLde6090AdLgkdCpiiylWkwALclyiLMBEXhVai09j7R2G9rX2vyPLn8EB7otc3tRYbc7dDYC256knvfkuB225233tztcDbn05dL80BskWs0SRgujuXWGznfaJO17crfnZZFI17Se35dN7+KAy0REB01prXREB31prXREB31prXREB31prXREB31prXREB31prXREB31prXREB31prXREB31prXREB31prXREB31prXREB31prXREB31ouiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiID//Z);
  background-position: center;
 -webkit-text-stroke: 1px black;

  background-size: cover;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  border:1px black ;
  
}
.home__title__WORKS{
  display: inline;
    color:rgb(80, 237, 80);
    -webkit-text-stroke: 1px black; 
}

.home__subtitle{
font-size: var(--h3-font-size);
color: var(--text-color);
font-weight: var(--font-medium);
margin-bottom: var(--mb-0-75);
}

.home__description{
  margin-bottom: var(--mb-2);
}
.home__scroll{
  display: none;
}

.home__scroll-button{
  color: var(--first-color);
  transition: .3s;
}

.home__scroll-button:hover{
  transform: translateY(0.25rem);
}

.home__scroll-mouse{
  font-size: 2rem;
}

.home__scroll-name{
  font-size: var(--small-font-size);
  color: var(--title-color);
  font-weight: var(--font-medium);
  margin-right: var(--mb-0-25);
}

.home__scroll-arrow{
  font-size: 1.25rem;
}
/*==================== BUTTONS ====================*/
.button{
  display: inline-block;
  background-color: var(--first-color);
  color:#FFF;
  padding: 1rem;
  border-radius: .5rem;
  font-weight: var(--font-medium);
}
.button:hover{
  background-color: var(--first-color-alt);
}

.button__icon{
  font-size: 1.25rem;
  margin-left: var(--mb-0-5);
  transition: .3s;
}

.button--white{
  background-color: #FFF;
  color: var(--first-color);
}
.button--white:hover
{
  background-color: rgba(255, 255, 255, 0.854);
}

.button--flex{
  display: inline-flex;
  align-items: center;
}

.button--small{
  padding: .75rem 1rem;
}

.button--link{
  padding: 0;
  background-color: transparent;
  color: var(--first-color);
}

.button--link:hover{
  background-color: transparent;
  color: var(--first-color-alt);
}


/*==================== ABOUT ====================*/
.about__img{
  width: 200px;
  
  border-radius: .5rem;
  justify-self: center;
  align-self: center;
}
.about__description{
  text-align: center;
  margin-bottom: var(--mb-2-5);
}

.about__info{
  display: flex;
  justify-content: space-evenly;
  margin-bottom: var(--mb-2-5);
}
.about__info-title{
  font-size: var(--h2-font-size);
  font-weight: var(--font-semi-bold);
  color: var(--title-color);
}
.about__info-name{
  font-size: var(--smaller-font-size);

}

.about__info-title,.about__info-name{
  display: block;
  text-align: center;
}


.about__buttons{
  display: flex;
  justify-content: center;
}
/*==================== SKILLS ====================*/
.skills__container{
  row-gap: 0;
}

.skills__header{
  display: flex;
  align-items: center;
  margin-bottom: var(--mb-2-5);
  cursor: pointer;
}

.skills__icon,.skills__arrow{
  font-size: 2rem;
  color: var(--first-color);
}
.skills__icon{
  margin-right: var(--mb-0-75);
}

.skills__title{
  font-size: var(--h3-font-size);

}
.skills__subtitle{
  font-size: var(--small-font-size);
  color: var(--text-color-light);
}

.skills__arrow{
  margin-left: auto;
  transition: .4s;
}

.skills__list{
  row-gap: 1.5rem;
  padding-left: 2.7rem;
}

.skills__titles{
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--mb-0-5);
}

.skills__name{
  font-size: var(--normal-font-size);
  font-weight: var(--font-medium);
}
.skills__bar ,.skills__percentage{
height: 5px;
border-radius: .25rem;
}

.skills__bar{
  background-color: var(--first-color-lighter);
}
.skills__percentage{
  display: block;
  background-color: var(--first-color);
}

/* advanced skill */
.skills__adv{
  width: 75%;
}

/* intermediate skill */
.skills__css,.skills__js,.skills__node,.skills__express,.skills__c,.skills__terminal,.skills__bs{
  width: 50%;
}

/* beginner skill */
.skills__react,.skills__python{
  width:25%;
}

/* N/A */
.skills__figma,.skills__cloud,.skills__mongo,.skills__api,.skills__sql{
  width: 0;
}

.skills__close .skills__list{
  height: 0;
  overflow: hidden;
}


.skills__open .skills__list{
  height: max-content;
  margin-bottom: var(--mb-2-5);
}

.skills__open .skills__arrow{
  transform: rotate(-180deg);
}
/*==================== QUALIFICATION ====================*/
.qualification__tabs{
  display: flex;
  justify-content: space-evenly;
  margin-bottom: var(--mb-2);
}

.qualification__button{
  font-size: var(--h3-font-size);
  font-weight: var(--font-medium);
cursor:pointer;
}
.qualification__button:hover{
  color: var(--first-color);
}

.qualification__icon{
  font-size: 1.8rem;
  margin-right: var(--mb-0-25);
}

.qualification__data{
  display: grid;
  grid-template-columns: 1fr max-content 1fr;
  column-gap: 1.5rem;
}


.qualification__title{
  font-size: var(--normal-font-size);
  font-weight: var(--font-medium);
}

.qualification__subtitle{
  display: inline-block;
  font-size: var(--small-font-size);
  margin-bottom: var(--mb-1);
}
/* i wrote calender as spelling Not calendar */
.qualification__calender{
  font-size: var(--smaller-font-size);
  color: var(--text-color-light);
}

.qualification__rounder{
  display: inline-block;
}

.qualification__rounder{
  display: inline-block;
  width: 13px;
  height: 13px;
  background-color: var(--first-color);
  border-radius: 50%;
}

.qualification__line{
  display: block;
  width: 1px;
  height: 100%;
  background-color: var(--first-color);
  transform: translate(6px,-7px);
}

.qualification [data-content]{
  display: none;
}

.qualification__active[data-content]{
  display: block;
}

.qualification__button.qualification__active{
  color:var(--first-color);
}
/*==================== SERVICES ====================*/
.services__container{
  gap: 1.5rem;
  grid-template-columns: repeat(2,1fr);
}

.services__content{
  position: relative;
  background-color: var(--container-color);
  padding: 3.5rem .5rem 1.25rem 1.5rem;
  border-radius: .25rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .15);
  transition: .3s;
}
.services__content:hover{
  box-shadow: 0 4px 8px rgba(0, 0, 0, .15);
}


.services__icon{
  display: block;
  font-size: 1.5rem;
  color: var(--first-color);
  margin-bottom: var(--mb-1);
}


.services__title{
  font-size: var(--h3-font-size);
  margin-bottom: var(--mb-1);
  font-weight: var(--font-medium);
}


.services__button{
  cursor: pointer;
  font-size: var(--small-font-size);
}

.services__button:hover  .button__icon{
  transform: translateX(.25rem);
}

.services__modal{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, .15);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1rem;
  z-index: var(--z-modal);
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;

}


.services__modal-content{
  position: relative;
  background-color: var(--container-color);
  padding: 1.5rem;
  border-radius: .5rem;

}

.services__modal-services{
  row-gap: 1rem;
}

.services__modal-service{
  display: flex;
}


.services__modal-title{
  font-size: var(--h3-font-size);
  font-weight: var(--font-medium);
  margin-bottom: var(--mb-1-5);

}

.services__modal-close{
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 1.5rem;
  color: var(--first-color);
  cursor: pointer;
}

.services__modal-icon{
  color: var(--first-color);
  margin-right: var(--mb-0-25);
}
/* Active Modal */
.active-modal{
  opacity: 1;
  visibility: visible;
}

/*==================== PORTFOLIO ====================*/
.portfolio__container{
  overflow: initial;
}

.portfolio__content{
  padding: 0 1.5rem;

}
.portfolio__img{
  width: 265px;
border-radius: .5rem;
justify-self: center;
}
.portfolio__title{
  font-size: var(--h3-font-size);
  margin-bottom: var(--mb-0-5);
}
.portfolio__description{
  margin-bottom: var(--mb-0-75);

}

.portfolio__button:hover .button__icon{
  transform: translateX(.25rem);
}

.swiper-button-prev::after,
.swiper-button-next::after{
  content: '';
}

.swiper-portfolio-icon{
  font-size: 2rem;
  color: var(--first-color);
}
.swiper-button-prev{
  left: -.5rem;
}
.swiper-button-next{
  right: -.5rem;
}

.swiper-horizontal > .swiper-pagination-bullets{
  bottom: -2.5rem;
}
.swiper-pagination-bullets-active{
  background-color: var(--first-color);
}
.swiper-button-prev,.swiper-button-next,.swiper-pagination-bullets{
  outline: none;
}
/*==================== PROJECT IN MIND ====================*/

.project{
  text-align: center;
}

.project__bg{
  background-color: var(--first-color-second);
  padding-top: 3rem;
}

.project__title{
  font-size: var(--h2-font-size);
  margin-bottom: var(--mb-0-75);
}

.project__description{
  margin-bottom: var(--mb-1-5);
}
.project__title,.project__description{
  color: #FFF;
}



.project__img{
  width: 232px;
  justify-self: center;
  border-radius: 10% 0 10% 0;
}
/*==================== TESTIMONIAL ====================*/
.testimonial__data,.testimonial__header{
  display: flex;
}

.testimonial__data{
  justify-content: space-between;
  margin-bottom: var(--mb-1);
}


.testimonial__img{
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-right: var(--mb-0-75);
}

.testimonial__name{
  font-size: var(--h3-font-size);
  font-weight: var(--font-medium);
}

.testimonial__client{
  font-size: var(--small-font-size);
  color: var(--text-color-light);
}

.testimonial__description{
  margin-bottom: var(--mb-2-5);
}

.testimonial__icon-star{
  color: var(--first-color);
}

.swiper-container .swiper-pagination-testimonial{
  bottom: 0;
}
/*==================== CONTACT ME ====================*/
.contact__container{
  row-gap: 3rem;
}
.contact__information{
  display: flex;
  margin-bottom: var(--mb-2);
}

.contact__icon{
  font-size: 2rem;
  color: var(--first-color);
  margin-right: var(--mb-0-75);
}

.contact__title{
  font-size: var(--h3-font-size);
  font-weight: var(--font-medium);
}

.contact__subtitle{
  font-size: var(--small-font-size);
  color: var(--text-color-light);
}

.contact__content{
  background-color: var(--input-color);
  border-radius: .5rem;
  padding: .75rem 1rem .25rem;
}

.contact__label{
  font-size: var(--smaller-font-size);
  color: var(--title-color);
}
.contact__input{
  width: 100%;
  background-color: var(--input-color);
  color: var(--text-color);
  font-family: var(--body-font);
  font-size: var(--normal-font-size);
  border: none;
  outline: none;
  padding: .25rem .5rem .5rem 0;
}
/*==================== FOOTER ====================*/
.footer{
  padding-top: 2rem;

}

.footer__container{
  row-gap:3.5rem;
}
.footer__bg{
  background-color: var(--first-color-second);
  padding: 2rem 0 3rem;
}

.footer__title{
  font-size: var(--h1-font-size);
  margin-bottom: var(--mb-0-25);
}
.footer__subtitle{
  font-size: var(--small-font-size);
}

.footer__links{
  display: flex;
  flex-direction: column;
  row-gap: 1.5rem;
}

.footer__link:hover{
  color: var(--first-color-lighter);
}

.footer__social{
  font-size: 1.25rem;
  margin-right: var(--mb-1-5);
}
.footer__social:hover{
  color: var(--first-color-lighter);
}
.footer__copy{
  font-size: var(--smaller-font-size);
  text-align: center;
  color: var(--text-color-light);
  margin-top: var(--mb-3);
}
.footer__title,.footer__subtitle,.footer__link,.footer__social{
  color: #FFF;
}
/*========== SCROLL UP ==========*/
.scrollup{
  position: fixed;
  right: 1rem;
  bottom: -20%;
  background-color: var(--first-color);
  opacity: .8;
  padding: 0 .3rem;
  border-radius: .4rem;
  z-index: var(--z-tooltip);
  transition: .4s;
}
.scrollup:hover{
  background-color: var(--first-color-alt);
}

.scrollup__icon{
  font-size: 1.5rem;
  color: #FFF;
}
/* Show scroll */
.show-scroll{
  bottom: 5rem;
}

/*========== SCROLL BAR ==========*/
::-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);
}
/*==================== MEDIA QUERIES ====================*/
/* For small devices */
@media screen and (max-width:350px) {

  .container{
    margin-left: var(--mb-1);
    margin-right: var(--mb-1);
  }
  .nav__menu{
    padding: 2rem .25rem 4rem;
  }
  .nav__list{
    column-gap: 0;
  }

  .home__content{
    grid-template-columns: .25fr 3fr;
  }

.home__blob{
  width: 180px;
}

.skills__title{
  font-size: var(--normal-font-size);
}
.qualification__data{
  gap: .5rem;
}


.services__container{
grid-template-columns: max-content;
justify-content: center;


}
.services__content{
  padding-right: 3.5rem;
}

.services__modal{
  padding: 0 .5rem;
}

.project__img{
  width: 200px;
}
.testimonial__data,.testimonial__header{
  flex-direction: column;
  align-items: center;
}
.testimonial__img{
  margin-right: 0;
  margin-bottom: var(--mb-0-25);
}

.testimonial__data,.testimonial__description{
text-align: center;
}



}

/* For medium devices */
@media screen and (min-width:568px){

  .home__content{
    grid-template-columns: max-content 1fr 1fr;
  }
  
  .home__data{
    grid-column: initial;
  }

  .home__img{
    order:1;
    justify-self: center;
  }

 
 .about__container ,
 .portfolio__content,
 .footer__container,.contact__container,.project__container{
  grid-template-columns: repeat(2,1fr);
 }



.qualification__sections{
  display: grid;
  grid-template-columns: .6fr;
  justify-content: center;
}

}



@media screen and (min-width:768px) {
  
.container{
  margin-left:auto;
  margin-right: auto;
}

body{
margin: 0;
}

.section{
  padding: 6rem 0 2rem;

}

.section__subtitle{
  margin-bottom: 4rem;
}
.header{
  top: 0;
  bottom: initial;
}
.header,.main,.footer__container{
  padding: 0 1rem;
}

.nav{
  height: calc(var(--header-height)+1.5rem);
}

.nav__icon,.nav__close,.nav__toggle{
  display: none;
}

.nav__list{
  display: flex;
  column-gap: 2rem;
}
.nav__menu{
  margin-left: auto;
}
.change-theme{
  margin: 0;
}

.home__container{
  row-gap: 5rem;
}

.home__content{
  padding-top: 5.5rem;
  column-gap: 2rem;
}

.home__blob{
width: 270px;
}

.home__scroll{
  display: block;
}
.home__scroll-button{
  margin-left: 3rem;
}
.about__container{
  column-gap: 5rem;
}

.about__img{
width: 350px;
}
.about__description{
  text-align: initial;
}
.about__info{
  justify-content: space-between;
}

.about__buttons{
  justify-content: initial;
}

.qualification__tabs{
  justify-content: center;
}
.qualification__button{
  margin: 0 var(--mb-1);
}
.qualification__sections{
grid-template-columns: .5fr;
}

.services__container{
  grid-template-columns: repeat(3,218px);
  justify-content: center;
}

.services__icon{
  font-size: 2rem;
}

.services__content{
  padding: 6rem 0 2rem 2.5rem;
}
.services__modal-content{
  width: 450px;
}
.portfolio__img{
  width: 320px;
}

.portfolio__content{
  align-items: center;
}
.project{
  text-align: initial;
}
.project__bg{
background: none;
}
.project__container{
  background-color: var(--first-color-second);
  border-radius: 1rem;
  padding: 3rem 2.5rem 0;
  grid-template-columns: 1fr max-content;
  column-gap: 3rem;
}

.project__data{
padding-top: .8rem;
}

.footer__container{
  grid-template-columns: repeat(3,1fr);
}

.footer__bg{
  padding: 3rem 0 3.5rem;
}

.footer__links{
  flex-direction: row;
  column-gap: 2rem;
}
.footer__socials{
  justify-self: flex-end;
}
.footer__copy{
  margin-top: 4.5rem;
}

}
/* For large devices */
@media screen and (min-width:1024px){
.header,
.main,
.footer__container{
  padding: 0;
}

.home__blob{
  width: 320px;
}

.home__social{
  transform: translateX(-6rem);
}

.services__container{
  grid-template-columns: repeat(3,238px);
}

.portfolio__content{
  column-gap: 5rem;
}

.swiper-portfolio-icon{
  font-size: 3.5rem;
}
.swiper-button-prev{
  left: -3.5rem;
}

.swiper-button-next{
  right: -3.5rem;
}
.swiper-container-horizontal >.swiper-pagination-bullets{
  bottom: -4.5rem;
}

.contact__form{
  width: 460px;
}
.contact__input{
  grid-template-columns: repeat(2,1fr);
}


}