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

}
:root{
    --background-color: #202020;
    --heading-color: #dadada;
    --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
::selection{
    background-color: #1f1f20;
    color:#d7d7dd;
}
body{
    background-color: var(--background-color);
    
}

.navbar{
    display:flex;
    justify-content: space-between;
    align-items: center;
    padding:15px;
    position: sticky;
    top:0px;
    
   
}

.navbar .menu >h1{
   color:var(--heading-color);
   font-size: 48px;
   font-family: 'Londrina Shadow', cursive;
   

}
.navbar .list-items{
    display:flex;
    list-style-type: none;
    gap:30px;
    color:var(--heading-color);
}
.navbar .list-items .child-lists{
    border-radius: 5px;
   font-size: 18px;
   padding:20px;
   background-image: linear-gradient(#5361e2,#03051a);
   font-family: var(--font-family);
}
.navbar .list-items .child-lists:hover{
    font-size: 24px;
    padding:20px;
    border: #000105;   
    border-radius: 5px;
    transition:0.5s;
    background-image: linear-gradient(#5361e2,#03051a);

}
.navbar .bars-parent{
    position:absolute;
    right:0px;
    opacity:0;
}


.navbar .bars-parent .bar{
    background-color: rgb(205, 205, 212);
    width:45px;
    height:2px;
    margin-top:8px;
    margin-bottom: 8px;
}
.header{
    /*background-color: #202020;*/
    color:var(--heading-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    
}
.header .header-child1{
    text-align: center;
    flex:1;
 
}
.header .header-child1 > h3{
    color:var(--heading-color);
    font-size:50px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    
   /* margin-left:20px;*/
    
}
.header .header-child1 >h3::first-letter{
    font-size: 100px;
    
}

.header .header-child1 >p{
    color:var(--heading-color);
    font-size: 24px;
    font-family: var(--font-family);
   
    /*margin-left:20px;*/

}
.header .header-child1 >button{
    
    padding:20px;
    margin-top:20px;
    margin-bottom: 20px;
    color:var(--heading-color);
    font-size: 18px;
    border-radius: 10px;
    background-image:linear-gradient(#5361e2,#03051a);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.header .header-child2 {
    text-align: center;
    flex:1;
  

}
.header .header-child2> img{
    width:500px;
    height:400px;
}
.section1{
   /* background-color: #202020; */
    display:flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap:20px;
    margin:20px;
    border-radius: 10px;

}
.section1 .temp-convert{
    flex:1;
    background-color: #5361e2;
    padding:40px;
    border-radius:50px 20px ;
    box-shadow: 5px 10px #DADADA;
    background-image: linear-gradient( #5361e2,#03051a);
   
}

.section1 .temp-convert>h4{
    color:var(--heading-color);
    font-size: 24px;
    margin-left:10px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.section1 .temp-convert>input[type="number"]{
   
    border-radius: 5px;
    padding:8px;
    margin:10px;
    
}
.section1 .bg-change{
    flex:1;
    background-color: #5361e2;
    padding:40px;
    border-radius:50px 20px ;
    box-shadow: 5px 10px #DADADA;
    background-image:linear-gradient(#5361e2,#03051a);
    text-align: center;
   
   
}
.section1 .bg-change>h4{
    color:var(--heading-color);
    font-size: 24px;
    margin-left:10px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.section1 .bg-change>button{
    margin-top: 80px;
    padding:10px;
    color:#202020;
    font-size: 18px;
    border-radius: 10px 15px;
    background-image:linear-gradient(#5361e2,#03051a);    
}
 .section1 .quote-change{
    flex:1;
    background-color: #5361e2;
    padding:40px;
    border-radius:50px 20px ;
    box-shadow: 5px 10px #DADADA;
    background-image: linear-gradient( #5361e2,#03051a);
    text-align: center;
   
   
}
.section1 .quote-change >h4{
    color:var(--heading-color);
    font-size: 24px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    
}
.section1 .quote-change >p{
    margin-top:20px;
   font-size: 20px;
   font-style: oblique;
   font-family: 'satisfy',cursive;
}
.section1 .quote-change >button{
    margin-top: 40px;
    padding:10px;
    color:#202020;
    font-size: 18px;
    border-radius: 10px; 
    background-image:linear-gradient(#5361e2,#03051a);    
}
.section1 .theme {
    flex:1;
    background-color: #5361e2;
    padding:40px;
    border-radius:50px 20px ;
    box-shadow: 5px 10px #DADADA;
    background-image: linear-gradient( #5361e2,#03051a);
    text-align: center;
    width:fit-content;
    margin-left:30px;
   
}
.section1 .theme >h4{
    color:var(--heading-color);
    font-size: 24px; 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.section1 .theme >button{
    padding:20px;
    
    font-size: 18px;
    border-radius: 20px ;
    background-image:linear-gradient(#5361e2,#03051a);
    /*margin-top:100px; */    
}
.section2{
    /*background-color: #202020;*/
    display:flex;
    justify-content: space-between;
    margin-top:40px;
    flex-wrap: wrap;
    margin:20px;
    border-radius: 10px;
}
.section2 .sc-changer{
    flex:1;
    width:100%;
    background-image:linear-gradient(#5361e2,#03051a);
    text-align: center;
    border-radius:50px 20px ; 
    box-shadow: 5px 10px #DADADA;
    margin-top: 40px;
    margin-bottom:40px;

    
    
}
.section2 .sc-changer>h4{
   color:var(--heading-color);
   font-size: 24px;
   margin-top: 20px;
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;


}
.section2 .sc-changer >input[type=text]{
    border-radius: 10px;
    padding:10px;
    margin:10px;
}
.section2 .word-counter{
    flex:1;
    width:100%;
    background-image:linear-gradient(#5361e2,#03051a);
    text-align: center;
    border-radius:50px 20px ; 
    box-shadow: 5px 10px #DADADA;
    font-size: 24px;
    margin-top:40px;
    margin-bottom:40px;
    color:var(--heading-color);
    
}
.section2 .word-counter >h4{
    font-size: 24px;
    margin-top: 20px;
    margin-bottom: 10px;
    color:var(--heading-color);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

}
.section2 .word-counter >textarea{
    border-radius:10px;
}
.footer1 {
   
    background-color: #dddee6;
    padding-top:20px;
    padding-bottom: 20px;
    text-align: center;
    display:flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap:20px;

    
}
.footer1 >a{
    margin-left: 0px;
   
}
.footer1 a img{
    width:90px;
    height:90px;
    
    
}
.form{
text-align: center;
margin-top: 40px;
margin-bottom: 40px;
background-color: #443e3e;

padding:30px;
}
.form h5 {
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    margin-bottom: 15px;
    color:var(--heading-color);
}
.form .form-name{
   
   padding:10px;
   background-color: #474747;
   
  

   
  
  
}
.form .form-name>input[type="text"]{
    border-radius: 5px;
    width:200px;
    height:30px;
    background-color: #777777;
    border:2.5px solid rgb(46, 45, 45);
}
.form .form-email{
    padding: 10px;
    background-color: #474747;
    
}
.form .form-email>input[type="email"]{
    border-radius: 5px;
    width:200px;
    height: 30px;
    background-color: #777777;
    border:2.5px solid rgb(46, 45, 45);
}
.form .feedback {
    background-color: #474747;
    padding-left: 10px;
    
}
.form .feedback .textarea{
    border-radius: 5px;
    width:200px;
    height:150px;
    background-color: #777777;
    margin-bottom: 10px;
   
    
    border:2.5px solid rgb(46, 45, 45);
}
.form .feedback .button{
    padding:10px;
    background-color: #474747;
    border:5px solid #777777;
    color:#d7d7dd;
    border-radius: 3px;
    font-size: 18px;
}
.label{
    font-size: 16px;
    font-weight: 200;
    font-style: normal;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
   
    color:#f1e7e7;
}
.footer2 {
    background-color: #d7d7dd;
    text-align: center;
    padding:10px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.theme1{
    background-color: white;
}






@media (max-width:700px){
    .navbar{
        margin:0px;
    }
    .navbar{
        flex-direction: column;
        justify-content: flex-start;
        width:100%;

    }
    .navbar .menu{
        text-align: start;
        margin-left:0px;
        width:100%;
        padding-top:10px;
        padding-bottom:8px;
    }
    .navbar .menu >h1{
        font-size: 24px;
        width:100%;
    }
   .navbar .list-items {
    gap:10px;
   }
    
    .list-items .child-lists{
        flex:1;
    }
    
    .navbar .bars-parent{
        opacity:1;
        
    }
    
     
    .new{
        transform:rotate(90deg);
        transition:0.5s;
     }
     .header{
        flex-direction: column;
        flex-wrap: wrap;
    }  
    .header .child1 {
        width:100%;
    }
    .header .header-child2 img{
        width:100%;
        
       } 
       .section1{
        flex-direction: column;

        
       }  
       .section2{
        flex-direction: column;
        
       }
       .section2 .sc-changer{
        
        object-fit: fill;
       }
        .list-items{
       
        flex-wrap: wrap;
        opacity: 0;
           }
       .active{
        transition:0.5s linear;
        background-color:#202020;
        width:100%;
        text-align: center;
        opacity:1;
        gap:10px;
        flex-direction: column;
    
   } 
   .form {
    text-align: start;
   }
   .form .feedback {
    padding-left:10px;
   }
   .form .feedback .button{
    margin-left:115px;
   }
  
    }