Colours.js
==========

import React from ‘react’

import ‘./Style.css’;
import ‘./Media-styles.css’;

import Graphite from ‘./img/at-logo.webp’;
import DeltaBlue from ‘./img/bp-logo.webp’;
import Moonlight from ‘./img/sp-logo.webp’;

function Colours() {
return (
<>

)
}

export default Colours

===============================================================================

Font_style.css
==============

.welcome-col-left h1,
.welcome-col-left h2,
.col1 h1,
.col4 h1,
.col1 h5,
.col4 h5 {
line-height: 1.4;
font-weight: 500;

}

.welcome-col-left h2 {
font-size: 28px;

}

.col1 h1,
.col4 h1,
.col1 h5,
.col4 h5,
.note p,
.pro-col-col h4,
.pro-col-col p {
color: #fff ! important;
}

.IndicatorCarouselText h1,
.welcome-col-left h1,
.mpd-col-right h1,
.blue-bar h4,
.Gal-info h2 {
color: #222;
}

.welcome-col-left h3,
.mpd-col-right h2,
.Gal-info p,
.blue-bar p {
color: #222 !important;
}

.IndicatorCarouselText h1,
.welcome-col-left h1,
.mpd-col-right h1,
.best-sellers h1,
.best-sellers-home h1,
.inner_body h1 {
font-size: 50px;

}

.IndicatorCarouselText h1 {
text-align: center;

padding: 80px 0 35px !important;

font-weight: 400;
margin : 0 !important;

}

.IndicatorCarouselText em {
font-style : normal;
/*text-transform: uppercase;*/
font-weight : 800;
}

.welcome-col-left h1,
.mpd-col-right h1 {

line-height: 1.3;
}

.welcome-col-left h1,
.welcome-col-left h3,
.mpd-col-right h1,
.mpd-col-right h3 {

text-align: left;

}

.col1 h1 {
text-align: left;
padding : 70px 0 0 30px;
}

.col4 h1 {
text-align : left;
/*padding : 30px 100px 0 30px;*/
padding : 70px 100px 0 30px;
}

.col1 h5,
.col4 h5 {
font-weight: 400;
text-align : left;
padding : 0 100px 0 30px;
font-size : 16px;
}

.welcome-col-left h1,
.col1 h1,
.col4 h1,
.mpd-col-right h1 {

font-weight: 400;

}

.col1 h1,
.col4 h1 {
font-size: 24px;
}

.welcome-col-left h3,
.mpd-col-right h3 {
/*font-size:26px;*/
font-size : 18px;
font-weight : 400;
padding : 0;
line-height : 1.4;
padding-bottom: 15px;

}

.best-sellers h1,
.best-sellers h4,
.best-sellers-home h1,
.best-sellers-home h4 {
text-align : center;
/*color : #404040 ! important;*/
}

.best-sellers h1,
.best-sellers-home h1,
.inner_body h1 {
font-weight : 500;
text-align : center;
padding-bottom: 0 ! important;
}

.inner_body h2 {
font-size : 24px;
/*font-size : 18px;*/
text-align : left;
font-weight : 400;
/*color : #404040 ! important;*/

}

.inner_body h4 {
font-size : 20px;
text-align : left;
font-weight: 400;

}

.inner_body h5 {
font-size : 16px;
text-align : left;
font-weight: 800;

}

.best-sellers h4,
.best-sellers-home h4,
.inner_body h3 {
font-size : 24px;
font-weight: 400;
text-align : center;
padding-top: 0 ! important;
margin-left: 10px;
}

.success h3 {
padding: 50px 0 ! important;
}

.blue-bar h4 {
text-align: center;
padding : 30px 30px 0;
}

.Gal-info h2 {
text-align: left;
}

.blue-bar h4,
.Gal-info h2 {
display : block;
font-size : 30px;
font-weight : 400 ! important;
margin : 0;
/* padding : 20px 30px 0 30px;*/
padding : 15px 30px 0 30px;
}

.Gal-info p {
/* padding: 0 30px 0 30px;*/
padding: 0 30px 0 30px;

line-height: 1.7;
}

.blue-bar p {

line-height: 1.5;
padding : 0 80px 0;
}

.inner_body p {

line-height: 1.7;
}

.inner_body h6 {
color: transparent ! important;
}

.note p {

text-align: center ! important;
font-size : 14px;

line-height: 1.7;
}

h3.ft-col-tit {
margin : 0 0 20px 0 ! important;
text-transform: uppercase;

text-align : left;
font-weight: bolder;

}

.pro-col-col h4 {

padding : 130px 100px 0;
font-size : 30px;
font-weight: 400;
margin : 0
}

.pro-col-col p {

line-height: 1.5;
padding : 0 50px 50px;
}

em.best {
font-style : initial;
font-weight: 800;
}

@media screen and (max-width: 1365px) and (min-width: 768px) {
.note p {
padding: 20px 30px !important;
}
}

@media screen and (min-width: 1366px) {
.note p {
padding: 20px 350px !important;
}
}

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

.IndicatorCarouselText h1,
.welcome-col-left h1,
.mpd-col-right h1,
.best-sellers h1,
.best-sellers-home h1,
.inner_body h1 {
font-size: 26px !important;
}

.IndicatorCarouselText h1 {
color: #fff ! important;
}

.welcome-col-left h3,
.mpd-col-right h3 {
/*font-size:26px;*/
font-size: 18px;

}

.blue-bar h4,
.Gal-info h2 {

font-size: 22px !important;
}

.inner_body h4 {
padding : 0 30px 20px 30px !important;
line-height: 1.5 !important;
font-size : 18px !important;
font-weight: 600;
;

}

}

========================================================================================================

Footer.css
==========

.ft_main_container {
display : flex;
width : 100%;
background: linear-gradient(90deg, rgb(0, 21, 43), rgb(115, 115, 115) 35%, rgb(196, 196, 196) 100%);

margin: auto;
}

.footer-container {

display: flex;

margin: 20px auto 0;
width : 1140px;
}

ul li.ft-col-list,
ul li.social {
list-style: none ! important;
}

.footer-col1,
.footer-col2,
.footer-col3,
.footer-col4 {
display: block;
float : left;
padding: 30px 15px;

}

.footer-col1 img {
width : 100%;
padding: 0 0 20px 0;

}

.footer-col1 {
width : 32%;
margin-right: 30px;
}

.footer-col2,
.footer-col3,
.footer-col4 {
width: 22%;
color: #fff;
}

.ft-info,
h3.ft-col-tit,
ul li.ft-col-list a {
font-size: 14px ! important;
}

.ft-info {
color : #ffffff;
text-align : left;
display : flex;
float : left;
width : 70%;
line-height: 1.6;
}

ul {
padding: 0 ! important;

}

ul li.ft-col-list a {

text-align : left;
line-height : 2.2;
/*color : #898989;*/
color : #ffffff;
text-transform : initial ! important;
font-weight : 500;
;

}

ul li.ft-col-list a:hover {
color: #1568b2 !important;
}

.privacy {
margin-top: 32px;
}

.social a img {
display : flex;
float : left;
background: #0e2a4b;
width : 10%;
padding : 5px;
margin : 0 5px 0 0;
}

.social a:hover img {
background: #1568b2 !important;

}

====================================================================================================

Footer.js
=========

import React from ‘react’
import ‘./Footer.css’;
import ‘./Media-styles.css’;
import FB from ‘./img/fb.png’;
import Inst from ‘./img/instagram.png’;
import Mail from ‘./img/mail.png’;
import Phone from ‘./img/call.png’;

import { Helmet } from ‘react-helmet’;

function Footer() {
return (
<>

)
}

export default Footer;

=================================================================================================================

Header.css
===========

#header-container {
display : block;
width : 100%;
/*margin :10px auto 0 auto;*/
background: #ffffff;
position : relative;
margin-top: -25px;
transition: 0.2s;
z-index : 20000;
height : 0px ! important;

}

.header-logo-navbar {
display: flex;
width : 1147px;
margin : 30px auto 0 auto;
}

.header-left,
.header-right {
display: block;
float : left;
}

.header-left {
width: 26%;

}

.header-left img {
width : 80%;
padding: 20px;

}

.header-right {
width: 100%;

}

=================================================================

Header.js
=========

import React from ‘react’
import ‘./Header.css’;
import ‘./Media-styles.css’;
// import Navigation from ‘./Navigation’;
// import Logo from ‘./img/2024Logos_1024x365px.webp’

function Header() {
return (
<>

)
}

export default Header

=====================================================================

Home.css
========

.home-container {
display: block;
width : 100%;
margin : 0;
}

.infodata {
display: none;
}

.main-banner {
display: block;
width : 100%;
margin : 20px auto;
height : 780px;

background-size : cover;
/*background-attachment: fixed;*/
}

.main-banner-mob,
.Home-section1-mob img,
.Home-section1-mob {
display: none;
}

.main-banner img {
width : 35%;
padding-top: 17% !important;
display : block;
margin : auto;

}

.back-btn a img {
width : 15%;
padding: 5px 0 20px 0;
}

.pro-col-col,
.pro-col1,
.pro-col2,
.pro-col3,
.pro-col4,
.pro-col5,
.pro-col6,
.pro-col7 {
display : block;
float : left;
/*width : 23%;*/
/*width : 24.8%;*/
width : 30%;
text-align : center;
margin : 15px;

}

.pro-col-col {
margin-right: 3px;
}

.pro-col-col {
background: #0e2a4b;
height : 500px;
}

.pro-col1 img,
.pro-col2 img,
.pro-col3 img,
.pro-col4 img,
.pro-col5 img,
.pro-col6 img,
.pro-col7 img {

width: 100%;
}

.react-multiple-carousel__arrow–right {
right: calc(2% + 1px) !important;
}

.react-multiple-carousel__arrow–left {
left: calc(2% + 1px) !important;
}

.react-multiple-carousel__arrow {
background: rgba(255, 255, 255, 0.5) !important;
}

.react-multiple-carousel__arrow::before {
color: #222 !important;
}

.welcome-container,
.welcome-container-gnt {
display : flex;
width : 100%;
/*margin : 40px auto;*/
margin : auto;
flex-direction: row;
;

margin-bottom: 2px;

}

.welcome-col-right img {
width: 100%;

}

.welcome-col-left,
.welcome-col-right,
.mpd-col-left,
.mpd-col-right {
display: block;
float : left;
width : 50%;

}

.more a {
display : inline-flex;
padding : 15px;
background : rgb(0, 140, 193);
text-align : center;
color : rgb(255, 255, 255);
border-radius: 5px;

margin-bottom: 20px;
}

.more a:hover {
background: rgba(0, 140, 193, 0.67);
}

.welcome-copy {
padding: 120px 30px 0 370px;
}

.mpd-copy {
padding: 150px 250px 0 30px;
}

.welcome-col-left {

background-size : cover;
background-position: center;

margin-bottom: 20px;
}

.welcome-4_col {
display: block;
float : left;

width : 25%;
background: #05b4c9;
text-align: center;

height: 445px;
}

em.space {
color : transparent !important;
height : 20px;
display: block;
}

em.space2rw {
color : transparent !important;
height : 40px;
display: block;
}

.col1 {
background: #0e2a4b;
}

.col2 {

background-size: cover;
}

.col3 {

background-size: cover;
}

.col4 {
background: #05b4c9;
}

.line-btn a,
.mpd-btn a {
display : block;
float : left;
padding : 20px 30px;
border : 1px solid #0e2a4b;
text-align : center;
color : #222;
text-transform: uppercase;

}

.line-btn a {
margin: 30px 0 0 250px;
}

.mpd-btn a {
margin: 30px 250px 0 30px;
}

.home-caption img {
display : block;
text-align : center;
margin-top : -900px;
margin-left : auto;
margin-right: auto;

color : #fff;
position: relative;
}

.Home-section1 {

background: #0e2a4b;
display : block;
margin : 100px auto auto;
opacity : .8;
position : relative;
z-index : 200;
}

.main-banner video {
position : relative;
max-width: 100%;
width : 100% !important;
}

.Home-section1 img {
height : auto;
margin : auto;
display: block;
width : 1147px;
}

.blue-bar {
background : #0e2a4b29;
padding : 15px;
color : #0e2a4b;
text-align : left;
font-weight : 800;
margin-top : -5px;
border-radius: 0 0 10px 10px;
}

.best-sellers-home,
.best-sellers,
.products-container-home {
background-image: linear-gradient(#0e2a4b29, white, #0e2a4b29);
height : 500px
}

.best-sellers-home,
.best-sellers,
.products-container,
.products-container-home,
.range-container {

width : 100%;
display: block;
margin : 2px auto;

}

.best-sellers,
.products-container {
float: left;
}

.line_bt a,
.download_btn a {
display : block;
border : 1px solid #fff;
padding : 10px;
color : #fff;
text-transform: uppercase;
text-align : ce;
;

text-decoration: none;
margin-left : 30px;
}

.line_bt a {
width: 30%;
}

.download_btn a {
width: 40%;
}

.GallerySection {
display: block;
width : 100%;

height: 899px;
}

.IndicatorCarousel img {
display: block;
height : auto;
float : initial;
margin : auto !important;
width : 70%;
}

.IndicatorCarousel {
display: block;
float : initial;
width : 100%;

}

.Gal-info {
display : block;
width : 70%;
/*background : #d8dde2;*/
background : #fff;
margin : auto;
text-align : left;
padding-bottom: 20px;
height : auto;
}

.Gal-info img {
width : 37%;
height : auto;
float : right;
display : block;
padding-left: 5px;
/*margin-top:-25px !important;*/
margin-top : -50px !important;
}

.gframe {
height: 1700px;
}

.cframe {
/*height: 1000px;*/
height: calc(110vh – 95px) !important;
width : 100% !important;

}

.gframe {
/*height: 1000px;*/
height: calc(220vh – 95px);
width : 100% !important;

}

.gframe,
.cframe {
display: block;
width : 100%;
border : 0 !important;

}

@media screen and (max-width:767px) {
.gframe {

height: calc(250vh – 95px) !important;
}

.cframe {

height: calc(120vh – 95px) !important;
}
}

@media screen and (max-width: 1800px) and (min-width: 768px) {

.gframe {
/*height: 1000px;*/
height: calc(220vh – 95px) !important;
width : 100% !important;

}

}

===============================================================================================

Home.js
=======

import React from ‘react’
import Header from ‘./Header’;
import Footer from ‘./Footer’;
import ‘./Home.css’;
import ‘./Media-styles.css’;

import Welcome from ‘./Welcome’;

import { Helmet } from ‘react-helmet’;
import { HelmetProvider } from ‘react-helmet-async’;
function Home() {
return (
<>