* {
box-sizing:border-box;
margin:0;
padding:0
}

html {
scrollbar-width:none
}

h1,h2,h3,h4,h5,h6 {
font-family:'Montserrat',sans-serif;
font-weight:lighter
}

body::-webkit-scrollbar {
-ms-overflow-style:none;
scrollbar-width:none
}

body::before {
content:"";
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background-color:rgba(255,255,255,0.07);
margin-bottom:100px;
backdrop-filter:blur(0px);
z-index:-1;
scroll-behavior:smooth
}

body {
border:2px solid #fff;
padding:0;
margin:20px;
font-family:'Open Sans',sans-serif;
background-image:url(https://cdn.wallpapersafari.com/12/49/e1HDgu.jpg);
background-size:cover;
background-position:center;
background-attachment:fixed
}

header {
text-shadow:-5px 0 5px #000;
position:relative;
color:#fff;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
height:100vh;
margin-bottom:30px;
padding-bottom:80px;
margin-top:-60px
}

section {
border-top:1px solid #fff;
margin-right:20px;
margin-left:20px;
padding-top:50px
}

nav {
text-shadow:0 1px 1px #000;
letter-spacing:5px;
display:flex;
justify-content:flex-end;
align-items:center;
margin:0
}

nav ul {
list-style:none;
display:flex
}

nav ul li {
margin:0 100px
}

nav ul li a {
text-decoration:none;
display:inline-block;
border-bottom:1px solid #fff;
margin-bottom:8px;
width:100%;
color:#fff;
font-family:'Montserrat',sans-serif;
font-weight:100;
font-size:25px;
transition:all .3s ease-in-out;
padding:10px;
box-shadow:0 10px 15px rgba(0,0,0,1)
}

nav ul li a:hover {
color:#e31b6d;
border-radius:20px
}

.about-me {
padding:50px 0;
margin-bottom:-15px;
color:#fff;
font-family:'Montserrat',sans-serif
}

.about-me h3 {
font-size:35px;
text-align:center;
margin-bottom:30px
}

.about-me p {
font-size:20px;
line-height:30px;
text-align:justify;
margin-bottom:20px
}

.about-me-box {
background-color:rgba(128,128,128,0.2);
padding:40px;
width:50%;
margin:0 auto;
border-radius:5px;
box-shadow:0 10px 15px rgba(0,0,0,1);
backdrop-filter:blur(5px)
}

.image-grid-container {
display:flex;
background-color:rgba(128,128,128,0.5);
align-items:center;
justify-content:center;
flex-wrap:wrap;
gap:10px;
width:50%;
margin:0 auto;
margin-bottom:50px;
padding: 1%;
border-radius:10px;
backdrop-filter:blur(2px)
}

.image-grid-item {
position:relative;
width:100px;
height:100px
}

.image-grid-item img {
width:100px;
height:100px;
object-fit:cover;
transition:transform .5s
}

.what-iknow{
    font-size: 40px;
    color:#fff;
    height: -100px;
}

.scroll-to-top {
box-shadow:10px 10px 15px rgba(0,0,0,1);
background-color:#141414;
letter-spacing:5px;
position:fixed;
bottom:400px;
right:50px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
width:80px;
height:150px;
color:#fff;
font-weight:100;
font-size:20px;
text-align:center;
cursor:pointer;
transition:all .3s ease-in-out;
z-index:9999
}

.scroll-to-top:hover {
color:#e31b6d;
transition:all .3s ease-in-out;
border-radius:10px
}

.scroll-to-top-text {
margin-top:10px;
writing-mode:vertical-rl;
text-orientation:sideways-right
}

.cta {
text-align:center;
padding-top:100px
}

.cta2 {
text-align:center;
position:relative;
top:200px
}

.cta h2 {
font-size:5rem;
margin-bottom:20px
}

.cta2 h2 {
font-size:5rem;
margin-bottom:20px
}

.cta p {
font-size:2rem;
opacity:0.7;
font-weight:10;
margin-top:30px;
margin-bottom:10px
}

.button {
border:none;
padding:10px 20px;
font-size:1.2rem;
border-bottom:1px solid #fff;
color:#fff;
cursor:pointer;
transition:all .3s ease-in-out
}

.button:hover {
border-radius:30px;
color:#e31b6d
}

.social-media {
position:absolute;
bottom:10%;
margin-bottom:-125px;
left:0;
transform:translateY(-50%);
display:flex;
flex-direction:column
}

.social-media a:hover {
transform: translateY(-5px);
}

.social-media a {
display:block;
margin-bottom:1rem
}

.social-media img {
width:60px;
height:60px;
border-radius: 20%;
transition:all .3s ease-in-out;
margin-left: 45px
}

#container {
position:relative;
min-height:100vh
}

#footer {
background-color:transparent;
color:#fff;
text-align:center;
padding:20px
}

.contact {
padding:50px;
font-family:'Montserrat',sans-serif;
display:flex;
justify-content:center
}

.contact .left-section {
width:900px;
margin-right:30px;
background:url(https://cdn.wallpapersafari.com/12/49/e1HDgu.jpg);
background-color:rgba(255,255,255,0.1);
box-shadow:-10px 10px 2px 0 rgba(0,0,0,0.8);
background-size:cover;
background-position:center;
color:#FFF;
padding:50px
}

.contact .left-section h2 {
font-size:2.5rem;
margin-bottom:25px
}

.contact .left-section p {
font-size:1.2rem;
line-height:1.5;
margin-bottom:50px
}

.contact .left-section p a {
text-shadow:0 1px 1px #000;
text-decoration:none;
font-size:1.5rem;
color:#FFF;
transition:all .3s ease-in-out
}

.contact .left-section p a:hover {
color:#e31b6d;
transition:all .3s ease-in-out
}

.portfolio {
padding:50px 0
}

.portfolio h2 {
font-family:'Montserrat',sans-serif;
font-weight:100;
font-size:50px;
color:#FFF;
text-align:center;
margin-bottom:30px
}

.gallery {
display:flex;
flex-wrap:wrap;
justify-content:center
}

.item {
position:relative;
width:650px;
height:400px;
margin:20px;
overflow:hidden;
border-radius:5px;
box-shadow:-15px 15px 10px rgba(0,0,0,1)
}

.item img {
width:100%;
height:100%;
object-fit:cover;
transition:transform .5s
}

.item:hover img {
transform:scale(1.5)
}

.overlay {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-color:rgba(0,0,0,0.7);
color:#fff;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
padding:20px;
opacity:0;
transition:opacity .5s
}

.item:hover .overlay {
opacity:1
}

.overlay h3 {
font-size:30px;
margin-bottom:10px;
text-align:center
}

.overlay p {
font-size:20px;
text-align:center
}

.video-row {
display:flex;
gap:50px;
flex-wrap:wrap;
justify-content:space-between;
}

.video-container {
display:flex;
position:relative;
z-index:1;
flex-direction:row;
align-items:center;
margin-top:10px;
margin-bottom:20px;
width: 90%;
}

#video-section {
position:relative;
width: 90%;
top:200px;
}

.video iframe {
display:block;
width:100%;
height:100%
}

.video-description {
background-color:rgba(128,128,128,0.2);
padding:15px;
width:500px;
margin:0 auto;
border-radius:5px;
font-size:22px
}

.video-description h2 {
padding-bottom:20px
}

.video-section {
margin-top:100px;
}

#lastvid {
padding-top:200px;
padding-bottom:50px
}

#home-btn {
margin-top:900px;
padding:10px 20px;
position:relative;
top:200px
}

#home-btn ul li a:hover {
color:#e31b6d;
border-radius:20px
}

@media (min-width: 992px) and (max-width: 1440px) {
    .about-me-box {
        width: 80%; /* Remove width limitation */
        padding: 20px; /* Reduce top/bottom padding for better content visibility */
        margin: 10px auto; /* Add or adjust margins for spacing on mobile */
      }

    .image-grid-container {
        width: 70%; /* Remove width limitation */
        padding: 20px; /* Reduce top/bottom padding for better content visibility */
        margin-bottom: 10px auto; /* Add or adjust margins for spacing on mobile */
    }

    .image-grid-container i {
        font-size: 20px; /* Adjust the font-size for icon size reduction */
      }

    header {
        height: fit-content; /* Adjust height based on content */
        padding-top: 150px; /* Add top padding for content */
        padding-bottom: 330px; /* Add bottom padding for content */
    }

    .social-media {
        margin-bottom:-100px;
    }

    nav ul li {
        margin: 0 20px; /* Increase spacing between navigation items on tablets */
      }

    body {
        background-size: auto;
      }
}

@media (min-width: 768px) and (max-width: 992px) {

    nav ul li {
      margin: 0 20px; /* Increase spacing between navigation items on tablets */
    }
  
    .about-me p {
      line-height: 1.2; /* Adjust line height for better readability */
      margin-left: 0px;
      margin-right: -10px;
    }

    .about-me-box {
        width: 80%; /* Remove width limitation */
        padding: 20px; /* Reduce top/bottom padding for better content visibility */
        margin: 10px auto; /* Add or adjust margins for spacing on mobile */
      }
    
    .image-grid-container {
        width: 80%; /* Remove width limitation */
        margin-bottom: 10px; /* Add or adjust margins for spacing on mobile */
    }

    header {
        height: fit-content; /* Adjust height based on content */
        padding-top: 150px; /* Add top padding for content */
        padding-bottom: 50px; /* Add bottom padding for content */
    }

    .cta h1,
    .cta h2,
    .cta h3 {
        font-size: calc(3em - 0.5rem); /* Reduce font size by 0.5rem */
    }

    .scroll-to-top {
      display: none;
    }
    
}  

@media (max-width: 767px) {
    body {
        border: none;
        background-size: cover;
    }

    .scroll-to-top {
      display: none;
    }
}