<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css">
<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=Alegreya+Sans:wght@100;300;400;500;700;800;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Quattrocento+Sans:wght@400;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Encode+Sans+Expanded:wght@100;200;300;400;500;600;700;800;900&family=Englebert&display=swap" rel="stylesheet">
<link rel="icon" type="image/x-icon" href="images/fav.png">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/media.css">
<title>index</title>
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg ">
<div class="container ">
<a class="navbar-brand" href="#"><img src="images/logo.png" class="img-fluid" alt="logo"></a>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasExample"><img src="images/logo.png" class="img-fluid" alt="logo"></h5>
<button type="button" class="close-btn" data-bs-dismiss="offcanvas" aria-label="Close"><span class=""><i class="fa-solid fa-x"></i></span></button>
</div>
<div class="offcanvas-body">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link px-3" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link px-3" href="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link px-3" href="#">Our Courses</a>
</li>
<li class="nav-item">
<a class="nav-link px-3" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link px-3" href="#">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link px-3" href="#">Gallery</a>
</li>
</ul>
</div>
</div>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link px-3 active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link px-3" href="#">About us</a>
</li>
<li class="nav-item">
<a class="nav-link px-3" href="#">Our Courses</a>
</li>
<li class="nav-item">
<a class="nav-link px-3" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link px-3" href="#">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link px-3" href="#">Gallery</a>
</li>
</ul>
</div>
<button class="navbar-toggler" href="#offcanvasExample" role="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
<span class="toggle-btn"> <i class="fa-solid fa-bars"></i></span>
</button>
</div></nav>
</nav>
</header>
<section class="main-banner">
<div class="guiter-image">
<img src="images/guiter.png" class="img-fluid" alt="guiter">
</div>
<div class="inner-banner">
<div class="banner-left-img">
<img src="images/banner-img-4.png" class="img-fluid" alt="banner-img">
</div>
<div class="banner-right">
<img src="images/banner-bg.png" class="img-fluid banner-bg" alt="banner-bg">
<div class="banner-content">
<h4>For those who want to</h4>
<h2>create and perform</h2>
<h5>Music</h5>
<a href="javascript:;" class="common-btn gold">get in touch</a>
</div>
</div>
</div>
</section>
<section class="main-about py_100">
<div class="flat-gitar">
<img src="images/flat-gitar.png" class="img-fluid" alt="flat-gitar">
</div>
<div class="container">
<div class="inner-about">
<div class="row align-items-center">
<div class="col-lg-6">
<div class="about-content">
<h5>About Us</h5>
<h2>Who We Are</h2>
<p>"But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful.</p>
<ul class="about-list">
<li><span class="check-icon"><img src="images/check-icon.png" class="img-fluid" alt="check-icon"></span>Lorem Ipsum is simply dummy text.</li>
<li><span class="check-icon"><img src="images/check-icon.png" class="img-fluid" alt="check-icon"></span>Lorem Ipsum is text.</li>
<li><span class="check-icon"><img src="images/check-icon.png" class="img-fluid" alt="check-icon"></span>Lorem Ipsum is text.</li>
</ul>
<a href="javascript:;" class="common-btn gold">Get in Touch</a>
</div>
</div>
<div class="col-lg-6">
<div class="about-image">
<img src="images/about-img-5.png" class="img-fluid" alt="about-img">
</div>
</div>
</div>
<!-- <div class="for-dot">
<img src="images/music-notes.png" class="img-fluid" alt="dot">
</div> -->
<div class="ab">
<img src="images/ab.png" class="img-fluid" alt="ab">
</div>
</div>
</div>
</section>
<section class="main-music-classes" style="background-image: url('images/free-bg.png');">
<div class="container">
<div class="inner-music">
<div class="row align-items-center">
<div class="col-lg-6">
<div class="left-img">
<img src="images/music-img-2.png" class="img-fluid" alt="music-img">
<div class="free-classes">
<span class="free">Free</span>
<span class="owc">One Week Class</span>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="music-content">
<h5>Music Classes</h5>
<h2>For all instruments' </h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<a href="javascript:;" class="common-btn gold">Get In Touch</a>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="main-services py_100">
<div class="container">
<div class="inner-services">
<div class="se-head text-center">
<h5>Our Services</h5>
<h2>Classes we are Providing</h2>
<p>"But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.</p>
</div>
<div class="row img-box">
<div class="col-6 col-sm-6 col-md-6 col-lg-3">
<div class="inn-img-box text-center">
<img src="images/s1.png" class="img-fluid" alt="s1">
<h4>guitar Classes</h4>
<a href="javascript:;" class="common-btn gold">View More</a>
</div>
</div>
<div class="col-6 col-sm-6 col-md-6 col-lg-3">
<div class="inn-img-box text-center">
<img src="images/s2.png" class="img-fluid" alt="s2">
<h4>Violin Classes</h4>
<a href="javascript:;" class="common-btn gold">View More</a>
</div>
</div>
<div class="col-6 col-sm-6 col-md-6 col-lg-3">
<div class="inn-img-box text-center">
<img src="images/s3.png" class="img-fluid" alt="s3">
<h4>Piano Classes</h4>
<a href="javascript:;" class="common-btn gold">View More</a>
</div>
</div>
<div class="col-6 col-sm-6 col-md-6 col-lg-3">
<div class="inn-img-box text-center">
<img src="images/s4.png" class="img-fluid" alt="s4">
<h4>Winds Classes</h4>
<a href="javascript:;" class="common-btn gold">View More</a>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="main-why-choose">
<div class="inner-why">
<div class="choose-content">
<div class="right-why-content">
<h5>Our Work</h5>
<h2>Why Choose Us</h2>
<p>"But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful.</p>
<a href="javascript:;" class="common-btn gold">Get in touch</a>
</div>
</div>
<div class="chosse-main-image">
<div class="left-why">
<img src="images/why-img-2.jpg" class="img-fluid" alt="why-img">
</div>
</div>
<div class="choose-list">
<div class="in-chose-list">
<img src="images/qoi.png" class="img-fluid" alt="qoi">
<div class="text-list-c">
<h6>Quality of Instructors</h6>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
<div class="in-chose-list">
<img src="images/fs.png" class="img-fluid" alt="qoi">
<div class="text-list-c">
<h6>Flexible Scheduling</h6>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
<div class="in-chose-list">
<img src="images/ss.png" class="img-fluid" alt="qoi">
<div class="text-list-c">
<h6>Student Success</h6>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
</div>
</div>
</section>
<section class="testimonial py_100">
<div class="container">
<div class="inner-testi text-center">
<div class="test-hesd">
<h5>Testimonial</h5>
<h2>what our studens says</h2>
</div>
<div class="client-say">
<div class="testi-slide">
<p><img src="images/qot.png" class="img-fluid" alt="qot"> was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<div class="client-detail">
<img src="images/client-img.png" class="img-fluid" alt="client-img">
<h4>Deana james</h4>
<p>Lorem ispum</p>
</div>
</div>
<div class="testi-slide">
<p><img src="images/qot.png" class="img-fluid" alt="qot"> was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<div class="client-detail">
<img src="images/client-img.png" class="img-fluid" alt="client-img">
<h4>Deana james</h4>
<p>Lorem ispum</p>
</div>
</div>
<div class="testi-slide">
<p><img src="images/qot.png" class="img-fluid" alt="qot"> was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<div class="client-detail">
<img src="images/client-img.png" class="img-fluid" alt="client-img">
<h4>Deana james</h4>
<p>Lorem ispum</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="main-professional py_100">
<div class="container">
<div class="inner-professional">
<div class="proff-head text-center">
<h5>Our Experts</h5>
<h2>Our professional Instructor </h2>
<p>But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth.</p>
</div>
<div class="row profe-box">
<div class="col-6 col-sm-6 col-md-6 col-lg-3">
<div class="sub-profe">
<img src="images/pr-1.png" class="img-fluid" alt="pr-1">
<h6>Maria Sozo</h6>
<p class="gold-text">Piano Instructor</p>
<ul class="profe-social-link">
<li><a href="javascript:;"><i class="fa-brands fa-facebook-f"></i></a></li>
<li><a href="javascript:;"><i class="fa-brands fa-square-instagram"></i></a></li>
<li><a href="javascript:;"><i class="fa-brands fa-twitter"></i></a></li>
</ul>
</div>
</div>
<div class="col-6 col-sm-6 col-md-6 col-lg-3">
<div class="sub-profe">
<img src="images/pr-2.png" class="img-fluid" alt="pr-2">
<h6>Maria Sozo</h6>
<p class="gold-text">Piano Instructor</p>
<ul class="profe-social-link">
<li><a href="javascript:;"><i class="fa-brands fa-facebook-f"></i></a></li>
<li><a href="javascript:;"><i class="fa-brands fa-square-instagram"></i></a></li>
<li><a href="javascript:;"><i class="fa-brands fa-twitter"></i></a></li>
</ul>
</div>
</div>
<div class="col-6 col-sm-6 col-md-6 col-lg-3">
<div class="sub-profe">
<img src="images/pr-3.png" class="img-fluid" alt="pr-3">
<h6>Maria Sozo</h6>
<p class="gold-text">Piano Instructor</p>
<ul class="profe-social-link">
<li><a href="javascript:;"><i class="fa-brands fa-facebook-f"></i></a></li>
<li><a href="javascript:;"><i class="fa-brands fa-square-instagram"></i></a></li>
<li><a href="javascript:;"><i class="fa-brands fa-twitter"></i></a></li>
</ul>
</div>
</div>
<div class="col-6 col-sm-6 col-md-6 col-lg-3">
<div class="sub-profe">
<img src="images/pr-4.png" class="img-fluid" alt="pr-4">
<h6>Maria Sozo</h6>
<p class="gold-text">Piano Instructor</p>
<ul class="profe-social-link">
<li><a href="javascript:;"><i class="fa-brands fa-facebook-f"></i></a></li>
<li><a href="javascript:;"><i class="fa-brands fa-square-instagram"></i></a></li>
<li><a href="javascript:;"><i class="fa-brands fa-twitter"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="main-portfolio py_100">
<div class="flat-gitar">
<img src="images/flat-gitar.png" class="img-fluid" alt="flat-gitar">
</div>
<div class="container">
<div class="inner-port">
<div class="port-head text-center">
<h5>Our Portfolio</h5>
<h2>Check out our beautiful portfolio</h2>
<p>But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth.</p>
</div>
<div class="port-gallery">
<img src="images/p1.png" class="img-fluid" alt="p1">
<img src="images/p2.png" class="img-fluid" alt="p2">
<img src="images/p5.png" class="img-fluid" alt="p3">
<img src="images/p7.png" class="img-fluid" alt="p4">
</div>
<a href="javascript" class="Gallery-view-more">View More</a>
</div>
<div class="insta-media">
<div class="insta-link-box">
<img src="images/insta-img.png" class="img-fluid" alt="insta-img">
<h3>Taal Academy</h3>
<a href="javascript:;">@instagram link of tallacademy</a>
</div>
<div class="image-slider">
<img src="images/video-img-1.png" class="img-fluid" alt="video-img-1">
<img src="images/video-img-2.png" class="img-fluid" alt="video-img-2">
<img src="images/video-img-3.png" class="img-fluid" alt="video-img-3">
<img src="images/video-img-1.png" class="img-fluid" alt="video-img-1">
<img src="images/video-img-2.png" class="img-fluid" alt="video-img-2">
<img src="images/video-img-3.png" class="img-fluid" alt="video-img-3">
</div>
</div>
</div>
</section>
<section class="get-in-tuch py_100">
<div class="container">
<div class="inner-get">
<div class="row align-items-center">
<div class="col-lg-6">
<div class="left-form">
<h5>Get in Touch</h5>
<h2>Let’s talk to an expert</h2>
<p>Efficiently integrate wireless value whereas cross-platform e-tailers.</p>
<form>
<div class="name-phone-imput">
<div class="name-filed input-box">
<input type="text" name="name" placeholder="Your Name">
<img src="images/user-icon.png" class="img-fluid" alt="user-icon">
</div>
<div class="phone-filed input-box">
<input type="tel" name="phone" placeholder="Phone Number">
<img src="images/phone-icon.png" class="img-fluid" alt="phone-icon">
</div>
</div>
<div class="input-box">
<input type="email" name="Email" placeholder="Your Email">
<img src="images/email-icon.png" class="img-fluid" alt="email-icon">
</div>
<div class="input-box text-message">
<textarea placeholder="Message" rows="4" cols="50"></textarea>
<img src="images/msg-icon.png" class="img-fluid" alt="msg-icon">
</div>
<button name="submit" type="submit" class="common-btn gold" id="contact-submit">Send</button>
</form>
</div>
</div>
<div class="col-lg-6">
<div class="right-get">
<img src="images/get-img-3.png" class="img-fluid get-right-images" alt="get-img">
<img src="images/dot.png" class="img-fluid get-dot" alt="dot">
<img src="images/dot-2.png" class="img-fluid get-dot-2" alt="dot-2">
<img src="images/gitar.png" class="img-fluid gitar-img" alt="gitar">
</div>
</div>
</div>
</div>
</div>
</section>
<footer>
<div class="container">
<div class="inner-footer">
<div class="row">
<div class="col-12 col-md-12 col-lg-6 order-lg-2 order-md-1">
<div class="logo-nav">
<div class="footer-logo">
<a href="javascript:;" class="foot-logo"><img src="images/footer-logo.png" class="img-fluid" alt="logo"></a>
</div>
<ul class="footer-nav">
<li><a href="javascript:;">Home</a></li>
<li><a href="javascript:;">About Us</a></li>
<li><a href="javascript:;">Gallery</a></li>
<li><a href="javascript:;">Service</a></li>
<li><a href="javascript:;">Contact</a></li>
</ul>
</div>
</div>
<div class="col-12 col-md-6 col-lg-3 order-lg-1 order-md-2">
<div class="foot-location">
<h4>Taal Academy</h4>
<p>5th Floor, Mohali Avenue Airport Road, Mohali</p>
<p class="location-link"><img src="images/location.png" class="img-fluid location-icon" alt="location"><a href="javascript:;">Get The location</a></p>
</div>
</div>
<div class="col-12 col-md-6 col-lg-3 order-md-3">
<div class="foot-email">
<p><sapn class="location-icon"><img src="images/call.png" class="img-fluid" alt="call"></sapn><a href="tel:+91 222-333-4444">+91 222-333-4444</a></p>
<p><sapn class="location-icon"><img src="images/sms.png" class="img-fluid" alt="sms"></sapn><a href="mailto:taalacademy@gmail.com">taalacademy@gmail.com</a></p>
<div class="main-subscribe">
<input type="text" name="t1" placeholder="Subscribe our latest news">
<a href="javascript:;" class="common-btn gold">subscribe</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="bootom-footer">
<div class="container">
<div class="in-bot-foot">
<div class="row align-items-center">
<div class="col-12 col-md-6 col-lg-6">
<div class="footer-social-link">
<ul>
<li><a href="javascript:;"><i class="fa-brands fa-instagram"></i></a></li>
<li><a href="javascript:;"><i class="fa-brands fa-youtube"></i></a></li>
<li><a href="javascript:;"><i class="fa-brands fa-twitter"></i></a></li>
<li><a href="javascript:;"><i class="fa-brands fa-facebook-f"></i></a></li>
</ul>
</div>
</div>
<div class="col-12 col-md-6 col-lg-6">
<div class="right-bootom-footer">
<p>2023 copyright:<a href="javascript:;">leapoffaithtech.com</a></p>
</div>
</div>
</div>
</div>
</div>
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<script>
$('.client-say').slick({
dots: false,
infinite: true,
speed: 1000,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 3000,
focusOnSelect: false,
centerMode: true,
centerPadding: 0,
});
$('.image-slider').slick({
dots: false,
infinite: true,
speed: 1000,
slidesToShow: 4,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 3000,
focusOnSelect: false,
centerMode: true,
centerPadding: 0,
responsive: [
{
breakpoint: 1199,
settings: {
slidesToShow: 3,
slidesToScroll:1,
infinite: true,
}
},
{
breakpoint: 991,
settings: {
slidesToShow: 2,
slidesToScroll: 1
}
},
{
breakpoint: 767,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
},
{
breakpoint: 575,
settings: {
arrows:false,
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
</script>
</body>
</html>
@font-face {
font-family: 'Sweet Sensations Personal Use';
src: url('../fonts/SweetSensationsPersonalUse.woff2') format('woff2'),
url('../fonts/SweetSensationsPersonalUse.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Arial Regular';
font-style: normal;
font-weight: normal;
src: local('../fonts/Arial Regular'), url('ARIAL.woff') format('woff');
}
html{
scroll-behavior: smooth;
}
*{
margin: 0;
padding: 0;
}
body{
margin: 0;
padding: 0;
overflow-x: hidden;
font-family: 'Alegreya Sans', sans-serif;
background: #0e0e0e;
}
a, a:hover{
text-decoration: none;
transition: all ease-in-out 0.3s;
-webkit-transition: all ease-in-out 0.3s;
-ms-transition: all ease-in-out 0.3s;
-moz-transition: all ease-in-out 0.3s;
}
img{
max-width: 100%;
}
ul, li, p, figure{
margin: 0;
padding: 0;
list-style: none;
}
.py_100{
padding-top: 100px;
padding-bottom: 100px;
}
.common-btn {
background-color: #2F2D2D;
font-size: 16px;
letter-spacing: 0px;
line-height: 34px;
color: #ffffff;
font-weight: 700;
display: inline-block;
padding: 8px 40px;
font-family: 'Quattrocento Sans', sans-serif;
border-radius: 100px;
text-transform: uppercase;
}
.common-btn:hover {
background: #f1961f;
color: #fff;
}
.common-btn.gold {
background: #e19805;
}
.common-btn.gold:hover {
color: #000;
background: #fff;
}
h4 {
color: #fff;
font-size: 30px;
font-style: normal;
font-weight: 700;
line-height: 59.981px;
text-transform: capitalize;
}
h5 {
color: #E19805;
font-size: 50px;
line-height: 97px;
font-weight: 400;
font-family: 'Sweet Sensations Personal Use';
margin: 0;
}
h2 {
color: #fff;
font-size: 50px;
font-style: normal;
font-weight: 700;
line-height: 59.981px;
text-transform: capitalize;
margin: 0;
}
h6 {
color: #fff;
font-size: 26px;
font-style: normal;
font-weight: 700;
line-height: 50.716px;
text-transform: capitalize;
}
p {
color: #fff;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: normal;
text-transform: capitalize;
}
/*-------------- navbar Css Start ---------------------*/
/*header {
position: absolute;
z-index:999;
width: 100%;
}*/
header a.navbar-brand img {
max-width: 200px;
}
header .navbar-nav .nav-item .nav-link {
font-size: 18px;
letter-spacing: 0px;
line-height: 68px;
color: #ffffff;
font-weight: 500;
padding: 0;
text-transform: uppercase;
}
header .offcanvas-header .offcanvas-title img {
max-width: 100px;
}
header .nav-btn a span.cart-no {
position: absolute;
top: 0;
display: inline-block;
width: 22px;
height: 22px;
border-radius: 11px;
background-color: #d13139;
font-size: 14px;
color: #ffffff;
font-family: "Charlie Display";
right: -3px;
}
header button.navbar-toggler {
color: #f1961f;
}
.navbar-toggler:focus {
text-decoration: none;
outline: 0;
box-shadow: none !important;
}
.offcanvas-header .close-btn {
border: 0;
background: transparent;
top: 15px;
position: absolute;
right: 15px;
color: #ffffff;
background: #1e2529;
padding: 5px 10px;
}
.offcanvas {
background-color: #e19805 !important;
}
.offcanvas ul.navbar-nav .nav-item .nav-link {
line-height: 40px;
}
header .navbar-nav .nav-item .nav-link.active::after {
width: 100%;
}
header .navbar-nav .nav-item .nav-link::after {
content: '';
display: block;
width: 0;
height: 2px;
background: #E19805;
transition: width .3s;
}
header .navbar-nav .nav-item .nav-link:hover::after {
width: 100%;
transition: width .3s;
}
header .navbar {
background: #0E0E0E;
padding: 13px 0;
}
/*-------------- navbar Css End ---------------------*/
/*-------------- Banner Css Start ---------------------*/
.main-banner .inner-banner .banner-left-img, .main-banner .inner-banner .banner-right {
width: 100%;
}
.main-banner .inner-banner .banner-left-img img, .main-banner .inner-banner .banner-right img {
width: 100%;
/* height: 800px;
object-fit: cover;
object-position: top;*/
}
.main-banner .inner-banner {
display: flex;
}
.main-banner .inner-banner .banner-right {
position: relative;
}
.main-banner .inner-banner .banner-right img.banner-bg {
position: relative;
}
.main-banner .inner-banner .banner-right .banner-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
width: 100%;
z-index: 1;
}
.main-banner .inner-banner .banner-right .banner-content h4 {
color: #FFF;
font-size: 61.462px;
font-style: normal;
font-weight: 300;
line-height: 59.101px;
text-transform: capitalize;
margin: 0;
}
.main-banner .inner-banner .banner-right .banner-content h2 {
color: #FFF;
font-size: 56.852px;
font-style: normal;
font-weight: 700;
line-height: 59.101px;
text-transform: capitalize;
}
.main-banner .inner-banner .banner-right .banner-content h5 {
color: #E19805;
font-family: "Sweet Sensations Personal Use";
font-size: 124.756px;
font-weight: 400;
line-height: normal;
margin-top: 20px;
margin-bottom: 40px;
}
.main-banner .inner-banner .banner-right .banner-content .common-btn {
color: #000;
}
.main-banner .inner-banner .banner-right .banner-content .common-btn:hover {
background: #fff;
}
.main-banner {
position: relative;
}
.main-banner .guiter-image {
position: absolute;
top: 52%;
left: 50%;
z-index: 1;
transform: translate(-50%, -50%);
}
.main-banner .guiter-image img {
width: 430px;
}
/*-------------- Banner Css End ---------------------*/
/*-------------- About Us Css Start ---------------------*/
.main-about {
background: #0E0E0E;
position: relative;
}
.main-about .flat-gitar {
position: absolute;
width: 230px;
right: 50px;
top: 10%;
transform: rotate(-50deg);
}
.main-about .inner-about {
position: relative;
}
.for-dot {
position: absolute;
right: 0px;
top: -20px;
}
.main-about .inner-about .ab {
position: absolute;
right: 38%;
top: 70%;
}
.about-content p {
margin: 39px 0 28px 0;
color: #DBDBDB;
}
ul.about-list li {
color: #FFF;
/* font-family: "Alegreya Sans"; */
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: normal;
text-transform: capitalize;
}
ul.about-list li .check-icon {
margin-right: 10px;
}
ul.about-list {
margin-bottom: 71px;
}
.se-head p {
max-width: 783px;
margin: 0 auto;
padding-top: 20px;
}
.about-content .common-btn {
color: #000;
}
.about-content .common-btn:hover {
background: #fff;
}
.about-image img {
width: 100%;
}
.for-dot img {
width: 80px;
}
/*-------------- About Us Css End ---------------------*/
/*-------------- music-classes Css Start ---------------------*/
.main-music-classes {
width: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding: 120px 0;
}
.music-content h5 {
color: #E19805;
font-style: normal;
line-height: 118.58px;
}
.music-content h2 {
color: #FFF;
font-size: 60.846px;
font-weight: 700;
line-height: 72.992px;
}
.music-content p {
color: #FFF;
font-size: 22px;
font-weight: 400;
line-height: 32.857px;
margin: 40px 0 48px;
}
.free-classes .free {
color: #FFF;
text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
font-size: 60.846px;
font-weight: 700;
text-transform: capitalize;
display: inline-block;
line-height: normal;
}
.free-classes .owc {
color: #FFF;
text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
font-size: 20.85px;
font-style: normal;
font-weight: 700;
text-transform: capitalize;
display: block;
}
.free-classes {
text-align: center;
width: 183.382px;
height: 180.122px;
background: #e19805;
border-radius: 100px;
border: 10px solid #FFF;
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.inner-music .left-img {
position: relative;
}
.inner-music .free-classes {
position: absolute;
top: 57%;
transform: translateY(-50%);
right: 60px;
}
/*-------------- music-classes Css End ---------------------*/
/*-------------- Services Css Start ---------------------*/
.main-services {
background: #0E0E0E;
}
.inner-services .inn-img-box h4 {
margin-top: 35px;
margin-bottom: 20px;
line-height: normal;
}
.inner-services .img-box {
margin-top: 35px;
}
.music-content .common-btn.gold {
color: #000;
}
/*-------------- Services Css End ---------------------*/
/*-------------- Why choose Css Start ---------------------*/
.main-why-choose {
background-image: url(../images/choose-bg.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
width: 100%;
display: block;
}
.main-why-choose .inner-why .chosse-main-image img {
width: 100%;
}
.main-why-choose .inner-why {
display: flex;
align-items: center;
}
.main-why-choose .inner-why .choose-content, .main-why-choose .inner-why .chosse-main-image, .main-why-choose .inner-why .choose-list {
width: 33.33%;
}
.inner-why .right-why-content p {
margin: 40px 0 40px;
color: #DBDBDB;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: normal;
text-transform: capitalize;
}
.main-why-choose .inner-why .choose-content .right-why-content .common-btn {
color: #000;
}
.main-why-choose .inner-why .choose-content {
padding: 0 50px 0 100px;
}
.inner-why .right-why-content .choose-list .in-chose-list {
display: flex;
align-items: center;
}
.inner-why .right-why-content .choose-list .in-chose-list img {
margin-right: 30px;
}
.inner-why .right-why-content .choose-list .in-chose-list .text-list-c h6 {
margin: 0;
}
.inner-why .right-why-content .choose-list .in-chose-list {
display: flex;
align-items: center;
margin-bottom: 40px;
}
.inner-why .right-why-content .choose-list .in-chose-list:last-child {
margin-bottom: 0px;
}
.inner-why .right-why-content .choose-list .in-chose-list .text-list-c p {
margin: 0;
}
.main-why-choose .inner-why .choose-list .in-chose-list {
background: #e19805;
padding: 0 50px 0 50px;
}
.main-why-choose .inner-why .choose-list .in-chose-list img {
filter: brightness(0) invert(1);
}
.main-why-choose .inner-why .choose-list .in-chose-list {
background: #e19805;
padding: 87.4px 100px 88px 50px;
display: flex;
align-items: flex-start;
transition: all ease-in-out 0.3s;
}
.main-why-choose .inner-why .choose-list .in-chose-list img {
filter: brightness(0) invert(1);
margin-right: 30px;
}
.main-why-choose .inner-why .choose-list .in-chose-list:hover {
background: #1e1e1f;
}
.main-why-choose .inner-why .choose-list .in-chose-list:hover img {
filter: unset;
}
/*-------------- Why choose Css End ---------------------*/
/*-------------- our professional Css Start ---------------------*/
.main-professional {
background-image: url('../images/profe-bg.png');
background-repeat: no-repeat;
background-size: cover;
width: 100%;
background-position: center;
}
.proff-head p {
max-width: 780px;
margin: 0 auto;
padding: 30px 0;
color: #DBDBDB;
font-family: Alegreya;
font-size: 18px;
line-height: 155.5%;
text-transform: capitalize;
}
.profe-box .sub-profe img {
border-radius: 1px;
border: 1px solid #E19805;
background: #4C4C4D;
box-shadow: 0px 3.382px 11px 0px rgba(117, 117, 117, 0.18);
padding: 10px;
}
.profe-box .sub-profe {
text-align: center;
}
.profe-box .sub-profe h6 {
margin: 0;
line-height: normal;
margin-top: 16px;
color: #fff;
}
.gold-text {
color: #E19805;
}
.profe-box .sub-profe p {
font-size: 16.911px;
margin-top: 12px;
margin-bottom: 17px;
}
.profe-box .profe-social-link {
display: inline-flex;
}
.profe-box .profe-social-link li {
margin: 0 5px;
}
.profe-box .profe-social-link li a {
color: #e19805;
font-size: 20px;
}
.profe-box .profe-social-link li a {
color: #e19805;
font-size: 20px;
}
.profe-box .profe-social-link li a:hover {
color: #fff;
}
/*-------------- our professional Css End ---------------------*/
/*-------------- Our Testimonial Css Start ---------------------*/
.testimonial {
background: #0E0E0E;
}
.inner-testi .test-hesd {
margin-bottom: 30px;
}
.inner-testi .client-say .testi-slide p {
max-width: 880px;
color: #DBDBDB;
text-align: center;
font-family: Alegreya;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 155.5%;
text-transform: capitalize;
margin: 0 auto;
}
.inner-testi .client-say .testi-slide p img {
float: left;
margin-right: 16px;
width: 50px;
}
.testi-slide .client-detail {
margin-top: 28px;
display: inline-flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.slick-slide img {
display: block;
width: 60px;
}
.testimonial .client-say .slick-prev.slick-arrow {
width: 46px;
height: 46px;
left: 35%;
transform: translateX(-50%);
}
.testimonial .client-say .slick-next.slick-arrow {
width: 46px;
height: 46px;
right: 31%;
transform: translateX(-50%);
}
.testi-slide .client-detail h4 {
color: #fff;
text-align: center;
font-family: "Encode Sans Expanded", sans-serif;
font-size: 16px;
font-weight: 600;
line-height: normal;
text-transform: capitalize;
margin: 9px 0 0 0;
}
.testimonial .testi-slide .client-detail p {
color: #fff;
text-align: center;
font-family: "Encode Sans Expanded", sans-serif;
font-size: 10px;
font-weight: 300;
text-transform: capitalize;
line-height: 20px;
}
.testimonial .slick-next, .testimonial .slick-prev {
z-index: 9;
}
.insta-media.slick-next {
right: 25px;
width: auto;
height: auto;
}
.testimonial .slick-prev {
left: -25px;
width: auto;
height: auto;
}
.testimonial .slick-prev:before {
content: '\f104';
font-weight: 900;
font-family: 'Font Awesome 5 Free';
font-size: 20px;
color: #e19805;
opacity: 1;
}
.testimonial .slick-next:before {
content: '\f105';
font-weight: 900;
font-family: 'Font Awesome 5 Free';
font-size: 20px;
color: #e19805;
opacity: 1;
}
/*-------------- Our Testimonial Css End ---------------------*/
/*-------------- Portfolio Css Start ---------------------*/
.main-portfolio {
background: #0E0E0E;
position: relative;
}
.main-portfolio .flat-gitar {
position: absolute;
top: 60%;
right: 0;
width: 260px;
transform: rotate(-45deg);
}
.inner-port h2 {
color: #fff;
}
.inner-port p {
color: #fff;
}
.inner-port .Gallery-view-more {
text-align: center;
display: block;
width: 100%;
color: #E19805;
font-size: 35px;
font-weight: bold;
margin-top: 50px;
}
.port-gallery {
display: grid;
grid-template-columns: auto auto;
gap:16px;
}
.port-gallery img {
width: 100%;
}
.inner-port .port-head p {
max-width: 900px;
margin: 0 auto;
padding: 25px 0 50px;
}
.insta-media .insta-link-box {
width: 100%;
}
.insta-media .insta-link-box img {
width: auto;
}
.insta-media .insta-link-box {
width: 100%;
text-align: center;
margin-top: 100px;
margin-bottom: 50px;
}
.insta-media .insta-link-box h3 {
color: #fff;
font-size: 35px;
font-weight: 700;
line-height: normal;
text-transform: capitalize;
margin: 18px 0;
}
.insta-media .insta-link-box a {
color: #fff;
font-size: 25px;
font-weight: 400;
line-height: normal;
text-decoration-line: underline;
text-transform: capitalize;
}
.insta-media .slick-next, .insta-media .slick-prev {
z-index: 9;
}
.insta-media.slick-next {
right: 25px;
width: auto;
height: auto;
}
.insta-media .slick-prev {
left: -25px;
width: auto;
height: auto;
}
.insta-media .slick-prev:before {
content: '\f104';
font-weight: 900;
font-family: 'Font Awesome 5 Free';
font-size: 20px;
color: #e19805;
opacity: 1;
}
.insta-media .slick-next:before {
content: '\f105';
font-weight: 900;
font-family: 'Font Awesome 5 Free';
font-size: 20px;
color: #e19805;
opacity: 1;
}
.image-slider img {
margin: 0 11px;
}
/*-------------- Portfolio Css End ---------------------*/
/*-------------- Get-in-touch Css Start ---------------------*/
.get-in-tuch {
background-image: url(../images/get-bg.png);
width: 100%;
background-size: cover;
background-repeat: no-repeat;
background-position: center bottom;
display: block;
}
.get-in-tuch .right-get .get-right-images {
width: 100%;
position: relative;
z-index: 1;
}
.get-in-tuch .right-get {
position: relative;
z-index: 1;
}
.get-in-tuch .right-get .get-dot-2 {
position: absolute;
left: -65px;
bottom: 15px;
}
.get-in-tuch .right-get .get-dot {
position: absolute;
top: -40px;
right: 0;
z-index: 0;
}
.get-in-tuch .right-get .gitar-img {
position: absolute;
bottom: -30px;
right: -80px;
z-index: 1;
}
.inner-get .left-form h5 {
line-height: normal;
}
.inner-get .left-form p {
color: #fff;
}
.inner-get .left-form form {
margin-top: 40px;
}
.inner-get .left-form form .name-phone-imput {
display: flex;
align-items: center;
width: 100%;
justify-content: space-between;
}
.inner-get .left-form form .name-phone-imput .name-filed, .inner-get .left-form form .name-phone-imput .phone-filed {
width: 49%;
}
.inner-get .left-form form .name-phone-imput .name-filed input, .inner-get .left-form form .name-phone-imput .phone-filed input {
width: 100%;
}
.inner-get .left-form .input-box input{
border-radius: 100px
}
.inner-get .left-form .input-box textarea{
border-radius: 33px;
}
.inner-get .left-form .input-box input, .inner-get .left-form .input-box textarea {
position: relative;
width: 100%;
}
.inner-get .left-form .input-box img {
position: absolute;
top: 50%;
z-index: 1;
right: 37px;
transform: translateY(-50%);
}
.inner-get .left-form .input-box, .inner-get .left-form .input-box.text-message {
position: relative;
margin-bottom: 15px;
}
.inner-get .left-form form button {
border: 0;
width: 100%;
transition: all ease-in-out .3s;
}
.inner-get .left-form form {
margin-right: 100px;
}
.inner-get .left-form .input-box input, .inner-get .left-form .input-box textarea {
position: relative;
width: 100%;
border: 1px solid rgba(175, 171, 163, 0.24);
background: #434343;
padding: 17px 27px;
}
.inner-get .left-form .input-box input::placeholder, .inner-get .left-form .input-box textarea::placeholder {
color: #BABABA;
font-size: 16px;
font-weight: 400;
line-height: normal;
text-transform: capitalize;
font-family: "Alegreya Sans";
}
.inner-get .left-form .input-box.text-message img {
position: absolute;
top: 37px;
}
/*-------------- Get-in-touch Css End ---------------------*/
/*-------------- Footer Css End ---------------------*/
footer {
background: #2F2D2D;
padding-top: 36px;
}
.inner-footer .foot-location h4 {
color: #F6F6F6;
font-size: 28px;
font-style: normal;
font-weight: 700;
line-height: normal;
margin: 0;
}
.inner-footer .foot-location p {
color: #F6F6F6;
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: normal;
margin: 11px 0 26px;
}
.inner-footer .foot-location p.location-link a {
color: #F6F6F6;
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: normal;
text-decoration-line: underline;
text-transform: uppercase;
}
.inner-footer .foot-location p.location-link {
margin: 0;
display: inline-flex;
align-items: center;
}
.inner-footer .foot-location p.location-link .location-icon {
margin-right: 6px;
}
.inner-footer .logo-nav {
text-align: center;
}
.inner-footer .logo-nav .footer-nav {
display: flex;
align-items: center;
justify-content: center;
margin-top: 22px;
gap: 62px;
}
.inner-footer .logo-nav .footer-nav li a {
color: #F6F6F6;
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: normal;
}
.inner-footer .foot-email p {
margin-bottom: 14px;
display: flex;
align-items: center;
}
.inner-footer .foot-email p:nth-child(2) {
margin-bottom: 0;
}
.inner-footer .foot-email p .location-icon {
margin-right: 10px;
}
.inner-footer .foot-email p a {
color: #F6F6F6;
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: normal;
text-transform: lowercase;
}
.inner-footer .foot-email .main-subscribe input {
width: 100%;
border: 0;
background: unset;
border-bottom: 1px solid #fff;
padding: 14px;
text-align: center;
color: #fff;
}
.inner-footer .foot-email .main-subscribe input::placeholder {
color: #FFF;
font-family: Arial;
font-size: 13px;
font-weight: 400;
line-height: normal;
opacity: 0.6;
}
.main-subscribe .common-btn {
padding: 14px 90px;
width: 100%;
text-align: center;
font-size: 16px;
font-weight: 700;
font-family: 'Alegreya Sans', sans-serif;
margin-top: 16px;
}
.main-subscribe .common-btn:hover {
background: #fff;
color: #e19805;
}
.main-subscribe {
margin-top: 35px;
}
.main-subscribe {
margin-top: 35px;
}
.bootom-footer .in-bot-foot .footer-social-link ul {
display: flex;
align-items: center;
gap: 12px;
}
.bootom-footer .in-bot-foot .footer-social-link ul li a:hover {
background: #e19805;
border: 1px solid #e19805;
}
.bootom-footer .in-bot-foot .footer-social-link ul li a {
width: 30px;
height: 30px;
border: 1px solid #fff;
border-radius: 100px;
display: inline-flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 13px;
}
.bootom-footer {
border-top: 0.5px solid #fff;
margin-top: 16px;
}
.bootom-footer .in-bot-foot {
padding: 13px 0;
}
.bootom-footer .in-bot-foot .right-bootom-footer {
text-align: end;
}
.bootom-footer .in-bot-foot .right-bootom-footer p, .bootom-footer .in-bot-foot .right-bootom-footer p a {
color: #F6F6F6;
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: normal;
text-transform: lowercase;
}
.bootom-footer .in-bot-foot .right-bootom-footer p a:hover{
color: #e19805;
}
/*.inner-footer .foot-email .main-subscribe*/ input:focus-visible {
outline: none !important;
}
/*-------------- Footer Css End ---------------------*/
img.img-fluid.mobile-logo {
display: block;
}
@media (min-width:992px){
img.img-fluid.mobile-logo {
display: none;
}
}
@media (min-width:1399px){
/* .container{
max-width: 1228px !important;
}*/
}
@media(max-width: 1599px){
.main-banner .guiter-image img {
width: 340px;
}
.get-in-tuch .right-get .gitar-img {
right: -50px;
}
.main-why-choose .inner-why .choose-list .in-chose-list {
padding: 41px 50px 41.5px 50px;
}
.main-why-choose .inner-why .choose-content {
padding: 0 20px 0 80px;
}
.main-about .flat-gitar {
width: 150px;
right: 32px;
}
.main-portfolio .flat-gitar {
top: 65%;
right: 50px;
width: 160px;
}
}
@media(max-width: 1399px){
.main-banner .guiter-image {
left: 48%;
}
.main-why-choose .inner-why .choose-list .in-chose-list {
padding: 29px 30px 30px 30px;
}
.main-why-choose .inner-why .choose-content {
padding: 0 20px 0 50px;
}
.main-banner .guiter-image img {
width: 290px;
}
}
@media (max-width:1199px){
.py_100{
padding-top: 70px;
padding-bottom:70px;
}
header a.navbar-brand img {
max-width: 150px;
}
.main-why-choose .inner-why .choose-list .in-chose-list {
padding: 60px 20px 61px 20px;
}
.main-why-choose .inner-why .choose-content {
padding: 50px;
}
.main-banner .inner-banner .banner-right .banner-content h4 {
font-size: 41.462px;
}
.main-banner .inner-banner .banner-right .banner-content h2 {
font-size: 50.852px;
}
/*.main-banner .inner-banner .banner-left-img img, .main-banner .inner-banner .banner-right img {
height: 650px;
}*/
.get-in-tuch .right-get .gitar-img {
right: -30px;
}
.main-banner .guiter-image img {
width: 230px;
}
.music-content h2 {
font-size: 51.846px;
}
.music-content h5 {
line-height: 58.58px;
}
.music-content p {
margin: 20px 0 20px;
}
.main-why-choose .inner-why {
flex-wrap: wrap;
}
.main-why-choose .inner-why .choose-content {
flex: 0 0 100%;
}
.main-why-choose .inner-why .chosse-main-image, .main-why-choose .inner-why .choose-list {
flex: 0 0 50%;
}
.inner-footer .logo-nav .footer-nav {
gap: 30px;
}
}
@media (max-width:991px){
.py_100{
padding-top: 50px;
padding-bottom: 50px;
}
header a.navbar-brand img {
max-width: 170px;
}
.main-banner .inner-banner {
display: flex;
flex-direction: column;
}
.main-banner .guiter-image img {
display: none;
}
.inner-footer .logo-nav .footer-nav {
gap: 35px;
}
.inner-footer .logo-nav {
text-align: center;
margin-bottom: 20px;
}
.main-banner .inner-banner .banner-right img {
width: 100%;
height: 500px;
object-fit: cover;
}
.main-about .flat-gitar {
display: none;
}
ul.about-list {
margin-bottom: 20px;
}
.about-content p {
margin: 20px 0 20px 0;
color: #DBDBDB;
}
.main-about .inner-about .about-content {
margin-bottom: 20px;
}
.main-about .inner-about .ab {
position: absolute;
right: 0;
top: 40%;
}
.main-music-classes {
background-position: center left;
padding: 50px 0;
}
.inner-music .left-img img {
width: 100%;
}
.inner-music .free-classes {
right: -10px;
}
.inner-music .left-img {
position: relative;
margin-bottom: 20px;
}
.inner-services .img-box .inn-img-box img {
width: 100%;
}
.inner-services .img-box {
margin-top: 0;
}
.inner-services .img-box .inn-img-box {
margin-top: 20px;
}
.main-why-choose .inner-why .choose-list .in-chose-list {
padding: 30px 20px 30px 20px;
}
.main-why-choose .inner-why .choose-list .in-chose-list .text-list-c h6 {
line-height: 30.716px;
}
.main-why-choose .inner-why .choose-list .in-chose-list img {
filter: brightness(0) invert(1);
margin-right: 20px;
width: 50px;
}
.profe-box .sub-profe img {
width: 100%;
}
.proff-head p {
max-width: 100%;
padding-bottom: 0;
}
.profe-box .sub-profe {
text-align: center;
margin-top: 20px;
}
.inner-port .Gallery-view-more {
margin-top: 20px;
}
.insta-media .insta-link-box {
margin-top: 30px;
margin-bottom: 30px;
}
.main-portfolio .flat-gitar {
display: none;
}
.get-in-tuch .inner-get .row {
flex-direction: column-reverse;
}
.get-in-tuch .inner-get .left-form {
margin-top: 20px;
}
.get-in-tuch .right-get .get-dot {
display: none;
}
.get-in-tuch .right-get .get-dot {
display: none;
}
.get-in-tuch .right-get .get-dot-2 {
display: none;
}
.inner-get .left-form form {
margin-right: 0;
}
.main-about .inner-about .ab img {
width: 160px;
}
}
@media (max-width:767px){
.py_100 {
padding-top: 30px;
padding-bottom: 30px;
}
.inner-footer .foot-location p {
margin: 10px 0 10px;
}
.main-why-choose .inner-why .chosse-main-image, .main-why-choose .inner-why .choose-list {
flex: 0 0 100%;
}
.testimonial .client-say .slick-prev.slick-arrow {
top: 60%;
}
.testimonial .client-say .slick-next.slick-arrow {
right: 27%;
top: 60%;
}
h2 {
font-size: 40px;
line-height: 50.981px;
margin: 0;
}
.inner-port .port-head p {
max-width: 100%;
margin: 0 auto;
padding: 25px 0 25px;
}
.port-gallery {
gap: 16px 16px;
}
.get-in-tuch .right-get .gitar-img {
right: 0;
}
.bootom-footer .in-bot-foot .footer-social-link ul {
justify-content: center;
}
.bootom-footer .in-bot-foot .right-bootom-footer {
text-align: center;
margin-top: 15px;
}
}
@media (max-width: 575px){
.main-about .inner-about .ab {
display: none;
}
.main-why-choose .inner-why .choose-content {
padding: 20px;
}
.main-banner .inner-banner .banner-right .banner-content {
padding: 0 20px;
}
.inner-footer .logo-nav .footer-nav {
gap: 15px;
}
}
@media (max-width:480px){
header .nav-btn a {
padding-left: 10px !important;
padding-right: 10px !important;
}
header a.navbar-brand img {
max-width: 140px;
}
}
