/*
Template: LAWGIST – Attorney & Lawyers HTML Template
Author: RRDevs
Author URI: https://themeforest.net/user/rrdevs
Description: Attorney & Lawyers HTML Template
Version: 1.0.0
*/

/*
=================================
|***    Table of contents:   ***|
=================================

Main Style file-> assets/css/style.css 

All the SCSS File in SCSS Folder of Assets Folder. You can read the doc file also for better understand.

// BASIC 
@import 'basic';

// MIXIN
@import 'variables';

// TYPOGRAPHY
@import 'typography';

// MIX
@import 'mix';

// HELPER
@import 'helper';

// ICON FONTS
@import 'icon';

// ANIMATION
@import 'animation';

// Button 
@import 'btn';

// Variables 
@import 'variables';

// Preloader 
@import 'preloader';

/* ----------------------------------
    Template Section Styles
 ------------------------------------*/

 /* // Menu - Header Section 
 @import 'header';
 
 // Hero Slide - Section 
 @import 'hero';
 
 // Section Title - Heading 
 @import 'section';
 
 // About - Section 
 @import 'about';
 
 // Features - Section 
 @import 'features';
 
 // services - Section 
 @import 'services';
 
 // testimonial - Section 
 @import 'testimonial';
 
 // Portfolio - Cases - Section 
 @import 'project';
 
 // Price Table - Section 
 @import 'price';
 
 // Call To Action - Section 
 @import 'cta';
 
 // team - Section 
 @import 'team';
 
 // funfact - Section 
 @import 'funfact';
 
 // Download - Section 
 @import 'carousel';
 
 // FAQ - Section 
 @import 'faq';
 
 // Blog - Section 
 @import 'blog';
 
 // Contact Us - Section 
 @import 'contact';
 
 // footer - Section 
 @import 'footer'; */


//product
/* Hero Section */
.hero {
  background-image: url("hero-image.jpg");
  background-size: cover;
  background-position: center;
  color: #fff;
  padding: 4rem 2rem;
  text-align: center;
}

.hero h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.hero p {
  font-size: 1.5rem;
  margin-bottom: 2rem;
}

.cta-button {
  display: inline-block;
  background-color: #007bff;
  color: #fff;
  padding: 1rem 2rem;
  border-radius: 0.5rem;
  text-decoration: none;
  font-size: 1.2rem;
}

/* Features Section */
.features {
  padding: 4rem 2rem;
}

.features h1 {
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 2rem;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
}

.feature h2 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
}

.feature ul {
  list-style-type: none;
  padding: 0;
}

.feature li {
  margin-bottom: 0.5rem;
}

/* Pricing Section */
.pricing {
  padding: 4rem 2rem;
}

.pricing h1 {
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 2rem;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.pricing-plan {
  border: 1px solid #ddd;
  border-radius: 0.5rem;
  padding: 2rem;
  text-align: center;
}

.pricing-plan h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.price {
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 1rem;
}

.pricing-plan ul {
  list-style-type: none;
  padding: 0;
  margin-bottom: 2rem;
}

.pricing-plan li {
  margin-bottom: 0.5rem;
}

/* About Section */
.about {
  padding: 4rem 2rem;
}

.about h1 {
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 2rem;
}

.about-content {
  display: flex;
  justify-content: space-between;
  gap: 4rem;
}

.company-overview,
.team {
  flex: 1;
}

.team-members {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
}

.team-member img {
  width: 100%;
  height: auto;
  border-radius: 0.5rem;
  margin-bottom: 1rem;
}

.team-member h3 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

/* Contact Section */
.contact {
  padding: 4rem 2rem;
}

.contact h1 {
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 2rem;
}

.contact-content {
  display: flex;
  justify-content: space-between;
  gap: 4rem;
}

.contact-form,
.support {
  flex: 1;
}

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

.contact-form label {
  font-weight: bold;
}

.contact-form input,
.contact-form textarea {
  padding: 0.5rem;
  border: 1px solid #ddd;
  border-radius: 0.5rem;
}

.support p {
  margin-bottom: 1rem;
}

/* Footer */
footer {
  background-color: #333;
  color: #fff;
  padding: 1rem;
  text-align: center;
}

/* Responsive Styles */

/* Tablet Styles */
@media (max-width: 768px) {
  .hero h1 {
    font-size: 2.5rem;
  }

  .hero p {
    font-size: 1.2rem;
  }

  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .pricing-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .team-members {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile Styles */
@media (max-width: 480px) {
  header {
    padding: 0.5rem;
  }

  .logo {
    font-size: 1.2rem;
  }

  nav ul {
    gap: 0.5rem;
  }

  .hero {
    padding: 2rem 1rem;
  }

  .hero h1 {
    font-size: 2rem;
  }

  .hero p {
    font-size: 1rem;
  }

  .cta-button {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
  }

  .features {
    padding: 2rem 1rem;
  }

  .features h1 {
    font-size: 2rem;
  }

  .feature-grid {
    grid-template-columns: 1fr;
  }

  .pricing {
    padding: 2rem 1rem;
  }

  .pricing h1 {
    font-size: 2rem;
  }

  .pricing-grid {
    grid-template-columns: 1fr;
  }

  .about {
    padding: 2rem 1rem;
  }

  .about h1 {
    font-size: 2rem;
  }

  .about-content {
    flex-direction: column;
    gap: 2rem;
  }

  .contact {
    padding: 2rem 1rem;
  }

  .contact h1 {
    font-size: 2rem;
  }

  .contact-content {
    flex-direction: column;
    gap: 2rem;
  }

  .contact-form,
  .support {
    width: 100%;
  }
}