*,*::before,*::after{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html{
    font-size: 62.5%;
}

:root{
    --background-color: #dee7e4;
    --font-color: #071108;
    --content-size: 2rem;
    --navbaritemssize: 2rem;
}

body{
    font-family: Arial, Helvetica, sans-serif;
    background-color: #fff;
}


a{
    text-decoration: none;
    color: var(--font-color);
}

li{
    list-style: none;
}

/*Start of Nav Menu*/

#header{
    display: flex;
    gap: 2rem;
    align-items: center;
    width: 100%;
    padding: 0.5rem 1rem;
    position: relative; /*Only for mobile app*/
}

#logo{
   width: clamp(50px,8vw,150px);
   height: auto;
   display: block;
}

nav{
    margin-left: auto;

}

#ul{
    display: flex;
    gap: 4rem;
    font-size: var(--navbaritemssize);
    justify-content: flex-end;
    transition: all 0.3s ease;
    padding: 0.5rem;
}

#ul li a:hover{
    background-color: beige;
    padding: 0.5rem;
}

#button-mobile{
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    background: none;
    border: none;
    cursor: pointer;
    margin-left: auto;
    width: 4rem;
    height: 4rem;
}

#button-mobile span{
    display: block;
    width: 3rem;
    height: 3px;
    background-color: var(--font-color);
    transition: all 0.3s ease;
}

@media screen and (max-width: 768px) {
    #button-mobile{
        display: flex;
    }

    nav{
        margin-left: 0;
    }

    #ul{
        position: fixed;
        top: 6rem;
        right: -100%;
        width: 100%;
        height: auto;
        background-color: var(--background-color);
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        padding-top: 4rem;
        gap: 3rem;
        z-index: 100;
        padding-bottom: 4rem;
    }

    #ul.active{
        right: 0;
    }
    
    #float{
        flex-direction: column;
    }

    #float img{
        margin: auto;
    }
    
    }

/*End of Nav Menu*/

/*Start of Section 1*/

#Section-1{
    margin-top: 0.5rem;
}

#Section-1 h1{
    text-align: center;
    font-size: 4rem;
}

#float{
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

#float img{
    width: 40rem;
    max-width: 100%;
    height: 40rem;
    object-fit: cover;
    flex-shrink: 0;
}

#float p{
    font-size: var(--content-size);
    line-height: 1.7;
    flex: 1;
    min-width: 30rem;
}
/*End of Section 1 */

/* Start of Section 2*/

#Section-2{
    margin-top: 1rem;
    padding: 0rem;
}

#Section-2 h2{
    text-align: center;
    font-size: 4rem;
    margin-bottom: 2rem;
}

#cards{
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
    margin-bottom: 1rem;
    gap: 2rem;
}

.cardlayout{
    margin-top: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    border: 1px solid #edcfb3;
    border-radius: 0.8rem;
    overflow: hidden;
    background-color: #fff;
}

.cardlayout img{
    width: 100%;
    height: 20rem;
    object-fit: cover;
}

.cardlayout h4{
    text-align: center;
    font-size: 1.8rem;
    margin: 1.5rem 1rem 0.5rem 1rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cardlayout p{
    display: flex;
    flex-direction: column;
    text-align: center;
    font-size: 1.2rem;
    margin-top: auto;
    padding-bottom: 1rem;
    gap: 0.5rem;
}

.cardlayout p span{
  
    font-size: 1.6rem;
    font-weight: bold;
}

.cardlayout a{
    font-weight: bold;
    font-size: 2rem;
    text-align: center;
    transition: all 0.5s ease;
}

.cardlayout a:hover{
    background-color: #3182CE;
    color: white;
}

/* End of Section 2*/

/* Start of Section 3 */

#Section-3{
    margin-top: 2rem;
}

#Section-3 h3{
    text-align: center;
    font-size: 4rem;
    padding: 0 2rem;
    margin-top: 1rem;
}

.steplist{
    margin-top: 1rem;
    display: flex;
    gap: 4rem;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0 2rem;
}

.step1{
    width: clamp(12rem,20vw,20rem);
    height: clamp(12rem,20vw,20rem);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: #edcfb3;
    color: #333;
    padding: 2rem;
    flex-shrink: 0;
}

.content{
    display: flex;
    flex-direction: column;
    font-size: clamp(0.9rem,1.5vw,1.2rem);
    gap: 0.5rem;
}

/* End of Section 3 */

/*Start of Register Page*/

.containerforregister{
    width: 100%;
    height: calc(100vh - 35rem);
}

.namecontainer{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    font-size: 2rem;
    width: 100%;
}


.heading1{
  text-align: center;
  font-size: 3rem;
  padding: 1rem;
}

.registerlogin{
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: center;
    font-size: 2rem;
    width: 100%;
    max-width: 50rem;
    margin: 0 auto;
}

.emailcontainer{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
   
    align-items: center;
}

.passwordcontainer{
    display: flex;
    flex-direction: column;
    gap: 1rem; 
    width: 100%;
    align-items: center;   
}

#emailforregisterlogin{
    display: block;
    width: 60%;
    height: 2rem;
}

#passwordforregisterlogin{
    display: block;
    width: 60%;
    height: 2rem;
}

#nameforregisterlogin{
    display: block;
    width: 60%;
    height: 2.5rem;
}

form > .registerloginbtn{
    cursor: pointer;
    padding: 1rem;
    width: 60%;
}

form > .registerloginbtn:hover{
    background-color: #1A202C;
    color:white;
}


/*End of Register Page*/

/*Start of Login Page*/



.containerforlogin{
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: center;
        width: 100%;
    height: calc(100vh - 35rem);
}

/*End of Login Page*/

/*Start of Contact Page*/

.contactsection {
  margin: 2rem;

}

.contactsection h2 {
  margin-top: 2.5rem;
  text-align: center;
}

.contactsection .containerforform {
  margin-top: 2rem;
}

.contactsection .containerforform form {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: 1rem;
}

#name {
  width: 50%;
  padding: 0.5rem;
}

#labelname {
}

#email {
  width: 50%;
 
  padding: 0.5rem;
}

#labelemail {

}

#phno {
  width: 50%;

  padding: 0.5rem;
}

#labelphno {

}

#message {
  width: 50%;
  height: 15rem;
  padding: 0.5rem; /* Lower padding is better for inputs */
  vertical-align: top;
}

#labelmessage {
  
}

#submit {
 
  width: 20%;
  padding: 1rem;
}

#submit:hover{
  cursor: pointer;

}


#emailcontact {
  margin-top: 2rem;
  text-align: center;
  font-size: 1rem;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

#name:focus, #email:focus, #phno:focus, #message:focus {
  border-color: #3182CE; /* Highlights blue when clicking into fields */
}

/* Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}


/*End of Contact Page*/

footer{
  border: 1px solid rebeccapurple;
  background-color: #1A202C;
  color: #F7F9F6;
  width: 100%;
  height: 2rem;

  margin-top: 14rem;
  border-top: 1px solid transparent; /* Prevents the white space gap at the bottom */

}

footer p{
  text-align: center;
color: #F7F9F6;
  padding: 0.2rem;
}

/*Start of Profile Page*/

.profilepage{
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

#profileheading1{
  margin-top: 1rem;
  text-align: center;
  font-size: 3rem;
}

#profileparagraph{
  margin-left: auto;
  margin-right: auto;
  font-size: 1.5rem;
}

#profileheading2{
  text-align: center;
  font-size: 2rem;
}

.profilepage ol{
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.profilepage li{
  list-style-type:circle ;
}

.profilepage ol li a{
  text-decoration: none;
  font-size: 2rem;
}

.profilepage ol li a:hover{
  text-decoration: underline;
}


.profilepageloggedin{
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  height: calc(100vh - 30rem);
  line-height: 1.7;
}

.profilepageloggedinp{
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  font-size: 1.5rem;
}

.profilepageloggedinp2{
    margin-left: auto;
  margin-right: auto;
  font-size: 1.5rem;
  padding: 0.5rem;
}

#data{
  margin-top: 1rem;
}

#dataparagraph{
      margin-left: auto;
  margin-right: auto;
  font-size: 1.5rem;
  padding: 0.5rem;
}

#ulofdata{
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-left: 0;

}

.liofulofdata{
  list-style-type: square !important;
    margin-left: auto;
  margin-right: auto;
}

.liofulofdata::marker{
  content: "\25AA";
}

.liofulofdata a{
  font-size: 2rem;
  text-decoration: none;
}

.liofulofdata a:hover{
  text-decoration: underline;
  background-color: unset;
}


/*End of Profile Page*/

/*Start of Logout Page*/

.logout-form {
    display: inline;
    margin: 0;
    padding: 0;
}

.logout-button {
    background: none;
    border: none;
    color: inherit; 
    font: inherit;  
    cursor: pointer;
    padding: 0;
}

.logout-button:hover {

    text-decoration: underline; 
}


/*End of Logout Page*/

/*Start of single page design*/

.container{
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 1rem;
    line-height: 1.7;
    height: auto;
    min-height: calc(100% - 15rem);
}

.container h2{
    font-size: 3rem;
    text-align: center;
    padding: 1rem;
    letter-spacing: 0.2rem;
}
.container h4{
    font-size: 2rem;
    text-align: center;
    padding: 0.5rem;
    letter-spacing: 0.2rem;
}

.container img{
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    height: 80%;
}

.container p{
    font-size: 1.5rem;
}


/*End of single page design*/

/*Start of protected blogs page*/

.listofblogs{
    width: 100%;
    height: auto;
    line-height: 1.7;
}

.listofblogs h1{
    font-size: 3rem;    
    text-align: center;
}

#btn{
  padding: 1rem;
  margin-left: 48%;
}

#btn:hover{
    cursor: pointer;
    background-color: #3182CE;
}
/*End of protected blogs page*/