/* Import fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Ubuntu:wght@400;500;700&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css');
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@600&display=swap');
/* Global styles */
* {
    text-decoration: none;
}

body {
    font-family: 'Ubuntu', sans-serif;
}

/* Section styling */
section {
    padding: 100px 0;
}

.max-width {
    max-width: 1300px;
    padding: 0 80px;
    margin: auto;
}

/* Font styles */
.info, .showinfo, .showreel, .post, .soft, footer {
    font-family: 'Poppins', sans-serif;
}

/* Title styling */
section .title {
    position: relative;
    text-align: center;
    font-size: 40px;
    font-weight: 900;
    margin-bottom: 60px;
    padding-bottom: 20px;
    font-family: 'Ubuntu', sans-serif;
    color: white;
}
section .title::before {
    content: "";
    position: absolute;
    bottom: 0px;
    left: 50%;
    width: 180px;
    height: 3px;
    background: #111;
    transform: translateX(-50%);
}

section .title::after {
    position: absolute;
    bottom: -8px;
    left: 50%;
    font-size: 20px;
    color: crimson;
    padding: 0 5px;
    background: #fff;
    transform: translateX(-50%);
}
/* iframe {
    top: 0; left: 0; width: 100%;
    border: none; padding-top: 32px;
    box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
} */
iframe{
    top: 0; left: 0; width: 100%;
    border: none; padding-top: 32px;
    box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
}
/* .smalliframe{
    margin:0; padding: 0; left: 0; width: 50%;
    border: none; padding-top: 32px;
    box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
} */
/* Showreel section styling */
.Showreel, .teams{
    color:#fff;
    /* background: #111; */
}
.Showreel .title::before,
.teams .title::before{
    background: #282828;
}
/* .Showreel .title::after,
.teams .title::after{
    background: #000000;
    content: "Who Am i?";
} */
.Showreel .Showreel-content{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    position: relative;
}
.iframe-grid {
  display: flex;
  flex-wrap: wrap;
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Adjust the number of columns as needed */
  gap: 10px; /* Adjust the gap between iframes as needed */
  justify-content: space-between;
}

.iframe-grid iframe {
    width: 100%;
    height: 350px; /* Adjust the height as needed */
    border: none; /* Remove the iframe border if desired */

}
.Showreel-content iframe {
    width: 100%;
    height: 700px; /* Adjust the height as needed */
    border: none; /* Remove the iframe border if desired */

}
/* Post section styling */
.Post, .teams{
    color:#fff;
    /* background: #111; */
}
.Post .title::before,
.teams .title::before{
    background: #282828;
    width: 230px;
}
@media (max-width: 1200px){
    .iframe-grid {
      display: block;
      flex-wrap: nowrap;
      display: block;
      grid-template-columns:none; /* Adjust the number of columns as needed */
    }
    .iframe-grid iframe {
        width: 100%;
        border: none; /* Remove the iframe border if desired */
    
    }
    .Showreel-content iframe {
        width: 100%;
        height: 350px; /* Adjust the height as needed */
        border: none; /* Remove the iframe border if desired */
    
    }
}
@media (max-width: 991px) {
    .max-width{
        padding: 0 50px;
    }
}
@media (max-width: 947px){
    .menu-btn{
        display: block;
        z-index: 999;
    }
    .menu-btn i.active:before{
        content: "\f00d";
    }
    .navbar .menu{
        position: fixed;
        height: 100vh;
        width: 100%;
        left: -100%;
        top: 0;
        background: #111;
        text-align: center;
        padding-top: 80px;
        transition: all 0.3s ease;
    }
    .navbar .menu.active{
        left: 0;
    }
    .navbar .menu li{
        display: block;
    }
    .navbar .menu li a{
        display: inline-block;
        margin: 20px 0;
        font-size: 25px;
    }
    .max-width{
        max-width: 930px;
    }
}
@media (max-width: 690px) {
    .max-width{
        padding: 0 23px;
    }
}
@media (max-width: 500px) {
    .scroll-up-btn{
        right: 15px;
        bottom: 15px;
        height: 38px;
        width: 35px;
        font-size: 23px;
        line-height: 38px;
    }
}