/* Base CSS Styles */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");

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

html {
  font-size: 62.5%;
}

body {
  font-family: "Poppins", sans-serif;
  scroll-behavior: smooth;
  background-color: var(--primary-color);
}

:root {
  --primary-color: #1d1d1e;
  --secondary-color: #2b5d81;
  --gray: #4c4a51;
  --white: #ffffff;
  --dark: #000000;
  --wave: #1a1a1a;
}

.features-boxed {
  color: #313437;
  background-color: #eef4f7;

}

.start-spacing {
  margin-bottom: 5rem;
}

a {
  text-decoration: none;
}

ul li {
  list-style: none;
}

img {
  max-width: 100%;
}

p {
  font-size: 1.6rem;
  color: var(--secondary-color);
}

/* Section Spacing */

.section-spacing {
  margin-top: 15rem;
  margin-bottom: 15rem;
}
.section-title {
  text-align: center;
  padding: 2.5rem 0;
}

.input-input {
  text-align: center;
  margin-top: 0.5rem;
}

input {
  margin: auto;
  display: block;
  width: 37rem;
  padding:1rem;
  text-align: center;
  font-size: 1.5rem;
  border-radius: 18rem;
  border-color: #1d1d1e;
}


.section-title h2 {
  font-size: 3.5rem;
}

/* Header Section CSS Start */

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 1.5rem 0;
  z-index: 999;
  transition: all 0.4s ease-in-out;
}

header.sticky {
  background-color: var(--primary-color);
  padding: 1.8rem 0;
  box-shadow: 0px 0px 8px 0px #000;
}

.menu ul {
  display: flex;
}

.menu ul li a {
  font-size: 1.8rem;
  font-weight: 500;
  color: var(--white);
  padding-right: 1rem;
}

@media screen and (max-width: 500px) {
  .menu ul li a {
    font-size : 1.4rem ;
    padding-right: 0.7rem;
  }
}

/* Header Section CSS End */

/* TXOS Scripts Section CSS Start */

section#TXOS-Scripts {
  padding-top: 5rem;
}

.txos-wrapper {
  max-width: 85rem;
  margin: auto;
  text-align: center;
  padding: 8rem 0;
}

.input-wrapper {
  max-width: 85rem;
  margin: auto;
  text-align: center;
  padding: 16rem 0;
}


.txos-wrapper h2 {
  font-size: 3.5rem;
  padding: 2rem 0;
}

/* TXOS Scripts Section CSS End */

/* Developer Section CSS Start */

section#Developer {
  margin-top: 8rem;
}

.developer-box {
  max-width: 45rem;
  margin: auto;
  text-align: center;
  margin-top: 3rem;
}

.developer-box h3 {
  font-size: 2.5rem;
  padding: 2rem 0;
}

.developer-box p {
  font-size: 1.8rem;
}

.developer-social {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem 0;
}

.developer-social img {
  padding: 0 0.8rem;
}

/* Developer Section CSS End */

/* Scripts Section CSS Start */

.scripts-wrapper {
  max-width: 57rem;
  margin: auto;
  text-align: center;
}

.scripts-wrapper h3 {
  font-size: 3.5rem;
}

.scripts-wrapper p {
  font-size: 1.8rem;
  padding: 2rem 0;
}

.scripts-brn a {
  background: var(--secondary-color);
  color: var(--white);
  font-size: 1.8rem;
  padding: 1rem 2.5rem;
  border-radius: 1.2rem;
  border: 1.5px solid #000000;
}

/* Scripts Section CSS End */

/* Footer Section CSS Start */

#Footer {
  background-image: url(../images/footer-shape.png);
  background-size: cover;
  background-repeat: no-repeat;
  height: 50vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.footer-wrapper {
  padding-top: 7%;
}
.footer-wrapper p {
  font-size: 1.8rem;
  padding: 1rem 0;
}

@media (min-width: 1600px) and (max-width: 2500px) {
  #Footer {
    height: 80vh;
  }
  .footer-wrapper {
    padding-top: 7%;
  }
}

.review h3 {
  font-size: 2.5rem;
  text-align: center;
}

.review h2 {
  font-size: 3.5rem;
  margin-top: 1rem;
  text-align: center;
}

.reviews {
  width : 60rem; 
  height : 15rem;
  overflow : hidden ;
  background-color : var(--primary-color) ;
  border-radius : 0.5rem;
  margin : 5rem auto ;
  position : relative ;
  box-shadow : 0 0 1rem -0.2rem #000000 ;
}
.panel {
  width : 100%;
  max-height: 100%;
  position : absolute ; 
}
.PanelAct {
  left : 0 ;
}
.panel img { 
  width : 10rem;
  height : 10rem; 
  text-align : center ;
  float : left ; 
  margin : 2.5rem; 
}


.panel p {
  float : left ; 
  width : 42rem;
  clear : right ;
  text-align : justify ;
  margin : 2.5rem 0 1rem 0;
  font-size : 1.4rem ; 
  color : #ffffff ;
  line-height : 1.2em
}
.panel h7 { 
  float : left ; 
  width: 20rem; 
  font-size : 1.4rem ; 
  color : #ffffff ;
  font-weight : bold ;
  font-style : italic ;
}
.control { 
  position : absolute ; 
  bottom : 2rem; 
  right : 3rem;
}
.control span {
  background-color : rgba(0,0,0,0.4) ; 
  padding : 0.5rem; 
  display : inline-block ;
  vertical-align : top ;
  margin-left : 0.5rem ;
  border-radius : 50%;
  cursor : pointer ;
  transition : 0.3s ease-in
}
.ContActive {
  background-color : #bbb !important ;
}

@media screen and (max-width: 625px) {
  .reviews {
    width : 50rem; 
    height : 12.5rem;
    margin : 4,17rem auto ;
  }
  .panel img { 
    width : 8.4rem;
    height : 8.4rem; 
    text-align : center ;
    float : left ; 
    margin : 2.09rem; 
  }
  .panel p {
    float : left ; 
    width : 35rem;
    clear : right ;
    text-align : justify ;
    margin : 2.09rem 0 0.84rem 0;
    font-size : 1.17rem ; 
    color : #ffffff ;
    line-height : 1.2em
  }
  .panel h7 { 
    float : left ; 
    width: 16.67rem; 
    font-size : 1.17rem ; 
    color : #ffffff ;
    font-weight : bold ;
    font-style : italic ;
  }
  .control { 
    position : absolute ; 
    bottom : 1.67rem; 
    right : 2.5rem;
  }
  .control span {
    background-color : rgba(0,0,0,0.4) ; 
    padding : 0.4rem; 
    display : inline-block ;
    vertical-align : top ;
    margin-left : 0.4rem ;
    border-radius : 50%;
    cursor : pointer ;
    transition : 0.3s ease-in
  }

}

@media screen and (max-width: 500px) {

  .review h3 {
    font-size: 2rem;
  }
  
  .review h2 {
    font-size: 3rem;
  }

  .reviews {
    width : 33.4rem; 
    height : 8.34rem;
    margin : 2,78rem auto ;
  }
  .panel img { 
    width : 5.6rem;
    height : 5.6rem; 
    text-align : center ;
    float : left ; 
    margin : 1.4rem; 
  }
  .panel p {
    float : left ; 
    width : 23.4rem;
    clear : right ;
    text-align : justify ;
    margin : 1.4rem 0 0.56rem 0;
    font-size : 0.78rem ; 
    color : #ffffff ;
    line-height : 1.2em
  }
  .panel h7 { 
    float : left ; 
    width: 13.9rem;
    font-size : 0.78rem ; 
    color : #ffffff ;
    font-weight : bold ;
    font-style : italic ;
  }
  .control { 
    position : absolute ; 
    bottom : 1.12rem; 
    right : 1.67rem;
  }
  .control span {
    background-color : rgba(0,0,0,0.4) ; 
    padding : 0.27rem;
    display : inline-block ;
    vertical-align : top ;
    margin-left : 0.27rem ;
    border-radius : 50%;
    cursor : pointer ;
    transition : 0.3s ease-in
  }

}



/* Footer Section CSS End */

/* ================================ */
/* Scripts Page CSS */
/* ================================ */

section#Scripts {
  padding-top: 12rem;
}

.script-wrapper {
  padding-top: 5rem;
}
.scripts-box {
  max-width: 33rem;
  margin: auto;
  background: var(--gray);
  padding: 3rem;
  border: 2px solid #000000;
  box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.45);
  border-radius: 1.5rem;
  text-align: center;
}


.scripts-box h3 {
  font-size: 2.5rem;
}

.scripts-box h5 {
  font-size: 1.6rem;
  padding: 1rem 0;
}

.scripts-box p {
  font-size: 1.8rem;
  padding: 1rem 0;
}

.scripts-btn {
  max-width: 14rem;
  margin: auto;
  background: var(--primary-color);
  padding: 1rem 2.2rem;
  border-radius: 1.5rem;
  border: 1.5px solid #000000;
  box-shadow : 0 0 1rem -0.2rem #000000 ;
}

.scripts-btn a {
  font-size: 1.8rem;
  color: var(--white);
}

a.fill-div {
  display: block;
  height: 100%;
  width: 100%;
  text-decoration: none;
}

.scripts-btn:last-child {
  margin-top: 1.5rem;
}



/* Hero Section CSS */

.hero-wrapper {
  text-align: center;
}
.hero-text h2 {
  font-size: 3.5rem;
}

.hero-text p {
  font-size: 2rem;
}
.hero-btn a {
  background: var(--primary-color);
  color: var(--white);
  font-size: 1.6rem;
  padding: 0.8rem 2rem;
  border-radius: 2rem;
  border: 1px solid #000;
}
.wave-down {
  width: 100%;
}
.project-social {
  padding: 0 2rem;
  margin-top: 6rem;
  margin-bottom: 1.5rem;
}
.youtube img,
.discord img {
  max-width: 4rem;
}

.youtube a,
.discord a {
  color: var(--white);
  font-size: 1.6rem;
  padding: 0 1rem;
}
/* Header Section CSS End */

/* Projects Section CSS Start */
.projects-wrapper {
  margin-top: 2rem;
  text-align: center;
}
.section-title {
  margin-bottom: 5rem;
}
.section-title h2 {
  font-size: 3.5rem;
  text-align: center;
}

.projects-item {
  max-width: 24rem;
  background: var(--secondary-color);
  padding: 2.2rem;
  border-radius: 2rem;
  text-align: center;
  margin: auto;
}

.projects-item img {
  max-width: 14rem;
}

.projects-item h3 {
  font-size: 2.5rem;
  padding: 2rem 0;
}

.projects-item .projects-btn a {
  background: var(--primary-color);
  color: var(--white);
  font-size: 1.6rem;
  padding: 0.8rem 2rem;
  border-radius: 2rem;
  border: 1px solid #000;
}

.projects-item .projects-btn {
  padding: 2rem 0;
}
/* Projects Section CSS End */

/* TXOS Page CSS Start */

.txos-item h2,
.fivem-item-h2 {
  font-size: 3rem;
}
.txos-box,
.fivem-box {
  background: var(--primary-color);
  max-width: 18rem;
  height: 28rem;
  margin: auto;
  padding: 2.2rem;
  border-radius: 2rem;
  border: 1px solid #000;
}
.txos-box p,
.fivem-box p {
  color: var(--white);
}
/* TXOS Page CSS End */