Snippets Collections
body {
  background-image: url('https://images.pexels.com/photos/1285625/pexels-photo-1285625.jpeg?auto=compress&cs=tinysrgb&w=1600');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
}
<!DOCTYPE html>

<html>

​

<head>

    <style>

        <title>404 - Page Not Found</title><link rel="stylesheet"type="text/css"href="styles.css"/>CSS: body,

        html {

            height: 0%;

            margin: 0;
10
            padding: 0;

        }

​

        .container {

            display: flex;

            justify-content: center;

            align-items: center;

            height: 100%;

            background-color: rgba(0, 0, 0, 0.25);

        }

​

        img {

            max-width: 100%;
const handlePersonalInfo = (data: any, e: any) => {
    e.preventDefault();
    console.log('entered info::', data);
    let hasEmiratesId: boolean;
    if (selectedOption === 'Yes') hasEmiratesId = true;
    else hasEmiratesId = false;
    let isMirrorWill: boolean;
    if (singleWillCheck) isMirrorWill = false;
    else isMirrorWill = true;
    const allData = {
      ...data,
      maritalStatusGUID,
      dateOfBirth,
      referralQuestionGUID,
      hasEmiratesId,
      isMirrorWill,
      isdCodeGUID1: countryGUID,
      isdCodeGUID2: countryGUID,
      nationalityGuid,
      countryGUID,
    };
    console.log('allData test', allData);
    axios.post(personalInformationAPI, allData).then((res) => {
      console.log('res post', res);
    });
<Box sx={{ display: 'flex', flexDirection: 'row', pt: 2 }}> <button type="submit" className="next-btn"> Next Step </button> {/* {singleWillCheck ? ( <button type="submit" className="next-btn"> Next Step </button> ) : ( <button type="button" className="next-btn" onClick={handleMirrorWill}> Enter Spouse Information </button> )} */}
    <Box sx={{ flex: '1 1 auto' }} /> <Button color="inherit">Skip</Button> <Button color="inherit" onClick={handleBack}> Back </Button>
</Box>
{!(activeStep === 7) && (
if we set active step to 7, then we can view Upload Documents page.
/* eslint-disable array-callback-return */
/* eslint-disable @typescript-eslint/no-shadow */
/* eslint-disable react/no-array-index-key */
/* eslint-disable @typescript-eslint/no-use-before-define */
/* eslint-disable no-plusplus */
/* eslint-disable import/no-extraneous-dependencies */
/* eslint-disable no-alert */
/* eslint-disable jsx-a11y/click-events-have-key-events */
/* eslint-disable jsx-a11y/no-static-element-interactions */
/* eslint-disable @typescript-eslint/no-unused-vars */
/* eslint-disable jsx-a11y/control-has-associated-label */
/* eslint-disable react/button-has-type */
/* eslint-disable max-len */
import React, { useState } from 'react';
import { useDropzone } from 'react-dropzone';

import { AiOutlineClose } from 'react-icons/ai';

import FileUploadIcon from '@assets/FileUploadIcon.svg';
import FileUploadIconDark from '@assets/FileUploadIconDark.svg';
import TickMarkIconGreen from '@assets/TickMarkIconGreen.svg';
import TickMarkIconGrey from '@assets/TickMarkIconGrey.svg';
import FileArrowIcon from '@assets/FileArrowIcon.svg';

import './style.scss';

function DocumentManager() {
  const [activeElement, setActiveElement] = useState('top');
  const [uploadedFiles, setUploadedFiles] = useState([]);

  /**
   * Sets the active element to the given element string.
   *
   * @param {string} element - The string representing the active element to set.
   */
  const handleElementClick = (element: string) => {
    setActiveElement(element);
  };

  /**
   * Returns the background color style object for a given element.
   *
   * @param {string} element - The element to get background style for.
   * @return {Object} The background color style object for the given element.
   */
  const getBackgroundStyle = (element: string) => ({
    backgroundColor: activeElement === element ? '#023979' : '#FFFFFF',
  });

  /**
   * Returns an object representing the style to be applied to the title element.
   *
   * @param {string} element - The element to apply the style to.
   * @return {Object} An object containing the color property to be applied to the title element.
   */
  const getTitleStyle = (element: string) => ({
    color: activeElement === element ? '#FFFFFF' : '#1B202D',
  });

  const getFileUploadIcon = (element: string) => (activeElement === element ? FileUploadIcon : FileUploadIconDark);

  const getTickMarkicon = (element: string) => (activeElement === element ? TickMarkIconGreen : TickMarkIconGrey);

  const handleAddFileClick = (e: any) => {
    e.preventDefault();
    if (e.target !== e.currentTarget) {
      return;
    }
    document.getElementById('file-upload-input')?.click();
  };

  /**
 * Handles the file input change event.
 *
 * @param {any} e - the event object
 * @return {void}
 */
  const handleFileInputChange = (e: any) => {
    const newFiles = Array.from(e.target.files);
    checkFileValidity(newFiles);
  };

  /**
   * Handles the file drop event by checking the validity of the accepted files.
   *
   * @param {any} acceptedFiles - the files that have been accepted for upload
   */
  const handleFileDrop = (acceptedFiles: any) => {
    checkFileValidity(acceptedFiles);
  };

  /**
   * Prevents the click event from propagating and executing other click events.
   *
   * @param {any} e - the click event to be stopped from propagating
   */
  const handleRowItemClick = (e: any) => {
    e.stopPropagation();
  };

  /**
   * Filters files by their extension and size, and adds the valid files to the uploadedFiles state.
   *
   * @param {Array} files - The array of files to be checked.
   * @return {void} Returns nothing.
   */
  const checkFileValidity = (files: any) => {
    const validExtensions = ['.pdf', '.jpeg', '.jpg', '.bmp', '.doc', '.docx'];
    const maxFileSize = 20 * 1024 * 1024;

    const validFiles = files.filter((file: any) => {
      const isValidExtension = validExtensions.some((ext) => file.name.toLowerCase().endsWith(ext));
      const isWithinMaxSize = file.size <= maxFileSize;
      return isValidExtension && isWithinMaxSize;
    });

    const invalidFiles = files.filter((file: any) => !validFiles.includes(file));
    if (invalidFiles.length > 0) {
      const invalidFileNames = invalidFiles.map((file: any) => file.name).join(', ');
      alert(`Invalid files: ${invalidFileNames}. Please use A4-size PDF, JPEG, BMP, DOC, or DOCX files that are within 20MB.`);
    } else {
      setUploadedFiles((prevFiles) => [...prevFiles, ...validFiles]);
      alert('Files uploaded successfully');
    }
  };

  /**
   * Removes a file from the uploaded files list.
   *
   * @param {any} file - The file to be removed.
   */
  const removeFile = (file: any) => {
    setUploadedFiles((prevFiles) => prevFiles.filter((f) => f !== file));
  };

  const {
    getRootProps,
    getInputProps,
  } = useDropzone({
    onDrop: handleFileDrop,
  });

  return (
    <main>
      <section>
        <header className="header">Upload Documents</header>
        <p className="description">Upload the documents in PDF or JPEG format. Click on next to save the files once all the documents have been uploaded</p>
      </section>
      <div className="row document-upload-container">

        <div className="col-lg-6 container">
          <div
            className={`top${activeElement === 'top' ? ' active' : ''}`}
            style={getBackgroundStyle('top')}
            onClick={() => handleElementClick('top')}
          >
            <div className="left-container">
              <div className="file-upload-icon">
                <img src={getFileUploadIcon('top')} alt="File Uploader Icon" />
              </div>
              <div
                className="document-title"
                style={getTitleStyle('top')}
              >
                Testator Passport

              </div>
            </div>
            <div className="tick-icon">
              <img src={getTickMarkicon('top')} alt="Tick Mark" />
            </div>
          </div>

          <div
            className={`middle${activeElement === 'middle' ? ' active' : ''}`}
            style={getBackgroundStyle('middle')}
            onClick={() => handleElementClick('middle')}
          >
            <div className="left-container">
              <div className="file-upload-icon">
                <img src={getFileUploadIcon('middle')} alt="File Uploader Icon Dark" />
              </div>
              <div
                className="document-title text-bottom-2"
                style={getTitleStyle('middle')}
              >
                Additional Document
              </div>
            </div>
            <div className="tick-icon">
              <img src={getTickMarkicon('middle')} alt="Tick Mark" />
            </div>
          </div>

          <div
            className={`bottom${activeElement === 'bottom' ? ' active' : ''}`}
            style={getBackgroundStyle('bottom')}
            onClick={() => handleElementClick('bottom')}
          >
            <div className="left-container">
              <div className="file-upload-icon">
                <img src={getFileUploadIcon('bottom')} alt="File Uploader Icon Dark" />
              </div>
              <div
                className="document-title text-bottom-2"
                style={getTitleStyle('bottom')}
              >
                Executor Passport
              </div>
            </div>
            <div className="tick-icon tick-icon-last">
              <img src={getTickMarkicon('bottom')} alt="Tick Mark" />
            </div>
            <div />
          </div>
        </div>

        <div className="col-lg-6 row-item" {...getRootProps()} onClick={handleRowItemClick}>
          <div className="file-upload-arrow">
            <img src={FileArrowIcon} alt="File Upload Arrow Icon" />
          </div>
          <div className="file-upload-text">
            Drag and drop document here to upload
          </div>
          <div className="file-attach-instructions">
            Please attach the file(s) below (use the Add button). We recommend using A4-size PDF, BMP, PNG, DOC, DOCX, JPG and JPEG files. File size cannot be more than 20 megabytes (MB). Your files will be uploaded when you submit your form.
          </div>
          <div className="file-add-button">
            <button onClick={handleAddFileClick}>Add File</button>
            <input
              type="file"
              id="file-upload-input"
              name="file-upload-input"
              accept=".pdf, .bmp, .png, .doc, .docx, .jpg, .jpeg"
              multiple
              onChange={handleFileInputChange}
              style={{ display: 'none' }}
              {...getInputProps()}
            />
          </div>
          {uploadedFiles.length > 0 && (
          <div className="file-list">
            <ul>
              {uploadedFiles.map((file: any, index) => (
                <li key={index}>
                  {file.name}
                  <AiOutlineClose
                    className="close-icon"
                    onClick={() => removeFile(file)}
                  />
                </li>
              ))}
            </ul>
          </div>
          )}
        </div>
      </div>
    </main>
  );
}

export default DocumentManager;
const handleRowItemClick = (e) => {
  e.stopPropagation();
};

// ...

<div className="col-lg-6 row-item" {...getRootProps()} onClick={handleRowItemClick}>
  {/* Remaining code */}
</div>
You are a React and frontend expert.

I want to achieve below changes to my current version of code.

Constraints:

1. Add a AiOutlineClose react icon on right side of each file which is listed.
2. On Clicking this icon, that uploaded file is removed from list and from UI as well.
3. Attached current code for reference.


```
/* eslint-disable react/no-array-index-key */
/* eslint-disable @typescript-eslint/no-use-before-define */
/* eslint-disable no-plusplus */
/* eslint-disable import/no-extraneous-dependencies */
/* eslint-disable no-alert */
/* eslint-disable jsx-a11y/click-events-have-key-events */
/* eslint-disable jsx-a11y/no-static-element-interactions */
/* eslint-disable @typescript-eslint/no-unused-vars */
/* eslint-disable jsx-a11y/control-has-associated-label */
/* eslint-disable react/button-has-type */
/* eslint-disable max-len */
import React, { useState } from 'react';
import { useDropzone } from 'react-dropzone';

import FileUploadIcon from '@assets/FileUploadIcon.svg';
import FileUploadIconDark from '@assets/FileUploadIconDark.svg';
import TickMarkIconGreen from '@assets/TickMarkIconGreen.svg';
import TickMarkIconGrey from '@assets/TickMarkIconGrey.svg';
import FileArrowIcon from '@assets/FileArrowIcon.svg';

import './style.scss';

function DocumentManager() {
  const [activeElement, setActiveElement] = useState('top');
  const [uploadedFiles, setUploadedFiles] = useState([]);

  const handleElementClick = (element: string) => {
    setActiveElement(element);
    console.log(activeElement);
  };

  const getBackgroundStyle = (element: string) => ({
    backgroundColor: activeElement === element ? '#023979' : '#FFFFFF',
  });

  const getTitleStyle = (element: string) => ({
    color: activeElement === element ? '#FFFFFF' : '#1B202D',
  });

  const getFileUploadIcon = (element: string) => (activeElement === element ? FileUploadIcon : FileUploadIconDark);

  const getTickMarkicon = (element: string) => (activeElement === element ? TickMarkIconGreen : TickMarkIconGrey);

  const handleAddFileClick = () => {
    document.getElementById('file-upload-input')?.click();
  };

  const handleFileInputChange = (e: any) => {
    const newFiles = Array.from(e.target.files);
    console.log(newFiles);
    checkFileValidity(newFiles);
    setUploadedFiles((prevFiles) => [...prevFiles, ...newFiles]);
  };

  const handleFileDrop = (acceptedFiles: any) => {
    console.log(acceptedFiles);
    checkFileValidity(acceptedFiles);
    setUploadedFiles((prevFiles) => [...prevFiles, ...acceptedFiles]);
  };

  const checkFileValidity = (files: any) => {
    for (let i = 0; i < files.length; i++) {
      const file = files[i];
      const validExtensions = ['.pdf', 'jpeg', 'jpg', '.bmp', '.doc', '.docx'];
      const maxFileSize = 20 * 1024 * 1024;

      if (!validExtensions.some((ext) => file.name.toLowerCase().endsWith(ext))) {
        alert(`Invalid File: ${file.name}. Please use A4-size PDF, JPEG, BMP, DOC or DOCX files`);
      } else if (file.size > maxFileSize) {
        alert(`File size exceeds the limit: ${file.name}. Maximum file size is 20MB.`);
      } else {
        alert('File uploaded successfully');
      }
    }
  };

  const {
    getRootProps,
    getInputProps,
    isDragActive,
    isDragAccept,
    isDragReject,
  } = useDropzone({
    onDrop: handleFileDrop,
  });

  return (
    <main>
      <section>
        <header className="header">Upload Documents</header>
        <p className="description">Upload the documents in PDF or JPEG format. Click on next to save the files once all the documents have been uploaded</p>
      </section>
      <div className="row">

        <div className="col-lg-6 container">
          <div
            className={`top${activeElement === 'top' ? ' active' : ''}`}
            style={getBackgroundStyle('top')}
            onClick={() => handleElementClick('top')}
          >
            <div className="left-container">
              <div className="file-upload-icon">
                <img src={getFileUploadIcon('top')} alt="File Uploader Icon" />
              </div>
              <div
                className="document-title"
                style={getTitleStyle('top')}
              >
                Testator Passport

              </div>
            </div>
            <div className="tick-icon">
              <img src={getTickMarkicon('top')} alt="Tick Mark" />
            </div>
          </div>

          <div
            className={`middle${activeElement === 'middle' ? ' active' : ''}`}
            style={getBackgroundStyle('middle')}
            onClick={() => handleElementClick('middle')}
          >
            <div className="left-container">
              <div className="file-upload-icon">
                <img src={getFileUploadIcon('middle')} alt="File Uploader Icon Dark" />
              </div>
              <div
                className="document-title text-bottom-2"
                style={getTitleStyle('middle')}
              >
                Additional Document
              </div>
            </div>
            <div className="tick-icon">
              <img src={getTickMarkicon('middle')} alt="Tick Mark" />
            </div>
          </div>

          <div
            className={`bottom${activeElement === 'bottom' ? ' active' : ''}`}
            style={getBackgroundStyle('bottom')}
            onClick={() => handleElementClick('bottom')}
          >
            <div className="left-container">
              <div className="file-upload-icon">
                <img src={getFileUploadIcon('bottom')} alt="File Uploader Icon Dark" />
              </div>
              <div
                className="document-title text-bottom-2"
                style={getTitleStyle('bottom')}
              >
                Executor Passport
              </div>
            </div>
            <div className="tick-icon tick-icon-last">
              <img src={getTickMarkicon('bottom')} alt="Tick Mark" />
            </div>
            <div />
          </div>
        </div>

        <div className="col-lg-6 row-item" {...getRootProps()}>
          <div className="file-upload-arrow">
            <img src={FileArrowIcon} alt="File Upload Arrow Icon" />
          </div>
          <div className="file-upload-text">
            Drag and drop document here to upload
          </div>
          <div className="file-attach-instructions">
            Please attach the file(s) below (use the Add button). We recommend using A4-size PDF, BMP, PNG, DOC, DOCX, JPG and JPEG files. File size cannot be more than 20 megabytes (MB). Your files will be uploaded when you submit your form.
          </div>
          <div className="file-add-button">
            <button onClick={handleAddFileClick}>Add File</button>
            <input
              type="file"
              id="file-upload-input"
              name="file-upload-input"
              accept=".pdf, .bmp, .png, .doc, .docx, .jpg, .jpeg"
              multiple
              onChange={handleFileInputChange}
              style={{ display: 'none' }}
              {...getInputProps()}
            />
          </div>
        </div>
        {uploadedFiles.length > 0 && (
          <div className="file-list">
            <ul>
              {uploadedFiles.map((file: any, index) => (
                <li key={index}>{file.name}</li>
              ))}
            </ul>
          </div>
        )}
      </div>
    </main>
  );
}

export default DocumentManager;

```

''' 
 <div className="col-lg-6 row-item">
          <div className="file-upload-arrow">
            <img src={FileArrowIcon} alt="File Upload Arrow Icon" />
          </div>
          <div className="file-upload-text">
            Drag and drop document here to upload
          </div>
          <div className="file-attach-instructions">
            Please attach the file(s) below (use the Add button). We recommend using A4-size PDF, BMP, PNG, DOC, DOCX, JPG and JPEG files. File size cannot be more than 20 megabytes (MB). Your files will be uploaded when you submit your form.
          </div>
          <div className="file-add-button">
            <button onClick={addFileHandler}>Add File</button>
          </div>
        </div>
   '''
 
 Your are a senior react developer.
 
 I want you to implement a functionality to upload files on button click event and drag and drop.
 
 Contrainst:
 
1. function should be implemented on `addFileHandler` event given above.
2. File can also be uploaded by drag and drop into row-item div element.
3. instructions for file upload is given `file-attach-instructions` div element.
4. You can use packages like `react-uploader` to implement this.
5. Finally return the updated version of code. Current code is above for reference.


 
 
 
<div className="col-lg-6 row-item">
   <div className="file-upload-arrow">
     <img src={FileArrowIcon} alt="File Upload Arrow Icon" />
   </div>
   <div className="file-upload-text">
     Drag and drop document here to upload
   </div>
   <div className="file-attach-instructions">
     Please attach the file(s) below (use the Add button). We recommend using A4-size PDF, BMP, PNG, DOC, DOCX, JPG and JPEG files. File size cannot be more than 20 megabytes (MB). Your files will be uploaded when you submit your form.
   </div>
   <div className="file-add-button">
     <button>Add File</button>
   </div>
 </div>
 
 
 Consider you are a CSS expert. Above is the code you have to update and make neccessary styling based on below constraints
 
 Constraints:
 
 1. Center the child elements of row-item div element horizonatally & vertically.
 2. Each child element is aligned center.
 3. Update backgournd of Add File button to #023979.
 4. Set border radious of button to 5px and font color to #FFFFFF.
 5. Fibnally return the updated version of code with change in styles.
"""
<div className="top">
            <div className="left-container">
              <div className="file-upload-icon">
                <img src={FileUploadIcon} alt="File Uploader Icon" />
              </div>
              <div className="document-title">Testator Passport</div>
            </div>
            <div className="tick-icon">
              <img src={TickMarkIconGreen} alt="Tick Mark" />
            </div>
          </div>

          <div className="middle">
            <div className="left-container">
              <div className="file-upload-icon">
                <img src={FileUploadIconDark} alt="File Uploader Icon Dark" />
              </div>
              <div className="document-title text-black">Additional Document</div>
            </div>
            <div className="tick-icon">
              <img src={TickMarkIconGrey} alt="Tick Mark" />
            </div>
          </div>

          <div className="bottom">
            <div className="left-container">
              <div className="file-upload-icon">
                <img src={FileUploadIconDark} alt="File Uploader Icon Dark" />
              </div>
              <div className="document-title text-black">Executor Passport</div>
            </div>
            <div className="tick-icon tick-icon-last">
              <img src={TickMarkIconGrey} alt="Tick Mark" />
            </div>
            <div />
         </div>
"""


You are an experienced React Developer.

I want to implement a UI change.

On clicking top, middle or bottom div elements, 
  1. its backgound should be changed to #023979. 
  2. Its document-title element color should be changed to #FFFFFF.
For example. middle div element is clicked, it is active and the backgound changes to #023979.
While background of Inactive elements changes to default color #f4f4f4.
Initially when component loads, top element background is #023979, and bottom 2 element background is #f4f4f4.
you can use react hooks and state if needed. 
Help me to achieve this change by modiyfinh current version of code

I will give styles for reference below.

.container {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.top, .middle, .bottom {
    display: flex;
    justify-content: space-between;
    background-color: #f4f4f4;
    border-radius: 5px 0px 0px 5px;
}

.top {
    display: flex;
    align-items: center;
    background-color: #023979;
}

.container div {
    padding: 5px;
    text-align: center;
    cursor: pointer;
}

.document-title {
    font-family: 'Basis Grotesque Arabic Pro';
    font-style: normal;
    font-weight: 700;
    font-size: 0.875rem;
    line-height: 14px;
    color: #FFFFFF;
}

.left-container {
    display: flex;
    align-items: center;
    margin-right: 12px;
}

.file-upload-icon,
.document-title {
    margin-right: 12px;
}

.tick-icon {
    margin-left: auto;
    margin-right: 12px;
}

.document-title {
    flex-grow: 1;
}

.tick-icon-last {
    margin-right: 2px !important;
}










.elementor-form .elementor-field-label {
    position: absolute;
    right: 18px;
    transition-duration: .2s;
}

.elementor-field-label.active-field-label{
    transform: translateY(-20px);
    font-size: 16px !important;
}

.elementor-field{
    box-shadow: none !important;
}
<ColorlibStepIcon
                            currentIndex={label.stepID - 1}
                            icon={label.stepID}
                            stepNumber={stepNumber}
                            completed={checkCompletedSteps.includes(
                              label.stepID,
                            )}
                            active={activeStep + 1 === label.stepID}
                            data={[]}
                          />

Help me to solve below error:

1. The left-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type.ts(2362)
(parameter) label: StepData.


Solution:

The error is occurring because the icon prop of the ColorlibStepIcon component is expecting a number, but the label.stepID value is not being converted to a number before being passed as the icon prop.

To fix this error, you can convert the label.stepID value to a number before passing it as the icon prop. Here's an example of how you can do this:


Resolved Code:

<ColorlibStepIcon
  currentIndex={label.stepID - 1}
  icon={Number(label.stepID)}
  stepNumber={stepNumber}
  completed={checkCompletedSteps.includes(label.stepID)}
  active={activeStep + 1 === label.stepID}
  data={[]}
/>


-webkit-print-color-adjust: exact
.t-foot {height: 50px;}
@media print {
  tfoot {display: table-footer-group;}
}
.modal-close-button {
    border-radius: 50%;
    background-color: #f1f1f1;
    border: none;
    outline: none;
    padding: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    top: 8px;
    position: absolute;
    right: 16px;
}
<Modal show={showModal}>
  <Modal.Header>
    <div className="modal-header-content">
      <div className="modal-header-left">
        <div className="modal-header-title mt-4">Add Substitute</div>
        <div className="modal-header-subtitle">
          List your Substitute Beneficiaries below and click on Add Substitute to add them to your List
        </div>
      </div>
    </div>
    <button
      className="modal-close-button"
      onClick={handleCloseModal}
    >
      <span aria-hidden="true">&times;</span>
    </button>
  </Modal.Header>
  <Modal.Body>
    <AddSubstituteForm onSubmit={handleSubmit} />
  </Modal.Body>
  <Modal.Footer>
    <Button
      variant="primary"
      onClick={handleCloseModal}
    >
      Add Substitute
    </Button>
  </Modal.Footer>
</Modal>




You are a CSS expert.

Constraints:
1. I want to show this modal center of our screen
2. Help me to add styles for element to achieve this.
3. Modal should be at center of whole window.
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

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

body {
    font-family: 'Poppins', sans-serif;
}

.top_left {
    width: 50%;
}

.top_left p {
    font-size: 2rem;
    font-weight: 600;
    color: #0094FF;
}

a {
    font-size: 14px;
    color: #0094FF;
    height: 40px;
    border: 1px solid #0094FF;
    border-radius: 8px;

    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;

    text-decoration: none;
}

.scan_icon {
    fill: currentColor;
    width: 24px;
    height: 24px;
}

.exit {
    font-size: 16px;
    float: right;
    color: #0094FF;
    height: 40px;
    border-radius: 8px;
    margin-top: 10px;
    pointer-events: auto;
    width: 50%;
}

.exit a {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 0.5px;
}

.exit a:link,
.exit a:visited {
    color: #0094FF;
    text-decoration: none;
}

.exit a:hover,
.exit a:active {
    color: #0094FF;
}

.exit a:active .link-text {
    color: #0094FF
}


.exit img {
    width: 24px;
    height: 24px;
    fill: currentColor;
    margin-right: 1px;
}

.objekt {
    height: 200px;
    width: 35.625rem;
    font-size: 16px;
}

.objekt th,
.objekt td {
    border: 2px solid #0094ff;
    padding: 6px 0px 0px 10px;
    text-align: left;
}

.objekt th {
    background-color: #0094ff;
    border-radius: 8px 0 0 8px;
    color: #ffffff;

    width: 11.25rem;
    font-weight: normal;
}

.objekt td {
    font-weight: normal;
    width: 18.125rem;
    border-radius: 0 8px 8px 0;
}


.meldung {
    height: 100px;
    width: 35.625rem;
    font-size: 16px;
}

.meldung th,
.meldung td {
    font-size: 16px;
    border: 2px solid #0094ff;
    text-align: left;
    padding: 8px;

}

.meldung th {
    background-color: #0094ff;
    color: #ffffff;
    width: 11.25rem;
    font-weight: normal;
    border-radius: 8px 0 0 8px;
}

.meldung td {
    width: 18.125rem;
    font-weight: normal;
    border-radius: 0 8px 8px 0;
}

.fertigmeldungen {
    width: 35.375rem;
    margin-top: 1vw;
    height: 100px;
    border-radius: 0 0 8px 8px;
}

.fertigmeldungen caption {
    font-weight: normal;
    font-size: 16px;
    border-radius: 8px 8px 0 0;
    height: 48px;
    text-align: left;
    background-color: #0094ff;
    color: #ffffff;
    padding-left: 16px;
    padding-top: 12px;
    margin-bottom: 2px;
}

.fertigmeldungen td {
    width: 200px;
    padding: 5px;
    text-align: left;
    color: #222222;
    font-size: 14px;

}

.fertigungsgange {
    float: right;
    height: 420px;
    width: 16.875rem;
    border: 2px solid #0094ff;
    border-radius: 0 0 8px 8px;
}

.fertigungsgange caption {
    font-weight: normal;
    font-size: 16px;
    text-align: left;
    background-color: #0094ff;
    color: #ffffff;
    padding: 10px;
    margin-bottom: 2px;

    border-radius: 8px 8px 0 0;
}

.container {
    padding: 20px 35px
}

.header {
    display: flex;
    width: 100%;
    margin-bottom: 20px
}

.qr_scan {
    width: 16.75rem;
}

#exit-button {
    width: 7.5rem;
    float: right;
}

.container-table {
    width: 100%;
    display: flex;
}
.table-left{
    width: 70%;
}
.table-right{
    width: 30%
}

@media only screen and (max-width: 930px) {
    .container-table{
        display: block;
    }
    .fertigungsgange{
        margin-top: 20px;
        float: none;
    }
}
 
<button
   className="modal-close-button"
   onClick={handleCloseModal}
 >
   <span aria-hidden="true">&times;</span>
 </button>
 
 You are a CSS expert
 
 I want you to do following changes in styling.
 
 1. Rounded shape. Apply border radius to 50pc.
 2. Background to "#f1f1f1".
 3. No outer border color.
 3. border of child element span should be 2px solid #494A53.
.initials-avatar {
    background-color: #023979;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px;
    width: 38px;
    height: 38px;
}
.box {
  border: 10px solid;
  border-image: linear-gradient(45deg,red,blue) 10;
}
// WP_Query arguments
$args = array(
	'post_type'              => array( 'post' ),
	'post_status'            => array( 'pubblic' ),
 	 'post_per_page' => 6,
	'order'                  => 'DESC',
	'orderby'                => 'date',
);

// The Query
$query = new WP_Query( $args );

// The Loop
if ( $query->have_posts() ) {
	while ( $query->have_posts() ) {
		$query->the_post();
		// do something
	}
} else {
	// no posts found
}

// Restore original Post Data
wp_reset_postdata();
© Copyright [year] All Rights Reserved - <a href="/privacy-policy/">Privacy Policy</a> - <a href="/mappa-sito/">Mappa del sito</a> - <a href="https://scintille.net/" target="_blank" rel="noopener">Scintille web agency</a>
Changing the Value of a Custom Property Using JavaScript
I’ve been mentioning throughout this whole article that variables can be updated using JavaScript, so let’s get into that.

Say you have a light theme and want to switch it to a dark theme, assuming you have some CSS like the following:

```css
:root {
  --text-color: black;
  --background-color: white;
}

body {
  color: var(--text-color);
  background: var(--background-color);
}
```

You can update the `--text-color` and `--background-color` custom properties by doing the following:

```js
var bodyStyles = document.body.style;
bodyStyles.setProperty('--text-color', 'white');
bodyStyles.setProperty('--background-color', 'black');
```
<span class="leuchtstift">
- aspect-ratio (to make squares evenly.)

- position: fixed;   inset: 0 0 0 20%; (top,right,bottom,left)

- background: hsl( var(--clr-white) / 0.05);  backdrop-filter: blur(1.5rem); (make frosted glass look)

- margin-block

- aria-hidden=“true” for screen readers

Aria-selected styles

HTML
          <div style="margin-bottom: 50vh">
                        <!-- Tabs -->
                        <div class="tab-list underline-indicators flex">
                            <button aria-selected="true" class="uppercase ff-sans-cond text-accent bg-dark letter-spacing-2">Moon</button>
                            <button aria-selected="false" class="uppercase ff-sans-cond text-accent bg-dark letter-spacing-2">Mars</button>
                            <button aria-selected="false" class="uppercase ff-sans-cond text-accent bg-dark letter-spacing-2">Europa</button>
                        </div>
                        
CSS
.underline-indicators > .active,
.underline-indicators > [aria-selected="true"] {
    color: hsl( var(--clr-white) / 1);
    border-color: hsl( var(--clr-white) / 1);
}

GRID
Responsive(?) Grid columns:

    .grid-container {
        text-align: left;
        column-gap: var(--container-gap, 2rem);
        grid-template-columns: minmax(2rem, 1fr) repeat(2, minmax(0, 30rem)) minmax(2rem, 1fr);
    }

- .grid-container * {  max-width: 45ch;}

- place-items/place-content (grid property)
.item {
  order: 5; /* default is 0 */
}
//Once React project is made with TypeScript do the following:

//install main dependency of jest
npm i jest --save-dev

//Install react-testing-library packages:

npm i @testing-library/jest-dom @testing-library/react @testing-library/user-event --save-dev

//If using CSS Modules
npm i jest-css-modules-transform

// If using Jest 28 or higher
npm i jest-environment-jsdom

//You will then need: 
//1. jest.config.cjs
module.exports = {
  transform: {
    "^.+\\.(t|j)sx?$": ["@swc/jest"],
    "^.+\\.jsx?$": "babel-jest",
    "^.+\\.css$": "jest-css-modules-transform",
  },
  testEnvironment: "jest-environment-jsdom",
  setupFilesAfterEnv: ["./jest.setup.tsx"],
  preset: "ts-jest",
  testMatch: ["<rootDir>/src/**/*.test.(ts|tsx)"],
  // If SVG needs to be mocked
  moduleNameMapper: {
    "\\.svg$": "<rootDir>/svgMock.tsx",
  },
};

//2. jest.setup.tsx
import '@testing-library/jest-dom';
import '@testing-library/jest-dom/extend-expect';

declare global {
  namespace NodeJS {
    interface Global {
      fetch: jest.Mock;
    }
  }
}

//3. (OPTIONAL) for svg mock; svgMock.tsx:
module.exports = '';

//Excerpt from Bing search:
//It seems like you are trying to import an SVG file as a React component in your test file. This causes Jest to throw an error because it cannot parse the SVG file as JavaScript. You need to mock the SVG file so that Jest can ignore it during testing. You can do this by using the moduleNameMapper option in your Jest configuration and mapping the SVG files to a mock file that returns an empty string or a dummy component

//Therefore, ideally package.json should look like:
{
  "name": "vite-react-starter",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "test": "jest --watch"
  },
  "dependencies": {
    "@swc/jest": "^0.2.26",
    "firebase": "^9.17.2",
    "jest-css-modules-transform": "^4.4.2",
    "jest-environment-jsdom": "^29.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^14.0.0",
    "@types/jest": "^29.5.1",
    "@types/react": "^18.0.26",
    "@types/react-dom": "^18.0.10",
    "@vitejs/plugin-react": "^3.0.1",
    "jest": "^29.5.0",
    "ts-jest": "^29.1.0",
    "typescript": "^4.9.5",
    "vite": "^4.0.4"
  }
}
module.exports = {
  content: ['./src/**/*.{html,js,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      colors: {
        primaryColor: '#E17446',
        primaryColorHover: '#db5b24',
        primaryText: '#111130',
        primaryBlue: '#2b5a9c',
        textLight: '#9e9ebc',
        Gray: '#8f9bad',
        f6f9fd: '#f6f9fd',
        dddddd: '#dddddd',
        inputborder: '#e8e8e8',
        borderColor: '#ebebeb',
        green: '#008f02',
        lightGreen: '#e2f2e2',
        orange: '#f05c00',
        orangeLight: '#fcede4',
        redLight: '#fde5e5',
        red: '#f00000',
        border1: '#ebebeb',

        themecolor: '#E17446',
        hoverthemecolor: '#db5b24',
      },
      backgroundImage: {
        close: 'url(/public/images/colse.png)',
        trendBG1: 'url(../../public/images/blog-img.jpg)',
      },
      boxShadow: {
        inputFocus:
          'rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px',
        headerFix: 'rgba(0, 0, 0, 0.1) 0px 10px 50px',
        sibarToggle: '-4px 5px 5px #0000000d',
        sibarToggleRTL: '5px -4px 6px #0000000d',
      },
      spacing: {
        '5px': '5px',
        '10px': '10px',
        '14px': '14px',
        '15px': '15px',
        '18px': '18px',
        '20px': '20px',
        '25px': '25px',
        '30px': '30px',
        '35px': '35px',
        '40px': '40px',
        '45px': '45px',
        '50px': '50px',
        '55px': '55px',
        '60px': '60px',
        '65px': '65px',
        '70px': '70px',
        '75px': '75px',
        '80px': '80px',
        '85px': '85px',
        '90px': '90px',
        '95px': '95px',
        '100px': '100px',
        '106px': '106px',
        '120px': '120px',
        unset: 'unset',
      },
      fontFamily: {
        charter: 'var(--charterFont)',
        sohne: 'var(--sohneFont)',
        poppins: 'var(--poppins)',
        gloock: 'var(--gloock)',
      },
      fontSize: {
        0: '0',
        '5px': '5px',
        '10px': '10px',
        '14px': '14px',
        '15px': '15px',
        '16px': '16px',
        '17px': '17px',
        '20px': '20px',
        '22px': '22px',
        '25px': '25px',
        '28px': '28px',
        '30px': '30px',
        '35px': '35px',
        '40px': '40px',
        '45px': '45px',
        '50px': '50px',
        '55px': '55px',
        '60px': '60px',
        '65px': '65px',
        '70px': '70px',
        '75px': '75px',
        '80px': '80px',
        '85px': '85px',
        '90px': '90px',
        '95px': '95px',
        '100px': '100px',
        unset: 'unset',
      },
      lineHeight: {
        1: '1',
        '5px': '5px',
        '10x': '10px',
        '15px': '15px',
        '19px': '19px',
        '22px': '22px',
        '20px': '20px',
        '25px': '25px',
        '28px': '28px',
        '30px': '30px',
        '32px': '32px',
        '35px': '35px',
        '36px': '36px',
        '40px': '40px',
        '42px': '42px',
        '46px': '46px',
        '45px': '45px',
        '50px': '50px',
        '52px': '52px',
        '55px': '55px',
        '60px': '60px',
        '65px': '65px',
        '70px': '70px',
        '75px': '75px',
        '80px': '80px',
        '85px': '85px',
        '90px': '90px',
        '95px': '95px',
        '100px': '100px',
        unset: 'unset',
        Normal: 'normal',
      },
      zIndex: {
        1: '9',
        2: '99',
        3: '999',
        4: '9999',
        5: '99999',
        6: '999999',
      },
      borderRadius: {
        '5px': '5px',
        '10px': '10px',
        '15px': '15px',
      },
      screens: {
        768: '768px',
        992: '992px',
        1200: '1200px',
        1300: '1300px',
        1400: '1400px',
        1500: '1500px',
        1600: '1600px',
        1700: '1700px',
      },
      animation: {
        slow: 'wiggle 2s linear',
      },
      keyframes: {
        wiggle: {
          '0%': { transform: 'transform(164.25px)' },
          '100%': { transform: 'rotate(0px)' },
        },
      },
    },
  },
}
import { useState } from "react";
import Image from "next/image";
import logo from "";

import Hamburger from "./Hamburger";
import NavItem from "./NavItem";

export default function NavBar() {
  const [toggle, setToggle] = useState(false);

  function toggleHamburgerMenu() {
    setToggle((prevToggle) => !prevToggle);
  }

  const navItems = ["", "", "", ""];

  return (
    <header className="header">
      <nav className="nav">
        //<Image className="logo" alt="personal logo" src={logo} />
        //<h4 className="logo-title"></h4>
        <ul className="links">
          {navItems.map((item, index) => (
            <NavItem
              key={index}
              onClick={() => setToggle(false)}
              href={item}
              className="link"
            >
              {item}
            </NavItem>
          ))}
        </ul>
        <Hamburger toggleHamburgerMenu={toggleHamburgerMenu} toggle={toggle} />
      </nav>

      {toggle && (
        <ul className="mobile-links">
          {navItems.map((item, index) => (
            <NavItem
              key={index}
              onClick={() => setToggle(false)}
              href={item}
              className="mobile-link"
            >
              {item}
            </NavItem>
          ))}
        </ul>
      )}
    </header>
  );
}

//Hamburger

function Hamburger({ toggleHamburgerMenu, toggle }) {
  return (
    <button
      id="hamburger-button"
      aria-label="Mobile Menu Button"
      onClick={toggleHamburgerMenu}
      className="hamburger-menu"
    >
      <span className={`${toggle && "open"} hamburger-top`}></span>
      <span className={`${toggle && "open"} hamburger-middle`}></span>
      <span className={`${toggle && "open"} hamburger-bottom`}></span>
    </button>
  );
}

export default Hamburger;

//NavItem component

function NavItem({ onClick, href, className, children }) {
  return (
    <li>
      <a onClick={onClick} href={`#${href}`} className={className} aria-label="menu links">
        {children}
      </a>
    </li>
  );
}
export default NavItem;

.modern-gradient {
  background-image: 
    linear-gradient(
      360deg in oklab, 
      oklch(92% 0.05 340) 27% 27%, oklch(90% 0.03 300) 100%
    )
  ;
}

.classic-gradient {
  background-image: 
    linear-gradient(360deg, #fdd8ef 27% 27%, #e1daf0 100%)
  ;
}
.modern-gradient {
  background-image: 
    linear-gradient(
      326deg in oklab, 
      oklch(70% 0.20 340) 27% 27%, oklch(90% 0.03 300) 100%
    )
  ;
}

.classic-gradient {
  background-image: 
    linear-gradient(326deg, #eb63c5 27% 27%, #e1daf0 100%)
  ;
}
// E.g. Colours living in the variables.scss file:
// color palette
$colors: (
  "primary": $primary,
  "secondary": $secondary,
  "error": $error,
  "info": $info,
  "blue": #1919e6,
  "red": #e61919,
  "yellow": #e6e619,
  "green": #19e635,
  "orange": #ffa600,
  "purple": #9900ff,
  "gray": #808080,
  "black": black,
  "white": white,
);

//colors being looped in _colors.scss:
@each $key, $val in $colors {
  .text-#{$key} {
    color: $val;
  }
  .bg-#{$key} {
    background-color: $val;
  }

  // light variations
  @for $i from 1 through 9 {
    .text-#{$key}-light-#{$i} {
      color: mix(white, $val, $i * 10);
    }
    .bg-#{$key}-light-#{$i} {
      background-color: mix(white, $val, $i * 10);
    }
  }

  // dark variations
  @for $i from 1 through 9 {
    .text-#{$key}-dark-#{$i} {
      color: mix(black, $val, $i * 10);
    }
    .bg-#{$key}-dark-#{$i} {
      background-color: mix(black, $val, $i * 10);
    }
  }
}
.container {
    overflow-y: scroll;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
}
.container::-webkit-scrollbar { /* WebKit */
    width: 0;
    height: 0;
}
a {
  text-decoration-color: #EA215A;
  text-decoration-thickness: .125em;
  text-underline-offset: 1.5px;
}
<!--This is html code. Plz. use it as html file. -->
 
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <!-- <link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@600;900&display=swap" rel="stylesheet"> -->
    <title>Upgrader Boy</title>
    <link rel="stylesheet" href="web.css">
</head>
 
<body>
    <header>
        <section class="navsection">
            <div class="logo">
                <h1>Upgrader Boy</h1>
            </div>
            <nav>
                <a href="https://upgraderboy.blogspot.com/" target="_blank">Home</a>
                <a href="https://www.youtube.com/channel/UCEJnv8TaSl0i1nUMm-fGBnA?sub_confirmation=1" target="_blank">Youtube</a>
                <a href="#" target="_blank">Social Media</a>
                <a href="#" target="_blank">Services</a>
                <a href="https://upgraderboy.blogspot.com/p/about-us.html" target="_blank">About us</a>
                <a href="https://upgraderboy.blogspot.com/p/contact-us.html" target="_blank">Contact us</a>
            </nav>
        </section>
        <main>
            <div class="leftside">
                <h3>Hello</h3>
                <h1>I am Upgrader</h1>
                <h2>Web developer, Youtuber and CEO of Upgrader Boy</h2>
                <a href="#" class="button1">Website</a>
                <a href="#" class="button2">Youtube</a>
            </div>
            <div class="rightside">
                <img src="/Image/ezgif.com-gif-maker.gif" alt="Svg image by Upgrader Boy">
            </div>
        </main>
 
    </header>
</body>
 
</html>
 
<!-- This is css code. Plz. use it as css file. -->
  
*{
    margin: 0px;
    padding: 0px;
    /* @import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@600&display=swap'); */
    /* font-family: 'Roboto Slab', serif; */
}
 
header{
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to left,#ffff 85%, #c3f5ff 20%);
}
 
.navsection{
    width: 100%;
    height: 20vh;
    display: flex;
    justify-content: space-around;
    background-image: linear-gradient(to top, #fff 80%, #c3f5ff 20%);
    align-items: center;
}
 
.logo{
    width: 40%;
    color: #fff;
    background-image: linear-gradient(#8d98e3 40%, #854fee 60%);
    padding-left: 100px;
    box-sizing: border-box;
}
 
.logo h1{
    text-transform: uppercase;
    font-size: 1.6rem;
    animation: aagepiche 1s linear infinite;
    animation-direction: alternate;
}
 
@keyframes aagepiche{
    from{padding-left: 40px;}
    to {padding-right: 40px;}
}
 
nav{
    width: 60%;
    display: flex;
    justify-content: space-around;
}
 
nav a{
    text-decoration: none;
    text-transform: uppercase;
    color: #000;
    font-weight: 900;
    font-size: 17px;
    position: relative;
}
 
nav a:first-child{
    color: #4458dc;
}
 
nav a:before{
    content: "";
    position: absolute;
    top: 110%;
    left: 0;
    height: 2px;
    width: 0;
    border-bottom: 5px solid #4458dc;
    transition: 0.5s;
}
 
nav a:hover:before{
    width: 100%;
}
 
main{
    height: 80vh;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
 
.rightside{
    border-radius: 30% 70% 53% 47% / 30% 30% 70% 70%;
    background-color: #c8fbff;
}
 
.rightside img{
    max-width: 500px;
    height: 80%;
}
 
.leftside{
    color: #000;
    text-transform: uppercase;
}
 
.leftside h3{
    font-size: 40px;
    margin-bottom: 20px;
    position: relative;
}
 
.leftside h3:after{
    content: "";
    width: 450px;
    height: 3px;
    position: absolute;
    top: 43%;
    left: 23.4%;
    background-color: #000;
}
 
.leftside h1{
    margin-top: 20px;
    font-size: 70px;
    margin-bottom: 25px;
}
 
.leftside h2{
    margin-bottom: 35px;
    font-weight: 500;
    word-spacing: 4px;
}
 
.leftside .button1{
    color: #fff;
    letter-spacing: 0;
    background-image: linear-gradient(to right, #4458dc 0%, #854fee 100%);
    border: double 2px transparent;
    box-shadow: 0 10px 30px rgba(118, 85, 225, 3);
    /* radial-gradient(circle at top left,#4458dc,#854fee); */
}
 
.leftside .button2{
    border: 2px solid #4458dc;
    color: #222;
    background-color: #fff;
    box-shadow: none;
}
 
.leftside .button1 , .button2{
    display: inline-block;
    margin-right: 50px;
    text-decoration: none;
    font-weight: 900;
    font-size: 14px;
    text-align: center;
    padding: 12px 25px;
    cursor: pointer;
    text-transform: uppercase;
    border-radius: 5px;
}
 
.leftside .button1:hover{
    border: 2px solid #4458dc;
    color: #222;
    box-shadow: none;
    background-color: #fff;
    background-image: none;
}
a[data-tooltip]:link, a[data-tooltip]:visited {
  position: relative;
  text-decoration: none;
  border-bottom: solid 1px;
}

a[data-tooltip]:before {
  content: "";
  position: absolute;
  border-top: 1em solid #0090ff;
  border-left: 1.5em solid transparent;
  border-right: 1.5em solid transparent;
  display: none;
  top: -1em;
}

a[data-tooltip]:after {
  content: attr(data-tooltip);
  position: absolute;
  color: white;
  top: -2.5em;
  left: -1em;
  background: #0090ff;
  padding: .25em .75em;
  border-radius: .5em;
  white-space: nowrap;
  display: none;
}

a[data-tooltip]:hover:before, a[data-tooltip]:hover:after {
  display: inline;
}

Code language: CSS (css)
.scale {
    transition: all 0.3s ease-in-out;
}

.scale:hover {
    transform: scale(1.1);
}

@media only screen and (max-width: 767px) {
    .scale:hover {
        transform: none;
    }
}


/ rotate /

.rotate {
    transition: all 0.3s ease-in-out;
}

.rotate:hover {
    transform: rotate(-5deg);
}

@media only screen and (max-width: 767px) {
    .rotate:hover {
        transform: none;
    }
}


/ position /

.position {
    transition: all 0.3s ease-in-out;
}

.position:hover {
    transform: translate(0, -100px);
}

@media only screen and (max-width: 767px) {
    .position:hover {
        transform: none;
    }
}


/ opacity /

.opacity {
    transition: all 0.3s ease-in-out;
    opacity: 0.5;
}

.opacity:hover {
    opacity: 1;
}

@media only screen and (max-width: 767px) {
    .opacity:hover {
        transform: none;
    }
}


/ jiggle /

.jiggle {
    transition: all 0.3s cubic-bezier(0.475, 0.985, 0.12, 1.975);
}

.jiggle:hover {
    transform: scale(1.1);
}

@media only screen and (max-width: 767px) {
    .jiggle:hover {
        transform: none;
    }
}
<div id="header"></div>
<style>
    #header {
    	height: 200px;
        background-image: url('https://i.postimg.cc/BbRm96cn/daniel-mirlea-u5-Qzs-Kvu7-YA-unsplash.jpg');
    }
</style>

<script>
    document.addEventListener('mousemove', function (event) {
      if (window.event) { // IE fix
          event = window.event;
      }
    
      // Grab the mouse's X-position.
      var mousex = event.clientX;
      var mousey = event.clientY;
      var header = document.getElementById('header');
      header.style.backgroundPosition = '-' + mousex/3 + 'px -' + mousey/2 + 'px';
    }, false);
    
</script>
/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
   scroll-behavior: auto;
  }
  
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
p::selection {
  color : #000;
  background-color : #2CD9FF;
}
 /* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}
// If you look at [this great answer](https://stackoverflow.com/a/29733127/1548895) you'll notice that the only cross-browser way (without 2 line break limit) is inserting `100%`\-width empty blocks ("line-breaks"). So for similar markup this will look like

.flex {
  display: flex;
  flex-wrap: wrap;
  border: 2px solid red;
}

.line-break {
  width: 100%;
}
// Margins - For centering elements with margins IF NOT INSIDE A DEV ESP WITH BG STYLING
// Vertically center elements via margins
.vcenter-margin {
   display: block;
   margin-top: auto;
   margin-bottom: auto;
}


// Horizontally center elements via margins
// NOTE: if using Foundation Sites, use "float-center".  This is should be used for @mixin only
.hcenter-margin {
   display: block;
   margin-left: auto;
   margin-right: auto;
}



// Padding - For centering elements with paddings IF INSIDE A DIV
// Vertically center elements with paddings IF INSIDE A DIV
$value: 1em;    // example value
.vcenter-padding {
   height: $value;
   padding-top: calc($value/2);
   padding-bottom: calc($value/2);

   // .clearfix hack to keep elements inside div or else they will float
   content: "";
   clear: both;
   display: table;
}


// Horizontally coming soon

// Horizontally center group of elements
$gap-value: 1.5em;
.hcenter-group {
  display: flex;
  justify-content: center;
  gap: $gap-value;
}
.round {
    object-fit: cover;          // prevent image from stretching
    object-position: 0% 25%;    // move the crop around, [left/right] [up/down]
    aspect-ratio: 1/1;          // crops to a square
    border-radius: 50%;         // round corners
    width: 17em;                // size of image
}
/* General Type CSS - Starts*/

#footer .menu a {
    font-size: 16px;
}

.single .standard-content strong,
.avia_textblock b,
.avia_textblock strong {
    color: #333;
}

span.post-meta-infos,
.error404 .title_container,
.search .title_container,
.archive .title_container,
.single .title_container {
    display: none !important;
}

/* General Type CSS - Ends*/
[aria-label="Continue Shopping"] {
  color: transparent !important;
  position: relative;
}

[aria-label="Continue Shopping"]:after {
  color: #000;
  content: 'Shop';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 100%;
  padding-left: 0%;
}
The solution I found is to add this to your settings.json file to tell VS Code to use the default HTML formatter instead of Prettier:

{
  "[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
  },
}
<div class="container">
   <p>Some long text goes here. Some long text goes here. Some long text goes here.</p>
</div>

<style>
   .container {
      width: 200px;
      height: 100px;
      border: 1px solid black;
      overflow: auto;
   }
</style>
<div class="container">
   <p>Some long text goes here. Some long text goes here. Some long text goes here.</p>
</div>

<style>
   .container {
      width: 200px;
      height: 100px;
      border: 1px solid black;
      overflow: scroll;
   }
</style>
<div class="container">
   <p>Some long text goes here. Some long text goes here. Some long text goes here.</p>
</div>

<style>
   .container {
      width: 200px;
      height: 100px;
      border: 1px solid black;
      overflow: hidden;
   }
</style>
<div class="container">
   <p>Some long text goes here. Some long text goes here. Some long text goes here.</p>
</div>

<style>
   .container {
      width: 200px;
      height: 100px;
      border: 1px solid black;
   }
</style>
<div id="hs_cos_wrapper_widget_1606345913489" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_module" style="" data-hs-cos-general-type="widget" data-hs-cos-type="module"><div class="b-columns b-columns--columns-left b-columns--no-spacing">
    <div class="b-columns__container scheme--darkv2">
        
        <div class="b-columns__columns" data-cols="3">
            
                <div class="b-columns__column">
                    <div class="h-wysiwyg-html">
                        <h6>It's out now</h6>
<h1 style="margin-top: 0;">All new Qt 6</h1>
<a href="/download?hsLang=en" class="c-btn" rel="noopener" target="_blank"><span>Download now</span></a> &nbsp; &nbsp; <a href="https://www.youtube.com/watch?v=TodEc77i4t4" class="c-btn--small" rel="noopener" target="_blank">Watch video</a>
                    </div>
                </div>
            
        </div>
    </div>
</div></div>
/* Use */ 
visibility: hidden 
/* when you want to hide an element from view but still want it to occupy space on the page. This can be useful when you want to reveal the element later or when you want to maintain the layout of the page. */

/* Use */
display: none 
/* when you want to completely remove an element from the page and don’t want it to occupy any space. This can be useful when you want to completely hide an element and don’t plan to reveal it later. */
@import-normalize; /* bring in normalize.css styles */

/* rest of app styles */
@media (min-width:320px) { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ }

@media (min-width:480px) { /* smartphones, Android phones, landscape iPhone */ }

@media (min-width:600px) { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ }

@media (min-width:801px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }

@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }

@media (min-width:1281px) { /* hi-res laptops and desktops */ }
#container {
    position: relative;
}
#inner_item {
    position: absolute;
    bottom: 0;
}
SELECT Id, Name, CreatedById, CreatedDate, CEC_Created_By__c, LastModifiedDate, LastModifiedById, cg__Case__c, cg__Content_Type__c, cg__Description__c, cg__File_Name__c, cg__File_Size__c, cg__File_Size_in_Bytes__c, CEC_SendNotification__c, cg__Sync_Id__c, cg__Private__c, cg__WIP__c, cg__Version_Id__c, CEC_Upload_Complete_Timestamp__c, CEC_Event_Notification_Record__c FROM cg__CaseFile__c ORDER BY SystemModStamp DESC LIMIT 10
​/*=========VARIABLES DE COLOR============= - frios - calidos - escala de gris */

$aqua: #7fdbff;
$blue: #0074d9;
$navy: #001f3f;
$teal: #39cccc;
$green: #2ecc40;
$olive: #3d9970;
$lime: #01ff70;

$yellow: #ffdc00;
$orange: #ff851b;
$red: #ff4136;
$fuchsia: #f012be;
$purple: #b10dc9;
$maroon: #85144b;

$white: #ffffff;
$silver: #dddddd;
$gray: #aaaaaa;
$black: #111111;
/*=========FIN VARIABLES DE COLOR============= - frios - calidos - escala de gris */
/*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */
html,
body,
p,
ol,
ul,
li,
dl,
dt,
dd,
blockquote,
figure,
fieldset,
legend,
textarea,
pre,
iframe,
hr,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
  font-weight: normal;
}

ul {
  list-style: none;
}

button,
input,
select {
  margin: 0;
}

html {
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit;
}

img,
video {
  height: auto;
  max-width: 100%;
}

iframe {
  border: 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}
/*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */

/*
Document
========
*/

/**
Use a better box model (opinionated).
*/

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

/**
Use a more readable tab size (opinionated).
*/

html {
	-moz-tab-size: 4;
	tab-size: 4;
}

/**
1. Correct the line height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
*/

html {
	line-height: 1.15; /* 1 */
	-webkit-text-size-adjust: 100%; /* 2 */
}

/*
Sections
========
*/

/**
Remove the margin in all browsers.
*/

body {
	margin: 0;
}

/**
Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
*/

body {
	font-family:
		system-ui,
		-apple-system, /* Firefox supports this but not yet `system-ui` */
		'Segoe UI',
		Roboto,
		Helvetica,
		Arial,
		sans-serif,
		'Apple Color Emoji',
		'Segoe UI Emoji';
}

/*
Grouping content
================
*/

/**
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
*/

hr {
	height: 0; /* 1 */
	color: inherit; /* 2 */
}

/*
Text-level semantics
====================
*/

/**
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr[title] {
	text-decoration: underline dotted;
}

/**
Add the correct font weight in Edge and Safari.
*/

b,
strong {
	font-weight: bolder;
}

/**
1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
2. Correct the odd 'em' font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
	font-family:
		ui-monospace,
		SFMono-Regular,
		Consolas,
		'Liberation Mono',
		Menlo,
		monospace; /* 1 */
	font-size: 1em; /* 2 */
}

/**
Add the correct font size in all browsers.
*/

small {
	font-size: 80%;
}

/**
Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
*/

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/*
Tabular data
============
*/

/**
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
*/

table {
	text-indent: 0; /* 1 */
	border-color: inherit; /* 2 */
}

/*
Forms
=====
*/

/**
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
*/

button,
input,
optgroup,
select,
textarea {
	font-family: inherit; /* 1 */
	font-size: 100%; /* 1 */
	line-height: 1.15; /* 1 */
	margin: 0; /* 2 */
}

/**
Remove the inheritance of text transform in Edge and Firefox.
1. Remove the inheritance of text transform in Firefox.
*/

button,
select { /* 1 */
	text-transform: none;
}

/**
Correct the inability to style clickable types in iOS and Safari.
*/

button,
[type='button'],
[type='reset'],
[type='submit'] {
	-webkit-appearance: button;
}

/**
Remove the inner border and padding in Firefox.
*/

::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

/**
Restore the focus styles unset by the previous rule.
*/

:-moz-focusring {
	outline: 1px dotted ButtonText;
}

/**
Remove the additional ':invalid' styles in Firefox.
See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737
*/

:-moz-ui-invalid {
	box-shadow: none;
}

/**
Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
*/

legend {
	padding: 0;
}

/**
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
	vertical-align: baseline;
}

/**
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
	height: auto;
}

/**
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
	-webkit-appearance: textfield; /* 1 */
	outline-offset: -2px; /* 2 */
}

/**
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to 'inherit' in Safari.
*/

::-webkit-file-upload-button {
	-webkit-appearance: button; /* 1 */
	font: inherit; /* 2 */
}

/*
Interactive
===========
*/

/*
Add the correct display in Chrome and Safari.
*/

summary {
	display: list-item;
}
​

​

// variables

    $active-brightness: 0.;
5
    $border-radius: 5px;

    $box-shadow: 2px 2px px;

    $color: #C40861;
8
    $color-accent: #8bee;

    $color-accent-hover: darken($color-accent, 10%);
10
    $color-bg: #fff;
11
    $color-bg-secondary: #e9e9e9; // border color

    $color-link: $color;

    $color-secondary: #663399;

    $color-secondary-accent: #9de90b;

    $color-shadow: #f4f4f4;

    $color-table: $color;

    $color-text: #67737a;

    $color-text-secondary: #353b3f;

​
20
.demo{padding: 1rem;}
$breakpoints: (

  xs: 0,

  sm: px,

  md: 76px,
5
  lg: 92px,
6
  xl: 00px
7
) !default;
8
​
9
// Viewports

$viewports: (

  // 'null' disable the viewport on a breakpoint
12
  sm: 510px,

  md: 700px,

  lg: 9px,

  xl: 1130px

) !default;

​

$color-blossom: #1d7484;

$color-fade: #982c61;
20
​

$color-bg: #f9f9f9;
// sizes

$columns:  !default;

$maxWidth: 1rem !default;

$gutter: 1rem !default;

​

*,

*::after,

*::before {

  box-sizing: box;

}

​
12
.demo {

  box-sizing: border-box;

  background-color: rgba(red, %);
15
  outline: 1px solid crimson;

  padding: 1rem;

  display: grid;

  place-content: center;

  color: red;
20
}

​

.container {
// solve css min problem ...

​

$breakpoints: (

  xs: 0,

  sm: 40px,
6
  md: 24px,

  lg: 00px,

  xl: 40px

);
10
​

$gap: (
12
  xs: 0,

  sm: 8px,
14
  md: px,

  lg: 24px,
16
  xl: 28px

) !default;

​

.wrapper {

  width: min(100% - 2rem, 1280px);

  margin-inline: auto;

}
// Breakpoints

// 'null' disable the breakpoint

$breakpoints: (

  xs: 0,

  sm: 5px,
6
  md: 76px,
7
  lg: 92px,
8
  xl: 00px
9
) !default;

​

$space-s-l: clamp(1rem, calc(-0.rem + 3.vw), 2.25rem);
12
$space-xl-2xl: clamp(3rem, calc(1.62rem + 3.85vw), 4.5rem);

​

$grid-max-width: 69.75rem;
15
$grid-gutter: var($space-s-l, clamp(1rem, calc(-0.33rem + 3.7vw), 2.25rem));

$grid-columns: 12;

​

$grid-12: repeat(12, minmax(0, 1fr));

$grid-page-width: map-get($breakpoints, "xl");

$grid-page-gutter: 5vw;
21
$grid-page-main: 2 / 3;
/* Media Queries */

$small: screen and (min-width: 0em);

$medium: screen and (min-width: 40em) and (max-width: 4em);
4
$large: screen and (min-width: em);
5
​
6
@mixin for-size($size) {
7
  @if $size == small {

    @media screen and (min-width: 40rem) { @content; }

  } @else if $size == medium {

    @media screen and (min-width: 64em) { @content; }

  } @else if $size == large {

    @media screen and (min-width: 75em) { @content; }

  }  

}

​

/*

// usage

.my-box {

  padding: 10px;
/* Import font */

@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");

​

/* General styles */

* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}

body {

  font-family: "Poppins", sans-serif;

  background-color: #090909;

  padding: 50px;

}

/* General styles end */

.container {

  max-width: 1280px;

  margin: 0 auto;

  padding: 15px;

}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-items: center;
            align-items: center;
            background-color: aqua;
            justify-content: center;
            /* text-align: center; */
            height: 100vh;
            background: url(https://images.unsplash.com/photo-1469474968028-56623f02e42e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1748&q=80);
            background-position: center;
            background-size: cover;
        
        }
        
        h1 {
            text-align: center;
        }
        
        #form {
            background-color: #c7ab9d;
            border: 2px solid rgb(4, 0, 255);
            border-radius: 10px;
            width: 400px;
            height: 300px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
        
        }
        
        
        
        h2 {
            font-size: 30px;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 5px;
        }
        
        input {
            height: 30px;
            width: 250px;
            border-radius: 5px;
            padding: 10px;
            margin: 5px;
            /* padding: 10px; */
        }
        
        input[type='submit'] {
            background-color: purple;
            text-align: center;
            align-content: center;
            color: white;
            height: 50px;
            font-size: 30px;
            width: 200px;
            padding-bottom: 20px;
            border: 0px;
        }
        
        .error {
            margin: 10px;
            color: blue;
        }
    </style>
</head>

<body>
    <h1>Form Validation</h1>
    <div id="form">
        <h2>Login Form</h2>
        <form action="" onsubmit="return validateform()">
            <input type="text" class="form" name="" id="username" placeholder="Enter Username">
            <br>
            <span id="usererror" class="error"></span>
            <br>
            <input type="password" class="form" id="password" placeholder="Enter Password">
            <br>
            <span class="error" id="passerror"></span>
            <br>
            <!-- <input type="submit" value="Pls Submit"> -->
            <button type="submit">Pls Submit</button>
        </form>
    </div>
    <script>
        let user = document.getElementById('username');
        let pass = document.getElementById('password');
        let condition1 = 0;
        let condition2 = 0;
        
        flag
        function validateform() {
        
            if (user.value == '') {
                document.getElementById('usererror').innerHTML = "User Name Blank";
                condition1 = 0;
            } else if (user.value.length < 5) {
                document.getElementById('usererror').innerHTML = "Pls Enter more than 4 Charactre"
                condition1 = 0;
        
            } else {
                document.getElementById('usererror').innerHTML = ""
                document.getElementById('usererror').style.color = "Green";
                condition1 = 1;
        
            }
            if (pass.value == '') {
                document.getElementById('passerror').innerHTML = "Password Cannot Blank";
                condition2 = 0;
        
            }
            else if (pass.value.length < 5) {
                document.getElementById('passerror').innerHTML = "Pls Enter more than 4 Charactre";
                condition2 = 0;
        
            } else {
                document.getElementById('passerror').innerHTML = "";
                document.getElementById('passerror').style.color = "Green";
                condition2 = 1;
        
            }
            if (condition1 == 1 & condition2 == 1) {
                return true;
            } else {
                return false;
            }
        }
        
    </script>
</body>

</html>
/* Belief Section */

.beliefCardsContainer{
  display: flex;
  justify-content: space-between;
  overflow: auto;
  height: auto;
  margin-top: 12px;
}

.beliefCard{
  display: flex;
  flex-direction: column;
  cursor: pointer;
  width: 377.5px;
  /* height: 396px; */
  gap: 12px;
}

.beliefCard img{
  height: 280px !important;
  object-fit: cover;
}

.beliefCard img:hover{
  transform: scale(1.02); 
}

.beliefCard h1{
  color: #000;
  font-size: 24px;
}

.beliefCard p{
  font-size: 16px;
  color: rgb(73, 76, 77);
}
<!DOCTYPE html>
<html>
  <head>
	<title>Video Picker</title>
	<link rel="stylesheet" href="style.css">
  </head>
  <body>
	<h1>Video Picker</h1>
	<form>
	  <input type="text" id="videoUrl" placeholder="Enter video URL...">
	  <button type="button" id="addVideoBtn">Add Video</button>
	</form>
	<hr>
	
	<h3 id="videoCount"></h3>

	
	<div id="videoList"></div>
	
	<script src="script.js">
	alert("If you want you can modify the UI of this project, to adapt on your needs\n" + "\nhave a great and blessed day 🤝🏼😊");

alert("Enter as many YouTube video links as you want to, and see the magic")


window.onload = function() {
const videoList = document.getElementById('videoList');
const addVideoBtn = document.getElementById('addVideoBtn');

// Load videos from LocalStorage on page load
loadVideos();

addVideoBtn.addEventListener('click', addVideo);

function addVideo() {
  const videoUrl = document.getElementById('videoUrl').value;
  const videoId = getVideoId(videoUrl);

  if (videoId) {
	const videoItem = createVideoItem(videoId);
	videoList.appendChild(videoItem);
	
	// Save video to LocalStorage
	saveVideo(videoId);
  }

  document.getElementById('videoUrl').value = '';
}

function getVideoId(url) {
  const regex = /(?:https?:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?(.+)/;
  const match = url.match(regex);

  if (match && match[1]) {
	return match[1];
  } else {
	alert('Invalid video URL');
	return null;
  }
}

function createVideoItem(videoId) {
  const videoItem = document.createElement('div');
  videoItem.className = 'video-item';
  const thumbnailUrl = `https://img.youtube.com/vi/${videoId}/mqdefault.jpg`;
  const videoUrl = `https://www.youtube.com/watch?v=${videoId}`;
  videoItem.innerHTML = `
	<a href="${videoUrl}" target="_blank">
	  <img src="${thumbnailUrl}" alt="Video thumbnail">
	  <h2>${videoId}</h2>
	</a>
	<button class="remove-video-btn">Remove</button>
  `;

  // Add event listener to the 'Remove' button
  const removeBtn = videoItem.querySelector('.remove-video-btn');

  removeBtn.addEventListener('click', () => {
	removeVideo(videoId);
	videoItem.remove();
  });

  return videoItem;
}

function removeVideo(videoId) {
  let videos = [];
  if (localStorage.getItem('videos')) {
	videos = JSON.parse(localStorage.getItem('videos'));
  }
  const index = videos.indexOf(videoId);
  if (index !== -1) {
	// Display confirmation dialog box
	const confirmed = confirm("Are you sure you want to remove this video? 😥");
	if (confirmed) {
	  // Remove video from list
	  videos.splice(index, 1);
	  localStorage.setItem('videos', JSON.stringify(videos));
	  const videoItem = document.getElementById(videoId);
	  videoList.removeChild(videoItem);
	}
  }
}


function saveVideo(videoId) {
  let videos = [];
  if (localStorage.getItem('videos')) {
	videos = JSON.parse(localStorage.getItem('videos'));
  }
  if (!videos.includes(videoId)) {
	videos.push(videoId);
	localStorage.setItem('videos', JSON.stringify(videos));
  }
}

function loadVideos() {
  if (localStorage.getItem('videos')) {
	const videos = JSON.parse(localStorage.getItem('videos'));
	const videoCount = document.getElementById('videoCount');
	videoCount.textContent = `You have ${videos.length} videos in the list.`;
	videos.forEach(videoId => {
	  const videoItem = createVideoItem(videoId);
	  videoList.appendChild(videoItem);
	});
  }
}

}
/*
The saveVideo() function takes the video ID and saves it to an array in LocalStorage. The loadVideos() function is called on page load and loads the videos from LocalStorage, creating a videoItem for each one and appending it to the videoList. This way, the user's added videos will persist even if they close and reopen the page.*/
	
	</script>
  </body>
</html>
/* inline buttons -> add class at row */
.pa-inline-buttons .et_pb_button_module_wrapper {
    display: inline-block;
}
<header>
  <nav id="navbar">
      <h1 class="logo">
          <span class="text-primary">
              <i class="fas fa-book-open"></i>Edge
          </span>Ledger
      </h1>
      <ul>
          <li><a href="#home">Home</li>
          <li><a href="#about">About</li>
      </ul>
  <nav>
<header>
<style> 
.w3rcontainer{
   border: 1px solid 
#cccfdb;
   border-radius: 2px;
} 
.hover-underline-animation {
  display: inline-block;
  position: relative;
  color: 
#0087ca;
}

.hover-underline-animation:after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: 
#0087ca;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}

.hover-underline-animation:hover:after {
  transform: scaleX(1);
  transform-origin: bottom left;
}
</style>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
    // Small tablets and large smartphones (landscape view)
    $screen-sm-min: 576px;
     
    // Small tablets (portrait view)
    $screen-md-min: 768px;
     
    // Tablets and small desktops
    $screen-lg-min: 992px;
     
    // Large tablets and desktops
    $screen-xl-min: 1200px;
     
     
    // Small devices
    @mixin sm {
       @media (min-width: #{$screen-sm-min}) {
           @content;
       }
    }
     
    // Medium devices
    @mixin md {
       @media (min-width: #{$screen-md-min}) {
           @content;
       }
    }
     
    // Large devices
    @mixin lg {
       @media (min-width: #{$screen-lg-min}) {
           @content;
       }
    }
     
    // Extra large devices
    @mixin xl {
       @media (min-width: #{$screen-xl-min}) {
           @content;
       }
    }

.bg-col-1{background-color: var(--color_1);}
.bg-col-2{background-color: var(--color_2);}
.bg-col-3{background-color: var(--color_3);}
.bg-col-4{background-color: var(--color_4);}
.txt-col-1{color: var(--color_1);}
.txt-col-2{color: var(--color_2);}
.txt-col-3{color: var(--color_3);}
.txt-col-4{color: var(--color_4);}
.font-1{font-size: 0.8rem;}
.font-2{font-size: 1.2rem;}
.font-3{font-size: 1.6rem;}
.font-4{font-size: 2rem;}
.font-5{font-size: 3rem;}
.thin{font-weight: 300;}
.normal{font-weight: 500;}
.bold {font-weight: 700;}
.bolder{font-weight: 900;}
.flex {display: flex;}
.row{flex-direction:row;}
.column{flex-direction:column;}
.center{align-items: center;}
.middle{justify-content: center;}
.between {justify-content: space-between;}
.around{justify-content: space-around;}
.gap-1{gap: 1rem;}
.gap-2{gap: 2rem;}
.gap-3{gap: 3rem;}
.block{display: block;}
.grid{display: grid;
      place-items: center;}
.absolute{position: absolute;}
.fixed{position: fixed;}
.relative{position: relative;}
.sticky {position: sticky;}
.top-0 {top: 0;}
.top-50 {top: 50%;}
.left-0{left: 0;}
.left-50{left: 50%;}
.right-0{right: 0;}
.bottom-0{bottom: 0;}
.translate {transform: translate(-50%,-50%);}
.translateX{transform: translateX(-50%);}
.translateY{transform: translateY(-50%);}
.paddingX{padding-inline:var(--padX)}
.paddingY{padding-block:var(--padY)}
.width-100{width: 100%;}
.width-50{width: 50%;}
.width-25{width: 25%;}
.txt-left{text-align: left;}
.txt-center{text-align: center;}
.txt-right{text-align: right;}
.txt-justify{text-align: justify;}
.border{border: none;}
.display{display: none;}
.outline{outline: none;}
.overflow{overflow: hidden;}
.contain{object-fit: contain;}
.cover{object-fit: cover;}
.pointer{cursor: pointer;}
.ratio{aspect-ratio: 1;}
.rounded-5{border-radius:5px;}
.rounded-10{border-radius:10px;}
.rounded-30{border-radius:30px;}
.circle{border-radius:50%;}
.inner-submenu {
    left: auto;
    max-width: 1920px;
}

@media (max-width: 768px) {
    .inner-submenu li a {
        border: none !important;
        padding: 0 !important;
    }
    
    .inner-submenu li .avia-menu-text {
        background-color: #fff !important;
        border: 1px solid #ccc !important;
        display: inline-block;
        padding: 6px 15px;
    }
    
    .inner-submenu li {
        padding: 0 !important;
    }
    
    .inner-submenu ul {
        margin: 15px 0 !important;
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
        justify-content: center;
    }
}
<link rel="stylesheet" href="https://webkit-ui.netlify.app/style.css">
 
   /* head */ 
   <head>
    <link rel="stylesheet" href="https://webkit-ui.netlify.app/style.css">
  </head>

/* left snack bar */
<div class="flex justify-around items-center pd-3 position-fixed bottom-5 left-5  rounded-s bg-green-8 text-color-grey-0 gap-1">
      <span>Can't send photo.Retry in 5 second.</span>
     <button class="bg-none text-color-grey-0 text-s" id="toast_left">
             <i class="fas fa-times-circle"></i>
     </button>
</div>

/* center sanckbar*/  
<div class="flex justify-around items-center pd-3 gap-1 position-fixed bottom-5 left-40  rounded-s bg-green-8 text-color-grey-0 ">
      <span>Can't send photo.Retry in 5 second</span>
      <button class="bg-none text-color-grey-0 text-s" id="toast_center">
              <i class="fas fa-times-circle"></i>
      </button>
</div>
/* right snackbar*/
<div class="flex justify-around items-center pd-3 position-fixed rounded-s  bottom-5 right-5 bg-green-8 text-color-grey-0 gap-1">
       <span>Can't send photo.Retry in 5 second</span>
       <button class="bg-none text-color-grey-0 text-s" id="right_center">
             <i class="fas fa-times-circle"></i>
       </button>
</div>
table { 
    border-collapse: collapse; 
}
/*
*	Menu Icons and Description
*	Please change the variable value below to update 
*	icon and description on the submenu	
*/
// Icons
$analytics:					'/wp-content/uploads/2022/11/solutions-analytics-reporting.svg';
$consumer: 					'/wp-content/uploads/2022/11/solutions-consumer-generated-content.svg';
$content: 					'/wp-content/uploads/2022/11/solutions-content-management.svg';
$segmenting: 				'/wp-content/uploads/2022/11/solutions-segmenting-personalization.svg';
$relationship: 				'/wp-content/uploads/2022/11/solutions-relationship-management.svg';  
$rewards: 					'/wp-content/uploads/2022/11/solutions-reward.svg';
$referral: 					'/wp-content/uploads/2022/11/solutions-referral-tracking.svg';
$payments: 					'/wp-content/uploads/2022/11/solutions-payments.svg';

$affiliate:					'/wp-content/uploads/2022/11/platform-affiliate-program.svg';
$ambassador: 				'/wp-content/uploads/2022/11/platform-ambassador-program.svg';
$creator: 					'/wp-content/uploads/2022/11/platform-creator-management.svg';
$customer: 					'/wp-content/uploads/2022/11/platform-customer-advocacy.svg';
$influencer: 				'/wp-content/uploads/2022/11/platform-influencer-marketing.svg';  
$refprograms: 				'/wp-content/uploads/2022/11/platform-referral-program.svg';
$loyalty: 					'/wp-content/uploads/2022/11/platform-loyalty-program.svg';

$blog:						'/wp-content/uploads/2022/11/resources-blog.svg';
$success: 					'/wp-content/uploads/2022/11/resources-success-stories.svg';
$guides: 					'/wp-content/uploads/2022/11/resources-guides-ebook.svg';
$videos: 					'/wp-content/uploads/2022/11/resources-videos.svg';
$webinars: 					'/wp-content/uploads/2022/11/resources-webinars.svg';  
$comparison: 				'/wp-content/uploads/2022/11/resources-comparison.svg';

// Description
$analytics-desc:			'Lorem ipsum dolor sit amet consetetur sadipscing.';
$consumer-desc: 			'Lorem ipsum dolor sit amet consetetur sadipscing.';
$content-desc: 				'Lorem ipsum dolor sit amet consetetur sadipscing.';
$segmenting-desc: 			'Lorem ipsum dolor sit amet consetetur sadipscing.';
$relationship-desc: 		'Lorem ipsum dolor sit amet consetetur sadipscing.';  
$rewards-desc: 				'Lorem ipsum dolor sit amet consetetur sadipscing.';
$referral-desc: 			'Lorem ipsum dolor sit amet consetetur sadipscing.';
$payments-desc: 			'Lorem ipsum dolor sit amet consetetur sadipscing.';

$affiliate-desc:			'Lorem ipsum dolor sit amet consetetur sadipscing.';
$ambassador-desc: 			'Lorem ipsum dolor sit amet consetetur sadipscing.';
$creator-desc: 				'Lorem ipsum dolor sit amet consetetur sadipscing.';
$customer-desc: 			'Lorem ipsum dolor sit amet consetetur sadipscing.';
$influencer-desc: 			'Lorem ipsum dolor sit amet consetetur sadipscing.';  
$refprograms-desc: 			'Lorem ipsum dolor sit amet consetetur sadipscing.';
$loyalty-desc: 				'Lorem ipsum dolor sit amet consetetur sadipscing.';

$blog-desc:					'Discover practice by our blog.';
$success-desc: 				'Get inspired by our success stories.';
$guides-desc: 				'Enrich knowledge with our guides & e-books.';
$videos-desc: 				'Quality courses from our videos.';
$webinars-desc: 			'Get in touch with our webinars.';  
$comparison-desc: 			'Turn into high-performance sales funnel.';


// Declare Sub-menu Icons
$menu-image: (
	"analytics": 				$analytics, 
	"consumer": 				$consumer, 
	"content": 					$content, 
	"segmenting": 				$segmenting, 
	"relationship": 			$relationship,  
	"rewards": 					$rewards,
	"referral": 				$referral,
	"payments": 				$payments,
	"affiliate":				$affiliate,					
	"ambassador":				$ambassador, 				
	"creator":					$creator, 					
	"customer":					$customer, 					
	"influencer":				$influencer, 				 
	"refprograms":				$refprograms, 				
	"loyalty":					$loyalty,
	"blog":						$blog,	
	"success":					$success, 	
	"guides":					$guides, 	
	"videos":					$videos, 	
	"webinars":					$webinars, 	
	"comparison":				$comparison 
);

// Declare Sub-menu Description
$menu-description: (
	"analytics": 				$analytics-desc, 
	"consumer": 				$consumer-desc, 
	"content": 					$content-desc, 
	"segmenting": 				$segmenting-desc, 
	"relationship": 			$relationship-desc,  
	"rewards": 					$rewards-desc,
	"referral": 				$referral-desc,
	"payments": 				$payments-desc,
	"affiliate":				$affiliate-desc,					
	"ambassador":				$ambassador-desc, 				
	"creator":					$creator-desc, 					
	"customer":					$customer-desc, 					
	"influencer":				$influencer-desc, 				 
	"refprograms":				$refprograms-desc, 				
	"loyalty":					$loyalty-desc,
	"blog":						$blog-desc,	
	"success":					$success-desc, 	
	"guides":					$guides-desc, 	
	"videos":					$videos-desc, 	
	"webinars":					$webinars-desc, 	
	"comparison":				$comparison-desc 
);
// Mixins
@mixin bc-transition{
	transition: all .3s ease-in-out;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
}
// Media Queries
$desktop: 1440px;
$tablet: 1115px;
$mobile: 860px;
$min-tablet: 1116px;
$min-mobile: 861px;
/* General */ 
body:not(.fl-builder-edit){
	a, .fl-button, .fl-button-text, .pp-button, button, input[type="submit"]{
		@include bc-transition;
	}
	@media(min-width: $min-mobile){
		.sticky-sidebar{
			 position: sticky;
			 top: 5rem;
			 align-self: start;
		}
	}
}
.fl-button-has-icon{
	i.fa-long-arrow-right::before{
		content: "";
		width: 13px;
		height: 13px;
		display: block;
		background: url('/wp-content/uploads/2022/11/arrow-button.svg') no-repeat;
		background-size: contain;
	}
} 
.fl-module-pp-logos-grid.fl-visible-desktop{
	.pp-logos-content{
		.pp-logo{
			margin-bottom: 0 !important;
		}
	} 
}
.pp-dual-button-inner{
	a.pp-button{
		transition: all .3s ease-in-out !important;
		border-radius: 24px;
		width: fit-content !important;
		padding-left: 24px !important;
		padding-right: 24px !important;
		.fa-long-arrow-right::before{
			content: "";
			width: 13px;
			height: 13px;
			display: block;
			background: url('/wp-content/uploads/2022/11/arrow-button.svg') no-repeat;
			background-size: contain;
		}
	}
	@media(max-width: $mobile){
		width: 100%;
		.pp-dual-button{
			a{
				width: 100% !important;
			}
			&.pp-dual-button-2{
				padding-top: 15px;
			}
		}
	}
} 
.bc-green-arrow{
	.pp-dual-button-inner{
		.pp-dual-button-2{
			a.pp-button{
				.fa-long-arrow-right::before{
					background: url('https://bchampiodev.wpengine.com/wp-content/uploads/2022/11/arrow-green.svg') no-repeat !important;
					background-size: contain !important;
				}
			}
		}
	}
}    
.fl-rich-text{
	p{
		margin-bottom: 0 !important;
		&:not(:first-child){
			margin-top: 22px;
		}
	}
	ul{
		margin-top: 30px;
		& >{
			li{
				&:not(:first-child){
					margin-top: 12px;
				}
			}
		}
	}
}
.gform_wrapper{
	.gform_heading{
		.gform_required_legend{
			display: none !important;
		}
	}
	form{
		.gform_body{
			.gform_fields{
				.gfield{
					&.gfield_error{
						.ginput_container{
							input{
								border-color: #E63946 !important;
							}
						}
						.ginput_container_checkbox + .validation_message{
							margin-top: 10px !important;
						}
						.validation_message{
							font-size: 14px;
							&::before{
								content: "\f06a";
								font-family: "Font Awesome 5 Pro";
								font-weight: 700;
								font-size: 14px;
								margin-right: 5px;
								vertical-align: middle;
							}
						}
					}
				}
			}
		}
	}
}
.bc-footer-form {
	form {
		.gform_body {
			.gform_fields {
				display: flex;
				flex-direction: row;
				align-items: center;
				flex-wrap: nowrap;
				background-color: #fff;
				border-radius: 25px;
				padding: 2px 4px;
				border: 1px solid #EDEDED;
				.gfield {
					&:first-child {
						flex: 0 0 60%;
					}
					&:last-child {
						flex: 0 0 40%;
						text-align: right;
					}
					label {
						display: none !important;
					}
					.ginput_container {
						input {
							background-color: transparent !important;
							padding: 15px !important;
						}
					}
					.validation_message {
						position: absolute;
						font-size: 14px;
						bottom: -30px;
						left: 24px;
					}
				}
			}
		}
	}
}
.pp-icon-list-items{
	.pp-icon-list-item{
		span.pp-list-item-icon{
			padding-top: 6px !important;
		}
	}
}  
.bc-arrow-button{
	a.fl-button{
		i::before{
			background: url('/wp-content/uploads/2022/11/arrow-green.svg') no-repeat !important;
			background-size: contain !important;
			transition: all .3s ease-in-out;
			width: 15px;
		}
	}
}  
/* Header */ 
.bc-white-header{
	background-color: #FFF !important;	
}
.bc-header{
	.fl-row-content-wrap{
		.fl-row-content{
			position: unset !important;
		}
	}
}  
header{
	&.fl-theme-builder-header-scrolled{
		background: linear-gradient(90deg, #E5F6FF 0%, #F3FBFF 100%);
		box-shadow: 0 1px 25px rgb(57 63 72 / 10%);
	}
	&.fl-theme-builder-header-shrink{
		.pp-advanced-menu{
			nav{
				ul.menu >{
					li{
						padding: 25px 0 !important;
					} 
				}
			}
		}
	}
}

@media(min-width: $min-mobile){
	.pp-advanced-menu{
		nav{
			ul.menu >{
				li{
					padding: 38px 0;
					&.menu-hide-desktop{
						@media(min-width: 861px){
							display: none;
						}
					}
					&.pp-has-submenu{
						border-bottom: 2px solid transparent;
						@include bc-transition;
						position: unset !important;
						>{
							.pp-has-submenu-container{
								a{
									.menu-item-text{
										padding-right: 20px;
										.pp-menu-toggle{
											transition: all .3s ease-in-out;
											right: 0;
										}
									}
								}
							}
						}
						&:hover{
							.pp-has-submenu-container{
								a{
									.menu-item-text{
										.pp-menu-toggle{
											transform: rotate(-180deg);
											-webkit-transform: rotate(-180deg);
											-moz-transform: rotate(-180deg);
										}
									}
								}
							}
						}
						&.bc-submenu-open{
							border-bottom-color: #53B7E2 !important;
						}
					} 
					&.pp-has-submenu.bc-submenu-open >{
						position: unset !important;
						ul.sub-menu{
							display: grid !important;
							padding: 0;
							border-top: 1px solid #dedede;
							box-shadow: 0 10px 40px rgb(0 0 0 / 5%);
							width: 100% !important;
							left: 0 !important;
							display: grid !important;
							visibility: visible !important;
							opacity: 1 !important;
							grid-template-columns: 2fr 1fr !important;
							li{
								&.submenu-main{
									padding: 40px 60px 40px 80px;
									.pp-has-submenu-container{
										a{
											padding: 0;
											font-size: 20px;
											font-weight: 600;
											cursor: default !important;
											&:hover{
												  color: #121212 !important; 
											}
										}
									}
									ul.sub-menu{
										padding-top: 5px;
										width: 100%;
										display: grid !important;
										grid-template-columns: 1fr 1fr !important;
										column-gap: 40px;
										li{
											margin-top: 25px;
											&.submenu-child{
												a{
													 padding: 0;
													 display: grid;
													 grid-template-columns: 28px auto;
													 grid-template-rows: auto;
													 column-gap: 15px;
													 grid-template-areas: 
														"icon menu"
														"icon description";  
													 transition: all .3s ease-in-out;
													.menu-item-text{
														grid-area: menu;
														line-height: 1.25;
													}
													.menu-desc{
														font-size: 14px;
														font-weight: 400;
														grid-area: description;
														margin-bottom: 0;
														margin-top: 5px;
														color: #7E7E7E !important;
													}
													.menu-image{
														background-repeat: no-repeat;
														background-size: contain;
														width: 28px;
														height: auto;
														grid-area: icon;
													}
												}
											}
											&.submenu-button{
												width: fit-content;
												padding-top: 40px;
												a{
													padding: 0;
													color: #24B75C;
													font-weight: 600 !important;
													transition: all .3s ease-in-out;
													&::after{
														content: "";
														width: 14px;
														height: 12px;
														display: inline-block;
														background: url('/wp-content/uploads/2022/11/arrow-green.svg') no-repeat;
														background-size: cover;
														margin-left: 10px;
														transition: all .3s ease-in-out;
													}
													&:hover{
														color: #25A756;
														text-decoration: underline;
														&:after{
															margin-left: 15px;
														}
													}
												}
											}
											@each $name, $glyph in $menu-image {
												&.submenu-child-#{$name}{
													.menu-image{
														background-image: url($glyph);
													}
												}
											}
											@each $name, $glyph in $menu-description {
												&.submenu-child-#{$name}{
													.menu-desc{
														&::before{
														   content: $glyph;
														}
													}
												}
											}
										}
									}
									&.submenu-main-platform{
										ul.sub-menu{
											li{
												&.submenu-button{
													position: absolute !important;
													left: 80px;
													bottom: 40px;
												}
											}
										}
									}
								}
								&.submenu-side{
									background: linear-gradient(180deg, #E5F6FF 0%, #FFFFFF 100%);
									padding: 40px 80px 40px 60px!important;
									.pp-has-submenu-container{
										a{
											font-size: 20px;
											font-weight: 600;
											padding: 0 !important;
											cursor: default !important;
											&:hover{
												  color: #121212 !important; 
											}
										}
									}
									ul.sub-menu{
										background: transparent !important;
										padding-top: 30px !important;
										width: 100%;
										display: block !important;
										li{
											&:not(:first-child){
												margin-top: 25px;
											}
											>{
												a{
													padding: 0 !important;
													transition: all .3s ease-in-out;
													display: flex;
													flex-direction: row;
													align-items: center;
													justify-content: space-between;
													&:hover{
														color: #24B75C !important;
														&:after{
															background: url('/wp-content/uploads/2022/11/arrow-green.svg') no-repeat;
															background-size: cover;
														}
													}
													&::after{
														content: "";
														display: block;
														width: 14px;
														height: 12px;
														background: url('/wp-content/uploads/2022/11/arrow-black.svg') no-repeat;
														background-size: cover;
														transition: background .3s ease-in-out;
													}
												}
											}
											&.current-menu-item{
												a{
													color: #24B75C !important;
													&::after{
														background: url('/wp-content/uploads/2022/11/arrow-green.svg') no-repeat !important;
    													background-size: cover !important;
													}
												}
											}
										}
									}
									&.submenu-side-blank{
										ul.sub-menu{
											padding-top: 0 !important;
											height: 0 !important;
											> {
												li{
													min-height: 110px !important;
													> {
														.fl-builder-content{
															padding: 0 !important;
														}
														a{
															display: none !important;
														}
													}
												}
											}
										}
										.pp-has-submenu-container{
											display: none !important;
										}
									}
								}
								.pp-menu-toggle{
									display: none !important;
								}
								ul.sub-menu{
									visibility: visible !important;
									opacity: 1 !important;
									position: unset !important;
								}
							}
						}	
					}
					&.menu-parent-resources.pp-has-submenu.bc-submenu-open{
						>{
							ul.sub-menu{
								grid-template-columns: 1.5fr 1fr !important;
							}
						}
					}
					&.current-page-parent, &.current-page-ancestor, &.current-menu-ancestor{
						>{
							.pp-has-submenu-container{
								a{
									color: #53B7E2;
									.pp-menu-toggle{
										&::before{
											border-color: #53B7E2;
										}
									}
								}
							}
						}
					}
				}
			}
		}
	}
}
 
/* Homepage */
body:not(.fl-builder-edit){
	.bc-custom-accordion-wrapper{
		position: relative;
		.bc-custom-accordion{
			width: 40%;
			padding-right: 20px;
			.pp-accordion{
				.pp-accordion-item{
					&.pp-accordion-item-active{
						.pp-accordion-button{
							border-bottom: unset !important;
							padding-bottom: 12px !important;
							span.pp-accordion-button-label{
								@media(min-width: $min-mobile){
									font-weight: 600 !important;
								}
							}
						}
					}
					.pp-accordion-button{
						span.pp-accordion-icon{
							font-size: 0 !important;
    						width: 24px !important;
							margin-right: 12px !important;
							padding-right: 0 !important;
						}
					}
					&:first-child{
						.pp-accordion-button{
							@media(min-width: $min-mobile){
								padding-top: 0 !important;
							}
						}
					}
					.pp-accordion-content{
						p{
							a{
								font-weight: 600;
								display: block;
								margin-top: 25px;
								&::after{
									content: "";
									display: inline-block;
									width: 15px;
									height: 15px;
									background: url('/wp-content/uploads/2022/11/arrow-green.svg') no-repeat;
									background-size: contain;
									margin-left: 12px;
									vertical-align: middle;
									transition: all .3s ease-in-out;
								}
								&:hover{
									&:after{
										margin-left: 16px;
									}
								}
							}
						}
						img.alignnone{
							position: absolute;
							top: 0;
							right: 0;
							margin: 0 !important;
							width: 50%; 
						}
					}
				}
			}
			&.bc-custom-accordion--right{
				float: right;
				padding-right: 0 !important;
				padding-left: 20px;
				img.alignnone{
					right: unset !important;
					left: 0;
				}
			}
		}
	}
}
.bc-objective-infobox{
	.pp-infobox-wrap{
		.pp-infobox{
			cursor: pointer;
			.pp-infobox-description{
				.pp-infobox-button{
					text-align: right !important;
					.pp-button{
						font-size: 0 !important;
						i{
							margin-left: 0 !important;
						}
					}
				}
			}
			&:hover{
				.pp-infobox-title{
					text-decoration: underline;
				}
				.pp-infobox-description{
					.pp-infobox-button{
						.pp-button{
							background-color: rgb(37, 167, 86);
						}
					}
				}
			}
		}	
	}
	&.bc-objective-infobox--unlink{
		.pp-infobox-wrap{
			.pp-infobox{
				cursor: default;
				&:hover{
					.pp-infobox-title{
						text-decoration: none;
					}
				}
			}
		}
	}
}  
.bc-testimonial-carousel{
	.pp-testimonials{
		.owl-carousel{
			.owl-stage-outer {
				width: calc(100% + 20px) !important;
				padding: 25px 0;
				.owl-item {
					margin-right: 18px !important;
					margin-left: 16px;
					.pp-content-wrapper{
						margin-bottom: 35px !important;
					}
					.pp-vertical-align{
						display: flex;
						flex-direction: row-reverse;
						justify-content: space-between;
						align-items: center;
						gap: 30px;
						width: 100%;
						.pp-title-wrapper{
							h6{
								margin-top: 0;
							}
							p{
								margin-bottom: 0;
							}
						}
						.pp-testimonials-image{
							margin-right: 0 !important;
							img{
								max-height: 45px !important;
								max-width: 100px !important;
							}
						}
					}
				}
			}
		}
	}
	&.partner-testimonial{
		.owl-carousel{
			.owl-stage-outer {
				.owl-item {
					.pp-vertical-align{
						flex-direction: row !important;
						justify-content: flex-start !important;
						gap: 15px;
					}
				}
			}
		}
	}
}   
/* Solutions */
.bc-clickable-box{
	.fl-col-content{
		cursor: pointer;
		.fl-photo{
			.fl-photo-content{
				border-radius: 16px;
				-webkit-border-radius: 16px;
				-moz-border-radius: 16px;
				-khtml-border-radius: 16px;
				overflow: hidden;
				-webkit-backface-visibility: hidden;
				-moz-backface-visibility: hidden;
				-webkit-transform: translate3d(0,0,0);
				-moz-transform: translate3d(0,0,0);
				img{
					transition: all .3s ease-in-out;
				}
			}
		}
		.bc-arrow-button{
			a.fl-button i{
				transition: all .3s ease-in-out;
			}
		}
		&:hover{
			.fl-photo-content{
				img{
					transform: scale(1.1);
				}
			}
			.fl-heading{
				text-decoration: underline;
			}
			.bc-arrow-button{
				a.fl-button i{
					margin-left: 12px;
				}
			}
		}
	}
} 
/* Footer */
footer{
	.fl-rich-text{
		a{
			text-decoration: none !important;
		}
	} 
	.pp-social-icons{
		.pp-social-icon{
			i.fa-trello::before{
				content: "";
				width: 20px;
				height: 18px;
				display: block;
				background: url('/wp-content/uploads/2022/11/social-e1669106874120.png') no-repeat;
				background-size: contain;
			}
			i.fa-linux::before{
				content: "";
				width: 20px;
				height: 18px;
				display: block;
				background: url('/wp-content/uploads/2022/11/social-1-e1669106913834.png') no-repeat;
				background-size: contain;
			}
		}
	}
	.fl-rich-text{
		p:not(:first-child){
			margin-top: 15px;
		}
		p:last-child strong{
			font-size: 9px;
			padding: 2px 8px;
			background: #F9C344;
			border-radius: 8px;
			margin-left: 5px;
			display: inline-block;
			vertical-align: middle;
			color: #121212 !important;
		}
	} 
}  
/* Accordion Basic */ 
.bc-accordion-basic{
	.pp-accordion{
		.pp-accordion-item{
			&.pp-accordion-item-active{
				.pp-accordion-button{
					border-bottom: unset !important;
					padding-bottom: 15px;
					.pp-accordion-button-icon{
						color: #53B7E2;
					}
				}
			}
		}
	}
}   
/* Resources */
.bc-resources-filter{
	.fl-rich-text{
		ul{
			padding-left: 0;
			list-style: none;
			margin: 0 !important;
			li{
				display: inline-block;
				padding: 8px 20px;
				border-radius: 24px;
				transition: all .3s ease-in-out;
				background: transparent;
				&:not(:first-child){
					margin-left: 5px;
				}
				a{
					text-decoration: none;
					transition: all .3s ease-in-out;
				}
				&:hover, &.active{
					background: #24B75C;
					a{
						color: #FFFFFF !important;
					}
				}
			}
		}
	}
	@media(max-width: $mobile){
		.fl-rich-text{
			width: 100%;
    		overflow-x: scroll;
			ul{
				width: max-content;
			}
		}
	}
}  
.bc-trans-button{
	.fl-button-has-icon{
		a.fl-button{
			i.fa-long-arrow-right::before{
				background: url('/wp-content/uploads/2022/11/arrow-green.svg') no-repeat !important;
				background-size: contain !important;
				transition: all .3s ease-in-out;
			}
			&:hover{
				i.fa-long-arrow-right::before{
					background: url('/wp-content/uploads/2022/11/arrow-button.svg') no-repeat !important;
					background-size: contain !important;
				}
			}
		}
	}
}   
/* Contact */ 
.contact-social{
	.pp-social-icons{
		.pp-social-icon{
			i.fa-rss::before {
				content: "";
				width: 24px;
				height: 18px;
				display: block;
				background: url(/wp-content/uploads/2022/11/social-e1669106874120.png) no-repeat;
				background-size:contain;
			}
		}
	}
}   
.pp-gf-content{
	.gform_wrapper{
		form.contact-form{
			.gform_body{
				.gform_fields{
					.gfield{
						@media(min-width: 861px){
							&.gf_half{
								width: 50% !important;
								display: inline-block !important;
								vertical-align: top !important;
								&.gf_left{
									padding-right: 10px;
								}
								&.gf_right{
									padding-left: 10px;
								}
							}
						}
						&:not(:last-child){
							margin-bottom: 20px;
						}
						label{
							margin-bottom: 12px !important;
						}
						.ginput_container{
							select{
								width: 100%;
								border-radius: 8px;
								appearance: none;
								-webkit-appearance: none;
								-moz-appearance: none;
								background: url('/wp-content/uploads/2022/11/arrow-nav.svg') no-repeat;
								background-size: 16px;
								background-position: 98% center;
								padding: 0 20px !important;
							}
						}
						&.hidden_label{
							legend{
								display: none !important;    
							}
						}
						.gchoice{
							label{
								font-size: 16px;
								font-weight: 400;
								margin-left: 10px;
								margin-bottom: 0 !important;
    							vertical-align: top;
							}
							input{
								margin-top: 0 !important;
								&::before{
									clip-path: polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0%,43% 62%);
								}
								&:checked{
									background: #53b7e2 !important;
								}
							}
							@media(max-width: $mobile){
								display: flex;
								flex-direction: row;
								flex-wrap: nowrap;
								align-items: flex-start;
							}
						}
						textarea{
							height: 100px;
						}
					}
				}
			}
			.gform_footer{
				padding-top: 25px;
			}
			.gform_page_footer{
				padding-top: 25px;
				text-align: right;
			}
		}
	}
}  
/* Login */
#modal-peycrqm2s81h{
	.pp-modal-header{
		.pp-modal-title {
			padding-top: 23px;
			padding-bottom: 23px;
		}
	}
	@media(max-width: $mobile){
		.pp-modal-content{
			padding: 0 !important;
			border-bottom-left-radius: 16px;
    		border-bottom-right-radius: 16px;
		}
	}
}  
.login-form-module{
	.form-title{
		font-weight: 700 !important;
	}
}
.login-form{
	.gfield--width-half{
		width: 50% !important;
		display: inline-block !important;
	}
	.bc-link{
		text-align: right;
		a{
			font-size: 14px;
			color: #0A1931;
			font-weight: 400;
		}
	}
	.bcf-account{
		.ginput_container{
			position: relative;
			&::after {
				content: "brandchamp.io";
				padding: 7px 20px;
				background: #F2F8FD;
				border-radius: 34px;
				display: inline-block;
				font-size: 16px;
				position: absolute;
				top: 5px;
				right: 5px;
			}
			input{
				padding: 5px 160px 5px 20px !important;
			}
		}
	}
	input[type="text"]{
		&::placeholder {
			font-weight: 400;
			color: #0A1931;
		}
	}
	div.hidden_label {
		label{
			display: none !important;
		}
	}
	.gchoice{
		label{
			margin-left: 5px !important;
			font-size: 14px !important;
		}
	}
	.gform_footer{
		padding-top: 15px !important;
		input[type="submit"]{
			color: #fff;
			background-color: #24b75c;
			font-family: "Archivo",sans-serif;
			font-weight: 600;
			font-size: 18px;
			line-height: 1.45;
			text-transform: none;
			border-style: none;
			border-width: 1px;
			border-color: #121212;
			border-radius: 24px;
			transition: all .3s ease-in-out;
			&:hover{
				background-color: #25a756;
			}
		}
	}
}

/* Pricing */
.bc-pricing-tabs{
	.pp-tabs{
		.pp-tabs-labels{
			width: max-content !important;
			background: #ffffff;
			padding: 5px;
			border-radius: 25px;
			box-shadow: #00000012 0 0 20px;
			.pp-tabs-label{
				border-radius: 24px;
				padding: 6px 16px;
				&:not(:last-child){
					margin-right: 5px;
				}
				&.pp-tab-active{
					.pp-tab-title{
						font-weight: 600 !important;
					}
				}
			}
		}
	}
	@media(max-width: $mobile){
		.pp-tabs{
			.pp-tabs-labels{
				width: 100% !important;
				display: flex !important;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				flex-wrap: nowrap;
				.pp-tabs-label{
					&:not(:last-child){
						margin-right: 3px;
					}
					padding: 9px 20px;
					flex: 1 1 auto;
					.pp-tab-label-flex{
						justify-content: center;
						.pp-tab-title{
							font-size: 14px !important;
						}
					}
				}
			}
			.pp-tabs-panels{
				.pp-tabs-panel{
					.pp-tabs-label {
						display: none !important;
					}
				}
			}  
		}
	}
}  
.bc-pricing-table{
	.pp-pricing-table{
		.pp-pricing-table-colset{
			display: flex !important;
			flex-direction: row;
			align-items: flex-end;
			justify-content: center;
			.pp-pricing-table-col{
				width: 30% !important;
				&.pp-pricing-table-highlight{
					width: 40% !important;
					.pp-pricing-featured-title{
						@media(min-width: 861px){
							font-size: 35px !important;
						}
						&::after{
							content: "Popular plan";
							font-size: 12px;
							color: #121212;
							padding: 7px 15px;
							background: #F9C344;
							border-radius: 24px;
							float: right;
							margin-top: 10px;
						}
					}
					.pp-pricing-table-inner-wrap{
						@media(min-width: 861px){
							.pp-pricing-table-header{
								.pp-pricing-table-title{
									font-size: 20px !important;
								}
							}
							.pp-pricing-table-features{
								padding: 20px 0;
								margin: 30px 0;
								font-size: 20px;
							}
							.pp-pricing-table-price{
								font-size: 35px !important;
								.pp-pricing-table-duration{
									opacity: 1;
									font-size: 20px !important;
									text-transform: lowercase !important;
								}
							}
						}
					}
				}
				.pp-pricing-featured-title{
					position: unset !important;
					text-align: left !important;
					h2{
						padding: 0 !important;
						font-size: inherit;
						color: inherit;
						display: inline-block;
					}
				}
				.pp-pricing-table-duration{
					text-transform: lowercase !important;
				}
				.pp-pricing-table-inner-wrap{
					padding-top: 10px;
					.pp-pricing-table-header{
						.pp-pricing-table-title{
							height: 28px !important;
						}
					}
					.pp-pricing-table-features{
						padding: 15px 0;
						border-top: 1px solid #dedede;
						border-bottom: 1px solid #dedede;
						margin: 25px 0;
					}
					.fl-button-wrap{
						margin-top: 20px;
					}
				}
			}
		}
		@media(max-width: $mobile){
			width: 100%;
    		overflow-x: scroll;
			.pp-pricing-table-colset{
				width: max-content;
				.pp-pricing-table-col{
					margin-top: 35px !important;
					width: 30% !important;
					min-width: 340px;
					&.pp-pricing-table-highlight{
						min-width: 440px;
					}
				}
			}
		}
	}
}   
.bc-pricing-enterprise{
	ul.pp-icon-list-items{
		li.pp-icon-list-item{
			display: inline-block !important;
			span.pp-list-item-icon{
				padding-top: 3px !important;
			}
			&:not(:first-child){
				margin-left: 20px;
			}
			@media(max-width: $mobile){
				display: flex !important;
				flex-direction: row;
				flex-wrap: nowrap;
				width: 100%;
				span.pp-list-item-icon{
					float: unset !important;
				}
				&:not(:first-child){
					margin-left: 0;
					margin-top: 10px;
				}
			}
		}
	}
}
/* Career Detail */
.career-share{
	.pp-social-share-inner{
		grid-template-columns: repeat(3,auto) !important;
		.pp-share-button{
			&:hover{
				filter: unset !important;
				.pp-share-button-link{
					border-color: #6EB5DE !important;
				}
			}
			.pp-share-button-link{
				width: max-content;
				padding: 10px 16px;
				gap: 8px;
				background: #FFF !important;
				border-color: #fff;
				transition: all .3s ease-in-out;
				.pp-share-button-icon{
					width: auto;
				}
				.pp-share-button-text{
					span{
						color: #121212;
					}
				}
			}
		}
	}
} 
.career-content{
	h2{
		&:first-child{
			margin-top: 0;
		}
		&:not(:first-child){
			margin-top: 60px;
			@media(max-width: $mobile){
				margin-top: 30px;
			}
		}
		margin-bottom: 30px;
		font-size: 35px;
		color: #0A1931;
		@media(max-width: $mobile){
			font-size: 30px;
		}
	}
	ul{
		padding-left: 22px;
	}
} 
.career-form{
	.ginput_container.ginput_container_fileupload{
		 border: 1px solid #dedede;
		 padding: 6px 6px !important;
		 border-radius: 8px;
		 text-align: left;
		 height: 50px;
		 background-color: #fff !important;
		 cursor: pointer;
		 overflow: hidden;
		 .validation_message {
			 display: none !important;
		 }
		input[type=file]::-webkit-file-upload-button {
			 appearance: none !important;
			 -webkit-appearance: none !important;
			 -moz-appearance: none !important;
			 margin-right: 10px;
			 background: #F2F8FD;
			 border: unset;
			 color: #121212;
			 padding: 10px 12px;
			 font-family: "general-sans" !important;
			 font-weight: 500;
			 font-size: 14px;
			 border-radius: 6px;
			 cursor: pointer;
		}
		.gform_fileupload_rules {
			 display: none;
		}
	}
	.form-title{
		font-size: 25px;
		margin: 0;
	}
	.form-description{
		font-size: 16px;
		margin-top: 8px;
		margin-bottom: 30px;
	}
	.gform_footer{
		position: relative;
		&::before{
			content: "";
			width: 13px;
			height: 13px;
			display: block;
			background: url(/wp-content/uploads/2022/11/arrow-button.svg) no-repeat;
			background-size: contain;
			position: absolute;
			top: 50%;
			right: 34%;
			transform: translateY(50%);
			@media(max-width: $mobile){
				right: 31%;
			}
		}
	}
	&.story-form{
		.gform_footer::before{
			right: 33% !important;
		}
	}
	&.webinar-form{
		.gform_footer::before{
			right: 28% !important;
		}
	}
}
.gfield_error .ginput_container.ginput_container_fileupload {
	 border-color: #e63946 !important;
}
/* Comparison */
.bc-vertical-list{
	ul{
		li{
			display: block !important;
			width: 100% !important;
			text-align: center !important;
			float: unset !important;
			&:last-child{
				padding-bottom: 0 !important;
			}
			.pp-infolist-icon-inner{
				margin: 0 auto;
			}
		}
	}
} 
.bc-comparison-wrapper{
	@media(max-width: $mobile){
		.fl-row-content{
			width: 100%;
    		overflow-x: scroll;
			>{
				.fl-col-group{
					width: max-content !important;
				}
			}
		}
	}
}
/* Single Post */
.single-terms{
	ul{
		list-style: none;
		padding-left: 0;
		margin: 0;
		li{
			display: inline-block;
			margin-right: 8px;
			a{
				padding: 8px 14px;
				border: 1px solid #53B7E2;
				border-radius: 24px;
				color: #53B7E2;
				transition: all .3s ease-in-out;
				text-decoration: none;
				&:hover{
					background: #53B7E2;
					color: #FFF;
				}
			}
		}
	}
} 
.single-top-author{
	.pp-infobox{
		.pp-infobox-title{
			margin: 0;
			@media(max-width: $mobile){
				padding-top: 10px;
			}
		}
		.pp-description-wrap{
			display: flex;
			flex-direction: row;
			align-items: center;
			column-gap: 8px;
			padding-top: 5px;
			@media(max-width: $mobile){
				justify-content: center;
			}
			p{
				margin-bottom: 0;
			}
		}
	}
} 
.bc-toc{
	.pp-toc-container{
		.pp-toc-header {
			 padding: 0 0 0 0 !important;
		}
		.pp-toc-body {
			 overflow-y: unset !important;
			ul{
				list-style: none !important;
				li{
					 border-left: 2px solid transparent;
					 padding-left: 15px;
					 line-height: 1;
					&::before{
						display: none;
					}
					&:not(:first-child){
						margin-top: 15px;
					}
					a{
						text-decoration: none !important;
					}
					&.active {
						 border-color: #24B75C !important;
						 text-align: left !important;
						 display: block !important;
						a{
							 color: #24B75C !important;
						}
					}
					@media(max-width: $mobile){
						border-color: #212121 !important;
		 				color: #212121 !important;
					}
				}
			}
		}
	}
} 
.single-share{
	.pp-share-button{
		.pp-share-button-link {
			 border-width: 0 !important;
			&:hover {
				 background: linear-gradient(180deg, #E5F6FF 30%, #FFFFFF 100%);
			}
		}
		&:hover {
			 filter: unset !important;
		}
	}
}  
.single-author{
	.pp-infobox-description{
		.pp-description-wrap{
			p{
				margin-bottom: 15px;
			}
			.author-social{
				display: inline-block;
    			margin-right: 10px;
				@media(max-width: $mobile){
					margin-right: 0;
					margin-bottom: 10px;
				}
				a{
					padding: 6px 15px;
					background-color: transparent;
					color: #121212;
					border-radius: 17px;
					border: 1px solid #DEDEDE;
					font-size: 14px;
					font-weight: 500;
					text-decoration: none;
					transition: all 0.3s ease-in-out;
					display: inline-block;
					&:hover{
						background-color: #324059;
						color: #FFF;
						border-color: #324059;
					}
				}
				& + p{
					display: none!important;
				}
				&.social-twitter{
					a::before{
						content: "\f099";
						font-family: "Font Awesome 5 Brands";
						margin-right: 8px;
						color: #1DA1F2;
						vertical-align: middle;
					}
				}
				&.social-linkedin{
					a::before{
						content: "\f08c";
						font-family: "Font Awesome 5 Brands";
						margin-right: 8px;
						color: #0077b5;
						vertical-align: middle;
					}
				}
			}
		}
	}
	@media(max-width: $mobile){
		.pp-heading-wrapper{
			padding-top: 20px;
		}
	}
} 
.single-readstory{
	.fl-button-has-icon{
		.fl-button{
			&:hover{
				i.fa-long-arrow-right{
					margin-left: 15px;
				}
			}
			i.fa-long-arrow-right{
				transition: all .3s ease-in-out;
				&::before {
					content: "";
					width: 13px;
					height: 13px;
					display: block;
					background: url('/wp-content/uploads/2022/11/arrow-green.svg') no-repeat;
					background-size: contain;
				}
			}
		}
	}
}  
.single-subscribe-form{
	.gform_footer{
		padding-top: 12px;
		position: relative;
		@media(min-width: 861px){
			&::before{
				content: "";
				width: 13px;
				height: 13px;
				display: block;
				background: url(/wp-content/uploads/2022/11/arrow-button.svg) no-repeat;
				background-size: contain;
				position: absolute;
				top: 40%;
				right: 27%;
				transform: translateY(40%);
			}
		}
	}
	.gform_confirmation_message{
		text-align: center;
		i{
			font-size: 40px;
			color: #24B75C !important;
		}
		h2{
			font-size: 35px;
			margin-top: 20px;
			margin-bottom: 0;
		}
		p{
			margin: 15px 0 0 0;
			font-size: 16px;
		}
	}
}

.single-content{
	h2{
		font-size: 35px;
		&:not(:first-child){
			margin-top: 60px;
    		margin-bottom: 20px;
		}
	}
	h3{
		font-size: 25px;
		&:not(:first-child){
			margin-top: 60px;
    		margin-bottom: 20px;
		}
	}
	h4{
		font-size: 22px;
		&:not(:first-child){
			margin-top: 60px;
    		margin-bottom: 20px;
		}
	}
	ul, ol{
		margin-top: 40px;
    	margin-bottom: 30px;
    	padding-left: 20px;
		li{
			margin-bottom: 15px;
		}
	}
	figure{
		margin-top: 40px;
		margin-bottom: 40px;
		img{
			border-radius: 16px;
		}
		figcaption{
			font-size: 16px;
			font-style: italic;
			margin-top: 20px;
		}
	}
	blockquote{
		margin-top: 40px;
		border-left-color: #53B7E2;
		padding-left: 30px;
		padding-top: 0;
		padding-bottom: 0;
		p{
			font-size: 22px;
			font-style: italic;
		}
		cite{
			margin-top: 20px !important;
			display: block;
		}
	}
} 
/* Privacy Policy, Cookie & Terms */

.legal-content{
	h2{
		font-size: 30px;
		&:not(:first-child){
			margin-top: 60px;
    		margin-bottom: 30px;
		}
	}
	ul, ol{
		margin-top: 30px;
    	margin-bottom: 30px;
    	padding-left: 20px;
		li{
			margin-bottom: 15px;
		}
	}
	&.legal-content--inside{
		ul,ol{
			padding-left: 50px;
		}
	}
} 
/* Book a Demo */
.gf_progressbar_title{
    margin-bottom: 0;
    text-align: right;
    font-size: 15px;
	@media(max-width: $mobile){
		text-align: left;
	}
}
.partial_entry_warning {
	display: none !important;
}
.book-demo-form{
	.gf_progressbar_title{
		display: none;
	}
	.gf_progressbar{
		background-color: #F3F5F7;
		.gf_progressbar_percentage{
			background: #53B7E2;
			height: 5px;
			span{
				display: none;
			}
		}
	}
	.gform_body{
		@media(min-width: 861px){
			padding-left: 90px;
			padding-right: 90px;
			padding-top: 80px;
		}
		@media(max-width: $mobile){
			padding: 30px 20px 20px 20px;
		}
		.ginput_container_checkbox{
			padding-top: 10px;
			.gfield_checkbox{
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;
				flex-wrap: wrap;
				gap: 10px 15px;
			}
		}
		.demo-title{
			margin-bottom: 40px !important;
			h1, h2{
				font-size: 50px;
			}
			p{
				font-weight: 400;
				color: #121212;
			}
		}
	}
	.gform_page_footer{
		.gform_previous_button{
			background-color: #F3F5F8 !important;
			color: #121212 !important;
			margin-right: 10px;
			transition: all .3s ease-in-out;
			&:hover{
				background-color: #24b75c !important;
				color: #FFF !important;
			}
		}
		.gform_next_button{
			background: url('https://bchampiodev.wpengine.com/wp-content/uploads/2022/11/arrow-button.svg') no-repeat !important; 
			background-size: 15px !important;
			background-position: 82% center !important;
			background-color: #24B75C !important;
			padding-right: 50px !important;
			transition: all .3s ease-in-out;
			&:hover{
				background-color: #25a756 !important;
			}
		}
	}
}
/* Partner Program */
.partner-infobox{
	@media(max-width: $mobile){
		.pp-infobox-image{
			text-align: left;
			padding-bottom: 15px;
		}
	}
}
/* Responsive */
@media(max-width: $mobile){
	.pp-hamburger-inner{
		&::before{
			display: none !important;
		}
		&::after{
			bottom: -10px !important;
		}
	}
	.pp-advanced-menu{
		nav{
			ul.pp-advanced-menu-horizontal {
				width: 100% !important;
				top: 0 !important;
				transform: translatey(0) !important;
				padding: 0 20px !important;
				> {
					li.menu-item{
						padding: 20px 0;
						border-bottom: 1px solid #dedede;
						&.menu-parent{
							.pp-has-submenu-container{
								a{
									transition: all .3s ease-in-out;
								}
							}
							&.pp-active{
								padding-bottom: 30px;
								.pp-has-submenu-container{
									a{
										span.pp-menu-toggle{
											&::before{
												border-color: #121212 !important;
											}
										}
									}
									&:hover{
										a{
											span.pp-menu-toggle{
												&::before{
													border-color: #121212 !important;
												}
											}
										}
									}
								}
							}
						}
						>{
							ul.sub-menu{
								padding-left: 15px;
								padding-top: 20px;
								li{
									padding: 0 !important;
									.pp-has-submenu-container{
										a{
											font-size: 16px;
											font-weight: 600;
											span.pp-menu-toggle{
												display: none;
											}
										}
									}
									ul.sub-menu{
										display: block !important;
										padding-top: 0;
										li{
											margin-top: 20px;
											&.submenu-button{
												display: none !important;
											}
											
										}
									}
									&.submenu-main{
										ul.sub-menu{
											li{
												&.submenu-child{
													a{
														 padding: 0;
														 display: grid;
														 grid-template-columns: 24px auto;
														 grid-template-rows: auto;
														 column-gap: 14px;
														 grid-template-areas: 
															"icon menu"
															"icon description";  
														 transition: all .3s ease-in-out;
														.menu-item-text{
															grid-area: menu;
															line-height: 1.25;
														}
														.menu-desc{
															font-size: 14px;
															font-weight: 400;
															grid-area: description;
															margin-bottom: 0;
															margin-top: 5px;
															color: #7E7E7E !important;
														}
														.menu-image{
															background-repeat: no-repeat;
															background-size: contain;
															width: 24px;
															height: auto;
															grid-area: icon;
														}
													}
												}
												@each $name, $glyph in $menu-image {
													&.submenu-child-#{$name}{
														.menu-image{
															background-image: url($glyph);
														}
													}
												}
												@each $name, $glyph in $menu-description {
													&.submenu-child-#{$name}{
														.menu-desc{
															&::before{
															   content: $glyph;
															}
														}
													}
												}
											}
										}
									}
									&.submenu-side{
										display: none !important;
										background: transparent !important;
									}
								}
							}
						}
						&.menu-login{
							border-bottom: unset !important;
							text-align: center;
							padding: 30px 0;
							font-weight: 500;
						}
						&.menu-book{
							border-bottom: unset !important;
							text-align: center;
    						padding: 0;
							a{
								width: fit-content;
								margin: 0 auto;
								padding: 9px 20px;
								background-color: #24B75C;
								color: #FFF;
								font-weight: 600;
								border-radius: 24px;
								font-size: 16px;
								&::after{
									content: "";
									width: 13px;
									height: 13px;
									display: inline-block;
									background: url(/wp-content/uploads/2022/11/arrow-button.svg) no-repeat;
									background-size: contain;
									margin-left: 8px;
    								vertical-align: middle;
								}
							}
						}
					}
				}
			}
		}
		&.menu-open{
			.pp-menu-nav{
				.mobile-upper{
					display: block;
					position: relative;
					width: 100%;
					background-color: #FFFFFF;
					height: 75px;  
					border-bottom: 1px solid #DEDEDE;
					&::before {
							content: "";
							width: 170px;
    						height: 29px;
							background-image: url('/wp-content/uploads/2022/11/brandchamp-logo.png');
							background-size: contain;
							background-repeat: no-repeat;
							background-position: center center;
							display: block;
							position: absolute;
							z-index: 999999;
							top: 20px;
							left: 15px;
					}
					.pp-menu-close-btn{
						right: 20px !important;
						top: 25px !important;
						width: 30px !important;
						height: 30px !important;
						&::before{
							height: 25px !important;
						}
						&::after{
							height: 25px !important;
						}
					}
				}
				ul.menu{
					width: 100%!important;
					top: 0!important;
					transform: translatey(0)!important;
					padding: 0 20px!important;
					position: relative;
				}
			}
		}
	}
	.bc-brand-logo{
		.pp-logos-wrapper{
			justify-content: center;
			.pp-logo{
				img{
					object-fit: contain;
				}
				&:last-child{
					margin-right: 0 !important;
				}
			}
		}
	}
	.pp-content-post-carousel{
		.owl-theme .owl-dots {
			margin-top: 30px !important;
		}	
	} 
	.pp-infobox-wrap{
		.pp-infobox.layout-5{
			.pp-icon-wrapper{
				.pp-infobox-image{
					img{
						width: 40px;
					}
				} 
			}
			.pp-infobox-title-wrapper{
				.pp-infobox-title {
					margin-top: 15px;
				}
			}
			.pp-infobox-description{
				margin-top: 10px;
			}
		}
	}
	.pp-advanced-menu-mobile-toggle.hamburger {
		padding: 0;
	}
	body:not(.fl-builder-edit){
		.bc-custom-accordion-wrapper{
			.bc-custom-accordion{
				width: 100% !important;
				overflow-x: scroll;
				min-height: 550px;
				padding-left: 0 !important;
				padding-right: 0 !important;
				.pp-accordion{
					width: fit-content;
					display: flex;
					flex-direction: row;
					.pp-accordion-item {
						flex: 0 0 auto;
						border-bottom: none !important;
						margin-right: 15px;
						.pp-accordion-button{
							padding: 9px 20px !important;
							border: 1px solid #EDEDED !important;
							background-color: #FFFFFF;
							border-radius: 26px;
							span.pp-accordion-button-label{
								font-size: 16px;
							}
						}
						.pp-accordion-content{
							position: absolute;
							top: 15%;
							left: 0;
							border-bottom: none !important;
							img.alignnone{
								position: unset !important;
								width: 400px !important;
								margin-top: 20px !important;
							}
						}
						&:first-child{
							.pp-accordion-button{
								padding-top: 9px !important;
							}
						}
						&.pp-accordion-item-active{
							.pp-accordion-button{
								padding-top: 9px !important;
								border: 1px solid #EAF8FF !important;
								background-color: #EAF8FF;
								span.pp-accordion-button-label{
									font-weight: 500 !important;
								}
							}
						}
					}
				}
			}
		}
		.bc-objective-infobox{
			overflow-x: scroll;
    		padding-bottom: 50px;
			.objective-wrapper{
				width: fit-content;
				display: flex;
				flex-direction: row;
				.fl-col {
					flex: 1 0 250px;
					&:not(:first-child){
						margin-left: 15px;
					}
					.pp-infobox{
						padding: 16px !important;
						h4.pp-infobox-title{
							font-size: 16px !important;
						}
						.pp-description-wrap{
							p{
								font-size: 14px !important;
							}
						}
					}
				}
			}
		}
		.bc-mobile-scrollable{
			overflow-x: scroll;
    		padding-bottom: 50px;
			.objective-wrapper{
				width: fit-content;
				display: flex;
				flex-direction: row;
				.fl-col {
					flex: 1 0 250px;
					&:not(:first-child){
						margin-left: 15px;
					}
				}
			}
		}
	}
	.bc-privacy-mobile{
		ul{
			list-style: none !important;
			padding-left: 0;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			margin-top: 0 !important;
			margin-bottom: 0 !important;
			li{
				margin-top: 0 !important;
			}
		}
	} 
	.bc-footer-accordion{
		.pp-accordion{
			.pp-accordion-item{
				.pp-accordion-button{
					.pp-accordion-button-label{
						font-weight: 600 !important;
					}
				}
				.pp-accordion-content{
					p:not(:first-child){
						margin-top: 15px;
					}
					p{
						strong{
							font-size: 9px;
							padding: 2px 8px;
							background: #F9C344;
							border-radius: 8px;
							margin-left: 5px;
							display: inline-block;
							vertical-align: middle;
							color: #121212 !important;
						}
					}
				}
				&.pp-accordion-item-active{
					.pp-accordion-button{
						border-bottom: none !important;
					}
				}
			}
		}
	} 
	
} // Media close
@import url("https://imaginative-tiramisu-08cf25.netlify.app");

<style>
div {
  font-size: 55px; 
  line-height: 55px; 
  text-decoration-skip-ink: none;
}
.ulsingle {
  text-decoration: underline;
}
.uldouble {
  text-decoration: double underline;
}
.ulwavy {
  text-decoration: wavy underline;
}  
</style>

<div>
  це - <span class="ulsingle">підмет</span>, 
  це - <span class="uldouble">присудок</span>,
  це - <span class="ulwavy">означення</span>
</div>
  <div class="wt-max-100">
       <input type="range" min="0" max="100" class="input-green-800 width-scaled4-8"> 
  </div>   
 <span class="text-m text-color-brown-5"><i class="fa fa-star"></i></span>
 <span class="text-m text-color-brown-5"><i class="fa fa-star"></i></span>
 <span class="text-m text-color-brown-5"><i class="fa fa-star"></i></span>
 <span class="text-m text-color-brown-5"><i class="far fa-star"></i></span>
 <span class="text-m text-color-brown-5"><i class="far fa-star"></i></span>
 <span class="text-m  text-color-grey-9"> (3/5 review)</span>
<p class="text-lg">1. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tempora, mollitia!. </p>
<p class=" text-m">2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem, quis?</p>
<p class="text-xm ">3. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rem, ipsam.</p>
<p class="text-s">4. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam, hic!</p>
<p class="text-xs ">5. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptate, reprehenderit.</p>
     <div class="text-s text-start pd-x-4 ">Text Start</div>
     <div class="text-s text-center pd-x-4 ">Text-Center</div>
     <div class="text-s text-end pd-x-4 ">Text-Left</div>
  <h1 class="text-xl">H1.Heading</h1>
  <h2 class="text-lg">H2.Heading</h2>
  <h3 class="text-m">H3.Heading</h3>
  <h4 class="text-xm">H4.Heading</h4>
  <h5 class="text-s">H5.Heading</h5>
  <h6 class="text-xs">H6.Heading</h6>
<ul class="style-none box-shadow-2 width-scaled4-8 pd-y-2"> 
    <li class="flex gap-1 pd-y-4 pd-x-5 hover-grey-200"> 
            <i class="fa-solid fa-envelope"></i>
            <Span>List Item</Span>
    </li>
    <li class="flex gap-1 pd-y-4 pd-x-5 hover-grey-200"> 
            <i class="fa-solid fa-envelope"></i>
            <Span>List Item</Span>
    </li>
    <li class="flex gap-1 pd-y-4 pd-x-5 hover-grey-200"> 
            <i class="fa-solid fa-envelope"></i>
            <Span>List Item</Span>
    </li>
    <li class="flex gap-1 pd-y-4 pd-x-5 hover-grey-200"> 
            <i class="fa-solid fa-envelope"></i>
            <Span>List Item</Span>
    </li>
    <li class="flex gap-1 pd-y-4 pd-x-5 hover-grey-200"> 
            <i class="fa-solid fa-envelope"></i>
            <Span>List Item</Span>
    </li>
    <li class="flex gap-1 pd-y-4 pd-x-5 hover-grey-200"> 
            <i class="fa-solid fa-envelope"></i>
            <Span>List Item</Span>
    </li>
</ul>
<ul class="style-none box-shadow-2 width-scaled4-8 pd-y-2">
   <li class="pd-y-4 pd-x-5 hover-grey-200">List item</li>
   <li class="pd-y-4 pd-x-5 hover-grey-200">List item</li>
   <li class="pd-y-4 pd-x-5 hover-grey-200">List item</li>
   <li class="pd-y-4 pd-x-5 hover-grey-200">List item</li>
   <li class="pd-y-4 pd-x-5 hover-grey-200">List item</li>
</ul>
 <a href="#" class="text-dec text-color-grey-9  cursor border-bottom-solid border-1 border-black-700">Link</a>
     <button class="bg-green-8 rounded-s cursor  text-color-grey-0 pd-x-5 pd-y-4 text-xm">Primary
                    </button>
    
      <button class="bg-black-5 rounded-s  cursor text-color-grey-0 pd-x-5 pd-y-4 text-xm">Secondary</button>
    
       <button class=" bg-black-0 rounded-s cursor border-green-700 border-solid border-1  text-color-green-7 pd-x-5 pd-y-4 text-xm"> Outline</button>
<div class=" m-y-8 flex flex-column">
      <label class="m-y-4 ">Email:</label>
      <input type="email" class="width-scaled4-8 pd-4 border-1 border-solid border-black-700  text-s rounded-s text-color-grey-9 " placeholder="Email Id">
</div>
<div class="m-y-8 flex flex-column">
     <label class="m-y-4">Email:</label>
     <input type="email" class=" width-scaled4-8 pd-4 border-1 border-solid border-black-700  text-s rounded-s text-color-grey-9" placeholder="Email Id">
     <span class="text-color-red-5 m-y-3">*Invalid Input </span>
</div>
<div class="m-y-8 flex flex-column">
     <label class="m-y-4">Email:</label>
     <input type="email" class=" width-scaled4-8 pd-4 border-1 border-solid border-black-700  text-s rounded-s text-color-grey-9" placeholder="Email Id">
     <span class="text-color-green-6 m-y-3">*Valid Input </span>
</div>
<div class="  width-scaled4-6  wt-max-100 m-auto">
      <div class=" flex flex-column justify-center rounded-s pd-y-3 pd-x-3 bg-black-0 box-shadow-2">
            <div class="flex flex-column m-y-6">
                  <span class="text-xm">Dialog header</span>
                  <small>Lorem ipsum dolor sit amet.</small>
            </div>
            <div class="flex justify-end items-center gap-1 m-t-2">
                 <button  class="pd-y-3 pd-x-3 text-color-grey-0 bg-red-8 cursor">close</button>
                 <button  class="pd-y-3 pd-x-3 text-color-grey-0 bg-green-7">continue</button>
            </div>
     </div>     
</div>
p {
    color: red;
}

a {
    color: blue;
}
<img src="/utilities-css/image/alex.jpg" alt="christopher-responsives-image" class="width-scaled4-6 object-content-center ht-auto rounded-L">
<img src="/utilities-css/image/hamed-darzi-Psz62UPYx1E-unsplash.jpg" alt="christopher-responsives-image" class="width-scaled4-6 object-content-center ht-auto">
 <div class="grid grid-cols-auto gap-1">
    <div class="bg-green-7 text-color-grey-0  pd-y-8 text-center ">Grid 1</div>
    <div class="bg-green-7 text-color-grey-0  pd-y-8 text-center ">Grid 2</div>
    <div class="bg-green-7 text-color-grey-0  pd-y-8 text-center ">Grid 3</div>
    <div class="bg-green-7 text-color-grey-0  pd-y-8 text-center ">Grid 4</div>
    <div class="bg-green-7 text-color-grey-0  pd-y-8 text-center ">Grid 5</div>
    <div class="bg-green-7 text-color-grey-0  pd-y-8 text-center ">Grid 6</div>
    <div class="bg-green-7 text-color-grey-0  pd-y-8 text-center ">Grid 7</div>
    <div class="bg-green-7 text-color-grey-0  pd-y-8 text-center ">Grid 8</div>
    <div class="bg-green-7 text-color-grey-0  pd-y-8 text-center ">Grid 9</div>
    <div class="bg-green-7 text-color-grey-0  pd-y-8 text-center ">Grid 10</div>
 </div>
<div class="grid grid-cols-3 gap-1">
    <div class="bg-green-7 text-color-grey-0  pd-y-8 text-center ">Grid 1</div>
    <div class="bg-green-7 text-color-grey-0  pd-y-8 text-center ">Grid 2</div>
    <div class="bg-green-7 text-color-grey-0  pd-y-8 text-center ">Grid 3</div>
</div>
<div class="grid grid-cols-2 gap-1">
          <div class="bg-green-7 text-color-grey-0  pd-y-8 text-center ">Grid 1</div>
          <div class="bg-green-7 text-color-grey-0  pd-y-8 text-center ">Grid 2</div>
</div>
<div class=" position-rel width-scaled-8  m-auto box-shadow-1 ">
     <figure>
       <img src="/utilities-css/image/luis-quintero-3qqiMT2LdR8-unsplash.jpg" alt="" srcset="" class="wt-100 height-auto rounded-top-2 rounded-top-2">
     </figure>
     <div class="position-ab flex justify-center items-center top-0 ht-100 bg-overlay z-index-2 wt-100 text-color-grey-0 text-bold text-m">
          <p>Out of Stock</p>
     </div>
   <div class="pd-x-4">
       <div class="flex flex-column m-y-4">
          <h3> Levis black</h3>
          <small class="text-color-grey-2">T-Shirt</small>
       </div>
       <div class="m-y-4">
          <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Est saepe accusamus, autem vitae expedita sunt ab excepturi sint, laudantium culpa quas omnis perspiciatis corrupti eligendi qui placeat. Cupiditate, libero fugiat?</p>
       </div>
       <div class="m-y-4">
           <span class="text-bold">₹399.00</span>
       </div>
       <div class="flex flex-column gap-1 m-y-4">
           <button class="bg-black-6 text-color-grey-0 cursor pd-y-4"> Add To Cart</button>
           <button class=" bg-green-8 text-color-grey-0 cursor pd-y-4">Buy Now</button>
       </div>
  </div>
  <div class="position-ab top-0 right-0 text-color-grey-4">
     <i class="fa-solid fa-square-xmark fa-2x"></i>
  </div>
<div class=" position-rel flex items-center justify-btw width-scaled4-8 box-shadow-1 ">
           <figure class="flex-1">
                   <img src="/utilities-css/image/Levis-s.png" alt="Vertical-card" srcset="" class=" object-content-center">
           </figure>
     <div class="pd-x-4 flex-1">
          <div class="flex flex-column m-y-4">
               <h3> Levis black</h3>
               <small class="text-color-grey-2">T-Shirt</small>
          </div>
          <div class="m-y-4">
               <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Est saepe accusamus, autem vitae expedita sunt ab excepturi sint, laudantium culpa quas omnis perspiciatis corrupti eligendi qui placeat. Cupiditate, libero fugiat?</p>
          </div>
          <div class="m-y-4">
               <span class="text-bold">₹399.00</span>
          </div>
          <div class="flex flex-column gap-1 m-y-4">
               <button class=" bg-green-8 text-color-grey-0 cursor pd-y-4">Buy Now</button>
          </div>
     </div>
     <div class="position-ab top-0 right-0 ">
          <button>
                <i class="fa-solid fa-square-xmark fa-2x text-color-grey-3"></i>
          </button> 
     </div>
</div>
<div class=" position-rel flex items-center width-scaled4-8 box-shadow-1 ">
  <figure class="flex-1">
     <img src="/utilities-css/image/Levis-s.png" alt="Vertical-card" srcset="" class=" object-content-center">
  </figure>
  <div class="pd-x-4 flex-1  wt-60 justify-even  ">
      <div class="flex flex-column m-y-4">
           <h3> Levis black</h3>
           <small class="text-color-grey-4">T-Shirt</small>
      </div>
      <div class="m-y-4">
           <span class="text-bold text-m">₹399.00</span>
      </div>
      <div class="flex flex-column gap-1 m-y-4">
           <button class=" bg-green-8 text-color-grey-0 cursor pd-y-4">Buy Now</button>
      </div>
   </div>
  <div class="position-ab top-0 right-0 ">
       <button>
            <i class="fa-solid fa-square-xmark fa-2x text-color-grey-3"></i>
       </button> 
  </div>
</div>
<div class=" position-rel width-scaled-8  m-auto box-shadow-1 ">
     <figure>
       <img src="/utilities-css/image/luis-quintero-3qqiMT2LdR8-unsplash.jpg" alt="" srcset="" class="wt-100 height-auto rounded-top-2 rounded-top-2">
     </figure>
   <div class="pd-x-4">
       <div class="flex flex-column m-y-4">
          <h3> Levis black</h3>
          <small class="text-color-grey-2">T-Shirt</small>
       </div>
       <div class="m-y-4">
          <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Est saepe accusamus, autem vitae expedita sunt ab excepturi sint, laudantium culpa quas omnis perspiciatis corrupti eligendi qui placeat. Cupiditate, libero fugiat?</p>
       </div>
       <div class="m-y-4">
           <span class="text-bold">₹399.00</span>
       </div>
       <div class="flex flex-column gap-1 m-y-4">
           <button class="bg-black-6 text-color-grey-0 cursor pd-y-4"> Add To Cart</button>
           <button class=" bg-green-8 text-color-grey-0 cursor pd-y-4">Buy Now</button>
       </div>
  </div>
  <div class="position-ab top-0 right-0 text-color-grey-4">
     <i class="fa-solid fa-square-xmark fa-2x"></i>
  </div>
</div>
<div class="box-shadow-1 m-auto pd-5 flex width-scaled-8 flex-column m-y-8 rounded-s position-rel">
 <div class="flex flex-column">
    <h4>Cards Title</h4>
    <small>Text Secondary</small>
 </div>
 <div class="m-y-5"> 
     <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vel, minus recusandae aut est reiciendis voluptates odit veritatis doloribus delectus beatae culpa fugiat eaque eveniet? Cum, voluptas beatae earum quia similique consequuntur minima optio minus animi aliquam impedit placeat dignissimos quod, dolorem facere iusto! Excepturi natus obcaecati doloribus consectetur eveniet ipsum.</p>
 </div>
  <div class="position-ab top-5 right-5">
     <i class="fas fa-heart text-color-red-5 cursor"></i>
  </div>
</div>
.live-demo-containter {
    background: #004188;
    padding-top: 2.5rem;
    position: relative;
    margin: 0 0 30px 0;
}
.live-demo-containter::after {
    content: "";
    background: #004188;
    position: absolute;
    left: 50%;
    top: 0px;
    width: 100vw;
    transform: translate(-50%,0);
    height: 100%;
    z-index: -1;
}
<div class=" position-rel flex justify-end">
       <img src="/utilities-css/image/christopher-campbell-rDEOVtE7vOs-unsplash.jpg" class="width-6 height-6rem object-fit-cover rounded-full" alt="">
       <span class="position-ab  bg-brown-5 width-1 height-1rem rounded-full top-0 right-10">              </span>
</div>
<div class=" position-rel flex justify-end">
       <img src="/utilities-css/image/christopher-campbell-rDEOVtE7vOs-unsplash.jpg" class="width-6 height-6rem object-fit-cover rounded-full" alt="">
       <span class="position-ab  bg-green-5 width-1 height-1rem rounded-full top-0 right-10">              </span>
</div>
<div class=" position-rel flex justify-end">
       <img src="/utilities-css/image/norway.jpg" class="width-6 height-6rem object-fit-cover rounded-full" alt="">
       <span class="position-ab  bg-red-5 width-1 height-1rem rounded-full top-0 right-10"></span>
</div>
<div class="  position-rel text-color-green-7">
        <i class="fas fa-envelope fa-2x "> </i>
        <span class="flex justify-center items-center text-color-grey-0 pd-4 width-1 height-1rem  position-ab bg-brown-7 rounded-full  text-s top--50 right--50 text-s  ">4</span>
</div>
<div class=" position-rel text-color-green-7">
        <i class="fas fa-envelope fa-2x"> </i>
        <span class=" flex justify-center items-center text-color-grey-0  position-ab  width-2 height-2rem bg-brown-7 rounded-full top--50 right--50 text-s">24</span>
</div>
<div class=" position-rel text-color-green-7">
        <i class="fas fa-envelope fa-2x "> </i>
        <span class="flex justify-center items-center text-s bg-brown-7 position-ab rounded-full  width-2 height-2rem top--50 right--50 text-color-grey-0" >124</span>
</div>
 <span class="flex justify-center items-center text-lg width-8 height-8rem bg-green-7 object-fit-cover rounded-full" >M</span>
<span class="flex justify-center items-center text-m width-6 height-6rem bg-green-7 object-fit-cover rounded-full" >G</span>
<span class="flex justify-center items-center text-xm width-4 height-4rem bg-green-7 object-fit-cover rounded-full" >D</span>
<img class="width-8 height-8rem object-fit-cover rounded-full" src="/utilities css/image/christopher-campbell-rDEOVtE7vOs-unsplash.jpg" alt="">
<img class="width-6 height-6rem object-fit-cover rounded-full" src="/utilities-css/image/christopher-campbell-rDEOVtE7vOs-unsplash.jpg" alt="">
<img class="width-4 height-4rem object-fit-cover rounded-full" src="/utilities-css/image/christopher-campbell-rDEOVtE7vOs-unsplash.jpg" alt="">
.levitation {
  width: 20%;
  transform: rotate(15deg);
  filter: drop-shadow(22px -15px 5px rgba(0, 0, 0, 0.5));
  animation: bouge 8s infinite alternate-reverse;
}

@keyframes bouge {
  /*starting point and angle (same angle as choosen into .levitation)*/
  from {
    transform: translateY(0px) rotate(15deg);
  }
  /* ending point and angle */
  to {
    transform: translateY(50px) rotate(30deg);
  }
}
$(".acc:first-child h6").addClass('active');
  $(".acc:first-child .answer").addClass('active');
  $(".acc:first-child").addClass('active');
  $(".acc h6").click( function () {
      if ($(this).hasClass('active')) {
        $(this).next().slideUp(function () {
          $(this).parent().find(".active").removeClass('active');
          $(this).parent(".acc.active").removeClass('active');
        });     
      } else {
        $(this).parent().siblings().removeClass('active');
        $(this).parent().siblings().find(".active").removeClass('active');
        $(this).parent().siblings().find(".answer").slideUp(300);
        $(this).parent().siblings().find(".answer").removeClass("open");

        $(this).addClass('active');
        $(this).parent(".acc").addClass('active');
        $(this).next().addClass("open").slideDown(300);
      }
    });
.some-class {
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.14), 0px 2px 1px rgba(0, 0, 0, 0.12), 0px 1px 3px rgba(0, 0, 0, 0.2);
}
p {
    display: -webkit-box;
    max-width: 200px;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* Team Search CSS -  Starts */

.search-team {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px
}

@media (min-width: 768px) {
    .search-team {
        grid-template-columns: 3fr 1fr;
    }
}

.search-team .facetwp-search,
.search-team .facetwp-dropdown {
    margin: 0 !important;
    border: 1px solid var(--yellow) !important;
    width: 100% !important;
    padding: 15px !important;
    border-radius: 8px !important;
    color: #666 !important;
}

.search-team .facetwp-search::placeholder {
    color: #666 !important;
}

span.facetwp-input-wrap {
    width: 100%;
}

.search-team .facetwp-facet {
    margin-bottom: 0;
}

.search-team .facetwp-icon {
    right: 6px !important;
}

.search-team .facetwp-reset {
    border: none;
    background-color: #222;
    display: inline-block;
    color: #fff;
    border-radius: 5px;
    width: 100%;
    font-size: 18px;
    line-height: 18px;
    min-height: 50px;
}

/* Team Search CSS -  End */
<div class="bg-green-2 text-color-green-9 flex justify-btw items-center rounded-s  pd-x-8 pd-y-5 ">
       <span class=""><i class="fa-solid fa-circle-check pd-r-5"></i>A simple success alert—check it out!</span> 
        <span><i class="fa-solid fa-xmark"></i></span>
 </div>
 <div class="bg-red-2 flex items-center text-color-red-9 justify-btw   rounded-s  pd-x-8 pd-y-5 ">
         <span ><i class="fa-solid fa-triangle-exclamation pd-r-5"></i> A simple danger alert—check it out!</span>   
         <span><i class="fa-solid fa-xmark"></i></span>
 </div>
 <div class="bg-brown-2 flex items-center text-color-brown-9 justify-btw rounded-s pd-x-8 pd-y-5 ">
         <span class="pd-r-5"><i class="fa-solid fa-circle-exclamation pd-r-5"></i>A simple warning alert—check it out!</span> 
         <span><i class="fa-solid fa-xmark"></i></span>
 </div>
pre {white-space: pre-wrap;
     word-wrap: break-word; // für die dahingeschiedenen IE-Versionen
     }
copy
.masked-overflow {
    /* scroll bar width, for use in mask calculations */
    --scrollbar-width: 8px;

    /* mask fade distance, for use in mask calculations */
    --mask-height: 32px;

    /* If content exceeds height of container, overflow! */
    overflow-y: auto;

    /* Our height limit */
    height: 300px;

    /* Need to make sure container has bottom space,
  otherwise content at the bottom is always faded out */
    padding-bottom: var(--mask-height);

    /* Keep some space between content and scrollbar */
    padding-right: 20px;

    /* The CSS mask */

    /* The content mask is a linear gradient from top to bottom */
    --mask-image-content: linear-gradient(
        to bottom,
        transparent,
        black var(--mask-height),
        black calc(100% - var(--mask-height)),
        transparent
    );

    /* Here we scale the content gradient to the width of the container 
  minus the scrollbar width. The height is the full container height */
    --mask-size-content: calc(100% - var(--scrollbar-width)) 100%;

    /* The scrollbar mask is a black pixel */
    --mask-image-scrollbar: linear-gradient(black, black);

    /* The width of our black pixel is the width of the scrollbar.
  The height is the full container height */
    --mask-size-scrollbar: var(--scrollbar-width) 100%;

    /* Apply the mask image and mask size variables */
    mask-image: var(--mask-image-content), var(--mask-image-scrollbar);
    mask-size: var(--mask-size-content), var(--mask-size-scrollbar);

    /* Position the content gradient in the top left, and the 
  scroll gradient in the top right */
    mask-position: 0 0, 100% 0;

    /* We don't repeat our mask images */
    mask-repeat: no-repeat, no-repeat;
}
    <div class="container">
        <div class="inner">test</div>
        <div class="inner">test</div>
        <div class="inner">tset</div>
        <div class="inner">tset</div>
        <div class="inner">tset</div>
        <div class="inner">tset</div>
        <div class="inner">tset</div>
        <div class="inner">tset</div>
        <div class="inner">tset</div>
    </div>
.container{
    display: flex;
    justify-content: center;
    gap: 2px;
    border: 2px solid black;
    width: 100%;
    flex-wrap: wrap;
}

.inner{
    background-color: aqua;
    width: 24%;
    border: 2px solid black;
}
<div class="bg-green-2 text-color-green-9 flex items-center rounded-s  pd-x-8 pd-y-5 ">
    <span class="pd-r-5"><i class="fa-solid fa-circle-check"></i></span>
    A simple success alert—check it out!
</div>

<div class="bg-red-2 flex items-center text-color-red-9  rounded-s  pd-x-8 pd-y-5 ">
    <span class="pd-r-5"><i class="fa-solid fa-triangle-exclamation"></i></span>
    A simple danger alert—check it out!
</div>

<div class="bg-brown-2 flex items-center text-color-brown-9  rounded-s   pd-x-8 pd-y-5 ">
    <span class="pd-r-5"><i class="fa-solid fa-circle-exclamation"></i></span>
    A simple warning alert—check it out!
</div>
     <div class="bg-green-2 text-color-green-9 rounded-s  pd-x-8 pd-y-5 ">
                    A simple success alert—check it out!
     </div>
      <div class="bg-red-2 text-color-red-9  rounded-s  pd-x-8 pd-y-5 ">
                    A simple danger alert—check it out!
      </div>
      <div class="bg-brown-2 text-color-brown-9  rounded-s   pd-x-8 pd-y-5 ">
                    A simple warning alert—check it out!
      </div>
<!DOCTYPE html> 
<html lang="en"> 
  <head>
    <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 			 		
    <title>Document</title>
    <style>
      html {
        height: 100%;
      }
      body {
        margin:0; 
        padding:0;
        font-family: sans-serif;
        background: linear-gradient(#141e30, #243b55);
      }
      .login-box { 
        position: absolute;
        top: 50%;
        left: 50%;
        width: 400px;
        padding: 40px;
        transform: translate(-50%, -50%); 
        background: rgba(0,0,0, .5); 
        box-sizing: border-box;
        box-shadow: 0 15px 25px rgba(0, 0,0, .6);
        border-radius: 10px;
      }

      .login-box h2 { 
        margin: 0 0 30px;
        padding: 0; 
        color:#fff;
        text-align: center;
      }

      .login-box .user-box {
        position: relative;
      }

      .login-box .user-box input { 
        width: 100%;
        padding: 10px 0; 
        font-size: 16px;
        color: #fff;
        margin-bottom: 30px;
        border: none;
        border-bottom: 1px solid #fff; 
        outline: none;
        background: transparent;
      }

      .login-box .user-box label { 
        position: absolute;
        top: 0;
        left: 0;
        padding: 10px 0; 
        font-size: 16px;
        color: #fff;
        pointer-events: none;
        transition: .55;
      }

      .login-box .user-box input:focus ~ label,
      .login-box .user-box input:valid ~ label {
        top: -20px;
        left: 0;
        color: #03e9f4; 
        font-size: 12px;
      }

      .login-box form a {
        position: relative;
        display: inline-block;
        padding: 10px 20px;
        color: #03e9f4; 
        font-size: 16px;
        text-decoration: none;
        text-transform: uppercase;
        overflow: hidden;
        transition: .5s; 
        margin-top: 40px;
        letter-spacing: 4px
      }

      .login-box a:hover { 
        background: #039ef4;
        color: #fff;
        border-radius: 5px;
        box-shadow: 0 0 5px #03e9f4, 
                    0 0 25px #03e9f4, 
                    0 0 50px #03e9f4, 
                    0 0 100px #03e9f4;
      }

      .login-box a span { 
        position: absolute;
        display: block;
      }

      .login-box a span:nth-child(1) { 
        top: 0;
        left: -100%;
        width: 100%;
        height: 2px;
        background: linear-gradient(90deg, transparent, #03e9f4);
        animation: btn-anim1 10s linear infinite;
      }

      @keyframes btn-anim1 {
        0% {
          left: -100%;
        }
        50%,100% {
          left: 100%;
        }
      }   
          
      .login-box a span:nth-child(2) { 
        top: -100%;
        right: 0;
        width: 2px;
        height: 100%;
        background: linear-gradient(180deg, transparent, #03e9f4);
        animation: btn-anim2 10s linear infinite;
        animation-delay: -7.5s
      }
      
      @keyframes btn-anim2 {
        0% {
          top: -100%;
        }
        50%,100% { 
          top: 100%;
        }
      }

      .login-box a span:nth-child(3) {
        bottom: 0;
        right: -100%;
        width: 100%;
        height: 2px;
        background: linear-gradient(270deg, transparent, #03e9f4);
        animation: btn-anim3 10s linear infinite;
        animation-delay: -5s
      }

      @keyframes btn-anim3 {
        0% {
          right: -100%;
        }
        50%,100% {
          right: 100%;
        } 
      }

      .login-box a span:nth-child(4) {
        bottom: -100%;
        left: 0;
        width: 2px;
        height: 100%;
        background: linear-gradient(360deg, transparent, #03e9f4);
        animation: btn-anim4 10s linear infinite;
        animation-delay: -2.5s
      }

      @keyframes btn-anim4 {
        0% {
          bottom: -100%;
        }
        50%,100% {
          bottom: 100%;
        } 
      }
    </style> 
  </head> 
  <body>
    <div class="login-box"> 
      <h2>Login</h2> 
      <form>
        <div class="user-box">
          <input type-"text" name="" required=""> 
          <label>Username</label> 
        </div> 
        <div class="user-box"> 
          <input type="password" name="" required="">
        <label>Password</label>
        </div>
        <div class="user-box"> 
          <a>
            LOGIN
            <span></span>
            <span></span>
            <span></span>
            <span></span>
          </a>
      </form>
    </div>
  </body>
</html>
<!DOCTYPE html> 
<html lang="en"> 
  <head>
	<meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" /> 			 		
  <title>Document</title>
	<style>
		.animate-charcter {
      text-transform: uppercase;
      background: linear-gradient(
        -225deg,
        #231557 0%,
        #44107a 29%,
        #ff1361 67%,
        #fff800 100%
      );

      background-size: auto auto; 
      background-clip: border-box; 
      background-size: 200% auto;
        color: #fff;
        background-clip: text;
        text-fill-color: transparent;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: textclip 4s linear infinite;
        display: inline-block;
        font-size: 140px; 
    }
    @keyframes textclip {
      to {
        background-position: 200% center;
      }
    }
	</style> 
  </head> 
  <body>
    <div class="container"> 
      <div class="row">
        <div class="col-md-12 text-center">
          <h3 class="animate-charcter"> Hello, Mike!</h3> 
        </div> 	
      </div>
    </div> 
  </body>
</html>
.selector:not(*:root) {}
* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  outline: 1px solid red;
}
/* "The "clip pattern" accomplishes this task for you; hide the content visually, yet provide the content to screen readers." */

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* For a, button, and input elements use the following to select on focus */

.visually-hidden:not(:focus):not(:active) {
  /* ... */
}

/* If you need to toggle something with display:none, you can do so with the help of aria-hidden=true */

.my-component[aria-hidden="true"] {
  display: none;
}
body {
  background-image: url('#');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.container {
  width: 50%;
  height: 200px;
  overflow: hidden;
}
 
.container img {
  max-width: 100%;
  height: auto;
  display: block;
}
.pum-container {
    padding: 0px !important;
}

.pum-content.popmake-content img {
    margin-bottom: 0px;
}

@media (max-width: 780px){
        
         body .pum-container {
		width: 90% !important;
		margin: auto !important;
		left: 0 !important;
		right: 0 !important;
		padding: 0px !important;
	}

	.pum-theme-lightbox {
		text-align: center;
	}

}
html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
/* hmtl */
<!DOCTYPE html>
<html>
	<head>
		<title>Page Title</title>
	</head>
	<body>

    <article class="card">
      <div class="card-body">
       @Antonio Robles
      </div>
    </article>
	</body>
</html>


***
/* CSS */
:root {
  --border-color: linear-gradient(to right, tomato 0%, gold 100%);
  --card-color: #222;
}
.card {
  background: var(--border-color);
  aspect-ratio: 10/16;
  width: 200px;
  padding: 5px;
  border-radius: 16px;
  position: relative;
}

.card-body {
  color: wheat;
  background: var(--card-color);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  border-radius: 16px;
}
.facetwp-type-pager {
    text-align: center;
}

button.facetwp-load-more {
    padding: 12px 30px;
    border-radius: 50px;
    border: none;
    background-color: var(--maroon);
    color: #fff;
    letter-spacing: 0.5px;
}

button.facetwp-load-more:hover {
    opacity: .9;
    cursor: pointer;
}
ul {
  overflow: hidden;
  background-color: #42cde1;
  position: fixed;
  top: 0;
  margin: 0;
  padding: 0;
  width: 100%;
}
ul li {
  list-style-type: none;
  display: inline-block;
}
ul li a {
  display: block;
  color: #eeeeee;
  text-align: center;
  padding: 15px 30px 15px 20px;
  text-decoration: none;
  font-size: 18px;
  font-weight: bold;
  font-family: arial;
}
.navbar a:hover {
  color: #ffffff;
}
.container {
  padding: 18px;
  margin-top: 35px;
  height: 2000px;
}
border-radius: 50px 0px 50px 0px;
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/16.0.11/css/intlTelInput.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/16.0.11/js/intlTelInput.min.js"></script>

<div class="input-field">
    <input type="tel" id="intl_phone_number" minlength="10" />
</div>

<script>
    const phoneInputField = document.querySelector("#intl_phone_number");
    const phoneInput = window.intlTelInput(phoneInputField, {
        separateDialCode: true,
        hiddenInput: "phoneno",
        utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/16.0.11/js/utils.js"
    });
</script>
:root { /* Try one of these to start with. */
	--plum: plum; /* HEX: #dc9fdd */
	--purple: #9381ff;
	--plumdm: #ffbcff;
	--blue: royalblue;
	--lightcoral: lightcoral;
}
/* Light Mode */
.rem-reference {
/* To use one of the above color variants, replace --purple in var(--purple) with any of the above.
For example, to use the light coral color → color: var(--lightcoral) */
	color: var(--plum);
/* You can also choose other colors by replacing var(--plum) with the hex code of your chosen color.
For example, to use white → color: #fff */
	padding: 0px!important;
}
/* Dark Mode */
.dark .rem-reference {
	color: var(--plumdm);
	padding: 0px!important;
}
p.content-header {
  height: 80px;
  width: 240px;
  border: solid coral;
}
.banner {
  width: clamp(200px, 50% + 20px, 800px); /* Yes, you can do math inside clamp()! */
}
color: #FFF   !important;
.main-banner {
  background-image: url('https://www.example.com/image.jpg');
}
:root 

{

    --dark-color: rgb(0,0,0);

    --glossy-red: rgba(23, 1, , 1);

    --hidden-red: rgba(238, 17, 17, 0);

    --light-red: rgba(238, 17, 17, .5);
7
    --paths-theme: var(--very-light-red) var(--glossy-red);
8
    --planets-theme: var(--light-red) var(--light-red) var(--light-red) var(--glossy-red); 

    --very-light-red: rgba(238, 17, 17, .25);

}

*, *::after, *::before

{

    -webkit-box-sizing: border-box;

       -moz-box-sizing: border-box;

            box-sizing: border-box;

    padding: 0;
17
​

    margin: 0;
@import 'https://fonts.googleapis.com/css?family=Open+Sans:00,00'; 

%reset { margin: 0; padding: 0; }
3
%flex { display: flex; justify-content: center; align-items: center; }
4
​

@mixin dimensions($width: null, $height: null) { width: $width; min-height: $height; }

​

    html{height: 0%;}

    body{

      
10
      @extend %flex;

       font-family: 'Open Sans', sans-serif;

      width: 100%;

      min-height: 100%;

      background:linear-gradient(141deg, #0C5B5F 0%, rgba(0, 212, 3, 0.77) 75%);
15
    }

 

​

    *, *:before, *:after {
html,

body

  min-height: 0%

  

body

  background: radial-gradient(ellipse at center, #ffc0 0%, #e0ad00 100%)

​

.player

  box-shadow: 0 2px 4px -4px rgba(0, 0, 0, .4), 0 50px 45px -20px rgba(0, 0, 0, .2)
10
  border-radius: 30px

  height: 400px

  margin: 50px auto

  overflow: hidden

  position: relative

  width: 400px

  

  &__meta

    box-sizing: border-box

    font-size: 24px
20
    padding: 50px 20px
/* Global Reset */

* {

    font-family: 'Allerta', arial, Tahoma;

    box-sizing: border-box;

}

body {

    background: linear-gradient(to left, #7700aa, #800ff);
8
    text-align:center;

    color:#fff;

}

h3{

    text-shadow:1px 1px 1px #fff;

}

/* Start  styling the page */

.container-audio {

    width: 66%;

    height: auto;

    padding: px;

    border-radius: 5px;
20
    background-color: #eee;

    color: #444;

    margin: 20px auto;
.overlay {
  opacity: 0.5;
}
h1 {
  color: red;
  background-color: blue;
  foreground-color: blue
}
.caption {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: 14px;
  font-style: italic;
  line-height: 14px;
  font-weight:bold
  margin-left: 20px;
  padding: 10px;
  position: relative;
  top: 80%;
  width: 60%;
}
h1,
h2{
  font-family:Georgia
}
p{
  font-family:Helvetica
}
h1 {
  font-family: Garamond;
}
* {
  border: 1px solid red;
}

p {
  color: green;
}

h1 {
  color: maroon;
}

.title {
  color: teal;
}

.uppercase {
  text-transform: uppercase;
}

#article-title {
  font-family: Tahoma;
}

a[href*='florence'] {
  color: lightgreen;
}

a[href*='beijing'] {
  color: lightblue;
}

a[href*='seoul'] {
  color: lightpink;
}

a:hover {
  color:darkorange;
}

.heading-background {
  background-color: aqua;
}

#publish-time {
  color: lightgray;
}

h5 {
  color: yellow;
}

.author-class {
  color: pink;
}

#author-id {
  color: cornflowerblue;
}

h2.destination {
  font-family: Tahoma;
}

.description h5 {
  color: blueviolet;
}

li h4 {
  color: gold;
}

h4 {
  color: dodgerblue;
}
li,
h5 {
  font-family: monospace;
}
<link href='./style.css' rel='stylesheet'>
 
  
  //this is in css file
 p {
  color: green;
}
$("#file").change(function() {
      filename = this.files[0].name;
      $('.filename').text(filename);
    });
.message {
  background-color: var(--student-background, #fff);
  color: var(--student-color, #000);
  font-family: var(--student-font, "Times New Roman", serif);
  margin-bottom: 10px;
  padding: 10px;
}

[data-student-theme="rachel"] {
  --student-background: rgb(43, 25, 61);
  --student-color: rgb(252, 249, 249);
  --student-font: Arial, sans-serif;
}

[data-student-theme="jen"] {
  --student-background: #d55349;
  --student-color: #000;
  --student-font: Avenir, Helvetica, sans-serif;
}

[data-student-theme="tyler"] {
  --student-background: blue;
  --student-color: yellow;
  --student-font: "Comic Sans MS", "Comic Sans", cursive;
}
.highlighted {
  --highlighted-size: 30px;
}

.default {
  --default-size: 10px;

  /* Use default-size, except when highlighted-size is provided. */
  font-size: var(--highlighted-size, var(--default-size));
}
/* Skeleton */

.bubble-element.skeleton .Text, .bubble-element.skeleton .Image, .bubble-element.skeleton.HTML div {

   background:: -webkit-linear-gradient(-90deg, #edeef1 0%, #fcfcfc 50%, #edeef1 100%);

  background: linear-gradient(-90deg, #edeef1 0%, #fcfcfc 50%, #edeef1 100%);

  background-size: 400% 400%;

  -webkit-animation: SkeletonLTD 1s ease-in-out infinite;

          animation: SkeletonLTD 1s ease-in-out infinite;

}

.bubble-element.skeleton img, .bubble-element.skeleton .Button, .bubble-element.skeleton .timeago, .bubble-element.skeleton svg  {

  display: none !important;

}

.bubble-element.skeleton .Text{ 

  color: transparent  !important; 

}

@-webkit-keyframes SkeletonLTD {

0% {

    background-position: 0% 0%;

  }

  100% {

    background-position: -135% 0%;

  }

}

@keyframes SkeletonLTD {

  0% {

    background-position: 0% 0%;

  }

  100% {

    background-position: -135% 0%;

  }

}
.examples {

  transition-timing-function: linear;
  transition-timing-function: cubic-bezier(0, 0, 1, 1);

  transition-timing-function: ease;
  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

  transition-timing-function: ease-in-out;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);

  transition-timing-function: ease-in;
  transition-timing-function: cubic-bezier(0.42, 0, 1, 1);

  transition-timing-function: ease-out;
  transition-timing-function: cubic-bezier(0, 0, 0.58, 1);

}
/* At most 3 (3 or less, excluding 0) children */
ul:has(> :nth-child(-n+3):last-child) {
	outline: 1px solid red;
}

/* At most 3 (3 or less, including 0) children */
ul:not(:has(> :nth-child(3))) {
	outline: 1px solid red;
}

/* Exactly 5 children */
ul:has(> :nth-child(5):last-child) {
	outline: 2px solid blue;
}

/* At least 10 (10 or more) children */
ul:has(> :nth-child(10)) {
	outline: 2px solid green;
}

/* Between 7 and 9 children (boundaries inclusive) */
ul:has(> :nth-child(7)):has(> :nth-child(-n+9):last-child) {
	outline: 2px solid yellow;
}


/* Non-demo styles below */
@layer base {
	@layer layout {
		html {
			max-width: 84ch;
			padding: 3rem 2rem;
			margin: auto;
			line-height: 1.5;
			font-size: 1.25rem;
		}
		body {
			margin: 0;
			padding: 0;
		}
		a,
		a:visited {
			color: blue;
		}
		
		h2 {
			margin-top: 2em;
		}
	}
	
	@layer code {
		pre {
			border: 1px solid #dedede;
			padding: 1em;
			background: #f7f7f7;
			font-family: "Courier 10 Pitch", Courier, monospace;
			overflow-x: auto;
			border-left: 0.4em solid cornflowerblue;
			tab-size: 4;
		}
	}

	@layer support {
		.no-support,
		.has-support {
			margin: 1em 0;
			padding: 1em;
			border: 1px solid #ccc;
		}

		.no-support {
			background-color: #ff00002b;
			display: block;
		}
		.has-support {
			background-color: #00ff002b;
			display: none;
		}
		:is(.has-support, .no-support) > :first-child {
			margin-top: 0;
		}
		:is(.has-support, .no-support) > :last-child {
			margin-bottom: 0;
		}

		@supports(selector(:has(*))) {
			.no-support[data-support="css-has"] {
				display: none;
			}
			.has-support[data-support="css-has"] {
				display: block;
			}
		}
	}
}

@layer reset {
	
}
/* At most 3 (3 or less, excluding 0) children */
ul:has(> :nth-child(-n+3):last-child) {
	outline: 1px solid red;
}
// If the cube is directly inside the container:
#container:hover > #cube { background-color: yellow; }
// If cube is next to (after containers closing tag) the container:
#container:hover + #cube { background-color: yellow; }
// If the cube is somewhere inside the container:
#container:hover #cube { background-color: yellow; }
// If the cube is a sibling of the container:
#container:hover ~ #cube { background-color: yellow; }
[class^="Nam-"][class*="StdCss-"][class$="-Cls"]{
  color:red;
}
/*note the space after the class name---------v*/
[class^="Nam-"][class*="StdCss-"][class*="-Cls "]{
  color:blue;
}
/*       v---note the space before the class name*/
[class*=" Nam-"][class*="StdCss-"][class$="-Cls"]{
  color:green;
}
/*       v------space before and after---------v */
[class*=" Nam-"][class*="StdCss-"][class*="-Cls "]{
  color:purple;
}
div:has(p) {
  background: red;
}
/*
  <div> <!-- selected! -->
     <p></p>
  <div>

  <div></div> <!-- not selected -->
  <div> <!-- not selected -->
    <section></section>
  </div>
*/
Grab up to 30% off on our blockchain fork development Services limited time Offer ends in November 25.

For the development of many business sectors, blockchain forks are essential. However, depending on the position, the process requires the use of technology. This is why we're going to look at some of the ways that cryptocurrencies can be developed, including forking existing blockchains to create new ones.

Hivelance, a leading blockchain fork development company, creates a customizable Blockchain Fork Development on various blockchain networks such as Ethereum, Tron, and Binance Smart Chain (BSC), allowing innovators to launch their businesses faster.

visit our site for know more-

https://www.hivelance.com/blockchain-forking
Black Friday sale : Grab up to 30% off on our NFT Token development Services limited time Offer ends in November 25.

Hivelance is a reputable NFT Token development business that works with clients from all over the world and across many industry sectors. We have developed secure, efficient, and revenue-generating NFT development solutions. Hivelance is a leading NFT token development company that offering a  top-notch innovative NFT token development solutions for various businesses across multiple industries. Being the best token development company we create and launch the different types of tokens according to the client’s requirement. We make engaging non-fungible token with transparency, high-end security, and faster delivery.

visit our website for more info-

https://www.hivelance.com/nft-token-development
Grab up to 30% off on our ERC20 Token development Services limited time Offer ends in November 25.

The ERC20 Token contract is the smart contract code logic that executes the fungible token activity. When a contract is put into practise on Ethereum, it can be exchanged for any tokens with a similar value. The ERC20 token standard is used for crypto staking, voting, and the exchange of digital cash as a result. Anyone can generate ERC20 tokens and import them into Ethereum virtual machines.

Hivelance provides ERC20 token development service.  We offer an alot of options as part of our ERC20 Token development package, such as code generation, logo design, an audit of the ERC token contract, deployment to the EVM, ongoing development, security audits at regular intervals, and more. We have supported various ICO projects and helped them scale up their fundraising efforts.

https://www.hivelance.com/erc20-token-development
/* Universal Selector */

* {
    margin: 0;
    padding: 0;
    background-color: gray;
}

.container {
    margin: 100px;
    line-height: 50px;
    margin-left: 600px;
    font-size: xx-large;
}

div li:nth-child(2) {
    color: dodgerblue;
}

div li:nth-of-type(3) {
    color: red;
}
// By default, browsers will “skip” areas where the “ink” of a character crosses an underline. You can change this behavior to force the underline/overline to go through the character by setting text-decoration-skip-ink to none.

a:not([class]) {
	text-decoration-skip-ink: auto; // || none
}
//if the primary input mechanism system of the device can hover over elements with ease, we use hover
@media (hover: hover) {
    /* ... */
}

//if the primary input mechanism system of the device cannot hover over elements with ease or they can but not easily (for example a long touch is performed to emulate the hover) or there is no primary input mechanism at all, we use none
@media (hover: none) {
    /* ... */
}
//Pictures
 <picture>
       <source
    media="(max-width:599px) and (prefers-color-scheme: light)"
    srcset="images/bg-mobile-light.jpg"
    />
      <source
    media="(max-width:599px) and (prefers-color-scheme: dark)"
    srcset="images/bg-mobile-dark.jpg"
    />
      <source
    media="(min-width:600px) and (prefers-color-scheme: light)"
    srcset="images/bg-desktop-light.jpg"
    />
      <source
    media="(min-width:600px) and (prefers-color-scheme: dark)"
    srcset="images/bg-desktop-dark.jpg"
    />
      <img
    src="images/bg-mobile-light.jpg"
    aria-hidden="true"
    class="background-img"
    alt=""
    />
</picture>

//CSS
@media (prefers-color-scheme: dark) {
  :root {
    --color-primary: #25273c;
    --color-primary-text: #e4e5f1;
    --color-secondary-text: #cacde8;
    --color-deleted-text: #4d5067;
    --color-circle: #777a92;
    --color-background: #161722;
    --color-background-hover: #1c1e35;
  }
}

@media (prefers-color-scheme: light) {
  :root {
    --color-white: #ffffff;
    --color-primary: #ffffff;
    --color-primary-text: #494c6b;
    --color-secondary-text: #9394a5;
    --color-light-text: #d4d4d4;
    --color-active: #3a7cfd;
    --color-circle: #d6d6d6;
    --color-background: #fafafa;
    --color-background-hover: #ebebeb;
    --color-background-modal: rgba(73, 76, 107, 0.6);
    --color-error: #cd1237;
  }
}


//JS
let dark = window.matchMedia('(prefers-color-scheme: dark)').matches;
//Show which prefers-color-scheme user has before the page loads
window.matchMedia('(prefers-color-scheme: dark)');
if (dark) {
  //Do something
} else {
  //Do something
}
a[href="your url here"]{
    background:red;
}
[type="file"] {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  white-space: nowrap;
  width: 1px;
}
[type="file"] + label {
  /* File upload button styles */
}
[type="file"]:focus + label,
[type="file"] + label:hover {
  /* File upload hover state button styles */
}
[type="file"]:focus + label {
  /* File upload focus state button styles */
}
.iframe-container {
  overflow: hidden;
  /* 16:9 aspect ratio */
  padding-top: 56.25%;
  position: relative;
}
.iframe-container iframe {
   border: 0;
   height: 100%;
   left: 0;
   position: absolute;
   top: 0;
   width: 100%;
}
jQuery(".morelink").click(function(){
        if(jQuery(this).hasClass("less")) {
            jQuery(this).removeClass("less");
            jQuery(this).html(moretext);
        } else {
            jQuery(this).addClass("less");
            jQuery(this).html(lesstext);
        }
        jQuery(this).parent().prev().toggle();
        jQuery(this).prev().toggle();
        return false;
    });
jQuery(document).on('click', '#loadMore', function () {
        jQuery('#loading-image').show();
        jQuery(document).find('#load-data').addClass('show-overlay');
        var cat_name = jQuery('.slider-feature-section').find('.current-cat').attr('data-slug');
        data_page = jQuery(this).attr('data_page');
        jQuery(this).parents('.show-more').remove();
        jQuery.ajax({
            type: "post",
            url: TOPNZCASINOPUBLIC.ajaxurl,
            data: {
                action: "load_more",
                page: data_page,
                cat_name: cat_name
            },
            success: function (response) {
                jQuery("#load-data").append(response);
                jQuery('#loading-image').hide();
                jQuery(document).find('#load-data').removeClass('show-overlay');
            }
        });
    });
if (jQuery('.slide-wrapper').find('.slide-wrap').length > 2) {
      $('.slide-wrapper').append('<div><a href="javascript:;" class="showMore"></a></div>');
  }
  
  // If more than 2 Education items, hide the remaining
    $('.slide-wrapper .slide-wrap').slice(0,4).addClass('shown');
    $('.slide-wrapper .slide-wrap').not('.shown').hide();
    $('.load-more-slide').on('click',function(){
        $('.slide-wrapper .slide-wrap').not('.shown').toggle(300);
        $('.slide-wrapper').toggleClass('showLess');
        $('.load-more-slide').toggleClass('slide-down');
    });
@-moz-document url-prefix("https://www.notion.so/") {

.notion-board-view>div:nth-child(1)>div:nth-child(4),
.notion-board-view>div:nth-child(1)>div:nth-child(1)>div:nth-child(3) {
        display: none !important;
}
.notion-board-view > [data-block-id] > div:last-child,
.notion-board-view > [data-block-id] > div:first-child > div:last-child {
  display: none !important;
}
    
}
/**
 * Enable smooth scrolling on the whole document
 */
html {
	scroll-behavior: smooth;
}


/** Animations can cause issues for users who suffer from motion sickness and other conditions.
 * Disable smooth scrolling when users have prefers-reduced-motion enabled
 */
@media screen and (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}
- 👋 Hi, I’m @murufi

- 👀 I’m interested in ...

- 🌱 I’m currently learning ...

- 💞️ I’m looking to collaborate on ...

- 📫 How to reach me ...

​

<!---

murufi/murufi is a ✨ special ✨ repository because its `README.md` (this file) appears on your GitHub profile.

You can click the Preview link to take a look at your changes.

--->

​
<select name="state_name" class="form-control" id="checkout-state" required="">
<option value="">Select State</option>
<option value="Andaman and Nicobar Islands">Andaman and Nicobar Islands</option>
<option value="Andhra Pradesh">Andhra Pradesh</option>
<option value="Arunachal Pradesh">Arunachal Pradesh</option>
<option value="Assam">Assam</option>
<option value="Bihar">Bihar</option>
<option value="Chandigarh">Chandigarh</option>
<option value="Chhattisgarh">Chhattisgarh</option>
<option value="Dadra and Nagar Haveli">Dadra and Nagar Haveli</option>
<option value="Daman and Diu">Daman and Diu</option>
<option value="Delhi">Delhi</option>
<option value="Goa">Goa</option>
<option value="Gujarat">Gujarat</option>
<option value="Haryana">Haryana</option>
<option value="Himachal Pradesh">Himachal Pradesh</option>
<option value="Jammu and Kashmir">Jammu and Kashmir</option>
<option value="Jharkhand">Jharkhand</option>
<option value="Karnataka">Karnataka</option>
<option value="Kerala">Kerala</option>
<option value="Lakshadweep">Lakshadweep</option>
<option value="Madhya Pradesh">Madhya Pradesh</option>
<option value="Maharashtra">Maharashtra</option>
<option value="Manipur">Manipur</option>
<option value="Meghalaya">Meghalaya</option>
<option value="Mizoram">Mizoram</option>
<option value="Nagaland">Nagaland</option>
<option value="Orissa">Orissa</option>
<option value="Pondicherry">Pondicherry</option>
<option value="Punjab">Punjab</option>
<option value="Rajasthan">Rajasthan</option>
<option value="Sikkim">Sikkim</option>
<option value="Tamil Nadu">Tamil Nadu</option>
<option value="Telangana">Telangana</option>
<option value="Tripura">Tripura</option>
<option value="Uttarakhand">Uttarakhand</option>
<option value="Uttar Pradesh">Uttar Pradesh</option>
<option value="West Bengal">West Bengal</option>



</select>

Andaman and Nicobar Islands
Andhra Pradesh
Arunachal Pradesh
Assam
Bihar
Chandigarh
Chhattisgarh
Dadra and Nagar Haveli
Daman and Diu
Delhi
Goa
Gujarat
Haryana
Himachal Pradesh
Jammu and Kashmir
Jharkhand
Karnataka
Kerala
Lakshadweep
Madhya Pradesh
Maharashtra
Manipur
Meghalaya
Mizoram
Nagaland
Orissa
Pondicherry
Punjab
Rajasthan
Sikkim
Tamil Nadu
Telangana
Tripura
Uttarakhand
Uttar Pradesh
West Bengal
<form method="post" action="/cart/add" class="col-button">
            <input type="hidden" name="id" value="{{ product.variants.first.id }}" />
            <input min="1" type="hidden" id="quantity" name="quantity" value="1"/>
            <input type="submit" value="Add to cart" class="btn add-to__cart" />
          </form>

.col-button .btn.add-to__cart {  padding: 8px 10px;
font-size: 14px;
text-transform: capitalize;
letter-spacing: 1px;
margin-left:10px;
/*     margin-right:10px; */
/*     margin-top: 15px; */
}
[data-type_product_capitalize="true"] .grid-product__title {
min-height:50px;
}

@media only screen and (max-width:480px){
[data-type_product_capitalize="true"] .grid-product__title {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
}

<form method="post" action="/cart/add" class="col-button">
            <input type="hidden" name="id" value="{{ product.variants.first.id }}" />
            <input min="1" type="hidden" id="quantity" name="quantity" value="1"/>
            <input type="submit" value="{% if product.variants.first.available%}Add to cart{% else %}Sold Out{% endif%}" class="btn add-to__cart"" {% unless product.variants.first.available %}disabled{% endunless %} />
          </form>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3783.910308083909!2d-97.39088478571517!3d18.487721487428114!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x85c5bcd5ee8ba413%3A0x7919bdf4dfd04b6!2sInstituto%20Educares!5e0!3m2!1ses-419!2smx!4v1667271208223!5m2!1ses-419!2smx" width="550" height="1000" style="position:relative; top: -1050px; left: 800px;border-radius: 50px" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
/* Se personaliza margenes del mapa */



/* Boton de Enviar
<button type="submit" name="wpforms[submit]" id="wpforms-submit-92" class="wpforms-submit" data-alt-text="Enviando..." data-submit-text="Enviar" aria-live="assertive" value="wpforms-submit">Enviar</button>

<div class="wpforms-submit-container"><input type="hidden" name="wpforms[id]" value="92"><input type="hidden" name="wpforms[author]" value="1"><input type="hidden" name="wpforms[post_id]" value="16"><button type="submit" name="wpforms[submit]" id="wpforms-submit-92" class="wpforms-submit" data-alt-text="Enviando..." data-submit-text="Enviar" aria-live="assertive" value="wpforms-submit">Enviar</button><img src="https://educares.edu.mx/wp-content/plugins/wpforms-lite/assets/images/submit-spin.svg" class="wpforms-submit-spinner" style="display: none;" width="26" height="26" alt="Cargando"></div> */

<div class="wpforms-submit-container"><input type="hidden" name="wpforms[id]" value="92"><input type="hidden" name="wpforms[author]" value="1"><input type="hidden" name="wpforms[post_id]" value="16"><button type="submit" name="wpforms[submit]" id="wpforms-submit-92" class="wpforms-submit" data-alt-text="Enviando..." data-submit-text="Enviar" aria-live="assertive" value="wpforms-submit">Enviar</button><img src="https://educares.edu.mx/wp-content/plugins/wpforms-lite/assets/images/submit-spin.svg" class="wpforms-submit-spinner" style="display: none;" width="26" height="26" padding: 5px 5px alt="Cargando"></div>


.wpforms-form input[type=submit],  .wpforms-form button[type=submit] {    
  color: #fff !important;
  background-color: #FAF243 !important; 
  border-radius: 50px !important;
  max-width: 95% !important;
	height: 55px !important;
	text-align: center !important;
	Font-size: 25px !important;
	border-radius: 50px !important;
    padding: 15px !important;
    border-style: none !important;
    color: #fff !important;    
    margin: 0px 150px !important;
/* Se personaliza el botón de enviar:  1.- El color se estable en  */ }


.wpf-color-fondo-formulario {
border-radius: 50px !important;
 background: #85a441 !IMPORTANT;
padding: 2.5% 2.5% !IMPORTANT;
margin: 20px 650px 20px 0px !important;
}
 

  /* Se personaliza:  1.- SE REDONDEA LAS ESQUINAS DEL FORMULARIO  A 50PX 
  					  2.- SE ESTABLECE EL COLOR DE FONDO A :#85a441
                      3.- EL ESPACIO ENTRE EL CONTENDER Y SU CONTENIDO
                      4.- El MARGEN IZQUIERDO DEL FORMULARIO SE ESTABLECE 650PX*/ 
  
}

  .wpforms-form .wpforms-field-label {

font-size: 35px !IMPORTANT;
line-height: 2 !important;
margin: 5px 0px 5px 0px !IMPORTANT;

  /* Se personaliza:  1.- EL TAMAÑO DE LAS ETIQUETAS SE ESTABLECEN A 35PX  A 50PX 
  					  2.- LA ALTU...
                      3.- LOS MARGENES DE 12 Y 6 PM*/ 
  /*float: none;
padding: 5%;
display: block;
font-weight: 700;*/
}


.wpforms-form .wpforms-field {
padding: 20px 40PX !IMPORTANT;
clear: both;
 /* Se personaliza:  1.- EL TAMAÑO DE LAS ETIQUETAS SE ESTABLECEN A 35PX  A 50PX 
  					  2.- LA ALTU...
                      3.- LOS MARGENES DE 12 Y 6 PM*/
}

.wpforms-container input.wpforms-field-large, .wpforms-container select.wpforms-field-large, .wpforms-container .wpforms-field-row.wpforms-field-large {

  	max-width: 100% !important;
	height: 55px !important;
	text-align: center !important;
	Font-size: 20px !important;
	border-radius: 50px !important;

/* Se personaliza:  	1.- ...
  					  	2.- ...
                      	3.- ...*/
}


.wpforms-form .choices__inner {
max-width: 100% !important;
height: 55px !important;
text-align: center !important;
Font-size: 20px !important;
border-radius: 50px !important;

/*display: inline-block;
vertical-align: top;
width: 100%;
background-color: #ffffff;
padding: 4px 6px 1px;
border: 1px solid #cccccc;
border-radius: 2px;
min-height: 35px;
overflow: hidden;*/


}

.wpforms-form .wpforms-valid {
max-width: 100% !important;
height: 55px !important;
text-align: center !important;
Font-size: 20px !important;
border-radius: 50px !important;

/*display: inline-block;
vertical-align: top;
width: 100%;
background-color: #ffffff;
padding: 4px 6px 1px;
border: 1px solid #cccccc;
border-radius: 2px;
min-height: 35px;
overflow: hidden;*/
}


/*.wpforms-form .wpforms-valid {
display: inline-block;
vertical-align: top;
width: 100%;
background-color: #2D4E5E !important;
padding: 4px 6px 1px;
border: 1px solid #cccccc;
border-radius: 2px;
min-height: 35px;
overflow: hidden;
border-radius: 50px !important;
}



.wpforms-form .wpforms-field.wpforms-field-select.wpforms-field-select-style-classic {
border-radius: 100%!important;
padding: 10px 0;
clear: both;
}

*/
html {
  font-size: min(max(1rem, 4vw), 22px);
}

/* or */

body {
  font-size: clamp(100%, 1rem + 2vw, 24px);
}

/* with variables */

h1 {
  --minFontSize: 32px;
  --maxFontSize: 200px;
  --scaler: 10vw;
  font-size: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) );
}
body {
  background: rgb(34, 193, 195);
  background: linear-gradient(
    0deg,
    rgba(34, 193, 195, 1) 0%,
    rgba(8, 52, 75, 1) 100%
  );
  background-attachment: fixed;
}
/*
*	Services Menu Properties
*	Please change the variable value below to update 
*	icon and description on the Services menu	
*/
// Icons
$fractional-cto:			'/wp-content/uploads/2022/10/submenu-fractional.svg';
$app-web: 					'/wp-content/uploads/2022/10/submenu-web.svg';
$software-qa: 				'/wp-content/uploads/2022/10/submenu-software.svg';
$fractional-product: 		'/wp-content/uploads/2022/10/submenu-product.svg';
$outsourced-developer: 		'/wp-content/uploads/2022/10/submenu-developer.svg';  
$talent-recruiting: 		'/wp-content/uploads/2022/10/submenu-staffing.svg';
// Description
$fractional-cto-desc: 			"Get on-demand access to a CTO to help guide your technical vision, accelerate team-building, and improve development team operations.";
$app-web-desc:  				"Whether you’re a startup building new products or an established business upgrading existing systems, we help deliver positive outcomes."; 
$software-qa-desc: 				"Accelerate development, streamline release cycles, and eliminate roadblocks with fully-managed software testing & QA services."; 
$fractional-product-desc: 		"Get on-demand access to a product expert to help design UX, plan & prioritize your roadmap, and manage development schedules."; 
$outsourced-developer-desc: 	"Increase your development capacity & reduce administrative workloads with pre-trained engineers that are ready to deploy within weeks.";  
$talent-recruiting-desc: 		"Scale your development team & simplify the talent acquisition process with top-caliber candidates that are pre-vetted by our team.";
/* Header */
header{
	&.fl-theme-builder-header-scrolled{
		background-color: #FFF;
		box-shadow: 0 1px 25px rgb(57 63 72 / 10%);
	}
	&.fl-theme-builder-header-shrink{
		ul.menu >{
			li{
				padding: 25px 0;   
			}
		} 
	} 
	ul.menu >{
		li{
			padding-top: 30px;
    		padding-bottom: 30px;
			&.menu-item-has-children{
				.menu-item-text{
					.pp-menu-toggle{
						right: -7px !important;
						transition: all .3s ease-in-out;
					}
				}
				&:hover{
					.menu-item-text{
						.pp-menu-toggle{
							transform: rotate(180deg);
						}
					}
				}
			} 
			& >{
				
				a{
					
				}
				.pp-has-submenu-container >{
					a{
						
					}
				}
				ul.sub-menu{
					padding: 30px !important;
					transform: translateX(-40%);
					display: grid !important;
					grid-template-columns: 1fr 1fr;
					row-gap: 30px;
					column-gap: 40px;
					& >{
						li{
							& > {
								a{
									 display: grid;
									 grid-template-columns: 26px auto;
									 grid-template-rows: auto;
									 column-gap: 20px;
									 grid-template-areas: 
										"icon menu"
										"icon description";  
									 transition: all .3s ease-in-out;
									.menu-item-text{
										grid-area: menu;
    									line-height: 1.25;
									}
									.menu-desc{
										font-size: 14px;
										font-weight: 300;
										grid-area: description;
										margin-bottom: 0;
										margin-top: 5px;
										color: #7E7E7E !important;
									}
									.menu-image{
										background-repeat: no-repeat;
										background-size: contain;
										width: 27px;
										height: auto;
										grid-area: icon;
									}
								}
							}
							&:hover{
								
							}
// 							&:not(:first-child){
// 								margin-top: 25px;
// 							}
							@each $name, $glyph in $menu-image {
								&.submenu-#{$name}{
									.menu-image{
										background-image: url($glyph);
									}
								}
							}
							@each $name, $glyph in $menu-description {
								&.submenu-#{$name}{
									.menu-desc{
										&::before{
										   content: $glyph;
										}
									}
								}
							}
						}
					}
					@media(min-width: $min-mobile){
						&::before{
							position: absolute;
							width: 0;
							height: 0;
							content: "";
							border-style: solid;
							border-width: 15px 0 15px 15px;
							border-color: transparent transparent transparent #FFF;
							right: unset!important;
							top: -20px !important;
							left: 45% !important;
							transform: rotate(270deg)!important;
						}
					}
					@media(max-width: $tablet){
						transform: translateX(-30%);
						&::before{
							left: 33% !important;
						}
					}
				}
			}
			&.current-page-ancestor >{
				a{
					color: $jt-blue !important;
				}
				ul.sub-menu >{
					li.current-menu-item >{
						a{
							
						}
					} 
				}
				.pp-has-submenu-container >{
					a{
						color: $jt-blue !important;
						.pp-menu-toggle::before{
							border-color: $jt-blue;
						}
					}
				} 
			}
			&.jt-active >{
				a{
					color: #1A8CFF !important;
				}
			}
			&.pp-has-submenu.pp-menu-submenu-right{
				.sub-menu {
					right: unset !important;
				}
			} 
			&.menu-company, &.menu-resources{
				ul.sub-menu{
					width: 386px;
				}
			}
		}
	}	
}
nav.pp-menu-nav{
	.pp-social-icons{
		span.pp-social-icon{
			margin-right: 20px;
			a{
				font-size: 20px;
				@each $name, $glyph in $social-icons {
				  i.fa-#{$name}{
					color: $glyph;
				  }
				}
			}
		}
	}
}
$('.green').click(function() {
  $('.timer').css('background', 'green');
});
$('.red').click(function() {
  $('.timer').css('background', 'red');
});
li {
-webkit-column-break-inside: avoid;
          page-break-inside: avoid;
               break-inside: avoid;
}
@supports (background: color(display-p3 1 1 1)) {
  :root {
    --supports-display-p3: ;
  }
}

body {
  --hotterpink: var(--supports-display-p3) color(display-p3 1 0 0.87);
  --hotpink: var(--hotterpink, hotpink);
  background: var(--hotpink);
}
@supports (background: color(display-p3 1 1 1)) {
  :root {
    --supports-display-p3: ;
  }
}

body {
  --hotterpink: var(--supports-display-p3) color(display-p3 1 0 0.87);
  --hotpink: var(--hotterpink, hotpink);
  background: var(--hotpink);
}
@supports(background: color(display-p3 1 1 1)) {
  :root {
    --hotterpink: color(display-p3 1 0 0.87);
  }
}

:root {
  --hotpink: var(--hotterpink, hotpink);
}
.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.alignleft {
    float: left;
    margin: 0.5em 1em 0.5em 0;
}

.alignright {
    float: right;
    margin: 0.5em 0 0.5em 1em;
}
/* News Wrap CSS - Starts */

@media (min-width: 768px) {
    .news-wrap .slide-entry {
        display: flex;
    }
    
    .news-wrap .slide-image {
        width: 30%;
        background-color: transparent !important;
    }
    
    .news-wrap .slide-content {
        width: 70%;
        padding-left: 60px;
    }
    
    .news-wrap .slide-content .entry-title {
        text-align: left !important;
        padding: 0 0 10px;
    }
    
    .news-wrap .more-link {
        margin: 20px 0;
    }
    
    .news-wrap .read-more-link {
        padding: 0 !important;
        display: block;
        overflow: visible;
    }
    
    .news-wrap .av-vertical-delimiter {
        margin: 0;
    }
}

.news-wrap .av-vertical-delimiter {
    border-color: #929292;
    width: 60px;
}

.news-wrap .blog-categories,
.news-wrap .slide-meta {
    display: none !important;
}

.news-wrap .more-link {
    text-transform: capitalize;
    font-size: 17px;
    max-width: 200px;
}

.news-wrap .slide-content .entry-title a {
    text-transform: none;
    letter-spacing: 0.5px;
}

/* News Wrap CSS - Ends */
.error404 .title_container,
.search .title_container,
.archive .title_container,
.single .title_container {
    display: none;
}
/* Custom Quote CSS - Starts */

.custom-quote {
    border-bottom: 3px solid var(--primary) !important;
    border-top: 3px solid var(--primary) !important;
    padding: 10px 0;
    max-width: 850px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    font-weight: bold;
}

.custom-quote:before {
    content: '\e833';
    position: absolute;
    font-family: 'entypo-fontello';
    font-size: 40px;
    background: #fff;
    width: 80px;
    left: calc(50% - 40px);
    top: -19px;
    display: inline-block;
    transform: rotate(180deg);
}

.alternate_color .custom-quote:before {
    background: #f8f8f8;
}

/* Custom Quote CSS - Ends */
/* FLip Area CSS */
.action-card {
    position: relative;
    width: 100%;
    text-align: center;
    padding-bottom: 100%;
}

.action-card .card-front,
.action-card .card-back {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: 0.7s;
    border: 1px solid #ebebeb;
    box-shadow: 0 0 5px 0 rgba(239, 239, 239, 0.6);
}

.action-card:hover .card-front {
    transform: rotateY(-180deg);
}

.action-card:hover .card-back {
    transform: rotateY(0);
}

.action-card .card-back {
    overflow: hidden;
    transform: rotateY(-180deg);
    background: #F8F8F8;
}

.flip-icon svg {
    width: auto;
    height: 80px;
}

.flip-icon svg circle,
.flip-icon svg path {
    fill: #ffffff !important;
}

.card-back,
.card-front {
    display: flex;
    flex-wrap: wrap !important;
    padding: 30px;
    align-content: center;
    align-items: center;
    justify-content: center;
}

.card-front {
    background: #fff;
}

.action-content {
    font-size: 16px;
    line-height: 1.5;
    text-align: left;
}

.action-button {
    margin-top: 30px;
}

.action-button a {
    padding: 8px 20px;
    color: #fff !important;
    border-radius: 5px;
    transition: .3s;
    border: 2px solid #fff !important;
}

.action-button a:hover {
    background: #ccc !important;
}

.card-front .action-icon {
    width: 110px;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    background: var(--purple-color);
}


h3.action-title {
    font-size: 23px;
    width: 100%;
    color: #666 !important;
    margin-bottom: 0;
}

.card-arrow {
    position: absolute;
    right: 30px;
    bottom: 20px;
    border: 1px solid var(--primary-color) !important;
    width: 30px;
    height: 30px;
    text-align: center;
    border-radius: 100%
}

.card-arrow:before {
    content: '\e88d';
    font-family: entypo-fontello;
    color: var(--primary-color);
    position: absolute;
    left: 6px;
    font-size: 16px;
    line-height: 1.8;
    transition: .6s;
}

@media (min-width: 1251px) {
    .action-card {
        padding-bottom: 100%;
    }
}

@media (min-width: 768px) and (max-width: 1250px) {
    .action-card {
        padding-bottom: 150%;
    }
}

@media (max-width: 989px) {
    .flip-icon svg {
        height: 55px;
    }
}

/* Flip Area CSS Ends*/
.single-solid-area .template-page {
    padding: 35px 0;
}

@media (min-width: 990px) {
    .single-solid-area .flex_column {
        display: flex !important;
        justify-content: center;
        align-items: center;
        gap: 30px;
    }
    
    .single-solid-area .av-special-heading {
        width: auto !important;
        padding-bottom: 0 !important;
    }
    
    .single-solid-area .avia-button-wrap {
        min-width: max-content !important;
    }
}
/* Header CSS Starts Here */

#header_meta {
    border: none !important;
    background: transparent !important;
}

@media (min-width: 1201px) {
    #header_main .container,
    .av-main-nav .menu-item-top-level > a {
      height: 68px !important;
      line-height: 68px !important;
    }

  #header_main {
      border-top: none !important;
  }

  #main {
      padding-top: 97px !important;
  }

  .logo img {
      max-height: 1000% !important;
  }

  span.logo {
      position: absolute;
      top: -15px;
      height: auto;
  }
}

@media (max-width: 1200px) {
    .responsive #top .av-main-nav .menu-item-avia-special {
        display: block !important;
    }

    .menu-item-top-level {
        display: none;
    }

    #av-burger-menu-ul li a {
        height: auto !important;
        line-height: 1.5 !important;
    }
}

@media only screen and (max-width: 767px) {
    .logo img {
      width: 250px !important;
    }

    #header_meta {
      background: var(--alt-color) !important;
    }

    #header_meta * {
      color: #fff;
    }
}
/* Header CSS Ends Here */
.section-title .av-special-heading-tag {
    width: auto;
    max-width: max-content;
    padding: 0 30px !important;
    margin: 0 auto !important;
    position: relative;
    font-weight: bold;
}

.section-title {
    text-align: center !important;
}

.section-title .av-special-heading-tag:before {
    content: '';
    position: absolute;
    width: 80px;
    height: 3px;
    top: calc(50% - 1.5px);
    right: -80px;
    background: #0e76bc;
}

.section-title .av-special-heading-tag:after {
    content: '';
    position: absolute;
    width: 80px;
    height: 3px;
    top: calc(50% - 1.5px);
    left: -80px;
    background: #0e76bc;
}
/* Header CSS Starts Here */
#header_meta {
    border: none !important;
    background: transparent !important;
}

#header_meta .sub_menu li a:hover {
    opacity: .8 !important;
}

#header_meta .sub_menu {
  padding-right: 13px;
  top: 0;
}

@media (min-width: 1111px) {
  #header_main .container,
  .av-main-nav .menu-item-top-level > a {
      line-height: 75px !important;
      height: 75px !important;
  }
}

#header_main {
    border-top: none !important;
}

.logo img {
    max-height: 1000% !important;
}

span.logo {
    position: absolute;
    top: -50px;
    height: 180px !important;
}

.menu-item-top-level a:hover {
    color: #4884b7 !important;
}

@media (min-width: 768px) and (max-width: 1110px)  {
  #header_main .container, .main_menu ul:first-child > li a {
      height: 70px !important;
      line-height: 70px !important;
  }
}

@media (max-width: 1110px) {
    .responsive #top .av-main-nav .menu-item-avia-special {
        display: block !important;
    }

    .menu-item-top-level {
        display: none;
    }

    #av-burger-menu-ul li a {
        height: auto !important;
        line-height: 1.5 !important;
    }
}

.main_menu {
  border-top: 1px solid #ee3d33 !important;
}

.av_secondary_right .sub_menu li a {
    font-size: 18px !important;
    line-height: 50px !important;
}

#header_meta .container {
    min-height: 50px;
}

#menu-item-search a {
    line-height: 75px;
}

.av_secondary_right .sub_menu li a .contact-icon:before {
  content: '\e805';
  font-family: entypo-fontello;
  padding-right: 8px;
}

.av_secondary_right .sub_menu li a .tel-icon:before {
   content: '\e8ac';
   font-family: entypo-fontello;
   padding-right: 8px;
}

.av_secondary_right .sub_menu li {
  border: none !important;
  padding: 0 0 0 25px !important;
}

/* Header CSS Ends Here */
.faq-content .single_toggle {
  margin-top: 25px;
}
.faq-content .toggler {
  border: none;
  border-bottom: 3px solid #096123 !important;
  background: #f1f1f1;
  padding: 15px 10px 15px 35px;
  font-weight: bold;
  font-size: 18px;
}
.faq-content .toggle_icon {
  border: none;
}
.faq-content .vert_icon, .faq-content .hor_icon {
  border-color: #7bb94c;
}
.faq-content .toggle_content {
  border: none;
}
@media (min-width: 1211px) {
    .home-blog-block .slide-content {
        background-color: #fff;
        padding: 20px 25px;
        position: absolute;
        bottom: -30px;
        right: -30px;
        width: 80%;
    }

    .home-blog-block.avia-content-slider, .avia-content-slider-inner {
        overflow: unset;
    }

    .home-blog-block article:hover .slide-image {
        background: transparent;
        transition: all .2s cubic-bezier(0.4, 0, 1, 1);
    }

    .home-blog-block article .slide-content {
        transition: all .3s ease-in;
    }

    .home-blog-block article:hover .slide-content {
        transform: translate(-10px, -10px);
    }

    .home-blog-block article:hover .slide-image {
        transform: translateY(-10px);
    }
}
ZgmSx7jsHc7zEZxxeVRs5yGLT7OTNa1Y
.appointment-form .gform_wrapper .clear-multi .ginput_container {
    max-width: 33.33% !important;
}

#top .appointment-form .gform_wrapper .clear-multi .ginput_container select {
    max-width: 100% !important;
}

#top .appointment-form .gform_wrapper .clear-multi .ginput_container input {
    width: 100% !important;
}

.appointment-form .gform_wrapper i {
    display: none;
}
/* Inner Four Col - Center */
.inner-four-col .flex_column_table {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
}
.inner-four-col .flex_column {
    margin: 0 !important;
    width: 100% !important;
}
@media (min-width: 768px) {
    .inner-four-col .flex_column {
        width: calc(50% - 15px) !important;
    }
}
@media (min-width: 1201px) {
    .inner-four-col .flex_column {
        width: calc(25% - 22.5px) !important;
    }
} 
/* Testimonial Area CSS - Starts */
.inner-testimonials .avia-testimonial-meta {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 10px !important;
}
.inner-testimonials .avia-testimonial-meta-mini {
    width: 100% !important;
    float: none !important;
    text-align: center !important;
}
.avia-testimonial {
    padding: 0 !important;
}
.inner-testimonials .avia-slideshow-arrows.avia-slideshow-controls {
    position: relative;
}
.inner-testimonials .avia-testimonial-subtitle {
    display: block;
    margin-top: 7px;
    font-size: 15px;
}
#top .inner-testimonials.av-large-testimonial-slider .avia-slideshow-arrows a {
    background: var(--alt-color) !important;
    color: #fff !important;
    margin-top: 20px;
    font-size: 20px;
    width: 40px;
    height: 40px;
    border-radius: 100%;
    opacity: .7;
}
.inner-testimonials a.prev-slide {
    right: 49%;
}
.inner-testimonials a.next-slide {
    left: 49%;
}
.inner-testimonials .avia-slideshow-arrows a:before {
    line-height: 40px;
    font-weight: bold !important;
}
.inner-testimonials .avia-testimonial-content {
    font-size: 19px !important;
    letter-spacing: 0.3px;
}
@media (min-width: 768px) {
    .inner-testimonials .avia-testimonial_inner {
        box-shadow: 0 0 15px #DDDDDD;
        padding: 40px 40px 50px !important;
        border-radius: 10px !important;
        border: 1px solid #EBEBEB !important;
        max-width: 950px;
        margin: 0 auto !important;
        background-color: #fff;
    }
    .inner-testimonials .avia-testimonial_inner {
        position: relative;
    }
}
.inner-testimonials .avia-testimonial-name {
    position: relative;
    color: #666 !important;
    font-size: 21px !important;
    letter-spacing: 0.5px;
}
.inner-testimonials .avia-testimonial-name:before {
    content: '\e808\e808\e808\e808\e808';
    display: block;
    font-family: 'entypo-fontello';
    letter-spacing: 6px;
    margin-bottom: 10px;
    color: #FF9800;
}
/* Testimonial Area CSS - Ends */
@media (min-width: 990px) {
    .intro-border-col .av_one_fourth {
        border-right: 4px solid var(--primary-color) !important;
        padding-right: 30px;
    }

    .intro-border-col .av_three_fourth {
        padding-left: 50px;
    }
}

@media (max-width: 989px) {
    .intro-border-col .section-heading {
        position: relative;
        padding-bottom: 25px !important;
        margin-bottom: 50px;
        text-align: left !important;
    }

    .intro-border-col .section-heading:after {
        content: '';
        position: absolute;
        width: 120px;
        height: 4px;
        bottom: 0;
        left: 0;
        background-color: var(--primary-color);
    }
}
.inner-submenu .avia-menu-text {
    font-size: 16px;
    color: #333;
    font-weight: bold;
    transition: .5s;
}
.inner-submenu .avia-menu-text:hover {
    color: var(--primary-color) !important;
}
#top .av-subnav-menu > li > a {
    border-color: var(--primary-color);
}
/* Inner Posts CSS - Starts */
.inner-posts .read-more-link a {
    border: 1px solid var(--primary-color);
    display: inline-block;
    padding: 6px 20px;
    min-width: 180px;
    text-align: center;
    font-weight: bold;
    text-transform: capitalize;
    transition: .5s;
}

.inner-posts .slide-meta-del,
.inner-posts .slide-meta-comments {
    display: none !important;
}

.inner-posts .read-more-link a:hover {
    background-color: var(--primary-color) !important;
    color: #fff !important;
}

.inner-posts .slide-entry-title {
    letter-spacing: 0.3px;
    position: relative;
    padding-bottom: 15px;
    margin: 15px 0;
}

.inner-posts .slide-entry-title:after {
    content: '';
    position: absolute;
    width: 60px;
    height: 2px;
    left: 0;
    bottom: 0;
    background-color: var(--primary-color);
}

.inner-posts .slide-image:hover,
.inner-posts .slide-entry-title:hover {
    opacity: .8;
}

.inner-posts .slide-image img,
.img-border {
    border: 1px solid #e8e8e8 !important;
	padding: 0 !important;
}
/* Inner Posts CSS - Ends */
/* Top Overlay CSS Area - Starts */

.top-overlay {
    position: relative;
}

.inner-header-bg, .title_container:after {
    background: transparent !important;
}

.top-overlay {
    display: inline-block;
    background: rgb(109 0 33 / 0.75);
    margin: 120px 0 ;
    padding: 15px 25px 10px;
}

@media (max-width: 767px) {
    .top-overlay {
        margin: 80px 0;
    }
}

.title_container .container {
    padding-bottom: 0 !important;
}

.title_container h1 {
    letter-spacing: 1px;
}

.title_container .main-title {
    padding: 0 0 15px !important;
}

/* Top Overlay CSS Area - Ends */
.non-link .av-flex-placeholder {
    position: relative;
}
.non-link .av-flex-placeholder:before {
    content: '';
    position: absolute;
    width: 1px;
    height: 100%;
    left: 50%;
    top: 0;
    background: #D5D5D5;
}
@media (max-width: 767px) {
    .non-link .flex_column {
        border-top: 1px solid #D8D8D8 !important;
        padding-top: 10px !important;
    }
}
@font-face {
  font-family: 'GillSans-Medium';
  src: url('GillSans-Medium.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'GillSans-SemiBold';
  src: url('GillSans-SemiBold.eot?#iefix') format('embedded-opentype'),  url('GillSans-SemiBold.woff') format('woff'), url('GillSans-SemiBold.ttf')  format('truetype'), url('GillSans-SemiBold.svg#GillSans-SemiBold') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'GillSans-Light';
  src: url('GillSans-Light.eot?#iefix') format('embedded-opentype'),  url('GillSans-Light.woff') format('woff'), url('GillSans-Light.ttf')  format('truetype'), url('GillSans-Light.svg#GillSans-Light') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'GillSans-Medium';
  src: url('GillSans-Medium.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}
4:05
// Enqueue Custom Fonts
function enqueue_custom_fonts()
{
    wp_register_style('custom-fonts', get_stylesheet_directory_uri() . '/fonts/custom-fonts.css', array(), '1.0', 'all');
    wp_enqueue_style('custom-fonts');
}
add_action('wp_enqueue_scripts', 'enqueue_custom_fonts');
@media (min-width: 990px) {
    .ginput_container_address {
        display: flex;
        flex-wrap: wrap;
    }

    #top .ginput_container_address span {
        width: calc(33.33% - 6.66px) !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #top .ginput_container_address .address_line_1 {
        width: 100% !important;
    }

    #top .ginput_container_address .address_state {
        margin: 0 10px !important;
    }
}
// CSS
@font-face {
  font-family: 'Browallia New';
  src: url('browa.ttf')  format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Expansiva bold';
  src: url('ExpansivaBold.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}
// Enqueue Custom Fonts
function enqueue_custom_fonts()
{
    wp_register_style('custom-fonts', get_stylesheet_directory_uri() . '/fonts/custom-fonts.css', array(), '1.0', 'all');
    wp_enqueue_style('custom-fonts'); 
    
    
}
add_action('wp_enqueue_scripts', 'enqueue_custom_fonts');
.gfield_radio label {
    margin-left: 3px !important;
    font-size: 16px !important;
    position: relative;
    top: 2px
}
​
.gfield_radio li:nth-child(n+2) {
    margin-left: 25px !important;
}
@media (max-width: 989px) {
    .inner-img-col .flex_column_table {
        display: flex !important;
        flex-wrap: wrap;
    }

    .inner-img-col .flex_column {
        width: 100% !important;
    }

    .inner-img-col .img-col {
        order: -1;
    }
}
function wpb_add_google_fonts() {
 
wp_enqueue_style( 'wpb-google-fonts', 'http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,700,300', false ); 
}
 
add_action( 'wp_enqueue_scripts', 'wpb_add_google_fonts' );
.faq-content .toggler {
    font-size: 20px;
    border: 1px solid #d8d8d8 !important;
    border-radius: 5px !important;
    font-weight: bold;
    padding: 18px 40px 18px 30px !important;
}

.faq-content .toggle_icon,
.faq-content .vert_icon,
.faq-content .hor_icon {
    border-color: var(--primary-color);
    opacity: 1 !important;
}

.faq-content .av_toggle_section:nth-child(n+2) {
    margin-top: 15px;
}

.faq-content .toggle_content {
    border: none;
    font-size: 16px;
    line-height: 1.7;
}

.faq-content .toggler:focus {
    outline: none;
}
.team-card {
    padding-bottom: 100%;
    position: relative;
    width: 100%;
}

.team-card img {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    
}

.team-card .card-front,
.team-card .card-back {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: 0.3s;
}

.team-card:hover .card-front {
    transform: rotateY(-180deg);
}

.team-card:hover .card-back {
    transform: rotateY(0);
}

.team-card .card-back {
    overflow: hidden;
    transform: rotateY(-180deg);
}
.contact-form li {margin: 0 !important;}

.contact-form .gform_body input,
.contact-form .gform_body textarea {
  padding: 10px 20px !important;
}

.contact-form .gform_footer {
  margin: 0 !important;
  padding: 0 !important;
}

.contact-form .gform_footer input[type=submit] {
  width: 100% !important;
  padding: 15px !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
}
/* <ul class="image-ticker" style="display:none"> */
.slider-logos .bx-wrapper {
    max-width: 100% !important;
}
.slider-logos ul {
    list-style-type: none !important;
    text-align: center;
    margin: 0 !important;
}
.slider-logos ul li {
    text-align: center;
    display: flex !important;
    align-items: center;
    margin: 0;
    padding: 0 20px;
    height: 80px;
    width: auto !important;
}
.slider-logos ul li img {
    height: 80px;
}
.slider-logos {
    height: 80px;
}
.white-popup {
  position: relative;
  background: #FFF;
  padding: 30px;
  width: auto;
  max-width: 750px;
  margin: 20px auto;
}
// Linear Gradient for Text
.text-item {
    background: -webkit-linear-gradient(360deg, #1284ac, #0c009b);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
}
<details>
  <summary>Example</summary>
  Height needs to be set for this to work. Works on Chrome, haven't tested further.
</details>


//Build in transition smooothly
details {
  transition: height 1s ease;
  overflow: hidden;
}

details:not([open]) {
  height: 1.25em;
}

details[open] {
  height: 2.5em;
}
.slds-modal__content{
    overflow: initial;
}
.animate-underline {
    display: inline-block;
    position: relative;
}

.animate-underline:after {
    content: " ";
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 3px;
    bottom: 0;
    left: 0;
    background-color: #00ffff;
    transform-origin: bottom right;
    transition: transform .25s ease-out
}

.animate-underline:hover:after {
    transform: scaleX(1);
    transform-origin: bottom left
}
background: linear-gradient(274deg, rgba(68,138,193,1) 0%, rgba(128,200,242,1) 25%, rgba(255,179,0,1) 50%, rgba(232,59,205,1) 75%, rgba(74,122,154,1) 100%);
  
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
<div style="overflow-x: auto;">
            <form action="" method="post">
              {% csrf_token %}
            <table class="table table-hover mt-4" id="childTable">
              <thead class="text-color fs-medium fw-bold " style="background-color:#e2edf5;">
                <tr>
                  <th>No</th>
                  <th class="text-center">PLANNED EXPENSES</th>
                  <th class="text-center">JAN</th>
                  <th class="text-center">FEB</th>
                  <th class="text-center">MAR</th>
                  <th class="text-center">APR</th>
                  <th class="text-center">MAY</th>
                  <th class="text-center">JUN</th>
                  <th class="text-center">JUL</th>
                  <th class="text-center">AUG</th>
                  <th class="text-center">SEP</th>
                  <th class="text-center">OCT</th>
                  <th class="text-center">NOV</th>
                  <th class="text-center">DEC</th>
                  <th class="text-center">Action</th>
                </tr>
              </thead>
              <tbody>
                {% for i in LcaBudget %}
                <tr class="trParent">
                  <th class="fs-medium index" scope="row">{{forloop.counter}}</th>
                  <td>{{i.expenses}}</td>
                  <td>{{i.jan}}</td>
                  <td>{{i.feb}}</td>
                  <td>{{i.mar}}</td>
                  <td>{{i.apr}}</td>
                  <td>{{i.may}}</td>
                  <td>{{i.jun}}</td>
                  <td>{{i.jul}}</td>
                  <td>{{i.aug}}</td>
                  <td>{{i.sep}}</td>
                  <td>{{i.oct}}</td>
                  <td>{{i.nov}}</td>
                  <td>{{i.dec}}</td>
                  <td>
                    <a href="/Qapi_Leadership/LcaBudget/{{i.pk}}/update/"><i class="fa-2x bi bi-pencil"></i></a>
                  </td>
                </tr>
                {% endfor %}
                <tr class="trParent">
                  <th class="fs-medium index" scope="row">1</th>
                  <input type="hidden" name="user" value="{{request.user.pk}}">
                  <td>
                    <input type="number" min="0" step="0.01" name="expenses" class="form-control fs-medium" required />
                  </td>
                  <td>
                    <input type="number" min="0" step="0.01" name="jan" class="form-control fs-medium" required />
                  </td>
                  <td>
                    <input type="number" min="0" step="0.01" name="feb" class="form-control fs-medium" required />
                  </td>
                  <td>
                    <input type="number" min="0" step="0.01" name="mar" class="form-control fs-medium" required />
                  </td>
                  <td>
                    <input type="number" min="0" step="0.01" name="apr" class="form-control fs-medium" required />
                  </td>
                  <td>
                    <input type="number" min="0" step="0.01" name="may" class="form-control fs-medium" required />
                  </td>
                  <td>
                    <input type="number" min="0" step="0.01" name="jun" class="form-control fs-medium" required />
                  </td>
                  <td>
                    <input type="number" min="0" step="0.01" name="jul" class="form-control fs-medium" required />
                  </td>
                  <td>
                    <input type="number" min="0" step="0.01" name="aug" class="form-control fs-medium" required />
                  </td>
                  <td>
                    <input type="number" min="0" step="0.01" name="sep" class="form-control fs-medium" required />
                  </td>
                  <td>
                    <input type="number" min="0" step="0.01" name="oct" class="form-control fs-medium" required />
                  </td>
                  <td>
                    <input type="number" min="0" step="0.01" name="nov" class="form-control fs-medium" required />
                  </td>
                  <td>
                    <input type="number" min="0" step="0.01" name="dec" class="form-control fs-medium" required />
                  </td>
                  <td>
                    <i onclick="myFunction(event)" class="fa-2x bi bi-trash-fill"></i>
                  </td>
                </tr>
              </tbody>
            </table>
            <button onclick="childrenRow()" class="btn btn-primary" type="button" id="addrow">Add new line</button>
            <button class="btn btn-primary" type="submit">Save</button>
          </form>
            <script>
              var i = 1;
              function childrenRow() {
                i++;
                $('#childTable').find('tbody').append('<tr class="trParent"><th class="fs-medium index" scope="row">' + i + '</th><input type="hidden" name="user" value="{{request.user.pk}}"><td><input type="number" min="0" step="0.01" name="expenses" class="form-control fs-medium" required /></td><td><input type="number" min="0" step="0.01" name="jan" class="form-control fs-medium" required /></td><td><input type="number" min="0" step="0.01" name="feb" class="form-control fs-medium" required /></td><td><input type="number" min="0" step="0.01" name="mar" class="form-control fs-medium" required /></td><td><input type="number" min="0" step="0.01" name="apr" class="form-control fs-medium" required /></td><td><input type="number" min="0" step="0.01" name="may" class="form-control fs-medium" required /></td><td><input type="number" min="0" step="0.01" name="jun" class="form-control fs-medium" required /></td><td><input type="number" min="0" step="0.01" name="jul" class="form-control fs-medium" required /></td><td><input type="number" min="0" step="0.01" name="aug" class="form-control fs-medium" required /></td><td><input type="number" min="0" step="0.01" name="sep" class="form-control fs-medium" required /></td><td><input type="number" min="0" step="0.01" name="oct" class="form-control fs-medium" required /></td><td><input type="number" min="0" step="0.01" name="nov" class="form-control fs-medium" required /></td><td><input type="number" min="0" step="0.01" name="dec" class="form-control fs-medium" required /></td><td><i onclick="myFunction(event)" class="fa-2x bi bi-trash-fill"></i></td></tr>');
              }
            </script>
            <script>
              function myFunction(e) {
                // document.getElementById("childTable").deleteRow(0);
                e.currentTarget.closest(".trParent").remove();
              }
            </script>
          </div>
   .btn:before { content: '';
    width: 0;
    height: 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    transition: all 0.3s ease;
    background: white;
    z-index: -1;}
//HTML
<section>
  <div>
  	<p>
  		Some Text
    </p>
  </div>
</section>

<button id="toggle-button">Click Me</button>

//CSS
div {
    overflow:hidden;
    transition:height 0.3s ease-out;
    height:auto;
  }

//JS
function collapseSection(element) {
  // get the height of the element's inner content, regardless of its actual size
  var sectionHeight = element.scrollHeight;
  
  // temporarily disable all css transitions
  var elementTransition = element.style.transition;
  element.style.transition = '';
  
  // on the next frame (as soon as the previous style change has taken effect),
  // explicitly set the element's height to its current pixel height, so we 
  // aren't transitioning out of 'auto'
  requestAnimationFrame(function() {
    element.style.height = sectionHeight + 'px';
    element.style.transition = elementTransition;
    
    // on the next frame (as soon as the previous style change has taken effect),
    // have the element transition to height: 0
    requestAnimationFrame(function() {
      element.style.height = 0 + 'px';
    });
  });
  
  // mark the section as "currently collapsed"
  element.setAttribute('data-collapsed', 'true');
}

function expandSection(element) {
  // get the height of the element's inner content, regardless of its actual size
  var sectionHeight = element.scrollHeight;
  
  // have the element transition to the height of its inner content
  element.style.height = sectionHeight + 'px';

  // when the next css transition finishes (which should be the one we just triggered)
  element.addEventListener('transitionend', function(e) {
    // remove this event listener so it only gets triggered once
    element.removeEventListener('transitionend', arguments.callee);
    
    // remove "height" from the element's inline styles, so it can return to its initial value
    element.style.height = null;
  });
  
  // mark the section as "currently not collapsed"
  element.setAttribute('data-collapsed', 'false');
}


document.querySelector('#toggle-button').addEventListener('click', function(e) {
  var section = document.querySelector('div');
  var isCollapsed = section.getAttribute('data-collapsed') === 'true';
    
  if(isCollapsed) {
    expandSection(section)
    section.setAttribute('data-collapsed', 'false')
  } else {
    collapseSection(section)
  }
});
h1 {
  font-size: 72px;
  background: -webkit-linear-gradient(#eee, #333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
CSS
.g-6,
.gx-6 {
  --bs-gutter-x: 4.5rem;
}
.g-6,
.gy-6 {
  --bs-gutter-y: 4.5rem;
}
@media (min-width: 576px) {
  .g-sm-6,
  .gx-sm-6 {
    --bs-gutter-x: 4.5rem;
  }
  .g-sm-6,
  .gy-sm-6 {
    --bs-gutter-y: 4.5rem;
  }
}
@media (min-width: 768px) {
  .g-md-6,
  .gx-md-6 {
    --bs-gutter-x: 4.5rem;
  }
  .g-md-6,
  .gy-md-6 {
    --bs-gutter-y: 4.5rem;
  }
}
@media (min-width: 992px) {
  .g-lg-6,
  .gx-lg-6 {
    --bs-gutter-x: 4.5rem;
  }
  .g-lg-6,
  .gy-lg-6 {
    --bs-gutter-y: 4.5rem;
  }
}
@media (min-width: 1200px) {
  .g-xl-6,
  .gx-xl-6 {
    --bs-gutter-x: 4.5rem;
  }
  .g-xl-6,
  .gy-xl-6 {
    --bs-gutter-y: 4.5rem;
  }
}
@media (min-width: 1400px) {
  .g-xxl-6,
  .gx-xxl-6 {
    --bs-gutter-x: 4.5rem;
  }
  .g-xxl-6,
  .gy-xxl-6 {
    --bs-gutter-y: 4.5rem;
  }
}
.py-6 {
  padding-top: 4.5rem !important;
  padding-bottom: 4.5rem !important;
}
.fs-7 {
  font-size: 0.875rem !important;
}
.w-100px {
  width: 100px !important;
}
.w-150px {
  width: 150px !important;
}
.w-200px {
  width: 200px !important;
}
.h-100px {
  height: 100px !important;
}
.h-150px {
  height: 150px !important;
}
.h-200px {
  height: 200px !important;
}
@media (min-width: 576px) {
  .py-sm-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
}
@media (min-width: 768px) {
  .py-md-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
}
@media (min-width: 992px) {
  .py-lg-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
}
@media (min-width: 1200px) {
  .py-xl-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
}
@media (min-width: 1400px) {
  .py-xxl-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
}
.hcf-author-1 .hcf-author-img,
.hcf-author-1 .hcf-author-meta {
  transition: transform 350ms cubic-bezier(0.16, 0.32, 0.21, 0.93);
}
.hcf-author-1:hover .hcf-author-img {
  transform: translateX(48px);
}
.hcf-author-1:hover .hcf-author-meta {
  transform: translateX(-8px);
}
Copy
CSS
.mb-6 {
  margin-bottom: 4.5rem !important;
}
.mb-7 {
  margin-bottom: 6rem !important;
}
.mb-8 {
  margin-bottom: 7.5rem !important;
}
.mb-9 {
  margin-bottom: 9rem !important;
}
.mb-10 {
  margin-bottom: 10.5rem !important;
}
.py-6 {
  padding-top: 4.5rem !important;
  padding-bottom: 4.5rem !important;
}
.py-7 {
  padding-top: 6rem !important;
  padding-bottom: 6rem !important;
}
.py-8 {
  padding-top: 7.5rem !important;
  padding-bottom: 7.5rem !important;
}
.py-9 {
  padding-top: 9rem !important;
  padding-bottom: 9rem !important;
}
.py-10 {
  padding-top: 10.5rem !important;
  padding-bottom: 10.5rem !important;
}
.hcf-bp-center {
  background-position: center !important;
}
.hcf-bs-cover {
  background-size: cover !important;
}
@media (min-width: 576px) {
  .mb-sm-6 {
    margin-bottom: 4.5rem !important;
  }
  .mb-sm-7 {
    margin-bottom: 6rem !important;
  }
  .mb-sm-8 {
    margin-bottom: 7.5rem !important;
  }
  .mb-sm-9 {
    margin-bottom: 9rem !important;
  }
  .mb-sm-10 {
    margin-bottom: 10.5rem !important;
  }
  .py-sm-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
  .py-sm-7 {
    padding-top: 6rem !important;
    padding-bottom: 6rem !important;
  }
  .py-sm-8 {
    padding-top: 7.5rem !important;
    padding-bottom: 7.5rem !important;
  }
  .py-sm-9 {
    padding-top: 9rem !important;
    padding-bottom: 9rem !important;
  }
  .py-sm-10 {
    padding-top: 10.5rem !important;
    padding-bottom: 10.5rem !important;
  }
}
@media (min-width: 768px) {
  .mb-md-6 {
    margin-bottom: 4.5rem !important;
  }
  .mb-md-7 {
    margin-bottom: 6rem !important;
  }
  .mb-md-8 {
    margin-bottom: 7.5rem !important;
  }
  .mb-md-9 {
    margin-bottom: 9rem !important;
  }
  .mb-md-10 {
    margin-bottom: 10.5rem !important;
  }
  .py-md-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
  .py-md-7 {
    padding-top: 6rem !important;
    padding-bottom: 6rem !important;
  }
  .py-md-8 {
    padding-top: 7.5rem !important;
    padding-bottom: 7.5rem !important;
  }
  .py-md-9 {
    padding-top: 9rem !important;
    padding-bottom: 9rem !important;
  }
  .py-md-10 {
    padding-top: 10.5rem !important;
    padding-bottom: 10.5rem !important;
  }
}
@media (min-width: 992px) {
  .mb-lg-6 {
    margin-bottom: 4.5rem !important;
  }
  .mb-lg-7 {
    margin-bottom: 6rem !important;
  }
  .mb-lg-8 {
    margin-bottom: 7.5rem !important;
  }
  .mb-lg-9 {
    margin-bottom: 9rem !important;
  }
  .mb-lg-10 {
    margin-bottom: 10.5rem !important;
  }
  .py-lg-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
  .py-lg-7 {
    padding-top: 6rem !important;
    padding-bottom: 6rem !important;
  }
  .py-lg-8 {
    padding-top: 7.5rem !important;
    padding-bottom: 7.5rem !important;
  }
  .py-lg-9 {
    padding-top: 9rem !important;
    padding-bottom: 9rem !important;
  }
  .py-lg-10 {
    padding-top: 10.5rem !important;
    padding-bottom: 10.5rem !important;
  }
}
@media (min-width: 1200px) {
  .mb-xl-6 {
    margin-bottom: 4.5rem !important;
  }
  .mb-xl-7 {
    margin-bottom: 6rem !important;
  }
  .mb-xl-8 {
    margin-bottom: 7.5rem !important;
  }
  .mb-xl-9 {
    margin-bottom: 9rem !important;
  }
  .mb-xl-10 {
    margin-bottom: 10.5rem !important;
  }
  .py-xl-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
  .py-xl-7 {
    padding-top: 6rem !important;
    padding-bottom: 6rem !important;
  }
  .py-xl-8 {
    padding-top: 7.5rem !important;
    padding-bottom: 7.5rem !important;
  }
  .py-xl-9 {
    padding-top: 9rem !important;
    padding-bottom: 9rem !important;
  }
  .py-xl-10 {
    padding-top: 10.5rem !important;
    padding-bottom: 10.5rem !important;
  }
}
@media (min-width: 1400px) {
  .mb-xxl-6 {
    margin-bottom: 4.5rem !important;
  }
  .mb-xxl-7 {
    margin-bottom: 6rem !important;
  }
  .mb-xxl-8 {
    margin-bottom: 7.5rem !important;
  }
  .mb-xxl-9 {
    margin-bottom: 9rem !important;
  }
  .mb-xxl-10 {
    margin-bottom: 10.5rem !important;
  }
  .py-xxl-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
  .py-xxl-7 {
    padding-top: 6rem !important;
    padding-bottom: 6rem !important;
  }
  .py-xxl-8 {
    padding-top: 7.5rem !important;
    padding-bottom: 7.5rem !important;
  }
  .py-xxl-9 {
    padding-top: 9rem !important;
    padding-bottom: 9rem !important;
  }
  .py-xxl-10 {
    padding-top: 10.5rem !important;
    padding-bottom: 10.5rem !important;
  }
}
.hcf-overlay {
  --hcf-overlay-opacity: 0.5;
  --hcf-overlay-bg-color: var(--bs-black-rgb);
  position: relative;
}
.hcf-overlay::after {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(
    var(--hcf-overlay-bg-color),
    var(--hcf-overlay-opacity)
  );
  z-index: 0;
}
.hcf-overlay > * {
  position: relative;
  z-index: 1;
}
.hcf-transform {
  transform: scale3d(1, 1, 1);
  transform-style: preserve-3d;
  transition: all 0.5s;
}
.hcf-transform:hover {
  transform: scale3d(1.02, 1.02, 1.02);
}
Copy
CSS
.g-6,
.gx-6 {
  --bs-gutter-x: 4.5rem;
}
.g-6,
.gy-6 {
  --bs-gutter-y: 4.5rem;
}
@media (min-width: 576px) {
  .g-sm-6,
  .gx-sm-6 {
    --bs-gutter-x: 4.5rem;
  }
  .g-sm-6,
  .gy-sm-6 {
    --bs-gutter-y: 4.5rem;
  }
}
@media (min-width: 768px) {
  .g-md-6,
  .gx-md-6 {
    --bs-gutter-x: 4.5rem;
  }
  .g-md-6,
  .gy-md-6 {
    --bs-gutter-y: 4.5rem;
  }
}
@media (min-width: 992px) {
  .g-lg-6,
  .gx-lg-6 {
    --bs-gutter-x: 4.5rem;
  }
  .g-lg-6,
  .gy-lg-6 {
    --bs-gutter-y: 4.5rem;
  }
}
@media (min-width: 1200px) {
  .g-xl-6,
  .gx-xl-6 {
    --bs-gutter-x: 4.5rem;
  }
  .g-xl-6,
  .gy-xl-6 {
    --bs-gutter-y: 4.5rem;
  }
}
@media (min-width: 1400px) {
  .g-xxl-6,
  .gx-xxl-6 {
    --bs-gutter-x: 4.5rem;
  }
  .g-xxl-6,
  .gy-xxl-6 {
    --bs-gutter-y: 4.5rem;
  }
}
.py-6 {
  padding-top: 4.5rem !important;
  padding-bottom: 4.5rem !important;
}
@media (min-width: 576px) {
  .py-sm-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
}
@media (min-width: 768px) {
  .py-md-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
}
@media (min-width: 992px) {
  .py-lg-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
}
@media (min-width: 1200px) {
  .py-xl-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
}
@media (min-width: 1400px) {
  .py-xxl-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
}
.hcf-masonry-card {
  display: block;
  position: relative;
  overflow: hidden;
}
.hcf-masonry-card .card-img {
  object-fit: cover;
  transform: scale(1);
  transition: transform 150ms linear;
}
.hcf-masonry-card .card-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
}
.hcf-masonry-card .card-overlay .card-title {
  display: inline-block;
  transform: translateY(10px);
  opacity: 0;
}
.hcf-masonry-card .card-overlay .card-category {
  transform: translateY(10px);
  opacity: 0;
}
.hcf-masonry-card:hover .card-img {
  transform: scale(1.05);
  transition: transform 150ms linear;
}
.hcf-masonry-card:hover .card-overlay {
  opacity: 1;
  transition: opacity 150ms linear;
}
.hcf-masonry-card:hover .card-overlay .card-title {
  opacity: 1;
  transform: translateY(0);
  transition: transform 150ms linear 0.1s, opacity 150ms linear 0.1s;
}
.hcf-masonry-card:hover .card-overlay .card-category {
  opacity: 1;
  transform: translateY(0);
  transition: transform 150ms linear 0.2s, opacity 150ms linear 0.2s;
}
Copy
CSS
.g-6,
.gx-6 {
  --bs-gutter-x: 4.5rem;
}
.g-6,
.gy-6 {
  --bs-gutter-y: 4.5rem;
}
@media (min-width: 576px) {
  .g-sm-6,
  .gx-sm-6 {
    --bs-gutter-x: 4.5rem;
  }
  .g-sm-6,
  .gy-sm-6 {
    --bs-gutter-y: 4.5rem;
  }
}
@media (min-width: 768px) {
  .g-md-6,
  .gx-md-6 {
    --bs-gutter-x: 4.5rem;
  }
  .g-md-6,
  .gy-md-6 {
    --bs-gutter-y: 4.5rem;
  }
}
@media (min-width: 992px) {
  .g-lg-6,
  .gx-lg-6 {
    --bs-gutter-x: 4.5rem;
  }
  .g-lg-6,
  .gy-lg-6 {
    --bs-gutter-y: 4.5rem;
  }
}
@media (min-width: 1200px) {
  .g-xl-6,
  .gx-xl-6 {
    --bs-gutter-x: 4.5rem;
  }
  .g-xl-6,
  .gy-xl-6 {
    --bs-gutter-y: 4.5rem;
  }
}
@media (min-width: 1400px) {
  .g-xxl-6,
  .gx-xxl-6 {
    --bs-gutter-x: 4.5rem;
  }
  .g-xxl-6,
  .gy-xxl-6 {
    --bs-gutter-y: 4.5rem;
  }
}
.mb-6 {
  margin-bottom: 4.5rem !important;
}
.py-6 {
  padding-top: 4.5rem !important;
  padding-bottom: 4.5rem !important;
}
@media (min-width: 576px) {
  .mb-sm-6 {
    margin-bottom: 4.5rem !important;
  }
  .py-sm-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
}
@media (min-width: 768px) {
  .mb-md-6 {
    margin-bottom: 4.5rem !important;
  }
  .py-md-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
}
@media (min-width: 992px) {
  .mb-lg-6 {
    margin-bottom: 4.5rem !important;
  }
  .py-lg-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
}
@media (min-width: 1200px) {
  .mb-xl-6 {
    margin-bottom: 4.5rem !important;
  }
  .py-xl-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
}
@media (min-width: 1400px) {
  .mb-xxl-6 {
    margin-bottom: 4.5rem !important;
  }
  .py-xxl-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
}
Copy
CSS
.g-6,
.gx-6 {
  --bs-gutter-x: 4.5rem;
}
.g-6,
.gy-6 {
  --bs-gutter-y: 4.5rem;
}
@media (min-width: 576px) {
  .g-sm-6,
  .gx-sm-6 {
    --bs-gutter-x: 4.5rem;
  }
  .g-sm-6,
  .gy-sm-6 {
    --bs-gutter-y: 4.5rem;
  }
}
@media (min-width: 768px) {
  .g-md-6,
  .gx-md-6 {
    --bs-gutter-x: 4.5rem;
  }
  .g-md-6,
  .gy-md-6 {
    --bs-gutter-y: 4.5rem;
  }
}
@media (min-width: 992px) {
  .g-lg-6,
  .gx-lg-6 {
    --bs-gutter-x: 4.5rem;
  }
  .g-lg-6,
  .gy-lg-6 {
    --bs-gutter-y: 4.5rem;
  }
}
@media (min-width: 1200px) {
  .g-xl-6,
  .gx-xl-6 {
    --bs-gutter-x: 4.5rem;
  }
  .g-xl-6,
  .gy-xl-6 {
    --bs-gutter-y: 4.5rem;
  }
}
@media (min-width: 1400px) {
  .g-xxl-6,
  .gx-xxl-6 {
    --bs-gutter-x: 4.5rem;
  }
  .g-xxl-6,
  .gy-xxl-6 {
    --bs-gutter-y: 4.5rem;
  }
}
.mb-6 {
  margin-bottom: 4.5rem !important;
}
.py-6 {
  padding-top: 4.5rem !important;
  padding-bottom: 4.5rem !important;
}
.top-5px {
  top: 5px !important;
}
.top-10px {
  top: 10px !important;
}
.bottom-5px {
  bottom: 5px !important;
}
.bottom-10px {
  bottom: 10px !important;
}
.start-5px {
  left: 5px !important;
}
.start-10px {
  left: 10px !important;
}
.end-5px {
  right: 5px !important;
}
.end-10px {
  right: 10px !important;
}
.hcf-of-cover {
  object-fit: cover !important;
}
.hcf-op-center {
  object-position: center !important;
}
.hcf-ih-250 {
  height: 250px !important;
}
.hcf-ih-400 {
  height: 400px !important;
}
@media (min-width: 576px) {
  .mb-sm-6 {
    margin-bottom: 4.5rem !important;
  }
  .py-sm-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
  .hcf-ih-sm-250 {
    height: 250px !important;
  }
  .hcf-ih-sm-400 {
    height: 400px !important;
  }
}
@media (min-width: 768px) {
  .mb-md-6 {
    margin-bottom: 4.5rem !important;
  }
  .py-md-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
  .hcf-ih-md-250 {
    height: 250px !important;
  }
  .hcf-ih-md-400 {
    height: 400px !important;
  }
}
@media (min-width: 992px) {
  .mb-lg-6 {
    margin-bottom: 4.5rem !important;
  }
  .py-lg-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
  .hcf-ih-lg-250 {
    height: 250px !important;
  }
  .hcf-ih-lg-400 {
    height: 400px !important;
  }
}
@media (min-width: 1200px) {
  .mb-xl-6 {
    margin-bottom: 4.5rem !important;
  }
  .py-xl-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
  .hcf-ih-xl-250 {
    height: 250px !important;
  }
  .hcf-ih-xl-400 {
    height: 400px !important;
  }
}
@media (min-width: 1400px) {
  .mb-xxl-6 {
    margin-bottom: 4.5rem !important;
  }
  .py-xxl-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
  .hcf-ih-xxl-250 {
    height: 250px !important;
  }
  .hcf-ih-xxl-400 {
    height: 400px !important;
  }
}
.hcf-transform {
  transform: scale3d(1, 1, 1);
  transform-style: preserve-3d;
  transition: all 0.5s;
}
.hcf-transform:hover {
  transform: scale3d(1.02, 1.02, 1.02);
}
Copy
CSS
.g-6,
.gx-6 {
  --bs-gutter-x: 4.5rem;
}
.g-6,
.gy-6 {
  --bs-gutter-y: 4.5rem;
}
@media (min-width: 576px) {
  .g-sm-6,
  .gx-sm-6 {
    --bs-gutter-x: 4.5rem;
  }
  .g-sm-6,
  .gy-sm-6 {
    --bs-gutter-y: 4.5rem;
  }
}
@media (min-width: 768px) {
  .g-md-6,
  .gx-md-6 {
    --bs-gutter-x: 4.5rem;
  }
  .g-md-6,
  .gy-md-6 {
    --bs-gutter-y: 4.5rem;
  }
}
@media (min-width: 992px) {
  .g-lg-6,
  .gx-lg-6 {
    --bs-gutter-x: 4.5rem;
  }
  .g-lg-6,
  .gy-lg-6 {
    --bs-gutter-y: 4.5rem;
  }
}
@media (min-width: 1200px) {
  .g-xl-6,
  .gx-xl-6 {
    --bs-gutter-x: 4.5rem;
  }
  .g-xl-6,
  .gy-xl-6 {
    --bs-gutter-y: 4.5rem;
  }
}
@media (min-width: 1400px) {
  .g-xxl-6,
  .gx-xxl-6 {
    --bs-gutter-x: 4.5rem;
  }
  .g-xxl-6,
  .gy-xxl-6 {
    --bs-gutter-y: 4.5rem;
  }
}
.mb-6 {
  margin-bottom: 4.5rem !important;
}
.py-6 {
  padding-top: 4.5rem !important;
  padding-bottom: 4.5rem !important;
}
.w-100px {
  width: 100px !important;
}
.h-100px {
  height: 100px !important;
}
@media (min-width: 576px) {
  .mb-sm-6 {
    margin-bottom: 4.5rem !important;
  }
  .py-sm-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
}
@media (min-width: 768px) {
  .mb-md-6 {
    margin-bottom: 4.5rem !important;
  }
  .py-md-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
}
@media (min-width: 992px) {
  .mb-lg-6 {
    margin-bottom: 4.5rem !important;
  }
  .py-lg-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
}
@media (min-width: 1200px) {
  .mb-xl-6 {
    margin-bottom: 4.5rem !important;
  }
  .py-xl-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
}
@media (min-width: 1400px) {
  .mb-xxl-6 {
    margin-bottom: 4.5rem !important;
  }
  .py-xxl-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
}
Copy
.button {
 font-size: 30px;
 background-color:#FFCCD1;
 opacity: 1.8;
 transition: 0.3s;
 border-radius:15px;
 box-shadow: 0 9px #FFF2F3;
 border:none;
}
.button:hover {
  background-color: #ff7d8a;
  opacity: 1
}
.button:active {
  background-color: #00511d;
  box-shadow: 0 5px #d9ffe7;
  transform: translateY(4px);
}
body {
  margin: 0;
  background-attachment: fixed;
  background: -webkit-gradient(radial, 50% 0%, 0, 50% 0%, 100, color-stop(0%, #4e5a66), color-stop(40%, #343b43), color-stop(95%, #22272c), color-stop(100%, #22272c)), #22272c;
  background: -webkit-radial-gradient(center top, farthest-side, #4e5a66, #343b43 40%, #22272c 95%, #22272c), #22272c;
  background: -moz-radial-gradient(center top, farthest-side, #4e5a66, #343b43 40%, #22272c 95%, #22272c), #22272c;
  background: -o-radial-gradient(center top, farthest-side, #4e5a66, #343b43 40%, #22272c 95%, #22272c), #22272c;
  -pie-background: -pie-radial-gradient(unsupported), #22272c;
  background: radial-gradient(center top, farthest-side, #4e5a66, #343b43 40%, #22272c 95%, #22272c), #22272c;
  background: -ms-radial-gradient(center top, farthest-side, #4e5a66, #343b43 40%, #22272c 95%, #22272c), #22272c;
  -pie-background: radial-gradient(center top, farthest-side, #4e5a66, #343b43 40%, #22272c 95%, #22272c);
  position: relative;
  background-size: 800px 200px;
  background-position: center -50px;
  background-repeat: no-repeat;
}
<body>
  <h1 title="the message">Hello World</h1>
  <h2 title="the sender">From Nathan</h2>
</body>
const randomInt = (min, max) =>
  Math.floor(Math.random() * (max - min + 1) + min);
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0-modified | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* make sure to set some focus styles for accessibility */
:focus {
    outline: 0;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}

body {
	line-height: 1;
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration {
    -webkit-appearance: none;
    -moz-appearance: none;
}

input[type=search] {
    -webkit-appearance: none;
    -moz-appearance: none;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

textarea {
    overflow: auto;
    vertical-align: top;
    resize: vertical;
}

/**
 * Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
 */

audio,
canvas,
video {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    max-width: 100%;
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */

audio:not([controls]) {
    display: none;
    height: 0;
}

/**
 * Address styling not present in IE 7/8/9, Firefox 3, and Safari 4.
 * Known issue: no IE 6 support.
 */

[hidden] {
    display: none;
}

/**
 * 1. Correct text resizing oddly in IE 6/7 when body `font-size` is set using
 *    `em` units.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */

html {
    font-size: 100%; /* 1 */
    -webkit-text-size-adjust: 100%; /* 2 */
    -ms-text-size-adjust: 100%; /* 2 */
}

/**
 * Address `outline` inconsistency between Chrome and other browsers.
 */

a:focus {
    outline: thin dotted;
}

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */

a:active,
a:hover {
    outline: 0;
}

/**
 * 1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3.
 * 2. Improve image quality when scaled in IE 7.
 */

img {
    border: 0; /* 1 */
    -ms-interpolation-mode: bicubic; /* 2 */
}

/**
 * Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11.
 */

figure {
    margin: 0;
}

/**
 * Correct margin displayed oddly in IE 6/7.
 */

form {
    margin: 0;
}

/**
 * Define consistent border, margin, and padding.
 */

fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct color not being inherited in IE 6/7/8/9.
 * 2. Correct text not wrapping in Firefox 3.
 * 3. Correct alignment displayed oddly in IE 6/7.
 */

legend {
    border: 0; /* 1 */
    padding: 0;
    white-space: normal; /* 2 */
    *margin-left: -7px; /* 3 */
}

/**
 * 1. Correct font size not being inherited in all browsers.
 * 2. Address margins set differently in IE 6/7, Firefox 3+, Safari 5,
 *    and Chrome.
 * 3. Improve appearance and consistency in all browsers.
 */

button,
input,
select,
textarea {
    font-size: 100%; /* 1 */
    margin: 0; /* 2 */
    vertical-align: baseline; /* 3 */
    *vertical-align: middle; /* 3 */
}

/**
 * Address Firefox 3+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */

button,
input {
    line-height: normal;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Chrome, Safari 5+, and IE 6+.
 * Correct `select` style inheritance in Firefox 4+ and Opera.
 */

button,
select {
    text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 * 4. Remove inner spacing in IE 7 without affecting normal text inputs.
 *    Known issue: inner spacing remains in IE 6.
 */

button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button; /* 2 */
    cursor: pointer; /* 3 */
    *overflow: visible;  /* 4 */
}

/**
 * Re-set default cursor for disabled elements.
 */

button[disabled],
html input[disabled] {
    cursor: default;
}

/**
 * 1. Address box sizing set to content-box in IE 8/9.
 * 2. Remove excess padding in IE 8/9.
 * 3. Remove excess padding in IE 7.
 *    Known issue: excess padding remains in IE 6.
 */

input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
    *height: 13px; /* 3 */
    *width: 13px; /* 3 */
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
 *    (include `-moz` to future-proof).
 */

input[type="search"] {
    -webkit-appearance: textfield; /* 1 */
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box; /* 2 */
    box-sizing: content-box;
}

/**
 * Remove inner padding and search cancel button in Safari 5 and Chrome
 * on OS X.
 */

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

/**
 * Remove inner padding and border in Firefox 3+.
 */

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

/**
 * 1. Remove default vertical scrollbar in IE 6/7/8/9.
 * 2. Improve readability and alignment in all browsers.
 */

textarea {
    overflow: auto; /* 1 */
    vertical-align: top; /* 2 */
}

/**
 * Remove most spacing between table cells.
 */

table {
    border-collapse: collapse;
    border-spacing: 0;
}

html,
button,
input,
select,
textarea {
    color: #222;
}


::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

img {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}
/* .weekday--content {
    border-top: 1px solid var(--lightgray);
    border-left: 2px solid var(--lightgray);
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr; 
    min-height: 70px;
} */

.weekviews--container {
    display: grid;
}

.weekday--content:hover {
    cursor: pointer;
    border-top: 1px solid rgba(116, 171, 168, 0.8);
    border-left: 2px solid rgba(116, 171, 168, 0.8);
}

.weekday--content:hover  .block--left {
    background-color: rgba(116, 171, 168, 0.8);
}

.weekday--content:active {
    cursor: pointer;
    border-top: 1px solid rgba(116, 171, 168, 1);
    border-left: 2px solid rgba(116, 171, 168, 1);
}

.weekday--content:active  .block--left {
    background-color: rgba(116, 171, 168, 1);
}

.block--left {  
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

/* .block--left{
    display: flex;
    flex-direction: column-reverse;
    background-color: var(--lightgray);
    height: 100%;
} 

*/

.block--week {
    margin-top: 40px;
    padding: 0px;
    display: inline;
    color: white;
    /* transform: rotate(270deg); */
    white-space: nowrap;
    width: 100%;
}



.block--event {
    margin: 0px;
    padding-top: 5px;
    padding-left: 5px;
}

/* today */
.day--block {
    border-top: 1px solid white;
    border-left: 2px solid white;
}
.day--block:hover{
    border-top: 1px solid white;
    border-left: 2px solid white;
}

.day--block > .weekview--block > .block--left{
    color: black;
    background-color: white;
}

.day--block > .weekview--block > .block--left > p{
    color: black;
}


.day--block:hover{
    border-top: 1px solid rgba(255, 255, 255, 0.8);
    border-left: 2px solid rgba(255, 255, 255, 0.8);
}

.day--block:hover > .weekview--block > .block--left{
    color: white;
    background-color: rgba(255, 255, 255, 0.8);
}

.day--block:hover > .weekview--block > .block--left > p{
    color: black;
}

.day--block:active{
    border-top: 1px solid black;
    border-left: 2px solid black;
}

.day--block:active > .weekview--block > .block--left{
    background-color: black;
}

.day--block:active > .weekview--block > .block--left > p{
    color: white;
}

/* clicked */
.weekday--clicked:not(.day--block) {
    border-top: 1px solid var(--blue);
    border-left: 2px solid var(--blue);
}

.weekday--clicked:not(.day--block) >.weekview--block >  .block--left {
    background-color: var(--blue);
}

.weekday--clicked:hover:not(.day--block) {
    border-top: 1px solid rgba(116, 171, 168, 0.6);
    border-left: 2px solid rgba(116, 171, 168, 0.6);
}

.weekday--clicked:hover:not(.day--block) >.weekview--block >  .block--left {
    background-color: rgba(116, 171, 168, 0.6);
}
<html>
    <head>
        <style>
  
  			/* Sticky - position: sticky is a mix of position: relative and position: fixed. It acts like a relatively positioned element until a certain scroll point and then it acts like a fixed element. Have no fear if you don't understand what this means, the example will help you to understand it better. */
  			.main-element {
                  position: sticky;
                  top: 10px;
                  background-color: yellow;
                  padding: 10px;
              }

              .parent-element {
                  position: relative;
                  height: 800px;
                  padding: 50px 10px;
                  background-color: #81adc8;
              }
  		
        </style>
    </head>
	<body>
        <div class="parent-element">
            <div class="sibling-element">
                I'm the other sibling element.
            </div>
            
            <div class="main-element">
                All eyes on me. I am the main element.
            </div>
            
            <div class="sibling-element">
                I'm the other sibling element.
            </div>
        </div>
    </body>
<html>
<html>
  	<head>
  		<style>
  
  			/* Fixed position elements are similar to absolutely positioned elements. They are also removed from the normal flow of the document. But unlike absolutely positioned element, they are always positioned relative to the <html> element.
One thing to note is that fixed elements are not affected by scrolling. They always stay in the same position on the screen. */
  			
  			.main-element {
                position: fixed;
                bottom: 10px;
                left: 10px;
                background-color: yellow;
                padding: 10px;
            }

            html {
                height: 800px;
            }
  		</style>
  	</head>
	<body>
        <div class="parent-element">
            <div class="sibling-element">
                I'm the other sibling element.
            </div>
            
            <div class="main-element">
                All eyes on me. I am the main element.
            </div>
            
            <div class="sibling-element">
                I'm the other sibling element.
            </div>
        </div>
    </body>
<html>
<html>
  	<head>
  		<style>
  
  			/* Absolute - Elements with position: absolute are positioned relative to their parent elements. In this case, the element is removed from the normal document flow. The other elements will behave as if that element is not in the document. No space is created for the element in the page layout. The values of left, top, bottom and right determine the final position of the element.

One thing to note is that an element with position: absolute is positioned relative to its closest positioned ancestor. That means that the parent element has to have a position value other than position: static.

If the closest parent element is not positioned, it is positioned relative to the next parent element that is positioned. If there's no positioned ancestor element, it is positioned relative to the <html> element.

Let's get back to our example. In this case, we change the position of the main element to position: absolute. We will also give its parent element a relative position so that it does not get positioned relative to the <html> element. */
  			
            .main-element {
            position: absolute;
            left: 10px;
            bottom: 10px;
            background-color: yellow;
            padding: 10px;
        }

            .parent-element {
              position: relative;
              height: 100px;
              padding: 10px;
              background-color: #81adc8;
            }

            .sibling-element {
                background: #f2f2f2;
                padding: 10px;
                border: 1px solid #81adc8;
            } 
  	    </style>
  	</head>
  
  
	<body>
        <div class="parent-element">
            <div class="sibling-element">
                I'm the other sibling element.
            </div>
            
            <div class="main-element">
                All eyes on me. I am the main element.
            </div>
            
            <div class="sibling-element">
                I'm the other sibling element.
            </div>
        </div>
    </body>
<html>
<html>
  	<head>
  		<style>
  
  			/* Relative - Elements with position: relative remain in the normal flow of the document. But, unlike static elements, the left, right, top, bottom and z-index properties affect the position of the element. An offset, based on the values of left, right, top and bottom properties, is applied to the element relative to itself. */				
  
  			.main-element {
              position: relative;
              left: 10px;
              bottom: 10px;
              background-color: yellow;
              padding: 10px;
        	}

            .sibling-element {
                padding: 10px;
                background-color: #f2f2f2;
            }
        </style>
    </head>
	<body>
        <div class="parent-element">
            <div class="sibling-element">
                I'm the other sibling element.
            </div>
            
            <div class="main-element">
                All eyes on me. I am the main element.
            </div>
            
            <div class="sibling-element">
                I'm the other sibling element.
            </div>
        </div>
    </body>
<html>
<html>
  <head>
    <style>
  	/* STATIC - This is the default value for elements. The element is positioned according to the normal flow of the document. The left, right, top, bottom and z-index properties do not affect an element with position: static.*/
      .main-element {
        position: static;
        left: 10px;
        bottom: 10px;
        background-color: yellow;
        padding: 10px;
    }

    .sibling-element {
        padding: 10px;
        background-color: #f2f2f2;
    }
    </style>
  </head>
  	
	<body>
        <div class="parent-element">
            <div class="sibling-element">
                I'm the other sibling element.
            </div>
            
            <div class="main-element">
                All eyes on me. I am the main element.
            </div>
            
            <div class="sibling-element">
                I'm the other sibling element.
            </div>
        </div>
    </body>
<html>
.pp-content-post .pp-content-grid-post-image{
    overflow: hidden;
    border-radius: 12px;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0)
}
.pp-content-post .pp-content-grid-post-image img{
    transition: all .3s ease-in-out;
}
.pp-content-post:hover .pp-content-grid-post-image img{
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Increasing and Decreasing Image Size</title>
<script>
    function zoomin(){
        var myImg = document.getElementById("sky");
        var currWidth = myImg.clientWidth;
        if(currWidth == 500){
            alert("Maximum zoom-in level reached.");
        } else{
            myImg.style.width = (currWidth + 50) + "px";
        } 
    }
    function