@font-face {
    font-family: newf;
    src: url(../fonts/DISCO___.ttf);
}

@font-face {
    font-family: hal;
    src: url(../fonts/Halimun.ttf);
}


/* =====================================================settings page=========================================== */

#settingsContainer {
    height: auto;
    width: 100vw;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 6vh 6vh 88vh;
    background-color: #e0e0e0;
}

#commands {
    grid-column: 1 / span 1;
    grid-row: 1 / span 1;
    display: grid;
    justify-items: end;
    align-items: center;
    padding: 10px;
}

#logout {
    box-sizing: border-box;
    height: 4.71vh;
    font-size: 1.5vh;
    font-family: Helvetica, sans-serif;
    text-transform: uppercase;
    font-weight: 100;
    letter-spacing: 2px;
    border: thin solid #313131;
    padding: calc((4.71vh - 1.5vh - 2px) / 2);
    text-align: center;
    color: #313131;
    background-color: transparent;
    text-decoration: none;
    width: fit-content;
}

#logout:hover {
    background-color: #313131;
    color: #e0e0e0;
}

#settingsSectionTitles {
    grid-column: 1 / span 1;
    grid-row: 2 / span 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
    width: fit-content;
    margin: 0 auto;
}

#trafficSttitle {
    grid-column: 1 / span 1;
    grid-row: 1 / span 1;
    box-sizing: border-box;
    height: 4.71vh;
    font-size: 1.5vh;
    font-family: Helvetica, sans-serif;
    text-transform: uppercase;
    font-weight: 100;
    letter-spacing: 2px;
    border: thin solid #313131;
    padding: calc((4.71vh - 1.5vh - 2px) / 2);
    text-align: center;
    color: #313131;
    background-color: transparent;
    text-decoration: none;
    width: fit-content;
    align-self: end;
    position: relative;
    top: 1px;
    border-bottom: thin solid #e0e0e0;
}

#messagesSttitle {
    grid-column: 2 / span 1;
    grid-row: 1 / span 1;
    box-sizing: border-box;
    height: 4.71vh;
    font-size: 1.5vh;
    font-family: Helvetica, sans-serif;
    text-transform: uppercase;
    font-weight: 100;
    letter-spacing: 2px;
    border: thin solid #313131;
    padding: calc((4.71vh - 1.5vh - 2px) / 2);
    text-align: center;
    color: #313131;
    background-color: transparent;
    text-decoration: none;
    width: fit-content;
    align-self: end;
    position: relative;
    top: 1px;
    border-bottom: none;
}

#trafficSttitle:hover,
#messagesSttitle:hover {
    background-color: #313131;
    color: #e0e0e0;
}

#trafficSection {
    border: thin solid #313131;
    grid-column: 1 / span 1;
    grid-row: 3 / span 1;
    display: grid;
    height: auto;
    grid-template-columns: 1fr 1fr;
    visibility: visible;
    padding-top: 7vh;
    padding-bottom: 7vh;
    /* padding-left: 3vw; */
    padding-right: 1vw;
}
/* width */
::-webkit-scrollbar {
    width: 15px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    box-shadow: inset 0 0 4px grey; 
    border-radius: 5px;
  }
   
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: #313131; 
    border-radius: 10px;
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: #353535; 
  }
#Visitsdetails{
    
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: min-content;
    overflow-y: scroll;
}
#visitesGraph{
    display: grid;
    align-items: center;
    justify-items: center;
}
.cls-1 {
    fill: none;
    stroke: #313131;
    stroke-linecap: round;
    stroke-miterlimit: 10;
  }
  .cls-2 {
    fill: none;
    stroke: #313131;
    stroke-linecap: round;
    stroke-miterlimit: 10;
    stroke-width: 1.5px;
  }

.date_style {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-size: 20px;

fill: #939393;
text-align: center;
}
.dates_style{
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-size: 20px;
fill: #939393;
text-align: center;



}
.graph_point{
    fill: #313131;
    z-index: 100;
}
.graph_point:hover{
    
    stroke: #6577B3;
    stroke-width: 15px;
    
}
.graph_line{
    stroke: #6577B3 ;
    stroke-width: 2px;
    
}

#messageSection {
    border: thin solid #313131;
    grid-column: 1 / span 1;
    grid-row: 3 / span 1;
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: min-content;
    overflow-y: scroll;
    visibility: hidden;
}

.trafficCard{
    min-height: 50px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    box-sizing: border-box;
    margin: 5px;
    padding: 5px;
    box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset; 
}
.messageCard {
    display: grid;
    grid-template-columns: repeat(3, 1fr) auto;
    box-sizing: border-box;
    margin: 5px;
    padding: 5px;
    box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;
}

.visitID,
.visitDate,
.visitCount,
.visitLocation,
.messageSenderName,
.messageSenderEmail,
.messageContent {
    align-self: center;
    text-align: center;
    padding-top: 5px;
}

.deleteVisit,
.deleteMessage {
    box-sizing: border-box;
    height: 4.71vh;
    font-size: 1.5vh;
    font-family: Helvetica, sans-serif;
    text-transform: uppercase;
    font-weight: 100;
    letter-spacing: 2px;
    border: thin solid #313131;
    padding: calc((4.71vh - 1.5vh - 2px) / 2);
    text-align: center;
    color: #313131;
    background-color: transparent;
    text-decoration: none;
    width: fit-content;
    align-self: center;
}

.deleteVisit:hover,
.deleteMessage:hover {
    background-color: #313131;
    color: #e0e0e0;
}


/* /=============================================settings login================================================ */

#logInBody {
    height: 100vh;
    width: 100vw;
    display: grid;
    justify-items: center;
    align-items: center;
    background-color: #313131;
}

#loginDiv {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: repeat(2, 1fr);
}

#pswCheck {
    grid-column: 1 / span 2;
    grid-row: 1 / span 1;
    font-size: 1.8vh;
    line-height: 3vh;
    color: #e0e0e0;
    font-family: Helvetica, sans-serif;
    text-transform: uppercase;
    font-weight: 100;
    letter-spacing: 5px;
    text-align: center;
    visibility: hidden;
}

#password {
    box-sizing: border-box;
    grid-column: 1 / span 1;
    grid-row: 2 / span 1;
    background-color: #e0e0e0;
    border: 1px solid #e0e0e0;
}

#password::placeholder {
    font-size: 1.7vh;
    letter-spacing: 0.31vh;
    font-weight: bold;
    font-family: newf;
    text-transform: uppercase;
    line-height: 2.7vh;
}

#logIn {
    box-sizing: border-box;
    height: 100%;
    font-size: 1.5vh;
    font-family: Helvetica, sans-serif;
    text-transform: uppercase;
    font-weight: 100;
    letter-spacing: 2px;
    border: thin solid #e0e0e0;
    padding: calc((4.71vh - 1.5vh - 2px) / 2);
    text-align: center;
    color: #e0e0e0;
    background-color: transparent;
    transition: background-color 1s, color 1s;
    text-decoration: none;
    width: 100%;
    align-self: end;
}

#logIn:hover {
    border-left-color: #313131;
    color: #313131;
    background-color: #e0e0e0;
}


/* ================================not found=================================================================== */

#NotfoundDiv {
    height: 100vh;
    width: 100vw;
    display: grid;
    background-color: #313131;
    justify-items: center;
    align-items: center;
}

#NotFound {
    font-size: 1.8vh;
    line-height: 3vh;
    color: #e0e0e0;
    font-family: Helvetica, sans-serif;
    text-transform: uppercase;
    font-weight: 100;
    letter-spacing: 5px;
    text-align: center;
}


/* ==================================================== General styling =========================================== */

body {
    margin: 0px;
    padding: 0px;
    background-color: #e0e0e0;
    color: #313131;
    overflow: hidden;
}

.aTag {
    color: inherit;
    text-decoration: none;
}

.container {
    box-sizing: border-box;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    margin: 0px;
    display: grid;
    grid-template-rows: repeat(12, 1fr);
    padding: 0vw 3.48vw 0vw 3.48vw;
}

.navbar {
    grid-row: 1 / span 1;
    display: grid;
    align-items: end;
    grid-template-columns: max-content auto max-content;
    grid-template-rows: 100%;
    height: 100%;
    overflow: hidden;
    width: 86.9vw;
    margin: 0 auto;
    box-sizing: border-box;
    padding-bottom: 0px;
}

.logoPic {
    display: block;
    box-sizing: border-box;
    height: 4.71vh;
    width: auto;
    padding-bottom: 0px;
    text-align: center;
}

#hamburgerMMain,
#hamburgerMWorks,
#hamburgerMContact {
    display: none;
}

.name {
    box-sizing: border-box;
    height: 4.71vh;
    padding: 1.32vh;
    padding-left: 3.31vh;
    font-size: 1.5vh;
    font-family: Helvetica, sans-serif;
    text-transform: uppercase;
    font-weight: THIN;
    letter-spacing: 2px;
    text-align: left;
}

.navbarBTNS {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    height: 4.71vh;
}

.navbarBTN {
    display: block;
}

.aboutMBtn {
    box-sizing: border-box;
    height: 4.71vh;
    font-size: 1.5vh;
    letter-spacing: 1px;
    font-family: Helvetica, sans-serif;
    text-transform: uppercase;
    font-weight: 100;
    letter-spacing: 2px;
    padding-bottom: 0.7vw;
    padding-top: 0.7vw;
    padding: calc((4.71vh - 1.5vh - 2px) / 2);
    text-align: center;
    margin-left: 1.4vw;
    margin-right: 1.4vw;
    border-bottom: thin solid transparent;
    transition: border-bottom 1s;
    text-decoration: none;
}

.worksMBtn {
    box-sizing: border-box;
    height: 4.71vh;
    font-size: 1.5vh;
    letter-spacing: 1px;
    font-family: Helvetica, sans-serif;
    text-transform: uppercase;
    font-weight: 100;
    letter-spacing: 2px;
    padding-bottom: 0.7vw;
    padding-top: 0.7vw;
    padding: calc((4.71vh - 1.5vh - 2px) / 2);
    text-align: center;
    margin-left: 1.4vw;
    margin-right: 1.4vw;
    border-bottom: thin solid transparent;
    transition: border-bottom 1s;
    text-decoration: none;
}

.worksMBtn:hover,
.aboutMBtn:hover {
    border-bottom: thin solid #313131;
}

.contactMBtn {
    box-sizing: border-box;
    height: 4.71vh;
    font-size: 1.5vh;
    letter-spacing: 1px;
    font-family: Helvetica, sans-serif;
    text-transform: uppercase;
    font-weight: 100;
    letter-spacing: 2px;
    border: thin solid #313131;
    padding: calc((4.71vh - 1.5vh - 2px) / 2);
    text-align: center;
    margin-left: 0.7vw;
    margin-right: 0.7vw;
    color: #313131;
    background-color: transparent;
    transition: background-color 1s, color 1s;
    text-decoration: none;
}

.contactMBtn:hover {
    background-color: #313131;
    color: #e0e0e0;
}


/* ====================================================== Page spesific styling ================================= */


/* ==============================================landing page ========================================== */

#landingpageBody {
    height: 100vh;
    width: 100vw;
    margin: 0px;
    padding: 0px;
}

#landingpageContainer {
    display: grid;
    height: 100vh;
    width: 100vw;
    align-items: center;
    justify-items: center;
    margin: 0px;
    padding: 0px;
    background-color: #313131;
}

#landingpageLogoDiv {
    width: 30vh;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
}

#landingpageName {
    grid-column: 1 / span3;
    grid-row: 2 / span1;
    box-sizing: border-box;
    height: 4.71vh;
    font-size: 1.5vh;
    line-height: 1.5vh;
    color: #e0e0e0;
    font-family: Helvetica, sans-serif;
    text-transform: uppercase;
    font-weight: 100;
    letter-spacing: 3px;
    text-align: center;
    align-self: center;
    /* text-shadow: #e0e0e0 0px 1px 5px; */
    opacity: 0;
}

#landingpageSVG {
    grid-column: 2 / span 1;
    grid-row: 1 / span 1;
}


/* ==============================================main page ========================================== */

.main {
    grid-row: 2 / span 11;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(6, 1fr);
}

#profileImg {
    grid-row: 1 / span 6;
    grid-column: 2 / span 1;
    display: grid;
    align-items: center;
    justify-items: center;
}

#myPhoto {
    display: block;
    object-fit: cover;
    width: 85%;
    max-height: 85%;
}

#myPhotoM {
    display: none;
    object-fit: cover;
    width: 85%;
    max-height: 85%;
}

#hello {
    box-sizing: border-box;
    grid-row: 2 / span 2;
    grid-column: 1 / span 1;
    display: grid;
    font-family: hal;
    align-items: end;
    padding-left: 3.5vw;
    padding-bottom: 2.65vh;
}

#helloSVG {
    display: block;
    height: calc(100% / (1430 / 100vw));
    width: auto;
    margin: 0px;
}

#st0 {
    fill: #ffffff;
    stroke: #000000;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit: 10;
}

#st1,
#st2 {
    fill: none;
    stroke: #000000;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit: 10;
}

#about {
    grid-row: 4 / span 3;
    grid-column: 1 / span 1;
}

.lineLeft {
    grid-row: 2 / span 5;
    grid-column: 1 / span 1;
    border-left: 1px solid #313131;
}

.lineRight {
    grid-row: 1 / span 2;
    grid-column: 2 / span 1;
    border-right: 1px solid #313131;
}

.pageName {
    display: block;
    box-sizing: border-box;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 1.5vh;
    letter-spacing: 5px;
    font-weight: bold;
    font-family: newf;
    text-transform: uppercase;
    writing-mode: tb-rl;
    transform: rotate(-180deg);
    position: absolute;
    left: calc(3.48vw - (1.5vh / 2));
    bottom: 10.6vh;
    background-color: #e0e0e0;
}

#descreption {
    box-sizing: border-box;
    padding-left: 7vw;
    display: block;
    font-size: 1.7vh;
    letter-spacing: 3px;
    font-weight: bold;
    font-family: newf;
    text-transform: uppercase;
    text-align: left;
    line-height: 3.3vh;
}

#socialMedia {
    display: block;
    padding-left: 7vw;
    padding-top: 3.3vh;
}

.socialMIcon {
    display: inline-block;
    box-sizing: border-box;
    height: 3.3vh;
    width: auto;
    margin-right: 3.3vh;
}


/* ==================================================== works page styling ======================================= */

.mainWorks {
    grid-row: 2 / span 11;
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: 16.6%;
}

.lineLeftWorks {
    grid-row: 2 / span 5;
    grid-column: 1 / span 1;
    border-left: 1px solid #313131;
}

.lineRightWorks {
    grid-row: 1 / span 2;
    grid-column: 1 / span 1;
    border-right: 1px solid #313131;
}

.pageNameWorks {
    display: block;
    box-sizing: border-box;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 1.5vh;
    letter-spacing: 5px;
    font-weight: bold;
    font-family: newf;
    text-transform: uppercase;
    writing-mode: tb-rl;
    transform: rotate(-180deg);
    position: absolute;
    left: calc(3.48vw - (1.5vh / 2));
    bottom: 10.6vh;
    background-color: #e0e0e0;
}

#card {
    grid-row: 2 / span 4;
    grid-column: 1 / span 1;
    width: 100%;
    display: grid;
    margin: 0 auto;
    grid-gap: 0.5vw;
    grid-template-columns: 11% 1fr 11%;
    grid-template-rows: 1fr;
}

#leftArrow {
    grid-column: 1 / span 1;
    display: block;
    width: 3.6vh;
    height: auto;
    justify-self: center;
    align-self: center;
    transition: all 0.5s;
}

#leftArrow:hover {
    transform: translateX(-1.4vh) scale(1.2);
}

#rightArrow {
    grid-column: 3 / span 1;
    display: block;
    width: 3.6vh;
    height: auto;
    justify-self: center;
    align-self: center;
    transition: all 0.5s;
}

#rightArrow:hover {
    transform: translateX(1.4vh) scale(1.2);
}

#workDesDiv {
    grid-column: 2 / span 1;
    grid-row: 1 / span 1;
    align-self: center;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    height: fit-content;
}

#workImg {
    grid-column: 1 / span 1;
    grid-row: 1 / span 3;
    display: block;
    box-sizing: border-box;
    max-width: 100%;
    max-height: auto;
    box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px;
    align-self: center;
}

#workTitle {
    grid-row: 1 / span 1;
    grid-column: 2 / span 1;
    font-family: hal;
    font-size: 3.3vh;
    font-weight: 100;
    padding-left: 3.9vw;
}

#workOvv {
    align-self: center;
    grid-column: 2 / span 1;
    grid-row: 2 / span 1;
    font-size: 1.7vh;
    letter-spacing: 0.31vh;
    font-weight: bold;
    font-family: newf;
    text-transform: uppercase;
    line-height: 2.7vh;
    padding-left: 3.9vw;
}

#workBtns {
    align-self: end;
    grid-column: 2 / span 1;
    grid-row: 3 / span 1;
    padding-left: 3.9vw;
    padding-bottom: 1vh;
}

#readM,
#visitWeb {
    box-sizing: border-box;
    height: 4.71vh;
    font-size: 1.5vh;
    font-family: Helvetica, sans-serif;
    text-transform: uppercase;
    font-weight: 100;
    letter-spacing: 2px;
    border: thin solid #313131;
    padding: calc((4.71vh - 1.5vh - 2px) / 2);
    text-align: center;
    color: #313131;
    background-color: transparent;
    transition: background-color 1s, color 1s;
    text-decoration: none;
}

#visitWeb {
    margin-left: 20px;
}

#readM:hover,
#visitWeb:hover {
    background-color: #313131;
    color: #e0e0e0;
}


/* ================================================= contact page style ============================================ */

.mainContact {
    grid-row: 2 / span 11;
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: 16.6%;
}

.lineLeftContact {
    grid-row: 2 / span 5;
    grid-column: 1 / span 1;
    border-left: 1px solid #313131;
}

.lineRightContact {
    grid-row: 1 / span 2;
    grid-column: 1 / span 1;
    border-right: 1px solid #313131;
}

.pageNameContact {
    display: block;
    box-sizing: border-box;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 1.5vh;
    letter-spacing: 5px;
    font-weight: bold;
    font-family: newf;
    text-transform: uppercase;
    writing-mode: tb-rl;
    transform: rotate(-180deg);
    position: absolute;
    left: calc(3.48vw - (1.5vh / 2));
    bottom: 10.6vh;
    background-color: #e0e0e0;
}

#ContactCard {
    grid-row: 2 / span 4;
    grid-column: 1 / span 1;
    display: grid;
    grid-template-columns: 36vw auto;
    grid-template-rows: repeat(5, 1fr);
    margin: 0 auto;
}

#getInTouch {
    grid-row: 1 / span 1;
    grid-column: 1 / span 2;
    font-family: hal;
    font-size: 25px;
    word-spacing: 5px;
}

#fullName {
    grid-row: 2 / span 1;
    grid-column: 1 / span 1;
}

#email {
    grid-row: 3 / span 1;
    grid-column: 1 / span 1;
}

#message {
    grid-row: 4 / span 1;
    grid-column: 1 / span 1;
}

#fullName,
#email,
#message {
    background-color: transparent;
    border: none;
    outline: none;
    border-bottom: 1px solid #313131;
    font-size: 1.7vh;
    letter-spacing: 0.31vh;
    font-weight: bold;
    font-family: newf;
    text-transform: uppercase;
    line-height: 2.7vh;
}

#fullName::placeholder,
#email::placeholder,
#message::placeholder {
    font-size: 1.7vh;
    letter-spacing: 0.31vh;
    font-weight: bold;
    font-family: newf;
    text-transform: uppercase;
    line-height: 2.7vh;
}

#sendBtnDiv {
    grid-row: 5 / span 1;
    grid-column: 1 / span 1;
    display: grid;
    grid-template-columns: max-content min-content;
}

#b4c5399e-8e88-454a-af31-c29cb5db6be6 {
    height: 2.36vh;
    padding-left: 1.5vw;
    padding-bottom: calc((4.71vh - 1.5vh - 2px) / 2);
    width: auto;
    align-self: end;
    visibility: hidden;
}

#send {
    box-sizing: border-box;
    height: 4.71vh;
    font-size: 1.5vh;
    font-family: Helvetica, sans-serif;
    text-transform: uppercase;
    font-weight: 100;
    letter-spacing: 2px;
    border: thin solid #313131;
    padding: calc((4.71vh - 1.5vh - 2px) / 2);
    text-align: center;
    color: #313131;
    background-color: transparent;
    transition: background-color 1s, color 1s;
    text-decoration: none;
    width: fit-content;
    align-self: end;
}

#send:hover {
    background-color: #313131;
    color: #e0e0e0;
}

#myEmail {
    grid-row: 2 / span 1;
    grid-column: 2 / span 1;
    font-size: 1.7vh;
    letter-spacing: 0.31vh;
    font-weight: bold;
    font-family: newf;
    text-transform: uppercase;
    line-height: 2.7vh;
    align-self: center;
    padding-left: 3.9vw;
}

#phoneNumber {
    grid-row: 3 / span 1;
    grid-column: 2 / span 1;
    font-size: 1.7vh;
    letter-spacing: 0.31vh;
    font-weight: bold;
    font-family: newf;
    text-transform: uppercase;
    line-height: 2.7vh;
    align-self: center;
    padding-left: 3.9vw;
}

#socialIcons {
    grid-row: 4 / span 1;
    grid-column: 2 / span 1;
    display: grid;
    grid-template-columns: repeat(3, fit-content(100px));
    align-items: center;
    padding-left: 3.9vw;
}


/* ================================================Media queries =================================================== */

@media only screen and (max-width: 992px) {
    /* ================================================main page media queries ======================================= */
    .main {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(6, 1fr);
    }
    .lineLeft {
        grid-row: 2 / span 5;
        grid-column: 1 / span 1;
    }
    .lineRight {
        grid-row: 1 / span 2;
        grid-column: 1 / span 1;
    }
    #hello {
        grid-row: 4 / span 1;
        grid-column: 1 / span 1;
        width: 50%;
        padding-left: 0px;
        margin: 0 auto;
    }
    #about {
        grid-row: 5 / span 2;
        grid-column: 1 / span 1;
    }
    #profileImg {
        display: block;
        grid-column: 1 / span 1;
        grid-row: 1 / span 3;
    }
    #myPhoto {
        display: none;
    }
    #myPhotoM {
        display: block;
        width: 35%;
        max-height: 100%;
        position: relative;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    #descreption {
        padding-left: 3vw;
        padding-right: 3vw;
        text-align: center;
    }
    #socialMedia {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        justify-items: center;
        padding-left: 25vw;
        padding-right: 25vw;
        padding-top: 3.3vh;
    }
}

@media only screen and (max-width: 768px) {
    #myPhotoM {
        width: 45%;
        max-height: 100%;
    }
    #hello {
        width: 70%;
    }
}

@media only screen and (max-width: 576px) {
    #myPhotoM {
        width: 70%;
        max-height: 100%;
    }
    #hello {
        width: 100%;
    }
}


/* ===================================================works page media queries =================================== */

@media only screen and (max-width: 992px) {
    #workDesDiv {
        height: 100%;
        grid-template-columns: 1fr;
        grid-template-rows: 50% repeat(3, 1fr);
        max-height: 60vh;
    }
    #workImg {
        grid-row: 1 / span 1;
        max-height: 100%;
        max-width: auto;
        justify-self: center;
    }
    #workTitle {
        justify-self: center;
        text-align: center;
        grid-row: 2 / span 1;
        grid-column: 1 / span 1;
        padding-left: 0px;
        padding-top: 1.9vh;
    }
    #workOvv {
        justify-self: center;
        text-align: center;
        grid-column: 1 / span 1;
        grid-row: 3 / span 1;
        padding-left: 0px;
        padding-top: 1.9vh;
    }
    #workBtns {
        justify-self: center;
        grid-column: 1 / span 1;
        grid-row: 4 / span 1;
        padding-left: 0px;
        padding-top: 1.9vh;
    }
    #card {
        grid-row: 1 / span 5;
        grid-column: 1 / span 1;
        align-self: center;
    }
}

@media only screen and (max-width: 576px) {
    .lineLeftWorks {
        display: none;
    }
    .lineRightWorks {
        display: none;
    }
    .pageNameWorks {
        display: none;
    }
}


/* ===================================================contact page media queries =================================== */

@media only screen and (max-width: 992px) {
    #ContactCard {
        grid-row: 2 / span 5;
        grid-column: 1 / span 1;
        grid-template-columns: repeat(2, auto);
        grid-template-rows: repeat(8, 1fr);
        width: 90%;
    }
    #getInTouch {
        grid-row: 1 / span 1;
        grid-column: 1 / span 2;
    }
    #fullName {
        grid-row: 2 / span 1;
        grid-column: 1 / span 2;
    }
    #email {
        grid-row: 3 / span 1;
        grid-column: 1 / span 2;
    }
    #message {
        grid-row: 4 / span 1;
        grid-column: 1 / span 2;
    }
    #sendBtnDiv {
        grid-row: 5 / span 1;
        grid-column: 1 / span 2;
    }
    #b4c5399e-8e88-454a-af31-c29cb5db6be6 {
        align-self: center;
        justify-self: center;
    }
    #send {
        align-self: center;
        justify-self: center;
    }
    #myEmail {
        grid-row: 6 / span 1;
        grid-column: 1 / span 2;
        align-self: center;
        padding-left: 0px;
    }
    #phoneNumber {
        grid-row: 7 / span 1;
        grid-column: 1 / span 1;
        align-self: center;
        padding-left: 0px;
    }
    #socialIcons {
        grid-row: 7 / span 1;
        grid-column: 2 / span 1;
        align-items: center;
        justify-self: end;
        padding-left: 0px;
    }
}

@media only screen and (max-width: 576px) {
    .lineLeftContact {
        display: none;
    }
    .lineRightContact {
        display: none;
    }
    .pageNameContact {
        display: none;
    }
}

@media only screen and (max-width: 576px) {
    /* ======================================================= General media queries ========================= */
    .navbar {
        align-items: end;
        grid-template-columns: repeat(2, max-content) auto;
    }
    .navbarBTNS {
        display: grid;
        grid-template-columns: auto;
        justify-items: end;
        align-items: center;
    }
    .navbarBTN {
        display: none;
    }
    #hamburgerMMain,
    #hamburgerMWorks,
    #hamburgerMContact {
        display: block;
        width: 4.7vh;
        height: auto;
    }
    .lineLeft,
    .lineRight,
    .pageName {
        display: none;
    }
}
/* =======================================================settings media queries===================================== */
@media only screen and (max-width: 1024px) {
    #trafficSection {
        grid-template-columns: 1fr ;
        grid-template-rows: 50% auto;
    }
    #visitesGraph{
        height: 100%; 
    }
    #grapg_svg{
        max-height: 90%;
        width: auto;
    }

}
@media only screen and (max-width: 576px) {
    .trafficCard {
        margin: 2px;
        padding: 2px;
    }
    .visitID, .visitDate, .visitCount, .visitLocation {
        font-size: 10px;
    }
    
}


/* ===================================================== General key frames ========================================= */

@keyframes turn {
    from {
        transform: rotateZ(0deg);
    }
    to {
        transform: rotateZ(30deg);
    }
}

@keyframes turnSl {
    from {
        transform: translate(0px) rotateZ(0deg);
    }
    to {
        transform: translateX(69px) rotateZ(-30deg);
    }
}

@keyframes turnSr {
    from {
        transform: translate(0px) rotateZ(0deg);
    }
    to {
        transform: translateX(-69px) rotateZ(-30deg);
    }
}

@keyframes turnRev {
    from {
        transform: rotateZ(30deg);
    }
    to {
        transform: rotateZ(0deg);
    }
}

@keyframes turnSlRev {
    from {
        transform: translateX(69px) rotateZ(-30deg);
    }
    to {
        transform: translate(0px) rotateZ(0deg);
    }
}

@keyframes turnSrRev {
    from {
        transform: translateX(-69px) rotateZ(-30deg);
    }
    to {
        transform: translate(0px) rotateZ(0deg);
    }
}