import AppBar from "@mui/material/AppBar";
import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
import { ButtonBase, Container, Grid } from "@mui/material";
import Link from "@mui/material/Link";
import { Button } from "@mui/material";
import { styled } from "@mui/system";

import { makeStyles } from "tss-react/mui";

export const useStyles = makeStyles()(() => {
  return {
    ProdName: {
      "&.css-ahj2mt-MuiTypography-root": {
        fontSize: "18px !important",
        fontWeight: 600,
      },
    },
    SinceYear: {
      fontSize: "40px !important",
      position: "relative",
      "&:before": {
        content: '" "',
        display: "block",
        width: "34px",
        height: "3px",
        background: "white",
        position: "absolute",
        top: "4px",
        margin: "auto",
        left: "0",
        right: "0",
      },
    },
    ContentCol: {
      padding: "0 4% 0 8%",
    },

    bgimage: {
      backgroundColor: "#231F20 !important",
      paddingBottom: "20px",
      padding: "20px 20px 0 0",
      marginTop: "0px !important",
      "@media screen and (max-width: 800px)": { padding: "0px 20px 0 0" },
    },

    redimg: {
      backgroundImage: `url('/assets/background.svg')`,
      height: "100%",
      width: "100%",
      position: "absolute",
      top: "0",
      backgroundSize: "contain",
      backgroundRepeat: "no-repeat",
      zIndex: 1,
    },

    firstimg: {
      backgroundImage: `url('/assets/new2.svg')`,
      height: "621px",
      width: "830px",
      position: "absolute",
      bottom: "0",
      backgroundRepeat: "no-repeat",
      zIndex: 2,
      top: "30px",
      right: "0",
    },

    secondimg: {
      backgroundImage: `url('/assets/new1.svg')`,
      height: "290px",
      width: "424px",
      position: "absolute",
      bottom: "56px",
      left: "0%",
      backgroundRepeat: "no-repeat",
      zIndex: 3,
    },
    biglaptop: {
      width: "100%",
      height: "auto",
      zIndex: 999,
    },
    hello: {
      width: "100%",
      height: "auto",
      position: "absolute",
      top: "-7%",
      left: "0px",
      zIndex: 888,
    },
    imgontop: {
      top: "53px",
      position: "absolute",
      left: "63px",
      width: "84%",
    },
    tablebelow: {
      position: "absolute",
      bottom: "-86px",
      left: "44%",
    },
    smallLaptop: {
      position: "absolute",
      left: "-22px",
      bottom: "-10%",
      width: "50%",
      height: "auto",
    },
    imgonsmalllaptop: {
      position: "absolute",
      left: "16px",
      bottom: "-4.6%",
      width: "41.8%",
      height: "auto",
    },
    smalllaptopright: {
      position: "absolute",
      left: "14%",
      bottom: "-18%",
      width: "31%",
      height: "auto",
    },
    smalllaptopleft: {
      position: "absolute",
      left: "7px",
      height: "auto",
      width: "15%",
      bottom: "-18%",
    },
    spantext: {
      fontSize: "30px !important",
      color: "#D7282F",
    },
    spantext2: {
      fontSize: "33px !important",
      color: "#D7282F",
      fontWeight: 600,
    },
    secondpageimg: {
      width: "100%",
      height: "auto",
    },
    imgonsecondimg: {
      position: "absolute",
      left: "17%",
      top: "9%",
      width: "66%",
    },
    borderline: {
      position: "absolute",
      bottom: 0,
      height: 1,
      background: "red",
    },
    spantext3: {
      fontWeight: 700,
      fontSize: "20px",
      lineHeight: "27.14px",
      color: "#D7282F",
    },
    Fourthspan: {
      fontWeight: 700,
      fontSize: "45px !important",
      lineHeight: "61.06px",
      color: "#D7282F",
    },
    Fourthsub1span: {
      fontWeight: 700,
      fontSize: "55px !important",
      lineHeight: "74.63px",
      color: "#D7282F",
    },
    Fourthsub2span: {
      fontWeight: 700,
      fontSize: "45px !important",
      lineHeight: "74.63px",
      color: "#D7282F",
    },
    Fifthspan1: {
      fontWeight: 600,
      fontSize: "45px !important",
      lineHeight: "61.28px",
      color: "#D7282F",
    },
    Fifthspan2: {
      fontWeight: 700,
      fontSize: "45px !important",
      lineHeight: "61.28px",
      color: "#D7282F",
    },
    seven: {
      fontWeight: 700,
      fontSize: "30px !important",
      lineHeight: "40.71px",
      color: "#D7282F",
    },
    bgg: {
      backgroundImage: `url('')`,
      height: "auto",
      backgroundSize: "cover",
      backgroundRepeat: "no-repeat",
      width: "100%",
    },
    bothbg: {
      backgroundImage: `url('/assets/www.svg')`,
      height: "auto",
      backgroundSize: "cover",
    },
    footerbg: {
      backgroundImage: `url('/assets/footerbg.svg')`,
      height: "auto",
    },
    send: {
      fontWeight: 700,
      fontSize: "30px !important",
      lineHeight: "40.71px",
      color: "#D7282F",
    },
    getquote: {
      fontWeight: 700,
      fontSize: "45px !important",
      lineHeight: "61.28px",
      color: "#231F20",
    },
    borderr: {
      height: "2px",
      width: "100px",
      backgroundColor: "#FF000A",
      borderRadius: "10px",
      margin: "14px 0px 30px",

      "@media screen and (max-width: 1500px)": { margin: "14px 0px 15px" },
      "@media screen and (max-width: 800px)": { margin: "8px 0px 10px" },
    },
    snakebg: {
      backgroundImage: `url('/assets/snakedesign.svg')`,
      height: "auto",
      backgroundRepeat: "no-repeat",
      backgroundPosition: "0 -140px",
      padding: "30px 20px 60px",
      marginTop: "0 !important",
    },
    seconebg: {
      background: "#fefefe",
      height: "770px",
      padding: "0 0 0 16px !important",
      position: "relative",
    },
    CompanyCont: {
      padding: "10px 16px 90px  !important",
      "@media screen and (max-width:1600px)": {
        padding: "10px 16px 45px  !important",
      },
    },
    powercozmoshade: {
      backgroundImage: `url('/assets/shadelikething.svg')`,
      width: "100%",
      backgroundRepeat: "no-repeat",
      paddingBottom: "80px",
    },
    Bgimage: {
      backgroundImage: `url('/assets/footerbg.svg')`,
      backgroundColor: "#231F20",
      color: "white",
    },
    footerlinks: {
      fontSize: "20px !important",
      "@media screen and (max-width: 1500px)": { fontSize: "16px !important" },
    },
    footertxt: { fontSize: "15px !important" },
    logoimage: {
      width: "200px",
      "@media screen and (max-width: 1300px)": {
        width: "135px",
        position: "relative",
        top: "3px",
      },
      "@media screen and (max-width: 400px)": {
        width: "120px",
        position: "relative",
        top: "3px",
      },
      "@media screen and (max-width: 320px)": {
        width: "95px",
        position: "relative",
        top: "3px",
      },
    },
    hammenu: {
      background: "#fff",
      border: "1px solid #d7d7d7",
      borderRadius: "3px",
      width: "32px !important",
      color: "#231f23",
      height: "26px !important",
      margin: "-8px 0 0",
    },

    homeheaderimg: {
      position: "relative",
      "&:before": {
        content: '" "',
        background: `url('/assets/background.svg') right top no-repeat`,
        position: "absolute",
        display: "block",
        width: "750px",
        height: "750px",
        zIndex: "1",
        right: 0,
        top: "0",
        backgroundSize: "100%",
      },
      "& .MuiPaper-root": {
        background: "white",
        boxShadow: "none",
        borderBottom: "1px solid #d1d1d1",
      },
      "& .MuiToolbar-gutters": {
        padding: "0",
        minHeight: "54px",
      },
      "& .css-tuv6v7-MuiContainer-root": {
        margin: "0",
        display: "flex",
        alignItems: "center",
      },
      "@media screen and (max-width: 1600px)": {
        "&:before": { backgroundSize: "80%" },
      },
      "@media screen and (max-width: 1366px)": {
        "&:before": { display: "none" },
      },
    },

    homeheader: {
      position: "fixed",
      top: "0",
      zIndex: "300",
      boxShadow: "0 0 7px 1px #cccccc",
      width: "100%",
      "& .MuiPaper-root": {
        background: "white",
        boxShadow: "none",
        borderBottom: "1px solid #d1d1d1",
      },
      "& .MuiToolbar-gutters": {
        padding: "0",
        minHeight: "55px",
      },
      "& .css-tuv6v7-MuiContainer-root": {
        margin: "0",
        display: "flex",
        alignItems: "center",
      },
    },
  };
});

export const Text = styled(Typography)(() => ({
  fontWeight: "400",
  fontSize: "18px",
  lineHeight: "17px",
  color: "#231F20",
  marginLeft: "20px",
  textAlign: "center",
}));

export const ButtonText = styled(Typography)(() => ({
  color: "#D7282F",
}));

export const Cont = styled(Container)(() => ({
  display: "flex",
}));
export const Bar = styled(AppBar)(() => ({
  padding: "6px 10px 2px 20px",
  color: "black",
}));
export const MainHeader = styled(Box)(() => ({}));

export const Headerinner = styled(Box)(() => ({
  position: "relative",
  "&:before": {
    content: '" "',
    background: ``,
    position: "absolute",
    display: "block",
    width: "868px",
    height: "805px",
    zIndex: "1",
    right: "-60px",
    top: "0",
    backgroundSize: "100% 100%",
  },
}));

export const NavigationBar = styled(Box)(() => ({
  display: "flex",
  width: "100%",
  paddingLeft: "10%",
  ".MuiTypography-body1": {
    "&:last-child": {
      "& .MuiLink-root": {
        border: "0",
        padding: "8px 20px",
        background: "white",
        borderRadius: "3px",
      },
    },
  },
  "& .MuiTypography-body1": {
    margin: "0",
    "& .MuiLink-root": {
      cursor: "pointer",
      padding: "0 12px 16px",
      margin: "0 12px",
      borderBottom: "3px solid transparent",
      fontSize: "15px",
      transition: "all ease .5s",
      "@media screen and (max-width: 1000px)": {
        margin: "0 2px",
      },
      "&:hover": {
        borderColor: "#D7282F",
        color: "#D7282F",
      },
      "&.active": {
        borderColor: "#D7282F",
        color: "#D7282F",
      },
    },
  },

  "@media screen and (max-width: 1024px)": {
    paddingLeft: "3%",
  },
  "@media screen and (max-width: 850px)": {
    display: "none",
  },
}));
export const BannerContent = styled(Box)(() => ({
  "& .css-a13pr7-MuiTypography-root": {
    marginBottom: "10px",
  },
  "& .css-19km929-MuiTypography-root": {
    fontWeight: "700",
    "& .css-ahj2mt-MuiTypography-root": {
      fontWeight: "700",
    },
  },
}));

export const BannerSearch = styled(Box)(() => ({
  "& .MuiPaper-elevation1": {
    padding: "2px 4px",
    display: "flex",
    alignItems: "center",
    width: "65%",
    boxShadow: "none",
    border: "1px solid #CCCEDD",
    background: "#F9F9F9",
  },
  "& .css-piqts5-MuiInputBase-root": {
    fontSize: "15px",
    margin: "0",
  },
}));
export const AboutImg = styled(Box)(() => ({}));
export const SinceCircle = styled(Box)(() => ({
  width: "140px",
  height: "140px",
  borderRadius: "50%",
  background: "#D7282F",
  position: "absolute",
  top: "-25px",
  right: "70px",
  display: "flex",
  alignItems: "center",
  justifyContent: "center",
  "& .css-ahj2mt-MuiTypography-root": {
    fontSize: "25px",
    color: "white",
    fontWeight: "700",
    textAlign: "center",
  },
}));

export const FooterCol = styled(Box)(() => ({
  paddingLeft: "25px",
  "& .MuiTypography-body1": {
    color: "white",
    fontSize: "15px",
    lineHeight: "20.43px",
    marginTop: "12px",
    "& .MuiLink-root": {
      color: "white",
      cursor: "pointer",
      transition: "all ease .3s",
      "&:hover": {
        color: "#D7282F",
        textDecoration: "underline",
      },
    },
    "@media screen and (max-width: 1500px)": {
      fontSize: "12px",
      marginTop: "5px",
    },
    "@media screen and (max-width: 800px)": {
      margin: "0 0 5px",
    },
  },
  "& .MuiTypography-h5": {
    color: "white",
    fontWeight: "600",
  },
  "& .ComLogo": {
    marginTop: "7px",
    marginBottom: "22px",
    "@media screen and (max-width: 1500px)": {
      width: "190px",
      marginBottom: "10px",
    },
  },
}));

export const Text2 = styled(Typography)(() => ({
  fontWeight: "600",
  fontSize: "20px",
  lineHeight: "27.24px",
  color: "#231F20",
}));

export const Two = styled(Box)(() => ({
  display: "flex",
  alignItems: "center",
  padding: "25px 0px 0px 35px",
}));

export const Turbinesvg = styled(Box)(() => ({
  marginLeft: "15px",
}));
export const ProductBox = styled(Box)(() => ({
  display: "flex",
  justifyContent: "center",
  alignItems: "center",
  border: "1px solid #DBDBDB",
  borderRadius: "10px",
  height: "296px",
  width: "100%",
  background: "white",
  padding: "5px",
  "&:hover": {
    background: "#f5f5f5",
    boxShadow: "0 0 7px -1px #cccccc",
  },
  "& .MuiStack-root": {
    width: "100%",
    height: "100%",
    textAlign: "center",
    justifyContent: "center",
    borderRadius: "10px",
    transition: "all ease .5s",
    background: "white",
    "& .css-ahj2mt-MuiTypography-root": {
      fontSize: "13px",
    },
    "& img": {
      margin: "0 auto 5px",
    },
  },
}));
export const SellingLink = styled(Box)(() => ({
  display: "flex",
  alignItems: "center",
  marginTop: "0",
  "& .MuiTypography-body1": {
    fontWeight: "700",
    display: "flex",
    "& .MuiLink-root": {
      color: "#D7282F",
      marginLeft: "6px",
      cursor: "pointer",
    },
    "& .MuiSvgIcon-root": {
      fontSize: "1.4rem",
      marginLeft: "4px",
    },
  },
}));

export const CateThumbImg = styled(Box)(() => ({
  width: "100px",
  height: "100px",
  margin: "0 auto 10px",
  "& img": {
    width: "100%",
  },
}));

export const Turbinetext = styled(Typography)(() => ({
  marginLeft: "10px",
  fontWeight: "400",
  fontSize: "15px",
  lineHeight: "20.43px",
  color: "#231F20",
}));
export const Textlink = styled(Link)(() => ({
  color: "#231F20",
  textDecoration: "none !important",
  cursor: "pointer",
  "&:hover": {
    textDecoration: "underline",
  },
}));

export const Headingtext = styled(Typography)(() => ({
  fontWeight: "400",
  fontSize: "30px",
  color: "#4A4A4A",
}));

export const SecondHeadingtext = styled(Typography)(() => ({
  fontWeight: "600",
  fontSize: "33px",
  color: "#4A4A4A",
  marginTop: "0px",
}));

export const Para = styled(Typography)(() => ({
  fontWeight: "400",
  fontSize: "15px",
  color: "#4A4A4A",
  lineHeight: "25px",
  marginTop: "14px",
  marginBottom: "30px",
}));
export const Secondpag = styled(Grid)(() => ({
  position: "relative",
  height: "100%",
  width: "100%",
}));
export const CopyrightTxt = styled(Box)(() => ({
  borderTop: "1px solid #636363",
  paddingTop: "20px",
  color: "white",
  textAlign: "center",
  fontWeight: "400",
  fontSize: "15px",
  lineHeight: "20.43px",
}));

export const SocialIcons = styled(Box)(() => ({
  "& .MuiSvgIcon-root": {
    color: "white",
    fontSize: "20px",
    marginRight: "8px",
    cursor: "pointer",
    "&:hover": {
      color: "#D7282F",
    },
  },
}));

export const Secondpageheading = styled(Typography)(() => ({
  fontWeight: "600",
  fontSize: "20px",
  color: "#D7282F",
}));

export const Secondpagesubheading = styled(Typography)(() => ({
  fontWeight: "700",
  fontSize: "45px",
  lineHeight: "60px",
  color: "#231F20",
  marginBottom: "10px",
}));

export const Secondpagepara1 = styled(Typography)(() => ({
  fontWeight: "400",
  fontSize: "15px",
  lineHeight: "21px",
  color: "#4A4A4A",
  marginBottom: "10px",
}));
export const Secondpagepara = styled(Typography)(() => ({
  fontWeight: "400",
  fontSize: "15px",
  lineHeight: "21px",
  color: "#4A4A4A",
}));

export const Secondpagepara3 = styled(Typography)(() => ({
  fontWeight: "400",
  fontSize: "15px",
  lineHeight: "25px",
  color: "#4A4A4A",
  borderLeft: "5px solid #D7282F",
  paddingLeft: "15px",
  marginTop: "30px",
}));

export const ButtonoverCard = styled(ButtonBase)(() => ({
  border: "1px solid #CDCDCD",
  fontWeight: "600",
  fontSize: "16px",
  lineHeight: "21.79px",
  textAlign: "center",
  borderRadius: "6px",
  padding: "20px",
  marginTop: "7%",
  backgroundColor: "inherit",
  left: "0",
  right: "0",
  color: "#D7282F",
}));
export const ButtonoverCard2 = styled(ButtonBase)(() => ({
  border: "2px solid #CDCDCD",
  fontWeight: "600",
  fontSize: "16px",
  lineHeight: "21.79px",
  borderRadius: "6px",
  padding: "20px",
  backgroundColor: "#fff",
  left: "0",
  right: "0",
  color: "#D7282F",
}));

export const ButtonoverCard3 = styled(ButtonBase)(() => ({
  border: "1px solid #CDCDCD",
  fontWeight: "600",
  fontSize: "16px",
  lineHeight: "21.79px",
  borderRadius: "6px",
  padding: "20px",
  backgroundColor: "#fff",
  left: "0",
  right: "0",
  color: "#D7282F",
  width: "21%",
  position: "relative",
}));

export const Thirdpageheading = styled(Typography)(() => ({
  fontWeight: "600",
  fontSize: "45px",
  color: "#4A4A4A",
  lineHeight: "61.06px",
}));

export const Threefirstheading = styled(Typography)(() => ({
  fontWeight: "700",
  fontSize: "20px",
  lineHeight: "27.14px",
  color: "#4A4A4A",
}));

export const Fourthheading = styled(Typography)(() => ({
  fontWeight: "700",
  fontSize: "45px",
  lineHeight: "61.06px",
  color: "#231F20",
  textAlign: "center",
}));

export const Fourthsubheading = styled(Typography)(() => ({
  fontWeight: "700",
  fontSize: "55px",
  lineHeight: "74.63px",
  color: "#231F20",
}));

export const Fourthpara = styled(Typography)(() => ({
  fontWeight: "400",
  fontSize: "15px",
  lineHeight: "27px",
  color: "#4A4A4A",
}));
export const Fifthheading = styled(Typography)(() => ({
  fontWeight: "700",
  fontSize: "45px",
  lineHeight: "61.28px",
  color: "#231F20",
}));
export const Fifthpara = styled(Typography)(() => ({
  fontWeight: "400",
  fontSize: "18px",
  lineHeight: "24.51px",
  color: "#4A4A4A",
}));
export const listit = styled(Typography)(() => ({
  fontWeight: "400",
  fontSize: "15px",
  lineHeight: "20.35px",
  color: "#4A4A4A",
  marginBottom: "10px",
}));

export const Col7 = styled(Typography)(() => ({
  fontWeight: "700",
  fontSize: "30px",
  lineHeight: "40.71px",
  color: "#231F20",
  textTransform: "uppercase",
}));
export const Col8 = styled(Typography)(() => ({
  fontWeight: "700 !important",
  fontSize: "45px !important",
  lineHeight: "61.28px",
  color: "#231F20",
}));
export const Bggg = styled(Box)(() => ({
  backgroundImage: `url('/assets/footerbg.svg')`,
  height: "auto",
  backgroundSize: "contain",
}));

export const Footerhead = styled(Typography)(() => ({
  fontWeight: "400 !important",
  fontSize: "15px !important",
  lineHeight: "20.43px",
  color: "#FFFFFF",
  marginTop: "15px",
}));

export const Quickbox = styled(Typography)(() => ({
  fontWeight: "600 !important",
  fontSize: "25px !important",
  lineHeight: "34.05px",
}));

export const Last = styled(Typography)(() => ({
  fontWeight: "600 !important",
  fontSize: "15px !important",
  lineHeight: "20.43px",
}));

export const LandingPageContainerImage = styled("img")({});
export const LandingPageContainer = styled("div")({
  backgroundImage: "url(/assets/landing4.svg)",
  backgroundOrigin: "border-box",
  backgroundRepeat: "no-repeat",
  backgroundPosition: "top",
  backgroundSize: "cover",
  height: "100vh",
  width: "auto",
  margin: 0,
  padding: 0,
});

export const TopButtonsContainer = styled("div")({
  display: "flex",
  alignItems: "center",
  justifyContent: "flex-end",
});

export const CustomButton: any = styled(Button)(({ buttontype }: any) => ({
  margin: "20px",
  width: buttontype?.emailButton
    ? "190px"
    : buttontype?.getStarted
    ? "140px"
    : "90px",
  height: "42px",
  background: buttontype?.emailButton ? "#db3b43" : "#FFFFFF",
  boxShadow: "0px 4px 4px rgba(0, 0, 0, 0.25)",
  borderRadius: "6px",
  color: buttontype?.emailButton ? "#FFFFFF" : "#D6573C",
  fontFamily: "Open Sans",
  fontStyle: "normal",
  fontWeight: "700",
  fontSize: "13px",
  lineHeight: "18px",
  "&:hover": {
    color: "#FFFFFF",
    background: "#D6573C",
  },
  transition: "background 1s",
  textTransform: "none",
}));

export const LeftMaskContainer = styled("div")({
  backgroundImage: "url(/assets/LeftMaskgroup.svg)",
  background: `linear-gradient(90deg, #F74A51 0%, #4F1214 98.96%)`,
  position: "absolute",
  top: 0,
  left: 0,
  right: 0,
  bottom: 0,
  backgroundRepeat: "no-repeat",
  display: "flex",
  justifyContent: "center",
  alignItems: "center",
  flexDirection: "column",
  zIndex: 12,
  width: "50%",
});

export const RightMaskContainer = styled("div")({
  background: "transparent",
  backdropFilter: `brightness(50%)`,
  position: "absolute",
  top: 0,
  right: 0,
  bottom: 0,
  backgroundRepeat: "no-repeat",
  display: "flex",
  justifyContent: "center",
  alignItems: "center",
  flexDirection: "column",
  zIndex: 12,
  width: "50%",
});

export const InputFieldContainer = styled("div")({
  display: "flex",
  justifyContent: "space-around",
  alignItems: "center",
  position: "absolute",
  top: `calc(50% - 41px)`,
  left: `calc(65% - 360px )`,
  zIndex: 20,
  background: "white",
  paddingLeft: "20px",
  paddingRight: "20px",

  borderRadius: "16px",
  minWidth: "620px",
  minHeight: "100px",
});

export const HeaderText = styled("p")({
  fontWeight: 700,
  fontSize: "70px",
  lineHeight: "80px",
  color: "white",
  fontFamily: "open sans",
});

export const NormalText = styled("p")({
  textAlign: "start",
  color: "white",
  fontWeight: 700,
  fontSize: "26px",
  lineHeight: "80px",
  fontFamily: "open sans",
});

export const Overlayback = styled("div")({});

export const CrossIconContainer = styled("div")({
  zIndex: 15,
  position: "absolute",
  top: "30px",
  right: "30px",
});

export const CrossIconImage = styled("div")({
  cursor: "pointer",
});

export const Mobilemenu = styled("div")({
  display: "none",
  "@media screen and (max-width: 850px)": {
    display: "block",
    right: "-10px",
    position: "absolute",
  },
});

export const HeaderRightMenu = styled("div")({
  "@media screen and (max-width: 850px)": {
    marginRight: "50px",
    marginTop: "-5px",
  },
});
export const NotificationButton = styled(Button)({
  color: "#000",
  minWidth: "auto",
  padding: 0,
});
export const UserDetail = styled(Typography)({
  padding: "0 10px 5px",
  color: "#000C57",
  fontWeight: 700,
  fontSize: "13px",
  lineHeight: "16px",
});
export const UserEmail = styled(Typography)({
  padding: "0 10px 5px",
  color: "#ccccc",
  fontWeight: 400,
  fontSize: "13px",
  lineHeight: "16px",
});

export const FullContent = styled(Box)({
  width: "100%",
  display: "flex",
  justifyContent: "space-between",
  alignItems: "center",
});