@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;700&display=swap");
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;

}
body{
    font-family: 'poppins',sans-serif;
}
/*  top header*/
header.fheader{
    background-image: url('../images/home.gif');
    background-size: cover;
    height: 700px;

}

header.fheader nav ul li {
    float:left;
    list-style: none;
    font-size: 25px;
    padding: 20px;
    letter-spacing: 2px;
    color:#307ab3;
}
header.fheader nav ul.topnav li.dropdownicon{
    display: none;
}

header.fheader nav ul li.right{
    float: right;
    list-style: none;
    color: azure;

}
nav ul::after{
    display: block;
    clear:both;
    content: "";
}
header.fheader nav ul li a.button{
    color:#307ab3;
    padding: 10px;
    border-radius: 20px;
    text-decoration: none;
    margin-top: 40px;

}
header.fheader nav ul li a{
    text-decoration: none;
    color:#307ab3;
}
header.fheader nav ul li a:hover{
    color: lightblue; 
    text-decoration: overline;
    margin:5px lightblue solid;

}
header.fheader nav ul li a:active{
    color:lightblue
}



div.container{
   
    text-align: left;
    margin-top: 150px;
    margin-left: 80px;
}
div.container h1{
    color:#307ab3;
    font-size: 45px;
}
div.container p.this:hover{
    text-decoration: underline;
}
div.container p{
    font-size: 16px;
    color:rgb(143, 173, 192);
}
div.container p.this{
    font-size: 22px;
    color:#60b8ee
}
div.container a.button{
    text-decoration: none;
    background-color: #bde2ff;
    padding :8px;
    border-radius: 10px;
    font-size: 20px;
    color:#2c73a3;
    }
    div.container a.button:hover{
        background-color: azure;
    }
    div.container2{
        background-image: url('../images/about.gif');
        background-size:cover;
        height:700px;

    }
    div.container2 section{
        text-align: right;
        color: azure;
        margin-right: 40px;
        padding-top: 170px;
     

    }
    div.container2 section h1{
        font-size: 50px;
        padding: 10px;
        color: #c1dff6;
    }
    div.container2 section p{
        font-size: 22px;
        line-height: 40px;
    }

    div.container3{
        background-image: url('../images/whyme.png');
        background-size:cover;
         height:700px;

    }
    div.container3 h1{
        display: inline-block;
        font-size: 80px;
        line-height: 90px;
        color:#c1dff6;
        margin-top: 110px ;
        margin-left:50px; 
    }
    div.container3 p{
      
        font-size: 23px;
        line-height: 30px;
        color:#c1dff6;
        margin-top: 20px ;
        margin-left:50px; 
        padding-right:700px;
    }
    div.container3 p a.button{
        display: inline-block;
        margin-top: 20px;
        background-color: lightblue;
        border-radius: 20px;
        padding: 8px;
        text-decoration: none;
        color:#307ab3;
    }
    div.container3 p a.button:hover{
        background-color: #0c74c3;
        color:azure;

    }
    div.container4{
        background-image: url(../images/getintouch.gif);
        background-size:cover;
         height:700px;

    }
    div.container4 h1{
        display: inline-block;
        font-size: 60px;
        line-height: 90px;
        color:#307ab3;
        margin-top: 80px ;
        margin-left:800px;
       
    }
    div.container4 form{
       display: inline-block;
   
        margin-left:800px;
        font-size: 25px;
        color: lightblue;
    }
    div.container4 form input{
        width: 400px;
        padding: 8px;
        font-family: 'poppins',sans-serif;
        border:#307ab3 solid 3px;
        border-radius: 8px;
    }
    div.container4 form textarea{
        width: 400px;
        padding: 8px;
        font-family: 'poppins',sans-serif;
        border:#307ab3 solid 3px;
        border-radius: 8px;
    }
    div.container4 form type[submit]:hover{
        background-color: azure;

    }
    div.container4 div.ig{
        float: right;
      padding:  20px 30px 20px 30px;
      margin-right: 80px;
      margin-bottom: 20px;
      background-color:rgb(251, 251, 251);
      border: rgb(231, 245, 250) solid 3px;
      border-radius: 10px;
        border-radius: 10px;
        text-align: center;
      
    }
    div.container4 div.linkedin{
        float: right;
        padding: 20px 30px 20px 30px;
        background-color:rgb(251, 251, 251);
      border: rgb(231, 245, 250) solid 3px;
        border-radius: 10px;
        margin-right :20px;
        margin-bottom: 20px;
        text-align: center;
    }
    div.container4 div.ig:hover{
        background-color:rgb(250, 232, 232);
        border: rgb(231, 245, 250) solid 3px;
        border-radius: 10px;
       
      
    }
    div.container4 div.linkedin:hover{
        background-color:rgb(215, 215, 250);
        border: rgb(212, 236, 245) solid 3px;
        border-radius: 10px;
      
    }
    div div.parts::after{
        display: inline-block;
        clear: both;
        content: "";
    }
    div.container4 div.linkedin a.linkedin{
        text-decoration: none;
        text-align: center;
    }
    div.container4 div.ig a.ig{
        text-decoration: none;
        text-align: center;
    }
    /*responsive CSS*/
    @media (max-width:500px){
        header.fheader nav ul li {
            display: none;
        }
        header.fheader nav ul.topnav li.dropdownicon{
            display: block;
            position: absolute;
            font-size: 35px;
            padding: 10px;
            color: #307ab3;
        }
        
       header.fheader nav ul.topnav.responsive{
        display:block ;   
        position: absolute;
           background-color:#70b1e2;

           width: 100vw;
           height: 50vh;
           padding: 10px;
           float: none;
           color: azure;

       }
       header.fheader nav ul.topnav.responsive li{
           display: block;
           float: none;
           text-align: center;
           font-weight: bold;
       }
      
       header.fheader{
           margin: 0px;
       
        height: 100vh;
        width: 100vw;
        background-image: url(../images/mobilehome.gif);

       }

       div.container{
           margin: 0px;
           padding:50px 0px 0px 40px;
       }
        div.container2{
            background-image: url(../images/mobileabout.gif);
            height: 100vh;
            width: 100vw;
        }
        div.container2 h1, div.container2 p {
           
            text-align: left;
            padding-left: 20px;
            
          
        }
        div.container2 section{
            padding-top: 20px;
            margin: 0px;
          
        }
        div.container2 section h1{
            font-size: 70px;
           
        }
        div.container3{
            background-image: url(../images/mobilewhyme.png);
            height: 100vh;
            width: 100vw;
        }
        div.container3 h1{
          margin: 10px 0px 0px 20px;
          font-size: 70px;
        }
        div.container3 p{
            padding:5px 10px 0px 10px;
            margin: 0px;
            font-size: 20px;
        }
        div.container3 p a.button{
            padding: 4px;

        }
        div.container4{
            height: 100vh;
            width: 100vw;
            background-image: url(../images/mobilecontact.gif);
        }
        div.container4 form{
            margin: 0px;
            width: 80vw;
        }
        div.container4 h1{
           
            line-height: 70px;
            padding-left: 20px;
            margin-top: 0px ;
            margin-left:0px;
           
        }
        div.ig,div.linkedin{
            display: none;
        }
        div.container4 section{
            width: 100vw;
            align-items: center;
            padding-left: 20px;
        }
        div.container4 form input{
            width: 90vw;
            padding: 8px;
            text-align: left;
            
        }
        div.container4 form input[type="submit"]{
            text-align: center;

        }
        div.container4 form textarea{
            width: 90vw;
            padding: 8px;
            text-align: left;}
            
        
    }