*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    list-style: none;
    text-decoration: none;
    scroll-behavior: smooth;
    scrollbar-color: #af77178e #000000;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-focus-ring-color: transparent;
    
}

:root{
    --bg-color:  rgba(15, 15, 15, 0.356);
    --text-color1: #f3e7e7;
    --text-color2: #AF7817;
    --main-color: #39393d;
    --main-blackish: #242323;
    --glass-bg: rgba(255, 255, 255, 0.05);
    --font-1: font-family: "Fira Sans Condensed", sans-serif;


}
::selection {
  background-color: #af77178e;
  color: #ffffffe3;
}
::-moz-selection {   /*   For Firefox :(     */
   background-color: #af77178e;
  color: #ffffffe3
}
body{
    background-color: black;
}
header{
    margin-top: -10px;
    position: fixed;
    backdrop-filter: blur(20px);
    background-color: #000000b6;
    z-index: 1000;
    height: 80px;
    padding: 40px 70px 5px 70px;
    display: flex;
    width: 100%;
    justify-content: space-between;
    border-bottom: 1px solid #af771767;
}
.logo-img{
    border-radius: 50%;
    
    margin: -14px 0px 0px 0px;
}
.logo-img img{
    width: 50px;
    height: 50px;
    border-radius: 50%;
}
.hamburger {
    margin-top: -10px;
    cursor: pointer;
    display: none;
    position: absolute;
    top: 40px;
    right: 30px;
    width: 35px;
    height: 30px;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}
.bar{
    margin: 4px 0px;
    width: 40px;
    height: 2.4px;
    background-color: #AF7817 ;
    transition: 0.2s;
}
.bar-3{
    opacity: 0;
    transition: 0.1s;
}
.navlist{
    justify-content: right;
    display: flex;
    text-align: right;
}
.navlist li{
    display: flex;
    display: inline-block;
    text-align: right;
    justify-content: right;
}
.navlist li a{
    font-family: "Fira Sans Condensed", sans-serif;
    font-weight: 500;
    font-style: normal;
    position: relative;
    font-size: 20px;
    color: #ffffffe3;
    text-align: right;
    display: inline-block;
    margin: -10px 30px 0px 30px;
}
.navlist li a:hover{
  color: #AF7817;
}
.navlist  li a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1.2px;
  background-color: #AF7817;
  transition: width 0.4s ease-in-out;
}
.navlist  li a:hover::after {
  width: 100%;
}
.navlist li.uno a{
  color: #AF7817;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.navlist li.uno a::after{
    display: none;
}
.navlist li a button::after{
    display: none;
}
.navlist a.last-btn,
.navlist a.last-btn:hover,
.navlist a.last-btn:focus,
.navlist a.last-btn:active,
.navlist a.last-btn:visited {
  text-decoration: none;
}
html {
    scroll-behavior: smooth;
}
section {
    scroll-margin-top: 80px; 
} 

#nav-btn li a.btn{
    
    margin-top: -20px;
    font-size: 20px;
    font-family: "Fira Sans Condensed", sans-serif;
    font-weight: 500;
    display: inline-block;
    text-align: center;
    padding: 9px 13px;
    border: 1.42px solid #AF7817;
    border-radius: 10px;
    position: relative;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.1);
    color: #AF7817;
    background-color: #000000;
    text-decoration: none;
    transition: 0.3s ease all;
    z-index: 1;
}

#nav-btn li a.btn:before {
  transition: 0.5s all ease;
  position: absolute;
  top: 0;
  left: 50%;
  right: 50%;
  bottom: 0;
  opacity: 0;
  content: '';
  background-color: #AF7817;
  border-radius: 7px;
  z-index: -1;
  color: #ffffffe3;
}
#nav-btn li a.btn:hover,:focus {
  color: #ffffffe3;
  border-radius: 10px;
}
#nav-btn li a.btn:hover:before,:focus:before {
    transition: 0.5s all ease;
    left: 0;
    right: 0;
    color: #ffffffe3;
    opacity: 1;
}
#nav-btn li a.btn:active {
    transform: scale(0.9);
}
#hero{
    padding-top: 10px;
    height: 800px;
    flex-direction: row;
    align-items: center;
    text-align: left;
    justify-content: space-between;
    
}
.hero-text{
    margin: 220px 0px 0px 200px;
    flex-direction: column;    
}
.hero-text h1{
    flex: 1;
    color: #ffffffee;
    font-size: 80px;
    margin-left: 80px;
   font-family: "Courgette", cursive;
  font-weight: 300;
  font-style: normal;
}
.hero-text h2{
    flex: 1;
    color: #ffffffee;
    font-size: 80px;
    margin-left: 190px;
    margin-top: -10px;
  font-family: "Courgette", cursive;
  font-weight: 300;
  font-style: normal;
}
.hero-text p{
    color: #AF7817;
    font-family: "Fira Sans Condensed", sans-serif;
    font-weight: 500;
    font-size: 20px;
    font-style: normal;
    margin-top: 20px;
    margin-left: 220px;
}
.hero-text span{
    color: #ffffffc4;
}
.scroll-down i{
    margin-top: 70px;
    margin-left: 340px;
    font-size: 50px;
    color: #ffffffc4;



}
.hero-img{
    flex: 1;
    display: flex;
    justify-content: right;
    margin: -380px 300px 0px 0px;
}
.hero-img img{
    border-radius: 30px;
    height: 470px;
    width: 370px;
}
#about{
    height: 1000px;
    padding: 0px 40px 0px 40px;
}
.about-bg{
    margin-top: -40px;
    padding-top: 90px;
    height: 900px;
    border-radius: 20px;
    background-color: var(--bg-color);
    flex-direction: row;
    align-items: center;
    text-align: left;
    justify-content: space-between;
    border: 1px solid #af771767;
    border-bottom: none;
}
.about-txt {
    margin: 130px 0px -170px 345px;
    text-align: right;   
    width: fit-content;
    line-height: 70px;
    display: block;
    color: #ffffffee;
    font-size: 80px;
   font-family: "Courgette", cursive;
  font-weight: 300;
  font-style: normal;
}
.about-txt-2{
    width: 440px;        
    text-align: right;  
    line-height: 30px;
    margin-left: 120px;
    margin-top: 180px;
    display: block;
    color: #ffffff;
    font-family: "Fira Sans Condensed", sans-serif;
    font-weight: 500;
    font-size: 20px;
    font-style: normal;
}
.about-txt-2 span{
    color: var(--text-color2);
    font-family: "Fira Sans Condensed", sans-serif;
    font-weight: 500;
    font-size: 20px;
}
.about-img{
    flex: 1;
    display: flex;
    justify-content: right;
    margin: -540px 260px 0px 0px;    
}
.about-img img{
    height: 540px;
    width: 370px;
    border-radius: 30px;
}
#portfolio{
    height: 2500px;
    padding: 0px 40px 0px 40px;
}
.port-bg{
    margin-top: -10px;
    padding-top: 200px;
    height: 2400px;
    border-radius: 20px;
    background-color: var(--bg-color);
    flex-direction: row;
    align-items: center;
    text-align: left;
    justify-content: space-between;
    border: 1px solid #af771767;
    border-bottom: none;
}
.port-txt {
    margin: -20px 0px -170px 256px;
    text-align: right;   
    width: fit-content;
    color:#ffffffee ;
    font-size: 80px;
       font-family: "Courgette", cursive;
  font-weight: 300;
  font-style: normal;
}
.port-txt span{
    display: block;
    border-radius: 10px;
    color: #AF7817;
    font-weight: 500;
    font-size: 25px;
    font-style: normal;
    font-family: "Fira Sans Condensed", sans-serif;
}
.masonry{
    margin-top: 240px;
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}
.masonry img{
    height: 440px;
    width: 290px;
    border-radius: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.masonry-2{
    margin-top: 30px;
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}
.masonry-2 img{
    height: 440px;
    width: 290px;
    border-radius: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.masonry img:hover{
    transform: scale(1.03);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
.masonry-2 img:hover{
    transform: scale(1.03);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
.port-txt-3{
    margin: 70px 0px -40px 470px;  
    color: #ffffff;
    font-weight: 500;
    font-size: 25px;
    font-style: normal;
    font-family: "Fira Sans Condensed", sans-serif;
}
.port-txt-3 span{
    padding: 8px 10px 8px 10px;
    color: #ffffff;
    background-color: #af77178e;
    border-radius: 10px;
}
.judging{
    margin-top: 90px;
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}
.judging img{

    border-radius: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.judging img:hover{
    transform: scale(1.03);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
.judg1-1{
    height: 300px;
    width: 470px;
    border-radius: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;  
}
.judg1-2{
    height: 300px;
    width: 470px;
    border-radius: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;  
}
.port-txt-4{
    margin: 70px 0px -40px 256px;  
    color: #AF7817;
    font-weight: 500;
    font-size: 25px;
    font-style: normal;
    font-family: "Fira Sans Condensed", sans-serif;
}
.coach{
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
    gap: 30px; 
}
.coach img:hover{
    transform: scale(1.03);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
.coach-1{
    height: 440px;
    width: 290px;
    border-radius: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;  
}
.coach-2{
    margin-top: 140px;
    height: 300px;
    width: 470px;
    border-radius: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;  
}
#experience{
    height: 6600px;
    padding: 0px 40px 0px 40px;
}
.experience-bg{
    margin-top: 10px;
    padding-top: 40px;
    height: 6500px;
    border-radius: 20px;
    background-color: var(--bg-color);
    flex-direction: row;
    align-items: center;
    text-align: left;
    justify-content: space-between;
    border: 1px solid #af771767;
    border-bottom: none;
}
.experience-txt {
    margin: 140px 0px 0px 177px;
    text-align: right;   
    width: fit-content;
    color:#ffffffee ;
    font-size: 80px;
       font-family: "Courgette", cursive;
  font-weight: 300;
  font-style: normal;
}
.experience-txt span{
    display: block;
    color: #AF7817;
    font-weight: 500;
    font-size: 25px;
    font-style: normal;
    font-family: "Fira Sans Condensed", sans-serif;
}
.experience-txt-2{
    width: 440px;  
    color: #ffffff; 
    font-weight: 500;
    font-size: 20px;
    font-style: normal;
    font-family: "Fira Sans Condensed", sans-serif;     
    text-align: right;  
    line-height: 30px;
    margin-left: 120px;
    margin-top: 0px;
}
.experience-img{
    flex: 1;
    display: flex;
    justify-content: right;
    margin: -450px 260px 0px 0px; 
    transition: transform 0.3s ease, box-shadow 0.3s ease; 
}
.experience-img img{
    height: 540px;
    width: 370px;
    border-radius: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.experience-img img:hover{
    transform: scale(1.03);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
.mibs-section{
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
    gap: 30px; 
}
.mibs-1{
    margin-left: 100px;
    height: 470px;
    width: 290px;
    border-radius: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;  
}
.mibs-2{
    margin-top: 40px;
    margin-left: 20px;
    height: 270px;
    width: 470px;
    border-radius: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;  
}
.mibs-section img:hover{
    transform: scale(1.03);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
.experience-txt-3 span{
    margin: 140px 0px 0px 210px;
    text-align: right;   
    width: fit-content;
    display: block;
    background-color:  #af771767;
    border-radius: 10px;
    padding: 8px 10px 8px 10px;
    color: #ffffff;
    font-weight: 500;
    font-size: 25px;
    font-style: normal;
    font-family: "Fira Sans Condensed", sans-serif;
}
.experience-txt-4{
    width: 440px;  
    color: #ffffff; 
    font-weight: 500;
    font-size: 20px;
    font-style: normal;
    font-family: "Fira Sans Condensed", sans-serif;     
    text-align: right;  
    line-height: 30px;
    margin-left: 120px;
    margin-top: 0px;
}
.douche-section{
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
    gap: 30px; 
}
.douche-img-1{
    margin-top: 40px;
    margin-right: 40px;
    height: 470px;
    width: 290px;
    border-radius: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;   
}
.douche-img-2{
    margin-right: 60px;
    margin-top: 40px;
    height: 470px;
    width: 290px;
    border-radius: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;   
}
.douche-section img:hover{
    transform: scale(1.03);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
.experience-txt-5 span{
    margin: 140px 0px 0px 248px;
    text-align: right;   
    width: fit-content;
    display: block;
    padding: 8px 10px 8px 10px;
    background-color:  #af771767;
    border-radius: 10px;
    color:#ffffff;
    font-weight: 500;
    font-size: 25px;
    font-style: normal;
    font-family: "Fira Sans Condensed", sans-serif;
}
.experience-txt-6{
    width: 440px;  
    color: #ffffff; 
    font-weight: 500;
    font-size: 20px;
    font-style: normal;
    font-family: "Fira Sans Condensed", sans-serif;     
    text-align: right;  
    line-height: 30px;
    margin-left: 120px;
    margin-top: 0px;
}
.judgeeeyyy-img-1{
    flex: 1;
    display: flex;
    justify-content: right;
    margin: -400px 260px 0px 0px; 
    transition: transform 0.3s ease, box-shadow 0.3s ease; 
}
.judgeeeyyy-img-1 img{
    height: 540px;
    width: 370px;
    border-radius: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.judgeeeyyy-img-1 img:hover{
    transform: scale(1.03);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
.judgeyy-section{
    margin-top: 40px;
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}
.judgeyy-section img{
    height: 300px;
    width: 470px;
    border-radius: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;  
}
.judgeyy-section img:hover{
    transform: scale(1.03);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
.experience-txt-7 span{
    margin: 140px 0px 0px 390px;
    text-align: right;   
    width: fit-content;
    display: block;
    background-color:  #af771767;
    color: #ffffff;
    padding: 8px 10px 8px 10px;
    border-radius: 10px;
    font-weight: 500;
    font-size: 25px;
    font-style: normal;
    font-family: "Fira Sans Condensed", sans-serif;
}
.experience-txt-8{
    width: 440px;  
    color: #ffffff; 
    font-weight: 500;
    font-size: 20px;
    font-style: normal;
    font-family: "Fira Sans Condensed", sans-serif;     
    text-align: right;  
    line-height: 30px;
    margin-left: 120px;
    margin-top: 0px;
}
.j-img-1{
    flex: 1;
    display: flex;
    justify-content: right;
    margin: -300px 260px 0px 0px; 
    transition: transform 0.3s ease, box-shadow 0.3s ease; 
}
.j-img-1 img{
    height: 540px;
    width: 370px;
    border-radius: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.j-img-1 img:hover{
    transform: scale(1.03);
}
.experience-txt-9 span{
    margin: 140px 0px 0px 294px;
    text-align: right;   
    width: fit-content;
    display: block;
    background-color:  #af771767;
    border-radius: 10px;
    padding: 8px 10px 8px 10px;
    color: #ffffff;
    font-weight: 500;
    font-size: 25px;
    font-style: normal;
    font-family: "Fira Sans Condensed", sans-serif;
}
.experience-txt-10{
    width: 440px;  
    color: #ffffff; 
    font-weight: 500;
    font-size: 20px;
    font-style: normal;
    font-family: "Fira Sans Condensed", sans-serif;     
    text-align: right;  
    line-height: 30px;
    margin-left: 120px;
    margin-top: 0px;
}
.cre-img-1{
    flex: 1;
    display: flex;
    justify-content: right;
    margin: -400px 260px 0px 0px; 
    transition: transform 0.3s ease, box-shadow 0.3s ease; 
}
.cre-img-1 img{
    height: 460px;
    width: 360px;
    border-radius: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.cre-img-1 img:hover{
    transform: scale(1.03);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
.creative-section{
    margin-top: 40px;
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}
.creative-img{
    height: 440px;
    width: 340px;
    border-radius: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.creative-img:hover{
    transform: scale(1.03);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
.creative-section-2{
    margin-top: 40px;
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}
.creative-img-b{
    height: 440px;
    width: 290px;
    border-radius: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.creative-img-b:hover{
    transform: scale(1.03);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
.creative-section-3{
    margin-top: 40px;
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
    gap: 60px;
}
.experience-txt-11 span{
    margin: -300px 0px 40px 120px;
    text-align: right;   
    width: 440px; 
    display: block;
    color: #ffffff;
    font-weight: 500;
    font-size: 20px;
    font-style: normal;
    font-family: "Fira Sans Condensed", sans-serif;
}
.experience-txt-12 span{
    text-align: right; 
    margin: 120px 0px 0px 120px;  
    width: 440px; 
    display: block;
    color: #ffffff;
    font-weight: 500;
    font-size: 20px;
    font-style: normal;
    font-family: "Fira Sans Condensed", sans-serif;
}
.newspaper-img{
    flex: 1;
    display: flex;
    justify-content: right;
    margin: -120px 260px 0px 0px; 
    transition: transform 0.3s ease, box-shadow 0.3s ease; 
}
.newspaper-img img{
    height: 460px;
    width: 360px;
    border-radius: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.newspaper-img img:hover{
    transform: scale(1.03);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
#reach-out{
    height: 840px;
    padding: 0px 40px 0px 40px;
}
.reach-out-bg{
    margin-top: 10px;
    padding-top: 40px;
    height: 800px;
    border-radius: 20px;
    border-bottom-style: hidden;
    background-color: var(--bg-color);
    flex-direction: row;
    align-items: center;
    text-align: left;
    justify-content: space-between;
    border: 1px solid #af771767;
    border-bottom: none;
}
.about-tt-2 span.gold-txt{
    color: var(--text-color2);
}
.reach-out-txt{
   text-align: right;  
   line-height: 70px; 
   margin: 140px 0px 0px 340px;
}
.reach-out-txt span{
    text-align: right;   
    width: fit-content;
    display: block;
    color:#ffffffee ;
    font-size: 80px;
    font-family: "Courgette", cursive;
    font-weight: 300;
    font-style: normal;
}
.reach-out-img{
    flex: 1;
    display: flex;
    justify-content: right;
    margin: -550px 310px 0px 0px; 
    transition: transform 0.3s ease, box-shadow 0.3s ease; 
}
.reach-out-img img{
    height: 490px;
    width: 330px;
    border-radius: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.reach-out-side-2{
    margin: 40px 0px 0px 30px;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}
.reach-out-side-2 form{
    width: 70%;
}
.contact-container{
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}
.contact-left{
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 20px;
}
.contacts-inputs{
    width: 400px;
    height: 50px;
    border: 1px solid #af771767;
    outline: none;
    padding-left: 25px;
    font-weight: 500;
    font-size: 20px;
    background-color: #000000;
    color: #AF7817;
    border-radius: 10px;
}
.contact-left textarea{
    height: 140px;
    padding-top: 15px;
    border-radius: 10px;
    background: #000000;
}
.contacts-inputs:focus{
    border: 1.2px solid var(--text-color2);
}
.contacts-inputs::placeholder{
    color: #af771770;
}
.contact-left button{
    margin-top: 10px;
    margin-left: 300px;
    display: flex;
    align-items: center;
    padding: 8px 17px 8px 17px;
    gap: 10px;
    cursor: pointer;
}
button{
    margin-left: 30px;
    margin-top: -20px;
    font-size: 21px;
    font-family: "Fira Sans Condensed", sans-serif;
    font-weight: 500;
    display: inline-block;
    text-align: center;
    padding: 9px 13px;
    border: 1.42px solid #AF7817;
    border-radius: 10px;
    position: relative;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.1);
    color: #AF7817;
    background-color: #000000;
    text-decoration: none;
    transition: 0.3s ease all;
    z-index: 1;
}
button:before {
  transition: 0.5s all ease;
  position: absolute;
  top: 0;
  left: 50%;
  right: 50%;
  bottom: 0;
  opacity: 0;
  content: '';
  background-color: #AF7817;
  border-radius: 7px;
  z-index: -1;
  color: #ffffffe3;
}
button:hover, button:focus {
  color: #ffffffe3;
  border-radius: 10px;
}
button:hover:before, button:focus:before {
    transition: 0.5s all ease;
    left: 0;
    right: 0;
    color: #ffffffe3;
    opacity: 1;
}
button:active {
    transform: scale(0.9);
}
#the-end{
    height: 130px;
    text-align: center;
    justify-content: center;
     font-family: "Courgette", cursive;
  font-weight: 300;
  font-style: normal;
  font-size: 80px; 
  color: #AF7817;
}
#footer{
    background-color: var(--bg-color);
    justify-content: center;
    display: flex;
    align-content: center;
    flex-wrap: wrap;
    height: 300px;
    border-top: 1px solid #af771767;
}
.footer-logo-img{
    gap: 20px;
    border-radius: 50%;
    width: 70px;
    height: 70px;
}
.footer-logo-img img{
    width: 50px;
    height: 50px;
    border-radius: 50%;
}
.reach-out-side-1 {
    padding: 0 40px;
  display: flex;
  flex-direction: column;
  gap: 20px; 
  font-size: 18px;
    font-style: normal;
    font-weight: 560;
    font-family: "Fira Sans Condensed", sans-serif;
}
.contact-item {
  display: flex;
  align-items: center;
  gap: 20px; 
}
.contact-item i {
  color: var(--text-color2); 
  font-size: 20px;
}
.contact-item span{
    color: var(--text-color1);
}
.reach-out-side-1-1 {
  display: flex;
  flex-direction: column;
  gap: 20px; 
  font-size: 18px;
    font-style: normal;
    font-weight: 560;
    font-family: "Fira Sans Condensed", sans-serif;
}
.contact-item-1 {
  display: flex;
  align-items: center;
  gap: 20px; 
}
.contact-item-1 a {
  color: var(--text-color2); 
  font-size: 20px;
}
.contact-item-1 a i{
    padding: 0 14px;
}
.contact-item-1 span{
    color: var(--text-color1);
    font-size: 18px;
}
.reach-out-side-1-1 a i:hover{
    color: var(--text-color2);
    transition: 0.5s all ease;
}

#footer-2{
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
    gap: 580px;
    padding: 50px 49px 0px 49px;
    height: 100px;
    background-color: var(--bg-color);

}
.footer-2-txt{
    text-decoration: none;
    color: #AF7817;
    font-family: "Fira Sans Condensed", sans-serif;
    font-weight: 500;
    font-size: 16px;
    font-style: normal;
}
.footer-2-txt a{
    text-decoration: none;
    color: #AF7817;
    font-family: "Fira Sans Condensed", sans-serif;
    font-weight: 500;
    font-size: 16px;
    font-style: normal;
}
@media screen and (min-width: 1900px) {
    body{
        justify-content: center;
        text-align: center;
        align-items: center;
        align-content: center;
        padding-left: 400px;
        padding-right: 400px;
    }
    header{
        padding: auto 100px auto 100px;
    }
    #nav-btn li a.btn{
        margin: -20px 170px 0px 0px;
    }
}
@media screen and (min-width: 1600px) {
    body{
        justify-content: center;
        text-align: center;
        align-items: center;
        align-content: center;
        padding-left: 400px;
        padding-right: 400px;
    }
    header{
        padding: auto 100px auto 100px;
    }
    #nav-btn li a.btn{
        margin: -20px 170px 0px 0px;
    }
}
@media screen and (min-width: 1440px) {
    body{
        padding-left: 70px;
        padding-right: 70px;
    }
    header{
        padding: auto 100px auto 100px;
    }
    #nav-btn li a.btn{
        margin: -20px 170px 0px 0px;
    }
}
@media (max-width: 1330px) {
    .hero-text{
        margin: 220px 0px 0px 14%;    
    }
    .hero-img{
        margin: -380px 21% 0px 0px;
    }
    .about-txt{
        margin-left: 25vw;
    }
    .about-txt-2{
        margin-left: 8vw;
    }
    .about-img{
        margin-right: 18vw;
    }
    .port-txt{
        margin-left: 18%;
    }
    .experience-txt {
        margin-left: 13%;
    }
    .experience-txt-2{
        margin-left: 8%;
    }
    .experience-img{
        margin-right: 18%;
    }
    .judgeeeyyy-img-1{
        margin-right: 10%;
    }
    .j-img-1{
        margin-right: 10%;
    }
    .cre-img-1{
        margin-right: 10%;
    }
    .creative-img{
        height: 410px;
        width: 300px;
    }
    .reach-out-side-2{
       margin: 40px 0px 0px 20px; 
    }
    .reach-out-img{
        margin-right: 22%;
    }
}
@media (max-width: 1270px) {
    .hero-text{
        margin: 220px 0px 0px 10%;    
    }
    .hero-img{
        margin: -380px 18% 0px 0px;
    }
    .about-txt{
        margin-left: 21vw;
    }
    .about-txt-2{
        margin-left: 3vw;
    }
    .about-img{
        margin-right: 15vw;
    }
    .port-txt{
        margin-left: 14vw;
    }
    .experience-txt {
        margin-left: 8%;
    }
    .experience-txt-2{
        margin-left: 3%;
    }
    .experience-img{
        margin-right: 10%;
    }
    .judgeeeyyy-img-1{
        margin-right: 8%;
    }
    .newspaper-img{
        margin-right: 4%;
    }
    .reach-out-img{
        margin-right: 14%;
    }
    .reach-out-txt span{
        margin-left: -2%;
    }
    #footer-2{
        gap: 500px;
        padding: 50px 70px 0px 70px;
    }
}
@media (max-width: 1130px) {
 
    .hero-text{
        margin: 220px 0px 0px 8%;    
    }
    .hero-img{
        margin-right: 14%;
    }
    .hero-img img{
        height: 450px;
        width: 330px;
    }
    .hero-text h1{
        font-size: 70px;
        margin-left: 10%;
    }
    .hero-text h2{
        font-size: 70px;
        margin-left: 20%;
    }
    .hero-text p{
        font-weight: 500;
        font-size: 18px;
        margin-left: 22%;
    }
    .scroll-down i{
        margin-left: 340px;
        font-size: 40px;
    }
    #about{
       height: 1000px;
       padding: 0px 20px 0px 20px;
    }
    .about-txt{
        margin-left: 24vw;
        font-size: 70px;
    }
    .about-txt-2{
        margin-left: 1vw;
        font-weight: 500;
        font-size: 18px;
    }
    .about-img{
        margin-top: -470px;
        margin-right: 14vw;
    }
    .about-img img{
        height: 450px;
        width: 310px;
    }
    #portfolio{
        padding: 0px 20px 0px 20px;
    }
    .port-txt{
        margin-left: 12vw;
    }
    .masonry img{
       height: 400px;
        width: 270px;
    }
    .masonry-2 img{
        height: 400px;
        width: 270px;
    }
    #experience{
       height: 6500px;
       padding: 0px 20px 0px 20px;
    }
    .experience-bg{
        height: 6400px;
    }
    .experience-txt {
  
        margin-left: 5%;
    }
    .experience-txt-2{
        margin-left: 9%;
        width: 340px;
    }
    .experience-img{
        margin-top: -370px;
        margin-right: 12%;
    }
    .experience-img img{
        height: 400px;
        width: 270px;
    }
    .mibs-1{
        margin-top: 40px;
        height: 440px;
        width: 270px;
    }
    .mibs-2{
        height: 250px;
        width: 400px;
    }
    .douche-section{
        gap: 20px; 
    }
    #experience{
        padding: 0px 20px 0px 20px;
    }
    .experience-txt-3 span{
        margin-left: 7%;
    }
    .experience-txt-4{
        margin-left: 8%;
        width: 330px;
    }
    .experience-txt-5 span{
        margin-left: 12%;
    }
    .experience-txt-6{
        margin-left: 10%;
        width: 330px;
    }
    .judgeeeyyy-img-1{
        margin-right: 10%;
    }
    .judgeeeyyy-img-1 img{
        height: 440px;
        width: 270px;
    }
    .j-img-1{
        margin-right: 10%;
    }
    .j-img-1 img{
        height: 400px;
        width: 270px;
    }
    .experience-txt-7 span{
        margin-left: 25%;
    }
    .experience-txt-8{
        margin-left: 10%;
        width: 330px;
    }
    .experience-txt-9 span{
        margin-left: 16%;
    }
    .experience-txt-10{
        margin-left: 10%;
        width: 330px;
    }
    .cre-img-1{
        margin-left: 20%
    }
    .cre-img-1 img{
        height: 390px;
        width: 290px;
    }
    .creative-img{
        height: 390px;
        width: 290px;
    }
    .creative-img-b{
        height: 390px;
        width: 270px;
    }
    .experience-txt-12 span{
 
        margin-left: 12%;
        width: 300px;
    }
     .experience-txt-11 span{
        margin-left: 12%;
        width: 300px;
    }
    #reach-out{
        padding: 0px 20px 0px 20px;
    }
    .reach-out-img{
        margin-right: 9%;
    }
    .reach-out-txt span{
        margin-left: -4%;
    }
    #footer-2{
        gap: 400px;
        padding: 50px 80px 0px 80px;
    }
}

@media (max-width: 1030px) {
    .navlist li a{
        font-size: 20px;
        margin: -10px 20px 0px 20px;
    }
     #hero{
        height: 800px; 
    }
    .hero-text{
        margin: 220px 0px 0px 2%;    
    }
    .hero-img{
        margin-right: 9%;
    }
    .hero-img img{
        height: 430px;
        width: 310px;
    }
    .scroll-down i{
        margin-left: 34%;
    }
    #about{
       height: 1000px;
       padding: 0px 17px 0px 17px;
    }
    .about-bg{
        padding-top: 0px;
        height: 800px;
    }
    .about-txt{
        margin-left: 19vw;
        font-size: 70px;
    }
    .about-txt-2{
        margin-left: 5%;
        font-weight: 500;
        font-size: 18px;
        width: 320px;
    }
    .about-img{
        margin-top: -470px;
        margin-right: 7vw;
    }
    .about-img img{
        height: 430px;
        width: 310px;
    }
    #portfolio{
        height: 2000px;
        padding: 0px 17px 0px 17px;
    }
    .port-bg{
        height: 1800px;
    }
    .port-txt{
        margin-left: 5vw;
    }
    .masonry img{
       height: 300px;
        width: 200px;
    }
    .masonry-2 img{
        height: 300px;
        width: 200px;
    }
    .port-txt-3{
        margin-left: 23vw;
    }
    .judg1-1{
        height: 210px;
        width: 320px;
    }
    .judg1-2{
       height: 210px;
       width: 320px;
    }
    .coach-2{
        margin-top: 93px;
        height: 210px;
        width: 320px;
    }
    .coach-1{
        height: 300px;
        width: 200px;
    }
    .j-img-1{
        margin-right: 10%;
    }
    .j-img-1 img{
        height: 380px;
        width: 270px; 
    }
    .judgeyy-section img{
        height: 240px;
        width: 350px;
    }
    #experience{
        height: 6100px;
    }
    .experience-bg{
        height: 5900px;
    }
    .experience-txt-7 span{
        margin-left: 26%;
    }
    .creative-section{
        gap: 20px;
    }
    .creative-img{
       height: 290px;
        width: 200px;
    }
    .creative-section-2{
        margin-top: 20px;
        gap: 20px;
    }
    .creative-section-3{
        margin-top: 20px;
        gap: 20px;
    }
    .creative-img-b{
       height: 290px;
        width: 200px;
    }
    #reach-out{
        padding: 0px 17px 0px 17px;
    }
    .reach-out-img{
        margin-right: 2%;
    }
    .reach-out-side-2{
        margin: 40px 0px 0px -40px; 
    }
    .reach-out-txt span{
        margin-left: -13%;
    }
    #footer-2{
        gap: 300px;
        padding: 50px 90px 0px 90px;
    }
}
@media (max-width: 970px) {
    .reach-out-txt span{
        margin-left: -17%;
    }
    #footer-2{
        gap: 200px;
        padding: 50px 100px 0px 100px;
    }
}
@media (max-width: 880px) {
    .navlist li a{
        font-size: 18px;
        margin: -10px 18px 0px 18px;
    }
    #nav-btn li a.btn{
        font-size: 18px;
        padding: 8px 11px;
    }
    .experience-img{
        margin-right: 5%;
    }
    .mibs-section{
        margin-right: 10px;
        gap: 17px; 
    }
    .mibs-1{
        height: 400px;
        width: 240px; 
    }
    .mibs-2{
        height: 210px;
        width: 350px;
    }
    .judgeeeyyy-img-1{
        margin-right: 3%;
    }
    .judgeyy-section{
        margin-top: 20px;
        gap: 22px;
    }
    .judgeyy-section img{
        height: 200px;
        width: 310px;
    }
    .experience-txt-7 span{
        margin-left: 28%;
    }
    .experience-txt-7 span{
        margin-left: 28%;
    }
    .j-img-1{
        margin-right: 10px;
    }
    .cre-img-1 img{
        margin-right: -7%;
    }
    .experience-txt-10 {
        margin-left: 8%;
    }
    .newspaper-img img{
        height: 400px;
        width: 290px; 
    }
    .experience-txt-11{
        margin-top: 40px;
    }
    .reach-out-side-2{
        margin: 40px 0px 0px -80px; 
    }
    .reach-out-txt span{
        margin-left: -40%;
    }
    .contacts-inputs{
        width: 340px;
        height: 44px;
        font-size: 18px;
    }
    .contact-left button{
        margin-left: 240px;
    }
    #footer-2{
        gap: 80px;
        padding: 50px 0px 0px 0px;
    }
    .footer-2-txt{
        font-size: 14px;
    }
    .footer-2-txt a{
        font-size: 14px;
    }
}
@media (max-width: 780px) {
    #hero{
        height: 700px; 
    }
    .hero-text{
        margin: 180px 0px 0px 1%;    
    }
    .hero-img{
        margin-top: -340px;
        margin-right: 4%;
    }
    .hero-img img{
        height: 360px;
        width: 270px;
    }
    .scroll-down i{
        margin-left: 37%;
    }
    .hero-text h1{
        font-size: 70px;
        margin-left: 7%;
    }
    #about{
        height: 700px;
    }
    .about-bg{
        padding-top: 0px;
        height: 670px;
    }
    .about-txt{
        margin-left: 24%;
        font-size: 50px;
    }
    .about-txt-2{
        margin-left: 0%;
        font-weight: 500;
        font-size: 16px;
        width: 300px;
    }
    .about-txt-2 span{
        font-size: 18px;
    }
    .about-img{
        margin-top: -470px;
        margin-right: 0.4vw;
    }
    .about-img img{
        height: 380px;
        width: 270px;
    }
    .port-txt{
        font-size: 50px;
        margin-left: 15%;
    }
    #experience{
        height: 5200px;
    }
    .experience-bg{
        height: 5100px;
    }
    .experience-img{
        margin-right: 3%;
    }
    .experience-txt-2{
        margin-left: 0%;
        font-weight: 500;
        font-size: 16px;
        width: 300px;
    }
    .mibs-section{
        margin-right: 8px;
        gap: 14px; 
    }
    .mibs-1{
        height: 310px;
        width: 210px; 
    }
    .mibs-2{
        height: 190px;
        width: 320px;
    }
    .experience-txt{
        font-size: 50px;
        margin-left: 9%;
    }
    .experience-txt-3 span{
        margin-left: 4%;
        font-size: 20px;
    }
    .experience-txt-4{
        margin-left: 2%;
        font-weight: 500;
        font-size: 16px;
        width: 300px;
    }
    .douche-img-1{
        height: 310px;
        width: 210px;
    }
     .douche-img-2{
        height: 310px;
        width: 210px;
    }
    .experience-txt-5 span{
        margin-left: 9%;
        font-size: 20px;
    }
    .experience-txt-6{
        margin-left: 2%;
        font-weight: 500;
        font-size: 16px;
        width: 300px;
    }
    .experience-txt-7 span{
        margin-left: 24%;
        font-size: 20px;
    }
    .experience-txt-8{
        margin-left: 2%;
        font-weight: 500;
        font-size: 16px;
        width: 300px;
    }
    .cre-img-1 img{
        margin-right: -10%;
    }
     .experience-txt-9 span{
        margin-left: 14%;
        font-size: 20px;
    }
    .experience-txt-10{
        margin-left: 2%;
        font-weight: 500;
        font-size: 16px;
        width: 300px;
    }
    .experience-txt-11 span{
        margin-left: 2%;
        font-weight: 500;
        font-size: 16px;
        width: 300px;
    }
    .experience-txt-12 span{
        margin-left: 2%;
        font-weight: 500;
        font-size: 16px;
        width: 300px;
    }
     .reach-out-side-2{
        margin: 40px 0px 0px -70px; 
    }
     .contacts-inputs{
        width: 300px;
        height: 42px;
        font-size: 16px;
    }
    .reach-out-txt span{
        margin-left: -40%;
        font-size: 50px;
    }
    .contact-left button{
        margin-left: 200px;
    }
    #footer-2{
        gap: 100px;
        padding: 50px 80px 0px 80px;
    }
}
@media (max-width: 773px) {
    header{
        padding: 40px 40px 5px 40px;
    }
    .navlist li a{
        font-size: 17px;
        margin: -10px 16px 0px 16px;
    }
    #nav-btn li a.btn{
        font-size: 17px;
    }
    .hero-text h1{
        margin-right: 4%;
    }
    .masonry{
        gap: 20px;
    }
    .masonry-2{
        gap: 20px;
    }
    .masonry-2{
        margin-top: 20px;
    }
    .judging{
        gap: 20px;
    }
    .coach{
        gap: 20px;
    }
    .mibs-section{
        margin-right: 8px;
        gap: 14px; 
    }
    .mibs-1{
        height: 290px;
        width: 190px; 
    }
    .mibs-2{
        height: 190px;
        width: 320px;
    }
     .reach-out-txt span{
        margin-left: -80%;
    }
    .reach-out-img{
        margin: -480px 20px 0px 0px; 
    }
    .reach-out-img img{
        height: 400px;
        width: 260px;
    }
}
@media(max-width: 700px) {
    header{
        position: fixed;
    }
    .logo-img img{
        width: 40px;
        height: 40px;
    }
    .hamburger {
        display: flex;
    }
   
    .navlist{
        display: none;
        flex-direction: column;
        position: absolute;
        width: 40%;
        height: 400px;
        margin: 49px auto 0px auto;
        left: 57%;
        justify-content: center;
        background:  rgb(0, 0, 0);
        border: 0.7px solid var(--text-color2);
        box-shadow: 0 8px 20px rgb(0, 0, 0);
        border-radius: 20px;
        text-align: center;
        align-items: center;
        overflow: hidden;
        transition: top 2s ease-in-out;
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px); 
    }

    .navlist.active {
        display: flex;
    }
    /*    X-transition for the hamburger :)    */
    .hamburger.active .bar:nth-child(1) {
        transform: rotate(49deg) translate(2.9px, 5px);
    }
    .hamburger.active .bar:nth-child(3) {
        opacity: 0;
    }
    .hamburger.active .bar:nth-child(2) {
        transform: rotate(-48deg) translate(2.9px, -6px);
    }
    .navlist li a {
       font-size: 20px;
       font-weight: 500;
       margin: 10px 0px 20px 0px;
       padding: 15px 10px 15px 10px;
   }
   .navlist a{
        margin: 20px 30px 0px 30px;
        text-underline-offset: -30px;
    }
    #nav-btn{
        display: none;
    }
    #hero{
        height: 1060px;
        display: block;
        justify-content: space-between;
    }
    .hero-text{
        margin-top: 170px;
        margin-bottom: 40px;
        text-align: right;
        align-content: center;
        justify-content: center;
    }
    .hero-text h1{
        text-align: center;
        font-size: 70px;
        margin: 0;
    }
    .hero-text h2{
        text-align: center;
        margin: 0;
    }
    .hero-text p{
        text-align: center;
        margin: 0;
    }
    .scroll-down i{
        display: none;
    }
    .hero-img{
        margin: 0;
        align-content: center;
        justify-content: center;
    }
    .hero-img img{
        height: 480px;
        width: 370px;
    }
    #about{
        height: 1200px;
        flex-direction: column;
        justify-content: center;
    }
    .about-bg{
        padding-top: 70px;
        height: 1100px;
        display: block;
    }
    .about-txt {
        text-align: center;
        justify-content: center;
        margin: 0px auto 0px auto; 
        font-size: 50px;
    }
    .about-txt-2{
        text-align: center;
        justify-content: center;
        margin: 0px auto 40px auto;
        font-size: 20px;
        width: 440px;
    }
    .about-img{
        justify-content: center;
        margin: 0;
    }
    .about-img img{
        height: 520px;
        width: 370px;
    }
    #portfolio{
        height: 1900px;
    }
    .port-bg{
        padding-top: 80px;
        height: 1700px;
        flex-wrap: wrap;
    }
    .port-txt{
        align-content: center;
        justify-content: center;
        text-align: center;
        margin: 0px auto 0px auto;
        font-size: 50px;
    }
    .port-txt span{
        font-size: 20px;
    }
    .port-txt-3 span{
        text-align: center;
        justify-content: center;
        margin: 0;
        font-size: 18px;
    }
    .masonry{
        margin-top: 70px;
        gap: 14px;
    }
    .masonry-2{
        gap: 14px;
    }
    .masonry img{
        height: 280px;
        width: 190px;
    }
    .masonry-2 img{
        height: 280px;
        width: 190px;
    }
    .judging{
        margin-top: 90px;
    }
    .judg1-1{
       height: 180px;
       width: 280px;
    }
    .judg1-2{
       height: 180px;
       width: 280px;
    }
    .coach-2{
        margin-top: 93px;
        height: 180px;
        width: 280px;
    }
    .coach-1{
        height: 280px;
        width: 180px;
    }
    #experience{
        height: 6900px;
        flex-direction: column;
        justify-content: center;
        text-align: center;
    }
    .experience-bg{
        height: 6800px;
        align-content: center;
    }
    .experience-txt{
        align-content: center;
        justify-content: center;
        text-align: center;
        margin: 30px auto 0px auto;
        font-size: 50px;
    }
    .experience-txt-2{
        font-size: 20px;
        width: 440px;
        align-content: center;
        justify-content: center;
        text-align: center;
        margin: 0px auto 0px auto;
    }
     .experience-img{
        justify-content: center;
        margin: 40px auto 0px auto;
    }
    .mibs-section img{
       justify-content: center;
        margin: 20px 4px  0 4px;
        align-content: center;
        text-align: center;
    }
    .experience-txt-3 span{
        align-content: center;
        justify-content: center;
        text-align: center;
        margin: 100px auto 0px auto;
        font-size: 20px;
    }
    .experience-txt-4{
        align-content: center;
        justify-content: center;
        text-align: center;
        margin: 0px auto 0px auto;
        font-size: 20px;
        width: 440px;
    }
    .experience-txt-5 span{
        font-size: 20px;
        align-content: center;
        justify-content: center;
        text-align: center;
        margin: 100px auto 0px auto;
    }
    .experience-txt-6{
        align-content: center;
        justify-content: center;
        text-align: center;
        margin: 0px auto 0px auto;
        font-size: 20px;
        width: 440px;
    }
     .judgeeeyyy-img-1{
        justify-content: center;
        margin: 40px auto 0px auto;
    }
    .judgeeeyyy-img-1 img{
        height: 440px;
        width: 300px;
    }
    .judgeyy-section img{
       height: 180px;
        width: 280px;
    }
    .experience-txt-7 span{
        align-content: center;
        justify-content: center;
        text-align: center;
        margin: 100px auto 0px auto;
        font-size: 20px;
    }
    .experience-txt-8{
        align-content: center;
        justify-content: center;
        text-align: center;
        margin: 0px auto 0px auto;
        font-size: 20px;
        width: 440px;
    }
    .douche-section{
        gap: 17px;
    }
    .douche-section img{
        margin: 30px 0 0 0;
    }
    .j-img-1{
        justify-content: center;
        margin: 40px auto 0px auto;
    }
    .experience-txt-9 span{
        align-content: center;
        justify-content: center;
        text-align: center;
        margin: 100px auto 0px auto;
        font-size: 20px;
    }
    .experience-txt-10{
        align-content: center;
        justify-content: center;
        text-align: center;
        margin: 0px auto 0px auto;
        font-size: 20px;
        width: 440px;
    }
    .creative-section{
        margin-top: 14px;
        gap: 14px;
    }
    .creative-section-2{
        gap: 14px;
    }
    .creative-section-3{
        gap: 14px;
    }
    .cre-img-1{
        align-content: center;
        justify-content: center;
        margin: 20px 40px 0px 0px; 
    }
    .creative-img{
        height: 250px;
        width: 190px;
    }
    .creative-img-b{
        height: 270px;
        width: 190px;
    }
    .experience-txt-11 span{
        align-content: center;
        justify-content: center;
        text-align: center;
        font-size: 20px;
        margin: 30px auto 0px auto;
    }
    .experience-txt-12 span{
        align-content: center;
        justify-content: center;
        text-align: center;
        margin: 100px auto 0px auto;
        font-size: 20px;
    }
    .newspaper-img{
        justify-content: center;
        margin: 40px auto 0px auto;
    }
    #reach-out{
        flex-direction: column;
        justify-content: center;
        text-align: center;
        height: 1400px;
    }
    .reach-out-bg{
        height: 1300px;
    }
    .reach-out-txt{
        text-align: center;  
        margin: 0px;
    }
    .reach-out-txt span{
        text-align: center;
        align-items: center;
        align-content: center;
        text-align: center;
        margin: 0px auto 0px auto;
    }
    .reach-out-side-2{
        align-content: center;
        justify-content: center;
        text-align: center;
        margin: 40px auto 0px auto;
    }
    .reach-out-img{
        align-content: center;
        justify-content: center;
        text-align: center;
        margin: 40px auto 0px 0px;
    }
    .reach-out-img img{
        width: 400px;
        height: 570px;
    }
    .reach-out-side-2 form{
        width: 470px;
    }
    .contacts-inputs{
        width: 470px;
        height: 50px;
        font-size: 20px;
    }

}
@media(max-width: 650px) {
    .navlist{
        width: 40%;
        left: 57%;
    }
    #portfolio{
        height: 1570px;
    }
    .port-bg{
        height: 1470px;
    }
    .masonry{
        gap: 10px;
    }
    .masonry-2{
        margin-top: 10px;
        gap: 10px;
    }
    .masonry img{
        border-radius: 10px;
        width: 160px;
        height: 250px;
    }
    .masonry-2 img{
        border-radius: 10px;
        width: 160px;
        height: 250px;
    }
    .judging{
        gap: 10px;
    }
    .judg1-1{
        height: 160px;
        width: 250px;
    }
    .judg1-2{
        height: 160px;
        width: 250px;
    }
    .coach{
        gap: 10px;
    }
    .coach-2{
        height: 160px;
        width: 250px;
    }
    .coach-1{
        width: 160px;
        height: 250px;
    }
    #experience{
        height: 6800px;
    }
    .experience-bg{
        height: 6700px;
    }
    .experience-txt{
        font-size: 40px;
    }
    .experience-txt span{
        font-size: 22px;
    }
    .experience-txt-2 span{
        font-size: 20px;
    }
    .mibs-1{
         width: 160px;
        height: 250px;
    }
    .mibs-2{
        height: 160px;
        width: 250px;
    }
    .douche-section img{
         width: 160px;
        height: 250px;
    }
    .judgeyy-section{
        margin-top: 17px;
        gap: 17px;
    }
    .judgeyy-section img{
        height: 160px;
        width: 250px;
    }
    .creative-section{
        margin-top: 17px;
        gap: 14px;
    }
    .creative-img{
        border-radius: 10px;
        width: 160px;
        height: 210px;
    }
    .creative-section-2{
        gap: 14px;
    }
    .creative-section-3{
        gap: 14px;
    }
    .creative-img-b{
        border-radius: 10px;
        width: 160px;
        height: 230px;
    }
     #reach-out{
        height: 1230px;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
     .reach-out-bg{
        height: 1190px;
    }
    .reach-out-txt{
        text-align: center;  
        margin: 0px;
    }
    .reach-out-txt span{
        text-align: center;
        align-items: center;
        align-content: center;
        text-align: center;
        margin: 0px auto 0px auto;
    }
    .reach-out-side-2{
        margin: auto;
        text-align: center;
        align-content: center;
        justify-content: center;
    }
    .reach-out-side-2 form{
        width: 350px;
    }
    .contacts-inputs{
        justify-content: center;
        width: 350px;
        height: 50px;
        font-size: 18px;
    }
    .contact-item {
        font-size: 15px;
    }
    .contact-item i {
        font-size: 15px;
    }
    .contact-item-1 a{
        font-size: 15px;
    }
    .contact-item-1 a span{
        font-size: 15px;
    }
    button{
        margin: auto 70% auto 0;
        align-items: center;
        text-align: center;
        justify-content: center;
    }
    .reach-out-img img{
        width: 340px;
        height: 500px;
    }
    #footer-2{
        gap: 80px;
        padding: 50px -30px 0px -30px;
    }
    .footer-2-txt{
        font-size: 12px;
    }
    .footer-2-txt a{
        font-size: 12px;
    }
    .reach-out-side-1 {
        gap: 7px;
    }
}
@media(max-width: 572px) {
    .navlist{
        width: 44%;
        left: 52.2%;
    }
    #portfolio{
        height: 1570px;
    }
    .port-bg{
        height: 1470px;
    }
    .masonry{
        gap: 10px;
    }
    .masonry-2{
        margin-top: 10px;
        gap: 10px;
    }
    .masonry img{
        border-radius: 10px;
       width: 130px;
        height: 190px;
    }
    .masonry-2 img{
        border-radius: 10px;
        width: 130px;
        height: 190px;
    }
    .judging{
        gap: 10px;
    }
    .judg1-1{
        border-radius: 10px;
        height: 130px;
        width: 190px;
    }
    .judg1-2{
        border-radius: 10px;
        height: 130px;
        width: 190px;
    }
    .coach{
        gap: 10px;
    }
    .coach-2{
        border-radius: 10px;
        height: 130px;
        width:  190px;
    }
    .coach-1{
        border-radius: 10px;
        margin-top: 30px;
        width: 130px;
        height: 190px;
    }
    #experience{
        height: 6300px;
    }
    .experience-bg{
        padding-top: -100px;
        height: 6200px;
    }
    .experience-txt{
        margin-top: -140px;
        font-size: 40px;
    }
    .experience-txt span{
        font-size: 22px;
    }
    .experience-txt-2 span{
        font-size: 20px;
    }
    .mibs-1{
        border-radius: 10px;
         width: 130px;
        height: 190px;
    }
    .mibs-2{
        border-radius: 10px;
        height: 160px;
        width: 250px;
    }
    .douche-section img{
        border-radius: 10px;
         width: 130px;
        height: 190px;
    }
    .judgeyy-section{
        margin-top: 17px;
        gap: 17px;
    }
    .judgeyy-section img{
        border-radius: 10px;
        height: 130px;
        width: 190px;
    }
    .creative-section{
        margin-top: 17px;
        gap: 14px;
    }
    .creative-img{
        border-radius: 10px;
        width: 130px;
        height: 190px;
    }
    .creative-section-2{
        gap: 14px;
    }
    .creative-section-3{
        gap: 14px;
    }
    .creative-img-b{
        border-radius: 10px;
        width: 130px;
        height: 190px;
    }
    .reach-out-txt{
        text-align: center;  
        margin: 0px;
    }
    .reach-out-txt span{
        text-align: center;
        align-items: center;
        align-content: center;
        text-align: center;
        margin: 0px auto 0px auto;
    }
    .reach-out-side-2{
        display: flex;
        justify-content: center;
        text-align: center;
        align-items: center;
        align-content: center;
    }
    .contacts-inputs{
        width: 350px;
        height: 50px;
        font-size: 18px;
    }
    .contact-item {
        font-size: 15px;
    }
    .contact-item i {
        font-size: 15px;
    }
    .contact-item-1 a{
        font-size: 15px;
    }
    .contact-item-1 a span{
        font-size: 15px;
    }
    button{
        justify-content: unset;
        text-align: center;
    }
    #footer-2{
        gap: 70px;
        padding: 50px 0px 0px 0px;
    }
    .footer-2-txt{
        font-size: 12px;
    }
    .footer-2-txt a{        
        font-size: 12px;
    }
    .reach-out-side-1 {
        gap: 7px;
    }
}
@media(max-width: 500px) {
    header{
        padding: 40px 40px 5px 30px;
    }
    .navlist{
        width: 47%;
        left: 47%;
    }
    .about-txt-2{
        width: 400px;
    }
     #portfolio{
        height: 5300px;
    }
    .port-bg{
        height: 5210px;
    }
    .masonry{
        gap: 20px;
    }
    .masonry img{
        border-radius: 30px;
       height: 550px;
        width: 370px;
    }
    .masonry-2{
        margin-top: 20px;
        gap: 20px;
    }
    .masonry-2 img{
       border-radius: 30px;
       height: 520px;
        width: 370px;
    }
    .judging{
        gap: 20px;
    }
    .judg1-1{
        width: 380px;
        height: 250px;
    }
    .judg1-2{
        width: 380px;
        height: 240px;
    }
    .coach-2{
        border-radius: 20px;
        width: 380px;
        height: 240px;
    }
    .coach-1{
        border-radius: 30px;
        height: 520px;
        width: 370px;
    }
    #experience{
        height: 13790px;
    }
    .experience-bg{
        height: 13690px;
    }
    .experience-txt{
        margin-top: 20px;
    }
    .experience-txt-2{
        width: 400px;
    }
    .experience-img img{
        border-radius: 30px;
        height: 550px;
        width: 370px;
    }
    .mibs-section{
        gap: 20px;
        margin-top: 20px;
    }
    .mibs-1{
        border-radius: 30px;
        height: 550px;
        width: 370px;
    }
    .mibs-2{
        border-radius: 20px;
        width: 380px;
        height: 240px;
    }
    .experience-txt-4{
        width: 400px;
    }
    .douche-section img{
        border-radius: 30px;
        height: 550px;
        width: 370px;
    }
    .experience-txt-6{
        width: 400px;
    }
    .judgeyy-section{
        gap: 20px;
    }
    .j-img-1 img{
        border-radius: 30px;
        height: 550px;
        width: 370px;
    }
    .experience-txt-8{
        width: 400px;
    }
    .judgeeeyyy-img-1 img{
        border-radius: 30px;
        height: 550px;
        width: 370px;
    }
    .judgeyy-section img{
        border-radius: 20px;
        width: 380px;
        height: 240px;
    }
    .cre-img-1 img{
        border-radius: 30px;
        height: 510px;
        width: 370px;
    }
    .creative-section{
        gap: 20px;
        margin-top: 20px;
    }
    .experience-txt-10{
        width: 400px;
    }
    .creative-img{
        border-radius: 30px;
        height: 500px;
        width: 370px;
    }
    .creative-section-2{
        gap: 20px;
        margin-top: 20px;
    }
    .creative-section-3{
        gap: 20px;
        margin-top: 20px;
    }
    .creative-img-b{
        border-radius: 30px;
        height: 550px;
        width: 370px;
    }
    .newspaper-img img{
        border-radius: 30px;
        height: 490px;
        width: 370px;
    }
     #footer{
        display: block;
        justify-content: center;
        text-align: center;
        align-items: center;
        margin: 0;
    }
    .reach-out-side-1{
        align-items: center;
        justify-content: center;
        margin: 0 auto 0 auto;
    }
     .contact-item{
        margin-top: 20px;
    }
    .contact-item-1{
        margin-top: 20px;
    }
    .reach-out-side-1-1{
        align-items: center;
        justify-content: center;
        margin: 0 auto 0 auto;
    }
    #footer-2{
        gap: 60px;
        padding: 50px -10px 0px -10px;
    }
    .footer-2-txt{
        font-size: 12px;
    }
    .footer-2-txt a{        
        font-size: 12px;
    }
}
@media(max-width: 446px) {
    .navlist{
        width: 56%;
        left: 40%;
    }
    #hero{
        height: 900px;
    }
    .hero-text{
        line-height: 50px;
    }
    .hero-text h1{
        font-size: 50px;
    }
    .hero-text h2{
        font-size: 50px;
    }
    .hero-img img{
        border-radius: 30px;
        height: 380px;
        width: 300px;
    }
    #about{
        height: 1100px;
        padding: 0px 10px 0px 10px;
    }
    .about-bg{
        height: 1000px;
    }
    .about-txt{ 
        font-size: 40px;
        line-height: 50px;
    }
    .about-txt-2{
        font-size: 16px;
        font-weight: 500;
        width: 330px;
    }
    .about-txt-2 span{
        font-size: 16px;
        font-weight: 500;
    }
    .about-img img{
        border-radius: 30px;
        height: 440px;
        width: 300px;
    }
    #portfolio{
        height: 4140px;
        padding: 0px 10px 0px 10px;
    }
    .port-bg{
        height: 4040px;
    }
    .port-txt{
        font-size: 40px;
    }
    .masonry img{
       height: 390px;
        width: 260px;
    }
    .masonry-2 img{
       height: 390px;
        width: 260px;
    }
    .judg1-1{
       height: 180px;
       width: 280px;
    }
    .judg1-2{
       height: 180px;
       width: 280px;
    }
    .coach{
        gap: 20px;
    }
    .coach-2{
       height: 200px;
       width: 300px;
    }
    .coach-1{
        height: 390px;
        width: 260px;
    }
    #experience{
        height: 8000px;
        padding: 0px 10px 0px 10px;
    }
    .experience-bg{
        height: 7900px;
    }
    .experience-txt{
        font-size: 40px;
    }
    .experience-txt-2{
        width: 330px;
    }
    .experience-txt-2 span{
        font-size: 16px;
        font-weight: 500;
    }
    .experience-img img{
        height: 440px;
        width: 300px;
    }
    #reach-out{
        padding: 0px 10px 0px 10px;
    }
    .reach-out-txt{
        font-size: 40px;
    }
    .creative-img{
        height: 360px;
        width: 270px;
    }
    .mibs-1{
        height: 400px;
        width: 270px;
    }
    .mibs-2{
        height: 170px;
       width: 300px;
    }
    #experience{
        height: 10700px;
    }
    .experience-bg{
        height: 10600px;
    }
    .experience-txt-4{
        width: 330px;
    }
    .experience-txt-4 span{
        font-size: 16px;
        font-weight: 500;
    }
    .douche-section img{
        height: 400px;
        width: 270px;
    }
    .experience-txt-6{
        width: 330px;
    }
    .experience-txt-6 span{
        font-size: 16px;
        font-weight: 500;
    }
    .judgeeeyyy-img-1 img{
        height: 400px;
        width: 270px;
    }
    .judgeyy-section img{
        height: 170px;
        width: 300px;
    }
    .experience-txt-8{
        width: 330px;
    }
    .experience-txt-8 span{
        font-size: 16px;
        font-weight: 500;
    }
    .j-img-1 img{
        height: 400px;
        width: 270px;
    }
    .experience-txt-10{
        width: 330px;
    }
    .experience-txt-10 span{
        font-size: 16px;
        font-weight: 500;
    }
    .cre-img-1 img{
        height: 340px;
        width: 270px;
    }
    .creative-img{
        height: 350px;
        width: 270px;
    }
    .creative-img-b{
        height: 400px;
        width: 270px;
    }
    .experience-txt-12 span{
        font-size: 16px;
        font-weight: 500;
    }
    .experience-txt-11 span{
        font-size: 16px;
        font-weight: 500;
    }
    .newspaper-img img{
        height: 350px;
        width: 270px;
    }
    .reach-out-side-2 form{
        width: 310px;
    }
    .reach-out-side-2{
        display: flex;
        justify-content: center;
        text-align: center;
        align-items: center;
        align-content: center;
    }
    .contacts-inputs{
        justify-content: center;
        width: 310px;
        height: 47px;
        font-size: 16px;
    }
    .reach-out-img img{
        width: 300px;
        height: 470px;
    }
    #the-end{
        height: 70px;
    }
    #the-end p {
        font-size: 50px;
    }
    #footer{
        display: block;
        justify-content: center;
        text-align: center;
        align-items: center;
        margin: 0;
    }
    .reach-out-side-1{
        align-items: center;
        justify-content: center;
        margin: 0 auto 0 auto;
    }
     .contact-item{
        margin-top: 20px;
    }
    .contact-item-1{
        margin-top: 20px;
    }
    .reach-out-side-1-1{
        align-items: center;
        justify-content: center;
        margin: 0 auto 0 auto;
    }
    #footer-2{
        gap: 50px;
        padding: 50px -20px 0px -20px;
    }
    .footer-2-txt{
        font-size: 10px;
    }
    .footer-2-txt a{        
        font-size: 10px;
    }
    
}

@media(max-width: 370px) {
    .navlist{
        width: 60%;
        left: 34%;
    }
     .about-txt-2{
        font-size: 16px;
        font-weight: 500;
        width: 300px;
    }
    #experience{
        height: 10900px;
    }
    .experience-bg{
        height: 10800px;
    }
    .experience-txt-2{
        width: 300px;
    }
    .experience-txt-4 {
        width: 300px;
    }
    .experience-txt-6 {
        width: 300px;
    }
    .experience-txt-8 {
        width: 300px;
    }
    .experience-txt-10 {
        width: 300px;
    }
    .experience-txt-12 {
        text-align: center;
        justify-content: center;
        margin: 0 auto;
        width: 300px;
    }
    .experience-txt-11{
        text-align: center;
        justify-content: center;
        margin: 0 auto;
        width: 300px;
    }
     #footer-2{
        gap: 40px;
        padding: 50px -30px 0px -30px;
    }
    .footer-2-txt{
        font-size: 10px;
    }
    .footer-2-txt a{        
        font-size: 10px;
    }
}