body{
    padding: 0;
    margin: 0;
    border: 0;
    overflow-x: hidden;
}
#home{
    width: 100%;
    min-height: 120vh;
    float: left;
    background-color:var(--primary-color);
}
.logo{
    width: 200px;
    height: 70px;

}
.logoo{
    width: 90px;
    height: 40px;  
}
.headers{
    margin-top: 40px;
    gap: 25px;
    display: flex;
    flex-direction: row;
    color: var(--tertiary-color);
}
.nav{
    margin-left: 50px;
}
.header-1{
    margin-left: 400px;
 
}
.dreams{
    margin-left: 50px;
}
.life{
    margin-top: 75px;
    color: var(--tertiary-color);
}
.lead{
    color: var(--tertiary-color);
}
.but-1{
    border: none;
    background-color: purple;
    color: white;
    border-radius: 20px;
}
.but-2{
    border: 4px solid purple;
    border-radius: 20px;
}
.dt{
    display: flex;
}


.img-1{
    background-image: url(../images/1.png);
    background-position: center;
    background-size: cover;
    width: 180px;
    height: 500px;
    margin-top: 75px;
    margin-left: 70px;
}
.img-2{
    background-image: url(../images/2.png);
    background-position: center;
    background-size: cover;
    width: 180px;
    height: 500px;
    margin-left: 25px;
}
.img-3{
    background-image: url(../images/3.png);
    background-position: center;
    background-size: cover;
    width: 180px;
    height: 500px;
    margin-top: 75px;
    margin-left: 25px;
}
.img-4{
    background-image: url(../images/4.png);
    background-position: center;
    background-size: cover;
    width: 180px;
    height: 500px;
    margin-left: 25px;
}
.abt{
    margin-left: 50px;
    color: var(--tertiary-color);
}

#about{
    width: 100%;
    min-height: 100vh;
    float: left;
    background-color: var(--primary-color);
}
.abut{
    margin-left: 170px;
    color: var(--tertiary-color);
}
.complex{
    color: var(--tertiary-color);
}
.play{
    width: 30px;
    height: 30px;
  
}
.eve{
    color: white;
    display: flex;
    justify-content: center;
}

:root{
    --primary-color:white;
    --secondary-color:purple;
    --tertiary-color:black;
}
.dark-theme{
    --primary-color:rgb(0, 0, 0);
    --secondary-color:purple;
    --tertiary-color:white;
}



#icon0{
    width: 40px;
    height: 40px;
    margin-left: 150px;
    cursor: pointer;
} 
.pla{
    margin-top: 20px;
    color: var(--tertiary-color);
}


.img-5{
    background-image: url(../images/5.png);
    background-position: center;
    background-size: cover;
    width: 250px;
    height: 300px;
}
.img-6{
    background-image: url(../images/6.png);
    background-position: center;
    background-size: cover;
    width: 250px;
    height: 300px;
    margin-top: 90px;
}
.vid{
   
    background-position: center;
    background-size: cover;
    width: 400px;
    height: 400px;
}
#services{
    width: 100%;
    min-height: 100vh;
    float: left;
    background-color: var(--primary-color);
   
}
.wrapper{
    padding: 10px 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.card-area{
    padding: 50px 0;
}
.box-area{
    display: flex;
    gap: 15px;
    margin-top: 50px;
}
.box{
  
    position: relative;
    overflow: hidden;
}

.box img{
    width: 350px;
    height: 450px;
    display: block;
    transition: transform 0.8s;
    
}

.overlay{
    height: 0;
    width: 350px;
    background: linear-gradient(transparent,purple 0%);
    position: absolute;
    left: 0;
    bottom: 0;
    overflow: hidden;
    display: flex;
    align-items:flex-start;
    justify-content: center;
    flex-direction: column;
    padding: 0 45px;
    text-align: start ;
    transition: height 0.7s;
}
.box:hover .img23 {
    transform: scale(1);
}
.box:hover .overlay{
    height: 100%;
}

.hov{
    color: white;
}
.img7{
    background-image: url(../images/7.png);
    width: 300px;
    height: 500px;
    background-position: center;
    background-size: cover;
    padding-top: 450px;

}
.img8{
    background-image: url(../images/8.png);
    width: 300px;
    height: 500px;
    background-position: center;
    background-size: cover;
    padding-top: 450px;


}
.img11{
    background-image: url(../images/11.png);
    width: 300px;
    height: 500px;
    background-position: center;
    background-size: cover;
    padding-top: 450px;

}
#feedback{
    width: 100%;
    min-height: 100vh;
    float: left;
    background-color:var(--primary-color);
}
.fara{
    background-image: url(../images/9.png);
    background-position: center;
    background-size: cover;
    width: 350px;
    height: 300px;
       margin-top: 50px;
       margin-left: 270px;
}
.bride{
    background-image: url(../images/10.png);
    background-position: center;
    background-size: cover;
    width: 350px;
    height: 300px;
}
.ten{
    margin-left: 270px;
    color: var(--tertiary-color);
}
.net{
    color: var(--tertiary-color);
}
#media{
    width: 100%;
    min-height: 100vh;
    float: left;
    background-color: var(--primary-color);
}
.med1{
    background-image: url(../images/11.png);
    background-position:center;
    background-size: cover;
    width: 125px;
    height: 300px;
    margin-left: 150px;
}
.med2{
    background-image: url(../images/12.png);
    background-position: center;
    background-size: cover;
    width: 125px;
    height: 300px;
    margin-left: 10px;
    margin-top: 70px
}
.med3{
    background-image: url(../images/13.png);
    background-position: center;
    background-size: cover;
    width: 125px;
    height: 300px;
    margin-left: 10px;
}
.med4{
    background-image: url(../images/14.png);
    background-position: center;
    background-size: cover;
    width: 125px;
    height: 300px;
    margin-left: 10px;
    margin-top: 70px
}
.med5{
    background-image: url(../images/15.png);
    background-position: center;
    background-size: cover;
    width: 125px;
    height: 300px;
    margin-left: 10px;
}
.med6{
    background-image: url(../images/16.png);
    background-position: center;
    background-size: cover;
    width: 125px;
    height: 300px;
    margin-left: 10px;
    margin-top: 70px
}
.insta{
    text-align: center;
    color: var(--tertiary-color);
}
#footer{
    width: 100%;
    float: left;
    background-color: var(--primary-color);
}
.foot{
    background-color:var(--secondary-color);
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}
.face{
    margin-left: 50px;
}
.whit{
    color: white;
    margin-top: 20px;
}
.zoz{
    text-align: center;
    margin-top: 25px;
}
.tig{
    margin-top: 45px;
    color: var(--tertiary-color);
}
.ico{
    width: 50px;
    height: 30px;
}
.icon{
    width: 20px;
    height: 20px; 
}

.dropbtn {
    background-color:var(--secondary-color);
    color: white;
    padding: 15px;
    font-size: 15px;
    border: none;
    cursor: pointer;
    border-radius: 20px;
  }
  
  /* Dropdown button on hover & focus */
  .dropbtn:hover, .dropbtn:focus {
    background-color:ter;
  }
  
  /* The container <div> - needed to position the dropdown content */
  .dropdown {
    position: relative;
    display: inline-block;
  }
  
  /* Dropdown Content (Hidden by Default) */
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
  
  /* Links inside the dropdown */
  .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }
  
  /* Change color of d
  ropdown links on hover */
  .dropdown-content a:hover {background-color:var(--secondary-color);}
  
  /* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
  .show {display:block;}


@media (max-width:675px){
.nav{
    width: 100%;
}


    #home{
        width: 100%;
    }
    .logo{
        width: 100px;
        height: 75px;    
    }

    .header-1{
        display: none;
    }
    .header-2{
        display: none;
    }
    .header-3{
        display: none;
    }
    .dropbtn{
        margin-left: 65px;
        margin-top: 15px;
        width: 100px;
        height: 35px;
        padding: 5px;
    }
    #icon0{
        width: 35px;
        height: 35px;
        margin: 0px;
        margin-top: 15px;
     
    }
    .life{
        font-size: 45px;
        margin: 0px;
    }
    .das {
        margin-left: 0px;
    }
    .lead{
        margin-top: 15px;
    }

    .but-1{
        width: 225px;
        height: 40px;
        border-radius: 20px;
    
    }
    .but-2{
        width: 225px;
        height: 40px;
        border-radius: 20px;
       
    }
    .buts{
        display: flex;
        flex-direction: column
    }
    .pix{
        width: 100px;
        height: 150px;
         margin: 0px;
         margin-left: 35px;
    }
    .dt{
       display: grid;
       grid-template-columns: 2fr 2fr;
       align-items: center;
    }

    .img-1{
        margin-left: 100px;
    }
    .img-3{
        margin-left: 100px;
        margin-top: 25px;
    }
    .img-4{
        margin-top: 25px;
    }

    .abt{
        font-size: 20px;
        margin: 0px;
        margin-top: 20px;
        margin-left: 5px
    }

    .abut{
        font-size: 12px;
        margin: 0px;
        margin-left: 10px;
    }
    .img-5{
        width: 100px;
        height: 150px;
         margin-left: 30px;
         padding: 0px;
    }
    .img-6{
        width: 100px;
        height: 150px;
         padding: 0px;
         margin: 0px;
         margin-left: 30px;
    }
    .ded{
        display: grid;
        grid-template-columns: 2fr 2fr;
        margin-top: 30px;
    }
    .deb{
        display: grid;
        grid-template-columns: 2fr 2fr;
        margin-top: 20px;
    }
    .complex{
        font-size: 12px;
        margin-top: 100px;
    }
    .vid{
     
        margin-bottom: 100px;
        width: 300px;
        height: 250px;
        padding: 0px;
    }
    .vee{
        display: flex;
        justify-self: end;
        justify-content: center;
        align-items: center;
    }

    .box-area{
     display: flex;
     flex-direction: column;
    }
    .img23{
        width: 350px;
    }
      
    .tg{
        font-size: 20px;
    }
    .we{
       display: flex;
       flex-direction: column;
    }
    .fara{
        margin: 0px;
        width: 250px;
        height: 200px;
        margin-top: 20px;
        margin-left: 10px;
    }
    .ten{
        margin-left: 30px;
        font-size: 12px;
    }
    .push{
        margin-top: 25px;
    }

  .ndai{
    display: flex;
    flex-direction: row;
  }
  .mira{
    display: flex;
    flex-direction: row-reverse;
    margin-top: 25px;
  }
  .xet{
    font-size: 15px;
 margin-right: 40px;
  }
  .tem{
    margin-top: 25px;
  }
  .bride{
    width: 250px;
    height: 200px;
    margin-right: 40px;
  }
  .in{
    display: grid;
    grid-template-columns: 2fr 2fr;
  }
  .med1{
    margin: 0px;
    width: 175px;
    margin-left: 50px;
  }
  .med2{
    margin: 0px;
    width: 175px;
  }
  .med3{
    margin: 0px;
    width: 175px;
    margin-left: 50px;
    margin-top: 30px;
  }
  .med4{
    margin: 0px;
    width: 175px;
    margin-top: 30px;
  }
  .med5{
    margin: 0px;
    width: 175px;
    margin-left: 50px;
    margin-top: 30px;
  }
  .med6{
    margin: 0px;
    width: 175px;
    margin-top: 30px;
  }


  .whit{
    font-size: 12px;
  }
  .foot{
    display:grid;
    grid-template-columns: 1fr 1fr;
    margin-top: 10px;
  }
  .face{
margin: 0px;
align-items: center;
  }
  .ted{
    margin-left: 10px;
  }
  .whit{
    margin-bottom: 0px;
    margin-top: 0px;
  }
  .net{
    margin-left: 10px;
  }
 

   
  


}









@media (min-width:676px) and (max-width:1000px){
    .dropdown{
        display: none;
    }
    .header-1{
        margin-left: 55px;
        margin-top: 25px;
    }
    .header-2{
       
        margin-top: 25px;
    }
    .header-3{
        margin-top: 25px;
    }
    #icon0{
        margin-top: 25px;
        margin-right: 30px;
    }
    .def{
        display: grid;
    }
    .life{
        margin-top: 25px;
        font-size: 70px;
    }
    .das{
        width: 900px;
    }

    .lead{
        font-size: 30px;
    }
    .but-1{
        height: 55px;
    }
    .pla{
        font-size: 30px;
    }
    .abut{
        font-size: 20px;
        margin-left: 50px;
    }
    .abt{
        font-size: 35px;
    }

    .complex{
        font-size: 20px;
        margin-top: 30px;
    }
    .img-6{
        margin-top: 20px;
        margin-left: 200px;
    }
    .img-5{
        margin-left: 200px;
    }
    #about{
        height: 1000px;
    }
    .deb{
        margin-top: 40px;
    }
    .ded{
        margin-top: 40px;
    }
    .fet{
        display: flex;
        flex-direction: column;
    }
    .box-area{
        display: grid;
        grid-template-columns: 2fr 2fr;
    }
    
    .we{
        display: flex;
        flex-direction: column;
        margin-left: 300px;
    }
    .fara{
        margin-left: 0px;
    }
    .push{
        margin-left: 0px;
    }
    .in{
       display: grid; 
       grid-template-columns:1fr 1fr 1fr;
       justify-content: center;
    }
    .oky{
        margin: 0px;
        width: 200px;

    }
    .insta{
        margin-right: 115px;
    }
    .dee{
        margin-right: 100px;
    }
   







}


@media (min-width:1001px){

.dropdown{
    display: none;
}

}