:root{
   --main:black;
}

html {
   scroll-behavior: smooth;
}

.section{
   scroll-margin-top: 60px;
   transition: margin 0.5s ease-in-out;
 }

 /* social media */
 /* header */
.header .social-icons {
   display: flex;
   background-color: black;
}
.header .social-icon {
   margin: 5px 0;
   display: block;
   background-color: black;
   border-radius: 50%;
   padding: 10px;
   position: relative;
 }
 .header .social-icon i {
   color:white;
 }
 .header .social-icon:hover {
   background-color: #f0f0f0; /* Change the background color on hover */
   i{color: black;}
}

.header .social-icons .tel{
color: white;
margin-top: auto;
margin-left: auto;
margin-right: 10px;
}
.header .social-icons .loc{
   color: white;
   margin-top: auto;
   margin-left: auto;
   margin-right: 10px;
}
@media screen and (max-width: 630px) {
   .header .social-icons{
   font-size: smaller;
   }
 }

@media screen and (max-width: 530px) {
   .header .loc{
     display: none;
     }
   }

   /* footer */
   .footer{
      background-color: whitesmoke;
   }
.footer .social-icon{
   color: black;
   font-size: 30px;
   padding-right: 30px;
}

.footer-bottom{
text-align: center;
font-family: sans-serif;
}

/* Navbar work */
 .navbar-nav .nav-link {
    font-size: 20px; /* Adjust the font size as needed */
    padding: 8px 15px; /* Adjust the padding as needed */
    transition: all 0.3s; /* Smooth transition for the effect */
    text-decoration: none; /* Remove default underline */
 }

 .navbar-nav .nav-link:hover {
    text-decoration: underline; /* Add underline on hover */
 }

 .navbar-nav .nav-link.active-section {
    text-decoration: underline;
}

 /* Spacing */
 #nav{
    width: 25rem;
    display: flex;
    justify-content: space-evenly;
 }
/* logo */
 .logo{
   font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
 }

 /* Content */
 .title-header{
   margin-top: 100px;
   font-size: xxx-large;
 }
 
 #section1 h1{
   font-size: 1.5em;
   color:var(--main);
 }

 #section1 p{
   font-size: 1.3em;
   margin-left: 30px;
   margin-right: 30px;
 }

 @media screen and (max-width:940px){
   #section1 h1{
      font-size: 1.3em;
      color:var(--main);
    }
    #section1 p{
      font-size: 1.1em;
      margin-left: 30px;
      margin-right: 30px;
    }
 }

 @media screen and (max-width:375px){
   #section1 h1{
      font-size: 1.1em;
      color:var(--main);
    }
    #section1 p{
      font-size: 1.0em;
      margin-left: 30px;
      margin-right: 30px;
    }
 }

/* Card section 1*/
.service{
   width: 85%;
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin: 75px auto;
   text-align: center;
}
.service .card{
   width: 100%;
   display: flex;
   justify-content: space-between;
   align-items: center;
   flex-direction: column;
   margin: 0px 20px;
   background-color: whitesmoke;
   border-radius: 10px;
   cursor: pointer;
   transition: transform 0.3s ease-in-out;
}

.service .card .icon{
   font-size: 35px;
   margin-bottom: 10px;
}

.service .card h2{
   font-size: 28px;
   color: var(--main);
   margin-bottom: 20px;

}

.service .card p{
   font-size: 17px;
   margin-bottom: 30px;
   line-height: 1.5;
}

.service .card:hover{
   animation: zoomIn 0.3s forwards; /* Start the animation on hover */
 }

@keyframes zoomIn {
   from {
     transform: scale(1);
   }
   to {
     transform: scale(1.1);
   }
 }
@media screen and (max-width:940px) {
   .service{
      display: flex;
      flex-direction: column;
   }
}



/* Section 2 */

.reason h1{
   text-align: center;
   font-size: 4.5em;
}

.image-text-container {
   display: flex;
   align-items: center;
}

.reason .image{
   flex: 1;
   padding: 20px;
}

.reason .text{
   flex: 1;
   padding: 20px;
}

.reason img{
   width: 100%;
}

.reason h2{
   text-align: center;
   font-size: 2.5em;
}

.reason p{
   font-size: 1.5em;
}

/* Responsive */
@media screen and (max-width:995px) {
   .reason h1{
      text-align: center;
      font-size: 3.5em;
   }

   .image-text-container {
      h2{
         font-size: 1.5rem;
      }
      p{
         font-size: 1.1rem;
      }
   }

}

@media screen and (max-width:770px) {
   .reason h1{
      text-align: center;
      font-size: 3em;
   }
   .image-text-container {
      display: inline;

      h2{
         font-size: 1.5rem;
      }
      p{
         font-size: 1.1rem;
      }
      img{
         display: none;
      }
   }

}
/* Section 3 */
.about h1{
   margin-left: 10px;
   /* text-align: center; */
   font-size: 4.0em;
}

.about .para{
   font-size: 1.5em;
   margin-left: 40px;
}

.about .text{
   flex: 1;
   padding: 20px;
}

.about h2{
   text-align: center;
   font-size: 2.5em;
}

.about .owner{
align-items: center;
}
.about .owner p{
   font-size: 1.5em;
}

.about .owner .card{
   background-color: whitesmoke;
}
.about .owner-image{
padding-left: 30%;

 img{
   width: 45%;
}
}

@media screen and (max-width:995px) {
   /* sectoin 3 */
   .about h1{
      text-align: center;
      font-size: 3.5em;
   }
   /* sectoin 3 */
   .about .para{
      font-size: 1.1rem;
      /* margin-left: 0px; */
   }
   .about .owner p{
      font-size: 1.1em;
   }
      
}

@media screen and (max-width:770px) {
   /* sectoin 3 */
   .about h1{
      text-align: center;
      font-size: 3.0em;
   }
   /* sectoin 3 */
   .about .para{
      font-size: 1.1rem;
   }
   .about .owner-image{
      
       img{
        display: none;
      }
      }
      
}
/* section 4 */
#section4 .container-fluid{
   background-color: black;
   color: white;
}


#section4 .icon{
   margin-left: 30px;
   padding-top: 35px;
   padding-bottom: 35px;
   font-size: 50px;
   padding-right: 10px;
   padding-left: 10px;
}

#section4 .icon .p1{
   display: inline;
   font-size: 30px;
   margin-left: 2px;
}
#section4 .icon .p2{
   display: flex;
   font-size: 20px;
}

@media screen and (max-width: 650px) {
   #section4 .icon .p1 {
       display: inline;
       font-size: 15px;
       margin-left: 2px;
   }
   #section4 .icon {
       font-size: 20px;
       padding-top: 10px;
       padding-bottom: 5px;
   }
   #section4 .icon .p2 {
       display: flex;
       font-size: 15px;
   }
   
   #section4 .row {
       flex-direction: column;
   }
}

/* back to top */
/* Styling for the scroll-to-top button */
.scroll-to-top {
   display: none; /* Initially hidden */
   position: fixed;
   bottom: 20px;
   right: 20px;
   width: 40px;
   height: 40px;
   background-color: #333;
   color: white;
   border: none;
   border-radius: 50%;
   font-size: 30px;
   line-height: 40px;
   text-align: center;
   cursor: pointer;
   transition: opacity 0.3s;
}

/* Show the button on scroll */
.scroll-to-top.show {
   display: block;
}

/* On hover effect */
.scroll-to-top:hover {
   background-color: #555;
}

@media screen and (max-width:770px) {
   .scroll-to-top {
      bottom: 50px;
   }
}

/* Nav bottom */
.nav-bottom{
 display: none;
}

@media screen and (max-width:770px) {
   .nav-bottom{
    display: contents;
   }
}