/*------------------------
Theme Name: ARSD Buis
version: 1.0
-----------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');
/*------------------------------------------
+++++ Basic settings+++++
-------------------------------------------*/
html {
scroll-behavior: smooth;
}
body {
font-family: 'Open Sans', sans-serif; /*---Basic Font family------*/
}
h1, h2, h3, h4, h5, h6 {
font-family: "Noto Sans", sans-serif; /*---Basic Title Font family------*/
}
a, a:hover {
text-decoration: none; /*---Link underline remove------*/
}
/*----------------------------------------
++++Fix the Container Width+++
-----------------------------------------*/
.container {
min-width: 70%; /*----Container minimum width that will be mantain---*/
max-width: 80%; /*----Container maximum width that will be mantain---*/
}
/*------------------------------------------
+++++ Menu Background +++++
Top Menu
-------------------------------------------*/
/*------------------------------------------------------------------------
***Menu Background, Dropdown menu Background,Dropdow Item Background
will be Affected only for Big Screen ( minimum 768px )
***This Background Color will be changed after Scroll
------------------------------------------------------------------------*/
.navbar, /*--Menu Background Color--*/
.navbar .dropdown-menu, /*--dropdown menu Background---*/
.navbar .dropdown-menu a:hover ,
.navbar .dropdown-menu .active { /*---dropdown Menu item background color when hover -----*/
background-color: transparent !important; /*----Menu Background Color(on Big Screen)-----------*/
}
/*---------------------------------------------------------------
+++++ Menu Background only for big screen +++++
-----------------------------------------------------------------*/
/*------------------------------------------------------------------------
***for Menu Background only for Big Screen ( minimum 768px )
add some padding and Bottom Border
***for Dropdown Menu only for Big Screen ( minimum 768px )
remove all Border
------------------------------------------------------------------------*/
@media screen and (min-width:1000px){ /*-----Media Quary Start-------*/
.navbar .container-fluid{ /*----Menu (on big Screen)-----------*/
width: 95%;
padding: 1.5vw 0pt; /*------Menu Top and Bottom Height (on Big Screen)-------*/
border-bottom: 1px solid rgba(255,255,255 ,0.1); /*------Menu Bottom Border (on Big Screen)-------*/
}
.navbar .dropdown-menu {
border: none; /*------Remove dropdown menu border-------*/
}
}/*-----Media Quary End-------*/
/*---------------------------------------------------------------
+++++ Menu Background only for small screen +++++
-----------------------------------------------------------------*/
/*------------------------------------------------------------------------
***Menu only for small Screen ( maximum 992px )
i)Menu will be fixed in top
ii)Menu Item will stay in center
iii)Menu Background Color will be like after scroll Backround Color
iv)Add some padding and margin
------------------------------------------------------------------------*/
@media screen and (max-width: 992px) { /*-----Media Quary Start-------*/
.navbar { /*----Menu (on Small Screen)-----------*/
position: absolute; /*---on small sreen menu will be fixed on top position-----*/
width: 100%; /*-----On Small screen menu will take full width ------*/
top: 0;/*----on small screen menu will be fixed on Top-----*/
text-align: center; /*--On small screen menu item will be in center position--*/
background-color: #0E0E57 !important; /*----On small screen menu Background Color-----*/
padding: 3vw; /*-----On Small screen menu top and bottom extra width-----*/
margin-bottom: 5vw;
}
}/*-----Media Quary End-------*/
/*---------------------------------------------------------------
+++++ Menu Background when scrolled and
available for only big screen +++++
-----------------------------------------------------------------*/
.navbar:is(.scrolled), /*----Menu Background color when scrolled |scrolled class is defined in j-query -----------*/
.navbar:is(.scrolled) .dropdown-menu, /*---- dropdown Menu Background and border when scroll-----------*/
.navbar:is(.scrolled) .dropdown-menu a:hover {
background-color:#0E0E57 !important; /*-----on scrolled background color---*/
border:none; /*----on scrolled remove border ------*/
}
.navbar:is(.scrolled) .container-fluid{
border: none;
}
/*------------------------------------------
++++ Menu Logo +++
-------------------------------------------*/
.navbar img{
width:clamp(70pt,10vw,120pt); /*---------Logo width in different device-----------*/
object-fit:cover; /*--Logo size resize---*/
}
/*------------------------------------------
+++ Menu Item +++
-------------------------------------------*/
.navbar a,
.navbar .dropdown .show {
font-size: clamp(10pt,2vw,11pt); /*----Menu font size-----*/
color: #ffffff; /*----Menu Font color----*/
text-transform: capitalize; /*----Ment font style----*/
font-weight: normal; /*----Menu Font width-----*/
letter-spacing: 0.5pt; /*---Menu font letter spacing----*/
}
.navbar a:hover,
.navbar a:focus {
color: #ff0000; /*-----Menu Font when hover----*/
}
.navbar .active:not(.dropdown-toggle) {
color: #ff0000; /*-----Menu Font when active----*/
}
/*-------------------------------------------------------------------
++++ Dropdown Menu only available for small screen +++
-------------------------------------------------------------------*/
@media screen and (max-width: 992px) { /*-----Media Quary Start-------*/
.navbar .dropdown-menu a{ /*-----Dropdown menu on small screen------*/
text-align: center;/*--------on small screen dropdown menu item will be on center-------*/
}
.navbar .dropdown-menu{
border: none; /*---Remove border On small screen dropdown menu----*/
}
}/*-----Media Quary End-------*/
/*--------------------------------------------------------------
Small Screen Button | Button to show menu |
button only available in small screen
---------------------------------------------------------------*/
/*------------------------------------------------------------------------
***Ham berger Button ( maximum 768px )***
i)Remove Button Border,Remove shadow
ii)'X' button will be available after clicking Hamberger Button
------------------------------------------------------------------------*/
.navbar .navbar-toggler {
border: none; /*--on small screen collapse button border remove---*/
}
.navbar .navbar-toggler i{
color: #AB1B1F !important; /*----On small screen collapse button color-----*/
font-size: 18pt; /*------On small screen Collapse button size------*/
}
.navbar .navbar-toggler .close {
display: none; /*----On small screen 'X' button is invisible | after clicking 'Hamburger' button 'X' button will be displayed-------*/
}
.navbar .navbar-toggler:focus {
outline: none !important; /*------remove outline of Collapse button On small screen ---------*/
box-shadow: none !important;/*----remove shadow of collapse button on small screen-----*/
}
/*-----------------------------------------
Menu Social Icon
------------------------------------------*/
/*------------------------------------------
Right Side Social media is only
available in Big Screen
--------------------------------------------*/
.navbar .btn-square {
border: 2px solid #ffffff; /*-----Social Icon border------*/
color: #ffffff; /*----Social Icon Color--------*/
transition: all cubic-bezier(0.455, 0.03, 0.515, 0.955) ;/*-------Social button transform on click animation---------*/
display: flex;
justify-content: center;
align-items: center;
width: 25pt;
height: 25pt;
margin-right: 5pt;
}
.navbar .btn-square:hover {
background-color: #ffffff; /*-----Social button background color on hover------*/
color: #ff0000;/*------Social icon color on hover------------*/
}
.navbar .btn-square i{
font-size: clamp(8pt,1vw,9pt);/*-------Social Icon font size---------*/
}
/*---------------------------------------------
+++Hero Section ( Front Page )+++
-----------------------------------------------*/
/*----------------------------
Fix the slide position
-----------------------------*/
.HeroSection .carousel-item { /*----adjust Slide Height and Width-----*/
transition: opacity ease-out 0.5s; /*----slide image change with opacity-----*/
height: clamp(250pt,60vw,550pt); /*---- Slide Height -----*/
width: 100%; /*--Slide Full Width---*/
position: relative;
text-align: center;
isolation: isolate;
z-index: 1;
}
/*--------------------------------
fix slide Image position
-----------------------------------*/
.HeroSection img{ /*---- Slide Image|| every image act like a background iamge-----*/
width: 100%; /*----Slide Image full width-----*/
height: 100%; /*----Slide image take full width-----*/
position: absolute;/*-----Slide Image take absolute position----------*/
top: 0;
left: 0;
object-fit: cover;
}
/*--------------------------------
Change slide Image Color
-----------------------------------*/
.HeroSection .slide-bg::after{ /*-----------Backround over slide image || Slide bg is the div that contain slide image---------------*/
content: '';
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: rgba(0, 0, 0,0.5);
background-blend-mode: multiply;
}
/*-------------------------------------------------------------
+++ Slide Text ( Hero Section--Front Page )+++
--------------------------------------------------------------*/
/*--------------------------------
Text Holder
fix slide Text position
-----------------------------------*/
.HeroSection .text-box { /*----Slide Text Holder----*/
position: absolute;
top: 55%;
left: 50%;
transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
width: 100%;
}
/*--------------------------------
Slide Title-1
-----------------------------------*/
.HeroSection h4{ /*-----Section title-1 -------*/
font-size: clamp(8pt,2vw,11pt);
font-family: "Montserrat", sans-serif;
text-transform: capitalize;
font-weight: normal;
text-align: center;
color: #f3f4f7;
width: clamp(156pt,65%,700pt);
display: block;
margin: 5pt auto;
letter-spacing: 2pt;
text-wrap: pretty;
}
/*--------------------------------
Slide Title-2
-----------------------------------*/
.HeroSection h1{ /*-----Section title-2 -------*/
font-size: clamp(12pt,5vw,42pt);
text-transform: uppercase;
font-weight: bolder;
padding-bottom: 0.5vw;
text-align: center;
color: #ffffff;
width: clamp(156pt,65%,700pt);
display: block;
margin: auto;
letter-spacing: 2pt;
text-wrap: pretty;
}
/*--------------------------------
Slide Text
-----------------------------------*/
.HeroSection p{ /*-----Section text-------*/
font-weight: normal;
font-size: clamp(6pt,2vw,10pt);
color: #cccccc;
width: clamp(212pt,65%,800pt);
display: block;
margin: auto;
padding-bottom: 2vw;
text-wrap: balance;
}
.HeroSection .btn { /*-----Section Button---------*/
font-size: clamp(6pt,2vw,12pt);
padding: clamp(4pt,1vw,10pt) clamp(15pt,3vw,30pt);
border: none;
border-radius: 30px;
text-transform: uppercase;
font-weight: bolder;
box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.1), -6px -6px 12px rgba(0, 0, 0, 0.15) inset, 6px 6px 12px rgba(255, 255, 255, 0.25) inset, -6px -6px 12px rgba(255, 255, 255, 0.05);
}
.HeroSection .btn1 ,
.HeroSection .btn1:hover,
.HeroSection .btn1:active{ /*-----hero section Button 1 ---------*/
border: none;
background-color: #ffffff;
box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.1), -6px -6px 12px rgba(0, 0, 0, 0.15) inset, 6px 6px 12px rgba(255, 255, 255, 0.25) inset, -6px -6px 12px rgba(255, 255, 255, 0.05);
}
.HeroSection .btn1 a,
.HeroSection .btn1 a :hover { /*-----hero section Button 1 when hover---------*/
color: #ff4c4c;
}
.HeroSection .btn2,
.HeroSection .btn2:hover,
.HeroSection .btn2:active { /*-----hero section Button 2 ---------*/
border: none;
background-color: #ff4c4c;
box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.1), -6px -6px 12px rgba(0, 0, 0, 0.15) inset, 6px 6px 12px rgba(255, 255, 255, 0.25) inset, -6px -6px 12px rgba(255, 255, 255, 0.05);
}
.HeroSection .btn2 a,
.HeroSection .btn2 a:hover { /*-----hero section Button 2 when hover---------*/
color: #ffffff;
}
/*-------------------------------------------------
+++About Section++
( For Front page and About us page )
--------------------------------------------------*/
.about-section {
overflow: hidden; /*-----Not item can exit this section ( Left or right margin) ----------*/
}
/*---------------------------------------------------------------
main Row
( About Section -- available in
Front Page and about us page )
----------------------------------------------------------------*/
.about-section .g-5{ /*-----row style only if has image-------------*/
display: flex;
justify-content: center ;
padding: 6vw 0pt;
}
/*---------------------------------------------------------------
Main Column
( About Section -- available in
Front Page and about us page )
----------------------------------------------------------------*/
.about-section .col-12:not(.img-block){ /*-----Column padding not for image-------------*/
padding-left: 4vw;
}
@media screen and (max-width: 1200px) { /*-----Media Quary for maximum 1200px but more than 768px start here---------*/
.about-section .col-12:not(.img-block){ /*-----Colum padding not for image-------------*/
padding-top: clamp(10pt,3.5vw,50pt);
}
}/*-----Media Quary for maximum 1200px but more than 768px End here---------*/
/*---------------------------------------------------------------
Section Title and Text
( About Section -- available in Front Page
and about us page )
----------------------------------------------------------------*/
.about-section h4:not(.count-number) { /*-----Title1-------------*/
text-transform: uppercase;
color: #B71D21;
font-weight: normal;
font-size: clamp(10pt,2vw,11pt);
font-family: "Montserrat", sans-serif;
text-wrap: pretty;
}
.about-section h1:not(.count-number) { /*-----Title2-------------*/
font-size: clamp(21pt,3vw,36pt);
text-transform: capitalize;
color: #000000;
font-weight: bolder;
padding-bottom: 1vw;
text-wrap: pretty;
}
.about-section p:not(.count-number) { /*-----Text-------------*/
font-weight: normal;
font-size: clamp(9pt,2vw,12pt);
color: #6a737b;
text-wrap: pretty;
}
/*---------------------------------------------------------------
Image
( About Section -- available in Front Page
and about us page )
----------------------------------------------------------------*/
.about-section .img-block{ /*---- left column image holder or div-----*/
position: relative;
height: clamp(250pt,60vh,420pt);
}
.about-section img{ /*----- Image of left column-------------*/
height: 85%;
width: 80%;
position: absolute;
object-fit: cover;
top: 15%;
left: 15%;
border: clamp(10pt,4vw,15pt) solid #82231c;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
@media screen and (max-width: 768px) { /*---Media Quary only for ( Small Screen->maximum 768px ) Start here-----------*/
.about-section img{ /*----- Image-------------*/
height: 85%;
width: 90%;
top: 10%;
left: 10%;
}
}/*---Media Quary only for ( Small Screen->maximum 768px ) End here-----------*/
/*---------------------------------------------------------------
Create a box behind the image
( About Section -- available in Front Page
and about us page )
----------------------------------------------------------------*/
.about-section .box{ /*------rectangle behind the image|| Create a rectangle before the Image-------*/
top: 3%;
height: 110%;
width: 50%;
background-color: #ff4c4c;
border: clamp(10pt,4vw,15pt) solid #B71D21;
position: absolute;
z-index: -1;
}
@media screen and (max-width: 768px) { /*---Media Quary only for ( Small Screen->maximum 768px ) Start here-----------*/
.about-section .box{
height: 100%;
width: 50%;
left: -1%;
}
}/*---Media Quary only for ( Small Screen->maximum 768px ) End here-----------*/
/*---------------------------------------------------------------
About Button
( About Section -- available only in Front Page )
----------------------------------------------------------------*/
.about-section .btn {
margin-top: 1vw;
padding: clamp(4pt,1vw,10pt) clamp(15pt,3vw,30pt);
border: none;
border-radius: 30px;
background-color: #FF4C4C;
color: #ffffff;
font-size: clamp(8pt,2vw,11pt);
text-transform: uppercase;
font-weight: bolder;
box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.1), -6px -6px 12px rgba(0, 0, 0, 0.15) inset, 6px 6px 12px rgba(255, 255, 255, 0.25) inset, -6px -6px 12px rgba(255, 255, 255, 0.05);
}
.about-section .btn:hover,
.about-section .btn:active {
color: #ffffff;
background-color: #FF4C4C;
}
/*---------------------------------------------------------------
Count number Row
( About Section -- available in Front Page
and about us page )
----------------------------------------------------------------*/
/*----------------------------
Number Counter Row
------------------------------*/
.about-section .g-5 .row{
display: flex;
display: -webkit-flex;
justify-content: center;
-webkit-justify-content: center;
margin-top: 20pt;
text-align: center;
}
/*---------------------------------------------------------------
Count Number
( About Section -- available in Front Page
and about us page )
----------------------------------------------------------------*/
/*----------------------------
Number Counter Digit
------------------------------*/
.about-section .count-number .count {
font-size: clamp(16pt,3vw,21pt);
text-align: center;
color: #B71D21;
font-weight: bolder;
}
/*---------------------------------------------------------------
Count Number Title
( About Section -- available in Front Page
and about us page )
----------------------------------------------------------------*/
/*----------------------------
Number Counter Title
------------------------------*/
.about-section .count-number .text {
font-size: clamp(8pt,2vw,10pt);
text-transform: capitalize;
text-align: center;
color: #82231c;
font-family: "Montserrat", sans-serif;
text-wrap: pretty;
}
/*-----------------------------------------------
+++ service-section ( Front Page)+++
-------------------------------------------------*/
.service-section {
overflow: hidden; /*------Section Item Cant exit left and right Margin------------*/
}
@media screen and (min-width: 768px) { /*---Media Quary start here---------*/
.service-section { /*----in Big screen ( Minimum width 768px ) all text will stay in cente-----*/
text-align: center; /*----in small screen ( Maximi width 768px ) all text will stay in cente-------*/
}
} /*---Media Quary end here---------*/
/*---------------------------------------------------------------
Section Title
( .service-sectio -- available in Front page )
----------------------------------------------------------------*/
.service-section .section-title1 { /*-----Section Title1-------------*/
text-transform: uppercase;
color: #82231C;
font-weight: normal;
font-size: clamp(10pt,2vw,11pt);
font-family: "Montserrat", sans-serif;
text-wrap: pretty;
}
.service-section .section-title2 { /*-----section Title2-------------*/
font-size: clamp(21pt,3vw,36pt);
text-transform: capitalize;
color: #000000;
font-weight: bolder;
padding-bottom: 1vw;
text-wrap: pretty;
}
/*---------------------------------------------------------------
Section Text
( offer-section -- available in Front page )
----------------------------------------------------------------*/
.service-section .section-text { /*-----Section text-------------*/
font-weight: normal;
font-size: clamp(9pt,2vw,10pt);
color: #6a737b;
padding-bottom: 1vw;
text-wrap: pretty;
}
@media screen and (min-width: 768px) { /*----on minimum width 768px all text will stay in center-------*/
.service-section .section-text {
width: clamp(180pt,80%,612pt);
display: block;
margin: auto;
}
}
/*---------------------------------------------------------------
Section main Row
( service-section -- available in service page )
----------------------------------------------------------------*/
.service-section .row { /*-----all item under Row will take center position------------*/
display: flex;
display: -webkit-flex;
justify-content: center;
-webkit-justify-content: center;
padding-top: 1vw;
}
/*---------------------------------------------------------------
Section main Column
( service-section -- available in service page )
----------------------------------------------------------------*/
.service-section .col-12 {
max-width: 380pt;
margin-bottom: 2vw;
}
/*---------------------------------------------------------------
Card
( service-section -- available in service page )
----------------------------------------------------------------*/
.service-section .card {
border-radius: 5pt;
background-color: #6d2d41;
width: 100%;
border: 10px solid #FF4C4C;
box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.1), -6px -6px 12px rgba(0, 0, 0, 0.15) inset, 6px 6px 12px rgba(255, 255, 255, 0.25) inset, -6px -6px 12px rgba(255, 255, 255, 0.05);
text-align: center;
}
.service-section .card-body{
min-height: 20vh;
}
/*---------------------------------------------------------------
Card Body
( service-section -- available in service page )
----------------------------------------------------------------*/
.service-section .card-title {
font-size: clamp(12pt,2vw,16pt);
font-weight: 700;
text-transform: capitalize;
text-align: center;
color: #ffffff;
text-wrap: pretty;
margin-top: 50pt;
}
.service-section .card-text {
font-size: clamp(9pt,2vw,10pt);
color: #efe9e5;
text-align: center;
text-wrap: pretty;
}
.service-section img {
width: 100%;
height: 30vh;
object-fit: cover;
}
/*---------------------------------------------------------------
Offer Button
( service-section -- available in Front page )
----------------------------------------------------------------*/
.service-section a {
display: inline-flex;
align-self: center;
padding: 10px 25px;
text-decoration: none;
text-transform: uppercase;
font-size: clamp(8pt,2vw,11pt);
font-weight: 600;
border-radius: 30px;
box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.1), -6px -6px 12px rgba(0, 0, 0, 0.15) inset, 6px 6px 12px rgba(255, 255, 255, 0.25) inset, -6px -6px 12px rgba(255, 255, 255, 0.05);
border: 2px solid #FF4C4C;
background-color: #FF4C4C;
color: #ffffff;
margin-top: 10pt;
}
/*---------------------------------------------
+++faq-section ( Faq Page)+++
-----------------------------------------------*/
.faq-section {
/*------Top and bottom will take some margin------*/
overflow: hidden;
}
.faq-section .section-title { /*-----section Title2-------------*/
font-size: clamp(21pt,3vw,36pt);
text-transform: capitalize;
color: #000000;
font-weight: bolder;
padding: 3vw 0pt 2vw 0pt;
text-wrap: pretty;
}
.faq-section .row { /*-------All item under row will take center position-----------*/
display: flex;
display: -webkit-flex;
align-items: center;
-webkit-align-items: center;
justify-content: center;
-webkit-justify-content: center;
}
/*---------------------------------------------------------------
Left side image
( Faq section -- available in Faq page )
----------------------------------------------------------------*/
.faq-section img {
width: 100%; /*-----Image will take 100% of the column----*/
object-fit: cover; /*-----All size of Image will be adjusted-----*/
}
/*---------------------------------------------------------------
Faq Card Background
( Faq section -- available in Faq page )
----------------------------------------------------------------*/
.faq-section .accordion {
border: clamp(10pt,2vw,20pt) solid #FF4C4C;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
padding: 2pt;
background-color: #ffffff ;
}
.faq-section .accordion-header,
.faq-section .accordion-collapse{
position: relative;
}
.faq-section .accordion-header .btn-style {
position: absolute;
top: 0;
left: 50%;
}
.faq-section .accordion-header .q-style {
position: absolute;
top: 10%;
left: 10%;
}
.faq-section .accordion-collapse .body-style{
position: absolute;
top: 0%;
left: 50%;
}
.faq-section .accordion-item {
margin: 1pt;
padding: 0pt;
outline: 0 !important;
box-shadow: none;
border-radius: 0 !important;
}
.faq-section .accordion-body, /*-----Answers || text that show as a answer------*/
.faq-section .accordion-button ,
.faq-section .accordion-collapse{ /*----Questions || Title that show as a question-----*/
text-wrap: pretty;
border-radius: 0 !important;
border: 0.5pt solid #6D2D41;
}
.faq-section .accordion-button {
font-size: clamp(12pt,2vw,16pt); /*----font size-----*/
color: #6D2D41; /*----Font color----*/
text-transform: capitalize; /*----font style----*/
font-weight: bolder; /*---- Font width-----*/
background-color: #ffffff;
}
.faq-section .accordion-button:not(.collapsed) { /*----item Title or question when it show the answer-----*/
color: #ffffff;
background-color: #6D2D41;
margin-bottom: 2pt;
border: none;
}
.faq-section .accordion-body {
font-size: clamp(10pt,2vw,12pt); /*----font size-----*/
color: #6D2D41; /*----Font color----*/
border:none;
}
.faq-section .accordion-button:focus { /*---Remove item hover border || Box Shadow----*/
z-index: 3;
border: none;
outline: 0 !important;
box-shadow: none;
}
/*---------------------------------------------------------------
Up and Down Arrow
( Faq section -- available in Faq page )
----------------------------------------------------------------*/
.faq-section .accordion-button::after { /*------Arrow down color||from %23103AD1 '103AD1' (%23 || 3179C3) is Color Code-------*/
background-image: url("data:image/svg+xml,") !important;
}
.faq-section .accordion-button:not(.collapsed)::after { /*------Arrow Up color||from %23ffffff 'ffffff' (%23 || ffffff) is Color Code-------*/
background-image: url("data:image/svg+xml,") !important;
}
/*---------------------------------------------
*PortFolio Section*
-----------------------------------------------*/
.portfolio-section {
overflow: hidden;
padding-top: 4vw;
}
@media screen and (min-width: 768px) { /*---Media Quary start here---------*/
.portfolio-section { /*----in Big screen ( Minimum width 768px ) all text will stay in cente-----*/
text-align: center; /*----in small screen ( Maximi width 768px ) all text will stay in cente-------*/
}
} /*---Media Quary end here---------*/
/*---------------------------------------------------------------
Section Title
( .service-sectio -- available in Front page )
----------------------------------------------------------------*/
.portfolio-section .section-title1 { /*-----Section Title1-------------*/
text-transform: uppercase;
color: #82231C;
font-weight: normal;
font-size: clamp(10pt,2vw,11pt);
font-family: "Montserrat", sans-serif;
text-wrap: pretty;
}
.portfolio-section .section-title2 { /*-----section Title2-------------*/
font-size: clamp(21pt,3vw,36pt);
text-transform: capitalize;
color: #000000;
font-weight: bolder;
padding-bottom: 1vw;
text-wrap: pretty;
}
/*---------------------------------------------------------------
Section Text
( offer-section -- available in Front page )
----------------------------------------------------------------*/
.portfolio-section .section-text { /*-----Section text-------------*/
font-weight: normal;
font-size: clamp(9pt,2vw,10pt);
color: #6a737b;
padding-bottom: 1vw;
text-wrap: pretty;
}
@media screen and (min-width: 768px) { /*----on minimum width 768px all text will stay in center-------*/
.portfolio-section .section-text {
width: clamp(180pt,80%,612pt);
display: block;
margin: auto;
}
}
.portfolio-section #container {
margin: auto;
}
/*--------------------------------------------------
*Filter ( gallery Section )*
where image is selected according to
their name or title
--------------------------------------------------*/
.portfolio-section .filters { /*----Item Choose section------*/
width: 100%;
text-align: center;
padding: 1vw 0;
}
.portfolio-section .filters ul { /*-----Item filter area where we can change background color-------*/
list-style: none;
padding: 5pt 10pt;
margin: 0 4vw;
}
.portfolio-section .filters li {
display: inline-block;
padding: 10pt 5pt;
cursor: pointer;
}
.portfolio-section .filters li a { /*-----Filter Item normal font------*/
color: #000000;
text-decoration: none;
text-transform: capitalize;
font-size: clamp(10pt,2vw,12pt);
transition: 0.65s;
}
.portfolio-section .filters li a:hover,
.portfolio-section .filters .active a { /*-----Filter Item when hover and active------*/
color: #FF4C4C;
letter-spacing: 0.5pt;
}
/*--------------------------------------------------
*Filter ( gallery Image )*
--------------------------------------------------*/
.portfolio-section .grid-item {
display: inline-block;
height: 400px;
overflow: hidden;
text-align: center;
width: clamp(250pt,30vw,370pt);
border: clamp(10pt,4vw,15pt) solid #FF4C4C;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
margin: 5pt;
}
.portfolio-section .grid-item img {
width: 100%;
height: 100%;
object-fit: cover;
}
/*--------------------------------------------------
*Filter ( gallery Image overlay )*
--------------------------------------------------*/
.portfolio-section .overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #AA1B1F;
overflow: hidden;
width: 0;
height: 100%;
transition: .1s ease;
color: #ffffff;
text-transform: capitalize;
font-size: clamp(12pt,2vw,14pt);
display: flex;
display: -webkit-flex;
align-items: center;
-webkit-align-items: center;
justify-content: center;
-webkit-justify-content: center;
}
.portfolio-section .grid-item:hover .overlay {
width: 100%;
}
.portfolio-section .overlay .text {
padding: 10pt 20pt;
text-align: left;
}
.portfolio-section .overlay h4 {
font-size: clamp(14pt,2vw,16pt);
color: #FFFFFF;
padding-bottom: 10pt;
}
.portfolio-section .overlay h5 {
font-size: clamp(10pt,2vw,12pt);
color: #ffaaaa;
text-transform: uppercase;
}
.portfolio-section .overlay h6 {
font-size: clamp(10pt,2vw,12pt);
color: #efe9e5;
}
.portfolio-section .overlay p {
font-size: clamp(8pt,2vw,10pt);
color: #fefefe;
text-wrap: pretty;
}
/*--------------------------------------------------
*Filter ( gallery pager )*
--------------------------------------------------*/
.portfolio-section .isotope-pager .pager {
display: inline-block;
}
.portfolio-section .isotope-pager a {
margin: 6px 10px;
display: inline-block;
line-height: 31px;
color: #000000;
text-transform: capitalize;
font-size: clamp(10pt,2vw,12pt);
font-weight: bolder;
transition: 0.3s;
}
.portfolio-section .isotope-pager a:hover,
.portfolio-section .isotope-pager a:is(.active) {
color: #ff4c4c;
}
.portfolio-section .isotope-pager a::before,
.portfolio-section .isotope-pager a:after {
content: "";
position: absolute;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
}
/*-------------------------------------------------
+++ Other Page +++
--------------------------------------------------*/
/*-------------------------------------------------
+++other Hero Section++
Applicable for all other page
except Front page
( Hero section of other page )
--------------------------------------------------*/
.other-hero-section {
height: clamp(250pt,60vw,550pt); /*---- hero background Image total height -----*/
width: 100%; /*--Hero Background Image total Width---*/
position: relative;
text-align: center;
overflow: hidden;
}
/*------------------------------------------------------------
+++++Background Image++++++
( other Hero Section--> Hero section of other page )
--------------------------------------------------------------*/
.other-hero-section img { /*---Background Image-----------*/
width: 100%; /*----Backround Image will take 100% width of total background width-----*/
height: 100%; /*----Backround Image will take 100% height of total background height-----*/
position: absolute; /*-----Backround Image will be fixed in his position----------*/
top: 0;
left: 0;
object-fit: cover;
}
/*------------------------------------------------------------
+++++overlay over Background Image++++++
( other Hero Section--> Hero section of other page )
--------------------------------------------------------------*/
.other-hero-section .img-bg::after { /*------Hero section Background color over background image---------*/
content: '';
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: rgba(0, 0, 0,0.5);
background-blend-mode: multiply;
}
/*------------------------------------------------------------
+++++ Page Title ++++++
( other Hero Section--> Hero section of other page )
--------------------------------------------------------------*/
.other-hero-section .section-title { /*----Page Title holder position ----*/
position: absolute;
top: 55%;
left: 50%;
transform: translate(-50%,-50%);
width: 100%;
}
.other-hero-section .section-title h1 { /*----Page Title ----*/
font-size: clamp(16pt,5vw,42pt);
text-align: center;
color: #ffffff;
text-transform: capitalize;
font-weight: bolder;
}
.other-hero-section .section-title p { /*-----Section text-------*/
font-weight: normal;
font-size: clamp(9pt,2vw,11pt);
color: #cccccc;
width: clamp(212pt,65%,800pt);
display: block;
margin: auto;
padding: 1vw 0;
text-wrap: pretty;
}
/*-----------------------------------------------------------
+++Contact Section++++
--------------------------------------------------------------*/
.contact-section {
margin: 10vw 0pt 15vw 0pt;
}
/*------------------------------------------------
section row and column
--------------------------------------------------*/
.contact-section .row { /*-----Row Style || all item under row will take center position-------------*/
display: flex;
display: -webkit-flex;
align-items: center;
-webkit-align-items: center;
justify-content: center;
-webkit-justify-content: center;
}
.contact-section .col-12 { /*------all colum's margin and width--------*/
margin-bottom: 0pt;
}
.contact-section .section-title { /*-----section Title2-------------*/
font-size: clamp(21pt,3vw,36pt);
text-transform: capitalize;
color: #000000;
font-weight: bolder;
padding-bottom: 1vw;
text-wrap: pretty;
}
/*---------------------------------------------------------------
Section Text
( offer-section -- available in Front page )
----------------------------------------------------------------*/
.contact-section .section-text { /*-----Section text-------------*/
font-weight: normal;
font-size: clamp(9pt,2vw,10pt);
color: #6a737b;
padding-bottom: 1vw;
text-wrap: pretty;
}
/*-------------------------------------
Contact information
---------------------------------------*/
.contact-section .d-inline-flex { /*------List item make center-------*/
display: flex;
justify-content: center;
align-items: center;
padding: 10pt 0pt 0pt 0pt;
}
.contact-section .d-inline-flex .text {
font-weight: normal;
font-size: clamp(10pt,2vw,12pt);
color: #3586FF;
margin-left: 10pt;
}
/*-------------------------------------
Contact information Title
---------------------------------------*/
.contact-section .d-inline-flex h4 { /*--------Contact info Title----------*/
font-size: clamp(10pt,2vw,18pt);
text-transform: capitalize;
color: #6D2D41;
font-weight: bolder;
}
/*-------------------------------------
Contact information Text
---------------------------------------*/
.contact-section .d-inline-flex p { /*--------Contact info Text----------*/
font-weight: normal;
font-size: clamp(8pt,2vw,10pt);
color: #B71D21;
}
/*-------------------------------------
Contact info icon
---------------------------------------*/
.contact-section .badge { /*--------Contact info icon---------*/
width: clamp(30pt,5vw,80pt);
height: clamp(30pt,5vw,80pt);
background: #ffffff;
color: #FF4C4C;
border-radius: 50%;
margin-right: 15px;
font-size: clamp(10pt,2vw,32pt);
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
border: 5pt solid #FF4C4C;
}
.contact-section .badge:hover {
background: #FF4C4C;
color: #ffffff;
}
/*----------------------------------
Contact Form
-----------------------------------*/
.contact-section form {
padding: 5vw;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
border: 10px solid #FF4C4C;
border-radius: 10pt;
background-color: #6D2D41;
margin: 0 5pt 10pt 5pt;
}
/*-------------------------------------------
Contact Form Input Place holder
----------------------------------------------*/
.contact-section input::placeholder {
color: gray;
}
/*-------------------------------------------
Contact Form Input
----------------------------------------------*/
.contact-section input {
background: #ecf0f3;
padding: 5px;
padding-left: 20px;
height: 50px;
font-size: clamp(8pt,2vw,10pt);
border-radius: 50px;
box-shadow: inset 6px 6px 6px #cbced1, inset -6px -6px 6px white;
}
/*-------------------------------------------
Contact Form Comment Background
----------------------------------------------*/
.contact-section textarea {
background: #ecf0f3;
font-size: clamp(8pt,2vw,10pt);
border-radius: 10px;
box-shadow: inset 6px 6px 6px #cbced1, inset -6px -6px 6px white;
}
/*-------------------------------------------
Contact Form Label
----------------------------------------------*/
.contact-section label {
font-size: clamp(11pt,2vw,16pt);
text-transform: capitalize;
color: #ffffff;
font-weight: bolder;
padding-bottom: 10pt;
}
/*-------------------------------------------
Contact Form Button
----------------------------------------------*/
.contact-section .btn,
.contact-section .btn:hover {
display: inline-flex;
align-self: center;
padding: 10px 25px;
text-decoration: none;
text-transform: uppercase;
font-size: clamp(8pt,2vw,11pt);
font-weight: 600;
border-radius: 30px;
box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.1), -6px -6px 12px rgba(0, 0, 0, 0.15) inset, 6px 6px 12px rgba(255, 255, 255, 0.25) inset, -6px -6px 12px rgba(255, 255, 255, 0.05);
border: 2px solid #FF5050;
background-color: #FF5050;
color: #ffffff;
}
.contact-section #messages_content p {
color: #ffffff;
margin-top: 1vw;
font-size: clamp(7pt,2vw,9pt);
}
.contact-section .invalid-feedback {
color: #FF5050;
font-size: clamp(7pt,2vw,9pt);
}
/*-------------------------------------------
Google Map
----------------------------------------------*/
.contact-section .map {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
padding: 5pt;
border-radius: 5pt;
}
/*-----------------------------------------------------------
+++Footer Section++++
--------------------------------------------------------------*/
.footer-section {
margin-top: 120pt;
position: relative;
width: 100%;
background: #0E0E57;
padding: 50px 50px 20px 50px;
text-align: right;
}
.footer-section .copntainer {
overflow: hidden;
}
.footer-section .row { /*----Footer Row-----*/
display: flex;
justify-content: center;
}
.footer-section .col-12 {
padding: 3vw 0.5vw;
}
.footer-section h4,
.footer-section h3, /*------Footer title------------*/
.footer-section h2,
.footer-section h1 {
font-size: clamp(14pt,2vw,18pt);
color: #ffffff;
text-transform: uppercase;
font-weight: bolder;
padding-bottom: 5pt;
}
.footer-section p, /*------Footer Text----------*/
.footer-section a,
.footer-section a:hover,
.footer-section .nav-link,
.footer-section .nav-link:hover {
font-size: clamp(11pt,2vw,12pt);
}
.footer-section p, /*------Footer Text----------*/
.footer-section a,
.footer-section a:hover,
.footer-section .contact .badge i,
.footer-section .d-inline-flex .text,
.footer-section .nav-link,
.footer-section .nav-link:hover {
color: #D0EFFF;
}
.footer-section .nav-link {
margin-left: 10pt;
}
.footer-section .logo { /*-------Footer logo-----------------*/
width: clamp(150pt,15vw,170pt);
padding-bottom: 10pt;
object-fit: cover;
display: block;
margin: auto;
}
@media screen and (min-width: 768px) {
.footer-section .logo {
display: block;
margin: 0 auto 10pt auto;
}
}
/*-----------------------------------------------------------
+++Subscribe form ( Footer Section)++++
--------------------------------------------------------------*/
.footer-section .subscribe-form {
position: relative;
overflow: hidden;
}
.footer-section .subscribe-form input { /*---Input box where input the e-mail address to subscribe----*/
width: 100%;
padding: 14px 28px;
background: #dbebfa;
border: 1px solid #dbebfa;
color: #0E0E57;
}
.footer-section .subscribe-form button { /*---submit button where enter the e-mail address to subscribe----*/
position: absolute;
right: 0;
top: 0;
background: #0E0E57;
padding: 13px 20px;
border: 1px solid #ffffff;
}
.footer-section .subscribe-form button i { /*---submit button icon|| submit button's right side icon ----*/
color: #fff;
font-size: 22px;
transform: rotate(-6deg);
}
/*-----------------------------------------------------------
+++Contact information ( Footer Section)++++
--------------------------------------------------------------*/
.footer-section .contact .d-inline-flex { /*------List item make center-------*/
display: flex;
justify-content: center;
align-items: center;
padding: 10pt 0pt 0pt 0pt;
}
.footer-section .contact .d-inline-flex .text {
font-weight: normal;
font-size: clamp(9pt,2vw,11pt);
text-wrap: pretty;
}
.footer-section .contact .badge {
width: 30pt;
height: 30pt;
margin-right: 15px;
font-size: clamp(14pt,2vw,18pt);
display: flex;
justify-content: center;
align-items: center;
}
/*-----------------------------------------------------------
+++Social media ( Footer Section)++++
--------------------------------------------------------------*/
.footer-section .social-links .btn-square { /*-----Social Icon Background-------*/
border: 2px solid #ffffff; /*-----Social Icon border------*/
transition: all cubic-bezier(0.455, 0.03, 0.515, 0.955); /*-------Social button transform on click animation---------*/
display: flex;
justify-content: center;
align-items: center;
width: 30pt;
height: 30pt;
margin-right: 5pt;
margin-bottom: 10pt;
}
.footer-section .social-links i { /*-----Social Icon -------*/
font-size: clamp(9pt,2vw,11pt); /*-------Social Icon font size---------*/
color: #ffffff; /*----Social Icon Color--------*/
}
.footer-section .social-links .btn-square:hover { /*-----Social Icon Background when hover-------*/
background-color: #ffffff; /*-----Social button background color on hover------*/
}
.footer-section .social-links .btn-square:hover i { /*------Social icon color on hover------------*/
color: #0E0E57;
}
/*-----------------------------------------------------------
+++ Copyright++++
--------------------------------------------------------------*/
.copyright {
background: #0E0E57; /*----Copyright Background Color-----*/
border: 1px solid #0E0E57; /*------Copyright border color :: It should be same as background color -----------*/
}
.copyright .container {
border-top: 1px solid rgba(255, 255, 255, .25);
padding: 5pt 0;
}
.copyright p { /*-----Copyright Text-----*/
font-size: clamp(10pt,2vw,12pt);
text-transform: capitalize;
text-align: center;
color: #c4dff6;
padding: 15pt 0pt 3pt 0pt;
}
.copyright span {
color: #FF4C4C; /*-----Copyright highlighted Text-----*/
margin: 0pt 5pt;
}